diff --git a/public/images/items/beutel.png b/public/images/items/beutel.png
new file mode 100644
index 0000000..59bc3d7
Binary files /dev/null and b/public/images/items/beutel.png differ
diff --git a/public/js/buildings/schwarzmarkt.js b/public/js/buildings/schwarzmarkt.js
index 16dd3f7..548192d 100644
--- a/public/js/buildings/schwarzmarkt.js
+++ b/public/js/buildings/schwarzmarkt.js
@@ -39,7 +39,6 @@ Geheimhandel
 `;
 
   loadPages();
-
   initMarketTabs();
 }
 
@@ -51,40 +50,75 @@ async function loadPages() {
 
   let html = "";
 
-  for (let i = 1; i <= 8; i++) {
+  for (let i = 1; i <= data.maxPages; i++) {
+    const price = data.prices.find((p) => p.page === i);
+
     if (data.ownedPages.includes(i)) {
       html += `
-<div class="market-page owned">
-Seite ${i} ✔
+<div class="market-slot owned">
+
+<img src="/images/items/beutel.png" class="bag-icon">
+
+<div class="bag-status owned">
+✔
+</div>
+
+</div>
+`;
+    } else if (price) {
+      html += `
+<div class="market-slot buy" data-page="${i}">
+
+<img src="/images/items/beutel.png" class="bag-icon">
+
+<div class="bag-price">
+${price.price} <span class="gold-icon">🪙</span>
+</div>
+
+<button class="buy-button">
+Kaufen
+</button>
+
 </div>
 `;
     } else {
-      const price = data.prices.find((p) => p.page === i);
+      html += `
+<div class="market-slot locked">
+
+<img src="/images/items/beutel.png" class="bag-icon">
+
+<div class="bag-status locked">
+🔒
+</div>
 
-      if (price) {
-        html += `
-<div class="market-page buy" data-page="${i}">
-Seite ${i} Kaufen (${price.price} Gold)
 </div>
 `;
-      } else {
-        html += `
-<div class="market-page locked">
-Seite ${i} 🔒
+
 </div>
 `;
-      }
     }
   }
 
   container.innerHTML = html;
 }
 
+/* Kaufen */
+
 document.addEventListener("click", async (e) => {
-  if (!e.target.classList.contains("buy")) return;
+  const button = e.target.closest(".buy-button");
+
+  if (!button) return;
+
+  const slot = button.closest(".market-slot");
+
+  const page = slot.dataset.page;
 
   const res = await fetch("/api/blackmarket/buy-page", {
     method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ page }),
   });
 
   const data = await res.json();
@@ -94,11 +128,11 @@ document.addEventListener("click", async (e) => {
     return;
   }
 
-  alert("Seite " + data.page + " freigeschaltet!");
-
   loadPages();
 });
 
+/* Tabs */
+
 function initMarketTabs() {
   document.querySelectorAll(".market-tab").forEach((tab) => {
     tab.addEventListener("click", () => {
diff --git a/routes/blackmarket.js b/routes/blackmarket.js
index 43d7686..0d77528 100644
--- a/routes/blackmarket.js
+++ b/routes/blackmarket.js
@@ -23,9 +23,18 @@ router.get("/pages", auth, async (req, res) => {
       ORDER BY page
     `);
 
+    const [[config]] = await db.query(`
+SELECT config_value
+FROM game_config
+WHERE config_key = 'inventory_max_pages'
+`);
+
+    const maxPages = config ? config.config_value : 8;
+
     res.json({
       ownedPages: owned.map((p) => p.page),
       prices: prices,
+      maxPages: maxPages,
     });
   } catch (err) {
     console.error(err);