diff --git a/src/components/Cards.vue b/src/components/Cards.vue
index 76083fb..426ce0d 100644
--- a/src/components/Cards.vue
+++ b/src/components/Cards.vue
@@ -29,16 +29,20 @@
             </div>
         </div>
         <div class="col-lg-9 col-xl-8">
-            <div class="card-columns">
-                <div
-                    class="card-list-item card bg-dark text-light"
-                    v-for="item in internalItems"
-                    :key="item[keyName]"
-                    @click="$emit('itemActivated', item)"
-                >
-                    <slot v-bind:item="item"/>
-                </div>
+          <div class="row">
+            <div
+              class="mb-4 col-lg-4 col-xl-3"
+              v-for="item in internalItems"
+              :key="item[keyName]"
+              >
+              <div
+                  class="card-list-item card bg-dark text-light"
+                  @click="$emit('itemActivated', item)"
+              >
+                <slot v-bind:item="item"/>
+              </div>
             </div>
+          </div>
         </div>
     </div>
 </template>
diff --git a/src/views/Items.vue b/src/views/Items.vue
index 7cb2211..f414a0f 100644
--- a/src/views/Items.vue
+++ b/src/views/Items.vue
@@ -23,13 +23,13 @@
                     @itemActivated="openLightboxModalWith($event)"
                 >
                   <div class="btn-group">
-                    <button class="btn btn-success" @click.stop="markItemReturned(item)">
+                    <button class="btn btn-success" @click.stop="markItemReturned(item)" title="returned">
                       <font-awesome-icon icon="check"/>
                     </button>
-                    <button class="btn btn-secondary" @click.stop="openEditingModalWith(item)" >
+                    <button class="btn btn-secondary" @click.stop="openEditingModalWith(item)" title="edit">
                       <font-awesome-icon icon="edit"/>
                     </button>
-                    <button class="btn btn-danger" @click.stop="deleteItem(item)" >
+                    <button class="btn btn-danger" @click.stop="deleteItem(item)" title="delete">
                       <font-awesome-icon icon="trash"/>
                     </button>
                   </div>
@@ -53,14 +53,14 @@
                 <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
                 <div class="row mx-auto mt-2">
                     <div class="btn-group">
-                      <button class="btn btn-outline-success" @click.stop="markItemReturned(item)">
-                        <font-awesome-icon icon="check"/> returned
+                      <button class="btn btn-outline-success" @click.stop="markItemReturned(item)" title="returned">
+                        <font-awesome-icon icon="check"/>
                       </button>
-                      <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)">
-                        <font-awesome-icon icon="edit"/> edit
+                      <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)" title="edit">
+                        <font-awesome-icon icon="edit"/>
                       </button>
-                        <button class="btn btn-outline-danger" @click.stop="deleteItem(item)">
-                          <font-awesome-icon icon="trash"/> delete
+                        <button class="btn btn-outline-danger" @click.stop="deleteItem(item)" title="delete">
+                          <font-awesome-icon icon="trash"/>
                         </button>
                     </div>
                 </div>