diff --git a/dashboard/app/analytics/page.js b/dashboard/app/analytics/page.js
index 36ffeba..7cac13c 100644
--- a/dashboard/app/analytics/page.js
+++ b/dashboard/app/analytics/page.js
@@ -15,7 +15,9 @@ import {
   YAxis,
 } from 'recharts';
 import { motion } from 'framer-motion';
-import { BarChart3 } from 'lucide-react';
+import { BarChart3, ChevronUp, ChevronDown } from 'lucide-react';
+import { Skeleton } from '../components/ui/Skeleton';
+import { EmptyState } from '../components/ui/EmptyState';
 import NavBar from '../components/NavBar.jsx';
 import { useTheme } from '../providers/ThemeProvider.jsx';
 import { PAGE_ENTER, STAGGER_CHILDREN, CARD_ITEM } from '../lib/motion.js';
@@ -28,15 +30,15 @@ function KpiCard({ label, value, sub, trend, accentColor = 'var(--accent-cyan)'
       variants={CARD_ITEM}
       className="glass-panel glass-edge relative overflow-hidden p-6 group"
     >
-      <p className="text-[11px] uppercase tracking-[0.2em] text-[var(--text-muted)] font-bold">{label}</p>
+      <p className="text-xs uppercase tracking-[0.2em] text-[var(--text-muted)] font-bold">{label}</p>
       <p className="mt-4 font-mono text-4xl font-light text-[var(--text-primary)] leading-none">
         {value}
       </p>
       <div className="mt-4 flex items-center justify-between">
-        <p className="text-[11px] text-[var(--text-secondary)] font-medium">{sub}</p>
+        <p className="text-xs text-[var(--text-secondary)] font-medium">{sub}</p>
         {trend !== undefined && (
-          <div className={`flex items-center gap-1 text-xs font-bold ${trend > 0 ? 'text-[var(--accent-green)]' : 'text-[var(--accent-red)]'}`}>
-            <span className="opacity-70">{trend > 0 ? '▲' : '▼'}</span>
+          <div className={`flex items-center gap-1 text-sm font-bold ${trend > 0 ? 'text-[var(--accent-green)]' : 'text-[var(--accent-red)]'}`}>
+            <span className="opacity-70">{trend > 0 ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}</span>
             <span>{Math.abs(trend)}%</span>
           </div>
         )}
@@ -57,11 +59,11 @@ function ChartPanel({ title, subtitle, children }) {
       className="glass-panel p-6 space-y-6"
     >
       <div className="flex flex-col gap-1">
-        <p className="text-[11px] font-bold text-[var(--text-secondary)] uppercase tracking-[0.2em] font-display">
+        <p className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-[0.2em] font-display">
           {title}
         </p>
         {subtitle && (
-          <p className="text-[11px] text-[var(--text-muted)] font-medium">{subtitle}</p>
+          <p className="text-xs text-[var(--text-muted)] font-medium">{subtitle}</p>
         )}
       </div>
       <div className="w-full">
@@ -115,16 +117,16 @@ export default function AnalyticsPage() {
       <div className="flex h-screen flex-col bg-[var(--bg-base)] text-[var(--text-primary)]">
         <NavBar />
         <div className="flex-1 p-6 space-y-8">
-          <div className="h-10 w-64 rounded-xl bg-[var(--bg-elevated)] animate-pulse" />
+          <Skeleton variant="line" className="h-10 w-64 rounded-xl" />
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
             {[0, 1, 2, 3].map((i) => (
-              <div key={i} className="glass-panel h-32 animate-pulse" />
+              <Skeleton key={i} variant="block" className="h-32 rounded-2xl" />
             ))}
           </div>
-          <div className="glass-panel h-72 animate-pulse" />
+          <Skeleton variant="block" className="h-72 rounded-2xl" />
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <div className="glass-panel h-64 animate-pulse" />
-            <div className="glass-panel h-64 animate-pulse" />
+            <Skeleton variant="block" className="h-64 rounded-2xl" />
+            <Skeleton variant="block" className="h-64 rounded-2xl" />
           </div>
         </div>
       </div>
@@ -164,19 +166,17 @@ export default function AnalyticsPage() {
         </div>
 
         <header>
-          <p className="text-[11px] uppercase tracking-[0.25em] text-[var(--accent-cyan)] font-bold font-display">Operations Intelligence</p>
+          <p className="text-xs uppercase tracking-[0.25em] text-[var(--accent-cyan)] font-bold font-display">Operations Intelligence</p>
           <h1 className="mt-2 text-3xl font-bold tracking-tight font-display">30-Day Performance</h1>
         </header>
 
         {(!data || Object.keys(data).length === 0) ? (
-          <div className="flex-1 flex flex-col items-center justify-center p-12 glass-panel !bg-transparent border-dashed border-2 opacity-60">
-             <div className="w-16 h-16 rounded-full bg-[var(--bg-elevated)] flex items-center justify-center border border-[var(--border-subtle)] mb-4">
-               <BarChart3 className="w-8 h-8 text-[var(--text-muted)]" />
-             </div>
-             <h3 className="text-sm font-bold text-[var(--text-primary)] uppercase tracking-widest">No Intelligence Data</h3>
-             <p className="text-[11px] text-[var(--text-secondary)] mt-2 max-w-xs text-center leading-relaxed">
-               Historical performance metrics are calculated every 24 hours. Check back once your first disruption protocol has been executed.
-             </p>
+          <div className="flex-1 min-h-[400px] flex items-center justify-center glass-panel !bg-transparent border-dashed border-2 opacity-60">
+            <EmptyState 
+              icon={BarChart3} 
+              title="No Intelligence Data" 
+              description="Historical performance metrics are calculated every 24 hours. Check back once your first disruption protocol has been executed."
+            />
           </div>
         ) : (
           <>
diff --git a/dashboard/app/components/AgentPanel.jsx b/dashboard/app/components/AgentPanel.jsx
index 54a5e56..5417ef0 100644
--- a/dashboard/app/components/AgentPanel.jsx
+++ b/dashboard/app/components/AgentPanel.jsx
@@ -4,14 +4,16 @@ import { useEffect, useRef } from 'react';
 import dynamic from 'next/dynamic';
 import { AnimatePresence, motion } from 'framer-motion';
 
+import { PanelSkeleton } from './ui/PanelSkeleton';
+
 const AgentChatSidebar = dynamic(() => import('./agent/AgentChatSidebar.jsx'), {
   ssr: false,
-  loading: () => <div className="p-4 text-xs text-[var(--text-muted)]">Loading agent reasoning...</div>,
+  loading: () => <PanelSkeleton />,
 });
 
 const NewsFeed = dynamic(() => import('./news/NewsFeed.jsx'), {
   ssr: false,
-  loading: () => <div className="p-4 text-xs text-[var(--text-muted)]">Loading news intelligence...</div>,
+  loading: () => <PanelSkeleton />,
 });
 
 const TABS = [
diff --git a/dashboard/app/components/NavBar.jsx b/dashboard/app/components/NavBar.jsx
index 1e8c2e3..394fbf2 100644
--- a/dashboard/app/components/NavBar.jsx
+++ b/dashboard/app/components/NavBar.jsx
@@ -84,18 +84,26 @@ export default function NavBar() {
             : pathname.startsWith(href);
           
           const showDivider = idx > 0 && NAV_ITEMS[idx - 1].section !== section;
+          const sectionLabel = showDivider ? (NAV_ITEMS[idx].section === 'live' ? 'Monitor' : 'Intel') : null;
 
           return (
-            <div key={href} className="flex items-center gap-1">
+            <div key={href} className="flex items-center">
               {showDivider && (
-                <div className="w-px h-5 bg-[var(--border-subtle)] mx-1 opacity-50" />
+                <div className="flex items-center">
+                  <div className="w-px h-4 bg-[var(--border-subtle)] mx-2 opacity-50" />
+                  {sectionLabel && (
+                    <span className="text-[9px] text-[var(--text-muted)] font-bold uppercase tracking-[0.2em] mr-2 hidden lg:block">
+                      {sectionLabel}
+                    </span>
+                  )}
+                </div>
               )}
               <Link
                 href={href}
                 aria-label={label}
                 title={label}
                 className={[
-                  'relative flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-bold uppercase tracking-[0.1em]',
+                  'relative flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-[0.1em]',
                   'transition-all duration-300 outline-none',
                   active
                     ? 'bg-[var(--glass-bg-elevated)] text-[var(--text-primary)] shadow-sm border border-[var(--glass-border)]'
diff --git a/dashboard/app/components/globe/GlobeView.jsx b/dashboard/app/components/globe/GlobeView.jsx
index fb53382..36b2d21 100644
--- a/dashboard/app/components/globe/GlobeView.jsx
+++ b/dashboard/app/components/globe/GlobeView.jsx
@@ -113,7 +113,7 @@ export default function GlobeView({ simulationControlsOpen = false, filter: exte
   const resetIdleTimerRef = useRef(null);
   const [internalFilter, setInternalFilter] = useState('all');
   const f = externalFilter ?? internalFilter;
-  const setF = externalFilter ? () => {} : setInternalFilter;
+  const setF = externalFilter ? () => { } : setInternalFilter;
   const [t, setT] = useState(null);
   const [zoomLevel, setZoomLevel] = useState('far');
   const [viewerEpoch, setViewerEpoch] = useState(0);
@@ -161,7 +161,7 @@ export default function GlobeView({ simulationControlsOpen = false, filter: exte
 
   useEffect(() => {
     if (!cRef.current || vRef.current) return;
-    let cleanup = () => {};
+    let cleanup = () => { };
     let initFrameId = null;
     let cancelled = false;
 
@@ -186,13 +186,13 @@ export default function GlobeView({ simulationControlsOpen = false, filter: exte
           baseLayer: ionToken
             ? ImageryLayer.fromWorldImagery({ style: IonWorldImageryStyle.AERIAL_WITH_LABELS })
             : new ImageryLayer(
-                new UrlTemplateImageryProvider({
-                  url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-                  subdomains: ['a', 'b', 'c'],
-                  credit: 'Map data © OpenStreetMap contributors',
-                  maximumLevel: 19,
-                })
-              )
+              new UrlTemplateImageryProvider({
+                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                subdomains: ['a', 'b', 'c'],
+                credit: 'Map data © OpenStreetMap contributors',
+                maximumLevel: 19,
+              })
+            )
         });
         if (cancelled) {
           v.destroy();
@@ -466,41 +466,41 @@ export default function GlobeView({ simulationControlsOpen = false, filter: exte
         ports.set(route.destKey, { label: route.destLabel, lat: destLat, lon: destLon });
       });
 
-    for (const [name, labelEntity] of portLabelEntitiesRef.current) {
-      if (!ports.has(name)) {
-        entities.remove(labelEntity);
-        portLabelEntitiesRef.current.delete(name);
+      for (const [name, labelEntity] of portLabelEntitiesRef.current) {
+        if (!ports.has(name)) {
+          entities.remove(labelEntity);
+          portLabelEntitiesRef.current.delete(name);
+        }
       }
-    }
 
-    for (const [name, port] of ports) {
-      const existing = portLabelEntitiesRef.current.get(name);
-      if (existing) {
-        existing.position = Cartesian3.fromDegrees(port.lon, port.lat);
-        existing.label.text = port.label;
-      } else {
-        const labelEntity = entities.add({
-          id: `port-${name}`,
-          position: Cartesian3.fromDegrees(port.lon, port.lat),
-          point: { pixelSize: 5, color: Color.fromCssColorString('#e2e8f0') },
-          label: {
-            text: name,
-            font: 'bold 14px sans-serif',
-            style: LabelStyle.FILL_AND_OUTLINE,
-            fillColor: Color.WHITE,
-            outlineColor: Color.BLACK,
-            outlineWidth: 2,
-            pixelOffset: new Cartesian2(0, -14),
-            translucencyByDistance: new NearFarScalar(1.5e6, 1.0, 5.0e6, 0.0),
-            scaleByDistance: new NearFarScalar(1.5e6, 1.0, 5.0e6, 0.5),
-            disableDepthTestDistance: Number.POSITIVE_INFINITY,
-          },
-          properties: { kind: 'port-label', label: name },
-          show: new ConstantProperty(false),
-        });
-        portLabelEntitiesRef.current.set(name, labelEntity);
+      for (const [name, port] of ports) {
+        const existing = portLabelEntitiesRef.current.get(name);
+        if (existing) {
+          existing.position = Cartesian3.fromDegrees(port.lon, port.lat);
+          existing.label.text = port.label;
+        } else {
+          const labelEntity = entities.add({
+            id: `port-${name}`,
+            position: Cartesian3.fromDegrees(port.lon, port.lat),
+            point: { pixelSize: 5, color: Color.fromCssColorString('#e2e8f0') },
+            label: {
+              text: name,
+              font: 'bold 14px sans-serif',
+              style: LabelStyle.FILL_AND_OUTLINE,
+              fillColor: Color.WHITE,
+              outlineColor: Color.BLACK,
+              outlineWidth: 2,
+              pixelOffset: new Cartesian2(0, -14),
+              translucencyByDistance: new NearFarScalar(1.5e6, 1.0, 5.0e6, 0.0),
+              scaleByDistance: new NearFarScalar(1.5e6, 1.0, 5.0e6, 0.5),
+              disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            },
+            properties: { kind: 'port-label', label: name },
+            show: new ConstantProperty(false),
+          });
+          portLabelEntitiesRef.current.set(name, labelEntity);
+        }
       }
-    }
 
       viewer.scene.requestRender();
     } finally {
@@ -829,17 +829,17 @@ export default function GlobeView({ simulationControlsOpen = false, filter: exte
         showSimulationControls={simulationControlsOpen}
       />
       <div ref={cRef} className="h-full w-full" />
-      <div 
-        ref={tooltipRef} 
-        style={{ 
-          position: "fixed", 
-          top: 0, 
-          left: 0, 
-          transform: "translate(-9999px, -9999px)", 
-          zIndex: 50, 
-          pointerEvents: "none", 
-          transition: "transform 0.08s ease-out" 
-        }} 
+      <div
+        ref={tooltipRef}
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          transform: "translate(-9999px, -9999px)",
+          zIndex: 50,
+          pointerEvents: "none",
+          transition: "transform 0.08s ease-out"
+        }}
         className={`bg-[var(--bg-overlay)] backdrop-blur-xl border border-[var(--border-subtle)] rounded-2xl p-4 shadow-2xl min-w-[160px] ${t ? 'opacity-100 scale-100' : 'opacity-0 scale-95'} transition-all duration-200`}
       >
         <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-muted)] mb-1 leading-none">{t?.kind || 'Entity'}</p>
diff --git a/dashboard/app/components/ui/EmptyState.jsx b/dashboard/app/components/ui/EmptyState.jsx
new file mode 100644
index 0000000..903ba61
--- /dev/null
+++ b/dashboard/app/components/ui/EmptyState.jsx
@@ -0,0 +1,27 @@
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 px-8 text-center gap-4">
+      <div className="w-16 h-16 rounded-2xl bg-[var(--bg-elevated)] flex items-center justify-center text-3xl shadow-sm border border-[var(--border-subtle)]">
+        {icon}
+      </div>
+      <div>
+        <h3 className="text-[var(--text-primary)] text-base font-bold mb-1">
+          {title}
+        </h3>
+        <p className="text-[13px] text-[var(--text-secondary)] max-w-xs mx-auto leading-relaxed">
+          {description}
+        </p>
+      </div>
+      {action && (
+        <div className="mt-2">
+          {action}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/dashboard/app/components/ui/GlobeSkeleton.jsx b/dashboard/app/components/ui/GlobeSkeleton.jsx
new file mode 100644
index 0000000..d6e7bf5
--- /dev/null
+++ b/dashboard/app/components/ui/GlobeSkeleton.jsx
@@ -0,0 +1,26 @@
+import { Skeleton } from './Skeleton';
+
+export function GlobeSkeleton() {
+  return (
+    <div className="w-full h-full bg-[#020617] flex items-center justify-center">
+      <div className="flex flex-col items-center gap-6">
+        <div className="relative">
+          <div className="w-16 h-16 rounded-full border-2 border-cyan-400/20 border-t-cyan-400 animate-spin" />
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-8 h-8 rounded-full bg-cyan-400/10 animate-pulse" />
+          </div>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <div className="text-[11px] text-cyan-400/60 uppercase tracking-[0.2em] font-bold animate-pulse">
+            Initializing Orbital Command
+          </div>
+          <div className="flex gap-1.5">
+            <div className="w-1 h-1 rounded-full bg-cyan-400/20 animate-bounce" style={{ animationDelay: '0ms' }} />
+            <div className="w-1 h-1 rounded-full bg-cyan-400/40 animate-bounce" style={{ animationDelay: '150ms' }} />
+            <div className="w-1 h-1 rounded-full bg-cyan-400/20 animate-bounce" style={{ animationDelay: '300ms' }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/app/components/ui/PanelSkeleton.jsx b/dashboard/app/components/ui/PanelSkeleton.jsx
new file mode 100644
index 0000000..216ab68
--- /dev/null
+++ b/dashboard/app/components/ui/PanelSkeleton.jsx
@@ -0,0 +1,25 @@
+import { Skeleton } from './Skeleton';
+
+export function PanelSkeleton() {
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center gap-3">
+        <Skeleton variant="circle" className="w-10 h-10" />
+        <div className="flex-1 space-y-2">
+          <Skeleton variant="line" className="w-[60%]" />
+          <Skeleton variant="line" className="w-[40%]" />
+        </div>
+      </div>
+      <div className="space-y-3">
+        <Skeleton variant="block" className="h-24" />
+        <Skeleton variant="line" />
+        <Skeleton variant="line" />
+        <Skeleton variant="line" className="w-[80%]" />
+      </div>
+      <div className="pt-4 flex gap-2">
+        <Skeleton variant="line" className="h-8 w-24 rounded-lg" />
+        <Skeleton variant="line" className="h-8 w-24 rounded-lg" />
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/app/components/ui/Skeleton.jsx b/dashboard/app/components/ui/Skeleton.jsx
new file mode 100644
index 0000000..32c91fb
--- /dev/null
+++ b/dashboard/app/components/ui/Skeleton.jsx
@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+
+export function Skeleton({ className, variant = 'line', ...props }) {
+  return (
+    <div
+      className={clsx(
+        'animate-pulse bg-[var(--bg-elevated)] relative overflow-hidden',
+        'after:absolute after:inset-0 after:-translate-x-full after:animate-shimmer after:bg-gradient-to-r after:from-transparent after:via-white/5 after:to-transparent',
+        variant === 'line' && 'h-3 w-full rounded-md',
+        variant === 'block' && 'h-24 w-full rounded-xl',
+        variant === 'circle' && 'h-12 w-12 rounded-full',
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/dashboard/app/demo/page.js b/dashboard/app/demo/page.js
index 82781d9..156f711 100644
--- a/dashboard/app/demo/page.js
+++ b/dashboard/app/demo/page.js
@@ -12,6 +12,24 @@ import {
 } from 'firebase/firestore';
 import { db, isFirebaseConfigured } from '../lib/firebase.js';
 import { watchDisruptionSupabase, watchImpactSupabase, watchResolutionSupabase } from '../lib/supabaseWatcher.js';
+import {
+  Wind,
+  Anchor,
+  Construction,
+  Circle,
+  Zap,
+  Radio,
+  BarChart3,
+  Bot,
+  Scale,
+  CheckCircle2,
+  FileText,
+  AlertTriangle,
+  ChevronRight,
+  Download,
+  RotateCcw,
+  X
+} from 'lucide-react';
 import NavBar from '../components/NavBar.jsx';
 
 const SCENARIOS = [
@@ -20,7 +38,7 @@ const SCENARIOS = [
     label: 'Super Typhoon Mawar',
     region: 'Western Pacific',
     severity: 9,
-    icon: '🌀',
+    icon: Wind,
     tag: 'CAT 5 STORM',
     tagColor: 'var(--accent-red)',
     preview: 'Shanghai → LA corridor at risk. Manila, Kaohsiung, HK vessel advisories active.',
@@ -30,7 +48,7 @@ const SCENARIOS = [
     label: 'Suez Canal Emergency',
     region: 'Red Sea / Egypt',
     severity: 10,
-    icon: '⚓',
+    icon: Anchor,
     tag: 'CANAL BLOCKED',
     tagColor: 'var(--accent-amber)',
     preview: "$12B daily trade halted. 43 vessels held. Lloyd's suspended war-risk coverage.",
@@ -40,7 +58,7 @@ const SCENARIOS = [
     label: 'Mumbai JNPT Strike',
     region: 'South Asia',
     severity: 7,
-    icon: '🏗',
+    icon: Construction,
     tag: 'PORT STRIKE',
     tagColor: 'var(--accent-blue)',
     preview: '4,800 dockworkers AWOL. 5M TEU/yr port offline. Mundra at 85% capacity.',
@@ -48,14 +66,14 @@ const SCENARIOS = [
 ];
 
 const STAGES = [
-  { id: 'idle',       label: 'Ready',             icon: '◎',  color: 'var(--text-muted)' },
-  { id: 'injected',   label: 'Disruption Injected',icon: '⚡',  color: 'var(--accent-amber)' },
-  { id: 'monitoring',label: 'Monitor Agent',      icon: '📡', color: 'var(--accent-blue)' },
-  { id: 'impact',    label: 'Impact Analysis',    icon: '📊', color: 'var(--accent-red)' },
-  { id: 'resolution',label: 'AI Resolution',    icon: '🤖', color: 'var(--accent-cyan)' },
-  { id: 'decision',  label: 'Human Decision',    icon: '⚖️', color: 'var(--accent-amber)' },
-  { id: 'applied',  label: 'Protocol Applied',   icon: '✓',  color: 'var(--accent-green)' },
-  { id: 'report',   label: 'Report Ready',      icon: '📄', color: 'var(--accent-cyan)' },
+  { id: 'idle',       label: 'Ready',             icon: Circle,       color: 'var(--text-muted)' },
+  { id: 'injected',   label: 'Disruption Injected',icon: Zap,          color: 'var(--accent-amber)' },
+  { id: 'monitoring',label: 'Monitor Agent',      icon: Radio,        color: 'var(--accent-blue)' },
+  { id: 'impact',    label: 'Impact Analysis',    icon: BarChart3,    color: 'var(--accent-red)' },
+  { id: 'resolution',label: 'AI Resolution',    icon: Bot,          color: 'var(--accent-cyan)' },
+  { id: 'decision',  label: 'Human Decision',    icon: Scale,        color: 'var(--accent-amber)' },
+  { id: 'applied',  label: 'Protocol Applied',   icon: CheckCircle2, color: 'var(--accent-green)' },
+  { id: 'report',   label: 'Report Ready',      icon: FileText,     color: 'var(--accent-cyan)' },
 ];
 
 const STAGE_INDEX = Object.fromEntries(STAGES.map((s, i) => [s.id, i]));
@@ -114,11 +132,14 @@ function StageNode({ stage, index, currentIndex }) {
           flexShrink: 0,
         }}
       >
-        {done ? '✓' : stage.icon}
+        {(() => {
+          const Icon = done ? CheckCircle2 : stage.icon;
+          return <Icon className="w-5 h-5" />;
+        })()}
       </div>
       <span
         style={{
-          fontSize: 9,
+          fontSize: 11,
           fontWeight: 700,
           letterSpacing: '0.08em',
           textTransform: 'uppercase',
@@ -231,7 +252,7 @@ function Chip({ label, value, accent }) {
         flex: 1,
       }}
     >
-      <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
         {label}
       </span>
       <span style={{ fontSize: 13, fontWeight: 700, color: accent }}>{value}</span>
@@ -266,7 +287,7 @@ function OptionCardInline({ option, onApprove, isApproving, approvedRank }) {
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <span
           style={{
-            fontSize: 9,
+            fontSize: 11,
             fontWeight: 800,
             letterSpacing: '0.12em',
             textTransform: 'uppercase',
@@ -281,7 +302,7 @@ function OptionCardInline({ option, onApprove, isApproving, approvedRank }) {
         </span>
         <span
           style={{
-            fontSize: 9,
+            fontSize: 11,
             fontWeight: 700,
             letterSpacing: '0.12em',
             color: 'var(--text-muted)',
@@ -309,7 +330,7 @@ function OptionCardInline({ option, onApprove, isApproving, approvedRank }) {
 
       {option.confidence != null && (
         <div>
-          <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 4 }}>
+          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 4 }}>
             AI Confidence
           </div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
@@ -342,7 +363,7 @@ function OptionCardInline({ option, onApprove, isApproving, approvedRank }) {
             textTransform: 'uppercase',
           }}
         >
-          <span>✓</span> Protocol Deployed
+          <CheckCircle2 className="w-4 h-4" /> Protocol Deployed
         </div>
       ) : (
         <button
@@ -705,7 +726,7 @@ export default function DemoPage() {
                   gap: 8,
                 }}
               >
-                <span>⚠</span>
+                <AlertTriangle className="w-4 h-4" />
                 <strong>Error:</strong> {error} — Check that all agents are running and env vars are set.
               </div>
             )}
@@ -761,10 +782,15 @@ export default function DemoPage() {
                                 : 'none',
                           }}
                         >
-                          <div style={{ fontSize: 22, marginBottom: 8 }}>{sc.icon}</div>
+                          <div style={{ fontSize: 22, marginBottom: 8, color: sc.tagColor }}>
+                            {(() => {
+                              const Icon = sc.icon;
+                              return <Icon className="w-8 h-8" />;
+                            })()}
+                          </div>
                           <div
                             style={{
-                              fontSize: 9,
+                              fontSize: 11,
                               fontWeight: 800,
                               letterSpacing: '0.12em',
                               textTransform: 'uppercase',
@@ -786,7 +812,7 @@ export default function DemoPage() {
                             {sc.label}
                           </div>
                           <div
-                            style={{ fontSize: 10, color: 'var(--text-muted)', lineHeight: 1.5 }}
+                            style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5 }}
                           >
                             {sc.preview}
                           </div>
@@ -817,7 +843,15 @@ export default function DemoPage() {
                       boxShadow: selectedScenario ? '0 0 24px rgba(34,211,238,0.3)' : 'none',
                     }}
                   >
-                    {launching ? '⚡ Injecting…' : '⚡ Launch Demo Pipeline'}
+                    {launching ? (
+                      <span className="flex items-center justify-center gap-2">
+                        <Zap className="w-4 h-4 animate-pulse" /> Injecting…
+                      </span>
+                    ) : (
+                      <span className="flex items-center justify-center gap-2">
+                        <Zap className="w-4 h-4" /> Launch Demo Pipeline
+                      </span>
+                    )}
                   </button>
                 </div>
               )}
@@ -886,7 +920,7 @@ export default function DemoPage() {
                   </div>
                   {disruption.severity != null && (
                     <div>
-                      <div style={{ fontSize: 9, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>
+                      <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>
                         Severity Score
                       </div>
                       <SeverityBar value={disruption.severity} />
@@ -976,9 +1010,9 @@ export default function DemoPage() {
                       }}
                     >
                       {stage === 'report'
-                        ? '✓ Protocol Applied — Report Ready'
+                        ? <span className="flex items-center gap-2"><CheckCircle2 className="w-4 h-4" /> Protocol Applied — Report Ready</span>
                         : stage === 'applied'
-                        ? '⚡ Executing Protocol…'
+                        ? <span className="flex items-center gap-2"><Zap className="w-4 h-4 animate-pulse" /> Executing Protocol…</span>
                         : stage === 'decision'
                         ? 'Human Decision Required'
                         : 'AI Generated 3 Resolution Strategies'}
@@ -1075,7 +1109,9 @@ export default function DemoPage() {
                         marginBottom: 4,
                       }}
                     >
-                      ✓ Pipeline Complete
+                      <span className="flex items-center gap-2">
+                        <CheckCircle2 className="w-4 h-4" /> Pipeline Complete
+                      </span>
                     </div>
                     <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
                       Executive incident report generated. Download the PDF or run another scenario.
@@ -1098,7 +1134,9 @@ export default function DemoPage() {
                           cursor: 'pointer',
                         }}
                       >
-                        📄 Download PDF
+                        <span className="flex items-center gap-2">
+                          <FileText className="w-4 h-4" /> Download PDF
+                        </span>
                       </button>
                     )}
                     <button
@@ -1116,7 +1154,9 @@ export default function DemoPage() {
                         cursor: 'pointer',
                       }}
                     >
-                      ↺ New Demo
+                      <span className="flex items-center gap-2">
+                        <RotateCcw className="w-4 h-4" /> New Demo
+                      </span>
                     </button>
                   </div>
                 </div>
@@ -1139,7 +1179,7 @@ export default function DemoPage() {
                 >
                   <div
                     style={{
-                      fontSize: 9,
+                      fontSize: 11,
                       fontWeight: 800,
                       letterSpacing: '0.14em',
                       textTransform: 'uppercase',
@@ -1150,32 +1190,38 @@ export default function DemoPage() {
                   </div>
                   {activeScenario && (
                     <div>
-                      <div style={{ fontSize: 9, color: 'var(--text-muted)', marginBottom: 2 }}>Scenario</div>
-                      <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)' }}>
-                        {activeScenario.icon} {activeScenario.label}
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>Scenario</div>
+                      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', display: 'flex', alignItems: 'center', gap: 6 }}>
+                        {(() => {
+                          const Icon = activeScenario.icon;
+                          return <Icon className="w-4 h-4" />;
+                        })()} {activeScenario.label}
                       </div>
                     </div>
                   )}
                   {disruptionId && (
                     <div>
-                      <div style={{ fontSize: 9, color: 'var(--text-muted)', marginBottom: 2 }}>Disruption ID</div>
-                      <div style={{ fontSize: 10, fontFamily: 'monospace', color: 'var(--accent-cyan)', wordBreak: 'break-all' }}>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>Disruption ID</div>
+                      <div style={{ fontSize: 11, fontFamily: 'monospace', color: 'var(--accent-cyan)', wordBreak: 'break-all' }}>
                         {disruptionId}
                       </div>
                     </div>
                   )}
                   {traceId && (
                     <div>
-                      <div style={{ fontSize: 9, color: 'var(--text-muted)', marginBottom: 2 }}>Trace ID</div>
-                      <div style={{ fontSize: 10, fontFamily: 'monospace', color: 'var(--text-secondary)', wordBreak: 'break-all' }}>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>Trace ID</div>
+                      <div style={{ fontSize: 11, fontFamily: 'monospace', color: 'var(--text-secondary)', wordBreak: 'break-all' }}>
                         {traceId}
                       </div>
                     </div>
                   )}
                   <div>
-                    <div style={{ fontSize: 9, color: 'var(--text-muted)', marginBottom: 2 }}>Stage</div>
-                    <div style={{ fontSize: 11, fontWeight: 700, color: STAGES[currentStageIndex]?.color }}>
-                      {STAGES[currentStageIndex]?.icon} {STAGES[currentStageIndex]?.label}
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 2 }}>Stage</div>
+                    <div style={{ fontSize: 13, fontWeight: 700, color: STAGES[currentStageIndex]?.color, display: 'flex', alignItems: 'center', gap: 6 }}>
+                      {(() => {
+                        const Icon = STAGES[currentStageIndex]?.icon;
+                        return Icon ? <Icon className="w-4 h-4" /> : null;
+                      })()} {STAGES[currentStageIndex]?.label}
                     </div>
                   </div>
                 </div>
@@ -1203,7 +1249,7 @@ export default function DemoPage() {
                     gap: 8,
                   }}
                 >
-                  <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+                  <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
                     Agent Console
                   </span>
                   {stage !== 'idle' && stage !== 'report' && <Pulse color="var(--accent-green)" />}
@@ -1238,14 +1284,16 @@ export default function DemoPage() {
                     background: 'var(--bg-elevated)',
                     color: 'var(--text-muted)',
                     fontWeight: 700,
-                    fontSize: 10,
+                    fontSize: 11,
                     letterSpacing: '0.1em',
                     textTransform: 'uppercase',
                     border: '1px solid var(--border-subtle)',
                     cursor: 'pointer',
                   }}
                 >
-                  ✕ Abort & Reset
+                  <span className="flex items-center justify-center gap-2">
+                    <X className="w-3 h-3" /> Abort & Reset
+                  </span>
                 </button>
               )}
             </div>
diff --git a/dashboard/app/developers/page.js b/dashboard/app/developers/page.js
index 56ddb11..efd10e9 100644
--- a/dashboard/app/developers/page.js
+++ b/dashboard/app/developers/page.js
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { Copy, Check, Terminal, Zap, Key, Webhook, Package, AlertTriangle } from 'lucide-react';
+import { Copy, Check, Terminal, Zap, Key, Webhook, Package, AlertTriangle, ChevronUp, ChevronDown } from 'lucide-react';
 import NavBar from '../components/NavBar.jsx';
 
 const FALLBACK_BASE = 'https://your-deployed-url.vercel.app';
@@ -51,23 +51,25 @@ function EndpointCard({ method, path, description, example, response }) {
         onClick={() => setOpen((value) => !value)}
         className="w-full flex items-center gap-4 p-4 bg-[var(--bg-elevated)]/40 hover:bg-[var(--bg-elevated)] transition-colors text-left"
       >
-        <span className={`text-[10px] font-extrabold px-2.5 py-1 rounded-lg border tracking-wider ${colors[method]}`}>{method}</span>
-        <code className="text-[13px] font-mono text-[var(--text-primary)] flex-1">{path}</code>
-        <span className="text-[11px] text-[var(--text-muted)] hidden md:block">{description}</span>
-        <span className="text-[var(--text-muted)] text-xs">{open ? '▲' : '▼'}</span>
+        <span className={`text-xs font-extrabold px-2.5 py-1 rounded-lg border tracking-wider ${colors[method]}`}>{method}</span>
+        <code className="text-sm font-mono text-[var(--text-primary)] flex-1">{path}</code>
+        <span className="text-sm text-[var(--text-muted)] hidden md:block">{description}</span>
+        <span className="text-[var(--text-muted)]">
+          {open ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+        </span>
       </button>
       {open && (
         <div className="p-4 space-y-4 border-t border-[var(--border-subtle)] bg-[var(--bg-surface)]">
-          <p className="text-[12px] text-[var(--text-secondary)]">{description}</p>
+          <p className="text-sm text-[var(--text-secondary)]">{description}</p>
           {example && (
             <div>
-              <p className="text-[10px] font-bold uppercase tracking-widest text-[var(--text-muted)] mb-2">curl example</p>
+              <p className="text-xs font-bold uppercase tracking-widest text-[var(--text-muted)] mb-2">curl example</p>
               <CodeBlock code={example} />
             </div>
           )}
           {response && (
             <div>
-              <p className="text-[10px] font-bold uppercase tracking-widest text-[var(--text-muted)] mb-2">response shape</p>
+              <p className="text-xs font-bold uppercase tracking-widest text-[var(--text-muted)] mb-2">response shape</p>
               <CodeBlock code={response} />
             </div>
           )}
diff --git a/dashboard/app/globals.css b/dashboard/app/globals.css
index 1515af6..279e1cb 100644
--- a/dashboard/app/globals.css
+++ b/dashboard/app/globals.css
@@ -46,6 +46,14 @@
   /* ── Scrollbar ── */
   --scrollbar-thumb:   rgba(255, 255, 255, 0.12);
   --scrollbar-track:   transparent;
+
+  /* ── Typography floor ── */
+  --text-xs:   11px;
+  --text-sm:   13px;
+  --text-base: 14px;
+  --text-md:   15px;
+  --tracking-wide: 0.12em;
+  --tracking-wider: 0.18em;
 }
 
 [data-theme="dark"] {
@@ -91,6 +99,14 @@
   /* ── Scrollbar ── */
   --scrollbar-thumb:   rgba(255, 255, 255, 0.12);
   --scrollbar-track:   transparent;
+
+  /* ── Typography floor ── */
+  --text-xs:   11px;
+  --text-sm:   13px;
+  --text-base: 14px;
+  --text-md:   15px;
+  --tracking-wide: 0.12em;
+  --tracking-wider: 0.18em;
 }
 
 /* ── Light theme ── */
@@ -137,6 +153,14 @@
   /* ── Scrollbar ── */
   --scrollbar-thumb:   rgba(15, 23, 42, 0.12);
   --scrollbar-track:   transparent;
+
+  /* ── Typography floor ── */
+  --text-xs:   11px;
+  --text-sm:   13px;
+  --text-base: 14px;
+  --text-md:   15px;
+  --tracking-wide: 0.12em;
+  --tracking-wider: 0.18em;
 }
 
 /* ── Globe page always stays dark regardless of theme ── */
@@ -181,6 +205,14 @@
   /* ── Scrollbar ── */
   --scrollbar-thumb:   rgba(255,255,255,0.15);
   --scrollbar-track:   transparent;
+
+  /* ── Typography floor ── */
+  --text-xs:   11px;
+  --text-sm:   13px;
+  --text-base: 14px;
+  --text-md:   15px;
+  --tracking-wide: 0.12em;
+  --tracking-wider: 0.18em;
 }
 
 @theme inline {
@@ -394,3 +426,15 @@ body {
   opacity: 1;
   pointer-events: auto;
 }
+
+/* ── Shimmer Animation for Skeletons ── */
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.animate-shimmer {
+  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.05) 50%, transparent 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite linear;
+}
diff --git a/dashboard/app/layout.js b/dashboard/app/layout.js
index e86960f..13d99fc 100644
--- a/dashboard/app/layout.js
+++ b/dashboard/app/layout.js
@@ -38,10 +38,8 @@ export const viewport = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en" suppressHydrationWarning className={`${geistSans.variable} ${firaCode.variable} ${spaceGrotesk.variable} h-full antialiased`}>
-      <head>
-        <Script id="theme-init" strategy="beforeInteractive" src="/theme-init.js" />
-      </head>
       <body className="min-h-full flex flex-col">
+        <Script id="theme-init" strategy="beforeInteractive" src="/theme-init.js" />
         <ThemeProvider>
           <DataProvider>{children}</DataProvider>
         </ThemeProvider>
diff --git a/dashboard/app/login/page.js b/dashboard/app/login/page.js
index 4ff194a..f0908c4 100644
--- a/dashboard/app/login/page.js
+++ b/dashboard/app/login/page.js
@@ -96,7 +96,7 @@ export default function LoginPage() {
             </div>
             
             <div className="space-y-2">
-              <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-[var(--accent-cyan)]">OpenTrade Protocol</p>
+              <p className="text-[11px] font-bold uppercase tracking-[0.4em] text-[var(--accent-cyan)]">OpenTrade Protocol</p>
               <h1 className="text-3xl font-bold tracking-tight font-display">System Entry</h1>
               <p className="text-sm text-[var(--text-secondary)] leading-relaxed px-4">
                 Global supply chain intelligence and multi-agent AI disruption resolution.
@@ -126,26 +126,26 @@ export default function LoginPage() {
               </div>
             )}
             
-            {error && <p className="text-xs text-red-400 font-medium">{error}</p>}
+            {error && <p className="text-[11px] text-red-400 font-medium">{error}</p>}
 
             <div className="grid grid-cols-3 gap-4 pt-6 border-t border-white/5">
               <div className="flex flex-col items-center gap-1.5 text-center">
                 <Search className="w-4 h-4 text-[var(--text-muted)]" />
-                <span className="text-[9px] font-bold uppercase tracking-widest text-[var(--text-secondary)]">Live disruption feeds</span>
+                <span className="text-[11px] font-bold uppercase tracking-widest text-[var(--text-secondary)]">Live disruption feeds</span>
               </div>
               <div className="flex flex-col items-center gap-1.5 text-center">
                 <Zap className="w-4 h-4 text-[var(--text-muted)]" />
-                <span className="text-[9px] font-bold uppercase tracking-widest text-[var(--text-secondary)]">Multi-agent resolution</span>
+                <span className="text-[11px] font-bold uppercase tracking-widest text-[var(--text-secondary)]">Multi-agent resolution</span>
               </div>
               <div className="flex flex-col items-center gap-1.5 text-center">
                 <Shield className="w-4 h-4 text-[var(--text-muted)]" />
-                <span className="text-[9px] font-bold uppercase tracking-widest text-[var(--text-secondary)]">Enterprise-grade security</span>
+                <span className="text-[11px] font-bold uppercase tracking-widest text-[var(--text-secondary)]">Enterprise-grade security</span>
               </div>
             </div>
           </div>
         </div>
         
-        <p className="mt-8 text-center text-[10px] font-medium text-[var(--text-muted)] uppercase tracking-[0.2em] opacity-40">
+        <p className="mt-8 text-center text-[11px] font-medium text-[var(--text-muted)] uppercase tracking-[0.2em] opacity-40">
           SECURE ENCRYPTED CHANNEL 409-A
         </p>
       </motion.div>
diff --git a/dashboard/app/onboarding/page.js b/dashboard/app/onboarding/page.js
index bb5a608..e2a82d6 100644
--- a/dashboard/app/onboarding/page.js
+++ b/dashboard/app/onboarding/page.js
@@ -75,30 +75,30 @@ export default function OnboardingPage() {
       <section className="mx-auto flex min-h-screen w-full max-w-3xl flex-col items-center justify-center px-6 py-16">
         
         {/* Step Indicator */}
-        <div className="mb-10 flex flex-col items-center gap-4">
-          <div className="text-[10px] font-bold uppercase tracking-[0.3em] text-[var(--text-muted)]">
-            Step 2 of 2: <span className="text-[var(--accent-cyan)]">Organization Setup</span>
+        <div className="mb-12 flex flex-col items-center gap-6">
+          <div className="text-[11px] font-bold uppercase tracking-[0.3em] text-[var(--text-muted)]">
+            Setup Progress: <span className="text-[var(--accent-cyan)]">Step 2 of 2</span>
           </div>
           <div className="flex items-center gap-4">
-            <div className="flex flex-col items-center gap-2">
-              <div className="h-6 w-6 rounded-full bg-[var(--accent-cyan)]/20 border border-[var(--accent-cyan)]/40 flex items-center justify-center text-[10px] font-bold text-[var(--accent-cyan)]">1</div>
-              <span className="text-[9px] uppercase tracking-widest text-[var(--text-muted)] font-bold">Account</span>
+            <div className="flex flex-col items-center gap-3">
+              <div className="h-8 w-8 rounded-full bg-[var(--accent-cyan)]/10 border border-[var(--accent-cyan)]/30 flex items-center justify-center text-[11px] font-bold text-[var(--accent-cyan)]">1</div>
+              <span className="text-[11px] uppercase tracking-widest text-[var(--text-muted)] font-bold">Account</span>
             </div>
-            <div className="h-px w-8 bg-[var(--border-subtle)] -mt-4" />
-            <div className="flex flex-col items-center gap-2">
-              <div className="h-6 w-6 rounded-full bg-[var(--accent-cyan)] border border-[var(--accent-cyan)] shadow-[0_0_12px_var(--accent-cyan)] flex items-center justify-center text-[10px] font-bold text-[#020617]">2</div>
-              <span className="text-[9px] uppercase tracking-widest text-[var(--accent-cyan)] font-bold">Setup</span>
+            <div className="h-px w-12 bg-[var(--border-subtle)] -mt-6" />
+            <div className="flex flex-col items-center gap-3">
+              <div className="h-8 w-8 rounded-full bg-[var(--accent-cyan)] border border-[var(--accent-cyan)] shadow-[0_0_15px_rgba(34,211,238,0.4)] flex items-center justify-center text-[11px] font-bold text-[#020617]">2</div>
+              <span className="text-[11px] uppercase tracking-widest text-[var(--accent-cyan)] font-bold">Setup</span>
             </div>
-            <div className="h-px w-8 bg-[var(--border-subtle)] -mt-4" />
-            <div className="flex flex-col items-center gap-2">
-              <div className="h-6 w-6 rounded-full border border-[var(--border-subtle)] flex items-center justify-center text-[10px] font-bold text-[var(--text-muted)]">3</div>
-              <span className="text-[9px] uppercase tracking-widest text-[var(--text-muted)] font-bold">Dashboard</span>
+            <div className="h-px w-12 bg-[var(--border-subtle)] -mt-6" />
+            <div className="flex flex-col items-center gap-3">
+              <div className="h-8 w-8 rounded-full border border-[var(--border-subtle)] flex items-center justify-center text-[11px] font-bold text-[var(--text-muted)]">3</div>
+              <span className="text-[11px] uppercase tracking-widest text-[var(--text-muted)] font-bold">Dashboard</span>
             </div>
           </div>
         </div>
 
-        <div className="w-full max-w-md glass-panel glass-edge p-8">
-          <p className="text-[10px] font-bold uppercase tracking-[0.28em] text-[var(--accent-cyan)]">Organization Setup</p>
+        <div className="w-full max-w-md glass-panel glass-edge p-10">
+          <p className="text-[11px] font-bold uppercase tracking-[0.28em] text-[var(--accent-cyan)]">Organization Setup</p>
           <h1 className="mt-3 text-2xl font-bold leading-tight font-display text-[var(--text-primary)]">Identify your workspace</h1>
           <p className="mt-3 text-sm leading-relaxed text-[var(--text-secondary)]">
             Each organization gets its own isolated data vault. This only needs to be set once.
@@ -106,7 +106,7 @@ export default function OnboardingPage() {
 
           <form onSubmit={handleSubmit} className="mt-8 space-y-6">
             <div>
-              <label htmlFor="orgId" className="mb-2 block text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-muted)]">
+              <label htmlFor="orgId" className="mb-2 block text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--text-muted)]">
                 Organization ID
               </label>
               <input
@@ -119,12 +119,12 @@ export default function OnboardingPage() {
                 maxLength={50}
                 required
               />
-              <div className="mt-3 space-y-2">
+              <div className="mt-4 space-y-3">
                 <p className="text-[11px] font-medium text-[var(--text-muted)] leading-relaxed">
-                  Your org ID is used to scope your team&apos;s shipment data. Use lowercase letters, numbers, and hyphens only. Example: acme-logistics
+                  Your org ID is used to scope your team&apos;s shipment data. Use lowercase letters, numbers, and hyphens only.
                 </p>
-                <div className="flex items-center gap-2 text-[10px] font-mono text-[var(--accent-cyan)] bg-[var(--accent-cyan)]/5 border border-[var(--accent-cyan)]/10 px-2 py-1 rounded-md w-fit">
-                  <span>PREVIEW:</span>
+                <div className="flex items-center gap-2 text-[11px] font-mono text-[var(--accent-cyan)] bg-[var(--accent-cyan)]/5 border border-[var(--accent-cyan)]/10 px-3 py-1.5 rounded-lg w-fit">
+                  <span className="opacity-50">WORKSPACE:</span>
                   <span className="font-bold">{orgId || '...'}</span>
                 </div>
               </div>
@@ -152,9 +152,9 @@ export default function OnboardingPage() {
             </div>
           ) : null}
 
-          <div className="mt-8 pt-6 border-t border-[var(--border-subtle)]">
-            <p className="text-[10px] font-bold text-[var(--text-muted)] uppercase tracking-wider mb-1">Why do I need this?</p>
-            <p className="text-[10px] leading-relaxed text-[var(--text-muted)] opacity-70">
+          <div className="mt-10 pt-8 border-t border-[var(--border-subtle)]">
+            <p className="text-[11px] font-bold text-[var(--text-muted)] uppercase tracking-[0.14em] mb-2">Architectural Privacy</p>
+            <p className="text-[11px] leading-relaxed text-[var(--text-muted)] opacity-60">
               Each organization gets its own isolated data workspace. This ensures strict privacy and compliance boundaries for your logistics telemetry.
             </p>
           </div>
diff --git a/dashboard/app/page.js b/dashboard/app/page.js
index 851bebc..2f41081 100644
--- a/dashboard/app/page.js
+++ b/dashboard/app/page.js
@@ -13,6 +13,8 @@ import MinimalErrorFallback from './components/MinimalErrorFallback.jsx';
 import { registerPushSubscription } from './lib/pushNotifications.js';
 import { useShipmentStore } from './store/shipmentStore.js';
 
+import { GlobeSkeleton } from './components/ui/GlobeSkeleton';
+
 const AlertToastController = dynamic(() => import('./components/alerts/AlertToast.jsx'), {
   ssr: false,
   loading: () => null,
@@ -31,11 +33,11 @@ const GlobeActivationToggle = dynamic(() => import('./components/globe/GlobeActi
 });
 const GlobeView = dynamic(() => import('./components/globe/GlobeView.jsx'), {
   ssr: false,
-  loading: () => <div className="flex items-center justify-center w-full h-full bg-[#020617] text-white/40">Loading globe...</div>,
+  loading: () => <GlobeSkeleton />,
 });
 const MobileView = dynamic(() => import('./components/globe/MobileView.jsx'), {
   ssr: false,
-  loading: () => <div className="flex items-center justify-center w-full h-full bg-[#020617] text-white/40">Loading mobile view...</div>,
+  loading: () => <GlobeSkeleton />,
 });
 
 const STATUS_FILTERS = [
@@ -89,10 +91,10 @@ function ShipmentFilters({ onFilterChange }) {
             className={`w-full group flex flex-col items-start gap-1 p-2 rounded-lg transition-all relative ${active ? 'bg-white/5' : 'hover:bg-white/[0.03]'}`}
           >
             <div className="w-full flex items-center justify-between">
-              <span className={`text-[11px] font-bold tracking-tight uppercase ${active ? '' : 'text-[var(--text-muted)]'}`}>
-                {f.label} <span className="text-[9px] opacity-40 ml-1 font-mono">[{f.key}]</span>
+              <span className={`text-xs font-bold tracking-tight uppercase ${active ? '' : 'text-[var(--text-muted)]'}`}>
+                {f.label} <span className="text-[10px] opacity-40 ml-1 font-mono">[{f.key}]</span>
               </span>
-              <span className="text-[11px] font-mono opacity-50">{count}</span>
+              <span className="text-xs font-mono opacity-50">{count}</span>
             </div>
             {f.id !== 'all' && (
               <MiniSparkline status={f.id} shipments={shipments} />
@@ -228,7 +230,7 @@ export default function Home() {
         <Toaster position="bottom-right" theme="dark" />
         <div className="absolute left-4 top-4 z-20 pointer-events-none flex flex-col gap-4">
           <div className="pointer-events-auto liquid-glass relative px-5 py-4 min-w-[280px] space-y-3">
-            <div className="text-[10px] uppercase tracking-[0.24em] text-[var(--accent-cyan)] font-bold">Pipeline Impact</div>
+            <div className="text-xs uppercase tracking-[0.24em] text-[var(--accent-cyan)] font-bold">Pipeline Impact</div>
             <div className="mt-2 text-base font-semibold text-[var(--text-primary)] tracking-tight">
               Cargo under protection: ${(cargoUnderProtectionUSD / 1e6).toFixed(1)}M
             </div>
@@ -249,7 +251,7 @@ export default function Home() {
           </div>
           <div className="pointer-events-auto bg-[var(--bg-overlay)] backdrop-blur-xl border border-[var(--border-subtle)] rounded-2xl p-4 shadow-2xl min-w-[180px] space-y-4">
             <div>
-              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-muted)] mb-3 pl-1">Operational Filter</p>
+              <p className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--text-muted)] mb-3 pl-1">Operational Filter</p>
               <ShipmentFilters onFilterChange={setActiveFilter} />
             </div>
           </div>
@@ -270,7 +272,7 @@ export default function Home() {
               {shouldLoadGlobe ? (
                 <GlobeView simulationControlsOpen={simulationControlsOpen} filter={activeFilter} />
               ) : (
-                <div className="flex items-center justify-center w-full h-full bg-[#020617] text-white/40">Loading globe...</div>
+                <GlobeSkeleton />
               )}
             </div>
           </ErrorBoundary>
@@ -283,7 +285,7 @@ export default function Home() {
 
             <div className="relative z-10 flex flex-col items-center gap-10 px-6 text-center">
               <div className="space-y-2">
-                <p className="text-[var(--text-muted)] text-[10px] font-bold uppercase tracking-[0.4em]">Standby Mode</p>
+                <p className="text-[var(--text-muted)] text-xs font-bold uppercase tracking-[0.4em]">Standby Mode</p>
                 <h2 className="text-white/40 text-sm font-medium tracking-tight">Globe paused · Tab inactive</h2>
               </div>
 
@@ -295,7 +297,7 @@ export default function Home() {
 
               <button
                 onClick={() => setGlobeEnabled(true)}
-                className="liquid-glass px-10 py-4 text-[10px] font-extrabold uppercase tracking-[0.2em] text-[var(--text-primary)] hover:scale-105 transition-all active:scale-95 cursor-pointer shadow-2xl"
+                className="liquid-glass px-10 py-4 text-xs font-extrabold uppercase tracking-[0.2em] text-[var(--text-primary)] hover:scale-105 transition-all active:scale-95 cursor-pointer shadow-2xl"
               >
                 Resume Live Environment
               </button>
@@ -305,7 +307,7 @@ export default function Home() {
         <div className="absolute top-4 right-4 z-40 flex flex-col items-end gap-3 pointer-events-none">
           <button
             onClick={() => setSimulationControlsOpen((prev) => !prev)}
-            className={`pointer-events-auto liquid-glass px-4 py-2 rounded-2xl text-[10px] font-bold uppercase tracking-[0.2em] flex items-center gap-2 transition-all ${simulationControlsOpen ? 'border-[var(--accent-cyan)]/40 text-[var(--text-primary)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
+            className={`pointer-events-auto liquid-glass px-4 py-2 rounded-2xl text-xs font-bold uppercase tracking-[0.2em] flex items-center gap-2 transition-all ${simulationControlsOpen ? 'border-[var(--accent-cyan)]/40 text-[var(--text-primary)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
             title={simulationControlsOpen ? 'Hide simulation controls' : 'Show simulation controls'}
             aria-label="Toggle simulation controls"
           >
@@ -348,7 +350,7 @@ export default function Home() {
 function PausedKpiCard({ label, value, color = 'text-white' }) {
   return (
     <div className="min-w-44 liquid-glass px-6 py-6 text-left border-white/5">
-      <div className="text-[9px] uppercase tracking-[0.25em] text-[var(--text-muted)] font-bold mb-4">{label}</div>
+      <div className="text-xs uppercase tracking-[0.25em] text-[var(--text-muted)] font-bold mb-4">{label}</div>
       <div className={`text-4xl font-light font-mono tracking-tighter ${color}`}>{value}</div>
     </div>
   );
diff --git a/dashboard/app/shipments/components/ShipmentsTab.jsx b/dashboard/app/shipments/components/ShipmentsTab.jsx
index 484480e..f06b7af 100644
--- a/dashboard/app/shipments/components/ShipmentsTab.jsx
+++ b/dashboard/app/shipments/components/ShipmentsTab.jsx
@@ -128,7 +128,7 @@ export default function ShipmentsTab({ shipments, isLoading, onEdit }) {
   const renderHeader = (key, label) => (
     <th
       onClick={() => toggleSort(key)}
-      className="sticky top-0 z-20 px-4 py-4 text-left text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-muted)] cursor-pointer hover:text-[var(--text-secondary)] select-none whitespace-nowrap bg-[var(--bg-surface)] backdrop-blur-md transition-colors"
+      className="sticky top-0 z-20 px-4 py-4 text-left text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--text-muted)] cursor-pointer hover:text-[var(--text-secondary)] select-none whitespace-nowrap bg-[var(--bg-surface)] backdrop-blur-md transition-colors"
     >
       <div className="flex items-center">
         {label}
@@ -182,7 +182,7 @@ export default function ShipmentsTab({ shipments, isLoading, onEdit }) {
                     className={`group hover:bg-[var(--accent-blue)]/5 cursor-pointer transition-all duration-300 relative ${selectedIndex === idx ? 'bg-[var(--accent-blue)]/10' : ''}`}
                   >
                     <td className="px-6 py-5 whitespace-nowrap">
-                      <span className={`text-[9px] font-extrabold uppercase tracking-widest px-2.5 py-1 rounded-lg border ${
+                      <span className={`text-[11px] font-extrabold uppercase tracking-widest px-2.5 py-1 rounded-lg border ${
                         s.importExport === 'export'
                           ? 'bg-amber-500/10 text-amber-500 border-amber-500/20'
                           : 'bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)] border-[var(--accent-cyan)]/20'
@@ -196,7 +196,7 @@ export default function ShipmentsTab({ shipments, isLoading, onEdit }) {
                         <ChevronRight className="w-3.5 h-3.5 text-[var(--text-muted)] opacity-50" />
                         <span className="font-medium text-[var(--text-secondary)]">{s.destination}</span>
                       </div>
-                      <div className="font-mono text-[9px] text-[var(--text-muted)] tracking-wider uppercase opacity-60">
+                      <div className="font-mono text-[11px] text-[var(--text-muted)] tracking-wider uppercase opacity-60">
                         {s.trackingNumber || s.id.slice(0, 8)}
                       </div>
                     </td>
@@ -259,7 +259,7 @@ export default function ShipmentsTab({ shipments, isLoading, onEdit }) {
       </div>
 
       <div className="flex items-center justify-between px-2">
-        <p className="text-[9px] uppercase tracking-[0.2em] text-[var(--text-muted)] font-extrabold flex items-center gap-2">
+        <p className="text-[11px] uppercase tracking-[0.2em] text-[var(--text-muted)] font-extrabold flex items-center gap-2">
           <span className="w-1 h-1 rounded-full bg-[var(--accent-cyan)]" />
           Synchronized: {displayed.length} / {shipments.length} Global Nodes Active
         </p>
diff --git a/dashboard/app/shipments/page.js b/dashboard/app/shipments/page.js
index 38275dc..41853d6 100644
--- a/dashboard/app/shipments/page.js
+++ b/dashboard/app/shipments/page.js
@@ -9,6 +9,8 @@ import ErrorBoundary from '../components/ErrorBoundary.jsx';
 import MinimalErrorFallback from '../components/MinimalErrorFallback.jsx';
 import { useShipmentStore } from '../store/shipmentStore.js';
 import { PAGE_ENTER } from '../lib/motion.js';
+import { Skeleton } from '../components/ui/Skeleton';
+import { EmptyState } from '../components/ui/EmptyState';
 
 const OverviewTab = dynamic(() => import('./components/OverviewTab.jsx'), {
   ssr: false,
@@ -85,7 +87,7 @@ export default function DetailsPage() {
       <NavBar />
       
       <div className="flex flex-col px-6 py-4 border-b border-[var(--border-subtle)] bg-[var(--bg-surface)]/20 backdrop-blur-md z-30 space-y-4">
-        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-muted)]">
+        <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-[0.2em] text-[var(--text-muted)]">
           <span className="hover:text-[var(--text-primary)] transition-colors cursor-pointer">OpenTrade</span>
           <span className="opacity-30">/</span>
           <span className="text-[var(--text-secondary)]">Logistics</span>
@@ -100,13 +102,16 @@ export default function DetailsPage() {
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
                 className={[
-                  'px-4 py-2 rounded-xl text-[10px] font-bold uppercase tracking-widest transition-all flex items-center gap-2',
+                  'px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-widest transition-all flex items-center gap-2',
                   activeTab === tab.id
                     ? 'bg-[var(--glass-bg-elevated)] text-[var(--text-primary)] shadow-sm border border-[var(--glass-border)]'
                     : 'text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-overlay)]/40',
                 ].join(' ')}
               >
-                <tab.icon className={`w-3.5 h-3.5 ${activeTab === tab.id ? 'text-[var(--accent-cyan)]' : 'opacity-60'}`} aria-hidden="true" />
+                {(() => {
+                  const Icon = tab.icon;
+                  return <Icon className={`w-3.5 h-3.5 ${activeTab === tab.id ? 'text-[var(--accent-cyan)]' : 'opacity-60'}`} aria-hidden="true" />;
+                })()}
                 <span className="hidden sm:inline">{tab.label}</span>
               </button>
             ))}
@@ -117,7 +122,7 @@ export default function DetailsPage() {
               <div className="hidden md:flex items-center gap-3">
                 <button
                   onClick={() => setIsImportModalOpen(true)}
-                  className="h-10 flex items-center gap-2 px-4 rounded-xl text-[10px] font-bold uppercase tracking-widest border border-[var(--border-subtle)] bg-[var(--bg-elevated)]/20 hover:bg-[var(--bg-elevated)]/50 text-[var(--text-secondary)] transition-all active:scale-95"
+                  className="h-10 flex items-center gap-2 px-4 rounded-xl text-xs font-bold uppercase tracking-widest border border-[var(--border-subtle)] bg-[var(--bg-elevated)]/20 hover:bg-[var(--bg-elevated)]/50 text-[var(--text-secondary)] transition-all active:scale-95"
                 >
                   <Upload className="w-4 h-4" />
                   Import
@@ -125,7 +130,7 @@ export default function DetailsPage() {
                 <button
                   onClick={handleExport}
                   disabled={isExporting || isLoading || shipments.length === 0}
-                  className="h-10 flex items-center gap-2 px-4 rounded-xl text-[10px] font-bold uppercase tracking-widest border border-[var(--border-subtle)] bg-[var(--bg-elevated)]/20 hover:bg-[var(--bg-elevated)]/50 text-[var(--text-secondary)] transition-all active:scale-95 disabled:opacity-50"
+                  className="h-10 flex items-center gap-2 px-4 rounded-xl text-xs font-bold uppercase tracking-widest border border-[var(--border-subtle)] bg-[var(--bg-elevated)]/20 hover:bg-[var(--bg-elevated)]/50 text-[var(--text-secondary)] transition-all active:scale-95 disabled:opacity-50"
                 >
                   <Download className="w-4 h-4" />
                   {isExporting ? 'Exporting...' : 'Export Data'}
@@ -133,7 +138,7 @@ export default function DetailsPage() {
               </div>
               <button
                 onClick={openAdd}
-                className="h-10 flex items-center gap-2 px-5 rounded-xl text-[10px] font-bold uppercase tracking-widest bg-[var(--accent-blue)] hover:brightness-110 text-white transition-all active:scale-95 shadow-xl shadow-blue-500/20"
+                className="h-10 flex items-center gap-2 px-5 rounded-xl text-xs font-bold uppercase tracking-widest bg-[var(--accent-blue)] hover:brightness-110 text-white transition-all active:scale-95 shadow-xl shadow-blue-500/20"
               >
                 <Plus className="w-4 h-4" />
                 <span className="hidden sm:inline">Add Shipment</span>
@@ -150,7 +155,18 @@ export default function DetailsPage() {
         className="flex-1 overflow-y-auto custom-scrollbar relative z-10"
       >
         {!isLoading && shipments.length === 0 ? (
-          <EmptyState onAdd={openAdd} />
+          <div className="flex-1 min-h-[500px] flex items-center justify-center">
+            <EmptyState 
+              icon={ShipWheel}
+              title="No shipments yet"
+              description="Add your first shipment to start tracking cargo in real time across global trade corridors."
+              action={{
+                label: "Add your first shipment",
+                onClick: openAdd,
+                icon: Plus
+              }}
+            />
+          </div>
         ) : (
           <div className="p-6">
             {activeTab === 'overview' && (
@@ -185,43 +201,22 @@ export default function DetailsPage() {
   );
 }
 
-function EmptyState({ onAdd }) {
-  return (
-    <div className="h-full flex flex-col items-center justify-center p-8 text-center">
-      <div className="relative mb-6">
-        <div className="absolute inset-0 bg-[var(--accent-cyan)]/10 blur-3xl rounded-full" />
-        <ShipWheel className="w-24 h-24 text-[var(--text-muted)] opacity-20 relative animate-pulse-slow" />
-      </div>
-      <h3 className="text-xl font-bold tracking-tight mb-2">No shipments yet</h3>
-      <p className="text-sm text-[var(--text-secondary)] max-w-sm mb-8">
-        Add your first shipment to start tracking cargo in real time across global trade corridors.
-      </p>
-      <button
-        onClick={onAdd}
-        className="flex items-center gap-2 px-6 py-3 rounded-2xl bg-[var(--accent-blue)] text-white text-xs font-bold uppercase tracking-widest hover:brightness-110 transition-all active:scale-95 shadow-xl shadow-[var(--accent-blue)]/20"
-      >
-        <Plus className="w-4 h-4" />
-        Add your first shipment
-      </button>
-    </div>
-  );
-}
 
 function ShipmentsPageSkeleton() {
   return (
     <div className="flex-1 p-6 space-y-8">
-      <div className="h-10 w-72 rounded-xl bg-[var(--bg-elevated)] animate-pulse" />
+      <Skeleton variant="line" className="h-10 w-72 rounded-xl" />
       <div className="grid grid-cols-2 gap-4 md:grid-cols-6">
         {[0, 1, 2, 3, 4, 5].map((i) => (
-          <div key={i} className="h-24 rounded-2xl glass-panel !bg-[var(--bg-elevated)]/40 animate-pulse" />
+          <Skeleton key={i} variant="block" className="h-24 rounded-2xl" />
         ))}
       </div>
       <div className="glass-panel glass-edge !bg-[var(--bg-elevated)]/20 p-6 space-y-6">
         <div className="flex justify-between items-center">
-          <div className="h-9 w-64 rounded-xl bg-[var(--bg-elevated)] animate-pulse" />
-          <div className="h-9 w-32 rounded-xl bg-[var(--bg-elevated)] animate-pulse" />
+          <Skeleton variant="line" className="h-9 w-64 rounded-xl" />
+          <Skeleton variant="line" className="h-9 w-32 rounded-xl" />
         </div>
-        <div className="h-[400px] rounded-2xl bg-[var(--bg-elevated)]/40 animate-pulse border border-[var(--border-subtle)]" />
+        <Skeleton variant="block" className="h-[400px] rounded-2xl" />
       </div>
     </div>
   );
diff --git a/dashboard/app/visualize/page.js b/dashboard/app/visualize/page.js
index 68789ff..20c319d 100644
--- a/dashboard/app/visualize/page.js
+++ b/dashboard/app/visualize/page.js
@@ -11,6 +11,7 @@ import {
 	ShieldCheck,
 	TerminalSquare,
 } from 'lucide-react';
+import { Skeleton } from '../components/ui/Skeleton';
 import NavBar from '../components/NavBar.jsx';
 
 const AGENT_METRICS = [
@@ -181,10 +182,10 @@ function PipelineCard({ node, status, lastProcessed, eventsCount, heartbeat }) {
 		<div className="min-w-[220px] glass-panel p-4 flex-1">
 			<div className="flex items-start justify-between gap-3">
 				<div>
-					<div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)]">Node</div>
+					<div className="text-[11px] uppercase tracking-[0.24em] text-[var(--text-muted)]">Node</div>
 					<div className="mt-1 text-sm font-bold text-[var(--text-primary)]">{node.label}</div>
 				</div>
-				<span className={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-[10px] font-bold uppercase tracking-[0.2em] ${style.chip}`}>
+				<span className={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-[11px] font-bold uppercase tracking-[0.2em] ${style.chip}`}>
 					<span className={`h-2 w-2 rounded-full ${style.dot}`} />
 					{style.label}
 				</span>
@@ -192,12 +193,12 @@ function PipelineCard({ node, status, lastProcessed, eventsCount, heartbeat }) {
 
 			<div className="mt-4 grid grid-cols-2 gap-2 text-xs">
 				<div className="rounded-xl border border-[var(--glass-border)] bg-[var(--glass-bg-elevated)]/20 px-2.5 py-2">
-					<div className="text-[10px] uppercase tracking-[0.18em] text-[var(--text-muted)]">Last</div>
+					<div className="text-[11px] uppercase tracking-[0.18em] text-[var(--text-muted)]">Last</div>
 					<div className="mt-1 text-[var(--text-primary)] font-medium">{formatTime(lastProcessed)}</div>
-					<div className="text-[10px] text-[var(--text-muted)]">{formatAgo(lastProcessed)}</div>
+					<div className="text-[11px] text-[var(--text-muted)]">{formatAgo(lastProcessed)}</div>
 				</div>
 				<div className="rounded-xl border border-[var(--glass-border)] bg-[var(--glass-bg-elevated)]/20 px-2.5 py-2">
-					<div className="text-[10px] uppercase tracking-[0.18em] text-[var(--text-muted)]">Events</div>
+					<div className="text-[11px] uppercase tracking-[0.18em] text-[var(--text-muted)]">Events</div>
 					<div className="mt-1 text-lg font-bold text-[var(--accent-cyan)]">{eventsCount}</div>
 				</div>
 			</div>
@@ -213,7 +214,7 @@ function Panel({ title, right, children }) {
 	return (
 		<div className="glass-panel overflow-hidden">
 			<div className="flex items-center justify-between border-b border-[var(--glass-border)] px-4 py-3 bg-[var(--glass-bg-elevated)]/30">
-				<div className="text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-secondary)]">{title}</div>
+				<div className="text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--text-secondary)]">{title}</div>
 				{right}
 			</div>
 			<div className="p-4">{children}</div>
@@ -494,7 +495,7 @@ export default function VisualizePage() {
 			<main className="flex-1 overflow-y-auto custom-scrollbar">
 				<div className="mx-auto w-full max-w-[1480px] px-6 py-8 space-y-8">
 					<header>
-						<p className="text-[11px] uppercase tracking-[0.25em] text-[var(--accent-cyan)] font-bold font-display">AI Agent Pipeline</p>
+						<p className="text-xs uppercase tracking-[0.25em] text-[var(--accent-cyan)] font-bold font-display">AI Agent Pipeline</p>
 						<h1 className="mt-2 text-3xl font-bold tracking-tight font-display text-[var(--text-primary)]">System Logic Visualization</h1>
 						<p className="mt-2 text-sm text-[var(--text-secondary)] max-w-2xl">
 							Real-time view of monitor → impact → resolution → execute stages. Monitor the live reasoning and automated decision flow across global shipping corridors.
@@ -504,10 +505,10 @@ export default function VisualizePage() {
 					<section className="glass-panel p-6">
 						<div className="mb-6 flex flex-wrap items-center justify-between gap-3">
 							<div>
-								<div className="text-[10px] uppercase tracking-[0.26em] text-[var(--text-muted)] font-bold">Pipeline Flow</div>
+								<div className="text-xs uppercase tracking-[0.26em] text-[var(--text-muted)] font-bold">Pipeline Flow</div>
 								<div className="mt-1 text-lg font-bold text-[var(--text-primary)]">End-to-End Status</div>
 							</div>
-							<div className="inline-flex items-center gap-2 rounded-full border border-[var(--accent-cyan)]/25 bg-[var(--accent-cyan)]/10 px-3 py-1 text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--accent-cyan)]">
+							<div className="inline-flex items-center gap-2 rounded-full border border-[var(--accent-cyan)]/25 bg-[var(--accent-cyan)]/10 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--accent-cyan)]">
 								<Activity className="h-3.5 w-3.5" />
 								Live Network
 							</div>
@@ -541,7 +542,7 @@ export default function VisualizePage() {
 					<section className="glass-panel p-6">
 						<div className="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--glass-border)] pb-4 mb-6">
 							<div>
-								<div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)] font-bold">Live Reasoning</div>
+								<div className="text-xs uppercase tracking-[0.24em] text-[var(--text-muted)] font-bold">Live Reasoning</div>
 								<div className="mt-1 text-xl font-bold text-[var(--text-primary)]">Trace {selectedTraceId ? `#${selectedTraceId.slice(-8)}` : '--'}</div>
 							</div>
 							<div className="flex flex-wrap gap-2">
@@ -563,9 +564,14 @@ export default function VisualizePage() {
 						</div>
 
 						{traceLoading && !traceDetails ? (
-							<div className="flex items-center justify-center py-14 text-sm text-[var(--text-secondary)]">
-								<LoaderCircle className="mr-2 h-4 w-4 animate-spin text-[var(--accent-cyan)]" />
-								Loading trace...
+							<div className="py-14 space-y-4">
+								<Skeleton variant="line" className="h-8 w-1/3" />
+								<div className="grid gap-4 xl:grid-cols-2">
+									<Skeleton variant="block" className="h-48" />
+									<Skeleton variant="block" className="h-48" />
+									<Skeleton variant="block" className="h-64" />
+									<Skeleton variant="block" className="h-64" />
+								</div>
 							</div>
 						) : traceDetails ? (
 							<div className="mt-4 grid gap-4 xl:grid-cols-2">
@@ -604,17 +610,17 @@ export default function VisualizePage() {
 									title="Final Parsed JSON"
 									right={
 										!validation.valid ? (
-											<span className="inline-flex items-center gap-1 rounded-full border border-[var(--accent-red)]/30 bg-[var(--accent-red)]/10 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--accent-red)]">
+											<span className="inline-flex items-center gap-1 rounded-full border border-[var(--accent-red)]/30 bg-[var(--accent-red)]/10 px-2 py-1 text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--accent-red)]">
 												<ShieldAlert className="h-3.5 w-3.5" />
 												Fail
 											</span>
 										) : validation.repairedCount > 0 ? (
-											<span className="inline-flex items-center gap-1 rounded-full border border-[var(--accent-amber)]/30 bg-[var(--accent-amber)]/10 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--accent-amber)]">
+											<span className="inline-flex items-center gap-1 rounded-full border border-[var(--accent-amber)]/30 bg-[var(--accent-amber)]/10 px-2 py-1 text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--accent-amber)]">
 												<ShieldAlert className="h-3.5 w-3.5" />
 												{`Repaired ${validation.repairedCount}`}
 											</span>
 										) : (
-											<span className="inline-flex items-center gap-1 rounded-full border border-[var(--accent-green)]/30 bg-[var(--accent-green)]/10 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--accent-green)]">
+											<span className="inline-flex items-center gap-1 rounded-full border border-[var(--accent-green)]/30 bg-[var(--accent-green)]/10 px-2 py-1 text-[11px] font-bold uppercase tracking-[0.2em] text-[var(--accent-green)]">
 												<ShieldCheck className="h-3.5 w-3.5" />
 												Pass
 											</span>
@@ -650,7 +656,7 @@ export default function VisualizePage() {
 					<section className="glass-panel p-6">
 						<div className="mb-6 flex flex-wrap items-center justify-between gap-3">
 							<div>
-								<div className="text-[10px] uppercase tracking-[0.24em] text-[var(--text-muted)] font-bold">Disruption Timeline</div>
+								<div className="text-xs uppercase tracking-[0.24em] text-[var(--text-muted)] font-bold">Disruption Timeline</div>
 								<div className="mt-1 text-xl font-bold text-[var(--text-primary)]">Last {timeline.length} traces</div>
 							</div>
 							{selectedTimelineItem ? (
@@ -661,9 +667,10 @@ export default function VisualizePage() {
 						</div>
 
 						{timelineLoading ? (
-							<div className="flex items-center justify-center py-10 text-sm text-[var(--text-secondary)]">
-								<LoaderCircle className="mr-2 h-4 w-4 animate-spin text-[var(--accent-cyan)]" />
-								Loading timeline...
+							<div className="flex gap-3 overflow-hidden py-2">
+								{[0, 1, 2, 3, 4].map((i) => (
+									<Skeleton key={i} variant="block" className="h-32 w-[260px] shrink-0 rounded-2xl" />
+								))}
 							</div>
 						) : timeline.length ? (
 							<div className="overflow-x-auto custom-scrollbar">
@@ -692,7 +699,7 @@ export default function VisualizePage() {
 											>
 												<div className="flex items-start justify-between gap-2">
 													<div className="text-xs font-bold text-[var(--text-primary)]">{item.disruption?.type || 'UNKNOWN'}</div>
-													<span className={`rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.14em] ${severityTone}`}>
+													<span className={`rounded-full border px-2 py-0.5 text-[11px] font-bold uppercase tracking-[0.14em] ${severityTone}`}>
 														S{severity || 0}
 													</span>
 												</div>