diff --git a/frontend/src/views/Inventory.vue b/frontend/src/views/Inventory.vue
index 05b3121..8a49079 100644
--- a/frontend/src/views/Inventory.vue
+++ b/frontend/src/views/Inventory.vue
@@ -23,9 +23,12 @@
                                     <div class="btn-group">
                                         <button class="btn" @click="fetchItemsForOwner">Refresh</button>
                                         <router-link v-if="canEdit" :to="addItemRoute" class="btn btn-primary">Add</router-link>
-                                        <button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
+                                        <button v-if="layout === 'grid'" @click="layout = 'masonry'" class="btn">
                                             <b-icon-list></b-icon-list>
                                         </button>
+                                        <button v-else-if="layout === 'masonry'" @click="layout = 'table'" class="btn">
+                                            <b-icon-columns-gap></b-icon-columns-gap>
+                                        </button>
                                         <button v-else @click="layout = 'grid'" class="btn">
                                             <b-icon-grid></b-icon-grid>
                                         </button>
@@ -55,32 +58,30 @@
                                     </td>
                                     <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
                                     <td class="table-action">
-                                        <router-link v-if="canEdit" :to="itemEditRoute(item)">
+                                        <router-link v-if="canEdit" :to="itemEditRoute(item)" title="Edit">
                                             <b-icon-pencil-square></b-icon-pencil-square>
                                         </router-link>
-                                        <a v-if="canEdit" href="#" @click.prevent="tryDeleteItem(item)">
+                                        <a v-if="canEdit" href="#" title="Delete" @click.prevent="tryDeleteItem(item)">
                                             <b-icon-trash></b-icon-trash>
                                         </a>
                                         <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)">
                                             <b-icon-link></b-icon-link>
                                         </router-link>
-                                        <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)">
+                                        <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)" title="Print Label">
                                             <b-icon-qr-code></b-icon-qr-code>
                                         </router-link>
                                     </td>
                                 </tr>
                                 </tbody>
                             </table>
-                            <div class="card-body" v-else>
-                                <div class="row">
-                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="item in items"
-                                         :key="item.id">
+                            <div class="card-body" v-else-if="layout === 'masonry'">
+                                <div class="masonry-grid">
+                                    <div class="masonry-item" v-for="item in items" :key="item.id">
                                         <div class="card">
-                                            <img :src="item.image" class="" :alt="item.image">
                                             <authenticated-image v-if="only_images(item.files).length > 0"
                                                                  :src="only_images(item.files)[0].name"
                                                                  :owner="only_images(item.files)[0].owner"
-                                                                 class="card-img-top img-preview"/>
+                                                                 class="card-img-top img-preview-masonry"/>
                                             <div class="card-body">
                                                 <h5 class="card-title mb-0">
                                                     <router-link :to="itemRoute(item)">
@@ -93,17 +94,61 @@
                                                 </div>
                                                 <div class="btn-group">
                                                     <button v-if="canEdit" class="btn btn-danger btn-sm"
-                                                            @click="tryDeleteItem(item)">Delete
+                                                            title="Delete" @click="tryDeleteItem(item)">
+                                                        <b-icon-trash></b-icon-trash>
                                                     </button>
                                                     <router-link v-if="canEdit" :to="itemEditRoute(item)"
-                                                                 class="btn btn-primary btn-sm">Edit
+                                                                 class="btn btn-primary btn-sm" title="Edit">
+                                                        <b-icon-pencil-square></b-icon-pencil-square>
                                                     </router-link>
                                                     <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
                                                                  class="btn btn-secondary btn-sm">
                                                         <b-icon-link></b-icon-link>
                                                     </router-link>
                                                     <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)"
+                                                                 class="btn btn-secondary btn-sm" title="Print Label">
+                                                        <b-icon-qr-code></b-icon-qr-code>
+                                                    </router-link>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card-body" v-else>
+                                <div class="row">
+                                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="item in items"
+                                         :key="item.id">
+                                        <div class="card w-100 d-flex flex-column">
+                                            <authenticated-image v-if="only_images(item.files).length > 0"
+                                                                 :src="only_images(item.files)[0].name"
+                                                                 :owner="only_images(item.files)[0].owner"
+                                                                 class="card-img-top img-preview-grid"/>
+                                            <div class="card-body d-flex flex-column flex-grow-1">
+                                                <h5 class="card-title mb-0">
+                                                    <router-link :to="itemRoute(item)">
+                                                        {{ item.name }}
+                                                    </router-link></h5>
+                                                <div class="card-text text-black-50">
+                                                    <span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
+                                                    <span class="badge bg-secondary text-white">{{ item.visibility_policy }}</span>
+                                                    <span class="float-right">{{ item.owned_quantity }}</span>
+                                                </div>
+                                                <div class="btn-group mt-auto">
+                                                    <button v-if="canEdit" class="btn btn-danger btn-sm"
+                                                            title="Delete" @click="tryDeleteItem(item)">
+                                                        <b-icon-trash></b-icon-trash>
+                                                    </button>
+                                                    <router-link v-if="canEdit" :to="itemEditRoute(item)"
+                                                                 class="btn btn-primary btn-sm" title="Edit">
+                                                        <b-icon-pencil-square></b-icon-pencil-square>
+                                                    </router-link>
+                                                    <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
                                                                  class="btn btn-secondary btn-sm">
+                                                        <b-icon-link></b-icon-link>
+                                                    </router-link>
+                                                    <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)"
+                                                                 class="btn btn-secondary btn-sm" title="Print Label">
                                                         <b-icon-qr-code></b-icon-qr-code>
                                                     </router-link>
                                                 </div>
@@ -248,7 +293,42 @@ export default {
 </script>
 
 <style scoped>
-.img-preview {
+.img-preview-grid {
+    height: 160px;
     object-fit: cover;
 }
+
+.img-preview-masonry {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+.masonry-grid {
+    column-count: 2;
+    column-gap: 1rem;
+}
+
+.masonry-item {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+}
+
+@media (min-width: 768px) {
+    .masonry-grid {
+        column-count: 3;
+    }
+}
+
+@media (min-width: 992px) {
+    .masonry-grid {
+        column-count: 4;
+    }
+}
+
+@media (min-width: 1200px) {
+    .masonry-grid {
+        column-count: 6;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/StorageLocation.vue b/frontend/src/views/StorageLocation.vue
index e8d5f35..aa702fb 100644
--- a/frontend/src/views/StorageLocation.vue
+++ b/frontend/src/views/StorageLocation.vue
@@ -55,16 +55,16 @@
                                         <span class="badge bg-secondary text-white">{{ location.visibility_policy }}</span>
                                     </td>
                                     <td class="table-action">
-                                        <router-link :to="locationEditRoute(location)">
+                                        <router-link :to="locationEditRoute(location)" title="Edit">
                                             <b-icon-pencil-square></b-icon-pencil-square>
                                         </router-link>
-                                        <a href="#" @click.prevent="tryDeleteLocation(location)">
+                                        <a href="#" title="Delete" @click.prevent="tryDeleteLocation(location)">
                                             <b-icon-trash></b-icon-trash>
                                         </a>
                                         <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)">
                                             <b-icon-link></b-icon-link>
                                         </router-link>
-                                        <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)">
+                                        <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)" title="Print Label">
                                             <b-icon-qr-code></b-icon-qr-code>
                                         </router-link>
                                     </td>
@@ -73,10 +73,10 @@
                             </table>
                             <div class="card-body" v-else>
                                 <div class="row">
-                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="location in locations"
+                                    <div class="col-12 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="location in locations"
                                          :key="location.id">
-                                        <div class="card">
-                                            <div class="card-body">
+                                        <div class="card w-100 d-flex flex-column">
+                                            <div class="card-body d-flex flex-column flex-grow-1">
                                                 <h5 class="card-title mb-0">
                                                     <router-link :to="locationRoute(location)">
                                                         {{ location.name }}
@@ -90,19 +90,21 @@
                                                 <div class="card-text" v-if="location.description">
                                                     <small>{{ location.description }}</small>
                                                 </div>
-                                                <div class="btn-group mt-2">
+                                                <div class="btn-group mt-auto">
                                                     <button class="btn btn-danger btn-sm"
-                                                            @click="tryDeleteLocation(location)">Delete
+                                                            title="Delete" @click="tryDeleteLocation(location)">
+                                                        <b-icon-trash></b-icon-trash>
                                                     </button>
                                                     <router-link :to="locationEditRoute(location)"
-                                                                 class="btn btn-primary btn-sm">Edit
+                                                                 class="btn btn-primary btn-sm" title="Edit">
+                                                        <b-icon-pencil-square></b-icon-pencil-square>
                                                     </router-link>
                                                     <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)"
                                                                  class="btn btn-secondary btn-sm">
                                                         <b-icon-link></b-icon-link>
                                                     </router-link>
                                                     <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)"
-                                                                 class="btn btn-secondary btn-sm">
+                                                                 class="btn btn-secondary btn-sm" title="Print Label">
                                                         <b-icon-qr-code></b-icon-qr-code>
                                                     </router-link>
                                                 </div>
@@ -233,11 +235,11 @@ export default {
     font-size: 0.8rem;
 }
 
-.btn-group.mt-2 {
+.btn-group.mt-auto {
     width: 100%;
 }
 
-.btn-group.mt-2 .btn {
+.btn-group.mt-auto .btn {
     flex: 1;
 }
 </style>