diff --git a/src/components/DashboardView.tsx b/src/components/DashboardView.tsx
index 77fe8f7..7547818 100644
--- a/src/components/DashboardView.tsx
+++ b/src/components/DashboardView.tsx
@@ -132,60 +132,7 @@ export default function DashboardView({ searchQuery, tenantId = FIESTA_TENANT_ID
 
   return (
     <div className="space-y-lg animate-in fade-in duration-500 relative">
-      {/* ── Immersive Executive Banner (cover image + slate→purple gradient overlay) ── */}
-      <div className="relative p-6 md:p-8 text-white shadow-xl border border-purple-500/20 overflow-hidden animate-in fade-in duration-300">
-        {/* Cover image background & decorative glow */}
-        <div className="absolute inset-0 z-0 overflow-hidden">
-          <img
-            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1400&q=80"
-            alt="Executive operations dashboard"
-            className="w-full h-full object-cover object-center opacity-40"
-          />
-          <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900/90 to-purple-950/80" />
-          <div className="absolute top-0 right-0 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl -mr-20 -mt-20 pointer-events-none" />
-          <div className="absolute bottom-0 left-0 w-56 h-56 bg-indigo-500/10 rounded-full blur-2xl -ml-20 -mb-20 pointer-events-none" />
-        </div>
 
-        {/* Content row */}
-        <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-lg">
-          <div>
-            <h1 className="font-sans font-bold text-2xl md:text-3xl tracking-tight text-white flex items-center gap-2.5">
-              Executive Command Center
-              <span className="text-[10px] text-purple-200 font-bold bg-purple-900/60 border border-purple-500/30 px-2 py-0.5 rounded-full uppercase tracking-wider animate-pulse">
-                Live Core
-              </span>
-            </h1>
-            <p className="text-slate-300 font-sans text-sm mt-2 leading-relaxed">
-              Month-to-date order operations for <strong className="text-white font-semibold">{tenantName}</strong>, pulled live from the API.
-            </p>
-
-            <div className="mt-4">
-              {loading ? (
-                <span className="inline-flex items-center gap-1.5 text-[11px] font-bold text-slate-300 uppercase tracking-wide">
-                  <span className="w-2 h-2 rounded-full bg-slate-400 animate-pulse" /> Syncing live data…
-                </span>
-              ) : errored ? (
-                <span className="inline-flex items-center gap-1.5 text-[11px] font-bold text-rose-300 uppercase tracking-wide" title="Restart the dev server so the /hasura proxy is active.">
-                  <span className="w-2 h-2 rounded-full bg-rose-400" /> Live data unavailable
-                </span>
-              ) : (
-                <span className="inline-flex items-center gap-1.5 text-[11px] font-bold text-emerald-300 uppercase tracking-wide">
-                  <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" /> Live · {tenantName}
-                </span>
-              )}
-            </div>
-          </div>
-
-          {/* Reporting scope panel */}
-          <div className="flex flex-col items-start md:items-end gap-2 shrink-0">
-            <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/15 rounded-xl px-3.5 py-2.5 shadow-sm">
-              <Clock size={14} className="text-purple-300" />
-              <span className="text-xs font-bold font-mono text-white tracking-tight">{fromdate} → {todate}</span>
-            </div>
-            <span className="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Month-to-date reporting scope</span>
-          </div>
-        </div>
-      </div>
 
       {/* Error hint */}
       {errored && (
@@ -202,31 +149,35 @@ export default function DashboardView({ searchQuery, tenantId = FIESTA_TENANT_ID
       )}
 
       {/* KPI cards — all live from getordersummary / getinvoiceinsight */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-gutter">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
         {kpis.map((kpi) => {
           const Icon = kpi.icon;
           return (
             <div
               key={kpi.title}
-              className="group relative flex flex-col overflow-hidden bg-white border border-slate-200/70 rounded-2xl p-5 shadow-[0_1px_2px_rgba(16,24,40,0.04)] transition-all duration-300 hover:-translate-y-1 hover:border-purple-200 hover:shadow-[0_16px_36px_rgba(16,24,40,0.10)]"
+              className="group relative flex items-center gap-3 overflow-hidden bg-white border border-slate-200/70 rounded-xl p-3 shadow-[0_1px_2px_rgba(16,24,40,0.04)] transition-all duration-300 hover:-translate-y-1 hover:border-purple-200 hover:shadow-[0_16px_36px_rgba(16,24,40,0.10)]"
             >
               {/* Gradient accent bar */}
-              <span className={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r ${kpi.bar}`} />
-              <div className="flex items-start justify-between">
-                <div className={`h-11 w-11 rounded-xl flex items-center justify-center ring-1 group-hover:scale-110 transition-transform duration-300 ${kpi.chip}`}>
-                  <Icon size={19} />
-                </div>
-                <ArrowUpRight size={16} className="text-slate-300 group-hover:text-purple-400 transition-colors" />
+              <span className={`absolute inset-y-0 left-0 w-1 bg-gradient-to-b ${kpi.bar}`} />
+              
+              <div className={`h-10 w-10 shrink-0 rounded-lg flex items-center justify-center ring-1 group-hover:scale-110 transition-transform duration-300 ml-1 ${kpi.chip}`}>
+                <Icon size={18} />
+              </div>
+              
+              <div className="flex-1 min-w-0 flex flex-col justify-center">
+                <div className="flex items-center justify-between">
+                  <p className="text-[9px] font-bold text-slate-400 tracking-widest uppercase font-sans truncate pr-2">
+                    {kpi.title}
+                  </p>
+                  <ArrowUpRight size={12} className="text-slate-300 group-hover:text-purple-400 transition-colors shrink-0" />
+                </div>
+                <p className="font-sans font-extrabold text-lg leading-tight text-slate-900 tracking-tight mt-0.5 truncate">
+                  {kpi.loading ? <span className="text-slate-300">…</span> : kpi.display}
+                </p>
+                <p className="text-[9px] text-slate-400 font-medium mt-0.5 leading-snug truncate">
+                  {kpi.sub}
+                </p>
               </div>
-              <p className="text-[10px] font-bold text-slate-400 tracking-widest uppercase font-sans mt-4">
-                {kpi.title}
-              </p>
-              <p className="font-sans font-extrabold text-[28px] leading-tight text-slate-900 tracking-tight mt-1">
-                {kpi.loading ? <span className="text-slate-300">…</span> : kpi.display}
-              </p>
-              <p className="text-[11px] text-slate-400 font-medium mt-1.5 leading-snug">
-                {kpi.sub}
-              </p>
             </div>
           );
         })}