diff --git a/www/css/inventory.css b/www/css/inventory.css
index f6a74be..1bc5383 100644
--- a/www/css/inventory.css
+++ b/www/css/inventory.css
@@ -4,15 +4,13 @@ License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
-#item-bin .item {
+#item-bin .card {
     text-align: center;
-    border-radius: 5px;
-    border: 1px solid white;
     min-height: 300px;
     position: relative;
 }
 
-#item-bin .item .badge {
+#item-bin .card .badge {
     position: absolute;
     top: -10px;
     right: -10px;
diff --git a/www/js/inventory.js b/www/js/inventory.js
index fdc6251..3e37680 100644
--- a/www/js/inventory.js
+++ b/www/js/inventory.js
@@ -48,13 +48,15 @@ function loadInventory(reload) {
 
         items.forEach(function (item) {
             $("#item-bin").append('<div class="col-100 tablet-33 desktop-25 item-col">'
-                    + '<div class="item padding margin" data-uuids="' + item.uuids.join("|") + '" data-qty="' + item.qty + '">'
-                    + '<i class="item-icon ' + item.icon + ' text-color-' + item.color + '"></i><br />'
+                    + '<div class="card padding-half">'
                     + (item.qty > 1 ? '<span class="badge color-green text-color-black padding">x' + item.qty + '</span>' : "")
+                    + '<div class="item card-content" data-uuids="' + item.uuids.join("|") + '" data-qty="' + item.qty + '">'
+                    + '<i class="item-icon ' + item.icon + ' text-color-' + item.color + '"></i><br />'
                     + '<h3>' + item.name + '</h3>'
                     + item.description
                     + (item.classname == "healmagic" ? '<button class="button button-fill margin-top useitem-button">Use</button>' : '')
                     + '</div>'
+                    + '</div>'
                     + '</div>');
         })
     }, function (msg) {