diff --git a/index.html b/index.html
index 9dd6b3d..d05c413 100644
--- a/index.html
+++ b/index.html
@@ -179,6 +179,8 @@
         .text-gray-900 { color: rgb(var(--text-primary-rgb)) !important; }
         .text-gray-800 { color: rgba(var(--text-primary-rgb), 0.94) !important; }
         .text-gray-700 { color: rgba(var(--text-primary-rgb), 0.82) !important; }
+        .text-gray-100 { color: rgb(var(--text-primary-rgb)) !important; }
+        .text-gray-50 { color: rgb(var(--text-primary-rgb)) !important; }
         .text-gray-600 { color: rgba(var(--text-secondary-rgb), 0.96) !important; }
         .text-gray-500 { color: rgba(var(--text-secondary-rgb), 0.78) !important; }
         .text-gray-400 { color: rgba(var(--text-tertiary-rgb), 0.94) !important; }
diff --git a/js/views/Pantry.js b/js/views/Pantry.js
index b44e79f..2a9a182 100644
--- a/js/views/Pantry.js
+++ b/js/views/Pantry.js
@@ -551,26 +551,28 @@ function classifyIngredients(searchQuery) {
 
 /* ══════════════════════ TILE RENDERING ══════════════════════ */
 
-function tileIconHtml(item) {
+function tileIconHtml(item, size = 'sm') {
+    const wrap = size === 'lg' ? 'w-9 h-9' : 'w-6 h-6';
+    const iconSize = size === 'lg' ? 'text-[18px]' : 'text-[12px]';
     if (item.image) {
-        return `<div class="w-6 h-6 rounded-md shrink-0 overflow-hidden" style="background:rgb(var(--card-soft-rgb));"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain" style="padding:1px;"></div>`;
+        return `<div class="${wrap} shrink-0 overflow-hidden"><img src="${esc(item.image)}" alt="" class="w-full h-full object-contain"></div>`;
     }
-    return `<div class="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style="background:rgb(var(--card-soft-rgb));"><i class="fas ${item.icon} text-[11px]" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
+    return `<div class="${wrap} flex items-center justify-center shrink-0"><i class="fas ${item.icon} ${iconSize}" style="color:rgb(var(--text-faint-rgb));"></i></div>`;
 }
 
 function shortfallTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
-        <div class="flex items-center gap-1.5 min-w-0">
-            ${tileIconHtml(item)}
-            <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
-        </div>
-        <div class="w-full flex items-center gap-2">
-            <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
-                <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+        ${tileIconHtml(item, 'lg')}
+        <div class="flex-1 min-w-0 flex flex-col gap-1">
+            <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
+            <div class="flex items-center gap-2">
+                <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
+                    <div class="h-full rounded-full" style="width:${item.fillPct}%; background:${SHORTFALL_ACCENT};"></div>
+                </div>
+                <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
             </div>
-            <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--text-body-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
         </div>
     </button>`;
 }
@@ -578,16 +580,16 @@ function shortfallTileHtml(item) {
 function sufficientTileHtml(item) {
     const clamp = item.name.length > 25 ? ' min-w-0' : '';
     return `
-    <button type="button" class="pv2-tile text-left rounded-2xl flex flex-col gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:6rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
-        <div class="flex items-center gap-1.5 min-w-0">
-            ${tileIconHtml(item)}
-            <p class="text-[11px] font-normal leading-tight truncate min-w-0" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
-        </div>
-        <div class="w-full flex items-center gap-2">
-            <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
-                <div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
+    <button type="button" class="pv2-tile text-left rounded-2xl flex items-center gap-2 px-2.5 py-2${clamp} transition-all active:scale-[0.98]" style="flex:1 0 auto; min-width:8.5rem; max-width:100%; background:rgb(var(--card-rgb)); border:none; box-shadow:var(--shadow-card);" data-id="${esc(item.ingredientId)}">
+        ${tileIconHtml(item, 'lg')}
+        <div class="flex-1 min-w-0 flex flex-col gap-1">
+            <p class="text-[11px] font-normal leading-tight truncate" style="color:rgb(var(--text-body-rgb));">${esc(item.name)}</p>
+            <div class="flex items-center gap-2">
+                <div class="flex-1 h-1 rounded-full overflow-hidden" style="background:rgb(var(--app-bg-rgb));">
+                    <div class="h-full rounded-full" style="width:100%; background:rgb(var(--success-rgb));"></div>
+                </div>
+                <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
             </div>
-            <span class="shrink-0 text-[10px] font-semibold tabular-nums" style="color:rgb(var(--success-rgb));">${esc(formatQty(item.pantryQty))}<span class="font-medium" style="color:rgb(var(--text-dim-rgb));">/${esc(formatQty(item.needed))} ${esc(unitLabel(item.unit))}</span></span>
         </div>
     </button>`;
 }