diff --git a/public/js/quickmenu/carddeck.js b/public/js/quickmenu/carddeck.js
index 0ca318d..6cc7a2c 100644
--- a/public/js/quickmenu/carddeck.js
+++ b/public/js/quickmenu/carddeck.js
@@ -119,7 +119,7 @@ function renderShell() {
 
       /* ── Rechte Spalte: Deck-Builder ─────────── */
       .kd-deckbuilder {
-        width: 380px;
+        width: 500px;
         flex-shrink: 0;
         display: flex;
         flex-direction: column;
@@ -325,7 +325,7 @@ function renderShell() {
       .kd-deck-grid {
         flex: 1;
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         gap: 8px;
         overflow-y: auto;
         padding: 10px 12px;
@@ -344,6 +344,11 @@ function renderShell() {
         display: flex;
         flex-direction: column;
       }
+      .kd-deck-card-wrap {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
       .kd-deck-card:hover {
         border-color: #ff4444;
         transform: scale(1.05);
@@ -376,24 +381,27 @@ function renderShell() {
         background: rgba(0,0,0,0.85);
         border-top: 1px solid #2a3a10;
         border-radius: 0 0 6px 6px;
-        height: 18px;
+        height: 20px;
         flex-shrink: 0;
       }
       .kd-deck-card-name {
-        font-family: "Cinzel", serif; font-size: 8px;
+        font-family: "Cinzel", serif; font-size: 9px;
         color: #c8e0a6; text-align: center;
       }
-      .kd-deck-amount-badge {
-        position: absolute;
-        top: 3px; right: 3px;
-        background: rgba(70,130,40,0.9);
-        border: 1px solid #88cc44;
-        border-radius: 3px;
-        font-family: "Cinzel", serif; font-size: 10px;
-        font-weight: bold; color: #fff;
-        padding: 0 4px;
-        pointer-events: none;
+      .kd-deck-card-count {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 3px 6px;
+        background: rgba(0,0,0,0.6);
+        border: 1px solid #2a3a10;
+        border-radius: 5px;
+        font-family: "Cinzel", serif;
+        font-size: 11px;
+        font-weight: bold;
       }
+      .kd-deck-card-count .owned { color: #c8a86a; }
+      .kd-deck-card-count .indeck { color: #88cc44; }
 
       /* ── Empty / Loading States ──────────────── */
       .kd-empty {
@@ -718,15 +726,25 @@ function renderDeckGrid(grid, cards) {
     grid.innerHTML = `<div class="kd-empty-deck">Deck ist leer.<br>Klicke links auf eine Karte um sie hinzuzufügen.</div>`;
     return;
   }
-  grid.innerHTML = cards.map(c => `
-    <div class="kd-deck-card" data-card-id="${c.card_id}" data-level="${c.level}" title="Klicken zum Entfernen: ${c.name}">
-      ${c.amount > 1 ? `<span class="kd-deck-amount-badge">${c.amount}×</span>` : ""}
-      <img src="/images/cards/${c.image}" alt="${c.name}"
-           onerror="this.src='/images/avatar_placeholder.svg'">
-      <div class="kd-deck-card-footer">
-        <span class="kd-deck-card-name">${c.name}</span>
+  // Owned-Anzahl aus userCardsCache auslesen
+  grid.innerHTML = cards.map(c => {
+    const ownedEntry = userCardsCache.find(u => u.card_id === c.card_id && u.level === c.level);
+    const ownedAmt = ownedEntry ? ownedEntry.amount : "?";
+    return `
+    <div class="kd-deck-card-wrap">
+      <div class="kd-deck-card" data-card-id="${c.card_id}" data-level="${c.level}" title="Klicken zum Entfernen: ${c.name}">
+        <img src="/images/cards/${c.image}" alt="${c.name}"
+             onerror="this.src='/images/avatar_placeholder.svg'">
+        <div class="kd-deck-card-footer">
+          <span class="kd-deck-card-name">${c.name}</span>
+        </div>
       </div>
-    </div>`).join("");
+      <div class="kd-deck-card-count">
+        <span class="owned" title="Besessen">${ownedAmt}×</span>
+        <span class="indeck" title="Im Deck">🃏 ${c.amount}</span>
+      </div>
+    </div>`;
+  }).join("");
 
   grid.querySelectorAll(".kd-deck-card").forEach(el => {
     el.addEventListener("click", async () => {