diff --git a/public/css/building.css b/public/css/building.css
index 21ef0f5..125ef65 100644
--- a/public/css/building.css
+++ b/public/css/building.css
@@ -381,13 +381,14 @@ body {
   display: grid;
 
   grid-template-columns: repeat(8, 70px);
-  grid-auto-rows: 70px;
+  grid-template-rows: repeat(4, 70px);
 
   gap: 8px;
 
-  justify-content: center;
+  max-height: 320px;
+  overflow-y: auto;
 
-  margin-top: 30px;
+  padding: 10px;
 }
 
 .inventory-slot {
diff --git a/public/js/buildings/wohnhaus.js b/public/js/buildings/wohnhaus.js
index e6ac207..580f85c 100644
--- a/public/js/buildings/wohnhaus.js
+++ b/public/js/buildings/wohnhaus.js
@@ -105,21 +105,31 @@ async function loadInventory() {
 
   let html = "";
 
-  items.forEach((item) => {
-    const icon = item.icon || "/images/items/default.png";
+  /* feste 32 slots erzeugen */
 
-    html += `
-<div class="inventory-slot"
-data-slot="${item.equip_slot || ""}"
-data-id="${item.id}"
-data-level="${item.level}"
-draggable="true">
+  for (let i = 0; i < 32; i++) {
+    const item = items[i];
 
-<img src="${icon}">
+    if (item) {
+      const icon = item.icon || "/images/items/default.png";
 
-</div>
+      html += `
+      <div class="inventory-slot"
+      data-slot="${item.equip_slot || ""}"
+      data-id="${item.id}"
+      data-level="${item.level}"
+      draggable="true">
+
+      <img src="${icon}">
+
+      </div>
+      `;
+    } else {
+      html += `
+<div class="inventory-slot empty"></div>
 `;
-  });
+    }
+  }
 
   grid.innerHTML = html;
 }