diff --git a/public/app.js b/public/app.js
index fbc7b27..f80b395 100644
--- a/public/app.js
+++ b/public/app.js
@@ -254,17 +254,15 @@ function renderCategoryFilterCards() {
     <button 
       onclick="setCategoryFilter('All')" 
       data-filter-cat="All"
-      class="filter-cat-card p-3 rounded-2xl border text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
+      class="filter-cat-card p-3.5 rounded-2xl border text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
     >
-      <div class="w-8 h-8 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center shrink-0">
-        <i data-lucide="layout-grid" class="w-4 h-4"></i>
-      </div>
-      <div class="min-w-0 flex-1">
-        <div class="flex items-center justify-between gap-1">
-          <h4 class="text-xs font-bold text-white truncate">All Categories</h4>
-          <span id="cat-count-all" class="text-[10px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-400">0</span>
+      <div class="flex items-center gap-3 min-w-0">
+        <div class="w-9 h-9 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center shrink-0">
+          <i data-lucide="layout-grid" class="w-4 h-4 sm:w-5 sm:h-5"></i>
         </div>
+        <span class="text-xs sm:text-sm font-bold text-white">All Categories</span>
       </div>
+      <span id="cat-count-all" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0">0</span>
     </button>
   `;
 
@@ -273,17 +271,15 @@ function renderCategoryFilterCards() {
       <button 
         onclick="setCategoryFilter('${escapeHtml(cat.id)}')" 
         data-filter-cat="${escapeHtml(cat.id)}"
-        class="filter-cat-card p-3 rounded-2xl border text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
+        class="filter-cat-card p-3.5 rounded-2xl border text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
       >
-        <div class="w-8 h-8 rounded-xl bg-slate-800 text-teal-400 flex items-center justify-center shrink-0">
-          <i data-lucide="${escapeHtml(cat.icon || 'package')}" class="w-4 h-4"></i>
-        </div>
-        <div class="min-w-0 flex-1">
-          <div class="flex items-center justify-between gap-1">
-            <h4 class="text-xs font-bold text-white truncate">${escapeHtml(cat.name)}</h4>
-            <span id="cat-count-${escapeHtml(cat.id.replace(/[^a-zA-Z0-9]/g, ''))}" class="text-[10px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-400">0</span>
+        <div class="flex items-center gap-3 min-w-0">
+          <div class="w-9 h-9 rounded-xl bg-slate-800 text-teal-400 flex items-center justify-center shrink-0 border border-slate-700/60">
+            <i data-lucide="${escapeHtml(cat.icon || 'package')}" class="w-4 h-4 sm:w-5 sm:h-5"></i>
           </div>
+          <span class="text-xs sm:text-sm font-bold text-white leading-tight">${escapeHtml(cat.name)}</span>
         </div>
+        <span id="cat-count-${escapeHtml(cat.id.replace(/[^a-zA-Z0-9]/g, ''))}" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 shrink-0">0</span>
       </button>
     `;
   });
@@ -316,9 +312,9 @@ function updateFilterUIState() {
     const status = card.getAttribute('data-filter-status');
     const isSelected = state.filters.status === status;
     if (isSelected) {
-      card.className = 'filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border-2 text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/20 ring-2 ring-teal-500/30';
+      card.className = 'filter-status-card p-3.5 rounded-2xl border-2 text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/15 ring-2 ring-teal-500/30';
     } else {
-      card.className = 'filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700';
+      card.className = 'filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700';
     }
   });
 
@@ -341,9 +337,9 @@ function updateFilterUIState() {
     const cat = card.getAttribute('data-filter-cat');
     const isSelected = state.filters.category === cat;
     if (isSelected) {
-      card.className = 'filter-cat-card p-3 rounded-2xl border-2 text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/20 ring-2 ring-teal-500/30';
+      card.className = 'filter-cat-card p-3.5 rounded-2xl border-2 text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/15 ring-2 ring-teal-500/30';
     } else {
-      card.className = 'filter-cat-card p-3 rounded-2xl border text-left flex items-center gap-2.5 transition-all active:scale-95 touch-manipulation min-h-[56px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700';
+      card.className = 'filter-cat-card p-3.5 rounded-2xl border text-left flex items-center justify-between gap-3 transition-all active:scale-95 touch-manipulation min-h-[58px] bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700';
     }
   });
 
diff --git a/public/index.html b/public/index.html
index 737581e..e3ee554 100644
--- a/public/index.html
+++ b/public/index.html
@@ -183,47 +183,48 @@
   <!-- ======================================================== -->
   <!-- FILTER OVERLAY MODAL                                     -->
   <!-- ======================================================== -->
-  <div id="filter-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md hidden flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
-    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-5 sm:p-6 shadow-2xl space-y-5 my-8 animate-scale-up">
+  <div id="filter-modal" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md hidden flex items-center justify-center p-3 sm:p-5 overflow-y-auto">
+    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-2xl w-full p-5 sm:p-7 shadow-2xl space-y-6 my-auto animate-scale-up">
       
       <!-- Top Title Bar -->
-      <div class="flex items-start justify-between">
+      <div class="flex items-center justify-between pb-1 border-b border-slate-800/80">
         <div>
-          <h3 class="text-base sm:text-lg font-extrabold text-white">Filter Stock</h3>
-          <p class="text-xs text-slate-400">Scroll and select pack conditions and categories</p>
+          <h3 class="text-lg sm:text-xl font-black text-white">Filter Stock</h3>
+          <p class="text-xs text-slate-400 mt-0.5">Filter inventory by condition or category</p>
         </div>
         <div class="flex items-center gap-2">
           <button 
             onclick="resetAllFilters()" 
-            class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold transition active:scale-95 touch-manipulation"
+            class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-bold transition active:scale-95 touch-manipulation border border-slate-700/60"
           >
             Reset
           </button>
-          <button onclick="closeFilterOverlay()" class="text-slate-400 hover:text-white p-2 rounded-xl bg-slate-800/60 touch-manipulation">
+          <button onclick="closeFilterOverlay()" class="text-slate-400 hover:text-white p-2 rounded-xl bg-slate-800/80 touch-manipulation hover:bg-slate-700 transition">
             <i data-lucide="x" class="w-5 h-5"></i>
           </button>
         </div>
       </div>
 
-      <!-- Section 1: Pack States (Scrollable horizontal cards) -->
-      <div class="space-y-2">
-        <label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">Pack State & Condition</label>
-        <div class="flex items-stretch gap-2.5 overflow-x-auto pb-1.5 scrollbar-none">
+      <!-- Section 1: Pack States (Spacious 4-Grid, completely visible) -->
+      <div class="space-y-2.5">
+        <label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">1. Pack State & Condition</label>
+        
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
           <!-- All Pack States -->
           <button 
             onclick="setStatusFilter('all')" 
             data-filter-status="all"
-            class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/10"
+            class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-teal-500/20 border-teal-500 text-white shadow-lg shadow-teal-500/15 ring-2 ring-teal-500/30"
           >
             <div class="flex items-center justify-between">
-              <span class="w-7 h-7 rounded-lg bg-teal-500/20 text-teal-300 flex items-center justify-center">
-                <i data-lucide="layers" class="w-3.5 h-3.5"></i>
+              <span class="w-8 h-8 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center">
+                <i data-lucide="layers" class="w-4 h-4"></i>
               </span>
-              <span id="filter-count-all" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-slate-300">0</span>
+              <span id="filter-count-all" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-slate-200">0</span>
             </div>
             <div>
-              <h4 class="text-xs sm:text-sm font-extrabold text-white">All Stock</h4>
-              <p class="text-[10px] text-slate-400">Everything</p>
+              <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">All Stock</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">Everything</p>
             </div>
           </button>
 
@@ -231,17 +232,17 @@
           <button 
             onclick="setStatusFilter('full')" 
             data-filter-status="full"
-            class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
+            class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
           >
             <div class="flex items-center justify-between">
-              <span class="w-7 h-7 rounded-lg bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
-                <i data-lucide="package-check" class="w-3.5 h-3.5"></i>
+              <span class="w-8 h-8 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
+                <i data-lucide="package-check" class="w-4 h-4"></i>
               </span>
-              <span id="filter-count-full" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-emerald-300">0</span>
+              <span id="filter-count-full" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-emerald-300">0</span>
             </div>
             <div>
-              <h4 class="text-xs sm:text-sm font-extrabold text-white">Full Packs</h4>
-              <p class="text-[10px] text-slate-400">Unopened</p>
+              <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Full Packs</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">Unopened</p>
             </div>
           </button>
 
@@ -249,17 +250,17 @@
           <button 
             onclick="setStatusFilter('opened')" 
             data-filter-status="opened"
-            class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
+            class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
           >
             <div class="flex items-center justify-between">
-              <span class="w-7 h-7 rounded-lg bg-indigo-500/20 text-indigo-400 flex items-center justify-center">
-                <i data-lucide="package-open" class="w-3.5 h-3.5"></i>
+              <span class="w-8 h-8 rounded-xl bg-indigo-500/20 text-indigo-400 flex items-center justify-center">
+                <i data-lucide="package-open" class="w-4 h-4"></i>
               </span>
-              <span id="filter-count-opened" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-indigo-300">0</span>
+              <span id="filter-count-opened" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-indigo-300">0</span>
             </div>
             <div>
-              <h4 class="text-xs sm:text-sm font-extrabold text-white">Opened</h4>
-              <p class="text-[10px] text-slate-400">In-use & partial</p>
+              <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Opened</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">In-Use / Partial</p>
             </div>
           </button>
 
@@ -267,37 +268,37 @@
           <button 
             onclick="setStatusFilter('low')" 
             data-filter-status="low"
-            class="filter-status-card flex-1 min-w-[125px] p-3 rounded-2xl border text-left flex flex-col justify-between space-y-2 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
+            class="filter-status-card p-3.5 rounded-2xl border text-left flex flex-col justify-between space-y-2.5 transition-all active:scale-95 touch-manipulation bg-slate-950 border-slate-800 text-slate-300 hover:border-slate-700"
           >
             <div class="flex items-center justify-between">
-              <span class="w-7 h-7 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center">
-                <i data-lucide="alert-circle" class="w-3.5 h-3.5"></i>
+              <span class="w-8 h-8 rounded-xl bg-amber-500/20 text-amber-400 flex items-center justify-center">
+                <i data-lucide="alert-circle" class="w-4 h-4"></i>
               </span>
-              <span id="filter-count-low" class="text-[11px] font-bold px-1.5 py-0.5 rounded-md bg-slate-800 text-amber-300">0</span>
+              <span id="filter-count-low" class="text-xs font-bold px-2 py-0.5 rounded-md bg-slate-800 text-amber-300">0</span>
             </div>
             <div>
-              <h4 class="text-xs sm:text-sm font-extrabold text-white">Low Stock</h4>
-              <p class="text-[10px] text-slate-400">&le;25% left</p>
+              <h4 class="text-xs sm:text-sm font-extrabold text-white leading-tight">Low Stock</h4>
+              <p class="text-[11px] text-slate-400 mt-0.5">&le;25% left</p>
             </div>
           </button>
         </div>
       </div>
 
-      <!-- Section 2: Categories (Scrollable touch grid) -->
-      <div class="space-y-2">
-        <label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">Category</label>
-        <div id="filter-categories-container" class="grid grid-cols-2 sm:grid-cols-3 gap-2.5 max-h-[260px] overflow-y-auto p-1 scrollbar-none">
-          <!-- Populated dynamically -->
+      <!-- Section 2: Categories (2-Column touch grid with full unabbreviated names) -->
+      <div class="space-y-2.5">
+        <label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">2. Category</label>
+        <div id="filter-categories-container" class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 max-h-[300px] overflow-y-auto p-1 pr-1.5 scrollbar-thin">
+          <!-- Populated dynamically with full unabbreviated names -->
         </div>
       </div>
 
-      <!-- Action: Done button -->
+      <!-- Action: Big Prominent Done button -->
       <div class="pt-2 border-t border-slate-800">
         <button 
           onclick="closeFilterOverlay()" 
-          class="w-full py-3.5 rounded-2xl bg-teal-500 hover:bg-teal-400 text-white font-extrabold text-sm sm:text-base shadow-xl shadow-teal-500/25 active:scale-95 transition-all touch-manipulation flex items-center justify-center gap-2"
+          class="w-full py-4 rounded-2xl bg-teal-500 hover:bg-teal-400 text-white font-black text-base sm:text-lg shadow-xl shadow-teal-500/25 active:scale-95 transition-all touch-manipulation flex items-center justify-center gap-2"
         >
-          <i data-lucide="check" class="w-5 h-5"></i>
+          <i data-lucide="check" class="w-5 h-5 sm:w-6 sm:h-6"></i>
           <span>Show Matching Stock (<span id="filter-total-count">0</span> items)</span>
         </button>
       </div>