diff --git a/README.md b/README.md
index 5f4c5b1..0f3c44e 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 A self-hosted, full-stack network management platform for MikroTik devices. Monitor, configure, and manage your entire MikroTik infrastructure — routers, switches, and wireless access points — from a single web interface.
 
-![Version](https://img.shields.io/badge/version-0.10.8_Beta-blue)
+![Version](https://img.shields.io/badge/version-0.10.9_Beta-blue)
 ![License](https://img.shields.io/badge/license-AGPLv3-blue)
 ![Docker](https://img.shields.io/badge/docker-compose-2496ED?logo=docker&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.3-3178C6?logo=typescript&logoColor=white)
diff --git a/backend/package.json b/backend/package.json
index 2f36b6d..c776cf4 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mikrotik-manager-backend",
-  "version": "0.10.8-beta",
+  "version": "0.10.9-beta",
   "description": "Mikrotik Network Management Platform - Backend API",
   "main": "dist/index.js",
   "scripts": {
diff --git a/frontend/index.html b/frontend/index.html
index ba98a20..bba8b26 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mikrotik Manager</title>
     <meta name="description" content="Self-hosted Mikrotik network management platform" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/package.json b/frontend/package.json
index 31e357b..d15fcbc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mikrotik-manager-frontend",
-  "version": "0.10.8-beta",
+  "version": "0.10.9-beta",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 364ba48..8aaf085 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -8,7 +8,7 @@ export default function AppLayout() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <div className="flex h-screen bg-gray-50 dark:bg-slate-900 overflow-hidden">
+    <div className="flex h-screen overflow-hidden" style={{ background: 'var(--bg)' }}>
       {/* Mobile backdrop */}
       {sidebarOpen && (
         <div
@@ -22,7 +22,7 @@ export default function AppLayout() {
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <TopBar onMenuClick={() => setSidebarOpen((o) => !o)} />
         <SecurityBanners />
-        <main className="flex-1 overflow-auto p-3 sm:p-6">
+        <main className="flex-1 overflow-auto" style={{ padding: '22px 28px' }}>
           <Outlet />
         </main>
       </div>
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index f958ca7..09c53d2 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -40,8 +40,8 @@ const networkServicesSubItems = [
   { to: '/network-services/dhcp',       icon: Server,   label: 'DHCP' },
   { to: '/network-services/dns',        icon: Globe,    label: 'DNS' },
   { to: '/network-services/ntp',        icon: Clock,    label: 'NTP' },
-  { to: '/network-services/wireguard',  icon: Shield,    label: 'WireGuard' },
-  { to: '/network-services/syslog',     icon: FileText,  label: 'Syslog' },
+  { to: '/network-services/wireguard',  icon: Shield,   label: 'WireGuard' },
+  { to: '/network-services/syslog',     icon: FileText, label: 'Syslog' },
 ];
 
 interface SidebarProps {
@@ -49,6 +49,43 @@ interface SidebarProps {
   onMobileClose: () => void;
 }
 
+function NavItem({
+  to,
+  icon: Icon,
+  label,
+  isCollapsed,
+  onClick,
+  end,
+}: {
+  to: string;
+  icon: React.ElementType;
+  label: string;
+  isCollapsed: boolean;
+  onClick: () => void;
+  end?: boolean;
+}) {
+  return (
+    <NavLink
+      to={to}
+      end={end}
+      title={isCollapsed ? label : undefined}
+      onClick={onClick}
+      className={({ isActive }) =>
+        clsx(
+          'flex items-center gap-[10px] rounded-[6px] text-[13px] font-medium transition-colors duration-150 relative',
+          isCollapsed ? 'md:justify-center md:px-2 px-[10px] py-[7px]' : 'px-[10px] py-[7px]',
+          isActive
+            ? 'bg-surface-3 text-ink font-semibold border-l-2 border-accent pl-[8px]'
+            : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-l-2 border-transparent'
+        )
+      }
+    >
+      <Icon className="w-[15px] h-[15px] flex-shrink-0" />
+      <span className={clsx(isCollapsed && 'md:hidden')}>{label}</span>
+    </NavLink>
+  );
+}
+
 export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
   const [collapsed, setCollapsed] = useState(false);
   const location = useLocation();
@@ -63,6 +100,8 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
   const hasRouters   = devices.some(d => d.device_type === 'router');
   const hasWireless  = devices.some(d => d.device_type === 'wireless_ap');
 
+  const onlineCount = devices.filter(d => d.status === 'online').length;
+
   const switchesActive = location.pathname.startsWith('/switches');
   const [switchesOpen, setSwitchesOpen] = useState(switchesActive);
   const effectiveSwitchesOpen = switchesOpen || switchesActive;
@@ -79,77 +118,90 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
   const [networkServicesOpen, setNetworkServicesOpen] = useState(networkServicesActive);
   const effectiveNetworkServicesOpen = networkServicesOpen || networkServicesActive;
 
-  // On mobile the sidebar is always expanded (never icon-only)
   const isCollapsed = collapsed;
 
   const handleNavClick = () => {
-    // Close mobile drawer when navigating
     onMobileClose();
   };
 
+  // Group header button (Switches / Routers / Wireless / Network Services)
+  const GroupHeader = ({
+    icon: Icon,
+    label,
+    isActive,
+    isOpen,
+    onToggle,
+  }: {
+    icon: React.ElementType;
+    label: string;
+    isActive: boolean;
+    isOpen: boolean;
+    onToggle: () => void;
+  }) => (
+    <button
+      onClick={onToggle}
+      className={clsx(
+        'w-full flex items-center gap-[10px] px-[10px] py-[7px] rounded-[6px] text-[13px] font-medium transition-colors duration-150 border-l-2 border-transparent',
+        isActive ? 'text-accent' : 'text-ink-2 hover:bg-surface-3 hover:text-ink'
+      )}
+    >
+      <Icon className="w-[15px] h-[15px] flex-shrink-0" />
+      <span className="flex-1 text-left">{label}</span>
+      <ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', isOpen ? 'rotate-0' : '-rotate-90')} />
+    </button>
+  );
+
   return (
     <aside
       className={clsx(
-        // Base styles
-        'flex-shrink-0 bg-slate-100 dark:bg-slate-900 border-r border-gray-200 dark:border-slate-700 flex flex-col transition-all duration-200',
-        // Mobile: fixed drawer that slides in/out
+        'flex-shrink-0 flex flex-col transition-all duration-200',
         'fixed inset-y-0 left-0 z-50',
         mobileOpen ? 'translate-x-0' : '-translate-x-full',
-        // Desktop: static in flex layout, normal collapse behaviour
         'md:relative md:translate-x-0',
         isCollapsed ? 'md:w-14' : 'md:w-56',
-        // Mobile always full width
         'w-64',
       )}
+      style={{ background: 'var(--surface)', borderRight: '1px solid var(--line)' }}
     >
-      {/* Logo */}
+      {/* Brand block */}
       <div
         className={clsx(
-          'flex items-center border-b border-gray-200 dark:border-slate-700 py-5',
-          isCollapsed ? 'md:justify-center md:px-2 px-4 gap-3' : 'gap-3 px-4'
+          'flex items-center py-[22px]',
+          isCollapsed ? 'md:justify-center md:px-2 px-4 gap-[10px]' : 'gap-[10px] px-4',
+          'border-b'
         )}
+        style={{ borderColor: 'var(--line)' }}
       >
-        <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
-          <Network className="w-4 h-4 text-white" />
+        <div
+          className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center flex-shrink-0"
+          style={{ background: 'linear-gradient(135deg, var(--accent), var(--accent-2))' }}
+        >
+          <Network className="w-4 h-4" style={{ color: 'var(--accent-fg)' }} />
         </div>
-        {/* Always show text on mobile; respect collapsed on desktop */}
         <div className={clsx(isCollapsed && 'md:hidden')}>
-          <div className="text-sm font-bold text-gray-900 dark:text-white leading-none">Mikrotik</div>
-          <div className="text-xs text-gray-500 dark:text-slate-400 mt-0.5 leading-none">Manager</div>
-          <div className="text-[10px] text-gray-400 dark:text-slate-500 mt-1 leading-none">{APP_VERSION}</div>
+          <div className="text-[14px] font-semibold leading-none" style={{ color: 'var(--ink)' }}>Mikrotik Manager</div>
+          <div className="text-[11px] leading-none mt-[3px]" style={{ color: 'var(--ink-3)' }}>{APP_VERSION}</div>
         </div>
-        {/* Mobile close button */}
         <button
           onClick={onMobileClose}
-          className="ml-auto p-1.5 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-slate-300 md:hidden"
+          className="ml-auto p-1.5 rounded-lg md:hidden"
+          style={{ color: 'var(--ink-4)' }}
         >
           <X className="w-4 h-4" />
         </button>
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 px-2 py-3 space-y-0.5 overflow-y-auto">
-        {navItems.map(({ to, icon: Icon, label }) => (
-          <NavLink
-            key={to}
-            to={to}
-            title={isCollapsed ? label : undefined}
-            onClick={handleNavClick}
-            className={({ isActive }) =>
-              clsx(
-                'flex items-center rounded-lg text-sm font-medium transition-colors duration-150',
-                isCollapsed ? 'md:justify-center md:px-2 px-3 py-2.5 gap-3' : 'gap-3 px-3 py-2.5',
-                isActive
-                  ? 'bg-blue-600 text-white shadow-sm'
-                  : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-              )
-            }
-          >
-            <Icon className="w-4 h-4 flex-shrink-0" />
-            <span className={clsx(isCollapsed && 'md:hidden')}>{label}</span>
-          </NavLink>
+      <nav className="flex-1 px-[14px] py-3 space-y-[1px] overflow-y-auto">
+        {navItems.map(({ to, icon, label }) => (
+          <NavItem key={to} to={to} icon={icon} label={label} isCollapsed={isCollapsed} onClick={handleNavClick} />
         ))}
 
+        {/* Divider before device-type groups */}
+        {(hasSwitches || hasRouters || hasWireless) && !isCollapsed && (
+          <div className="my-[6px] mx-2" style={{ height: 1, background: 'var(--line)' }} />
+        )}
+
         {/* Switches group */}
         {hasSwitches && (
           isCollapsed ? (
@@ -159,50 +211,28 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
               onClick={handleNavClick}
               className={({ isActive }) =>
                 clsx(
-                  'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5',
+                  'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
                   isActive || switchesActive
-                    ? 'bg-blue-600 text-white shadow-sm'
-                    : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
+                    ? 'bg-surface-3 text-ink border-accent'
+                    : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
                 )
               }
             >
-              <Layers className="w-4 h-4 flex-shrink-0" />
+              <Layers className="w-[15px] h-[15px] flex-shrink-0" />
             </NavLink>
           ) : (
             <>
-              <button
-                onClick={() => setSwitchesOpen(o => !o)}
-                className={clsx(
-                  'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150',
-                  switchesActive
-                    ? 'text-blue-600 dark:text-blue-400'
-                    : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-                )}
-              >
-                <Layers className="w-4 h-4 flex-shrink-0" />
-                <span className="flex-1 text-left">Switches</span>
-                <ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveSwitchesOpen ? 'rotate-0' : '-rotate-90')} />
-              </button>
+              <GroupHeader
+                icon={Layers}
+                label="Switches"
+                isActive={switchesActive}
+                isOpen={effectiveSwitchesOpen}
+                onToggle={() => setSwitchesOpen(o => !o)}
+              />
               {effectiveSwitchesOpen && (
-                <div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5">
-                  {switchSubItems.map(({ to, icon: Icon, label }) => (
-                    <NavLink
-                      key={to}
-                      to={to}
-                      end
-                      onClick={handleNavClick}
-                      className={({ isActive }) =>
-                        clsx(
-                          'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
-                          isActive
-                            ? 'bg-blue-600 text-white shadow-sm'
-                            : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-                        )
-                      }
-                    >
-                      <Icon className="w-3.5 h-3.5 flex-shrink-0" />
-                      {label}
-                    </NavLink>
+                <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
+                  {switchSubItems.map(({ to, icon, label }) => (
+                    <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
                   ))}
                 </div>
               )}
@@ -219,50 +249,28 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
               onClick={handleNavClick}
               className={({ isActive }) =>
                 clsx(
-                  'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5',
+                  'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
                   isActive || routersActive
-                    ? 'bg-blue-600 text-white shadow-sm'
-                    : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
+                    ? 'bg-surface-3 text-ink border-accent'
+                    : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
                 )
               }
             >
-              <Router className="w-4 h-4 flex-shrink-0" />
+              <Router className="w-[15px] h-[15px] flex-shrink-0" />
             </NavLink>
           ) : (
             <>
-              <button
-                onClick={() => setRoutersOpen(o => !o)}
-                className={clsx(
-                  'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150',
-                  routersActive
-                    ? 'text-blue-600 dark:text-blue-400'
-                    : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-                )}
-              >
-                <Router className="w-4 h-4 flex-shrink-0" />
-                <span className="flex-1 text-left">Routers</span>
-                <ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveRoutersOpen ? 'rotate-0' : '-rotate-90')} />
-              </button>
+              <GroupHeader
+                icon={Router}
+                label="Routers"
+                isActive={routersActive}
+                isOpen={effectiveRoutersOpen}
+                onToggle={() => setRoutersOpen(o => !o)}
+              />
               {effectiveRoutersOpen && (
-                <div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5">
-                  {routerSubItems.map(({ to, icon: Icon, label }) => (
-                    <NavLink
-                      key={to}
-                      to={to}
-                      end
-                      onClick={handleNavClick}
-                      className={({ isActive }) =>
-                        clsx(
-                          'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
-                          isActive
-                            ? 'bg-blue-600 text-white shadow-sm'
-                            : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-                        )
-                      }
-                    >
-                      <Icon className="w-3.5 h-3.5 flex-shrink-0" />
-                      {label}
-                    </NavLink>
+                <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
+                  {routerSubItems.map(({ to, icon, label }) => (
+                    <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
                   ))}
                 </div>
               )}
@@ -279,148 +287,123 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
               onClick={handleNavClick}
               className={({ isActive }) =>
                 clsx(
-                  'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5',
+                  'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
                   isActive || wirelessActive
-                    ? 'bg-blue-600 text-white shadow-sm'
-                    : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
+                    ? 'bg-surface-3 text-ink border-accent'
+                    : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
                 )
               }
             >
-              <Wifi className="w-4 h-4 flex-shrink-0" />
+              <Wifi className="w-[15px] h-[15px] flex-shrink-0" />
             </NavLink>
           ) : (
             <>
-              <button
-                onClick={() => setWirelessOpen(o => !o)}
-                className={clsx(
-                  'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150',
-                  wirelessActive
-                    ? 'text-blue-600 dark:text-blue-400'
-                    : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-                )}
-              >
-                <Wifi className="w-4 h-4 flex-shrink-0" />
-                <span className="flex-1 text-left">Wireless</span>
-                <ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveWirelessOpen ? 'rotate-0' : '-rotate-90')} />
-              </button>
+              <GroupHeader
+                icon={Wifi}
+                label="Wireless"
+                isActive={wirelessActive}
+                isOpen={effectiveWirelessOpen}
+                onToggle={() => setWirelessOpen(o => !o)}
+              />
               {effectiveWirelessOpen && (
-                <div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5">
-                  {wirelessSubItems.map(({ to, icon: Icon, label }) => (
-                    <NavLink
-                      key={to}
-                      to={to}
-                      end
-                      onClick={handleNavClick}
-                      className={({ isActive }) =>
-                        clsx(
-                          'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
-                          isActive
-                            ? 'bg-blue-600 text-white shadow-sm'
-                            : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-                        )
-                      }
-                    >
-                      <Icon className="w-3.5 h-3.5 flex-shrink-0" />
-                      {label}
-                    </NavLink>
+                <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
+                  {wirelessSubItems.map(({ to, icon, label }) => (
+                    <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
                   ))}
                 </div>
               )}
             </>
           )
         )}
-        {/* Network Services group — always shown */}
-        {isCollapsed ? (
-          <NavLink
-            to="/network-services"
-            title="Network Services"
-            onClick={handleNavClick}
-            className={({ isActive }) =>
-              clsx(
-                'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5',
-                isActive || networkServicesActive
-                  ? 'bg-blue-600 text-white shadow-sm'
-                  : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-              )
-            }
-          >
-            <Network className="w-4 h-4 flex-shrink-0" />
-          </NavLink>
-        ) : (
-          <>
-            <button
-              onClick={() => setNetworkServicesOpen(o => !o)}
-              className={clsx(
-                'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150',
-                networkServicesActive
-                  ? 'text-blue-600 dark:text-blue-400'
-                  : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-              )}
+
+        {/* Network Services group */}
+        <div className="mt-[6px]" style={{ height: 1, background: 'var(--line)', marginInline: '8px' }} />
+        <div className="mt-[6px]">
+          {isCollapsed ? (
+            <NavLink
+              to="/network-services"
+              title="Network Services"
+              onClick={handleNavClick}
+              className={({ isActive }) =>
+                clsx(
+                  'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
+                  isActive || networkServicesActive
+                    ? 'bg-surface-3 text-ink border-accent'
+                    : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
+                )
+              }
             >
-              <Network className="w-4 h-4 flex-shrink-0" />
-              <span className="flex-1 text-left">Network Services</span>
-              <ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveNetworkServicesOpen ? 'rotate-0' : '-rotate-90')} />
-            </button>
-            {effectiveNetworkServicesOpen && (
-              <div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5">
-                {networkServicesSubItems.map(({ to, icon: Icon, label }) => (
-                  <NavLink
-                    key={to}
-                    to={to}
-                    end
-                    onClick={handleNavClick}
-                    className={({ isActive }) =>
-                      clsx(
-                        'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
-                        isActive
-                          ? 'bg-blue-600 text-white shadow-sm'
-                          : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-                      )
-                    }
-                  >
-                    <Icon className="w-3.5 h-3.5 flex-shrink-0" />
-                    {label}
-                  </NavLink>
-                ))}
-              </div>
-            )}
-          </>
-        )}
+              <Network className="w-[15px] h-[15px] flex-shrink-0" />
+            </NavLink>
+          ) : (
+            <>
+              <GroupHeader
+                icon={Network}
+                label="Network Services"
+                isActive={networkServicesActive}
+                isOpen={effectiveNetworkServicesOpen}
+                onToggle={() => setNetworkServicesOpen(o => !o)}
+              />
+              {effectiveNetworkServicesOpen && (
+                <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
+                  {networkServicesSubItems.map(({ to, icon, label }) => (
+                    <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+        </div>
       </nav>
 
-      {/* Settings + collapse toggle */}
-      <div className="px-2 py-3 border-t border-gray-200 dark:border-slate-700 space-y-0.5">
-        <NavLink
+      {/* Footer: poll status card + settings + collapse */}
+      <div className="px-[14px] pb-3 space-y-1">
+        {/* Poll status card */}
+        {!isCollapsed && devices.length > 0 && (
+          <div
+            className="px-3 py-[10px] rounded-[8px] mb-2 text-[11.5px] leading-[1.45]"
+            style={{ background: 'var(--surface-2)', color: 'var(--ink-3)' }}
+          >
+            <div className="flex items-center gap-[6px] mb-1">
+              <span
+                className="w-[6px] h-[6px] rounded-full flex-shrink-0"
+                style={{
+                  background: 'var(--good)',
+                  boxShadow: '0 0 0 2px rgba(141,224,138,0.2), 0 0 8px rgba(141,224,138,0.5)',
+                }}
+              />
+              <span className="font-semibold text-[11.5px]" style={{ color: 'var(--ink-2)' }}>
+                {onlineCount === devices.length ? 'All polls healthy' : `${onlineCount}/${devices.length} reachable`}
+              </span>
+            </div>
+            <span className="mono text-[10.5px]">{onlineCount}/{devices.length} online</span>
+          </div>
+        )}
+
+        {/* Settings link */}
+        <NavItem
           to="/settings"
-          title={isCollapsed ? 'Settings' : undefined}
+          icon={Settings}
+          label="Settings"
+          isCollapsed={isCollapsed}
           onClick={handleNavClick}
-          className={({ isActive }) =>
-            clsx(
-              'flex items-center rounded-lg text-sm font-medium transition-colors duration-150',
-              isCollapsed ? 'md:justify-center md:px-2 px-3 py-2.5 gap-3' : 'gap-3 px-3 py-2.5',
-              isActive
-                ? 'bg-blue-600 text-white shadow-sm'
-                : 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
-            )
-          }
-        >
-          <Settings className="w-4 h-4 flex-shrink-0" />
-          <span className={clsx(isCollapsed && 'md:hidden')}>Settings</span>
-        </NavLink>
+        />
 
         {/* Collapse toggle — desktop only */}
         <button
           onClick={() => setCollapsed(c => !c)}
           title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
           className={clsx(
-            'hidden md:flex w-full items-center rounded-lg text-sm font-medium transition-colors duration-150 text-gray-500 dark:text-slate-500 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-700 dark:hover:text-slate-300',
-            isCollapsed ? 'justify-center px-2 py-2.5' : 'gap-3 px-3 py-2.5'
+            'hidden md:flex w-full items-center rounded-[6px] text-[13px] font-medium transition-colors duration-150',
+            isCollapsed ? 'justify-center px-2 py-[7px]' : 'gap-[10px] px-[10px] py-[7px]',
+            'border-l-2 border-transparent hover:bg-surface-3'
           )}
+          style={{ color: 'var(--ink-4)' }}
         >
           {isCollapsed ? (
-            <ChevronRight className="w-4 h-4 flex-shrink-0" />
+            <ChevronRight className="w-[15px] h-[15px] flex-shrink-0" />
           ) : (
-            <><ChevronLeft className="w-4 h-4 flex-shrink-0" />Collapse</>
+            <><ChevronLeft className="w-[15px] h-[15px] flex-shrink-0" />Collapse</>
           )}
         </button>
       </div>
diff --git a/frontend/src/components/layout/TopBar.tsx b/frontend/src/components/layout/TopBar.tsx
index 7d68122..201f216 100644
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Sun, Moon, LogOut, User, Menu } from 'lucide-react';
+import { Sun, Moon, LogOut, Menu } from 'lucide-react';
 import { useAuthStore } from '../../store/authStore';
 import { useThemeStore } from '../../store/themeStore';
 import GlobalSearch from './GlobalSearch';
@@ -18,37 +18,69 @@ export default function TopBar({ onMenuClick }: TopBarProps) {
     navigate('/login');
   };
 
+  const initial = (user?.username?.[0] ?? 'A').toUpperCase();
+
   return (
-    <header className="h-14 flex-shrink-0 flex items-center gap-2 sm:gap-4 px-3 sm:px-6 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
+    <header
+      className="h-[54px] flex-shrink-0 flex items-center gap-3 px-[22px]"
+      style={{ background: 'var(--bg)', borderBottom: '1px solid var(--line)' }}
+    >
       {/* Hamburger — mobile only */}
       <button
         onClick={onMenuClick}
-        className="md:hidden p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors flex-shrink-0"
+        className="md:hidden p-2 rounded-lg transition-colors flex-shrink-0"
+        style={{ color: 'var(--ink-3)' }}
         aria-label="Open menu"
       >
         <Menu className="w-5 h-5" />
       </button>
 
-      <GlobalSearch />
+      {/* Search */}
+      <div className="flex-1">
+        <GlobalSearch />
+      </div>
+
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {/* Live indicator */}
+        <span
+          className="hidden sm:flex items-center gap-[6px] px-[10px] py-[4px] rounded-full text-[11px] mono"
+          style={{ color: 'var(--ink-3)', border: '1px solid var(--line)' }}
+        >
+          <span
+            className="w-[6px] h-[6px] rounded-full flex-shrink-0"
+            style={{
+              background: 'var(--good)',
+              boxShadow: '0 0 0 2px rgba(141,224,138,0.2), 0 0 6px rgba(141,224,138,0.5)',
+            }}
+          />
+          live
+        </span>
 
-      <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0 ml-auto">
         {/* Theme toggle */}
         <button
           onClick={toggleTheme}
-          className="p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
+          className="p-[7px] rounded-lg transition-colors"
+          style={{ color: 'var(--ink-3)' }}
           title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
         >
-          {theme === 'light' ? (
-            <Moon className="w-4 h-4" />
-          ) : (
-            <Sun className="w-4 h-4" />
-          )}
+          {theme === 'light' ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
         </button>
 
-        {/* User info — hide label on very small screens */}
-        <div className="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-slate-700">
-          <User className="w-3.5 h-3.5 text-gray-500 dark:text-slate-400 flex-shrink-0" />
-          <span className="hidden sm:inline text-sm font-medium text-gray-700 dark:text-slate-200">
+        {/* User chip */}
+        <div
+          className="flex items-center gap-[8px] px-[10px] py-[4px] rounded-[6px]"
+          style={{ background: 'var(--surface-2)' }}
+        >
+          <div
+            className="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold flex-shrink-0"
+            style={{
+              background: 'linear-gradient(135deg, var(--accent), var(--accent-2))',
+              color: 'var(--accent-fg)',
+            }}
+          >
+            {initial}
+          </div>
+          <span className="hidden sm:inline text-[13px] font-medium" style={{ color: 'var(--ink-2)' }}>
             {user?.username}
           </span>
         </div>
@@ -56,7 +88,8 @@ export default function TopBar({ onMenuClick }: TopBarProps) {
         {/* Logout */}
         <button
           onClick={handleLogout}
-          className="p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 hover:text-red-500 dark:hover:text-red-400 transition-colors"
+          className="p-[7px] rounded-lg transition-colors hover:text-bad"
+          style={{ color: 'var(--ink-4)' }}
           title="Logout"
         >
           <LogOut className="w-4 h-4" />
diff --git a/frontend/src/components/ports/SwitchPortDiagram.tsx b/frontend/src/components/ports/SwitchPortDiagram.tsx
index e49723d..a6e0cc8 100644
--- a/frontend/src/components/ports/SwitchPortDiagram.tsx
+++ b/frontend/src/components/ports/SwitchPortDiagram.tsx
@@ -49,20 +49,49 @@ interface BondEditForm {
   members: string[];
 }
 
-function portColor(port: SwitchPort, selected: boolean): string {
-  if (selected) return '#3b82f6';
-  if (port.disabled) return '#64748b';
-  if (!port.running) return '#ef4444';
-  if (port.type === 'bond') return '#d97706'; // amber for bond logical interface
-  return '#22c55e';
+function portState(port: SwitchPort): 'up' | 'down' | 'disabled' {
+  if (port.disabled) return 'disabled';
+  if (port.running) return 'up';
+  return 'down';
 }
 
-function portBorderColor(port: SwitchPort, selected: boolean): string {
-  if (selected) return '#1d4ed8';
-  if (port.disabled) return '#475569';
-  if (!port.running) return '#dc2626';
-  if (port.type === 'bond') return '#b45309';
-  return '#16a34a';
+function PortTile({
+  port, selected, hovered, isMember,
+  onClick, onMouseEnter, onMouseLeave, onDoubleClick,
+}: {
+  port: SwitchPort; selected: boolean; hovered: boolean; isMember?: boolean;
+  onClick: (e: React.MouseEvent) => void;
+  onMouseEnter: () => void; onMouseLeave: () => void; onDoubleClick: () => void;
+}) {
+  const state = portState(port);
+  const bg = selected ? 'var(--accent)' : state === 'up' ? 'var(--port-up-bg)' : state === 'down' ? 'var(--port-down-bg)' : 'var(--surface-3)';
+  const border = isMember && !selected ? 'var(--warn)' : selected ? 'var(--accent)' : state === 'up' ? 'var(--port-up-border)' : state === 'down' ? 'var(--port-down-border)' : 'var(--line)';
+  const textColor = selected ? '#ffffff' : state === 'up' ? 'var(--good)' : state === 'down' ? 'var(--bad)' : 'var(--ink-4)';
+  const ledBg = selected ? '#ffffff' : state === 'up' ? 'var(--good)' : 'transparent';
+  return (
+    <div
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onDoubleClick={onDoubleClick}
+      title={`${port.name}${port.comment ? ` — ${port.comment}` : ''}${port.speed ? ` · ${port.speed}` : ''}`}
+      style={{
+        width: 46, height: 46, borderRadius: 4, position: 'relative', flexShrink: 0,
+        background: bg, border: `1px solid ${border}`,
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        cursor: 'pointer', color: textColor,
+        fontFamily: 'Geist Mono, monospace', fontSize: 10, fontWeight: 600,
+        opacity: hovered ? 0.8 : 1, transition: 'opacity 0.1s',
+      }}
+    >
+      <div style={{
+        position: 'absolute', top: 4, right: 4, width: 5, height: 5, borderRadius: 999,
+        background: ledBg,
+        boxShadow: state === 'up' && !selected ? '0 0 6px var(--accent)' : 'none',
+      }} />
+      <span>{portLabel(port.name)}</span>
+    </div>
+  );
 }
 
 function portLabel(name: string): string {
@@ -167,26 +196,31 @@ function PortTrafficGraph({
     tx: Math.round(p.tx),
   }));
 
+  const rxPeak = trafficData.length > 0 ? Math.max(...trafficData.map(d => d.rx)) : 0;
+  const txPeak = trafficData.length > 0 ? Math.max(...trafficData.map(d => d.tx)) : 0;
+
   return (
     <div className="card p-5 flex flex-col h-full">
-      <div className="flex flex-wrap items-center justify-between gap-3 mb-4 shrink-0">
-        <div className="flex items-center gap-2">
-          <Activity className="w-4 h-4 text-blue-500" />
-          <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
-            {portName} — Throughput
-          </h3>
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-3 shrink-0">
+        <div>
+          <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>
+            {portName} · throughput
+          </div>
+          <div className="mono text-[11px] mt-[2px]" style={{ color: 'var(--ink-3)' }}>
+            {range} · 30s buckets
+          </div>
         </div>
-        <div className="flex gap-1">
+        <div className="flex gap-[4px]">
           {TRAFFIC_RANGES.map((r) => (
             <button
               key={r}
               onClick={() => onRangeChange(r)}
-              className={clsx(
-                'px-2 py-1 text-xs rounded font-medium transition-colors',
-                range === r
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300 hover:bg-gray-200 dark:hover:bg-slate-600'
-              )}
+              className="mono text-[11px] px-[8px] py-[4px] rounded-[5px] transition-colors"
+              style={{
+                background: range === r ? 'var(--surface-3)' : 'transparent',
+                color: range === r ? 'var(--ink)' : 'var(--ink-3)',
+                border: '1px solid var(--line)',
+              }}
             >
               {r}
             </button>
@@ -194,33 +228,45 @@ function PortTrafficGraph({
         </div>
       </div>
 
+      <div className="flex gap-6 mb-3 shrink-0">
+        <div>
+          <div className="mono text-[10px] uppercase tracking-widest" style={{ color: 'var(--ink-4)' }}>RX peak</div>
+          <div className="mono num-tab text-[18px] font-semibold" style={{ color: 'var(--accent)' }}>{formatBps(rxPeak)}</div>
+        </div>
+        <div>
+          <div className="mono text-[10px] uppercase tracking-widest" style={{ color: 'var(--ink-4)' }}>TX peak</div>
+          <div className="mono num-tab text-[18px] font-semibold" style={{ color: 'var(--violet)' }}>{formatBps(txPeak)}</div>
+        </div>
+      </div>
+
       {isLoading ? (
-        <div className="flex-1 min-h-[200px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm">
+        <div className="flex-1 min-h-[160px] flex items-center justify-center mono text-[12px]" style={{ color: 'var(--ink-4)' }}>
           Loading traffic data…
         </div>
       ) : trafficData.length === 0 ? (
-        <div className="flex-1 min-h-[200px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm">
-          No traffic data yet for {portName} in the selected range
+        <div className="flex-1 min-h-[160px] flex items-center justify-center mono text-[12px]" style={{ color: 'var(--ink-4)' }}>
+          No traffic data for {portName} in this range
         </div>
       ) : (
-        <div className="flex-1 min-h-[200px]">
+        <div className="flex-1 min-h-[160px]">
           <ResponsiveContainer width="100%" height="100%">
             <LineChart data={trafficData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-              <XAxis dataKey="time" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
-              <YAxis tickFormatter={formatBps} tick={{ fontSize: 10 }} width={72} />
+              <CartesianGrid strokeDasharray="3 3" stroke="var(--line)" opacity={0.5} />
+              <XAxis dataKey="time" tick={{ fontSize: 10, fill: 'var(--ink-4)' }} interval="preserveStartEnd" />
+              <YAxis tickFormatter={formatBps} tick={{ fontSize: 10, fill: 'var(--ink-4)' }} width={72} />
               <Tooltip
                 formatter={(v) => formatBps(v as number)}
                 contentStyle={{
-                  background: 'var(--color-surface)',
-                  border: '1px solid var(--color-border)',
+                  background: 'var(--surface)',
+                  border: '1px solid var(--line)',
                   borderRadius: '8px',
                   fontSize: '12px',
+                  color: 'var(--ink)',
                 }}
               />
-              <Legend wrapperStyle={{ fontSize: 12 }} />
-              <Line type="monotone" dataKey="rx" stroke="#3b82f6" name="RX (download)" dot={false} strokeWidth={2} />
-              <Line type="monotone" dataKey="tx" stroke="#10b981" name="TX (upload)" dot={false} strokeWidth={2} />
+              <Legend wrapperStyle={{ fontSize: 11 }} />
+              <Line type="monotone" dataKey="rx" stroke="var(--accent)" name="RX" dot={false} strokeWidth={1.6} />
+              <Line type="monotone" dataKey="tx" stroke="var(--violet)" name="TX" dot={false} strokeWidth={1.6} />
             </LineChart>
           </ResponsiveContainer>
         </div>
@@ -343,24 +389,23 @@ function PortInfoCard({ deviceId, portName }: { deviceId: number; portName: stri
 
   const isSfp = d['sfp-module-present'] === 'true';
 
-  const infoRow = (label: string, value: string | undefined) => {
+  const infoRow = (label: string, value: string | undefined, valueColor?: string) => {
     if (!value || value === '' || value === 'none' || value === '0') return null;
+    const isStatus = label === 'Status';
+    const statusColor = isStatus ? (value.includes('ok') || value === 'true' ? 'var(--good)' : value.includes('err') ? 'var(--bad)' : 'var(--ink-2)') : undefined;
     return (
-      <div key={label} className="flex justify-between items-start py-1 border-b border-gray-100 dark:border-slate-700 last:border-0">
-        <span className="text-xs text-gray-500 dark:text-slate-400 shrink-0 mr-2">{label}</span>
-        <span className="text-xs font-medium text-gray-900 dark:text-white text-right font-mono">{value}</span>
+      <div key={label} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid var(--line-soft)' }}>
+        <span style={{ color: 'var(--ink-3)', fontSize: 12 }}>{label}</span>
+        <span className="mono" style={{ color: valueColor ?? statusColor ?? 'var(--ink-2)', fontSize: 12, textAlign: 'right' }}>{value}</span>
       </div>
     );
   };
 
   return (
     <div className="card p-4 overflow-y-auto">
-      <div className="flex items-center gap-2 mb-3">
-        <Cpu className="w-4 h-4 text-blue-500" />
-        <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Port Information</h3>
-      </div>
+      <div className="text-[13px] font-semibold mb-3" style={{ color: 'var(--ink)' }}>Port info</div>
 
-      <div className="space-y-0">
+      <div>
         {infoRow('Status', d['status'])}
         {infoRow('Rate', d['rate'])}
         {infoRow('Full Duplex', d['full-duplex'])}
@@ -372,8 +417,8 @@ function PortInfoCard({ deviceId, portName }: { deviceId: number; portName: stri
 
       {isSfp && (
         <>
-          <div className="mt-3 mb-2 pt-2 border-t border-gray-200 dark:border-slate-600">
-            <span className="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wider">SFP Optic</span>
+          <div style={{ marginTop: 12, marginBottom: 8, paddingTop: 8, borderTop: '1px solid var(--line)' }}>
+            <span className="mono text-[10px] uppercase tracking-widest" style={{ color: 'var(--accent)' }}>SFP Optic</span>
           </div>
           <div className="space-y-0">
             {infoRow('Type', d['sfp-type'])}
@@ -748,373 +793,184 @@ export default function SwitchPortDiagram({ deviceId, autoOpenBridge, onBridgeOp
 
   return (
     <div className="space-y-4">
-      {/* Selection info bar */}
-      {selectedPorts.size > 0 && (
-        <div className="flex items-center gap-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg">
-          <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
-            {selectedPorts.size} port{selectedPorts.size > 1 ? 's' : ''} selected:{' '}
-            {Array.from(selectedPorts).join(', ')}
-          </span>
-          <button
-            className="ml-auto text-xs text-blue-500 hover:text-blue-700"
-            onClick={() => setSelectedPorts(new Set())}
-          >
-            Clear
-          </button>
-          {canWrite && selectedPorts.size === 1 && (() => {
-            const port = ports.find((p) => p.name === Array.from(selectedPorts)[0]);
-            return port ? (
-              <button className="btn-primary text-xs py-1" onClick={() => openEditPanel(port)}>
-                Configure
-              </button>
-            ) : null;
-          })()}
-          {canWrite && selectedPorts.size >= 2 && (() => {
-            const selArr = Array.from(selectedPorts).map(n => ports.find(p => p.name === n)).filter((p): p is SwitchPort => !!p);
-            const allEligible = selArr.every(p => !isBridge(p) && !isBond(p) && !bondMemberMap.has(p.name));
-            if (!allEligible) return null;
-            return (
+      {/* Selection bar */}
+      {selectedPorts.size > 0 && (() => {
+        const singlePort = selectedPorts.size === 1 ? ports.find(p => p.name === Array.from(selectedPorts)[0]) : null;
+        const selArr = Array.from(selectedPorts).map(n => ports.find(p => p.name === n)).filter((p): p is SwitchPort => !!p);
+        const allEligible = selArr.every(p => !isBridge(p) && !isBond(p) && !bondMemberMap.has(p.name));
+        return (
+          <div style={{
+            background: 'var(--accent-soft)', border: '1px solid var(--accent)',
+            borderRadius: 8, padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 10,
+          }}>
+            <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--accent)', flexShrink: 0, boxShadow: '0 0 0 2px var(--accent)33, 0 0 8px var(--accent)88' }} />
+            <span className="mono text-[12px]" style={{ color: 'var(--accent)' }}>
+              {selectedPorts.size === 1 ? Array.from(selectedPorts)[0] : `${selectedPorts.size} ports`}
+            </span>
+            {singlePort && (
+              <span className="text-[12px]" style={{ color: 'var(--ink-2)' }}>
+                selected{singlePort.speed ? ` · ${singlePort.speed}` : ''}{singlePort.mtu ? ` · ${singlePort.mtu} MTU` : ''}{singlePort.running ? ' · link-ok' : ' · link-down'}
+              </span>
+            )}
+            <div style={{ flex: 1 }} />
+            <button
+              className="text-[11px]"
+              style={{ padding: '5px 10px', borderRadius: 5, background: 'transparent', color: 'var(--ink-3)', border: '1px solid var(--line)' }}
+              onClick={() => setSelectedPorts(new Set())}
+            >Clear</button>
+            {canWrite && singlePort && (
               <button
-                className="btn-secondary text-xs py-1 flex items-center gap-1.5"
+                className="btn-primary text-[11px]"
+                style={{ padding: '5px 10px' }}
+                onClick={() => openEditPanel(singlePort)}
+              >Configure</button>
+            )}
+            {canWrite && selectedPorts.size >= 2 && allEligible && (
+              <button
+                className="btn-secondary text-[11px] flex items-center gap-[6px]"
+                style={{ padding: '5px 10px' }}
                 onClick={() => {
-                  setCreateTrunkForm({
-                    name: `bond${bondPorts.length + 1}`,
-                    mode: '802.3ad',
-                    lacp_rate: 'slow',
-                    transmit_hash_policy: '',
-                    mtu: '',
-                    min_links: '',
-                  });
+                  setCreateTrunkForm({ name: `bond${bondPorts.length + 1}`, mode: '802.3ad', lacp_rate: 'slow', transmit_hash_policy: '', mtu: '', min_links: '' });
                   setBondError('');
                   setShowCreateTrunkModal(true);
                 }}
               >
-                <Link2 className="w-3.5 h-3.5" /> Create Trunk
+                <Link2 className="w-3 h-3" /> Create Trunk
               </button>
-            );
-          })()}
-        </div>
-      )}
+            )}
+          </div>
+        );
+      })()}
 
-      {/* SVG switch chassis */}
-      <div className="card p-4 overflow-x-auto">
-        <div className="flex items-center justify-between mb-3">
-          <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
-            Switch Ports ({ports.length} total)
-          </h3>
-          <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-slate-400">
-            {[['bg-green-500', 'Up'], ['bg-red-500', 'Down'], ['bg-slate-500', 'Disabled'], ['bg-blue-500', 'Selected']].map(([cls, label]) => (
-              <span key={label} className="flex items-center gap-1.5">
-                <span className={`w-3 h-3 rounded-sm ${cls}`} />{label}
-              </span>
-            ))}
+      {/* Faceplate card */}
+      <div className="card" style={{ padding: '22px 26px', position: 'relative', overflow: 'hidden' }}>
+        {/* Pinstripe overlay */}
+        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(255,255,255,0.015) 9px, rgba(255,255,255,0.015) 10px)' }} />
+        <div style={{ position: 'relative' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
+            <div>
+              <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>
+                Switch faceplate · {ports.length} ports
+              </div>
+              <div className="mono text-[11px] mt-[2px]" style={{ color: 'var(--ink-3)' }}>
+                click to select · shift for multi · double-click to configure
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: 14 }}>
+              {([['up', 'var(--accent)', ports.filter(p => !p.disabled && p.running).length], ['down', 'var(--bad)', ports.filter(p => !p.disabled && !p.running).length], ['disabled', 'var(--ink-4)', ports.filter(p => p.disabled).length], ['selected', 'var(--accent)', selectedPorts.size]] as [string,string,number][]).map(([l, c, n]) => (
+                <span key={l} className="mono text-[11px]" style={{ display: 'flex', alignItems: 'center', gap: 5, color: 'var(--ink-3)' }}>
+                  <span style={{ width: 9, height: 9, borderRadius: 2, background: c, opacity: l === 'disabled' ? 0.4 : 1, flexShrink: 0 }} />
+                  {l} <span className="num-tab" style={{ color: 'var(--ink-2)' }}>{n}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Rack unit */}
+          <div style={{
+            background: 'linear-gradient(180deg, var(--faceplate-from), var(--faceplate-to))',
+            border: '1px solid var(--faceplate-border)', borderRadius: 8, padding: '22px 26px',
+            display: 'flex', gap: 30, alignItems: 'center', overflowX: 'auto',
+            boxShadow: 'inset 0 0 0 2px var(--faceplate-inset), inset 0 1px 0 rgba(255,255,255,0.02)',
+          }}>
+            {/* ETH group */}
+            {etherPorts.length > 0 && (
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
+                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em' }}>ETH</div>
+                {doubleRow ? (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                    <div style={{ display: 'flex', gap: 4 }}>
+                      {topRowPorts.map(port => (
+                        <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} isMember={bondMemberMap.has(port.name)} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
+                      ))}
+                    </div>
+                    <div style={{ display: 'flex', gap: 4 }}>
+                      {bottomRowPorts.map(port => (
+                        <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} isMember={bondMemberMap.has(port.name)} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div style={{ display: 'flex', gap: 4 }}>
+                    {topRowPorts.map(port => (
+                      <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} isMember={bondMemberMap.has(port.name)} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* SFP group */}
+            {individualSfpPorts.length > 0 && (
+              <div>
+                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em', marginBottom: 6 }}>
+                  SFP · 1–{individualSfpPorts.length}
+                </div>
+                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', maxWidth: individualSfpPorts.length * 52 }}>
+                  {individualSfpPorts.map(port => (
+                    <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* QSFP cages */}
+            {qsfpCages.map(cage => {
+              const isSingleMode = !!cage.singlePort;
+              const laneCount = isSingleMode ? 4 : cage.lanes.length;
+              const runningLanes = cage.lanes.filter(p => p.running && !p.disabled).length;
+              const isSingleCable = !isSingleMode && runningLanes === 1;
+              const refPort = cage.singlePort ?? cage.lanes[0];
+              return (
+                <div key={cage.key}>
+                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em', marginBottom: 6 }}>{cage.label}</div>
+                  <div style={{ display: 'flex', gap: 4 }}>
+                    {Array.from({ length: laneCount }, (_, li) => {
+                      const lane = isSingleMode ? cage.singlePort! : cage.lanes[li];
+                      const visualPort: SwitchPort = (isSingleMode || isSingleCable) ? { ...refPort, running: refPort.running, disabled: refPort.disabled } : lane;
+                      return (
+                        <PortTile key={li} port={visualPort} selected={selectedPorts.has(lane.name)} hovered={hoveredPort === lane.name} onClick={e => togglePort(lane.name, e)} onMouseEnter={() => setHoveredPort(lane.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(lane)} />
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+
+            {/* Bridge group */}
+            {bridgePorts.length > 0 && (
+              <div style={{ marginLeft: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
+                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em' }}>BRIDGE</div>
+                <div style={{ display: 'flex', gap: 4 }}>
+                  {bridgePorts.map(port => (
+                    <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Bond group */}
+            {bondPorts.length > 0 && (
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
+                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em' }}>BOND</div>
+                <div style={{ display: 'flex', gap: 4 }}>
+                  {bondPorts.map(port => (
+                    <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
         </div>
 
-        <svg
-          width={chassisW}
-          height={chassisH}
-          className="overflow-visible"
-        >
-          {/* Chassis body */}
-          <rect x={0} y={0} width={chassisW} height={chassisH} rx={8} fill="currentColor" className="text-gray-800 dark:text-slate-700" />
-          <text x={PAD} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">PORTS</text>
-
-          {/* SFP section divider and label */}
-          {sfpPorts.length > 0 && (
-            <>
-              <line
-                x1={etherSectionW + sfpDivider / 2} y1={16}
-                x2={etherSectionW + sfpDivider / 2} y2={chassisH - 12}
-                stroke="#475569" strokeWidth={1} strokeDasharray="3,3"
-              />
-              <text x={etherSectionW + sfpDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">SFP</text>
-            </>
-          )}
-
-          {topRowPorts.map((port, i) => {
-            const x = PAD + i * (PORT_W + GAP);
-            const y = topRowY;
-            const selected = selectedPorts.has(port.name);
-            const hovered = hoveredPort === port.name;
-            const isMember = bondMemberMap.has(port.name);
-            return (
-              <g key={port.name} className="cursor-pointer"
-                onClick={(e) => togglePort(port.name, e)}
-                onMouseEnter={() => setHoveredPort(port.name)}
-                onMouseLeave={() => setHoveredPort(null)}
-                onDoubleClick={() => canWrite && openEditPanel(port)}
-              >
-                <rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
-                  fill={portColor(port, selected)}
-                  stroke={isMember && !selected ? '#d97706' : portBorderColor(port, selected)}
-                  strokeWidth={selected ? 2 : isMember ? 2 : 1}
-                  strokeDasharray={isMember && !selected ? '4,2' : undefined}
-                  opacity={hovered ? 0.85 : 1}
-                />
-                <text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
-                  fontSize={10} fontWeight="600" fontFamily="monospace">
-                  {portLabel(port.name)}
-                </text>
-                {hovered && (
-                  <foreignObject x={Math.max(0, x - 50)} y={y - 78} width={210} height={90}>
-                    <PortTooltip port={port} />
-                  </foreignObject>
-                )}
-              </g>
-            );
-          })}
-
-          {bottomRowPorts.map((port, i) => {
-            const x = PAD + i * (PORT_W + GAP);
-            const y = bottomRowY;
-            const selected = selectedPorts.has(port.name);
-            const hovered = hoveredPort === port.name;
-            const isMember = bondMemberMap.has(port.name);
-            return (
-              <g key={port.name} className="cursor-pointer"
-                onClick={(e) => togglePort(port.name, e)}
-                onMouseEnter={() => setHoveredPort(port.name)}
-                onMouseLeave={() => setHoveredPort(null)}
-                onDoubleClick={() => canWrite && openEditPanel(port)}
-              >
-                <rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
-                  fill={portColor(port, selected)}
-                  stroke={isMember && !selected ? '#d97706' : portBorderColor(port, selected)}
-                  strokeWidth={selected ? 2 : isMember ? 2 : 1}
-                  strokeDasharray={isMember && !selected ? '4,2' : undefined}
-                  opacity={hovered ? 0.85 : 1}
-                />
-                <text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
-                  fontSize={10} fontWeight="600" fontFamily="monospace">
-                  {portLabel(port.name)}
-                </text>
-                {hovered && (
-                  <foreignObject x={Math.max(0, x - 50)} y={chassisH} width={210} height={90}>
-                    <PortTooltip port={port} />
-                  </foreignObject>
-                )}
-              </g>
-            );
-          })}
-
-          {individualSfpPorts.map((port, i) => {
-            const x = sfpStartX + i * (PORT_W + GAP);
-            const y = sfpY;
-            const selected = selectedPorts.has(port.name);
-            const hovered = hoveredPort === port.name;
-            return (
-              <g key={port.name} className="cursor-pointer"
-                onClick={(e) => togglePort(port.name, e)}
-                onMouseEnter={() => setHoveredPort(port.name)}
-                onMouseLeave={() => setHoveredPort(null)}
-                onDoubleClick={() => canWrite && openEditPanel(port)}
-              >
-                <rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
-                  fill={portColor(port, selected)} stroke={portBorderColor(port, selected)}
-                  strokeWidth={selected ? 2 : 1}
-                  strokeDasharray="3,2"
-                  opacity={hovered ? 0.85 : 1}
-                />
-                <text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
-                  fontSize={10} fontWeight="600" fontFamily="monospace">
-                  {portLabel(port.name)}
-                </text>
-                {hovered && (
-                  <foreignObject x={Math.max(0, x - 50)} y={sfpY - 78} width={210} height={90}>
-                    <PortTooltip port={port} />
-                  </foreignObject>
-                )}
-              </g>
-            );
-          })}
-
-          {/* QSFP section divider, label, and cage groups */}
-          {qsfpCages.length > 0 && (
-            <>
-              <line
-                x1={qsfpStartX - qsfpDivider / 2} y1={16}
-                x2={qsfpStartX - qsfpDivider / 2} y2={chassisH - 12}
-                stroke="#475569" strokeWidth={1} strokeDasharray="3,3"
-              />
-              <text x={qsfpStartX - qsfpDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">QSFP</text>
-            </>
-          )}
-
-          {qsfpCages.map((cage) => {
-            // Single-mode cage: 4 virtual lanes all sharing the one port's status.
-            // Breakout cage: real lanes, BUT if only 1 lane is running treat as single-cable
-            // connection and show all lanes green.
-            const isSingleMode = !!cage.singlePort;
-            const laneCount = isSingleMode ? 4 : cage.lanes.length;
-            const runningLanes = cage.lanes.filter(p => p.running && !p.disabled).length;
-            const isSingleCable = !isSingleMode && runningLanes === 1;
-
-            const cageW = getCageW(laneCount);
-            const prevW = qsfpCages.slice(0, qsfpCages.indexOf(cage))
-              .reduce((acc, c) => acc + getCageW(c.singlePort ? 4 : c.lanes.length) + GAP, 0);
-            const cageX = qsfpStartX + prevW;
-            const cageY = sfpY;
-
-            const refPort = cage.singlePort ?? cage.lanes[0];
-            const anySelected = cage.singlePort
-              ? selectedPorts.has(cage.singlePort.name)
-              : cage.lanes.some(p => selectedPorts.has(p.name));
-
-            return (
-              <g key={cage.key}>
-                {/* Outer cage outline */}
-                <rect x={cageX} y={cageY} width={cageW} height={PORT_H} rx={3}
-                  fill={anySelected ? 'rgba(59,130,246,0.12)' : 'rgba(71,85,105,0.25)'}
-                  stroke={anySelected ? '#3b82f6' : '#64748b'}
-                  strokeWidth={anySelected ? 1.5 : 1}
-                />
-                {/* Cage name label */}
-                <text x={cageX + cageW / 2} y={cageY + CAGE_LABEL_H - 2}
-                  textAnchor="middle" fill="#94a3b8" fontSize={8} fontFamily="monospace">
-                  {cage.label}
-                </text>
-                {/* Lane ports */}
-                {Array.from({ length: laneCount }, (_, li) => {
-                  // For single-mode or single-cable: all lanes mirror the reference port
-                  const lane = isSingleMode ? cage.singlePort! : cage.lanes[li];
-                  // In single-cable mode, override visual status to show all as "up"
-                  const visualPort: SwitchPort = (isSingleMode || isSingleCable)
-                    ? { ...refPort, running: refPort.running, disabled: refPort.disabled }
-                    : lane;
-
-                  const laneX = cageX + CAGE_PAD_X + li * (LANE_W + LANE_GAP);
-                  const laneY = cageY + CAGE_LABEL_H;
-                  const laneSelected = selectedPorts.has(lane.name);
-                  const laneHovered = hoveredPort === lane.name;
-
-                  return (
-                    <g key={li} className="cursor-pointer"
-                      onClick={(e) => togglePort(lane.name, e)}
-                      onMouseEnter={() => setHoveredPort(lane.name)}
-                      onMouseLeave={() => setHoveredPort(null)}
-                      onDoubleClick={() => canWrite && openEditPanel(lane)}
-                    >
-                      <rect x={laneX} y={laneY} width={LANE_W} height={CAGE_LANE_H} rx={2}
-                        fill={portColor(visualPort, laneSelected)}
-                        stroke={portBorderColor(visualPort, laneSelected)}
-                        strokeWidth={laneSelected ? 2 : 1}
-                        opacity={laneHovered ? 0.8 : 1}
-                      />
-                      <text x={laneX + LANE_W / 2} y={laneY + CAGE_LANE_H / 2 + 3}
-                        textAnchor="middle" fill="white" fontSize={9} fontWeight="600" fontFamily="monospace">
-                        {isSingleMode ? String(li + 1) : lane.name.split('-').pop()}
-                      </text>
-                      {laneHovered && (
-                        <foreignObject x={Math.max(0, laneX - 60)} y={cageY - 78} width={210} height={90}>
-                          <PortTooltip port={lane} />
-                        </foreignObject>
-                      )}
-                    </g>
-                  );
-                })}
-              </g>
-            );
-          })}
-
-          {/* Bridge section divider and label */}
-          {bridgePorts.length > 0 && (
-            <>
-              <line
-                x1={bridgeStartX - bridgeDivider / 2} y1={16}
-                x2={bridgeStartX - bridgeDivider / 2} y2={chassisH - 12}
-                stroke="#475569" strokeWidth={1} strokeDasharray="3,3"
-              />
-              <text x={bridgeStartX - bridgeDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">BRIDGE</text>
-            </>
-          )}
-
-          {bridgePorts.map((port, i) => {
-            const x = bridgeStartX + i * (PORT_W + GAP);
-            const y = bridgeY;
-            const selected = selectedPorts.has(port.name);
-            const hovered = hoveredPort === port.name;
-            return (
-              <g key={port.name} className="cursor-pointer"
-                onClick={(e) => togglePort(port.name, e)}
-                onMouseEnter={() => setHoveredPort(port.name)}
-                onMouseLeave={() => setHoveredPort(null)}
-                onDoubleClick={() => canWrite && openEditPanel(port)}
-              >
-                <rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
-                  fill={portColor(port, selected)} stroke={portBorderColor(port, selected)}
-                  strokeWidth={selected ? 2 : 1}
-                  strokeDasharray="5,3"
-                  opacity={hovered ? 0.85 : 1}
-                />
-                <text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
-                  fontSize={10} fontWeight="600" fontFamily="monospace">
-                  {portLabel(port.name)}
-                </text>
-                {hovered && (
-                  <foreignObject x={Math.max(0, x - 50)} y={bridgeY - 78} width={210} height={90}>
-                    <PortTooltip port={port} />
-                  </foreignObject>
-                )}
-              </g>
-            );
-          })}
-
-          {/* Bond section divider and label */}
-          {bondPorts.length > 0 && (
-            <>
-              <line
-                x1={bondStartX - bondDivider / 2} y1={16}
-                x2={bondStartX - bondDivider / 2} y2={chassisH - 12}
-                stroke="#475569" strokeWidth={1} strokeDasharray="3,3"
-              />
-              <text x={bondStartX - bondDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">BOND</text>
-            </>
-          )}
-
-          {bondPorts.map((port, i) => {
-            const x = bondStartX + i * (PORT_W + GAP);
-            const y = bridgeY;
-            const selected = selectedPorts.has(port.name);
-            const hovered = hoveredPort === port.name;
-            return (
-              <g key={port.name} className="cursor-pointer"
-                onClick={(e) => togglePort(port.name, e)}
-                onMouseEnter={() => setHoveredPort(port.name)}
-                onMouseLeave={() => setHoveredPort(null)}
-                onDoubleClick={() => canWrite && openEditPanel(port)}
-              >
-                <rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
-                  fill={portColor(port, selected)} stroke={portBorderColor(port, selected)}
-                  strokeWidth={selected ? 2 : 1}
-                  strokeDasharray="6,2"
-                  opacity={hovered ? 0.85 : 1}
-                />
-                <text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
-                  fontSize={10} fontWeight="600" fontFamily="monospace">
-                  {portLabel(port.name)}
-                </text>
-                {hovered && (
-                  <foreignObject x={Math.max(0, x - 50)} y={bridgeY - 78} width={210} height={90}>
-                    <PortTooltip port={port} />
-                  </foreignObject>
-                )}
-              </g>
-            );
-          })}
-        </svg>
-
-        <p className="text-xs text-gray-400 dark:text-slate-500 mt-3">
-          Click to select · Shift+click to multi-select · Double-click to configure
-        </p>
       </div>
 
-      {/* Port throughput graph + info card — shown when exactly one port is selected */}
+      {/* Port throughput + info — shown when exactly one port is selected */}
       {selectedPorts.size === 1 && (() => {
         const portName = Array.from(selectedPorts)[0];
         return (
-          <div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-stretch">
-            <div className="md:col-span-2">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-stretch">
+            <div className="md:col-span-1">
               <PortTrafficGraph
                 deviceId={deviceId}
                 portName={portName}
@@ -1122,7 +978,7 @@ export default function SwitchPortDiagram({ deviceId, autoOpenBridge, onBridgeOp
                 onRangeChange={setTrafficRange}
               />
             </div>
-            <div className="md:col-span-2">
+            <div className="md:col-span-1">
               <PortPacketGraph
                 deviceId={deviceId}
                 portName={portName}
@@ -1139,74 +995,74 @@ export default function SwitchPortDiagram({ deviceId, autoOpenBridge, onBridgeOp
       {/* Port table */}
       <div className="card overflow-hidden">
         <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-gray-200 dark:border-slate-700">
-              <th className="table-header px-4 py-2.5 text-left">Port</th>
-              <th className="table-header px-4 py-2.5 text-left">Status</th>
-              <th className="table-header px-4 py-2.5 text-left">Speed</th>
-              <th className="table-header px-4 py-2.5 text-left">MTU</th>
-              <th className="table-header px-4 py-2.5 text-left">PVID</th>
-              <th className="table-header px-4 py-2.5 text-left">MAC</th>
-              <th className="table-header px-4 py-2.5 text-left">Comment</th>
-              <th className="table-header px-4 py-2.5 w-12" />
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra">
-            {sortedPorts.map((port) => (
-              <tr
-                key={port.name}
-                className={clsx(
-                  'hover:bg-gray-50 dark:hover:bg-slate-700/50 cursor-pointer',
-                  selectedPorts.has(port.name) && 'bg-blue-50 dark:bg-blue-900/20'
-                )}
-                onClick={(e) => togglePort(port.name, e)}
-              >
-                <td className="px-4 py-2 font-mono font-medium text-gray-900 dark:text-white">
-                  <div className="flex items-center gap-1.5">
-                    {port.name}
-                    {bondMemberMap.has(port.name) && (
-                      <span className="text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-1.5 py-0.5 rounded font-sans">
-                        {bondMemberMap.get(port.name)}
-                      </span>
-                    )}
-                    {isBond(port) && (
-                      <span className="text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-1.5 py-0.5 rounded font-sans">
-                        BOND
-                      </span>
-                    )}
-                  </div>
-                </td>
-                <td className="px-4 py-2">
-                  <span className={clsx(
-                    'inline-flex items-center gap-1 text-xs font-medium',
-                    port.disabled ? 'text-gray-500' : port.running ? 'text-green-600 dark:text-green-400' : 'text-red-500 dark:text-red-400'
-                  )}>
-                    <span className={clsx('w-1.5 h-1.5 rounded-full',
-                      port.disabled ? 'bg-gray-400' : port.running ? 'bg-green-500' : 'bg-red-500'
-                    )} />
-                    {port.disabled ? 'Disabled' : port.running ? 'Up' : 'Down'}
-                  </span>
-                </td>
-                <td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.speed || '—'}</td>
-                <td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.mtu || '—'}</td>
-                <td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.bridgeInfo?.pvid ?? '—'}</td>
-                <td className="px-4 py-2 font-mono text-xs text-gray-400 dark:text-slate-500">{port.mac_address || '—'}</td>
-                <td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.comment || '—'}</td>
-                <td className="px-4 py-2">
-                  {canWrite && (
-                    <button
-                      className="p-1 rounded text-gray-400 hover:text-blue-500 transition-colors"
-                      onClick={(e) => { e.stopPropagation(); openEditPanel(port); }}
-                    >
-                      <RefreshCw className="w-3.5 h-3.5" />
-                    </button>
-                  )}
-                </td>
+          <table className="w-full">
+            <thead>
+              <tr style={{ borderBottom: '1px solid var(--line)' }}>
+                {['PORT', 'STATUS', 'SPEED', 'MTU', 'PVID', 'MAC', 'COMMENT', ''].map((h, i) => (
+                  <th key={i} className="table-header px-4 py-[10px] text-left">{h}</th>
+                ))}
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {sortedPorts.map((port, i) => {
+                const state = portState(port);
+                const stateColor = state === 'up' ? 'var(--good)' : state === 'down' ? 'var(--bad)' : 'var(--ink-4)';
+                const isSelected = selectedPorts.has(port.name);
+                return (
+                  <tr
+                    key={port.name}
+                    className="cursor-pointer transition-colors"
+                    style={{
+                      borderBottom: i < sortedPorts.length - 1 ? '1px solid var(--line-soft)' : 'none',
+                      background: isSelected ? 'var(--accent-soft)' : 'transparent',
+                    }}
+                    onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--surface-2)'; }}
+                    onMouseLeave={e => { e.currentTarget.style.background = isSelected ? 'var(--accent-soft)' : 'transparent'; }}
+                    onClick={(e) => togglePort(port.name, e)}
+                  >
+                    <td className="px-4 py-[10px]">
+                      <div className="flex items-center gap-[6px]">
+                        <span className="mono text-[12px] font-medium" style={{ color: 'var(--ink)' }}>{port.name}</span>
+                        {bondMemberMap.has(port.name) && (
+                          <span className="mono text-[9.5px] px-[5px] py-[2px] rounded" style={{ background: 'var(--warn-bg)', color: 'var(--warn)' }}>
+                            {bondMemberMap.get(port.name)}
+                          </span>
+                        )}
+                        {isBond(port) && (
+                          <span className="mono text-[9.5px] px-[5px] py-[2px] rounded" style={{ background: 'var(--warn-bg)', color: 'var(--warn)' }}>BOND</span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-[10px]">
+                      <span className="inline-flex items-center gap-[5px] mono text-[11px] font-medium" style={{ color: stateColor }}>
+                        <span style={{ width: 6, height: 6, borderRadius: 999, background: stateColor, flexShrink: 0 }} />
+                        {port.disabled ? 'Disabled' : port.running ? 'Up' : 'Down'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-[10px]"><span className="mono text-[11.5px]" style={{ color: 'var(--ink-3)' }}>{port.speed || '—'}</span></td>
+                    <td className="px-4 py-[10px]"><span className="mono num-tab text-[11.5px]" style={{ color: 'var(--ink-3)' }}>{port.mtu || '—'}</span></td>
+                    <td className="px-4 py-[10px]"><span className="mono num-tab text-[11.5px]" style={{ color: 'var(--ink-3)' }}>{port.bridgeInfo?.pvid ?? '—'}</span></td>
+                    <td className="px-4 py-[10px]"><span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>{port.mac_address || '—'}</span></td>
+                    <td className="px-4 py-[10px]"><span className="text-[12px]" style={{ color: 'var(--ink-3)' }}>{port.comment || '—'}</span></td>
+                    <td className="px-4 py-[10px]">
+                      {canWrite && (
+                        <button
+                          className="p-1 rounded transition-colors"
+                          style={{ color: 'var(--ink-4)' }}
+                          onMouseEnter={e => (e.currentTarget.style.color = 'var(--accent)')}
+                          onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
+                          onClick={(e) => { e.stopPropagation(); openEditPanel(port); }}
+                          title="Configure"
+                        >
+                          <RefreshCw className="w-3.5 h-3.5" />
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
         </div>
       </div>
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3afcafe..532b45e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,146 +4,289 @@
 
 @layer base {
   :root {
-    --color-bg: theme('colors.white');
-    --color-surface: theme('colors.gray.50');
-    --color-border: theme('colors.gray.200');
-    --color-text: theme('colors.gray.900');
-    --color-text-muted: theme('colors.gray.500');
-    --color-sidebar-bg: theme('colors.slate.100');
-    --color-sidebar-text: theme('colors.slate.700');
-    --color-sidebar-active: theme('colors.blue.600');
+    /* ── surfaces (warm-neutral light) ── */
+    --bg:          #f8f7f4;
+    --surface:     #ffffff;
+    --surface-2:   #f2f1ec;
+    --surface-3:   #e8e6e0;
+
+    /* ── lines ── */
+    --line:        #d4d1c8;
+    --line-soft:   #dedad3;
+
+    /* ── text ── */
+    --ink:         #1a1a16;
+    --ink-2:       #3d3c35;
+    --ink-3:       #6b6960;
+    --ink-4:       #9e9b92;
+
+    /* ── accent (blue) ── */
+    --accent:      #2563eb;
+    --accent-2:    #1d4ed8;
+    --accent-soft: #eff6ff;
+    --accent-fg:   #ffffff;
+
+    /* ── port faceplate ── */
+    --faceplate-from:    #eae8e3;
+    --faceplate-to:      #d8d6d0;
+    --faceplate-border:  #c4c1b8;
+    --faceplate-inset:   #b8b5ad;
+    --port-up-bg:        #dcf5e0;
+    --port-up-border:    #6abf72;
+    --port-down-bg:      #fde8e8;
+    --port-down-border:  #e07070;
+
+    /* ── status ── */
+    --good:        #2d7a2a;
+    --good-bg:     #dcf5dc;
+    --warn:        #8a6200;
+    --warn-bg:     #fef3c7;
+    --bad:         #b83333;
+    --bad-bg:      #fee2e2;
+    --info:        #1a5ea8;
+    --info-bg:     #dbeafe;
+    --violet:      #6b3db8;
+    --violet-bg:   #ede9fe;
+
+    /* ── legacy aliases (used by older components) ── */
+    --color-bg:             var(--bg);
+    --color-surface:        var(--surface);
+    --color-border:         var(--line);
+    --color-text:           var(--ink);
+    --color-text-muted:     var(--ink-3);
+    --color-sidebar-bg:     var(--surface);
+    --color-sidebar-text:   var(--ink-2);
+    --color-sidebar-active: var(--accent);
   }
 
   .dark {
-    --color-bg: #0f172a;
-    --color-surface: #1e293b;
-    --color-border: #334155;
-    --color-text: #f1f5f9;
-    --color-text-muted: #94a3b8;
-    --color-sidebar-bg: #0f172a;
-    --color-sidebar-text: #cbd5e1;
-    --color-sidebar-active: #3b82f6;
+    /* ── surfaces (warm-neutral dark) ── */
+    --bg:          #0e0f12;
+    --surface:     #15171b;
+    --surface-2:   #1c1f24;
+    --surface-3:   #23262c;
+
+    /* ── lines ── */
+    --line:        #2a2e35;
+    --line-soft:   #20232a;
+
+    /* ── text ── */
+    --ink:         #f1efe9;
+    --ink-2:       #c2bfb6;
+    --ink-3:       #8a877e;
+    --ink-4:       #5d5b54;
+
+    /* ── accent (blue) ── */
+    --accent:      #60a5fa;
+    --accent-2:    #3b82f6;
+    --accent-soft: rgba(96, 165, 250, 0.1);
+    --accent-fg:   #0e0f12;
+
+    /* ── port faceplate ── */
+    --faceplate-from:    #0a0c0e;
+    --faceplate-to:      #13171a;
+    --faceplate-border:  #2a2e35;
+    --faceplate-inset:   #1f2329;
+    --port-up-bg:        #1c2918;
+    --port-up-border:    #3b6f3a;
+    --port-down-bg:      #291417;
+    --port-down-border:  #5b2024;
+
+    /* ── status ── */
+    --good:        #8de08a;
+    --good-bg:     rgba(141, 224, 138, 0.12);
+    --warn:        #f0c87a;
+    --warn-bg:     rgba(240, 200, 122, 0.12);
+    --bad:         #f08a8a;
+    --bad-bg:      rgba(240, 138, 138, 0.12);
+    --info:        #9ec5ff;
+    --info-bg:     rgba(158, 197, 255, 0.12);
+    --violet:      #c0a8f5;
+    --violet-bg:   rgba(192, 168, 245, 0.12);
+
+    /* ── legacy aliases ── */
+    --color-bg:             var(--bg);
+    --color-surface:        var(--surface);
+    --color-border:         var(--line);
+    --color-text:           var(--ink);
+    --color-text-muted:     var(--ink-3);
+    --color-sidebar-bg:     var(--bg);
+    --color-sidebar-text:   var(--ink-2);
+    --color-sidebar-active: var(--accent);
   }
 
   body {
-    @apply bg-white dark:bg-slate-900 text-gray-900 dark:text-slate-100;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background-color: var(--bg);
+    color: var(--ink);
+    font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-feature-settings: 'ss01';
   }
 
   * {
-    @apply border-gray-200 dark:border-slate-700;
+    border-color: var(--line);
   }
 
   ::-webkit-scrollbar {
     @apply w-1.5 h-1.5;
   }
   ::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    @apply bg-gray-300 dark:bg-slate-600 rounded-full;
+    background: var(--line);
+    border-radius: 999px;
+  }
+
+  /* Monospace utility — for IPs, MACs, versions, timestamps */
+  .mono {
+    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'ss01';
+  }
+
+  /* Tabular number alignment */
+  .num-tab {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'tnum';
   }
 }
 
 @layer components {
+  /* ── Cards ── */
   .card {
-    @apply bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 10px;
   }
 
+  .card-subtle {
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    border-radius: 8px;
+  }
+
+  /* ── Buttons ── */
   .btn-primary {
-    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium
+    background: var(--accent);
+    color: var(--accent-fg);
+    @apply px-4 py-2 rounded-lg text-sm font-semibold
            transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
   }
+  .btn-primary:hover:not(:disabled) {
+    background: var(--accent-2);
+  }
 
   .btn-secondary {
-    @apply bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600
-           text-gray-700 dark:text-slate-200 px-4 py-2 rounded-lg text-sm font-medium
+    background: transparent;
+    color: var(--ink-2);
+    border: 1px solid var(--line);
+    @apply px-4 py-2 rounded-lg text-sm font-medium
            transition-colors duration-150;
   }
+  .btn-secondary:hover {
+    background: var(--surface-3);
+  }
 
   .btn-danger {
     @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium
            transition-colors duration-150;
   }
 
+  /* ── Form elements ── */
   .input {
-    @apply w-full px-3 py-2 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600
-           rounded-lg text-sm text-gray-900 dark:text-slate-100 placeholder-gray-400
-           dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500
-           focus:border-transparent;
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    color: var(--ink);
+    @apply w-full px-3 py-2 rounded-lg text-sm
+           focus:outline-none focus:ring-2 focus:border-transparent;
+    --tw-ring-color: var(--accent);
+  }
+  .input::placeholder {
+    color: var(--ink-4);
   }
 
   .label {
-    @apply block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1;
+    color: var(--ink-3);
+    @apply block text-sm font-medium mb-1;
   }
 
-  /* React Flow default controls are light-theme SVGs; fix contrast in dark mode */
+  /* ── Status pills ── */
+  .status-online {
+    background: var(--good-bg);
+    color: var(--good);
+  }
+  .status-offline {
+    background: var(--bad-bg);
+    color: var(--bad);
+  }
+  .status-unknown {
+    background: var(--surface-2);
+    color: var(--ink-3);
+  }
+
+  /* ── Severity pills ── */
+  .severity-error {
+    background: var(--bad-bg);
+    color: var(--bad);
+  }
+  .severity-warning {
+    background: var(--warn-bg);
+    color: var(--warn);
+  }
+  .severity-info {
+    background: var(--info-bg);
+    color: var(--info);
+  }
+
+  /* ── Table utilities ── */
+  .table-header {
+    color: var(--ink-4);
+    @apply text-left text-[10.5px] font-medium uppercase tracking-[0.08em];
+  }
+
+  /* Zebra striping — uses :where() so explicit bg on <tr> always wins */
+  :where(.table-zebra > tr:nth-child(even)) {
+    background: var(--surface-2);
+  }
+
+  /* ── React Flow topology overrides ── */
   .topology-reactflow.dark .react-flow__controls {
-    @apply border-slate-600 shadow-lg;
+    border-color: var(--line);
+    @apply shadow-lg;
   }
   .topology-reactflow.dark .react-flow__controls-button {
-    @apply bg-slate-600 border-slate-500;
-    color: #f1f5f9;
+    background: var(--surface-2);
+    border-color: var(--line);
+    color: var(--ink);
   }
   .topology-reactflow.dark .react-flow__controls-button:hover {
-    @apply bg-slate-500 border-slate-400;
-    color: #fff;
+    background: var(--surface-3);
   }
   .topology-reactflow.dark .react-flow__controls-button svg {
-    fill: #f1f5f9;
-    stroke: #f1f5f9;
+    fill: var(--ink);
+    stroke: var(--ink);
   }
   .topology-reactflow.dark .react-flow__controls-button:disabled {
     @apply opacity-40;
   }
   .topology-reactflow.dark .react-flow__minimap {
-    @apply bg-slate-700 border border-slate-600;
+    background: var(--surface-2);
+    border: 1px solid var(--line);
   }
   .topology-reactflow.dark .react-flow__minimap-mask {
-    fill: rgb(15 23 42 / 0.65);
+    fill: rgba(14, 15, 18, 0.65);
   }
   .topology-reactflow.dark .react-flow__minimap-node {
-    @apply fill-slate-500 stroke-slate-400;
+    fill: var(--surface-3);
+    stroke: var(--line);
   }
 
   .topology-reactflow {
-    --topology-edge-label: #64748b;
-    --topology-seg-edge-label: #b45309;
-  }
-  .dark .topology-reactflow {
-    --topology-edge-label: #cbd5e1;
-    --topology-seg-edge-label: #fcd34d;
+    --topology-edge-label: var(--ink-3);
+    --topology-seg-edge-label: var(--warn);
   }
   .dark .topology-reactflow .react-flow__edge-textbg {
-    fill: rgb(30 41 59 / 0.92);
-  }
-
-  .table-header {
-    @apply text-left text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider;
-  }
-
-  .status-online {
-    @apply bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400;
-  }
-  .status-offline {
-    @apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400;
-  }
-  .status-unknown {
-    @apply bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-400;
-  }
-
-  .severity-error {
-    @apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400;
-  }
-  .severity-warning {
-    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400;
-  }
-  .severity-info {
-    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400;
-  }
-
-  /* Zebra striping — uses :where() so explicit bg classes on <tr> always win */
-  :where(.table-zebra > tr:nth-child(even)) {
-    @apply bg-gray-50 dark:bg-slate-700/30;
+    fill: var(--surface-2);
+    fill-opacity: 0.92;
   }
 }
diff --git a/frontend/src/pages/ClientsPage.tsx b/frontend/src/pages/ClientsPage.tsx
index a42975d..c9f0880 100644
--- a/frontend/src/pages/ClientsPage.tsx
+++ b/frontend/src/pages/ClientsPage.tsx
@@ -257,14 +257,14 @@ export default function ClientsPage() {
           <span className="text-xs text-green-600 dark:text-green-400">{purgeResult}</span>
         )}
         <div className="flex items-center gap-1.5 ml-auto">
-          <RefreshCw className="w-3.5 h-3.5 text-gray-400 dark:text-slate-500" />
+          <RefreshCw className="w-3.5 h-3.5 text-ink-4" />
           <select
             value={String(refreshInterval)}
             onChange={(e) => {
               const raw = e.target.value;
               handleIntervalChange(raw === 'null' ? null : Number(raw));
             }}
-            className="text-sm rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-700 dark:text-slate-200 px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="text-sm rounded-lg border border-line bg-surface-2 text-ink px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-accent"
           >
             {REFRESH_OPTIONS.map((o) => (
               <option key={String(o.value)} value={String(o.value)}>
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index b4181b6..c0fd9f8 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -3,39 +3,92 @@ import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import {
   LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
-  PieChart, Pie, Cell, Legend,
 } from 'recharts';
-import { Router, Users, AlertTriangle, Wifi, Activity, TrendingUp, MapPin, ArrowUpCircle, Cpu, X, Signal } from 'lucide-react';
+import {
+  Users, AlertTriangle, Wifi, MapPin, ArrowUpCircle, Cpu, X,
+  RefreshCw, Terminal, HardDrive, GitBranch, Activity,
+} from 'lucide-react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { metricsApi, eventsApi, devicesApi, clientsApi } from '../services/api';
 import { useSocket } from '../hooks/useSocket';
 import { useQueryClient } from '@tanstack/react-query';
-import { format } from 'date-fns';
+import { format, formatDistanceToNow } from 'date-fns';
 import type { Device, DeviceEvent } from '../types';
 import clsx from 'clsx';
 
-const ALL_SEVERITIES = ['error', 'warning', 'info'] as const;
+// ─── Primitives ───────────────────────────────────────────────────────────────
 
-// ─── Device Locations Map ────────────────────────────────────────────────────
+function StatusDot({ color = 'var(--good)', glow = false, size = 6 }: {
+  color?: string; glow?: boolean; size?: number;
+}) {
+  return (
+    <span
+      style={{
+        width: size, height: size, borderRadius: 999, display: 'inline-block',
+        background: color, flexShrink: 0,
+        boxShadow: glow ? `0 0 0 2px ${color}33, 0 0 8px ${color}88` : 'none',
+      }}
+    />
+  );
+}
+
+function Sparkline({ data, w = 120, h = 24, color = 'var(--accent)', area = true }: {
+  data: number[]; w?: number; h?: number; color?: string; area?: boolean;
+}) {
+  if (data.length < 2) return null;
+  const max = Math.max(...data), min = Math.min(...data);
+  const range = max - min || 1;
+  const pts = data.map((v, i) => [
+    (i / (data.length - 1)) * w,
+    h - ((v - min) / range) * (h - 2) - 1,
+  ]);
+  const d = 'M' + pts.map(p => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' L');
+  const areaD = d + ` L ${w},${h} L 0,${h} Z`;
+  return (
+    <svg width={w} height={h} style={{ display: 'block', overflow: 'visible' }}>
+      {area && (
+        <path d={areaD} fill={color} fillOpacity="0.12" stroke="none" />
+      )}
+      <path d={d} fill="none" stroke={color} strokeWidth="1.4" />
+    </svg>
+  );
+}
+
+function TypePill({ type }: { type: string }) {
+  const map: Record<string, { label: string; color: string }> = {
+    wireless_ap: { label: 'AP',  color: 'var(--info)' },
+    switch:      { label: 'SW',  color: 'var(--accent)' },
+    router:      { label: 'RTR', color: 'var(--violet)' },
+  };
+  const { label, color } = map[type] ?? { label: type.slice(0, 3).toUpperCase(), color: 'var(--ink-3)' };
+  return (
+    <span
+      className="mono text-[10.5px] font-medium px-[6px] py-[2px] rounded-full"
+      style={{ color, border: '1px solid var(--line)' }}
+    >
+      {label}
+    </span>
+  );
+}
+
+// ─── Device Locations Map ─────────────────────────────────────────────────────
 
 function DeviceLocationsMap({ devices }: { devices: Device[] }) {
   const containerRef = useRef<HTMLDivElement>(null);
-
-  const mapped = useMemo(() => devices.filter(
-    (d) => d.location_lat != null && d.location_lng != null &&
-      !isNaN(Number(d.location_lat)) && !isNaN(Number(d.location_lng))
-  ), [devices]);
+  const mapped = useMemo(() =>
+    devices.filter(d => d.location_lat != null && d.location_lng != null &&
+      !isNaN(Number(d.location_lat)) && !isNaN(Number(d.location_lng))),
+    [devices]
+  );
 
   useEffect(() => {
     if (!containerRef.current || mapped.length === 0) return;
-
     const map = L.map(containerRef.current, { scrollWheelZoom: false });
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      attribution: '&copy; OpenStreetMap contributors',
     }).addTo(map);
 
-    // Group devices by exact lat/lng so co-located devices share one marker
     const groups = new Map<string, Device[]>();
     for (const d of mapped) {
       const key = `${Number(d.location_lat).toFixed(6)},${Number(d.location_lng).toFixed(6)}`;
@@ -44,146 +97,682 @@ function DeviceLocationsMap({ devices }: { devices: Device[] }) {
     }
 
     const markers: L.Layer[] = [];
-
     groups.forEach((groupDevices) => {
       const lat = Number(groupDevices[0].location_lat);
       const lng = Number(groupDevices[0].location_lng);
       const count = groupDevices.length;
+      const hasOffline = groupDevices.some(d => d.status === 'offline');
+      const color = hasOffline ? 'var(--bad)' : 'var(--accent)';
+      const colorHex = hasOffline ? '#f08a8a' : '#c1f17e';
 
-      // Worst-status color: offline > unknown > online
-      const hasOffline = groupDevices.some((d) => d.status === 'offline');
-      const hasUnknown = groupDevices.some((d) => d.status !== 'online' && d.status !== 'offline');
-      const color = hasOffline ? '#ef4444' : hasUnknown ? '#94a3b8' : '#10b981';
-
-      // Popup: list every device with its status
+      const deviceRows = groupDevices.map(d => {
+        const c = d.status === 'online' ? '#8de08a' : '#f08a8a';
+        return `<b>${d.name}</b>&nbsp;<span style="color:${c};font-size:11px">● ${d.status}</span>`;
+      }).join('<br/>');
       const address = groupDevices[0].location_address
-        ? `<br/><span style="color:#64748b;font-size:11px">${groupDevices[0].location_address}</span>`
+        ? `<br/><span style="color:#8a877e;font-size:11px">${groupDevices[0].location_address}</span>`
         : '';
-      const deviceRows = groupDevices
-        .map((d) => {
-          const c = d.status === 'online' ? '#10b981' : d.status === 'offline' ? '#ef4444' : '#94a3b8';
-          return `<b>${d.name}</b>&nbsp;<span style="color:${c};font-size:11px;font-weight:600">● ${d.status}</span>`;
-        })
-        .join('<br/>');
-      const popupHtml = `${deviceRows}${address}`;
-
-      // Tooltip on hover: quick device list with emoji indicators
-      const tooltipHtml = groupDevices
-        .map((d) => {
-          const dot = d.status === 'online' ? '🟢' : d.status === 'offline' ? '🔴' : '⚪';
-          return `${dot} ${d.name}`;
-        })
-        .join('<br/>');
+      const tooltipHtml = groupDevices.map(d =>
+        `${d.status === 'online' ? '●' : '○'} ${d.name}`
+      ).join('<br/>');
 
       let marker: L.Layer;
       if (count === 1) {
         marker = L.circleMarker([lat, lng], {
-          radius: 9,
-          color: '#fff',
-          weight: 2,
-          fillColor: color,
-          fillOpacity: 0.9,
-        })
-          .bindPopup(popupHtml)
-          .bindTooltip(tooltipHtml, { direction: 'top', offset: [0, -10] });
+          radius: 9, color: '#fff', weight: 2, fillColor: colorHex, fillOpacity: 0.9,
+        }).bindPopup(deviceRows + address).bindTooltip(tooltipHtml, { direction: 'top', offset: [0, -10] });
       } else {
-        const size = count > 9 ? 32 : 28;
-        const half = size / 2;
+        const size = count > 9 ? 32 : 28, half = size / 2;
         const icon = L.divIcon({
           className: '',
-          html: `<div style="background:${color};color:#fff;border:2px solid #fff;border-radius:50%;width:${size}px;height:${size}px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,0.35);cursor:pointer">${count}</div>`,
-          iconSize: [size, size],
-          iconAnchor: [half, half],
-          popupAnchor: [0, -half],
-          tooltipAnchor: [0, -half],
+          html: `<div style="background:${colorHex};color:#0e0f12;border:2px solid #fff;border-radius:50%;width:${size}px;height:${size}px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 0 0 4px ${colorHex}33,0 0 12px ${colorHex}88;cursor:pointer">${count}</div>`,
+          iconSize: [size, size], iconAnchor: [half, half], popupAnchor: [0, -half],
         });
         marker = L.marker([lat, lng], { icon })
-          .bindPopup(popupHtml)
-          .bindTooltip(tooltipHtml, { direction: 'top' });
+          .bindPopup(deviceRows + address).bindTooltip(tooltipHtml, { direction: 'top' });
       }
-
       marker.addTo(map);
       markers.push(marker);
     });
 
     if (markers.length === 1) {
-      const first = mapped[0];
-      map.setView([Number(first.location_lat), Number(first.location_lng)], 13);
+      map.setView([Number(mapped[0].location_lat), Number(mapped[0].location_lng)], 13);
     } else {
       map.fitBounds(L.featureGroup(markers).getBounds(), { padding: [40, 40] });
     }
-
     return () => { map.remove(); };
   }, [mapped]);
 
   if (mapped.length === 0) {
     return (
-      <div className="h-[300px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm text-center px-4">
+      <div className="flex items-center justify-center text-sm" style={{ height: 220, color: 'var(--ink-4)' }}>
         No device locations configured — add addresses via Device › Overview › Physical Details
       </div>
     );
   }
-
-  return <div ref={containerRef} style={{ height: 300, width: '100%', borderRadius: 8 }} />;
+  return <div ref={containerRef} style={{ height: 220, width: '100%', borderRadius: 8 }} />;
 }
 
-const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
+// ─── Health Bar ───────────────────────────────────────────────────────────────
 
-function StatCard({
-  icon: Icon,
-  label,
-  value,
-  sub,
-  color = 'blue',
-  onClick,
+function HealthBar({
+  summary, devices, wirelessCount, clientSparkline,
 }: {
-  icon: React.ElementType;
-  label: string;
-  value: string | number;
-  sub?: string;
-  color?: string;
-  onClick?: () => void;
+  summary: { devices: { total: number; online: number; offline: number }; clients: { active: number; total: number }; alerts: { critical: number; warning: number } } | undefined;
+  devices: Device[];
+  wirelessCount: number;
+  clientSparkline: number[];
 }) {
-  const colors: Record<string, string> = {
-    blue: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400',
-    green: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
-    red: 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400',
-    yellow: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400',
-  };
+  const allOnline = (summary?.devices.offline ?? 0) === 0 && (summary?.devices.total ?? 0) > 0;
+  const reachFraction = summary?.devices.total
+    ? (summary.devices.online / summary.devices.total)
+    : 1;
 
   return (
-    <div
-      className={clsx('card p-5', onClick && 'cursor-pointer hover:shadow-md transition-shadow')}
-      onClick={onClick}
-    >
-      <div className="flex items-center gap-4">
-        <div className={clsx('p-3 rounded-xl', colors[color])}>
-          <Icon className="w-5 h-5" />
+    <div className="card" style={{ padding: '18px 22px' }}>
+      <div className="flex flex-wrap items-center gap-7">
+        {/* Status block */}
+        <div className="flex items-center gap-3 flex-shrink-0">
+          <div
+            className="w-9 h-9 rounded-[8px] flex items-center justify-center flex-shrink-0"
+            style={{ background: 'var(--accent-soft)' }}
+          >
+            <StatusDot
+              color={allOnline ? 'var(--accent)' : 'var(--warn)'}
+              glow size={10}
+            />
+          </div>
+          <div>
+            <div className="text-[14px] font-semibold" style={{ color: 'var(--ink)' }}>
+              {allOnline ? 'All systems nominal' : `${summary?.devices.offline ?? 0} device(s) unreachable`}
+            </div>
+            <div className="text-[12px]" style={{ color: 'var(--ink-3)' }}>
+              {summary?.devices.online ?? 0} of {summary?.devices.total ?? 0} reachable
+              {(summary?.alerts.critical ?? 0) > 0 && ` · ${summary!.alerts.critical} critical alert`}
+            </div>
+          </div>
         </div>
-        <div>
-          <div className="text-2xl font-bold text-gray-900 dark:text-white">{value}</div>
-          <div className="text-sm text-gray-500 dark:text-slate-400">{label}</div>
-          {sub && <div className="text-xs text-gray-400 dark:text-slate-500 mt-0.5">{sub}</div>}
+
+        {/* Reachability bar */}
+        <div className="flex-1 min-w-[120px]" style={{ paddingLeft: 20, borderLeft: '1px solid var(--line)' }}>
+          <div className="flex justify-between text-[11px] mb-[6px]" style={{ color: 'var(--ink-3)' }}>
+            <span>Reachability</span>
+            <span className="mono">{summary?.devices.online ?? 0}/{summary?.devices.total ?? 0} online</span>
+          </div>
+          <div className="rounded-full overflow-hidden" style={{ height: 8, background: 'var(--surface-3)' }}>
+            <div
+              className="h-full rounded-full transition-all duration-700"
+              style={{
+                width: `${reachFraction * 100}%`,
+                background: reachFraction === 1 ? 'var(--accent)' : reachFraction > 0.5 ? 'var(--warn)' : 'var(--bad)',
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Mini-stats */}
+        {[
+          {
+            label: 'Active clients',
+            value: String(summary?.clients.active ?? '—'),
+            spark: clientSparkline,
+            color: 'var(--accent)',
+          },
+          {
+            label: 'Wireless',
+            value: String(wirelessCount ?? '—'),
+            spark: [] as number[],
+            color: 'var(--info)',
+          },
+          {
+            label: 'Alerts 24h',
+            value: (summary?.alerts.critical ?? 0) > 0
+              ? `${summary!.alerts.critical} critical`
+              : (summary?.alerts.warning ?? 0) > 0
+              ? `${summary!.alerts.warning} warn`
+              : 'none',
+            spark: [] as number[],
+            color: (summary?.alerts.critical ?? 0) > 0 ? 'var(--bad)' : 'var(--ink-3)',
+          },
+        ].map(({ label, value, spark, color }) => (
+          <div key={label} style={{ minWidth: 110, paddingLeft: 20, borderLeft: '1px solid var(--line)' }}>
+            <div className="text-[11px] mb-[2px]" style={{ color: 'var(--ink-3)' }}>{label}</div>
+            <div className="text-[18px] font-semibold num-tab mb-[4px]" style={{ color: 'var(--ink)' }}>{value}</div>
+            {spark.length >= 2 && <Sparkline data={spark} w={100} h={18} color={color} />}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Summary View ─────────────────────────────────────────────────────────────
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function SummaryView(props: Record<string, any>) {
+  const { summary, devices, wirelessCount, clientSparkline, clientsOverTime,
+    chartRange, setChartRange, topClients, recentEvents, severities, toggleSeverity, navigate } = props;
+  const formatBytes = (bytes: number) => {
+    if (bytes >= 1e9) return `${(bytes / 1e9).toFixed(1)} GB`;
+    if (bytes >= 1e6) return `${(bytes / 1e6).toFixed(1)} MB`;
+    if (bytes >= 1e3) return `${(bytes / 1e3).toFixed(1)} KB`;
+    return `${bytes} B`;
+  };
+
+  const deviceTypeCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const d of devices as Device[]) {
+      const t = d.device_type || 'other';
+      counts[t] = (counts[t] || 0) + 1;
+    }
+    return counts;
+  }, [devices]);
+
+  const typeConfig: Record<string, { label: string; color: string }> = {
+    switch:      { label: 'Switches',    color: 'var(--accent)' },
+    wireless_ap: { label: 'Wireless APs', color: 'var(--info)' },
+    router:      { label: 'Routers',     color: 'var(--violet)' },
+  };
+
+  const chartDomain = useMemo<[number, number]>(
+    () => {
+      const ranges: Record<string, number> = { '1h': 1, '6h': 6, '24h': 24, '7d': 168 };
+      const hrs = ranges[chartRange] ?? 24;
+      return [Date.now() - hrs * 60 * 60 * 1000, Date.now()];
+    },
+    [chartRange, clientsOverTime] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  return (
+    <div className="space-y-4">
+      <HealthBar
+        summary={summary}
+        devices={devices}
+        wirelessCount={wirelessCount}
+        clientSparkline={clientSparkline}
+      />
+
+      {/* Main grid: clients chart + devices list */}
+      <div className="grid gap-4" style={{ gridTemplateColumns: '1.6fr 1fr' }}>
+        {/* Clients chart */}
+        <div className="card" style={{ padding: '16px 18px' }}>
+          <div className="flex items-baseline justify-between mb-3">
+            <div>
+              <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>Connected clients</div>
+              <div className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>last {chartRange} · 5min buckets</div>
+            </div>
+            <div className="flex items-baseline gap-2">
+              <span className="text-[22px] font-semibold num-tab" style={{ color: 'var(--ink)' }}>
+                {summary?.clients.active ?? '—'}
+              </span>
+              <div className="flex gap-1">
+                {(['1h', '6h', '24h', '7d'] as const).map((r) => (
+                  <button
+                    key={r}
+                    onClick={() => {
+                      setChartRange(r);
+                      localStorage.setItem('dashboard:chart-range', r);
+                    }}
+                    className="mono text-[11px] px-[8px] py-[3px] rounded-[5px] transition-colors"
+                    style={{
+                      background: chartRange === r ? 'var(--surface-3)' : 'transparent',
+                      color: chartRange === r ? 'var(--ink)' : 'var(--ink-3)',
+                      border: '1px solid var(--line)',
+                    }}
+                  >
+                    {r}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+          {clientsOverTime.length > 0 ? (
+            <ResponsiveContainer width="100%" height={180}>
+              <LineChart data={clientsOverTime} margin={{ top: 4, right: 4, left: -24, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--line-soft)" />
+                <XAxis
+                  dataKey="ts" type="number" scale="time" domain={chartDomain}
+                  tick={{ fontSize: 10, fill: 'var(--ink-4)', fontFamily: 'Geist Mono' }}
+                  tickCount={7}
+                  tickFormatter={(t) => format(new Date(t), 'HH:mm')}
+                />
+                <YAxis tick={{ fontSize: 10, fill: 'var(--ink-4)' }} allowDecimals={false} />
+                <Tooltip
+                  formatter={(v: number) => [v, 'Clients']}
+                  labelFormatter={(t) => format(new Date(t as number), 'MMM d, HH:mm')}
+                  contentStyle={{
+                    background: 'var(--surface)',
+                    border: '1px solid var(--line)',
+                    borderRadius: 8,
+                    fontSize: 12,
+                    color: 'var(--ink)',
+                  }}
+                />
+                <Line
+                  type="monotone" dataKey="value"
+                  stroke="var(--accent)" strokeWidth={1.8}
+                  dot={false} activeDot={{ r: 4, fill: 'var(--accent)' }}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="flex items-center justify-center text-[13px]" style={{ height: 180, color: 'var(--ink-4)' }}>
+              No data yet — metrics appear after devices are polled
+            </div>
+          )}
+        </div>
+
+        {/* Compact devices list */}
+        <div className="card" style={{ padding: '16px 18px' }}>
+          <div className="flex items-baseline justify-between mb-3">
+            <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>Devices</div>
+            <button
+              onClick={() => navigate('/devices')}
+              className="text-[11px] transition-colors"
+              style={{ color: 'var(--ink-3)' }}
+            >
+              Manage →
+            </button>
+          </div>
+          <div className="space-y-[1px]">
+            {(devices as Device[]).map((d) => (
+              <div
+                key={d.id}
+                className="flex items-center gap-[10px] px-[6px] py-[7px] rounded-[5px] cursor-pointer transition-colors"
+                style={{ color: 'var(--ink)' }}
+                onClick={() => navigate(`/devices/${d.id}`)}
+                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--surface-3)')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+              >
+                <StatusDot
+                  color={d.status === 'online' ? 'var(--good)' : d.status === 'offline' ? 'var(--bad)' : 'var(--ink-4)'}
+                  glow={d.status === 'online'}
+                  size={6}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="text-[13px] font-medium truncate">{d.name}</div>
+                  <div className="mono text-[10.5px] truncate" style={{ color: 'var(--ink-3)' }}>{d.model}</div>
+                </div>
+                <div className="mono text-[11px] flex items-center gap-1" style={{ color: d.firmware_update_available ? 'var(--warn)' : 'var(--ink-3)' }}>
+                  {d.firmware_update_available && <span>↑</span>}
+                  {d.ros_version}
+                </div>
+                <TypePill type={d.device_type} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Second row: Mix + Top talkers + Activity */}
+      <div className="grid gap-4" style={{ gridTemplateColumns: '1fr 1.2fr 1fr' }}>
+        {/* Device mix */}
+        <div className="card" style={{ padding: '16px 18px' }}>
+          <div className="text-[13px] font-semibold mb-3" style={{ color: 'var(--ink)' }}>Mix</div>
+          <div className="space-y-[10px]">
+            {Object.entries(typeConfig).map(([type, { label, color }]) => {
+              const count = deviceTypeCounts[type] ?? 0;
+              const frac = (devices as Device[]).length ? count / (devices as Device[]).length : 0;
+              return (
+                <div key={type}>
+                  <div className="flex justify-between text-[12px] mb-[5px]">
+                    <span style={{ color: 'var(--ink-2)' }}>{label}</span>
+                    <span className="mono num-tab" style={{ color: 'var(--ink-3)' }}>{count}</span>
+                  </div>
+                  <div className="rounded-full overflow-hidden" style={{ height: 4, background: 'var(--surface-3)' }}>
+                    <div className="h-full rounded-full" style={{ width: `${frac * 100}%`, background: color }} />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Top talkers */}
+        <div className="card" style={{ padding: '16px 18px' }}>
+          <div className="flex items-baseline justify-between mb-3">
+            <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>Top talkers</div>
+            <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>by bytes · 1h</span>
+          </div>
+          {(topClients as { mac_address: string; hostname?: string; total_bytes: number }[]).length > 0 ? (
+            <div className="space-y-[1px]">
+              {(topClients as { mac_address: string; hostname?: string; total_bytes: number }[]).slice(0, 5).map((c, i) => {
+                const maxB = (topClients as { total_bytes: number }[])[0]?.total_bytes ?? 1;
+                const label = c.hostname || c.mac_address;
+                return (
+                  <div key={c.mac_address} className="grid items-center gap-[10px]" style={{ gridTemplateColumns: '16px 1fr 70px', padding: '5px 0' }}>
+                    <span className="mono text-[10px] num-tab text-right" style={{ color: 'var(--ink-4)' }}>
+                      {String(i + 1).padStart(2, '0')}
+                    </span>
+                    <div className="min-w-0">
+                      <div className="mono text-[11.5px] truncate mb-[3px]" style={{ color: 'var(--ink)' }}>
+                        {label.length > 20 ? label.slice(0, 20) + '…' : label}
+                      </div>
+                      <div className="rounded-full overflow-hidden" style={{ height: 3, background: 'var(--surface-3)' }}>
+                        <div className="h-full rounded-full" style={{ width: `${(c.total_bytes / maxB) * 100}%`, background: 'var(--accent)' }} />
+                      </div>
+                    </div>
+                    <span className="mono num-tab text-right text-[11px]" style={{ color: 'var(--ink-2)' }}>
+                      {formatBytes(c.total_bytes)}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex items-center justify-center text-[12px]" style={{ height: 80, color: 'var(--ink-4)' }}>
+              No active clients
+            </div>
+          )}
+        </div>
+
+        {/* Activity */}
+        <div className="card" style={{ padding: '16px 18px' }}>
+          <div className="flex items-baseline justify-between mb-3">
+            <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>Activity</div>
+            <div className="flex items-center gap-2">
+              {(['error', 'warning', 'info'] as const).map((sev) => (
+                <label key={sev} className="flex items-center gap-1 cursor-pointer select-none">
+                  <input
+                    type="checkbox"
+                    checked={severities.has(sev)}
+                    onChange={() => toggleSeverity(sev)}
+                    className="w-3 h-3 rounded cursor-pointer"
+                  />
+                  <span className="text-[10px]" style={{
+                    color: sev === 'error' ? 'var(--bad)' : sev === 'warning' ? 'var(--warn)' : 'var(--info)',
+                  }}>
+                    {sev[0].toUpperCase()}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </div>
+          <div>
+            {((recentEvents?.events ?? []) as DeviceEvent[]).length > 0 ? (
+              ((recentEvents?.events ?? []) as DeviceEvent[]).map((ev, i) => (
+                <div
+                  key={ev.id}
+                  className="grid gap-[10px] py-[5px]"
+                  style={{
+                    gridTemplateColumns: '60px 1fr',
+                    fontSize: 11.5,
+                    borderTop: i ? '1px solid var(--line-soft)' : 'none',
+                  }}
+                >
+                  <div className="mono" style={{ color: 'var(--ink-4)' }}>
+                    {format(new Date(ev.event_time), 'HH:mm:ss')}
+                  </div>
+                  <div className="min-w-0">
+                    <div className="flex items-center gap-[6px] mb-[2px]">
+                      <StatusDot
+                        color={ev.severity === 'error' || ev.severity === 'critical' ? 'var(--bad)' : ev.severity === 'warning' ? 'var(--warn)' : 'var(--ink-3)'}
+                        size={5}
+                      />
+                      <span className="mono text-[10.5px] truncate" style={{ color: 'var(--ink-2)' }}>
+                        {ev.device_name}
+                      </span>
+                    </div>
+                    <span className="truncate block" style={{ color: 'var(--ink-2)' }}>{ev.message}</span>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="flex items-center justify-center text-[12px]" style={{ height: 80, color: 'var(--ink-4)' }}>
+                No recent events
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Locations map */}
+      <div className="card" style={{ overflow: 'hidden' }}>
+        <div
+          className="flex items-center justify-between px-[18px] py-[14px]"
+          style={{ borderBottom: '1px solid var(--line)' }}
+        >
+          <div className="flex items-center gap-2">
+            <MapPin className="w-4 h-4" style={{ color: 'var(--accent)' }} />
+            <span className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>Locations</span>
+          </div>
+          <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
+            {(devices as Device[]).filter(d => d.location_lat != null).length} of {(devices as Device[]).length} mapped
+          </span>
+        </div>
+        <div style={{ padding: '0 0' }}>
+          <DeviceLocationsMap devices={devices as Device[]} />
         </div>
       </div>
     </div>
   );
 }
 
-function SeverityBadge({ severity }: { severity: string }) {
-  const classes: Record<string, string> = {
-    error: 'severity-error',
-    critical: 'severity-error',
-    warning: 'severity-warning',
-    info: 'severity-info',
-  };
+// ─── Operations View ──────────────────────────────────────────────────────────
+
+function OperationsView({
+  summary, devices, navigate,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}) {
+  const allOnline = (summary?.devices.offline ?? 0) === 0 && (summary?.devices.total ?? 0) > 0;
+  const statusText = allOnline ? "Everything's running." : `${summary?.devices.offline} device${summary?.devices.offline !== 1 ? 's' : ''} unreachable.`;
+  const statusColor = allOnline ? 'var(--accent)' : 'var(--warn)';
+
+  const thingsToHandle = useMemo(() => {
+    const items: { sev: 'error' | 'warn' | 'info'; title: string; body: string; action: string; path: string }[] = [];
+
+    for (const d of devices as Device[]) {
+      if (d.status === 'offline') {
+        items.push({
+          sev: 'error',
+          title: `${d.name} is unreachable`,
+          body: `Last seen ${d.last_seen ? formatDistanceToNow(new Date(d.last_seen), { addSuffix: true }) : 'never'}.`,
+          action: 'View device',
+          path: `/devices/${d.id}`,
+        });
+      }
+    }
+    for (const d of devices as Device[]) {
+      if (d.firmware_update_available) {
+        items.push({
+          sev: 'warn',
+          title: `RouterOS update available for ${d.name}`,
+          body: `Running ${d.ros_version}${d.latest_ros_version ? `, ${d.latest_ros_version} available` : ''}.`,
+          action: 'Review update',
+          path: `/devices/${d.id}?tab=config`,
+        });
+      }
+      if (d.routerboard_upgrade_available) {
+        items.push({
+          sev: 'info',
+          title: `RouterBOOT upgrade available for ${d.name}`,
+          body: `Firmware ${d.firmware_version}${d.upgrade_firmware_version ? ` → ${d.upgrade_firmware_version}` : ''}.`,
+          action: 'Review upgrade',
+          path: `/devices/${d.id}?tab=config`,
+        });
+      }
+    }
+    return items;
+  }, [devices]);
+
+  const quickActions = [
+    { label: 'Run discovery',  sub: 'Scan ARP / CDP / MNDP', icon: Wifi,      path: '/devices', color: 'var(--accent)' },
+    { label: 'Backup all',     sub: `${(devices as Device[]).length} devices`,  icon: HardDrive,  path: '/backups',  color: 'var(--info)' },
+    { label: 'Open terminal',  sub: 'Pick a device',          icon: Terminal,   path: '/devices', color: 'var(--violet)' },
+    { label: 'Sync config',    sub: 'Pull latest /export',    icon: RefreshCw,  path: '/devices', color: 'var(--ink-2)' },
+    { label: 'Tail events',    sub: 'Live syslog stream',      icon: Activity,   path: '/events',  color: 'var(--ink-2)' },
+    { label: 'Open topology',  sub: 'Visualize links',         icon: GitBranch,  path: '/topology',color: 'var(--ink-2)' },
+  ];
+
+  const sevColor = (s: string) => s === 'error' ? 'var(--bad)' : s === 'warn' ? 'var(--warn)' : 'var(--info)';
+
   return (
-    <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', classes[severity] || classes.info)}>
-      {severity}
-    </span>
+    <div className="space-y-4">
+      {/* Hero status card */}
+      <div className="card relative overflow-hidden" style={{ padding: '32px 36px' }}>
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{ background: 'radial-gradient(circle at 95% 0%, rgba(193,241,126,0.06), transparent 60%)' }}
+        />
+        <div className="relative flex flex-wrap items-center gap-8">
+          <div className="flex items-center gap-5">
+            <div
+              className="w-16 h-16 rounded-[14px] flex items-center justify-center flex-shrink-0"
+              style={{ background: 'radial-gradient(circle, rgba(193,241,126,0.2), transparent)' }}
+            >
+              <StatusDot color={statusColor} glow size={20} />
+            </div>
+            <div>
+              <div className="text-[11px] uppercase tracking-[0.1em] mb-[6px]" style={{ color: 'var(--ink-3)' }}>Network status</div>
+              <div className="text-[32px] font-semibold leading-none" style={{ color: 'var(--ink)', letterSpacing: '-0.02em' }}>
+                {statusText}
+              </div>
+              <div className="text-[13px] mt-[6px]" style={{ color: 'var(--ink-3)' }}>
+                {summary?.devices.online ?? 0} of {summary?.devices.total ?? 0} devices reachable
+                {(summary?.alerts.warning ?? 0) > 0 && ` · ${summary!.alerts.warning} warning${summary!.alerts.warning !== 1 ? 's' : ''}`}
+              </div>
+            </div>
+          </div>
+          <div className="ml-auto flex gap-6">
+            {[
+              { label: 'CLIENTS', value: String(summary?.clients.active ?? '—'), color: 'var(--accent)' },
+              { label: 'DEVICES', value: `${summary?.devices.online ?? '—'}/${summary?.devices.total ?? '—'}`, color: 'var(--info)' },
+              { label: 'ALERTS', value: String((summary?.alerts.critical ?? 0) + (summary?.alerts.warning ?? 0)), color: (summary?.alerts.critical ?? 0) > 0 ? 'var(--bad)' : 'var(--ink-3)' },
+            ].map(({ label, value, color }) => (
+              <div key={label}>
+                <div className="text-[10px] tracking-[0.1em] mb-1" style={{ color: 'var(--ink-4)' }}>{label}</div>
+                <div className="text-[22px] font-semibold num-tab" style={{ color }}>{value}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Things to handle + Quick actions */}
+      <div className="grid gap-4" style={{ gridTemplateColumns: '1.3fr 1fr' }}>
+        {/* Things to handle */}
+        <div className="card" style={{ overflow: 'hidden' }}>
+          <div
+            className="flex items-center gap-[10px] px-5 py-[14px]"
+            style={{ borderBottom: '1px solid var(--line)' }}
+          >
+            <div
+              className="w-[18px] h-[18px] rounded-[4px] flex items-center justify-center text-[12px] font-bold flex-shrink-0"
+              style={{ background: 'var(--warn)', color: 'var(--accent-fg)' }}
+            >!
+            </div>
+            <span className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>Things to handle</span>
+            <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
+              {thingsToHandle.length} item{thingsToHandle.length !== 1 ? 's' : ''}
+            </span>
+          </div>
+          {thingsToHandle.length > 0 ? thingsToHandle.map((item, i) => (
+            <div
+              key={i}
+              className="grid items-start gap-[14px] px-5 py-[14px]"
+              style={{
+                gridTemplateColumns: '3px 1fr auto',
+                borderBottom: i < thingsToHandle.length - 1 ? '1px solid var(--line-soft)' : 'none',
+              }}
+            >
+              <div className="self-stretch rounded-full" style={{ background: sevColor(item.sev), width: 3 }} />
+              <div>
+                <div className="text-[13.5px] font-medium mb-[3px]" style={{ color: 'var(--ink)' }}>{item.title}</div>
+                <div className="text-[12.5px] leading-relaxed" style={{ color: 'var(--ink-2)' }}>{item.body}</div>
+              </div>
+              <button
+                onClick={() => navigate(item.path)}
+                className="text-[11.5px] rounded-[5px] px-3 py-[6px] flex-shrink-0 transition-colors"
+                style={{ background: 'transparent', border: '1px solid var(--line)', color: 'var(--ink-2)' }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--surface-3)')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+              >
+                {item.action} →
+              </button>
+            </div>
+          )) : (
+            <div className="flex items-center justify-center gap-2 py-8" style={{ color: 'var(--ink-3)' }}>
+              <StatusDot color="var(--good)" glow size={8} />
+              <span className="text-[13px]">Nothing needs attention</span>
+            </div>
+          )}
+        </div>
+
+        {/* Quick actions */}
+        <div className="card" style={{ padding: '18px 20px' }}>
+          <div className="text-[13px] font-semibold mb-3" style={{ color: 'var(--ink)' }}>Quick actions</div>
+          <div className="grid gap-2" style={{ gridTemplateColumns: '1fr 1fr' }}>
+            {quickActions.map(({ label, sub, icon: Icon, path, color }) => (
+              <button
+                key={label}
+                onClick={() => navigate(path)}
+                className="text-left rounded-[6px] px-[14px] py-[12px] transition-colors"
+                style={{ background: 'var(--surface-2)', border: '1px solid var(--line)' }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--surface-3)')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--surface-2)')}
+              >
+                <div className="flex items-center gap-2 mb-[3px]">
+                  <Icon className="w-3.5 h-3.5 flex-shrink-0" style={{ color }} />
+                  <span className="text-[12.5px] font-semibold" style={{ color }}>{label}</span>
+                </div>
+                <div className="text-[11px]" style={{ color: 'var(--ink-3)' }}>{sub}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Fleet strip */}
+      <div className="card" style={{ padding: '18px 20px' }}>
+        <div className="flex items-baseline justify-between mb-3">
+          <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>Fleet</div>
+          <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
+            {(devices as Device[]).length} device{(devices as Device[]).length !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${Math.min((devices as Device[]).length, 5)}, 1fr)` }}>
+          {(devices as Device[]).map((d) => {
+            const hasAlert = d.firmware_update_available || d.routerboard_upgrade_available;
+            return (
+              <button
+                key={d.id}
+                onClick={() => navigate(`/devices/${d.id}`)}
+                className="text-left rounded-[8px] p-[14px] transition-colors"
+                style={{ background: 'var(--surface-2)', border: '1px solid var(--line)' }}
+                onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--surface-3)')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--surface-2)')}
+              >
+                <div className="flex items-center gap-2 mb-[10px]">
+                  <StatusDot
+                    color={d.status === 'online' ? 'var(--good)' : d.status === 'offline' ? 'var(--bad)' : 'var(--warn)'}
+                    glow size={6}
+                  />
+                  <span className="mono text-[10px]" style={{ color: 'var(--ink-3)' }}>
+                    {d.device_type === 'wireless_ap' ? 'AP' : d.device_type === 'router' ? 'RTR' : 'SW'}
+                  </span>
+                  {hasAlert && (
+                    <span
+                      className="ml-auto text-[10px] font-bold px-[5px] py-[1px] rounded-full"
+                      style={{ background: 'var(--warn-bg)', color: 'var(--warn)' }}
+                    >!</span>
+                  )}
+                </div>
+                <div className="text-[13px] font-semibold truncate mb-[3px]" style={{ color: 'var(--ink)' }}>{d.name}</div>
+                <div className="mono text-[10.5px]" style={{ color: 'var(--ink-3)' }}>{d.ros_version}</div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
   );
 }
 
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+const ALL_SEVERITIES = ['error', 'warning', 'info'] as const;
 const SEVERITY_KEY = 'dashboard:severities';
 
 function loadSeverities(): Set<string> {
@@ -197,7 +786,15 @@ function loadSeverities(): Set<string> {
 export default function DashboardPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+
+  const [dashView, setDashView] = useState<'summary' | 'operations'>(() =>
+    (localStorage.getItem('dashboard:view') as 'summary' | 'operations') ?? 'summary'
+  );
+  const [chartRange, setChartRange] = useState<string>(() =>
+    localStorage.getItem('dashboard:chart-range') ?? '24h'
+  );
   const [severities, setSeverities] = useState<Set<string>>(loadSeverities);
+  const [dismissedFirmwareIds, setDismissedFirmwareIds] = useState<number[]>([]);
 
   const toggleSeverity = (s: string) =>
     setSeverities((prev) => {
@@ -207,55 +804,45 @@ export default function DashboardPage() {
       return next;
     });
 
-  const severityParam =
-    severities.size === 0 || severities.size === ALL_SEVERITIES.length
-      ? undefined
-      : [...severities].join(',');
-
   const { data: summary } = useQuery({
     queryKey: ['metrics-summary'],
-    queryFn: () => metricsApi.summary().then((r) => r.data),
+    queryFn: () => metricsApi.summary().then(r => r.data),
     refetchInterval: 30_000,
   });
 
   const { data: clientsOverTimeRaw = [] } = useQuery({
-    queryKey: ['clients-over-time', '24h'],
-    queryFn: () => metricsApi.clientsOverTime('24h').then((r) => r.data),
+    queryKey: ['clients-over-time', chartRange],
+    queryFn: () => metricsApi.clientsOverTime(chartRange).then(r => r.data),
     refetchInterval: 60_000,
   });
-  // Convert ISO timestamps to numeric ms for a proper continuous time axis
-  const clientsOverTime = clientsOverTimeRaw.map((p) => ({
-    ...p,
-    ts: new Date(p.time).getTime(),
-  }));
-
-  const chartDomain = useMemo<[number, number]>(
-    () => [Date.now() - 24 * 60 * 60 * 1000, Date.now()],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clientsOverTime]
-  );
+  const clientsOverTime = clientsOverTimeRaw.map(p => ({ ...p, ts: new Date(p.time).getTime() }));
 
   const { data: topClients = [] } = useQuery({
     queryKey: ['top-clients'],
-    queryFn: () => metricsApi.topClients(8).then((r) => r.data),
+    queryFn: () => metricsApi.topClients(8).then(r => r.data),
     refetchInterval: 60_000,
   });
 
   const { data: wirelessClientsData } = useQuery({
     queryKey: ['wireless-clients-active'],
-    queryFn: () => clientsApi.list({ active: true, client_type: 'wireless', limit: 1 }).then((r) => r.data),
+    queryFn: () => clientsApi.list({ active: true, client_type: 'wireless', limit: 1 }).then(r => r.data),
     refetchInterval: 30_000,
   });
 
-  const { data: eventsData } = useQuery({
+  const severityParam =
+    severities.size === 0 || severities.size === ALL_SEVERITIES.length
+      ? undefined
+      : [...severities].join(',');
+
+  const { data: recentEvents } = useQuery({
     queryKey: ['events-recent', severityParam],
-    queryFn: () => eventsApi.list({ limit: 5, severity: severityParam }).then((r) => r.data),
+    queryFn: () => eventsApi.list({ limit: 5, severity: severityParam }).then(r => r.data),
     refetchInterval: 30_000,
   });
 
   const { data: devices = [] } = useQuery({
     queryKey: ['devices'],
-    queryFn: () => devicesApi.list().then((r) => r.data),
+    queryFn: () => devicesApi.list().then(r => r.data),
     refetchInterval: 30_000,
   });
 
@@ -273,43 +860,66 @@ export default function DashboardPage() {
     'device:status': () => queryClient.invalidateQueries({ queryKey: ['metrics-summary'] }),
   });
 
-  const [dismissedFirmwareIds, setDismissedFirmwareIds] = useState<number[]>([]);
   const devicesWithRosUpdates = devices.filter(
-    (d) => d.firmware_update_available && !dismissedFirmwareIds.includes(d.id)
+    d => d.firmware_update_available && !dismissedFirmwareIds.includes(d.id)
   );
   const devicesWithRbUpgrades = devices.filter(
-    (d) => d.routerboard_upgrade_available && !dismissedFirmwareIds.includes(d.id)
+    d => d.routerboard_upgrade_available && !dismissedFirmwareIds.includes(d.id)
   );
   const showUpdateBanner = devicesWithRosUpdates.length > 0 || devicesWithRbUpgrades.length > 0;
 
-  // Device type distribution for pie chart
-  const deviceTypeLabel: Record<string, string> = {
-    router: 'Router', switch: 'Switch', wireless_ap: 'Wireless AP', other: 'Other',
-  };
-  const deviceTypes = devices.reduce((acc: Record<string, number>, d) => {
-    const type = d.device_type || 'other';
-    acc[type] = (acc[type] || 0) + 1;
-    return acc;
-  }, {});
-  const pieData = Object.entries(deviceTypes).map(([key, value]) => ({ name: deviceTypeLabel[key] ?? key, value }));
+  // Extract client count sparkline from time-series
+  const clientSparkline = useMemo(() => {
+    if (clientsOverTime.length < 2) return [];
+    const recent = clientsOverTime.slice(-24);
+    return recent.map(p => p.value);
+  }, [clientsOverTime]);
 
-  const formatBytes = (bytes: number) => {
-    if (bytes >= 1e9) return `${(bytes / 1e9).toFixed(1)} GB`;
-    if (bytes >= 1e6) return `${(bytes / 1e6).toFixed(1)} MB`;
-    if (bytes >= 1e3) return `${(bytes / 1e3).toFixed(1)} KB`;
-    return `${bytes} B`;
-  };
+  const wirelessCount = wirelessClientsData?.total ?? 0;
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
+    <div className="space-y-4">
+      {/* Page header */}
+      <div className="flex items-baseline gap-3 flex-wrap">
+        <h1 className="text-[28px] font-semibold leading-none" style={{ color: 'var(--ink)', letterSpacing: '-0.01em' }}>
+          Dashboard
+        </h1>
+        <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
+          {devices.length} device{devices.length !== 1 ? 's' : ''}
+        </span>
+        <div className="ml-auto flex gap-1">
+          {(['summary', 'operations'] as const).map((v) => (
+            <button
+              key={v}
+              onClick={() => {
+                setDashView(v);
+                localStorage.setItem('dashboard:view', v);
+              }}
+              className="text-[12px] font-medium px-3 py-[5px] rounded-[6px] transition-colors capitalize"
+              style={{
+                background: dashView === v ? 'var(--surface-3)' : 'transparent',
+                color: dashView === v ? 'var(--ink)' : 'var(--ink-3)',
+                border: '1px solid var(--line)',
+              }}
+            >
+              {v === 'summary' ? 'Summary' : 'Operations'}
+            </button>
+          ))}
+        </div>
+      </div>
 
-      {/* Updates available banner */}
+      {/* Update banner */}
       {showUpdateBanner && (
-        <div className="rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-700/50 dark:bg-amber-900/20 px-4 py-3 flex items-start gap-3">
-          <ArrowUpCircle className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" />
-          <div className="flex-1 text-sm text-amber-800 dark:text-amber-300 space-y-1">
-            <span className="font-semibold">Updates available</span>
+        <div
+          className="rounded-[8px] px-4 py-3 flex items-start gap-3"
+          style={{
+            background: 'var(--warn-bg)',
+            border: '1px solid var(--warn)',
+          }}
+        >
+          <ArrowUpCircle className="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: 'var(--warn)' }} />
+          <div className="flex-1 text-[13px] space-y-1" style={{ color: 'var(--ink-2)' }}>
+            <span className="font-semibold" style={{ color: 'var(--warn)' }}>Updates available</span>
             {devicesWithRosUpdates.length > 0 && (
               <div className="flex items-baseline gap-1.5 flex-wrap">
                 <span className="font-medium flex items-center gap-1">
@@ -318,15 +928,13 @@ export default function DashboardPage() {
                 </span>
                 {devicesWithRosUpdates.map((d, i) => (
                   <span key={d.id}>
-                    {i > 0 && <span className="text-amber-600 dark:text-amber-500"> · </span>}
+                    {i > 0 && <span style={{ color: 'var(--ink-3)' }}> · </span>}
                     <button
                       onClick={() => navigate(`/devices/${d.id}?tab=config`)}
-                      className="underline underline-offset-2 hover:text-amber-900 dark:hover:text-amber-200"
+                      className="underline underline-offset-2"
                     >
                       {d.name}
-                      {d.latest_ros_version && (
-                        <span className="font-normal opacity-80"> ({d.latest_ros_version})</span>
-                      )}
+                      {d.latest_ros_version && <span className="opacity-70"> ({d.latest_ros_version})</span>}
                     </button>
                   </span>
                 ))}
@@ -340,15 +948,13 @@ export default function DashboardPage() {
                 </span>
                 {devicesWithRbUpgrades.map((d, i) => (
                   <span key={d.id}>
-                    {i > 0 && <span className="text-amber-600 dark:text-amber-500"> · </span>}
+                    {i > 0 && <span style={{ color: 'var(--ink-3)' }}> · </span>}
                     <button
                       onClick={() => navigate(`/devices/${d.id}?tab=config`)}
-                      className="underline underline-offset-2 hover:text-amber-900 dark:hover:text-amber-200"
+                      className="underline underline-offset-2"
                     >
                       {d.name}
-                      {d.upgrade_firmware_version && (
-                        <span className="font-normal opacity-80"> ({d.upgrade_firmware_version})</span>
-                      )}
+                      {d.upgrade_firmware_version && <span className="opacity-70"> ({d.upgrade_firmware_version})</span>}
                     </button>
                   </span>
                 ))}
@@ -356,12 +962,13 @@ export default function DashboardPage() {
             )}
           </div>
           <button
-            onClick={() => setDismissedFirmwareIds((ids) => [
+            onClick={() => setDismissedFirmwareIds(ids => [
               ...ids,
-              ...devicesWithRosUpdates.map((d) => d.id),
-              ...devicesWithRbUpgrades.map((d) => d.id),
+              ...devicesWithRosUpdates.map(d => d.id),
+              ...devicesWithRbUpgrades.map(d => d.id),
             ])}
-            className="p-0.5 rounded hover:bg-amber-200 dark:hover:bg-amber-800/50 text-amber-500 flex-shrink-0"
+            className="p-0.5 rounded flex-shrink-0"
+            style={{ color: 'var(--warn)' }}
             title="Dismiss"
           >
             <X className="w-3.5 h-3.5" />
@@ -369,278 +976,30 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* Stats row */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
-        <StatCard
-          icon={Router}
-          label="Total Devices"
-          value={summary?.devices.total ?? '—'}
-          sub={`${summary?.devices.online ?? 0} online, ${summary?.devices.offline ?? 0} offline`}
-          color="blue"
-          onClick={() => navigate('/devices')}
+      {/* View content */}
+      {dashView === 'summary' ? (
+        <SummaryView
+          summary={summary}
+          devices={devices}
+          wirelessCount={wirelessCount}
+          clientSparkline={clientSparkline}
+          clientsOverTime={clientsOverTime}
+          chartRange={chartRange}
+          setChartRange={setChartRange}
+          topClients={topClients}
+          recentEvents={recentEvents}
+          severities={severities}
+          toggleSeverity={toggleSeverity}
+          navigate={navigate}
         />
-        <StatCard
-          icon={Wifi}
-          label="Active Clients"
-          value={summary?.clients.active ?? '—'}
-          sub={`${summary?.clients.total ?? 0} total known`}
-          color="green"
-          onClick={() => navigate('/clients')}
+      ) : (
+        <OperationsView
+          summary={summary}
+          devices={devices}
+          navigate={navigate}
         />
-        <StatCard
-          icon={Signal}
-          label="Wireless Clients"
-          value={wirelessClientsData?.total ?? '—'}
-          color="blue"
-          onClick={() => navigate('/wireless/clients')}
-        />
-        <StatCard
-          icon={AlertTriangle}
-          label="Alerts (24h)"
-          value={summary?.alerts.critical ?? '—'}
-          sub={`${summary?.alerts.warning ?? 0} warnings`}
-          color={summary?.alerts.critical ? 'red' : 'yellow'}
-          onClick={() => navigate('/events')}
-        />
-        <StatCard
-          icon={Activity}
-          label="Devices Online"
-          value={summary?.devices.online ?? '—'}
-          sub={`of ${summary?.devices.total ?? 0} total`}
-          color="green"
-        />
-        <StatCard
-          icon={Activity}
-          label="Devices Offline"
-          value={summary?.devices.offline ?? '—'}
-          sub={`of ${summary?.devices.total ?? 0} total`}
-          color={summary?.devices.offline ? 'red' : 'green'}
-        />
-      </div>
-
-      {/* Charts row */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Clients over time */}
-        <div className="card p-5 lg:col-span-2">
-          <div className="flex items-center gap-2 mb-4">
-            <TrendingUp className="w-4 h-4 text-blue-500" />
-            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
-              Connected Clients (24h)
-            </h2>
-          </div>
-          {clientsOverTime.length > 0 ? (
-            <ResponsiveContainer width="100%" height={220}>
-              <LineChart data={clientsOverTime} margin={{ top: 5, right: 10, left: -20, bottom: 0 }}>
-                <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
-                <XAxis
-                  dataKey="ts"
-                  type="number"
-                  scale="time"
-                  domain={chartDomain}
-                  tick={{ fontSize: 11 }}
-                  tickCount={7}
-                  tickFormatter={(t) => format(new Date(t), 'HH:mm')}
-                />
-                <YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
-                <Tooltip
-                  formatter={(v: number) => [v, 'Clients']}
-                  labelFormatter={(t) => format(new Date(t as number), 'MMM d, HH:mm')}
-                  contentStyle={{
-                    background: 'var(--color-surface)',
-                    border: '1px solid var(--color-border)',
-                    borderRadius: '8px',
-                    fontSize: '12px',
-                  }}
-                />
-                <Line
-                  type="monotone"
-                  dataKey="value"
-                  stroke="#3b82f6"
-                  strokeWidth={2}
-                  dot={false}
-                  activeDot={{ r: 4 }}
-                />
-              </LineChart>
-            </ResponsiveContainer>
-          ) : (
-            <div className="h-[220px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm">
-              No data yet — metrics will appear after devices are polled
-            </div>
-          )}
-        </div>
-
-        {/* Device type pie */}
-        <div className="card p-5">
-          <div className="flex items-center gap-2 mb-4">
-            <Router className="w-4 h-4 text-blue-500" />
-            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">Device Types</h2>
-          </div>
-          {pieData.length > 0 ? (
-            <ResponsiveContainer width="100%" height={220}>
-              <PieChart>
-                <Pie
-                  data={pieData}
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={50}
-                  outerRadius={80}
-                  paddingAngle={3}
-                  dataKey="value"
-                >
-                  {pieData.map((_entry, index) => (
-                    <Cell key={index} fill={COLORS[index % COLORS.length]} />
-                  ))}
-                </Pie>
-                <Legend formatter={(v) => <span className="text-xs capitalize">{v}</span>} />
-                <Tooltip />
-              </PieChart>
-            </ResponsiveContainer>
-          ) : (
-            <div className="h-[220px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm">
-              No devices added yet
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Device locations map */}
-      <div className="card p-5">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <MapPin className="w-4 h-4 text-blue-500" />
-            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">Device Locations</h2>
-          </div>
-          <span className="text-xs text-gray-400 dark:text-slate-500">
-            {devices.filter((d) => d.location_lat != null && d.location_lng != null).length} of {devices.length} devices mapped
-          </span>
-        </div>
-        <DeviceLocationsMap devices={devices} />
-      </div>
-
-      {/* Bottom row: Top clients + Recent events */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Top clients */}
-        <div className="card p-5">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-2">
-              <Users className="w-4 h-4 text-blue-500" />
-              <h2 className="text-sm font-semibold text-gray-900 dark:text-white">Top Clients</h2>
-            </div>
-            <button
-              onClick={() => navigate('/clients')}
-              className="text-xs text-blue-500 hover:text-blue-600"
-            >
-              View all
-            </button>
-          </div>
-          {topClients.length > 0 ? (() => {
-            const top5 = topClients.slice(0, 5);
-            const maxBytes = top5[0]?.total_bytes ?? 1;
-            const barColors = ['#3b82f6', '#6366f1', '#8b5cf6', '#a78bfa', '#c4b5fd'];
-            return (
-              <div className="space-y-2.5">
-                {top5.map((client, i) => {
-                  const pct = Math.max(4, (client.total_bytes / maxBytes) * 100);
-                  const label = client.hostname || client.mac_address || 'Unknown';
-                  return (
-                    <div
-                      key={client.mac_address}
-                      className="flex items-center gap-2 cursor-pointer group"
-                      onClick={() => navigate(`/clients/${encodeURIComponent(client.mac_address)}`)}
-                    >
-                      <span className="text-xs text-gray-400 dark:text-slate-500 w-3 flex-shrink-0 text-right">
-                        {i + 1}
-                      </span>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center justify-between gap-2 mb-0.5">
-                          <span className="text-xs font-medium text-gray-700 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
-                            {label.length > 22 ? label.slice(0, 22) + '…' : label}
-                          </span>
-                          <span className="text-xs text-gray-500 dark:text-slate-400 flex-shrink-0 font-mono">
-                            {formatBytes(client.total_bytes)}
-                          </span>
-                        </div>
-                        <div className="h-1.5 w-full bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden">
-                          <div
-                            className="h-full rounded-full transition-all duration-500"
-                            style={{ width: `${pct}%`, backgroundColor: barColors[i] }}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            );
-          })() : (
-            <div className="h-[120px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm">
-              No active clients
-            </div>
-          )}
-        </div>
-
-        {/* Recent events */}
-        <div className="card p-5">
-          <div className="flex flex-wrap items-center justify-between gap-2 mb-4">
-            <div className="flex items-center gap-2">
-              <AlertTriangle className="w-4 h-4 text-blue-500" />
-              <button
-                onClick={() => navigate('/events')}
-                className="text-sm font-semibold text-gray-900 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
-              >
-                Recent Events
-              </button>
-            </div>
-            <div className="flex flex-wrap items-center gap-2 sm:gap-3">
-              {([
-                { key: 'error', label: 'Error', color: 'text-red-500' },
-                { key: 'warning', label: 'Warning', color: 'text-yellow-500' },
-                { key: 'info', label: 'Info', color: 'text-blue-500' },
-              ] as const).map(({ key, label, color }) => (
-                <label key={key} className="flex items-center gap-1 cursor-pointer select-none">
-                  <input
-                    type="checkbox"
-                    checked={severities.has(key)}
-                    onChange={() => toggleSeverity(key)}
-                    className="w-3 h-3 rounded cursor-pointer"
-                  />
-                  <span className={clsx('text-xs font-medium', color)}>{label}</span>
-                </label>
-              ))}
-              <button
-                onClick={() => navigate('/events')}
-                className="text-xs text-blue-500 hover:text-blue-600"
-              >
-                View all
-              </button>
-            </div>
-          </div>
-          <div className="space-y-1">
-            {(eventsData?.events ?? []).length > 0 ? (
-              eventsData!.events.map((ev: DeviceEvent) => (
-                <div
-                  key={ev.id}
-                  className="flex items-start gap-3 py-1.5 border-b border-gray-100 dark:border-slate-700 last:border-0"
-                >
-                  <SeverityBadge severity={ev.severity} />
-                  <div className="min-w-0 flex-1">
-                    <p className="text-xs text-gray-700 dark:text-slate-300 truncate">
-                      {ev.message}
-                    </p>
-                    <p className="text-xs text-gray-400 dark:text-slate-500 mt-0.5">
-                      {ev.device_name} · {format(new Date(ev.event_time), 'MMM d, HH:mm')}
-                    </p>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="flex items-center justify-center h-[120px] text-gray-400 dark:text-slate-500 text-sm">
-                No recent events
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
+      )}
     </div>
   );
 }
+
diff --git a/frontend/src/pages/DevicesPage.tsx b/frontend/src/pages/DevicesPage.tsx
index ea276c5..2c12cad 100644
--- a/frontend/src/pages/DevicesPage.tsx
+++ b/frontend/src/pages/DevicesPage.tsx
@@ -1,23 +1,11 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
-  Plus,
-  RefreshCw,
-  Router,
-  Wifi,
-  Trash2,
-  ChevronRight,
-  Search,
-  Radar,
-  ArrowUpCircle,
-  Cpu,
-  Pencil,
-  ArrowUpDown,
-  ArrowUp,
-  ArrowDown,
+  Plus, RefreshCw, Router, Wifi, Trash2, ChevronRight, Search,
+  Radar, ArrowUpCircle, Cpu, Pencil, ArrowUpDown, ArrowUp, ArrowDown,
 } from 'lucide-react';
-import { devicesApi, topologyApi } from '../services/api';
+import { devicesApi, topologyApi, metricsApi } from '../services/api';
 import type { Device } from '../types';
 import type { DiscoveredDevice } from '../services/api';
 import { useCanWrite } from '../hooks/useCanWrite';
@@ -48,10 +36,13 @@ function SortableHeader({
       type="button"
       onClick={onClick}
       className={clsx(
-        'inline-flex items-center gap-1.5 text-inherit hover:text-gray-900 dark:hover:text-white transition-colors',
+        'inline-flex items-center gap-1.5 text-inherit transition-colors',
         align === 'center' && 'justify-center',
         align === 'right' && 'justify-end'
       )}
+      style={{ color: 'inherit' }}
+      onMouseEnter={e => (e.currentTarget.style.color = 'var(--ink)')}
+      onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
       title={`Sort by ${label}`}
     >
       <span>{label}</span>
@@ -62,32 +53,58 @@ function SortableHeader({
   );
 }
 
-function StatusDot({ status }: { status: Device['status'] }) {
+function GlowDot({ status }: { status: Device['status'] }) {
+  const color = status === 'online' ? 'var(--good)' : status === 'offline' ? 'var(--bad)' : 'var(--ink-4)';
   return (
     <span
-      className={clsx(
-        'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
-        status === 'online' && 'status-online',
-        status === 'offline' && 'status-offline',
-        status === 'unknown' && 'status-unknown'
-      )}
+      style={{
+        width: 8, height: 8, borderRadius: 999, display: 'inline-block',
+        background: color, flexShrink: 0,
+        boxShadow: status === 'online' ? `0 0 0 2px ${color}33, 0 0 8px ${color}88` : 'none',
+      }}
+    />
+  );
+}
+
+function TypePill({ type }: { type: Device['device_type'] }) {
+  const map: Record<string, { label: string; color: string }> = {
+    wireless_ap: { label: 'AP',  color: 'var(--info)' },
+    switch:      { label: 'SW',  color: 'var(--accent)' },
+    router:      { label: 'RTR', color: 'var(--violet)' },
+  };
+  const { label, color } = map[type as string] ?? { label: (type as string)?.slice(0, 3)?.toUpperCase() ?? '?', color: 'var(--ink-3)' };
+  return (
+    <span
+      className="mono text-[10.5px] font-medium px-[6px] py-[2px] rounded-full"
+      style={{ color, border: '1px solid var(--line)' }}
     >
-      <span
-        className={clsx(
-          'w-1.5 h-1.5 rounded-full',
-          status === 'online' && 'bg-green-500',
-          status === 'offline' && 'bg-red-500',
-          status === 'unknown' && 'bg-gray-400'
-        )}
-      />
-      {status}
+      {label}
     </span>
   );
 }
 
-function DeviceTypeIcon({ type }: { type: Device['device_type'] }) {
-  if (type === 'wireless_ap') return <Wifi className="w-5 h-5 text-blue-500" />;
-  return <Router className="w-5 h-5 text-blue-500" />;
+function CpuValue({ value }: { value: number | undefined }) {
+  if (value == null) return <span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>—</span>;
+  const color = value > 70 ? 'var(--bad)' : value > 40 ? 'var(--warn)' : 'var(--accent)';
+  return (
+    <span className="mono num-tab text-[12px] font-medium" style={{ color }}>{value}%</span>
+  );
+}
+
+function LoadSparkline({ data }: { data: number[] }) {
+  if (data.length < 2) return <span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>—</span>;
+  const max = Math.max(...data) || 1;
+  const w = 72, h = 20;
+  const pts = data.map((v, i) => [
+    (i / (data.length - 1)) * w,
+    h - (v / max) * (h - 2) - 1,
+  ]);
+  const d = 'M' + pts.map(p => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' L');
+  return (
+    <svg width={w} height={h} style={{ display: 'block' }}>
+      <path d={d} fill="none" stroke="var(--ink-3)" strokeWidth="1.2" />
+    </svg>
+  );
 }
 
 export default function DevicesPage() {
@@ -107,6 +124,8 @@ export default function DevicesPage() {
     key: 'discovered_at',
     dir: 'desc',
   });
+  const [statusFilter, setStatusFilter] = useState<'all' | 'online' | 'offline' | 'updates'>('all');
+  const [typeFilter, setTypeFilter] = useState<string | null>(null);
 
   const { data: devices = [], isLoading } = useQuery({
     queryKey: ['devices'],
@@ -133,14 +152,39 @@ export default function DevicesPage() {
     },
   });
 
+  // Fetch 1h CPU history for all devices (for LOAD sparkline column)
+  const cpuHistoryResults = useQueries({
+    queries: devices.map(d => ({
+      queryKey: ['device-resources-history', d.id],
+      queryFn: () => metricsApi.deviceResources(d.id, '1h').then(r => r.data),
+      staleTime: 60_000,
+      enabled: d.status === 'online',
+    })),
+  });
+  const cpuHistories = useMemo(() => {
+    const map: Record<number, number[]> = {};
+    devices.forEach((d, i) => {
+      const pts = cpuHistoryResults[i]?.data ?? [];
+      map[d.id] = pts.map((p: { cpu_load?: number }) => p.cpu_load ?? 0).filter((v: number) => v > 0);
+    });
+    return map;
+  }, [devices, cpuHistoryResults]);
+
   const filtered = useMemo(() => {
-    const base = devices.filter(
-      (d) =>
-        !search ||
-        d.name.toLowerCase().includes(search.toLowerCase()) ||
-        d.ip_address.includes(search) ||
-        d.model?.toLowerCase().includes(search.toLowerCase())
-    );
+    const base = devices.filter(d => {
+      if (search &&
+        !d.name.toLowerCase().includes(search.toLowerCase()) &&
+        !d.ip_address.includes(search) &&
+        !d.model?.toLowerCase().includes(search.toLowerCase())
+      ) return false;
+      if (statusFilter === 'online' && d.status !== 'online') return false;
+      if (statusFilter === 'offline' && d.status !== 'offline') return false;
+      if (statusFilter === 'updates' && !d.firmware_update_available && !d.routerboard_upgrade_available) return false;
+      if (typeFilter === 'AP' && d.device_type !== 'wireless_ap') return false;
+      if (typeFilter === 'SW' && d.device_type !== 'switch') return false;
+      if (typeFilter === 'RTR' && d.device_type !== 'router') return false;
+      return true;
+    });
     const sorted = [...base].sort((a, b) => {
       const val = (x: Device): string | number => {
         switch (deviceSort.key) {
@@ -203,19 +247,21 @@ export default function DevicesPage() {
     }
   };
 
+  const onlineCount = devices.filter(d => d.status === 'online').length;
+  const updatesCount = devices.filter(d => d.firmware_update_available || d.routerboard_upgrade_available).length;
+
   return (
     <div className="space-y-4">
-      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+      {/* Page header */}
+      <div className="flex flex-wrap items-baseline gap-3">
+        <h1 className="text-[28px] font-semibold leading-none" style={{ color: 'var(--ink)', letterSpacing: '-0.01em' }}>
           Devices
-          {devices.length > 0 && (
-            <span className="ml-2 text-sm font-normal text-gray-500 dark:text-slate-400">
-              ({devices.filter((d) => d.status === 'online').length}/{devices.length} online)
-            </span>
-          )}
         </h1>
+        <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
+          {devices.length} total · {onlineCount} online{updatesCount > 0 ? ` · ${updatesCount} update${updatesCount !== 1 ? 's' : ''}` : ''}
+        </span>
         {canWrite && (
-          <div className="flex items-center gap-2 flex-shrink-0">
+          <div className="ml-auto flex items-center gap-2">
             <button
               onClick={async () => {
                 setSearching(true);
@@ -230,220 +276,240 @@ export default function DevicesPage() {
                 }
               }}
               disabled={searching}
-              className="btn-secondary flex items-center gap-2"
+              className="btn-secondary flex items-center gap-2 text-[12px] py-[6px]"
             >
-              <RefreshCw className={clsx('w-4 h-4', searching && 'animate-spin')} />
-              {searching ? 'Searching…' : 'Search for Devices'}
+              <RefreshCw className={clsx('w-3.5 h-3.5', searching && 'animate-spin')} />
+              {searching ? 'Searching…' : 'Discover'}
             </button>
             <button
               onClick={() => { setAddPrefill(undefined); setShowAddModal(true); }}
-              className="btn-primary flex items-center gap-2"
+              className="btn-primary flex items-center gap-2 text-[12px] py-[6px]"
             >
-              <Plus className="w-4 h-4" />
-              Add Device
+              <Plus className="w-3.5 h-3.5" />
+              Add device
             </button>
           </div>
         )}
       </div>
 
-      {/* Search */}
-      <div className="relative w-full sm:max-w-sm">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-        <input
-          type="text"
-          className="input pl-9"
-          placeholder="Search devices..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
+      {/* Filter bar */}
+      <div className="card-subtle flex flex-wrap items-center gap-[6px] p-[6px]">
+        <div className="flex items-center gap-2 flex-1 min-w-[160px] px-[10px] py-[6px]" style={{ color: 'var(--ink-3)' }}>
+          <Search className="w-3.5 h-3.5 flex-shrink-0" />
+          <input
+            type="text"
+            className="bg-transparent text-[13px] outline-none w-full"
+            style={{ color: 'var(--ink)' }}
+            placeholder="Filter devices…"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          />
+        </div>
+        {(['all', 'online', 'offline', 'updates'] as const).map(f => (
+          <button
+            key={f}
+            onClick={() => setStatusFilter(f)}
+            className="mono text-[11.5px] px-[10px] py-[4px] rounded-[5px] transition-colors capitalize"
+            style={{
+              background: statusFilter === f ? 'var(--surface-3)' : 'transparent',
+              color: statusFilter === f ? 'var(--ink)' : 'var(--ink-3)',
+              border: 'none',
+            }}
+          >
+            {f}
+          </button>
+        ))}
+        <div className="w-px h-[18px] mx-1" style={{ background: 'var(--line)' }} />
+        {(['AP', 'SW', 'RTR'] as const).map(t => {
+          const colors: Record<string, string> = { AP: 'var(--info)', SW: 'var(--accent)', RTR: 'var(--violet)' };
+          return (
+            <button
+              key={t}
+              onClick={() => setTypeFilter(f => f === t ? null : t)}
+              className="mono text-[11px] px-[8px] py-[4px] rounded-[5px] transition-colors"
+              style={{
+                background: typeFilter === t ? 'var(--surface-3)' : 'transparent',
+                color: typeFilter === t ? colors[t] : 'var(--ink-3)',
+                border: '1px solid var(--line)',
+              }}
+            >
+              {t}
+            </button>
+          );
+        })}
       </div>
 
-      {/* Device list */}
+      {/* Device table */}
       {isLoading ? (
-        <div className="flex items-center justify-center h-48 text-gray-400">Loading...</div>
+        <div className="flex items-center justify-center h-48" style={{ color: 'var(--ink-4)' }}>Loading…</div>
       ) : filtered.length === 0 ? (
         <div className="card p-12 flex flex-col items-center gap-4 text-center">
-          <div className="w-16 h-16 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center">
-            <Router className="w-8 h-8 text-gray-400" />
+          <div className="w-16 h-16 rounded-full flex items-center justify-center" style={{ background: 'var(--surface-2)' }}>
+            <Router className="w-8 h-8" style={{ color: 'var(--ink-4)' }} />
           </div>
           <div>
-            <p className="text-gray-700 dark:text-slate-300 font-medium">
-              {search ? 'No devices match your search' : 'No devices added yet'}
+            <p className="font-medium" style={{ color: 'var(--ink-2)' }}>
+              {search || statusFilter !== 'all' || typeFilter ? 'No devices match your filters' : 'No devices added yet'}
             </p>
-            <p className="text-sm text-gray-400 dark:text-slate-500 mt-1">
-              {!search && 'Click "Add Device" to connect your first Mikrotik device'}
+            <p className="text-[13px] mt-1" style={{ color: 'var(--ink-4)' }}>
+              {!search && statusFilter === 'all' && !typeFilter && 'Click "Add device" to connect your first Mikrotik device'}
             </p>
           </div>
         </div>
       ) : (
         <div className="card overflow-hidden">
           <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-gray-200 dark:border-slate-700">
-                <th className="table-header px-4 py-3">
-                  <SortableHeader
-                    label="Device"
-                    active={deviceSort.key === 'name'}
-                    dir={deviceSort.dir}
-                    onClick={() => flipSort(deviceSort, 'name', setDeviceSort)}
-                  />
-                </th>
-                <th className="table-header px-4 py-3">
-                  <SortableHeader
-                    label="IP Address"
-                    active={deviceSort.key === 'ip_address'}
-                    dir={deviceSort.dir}
-                    onClick={() => flipSort(deviceSort, 'ip_address', setDeviceSort)}
-                  />
-                </th>
-                <th className="table-header px-4 py-3">
-                  <SortableHeader
-                    label="Model"
-                    active={deviceSort.key === 'model'}
-                    dir={deviceSort.dir}
-                    onClick={() => flipSort(deviceSort, 'model', setDeviceSort)}
-                  />
-                </th>
-                <th className="table-header px-4 py-3">
-                  <SortableHeader
-                    label="ROS Version"
-                    active={deviceSort.key === 'ros_version'}
-                    dir={deviceSort.dir}
-                    onClick={() => flipSort(deviceSort, 'ros_version', setDeviceSort)}
-                  />
-                </th>
-                <th className="table-header px-4 py-3">
-                  <SortableHeader
-                    label="Status"
-                    active={deviceSort.key === 'status'}
-                    dir={deviceSort.dir}
-                    onClick={() => flipSort(deviceSort, 'status', setDeviceSort)}
-                  />
-                </th>
-                <th className="table-header px-4 py-3">
-                  <SortableHeader
-                    label="Last Seen"
-                    active={deviceSort.key === 'last_seen'}
-                    dir={deviceSort.dir}
-                    onClick={() => flipSort(deviceSort, 'last_seen', setDeviceSort)}
-                  />
-                </th>
-                <th className="table-header px-4 py-3 w-28">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra">
-              {filtered.map((device) => (
-                <tr
-                  key={device.id}
-                  className="hover:bg-gray-50 dark:hover:bg-slate-700/50 cursor-pointer transition-colors"
-                  onClick={() => navigate(`/devices/${device.id}`)}
-                >
-                  <td className="px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <DeviceTypeIcon type={device.device_type} />
-                      <div>
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">
-                          {device.name}
-                        </div>
-                        <div className="text-xs text-gray-400 dark:text-slate-500">
-                          {{ router: 'Router', switch: 'Switch', wireless_ap: 'Wireless AP', other: 'Other' }[device.device_type] ?? device.device_type}
-                        </div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-4 py-3 text-sm font-mono text-gray-600 dark:text-slate-400">
-                    {device.ip_address}
-                  </td>
-                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
-                    {device.model || '—'}
-                  </td>
-                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
-                    <span className="flex items-center gap-1.5">
-                      {device.ros_version || '—'}
-                      {device.firmware_update_available && (
-                        <span
-                          title={device.latest_ros_version ? `RouterOS update available: ${device.latest_ros_version}` : 'RouterOS update available'}
-                          className="flex-shrink-0"
-                        >
-                          <ArrowUpCircle className="w-3.5 h-3.5 text-amber-500" />
-                        </span>
-                      )}
-                      {device.routerboard_upgrade_available && (
-                        <span
-                          title={device.upgrade_firmware_version ? `RouterBOOT upgrade available: ${device.upgrade_firmware_version}` : 'RouterBOOT upgrade available'}
-                          className="flex-shrink-0"
-                        >
-                          <Cpu className="w-3.5 h-3.5 text-blue-400" />
-                        </span>
-                      )}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3">
-                    <StatusDot status={device.status} />
-                  </td>
-                  <td className="px-4 py-3 text-sm text-gray-400 dark:text-slate-500">
-                    {device.last_seen
-                      ? new Date(device.last_seen).toLocaleString()
-                      : '—'}
-                  </td>
-                  <td className="px-4 py-3">
-                    <div
-                      className="flex items-center gap-1"
-                      onClick={(e) => e.stopPropagation()}
+            <table className="w-full">
+              <thead>
+                <tr style={{ borderBottom: '1px solid var(--line)' }}>
+                  {[
+                    { key: null,         label: '',           w: 22  },
+                    { key: 'name',       label: 'DEVICE',     w: null },
+                    { key: null,         label: 'TYPE',       w: 72  },
+                    { key: 'model',      label: 'MODEL',      w: null },
+                    { key: 'ip_address', label: 'IP ADDRESS', w: null },
+                    { key: 'ros_version',label: 'ROS',        w: 110 },
+                    { key: null,         label: 'CPU',        w: 110 },
+                    { key: null,         label: 'LOAD',       w: 100 },
+                    { key: 'last_seen',  label: 'SEEN',       w: 90  },
+                    { key: null,         label: '',           w: 56  },
+                  ].map(({ key, label, w }, i) => (
+                    <th
+                      key={i}
+                      className="table-header px-4 py-[10px] text-left"
+                      style={w ? { width: w } : undefined}
                     >
-                      {canWrite && (
-                        <>
-                          <button
-                            onClick={() => syncMutation.mutate(device.id)}
-                            disabled={syncMutation.isPending}
-                            className="p-1.5 rounded text-gray-400 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
-                            title="Sync now"
-                          >
-                            <RefreshCw
-                              className={clsx('w-3.5 h-3.5', syncMutation.isPending && 'animate-spin')}
-                            />
-                          </button>
-                          <button
-                            onClick={() => setEditDevice(device)}
-                            className="p-1.5 rounded text-gray-400 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
-                            title="Edit device"
-                          >
-                            <Pencil className="w-3.5 h-3.5" />
-                          </button>
-                          {deleteConfirm === device.id ? (
-                            <div className="flex items-center gap-1">
-                              <button
-                                onClick={() => deleteMutation.mutate(device.id)}
-                                className="text-xs text-red-500 hover:text-red-600 font-medium px-1"
-                              >
-                                Confirm
-                              </button>
-                              <button
-                                onClick={() => setDeleteConfirm(null)}
-                                className="text-xs text-gray-400 hover:text-gray-600 px-1"
-                              >
-                                Cancel
-                              </button>
-                            </div>
-                          ) : (
-                            <button
-                              onClick={() => setDeleteConfirm(device.id)}
-                              className="p-1.5 rounded text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
-                              title="Delete device"
-                            >
-                              <Trash2 className="w-3.5 h-3.5" />
-                            </button>
-                          )}
-                        </>
-                      )}
-                      <ChevronRight className="w-4 h-4 text-gray-300 dark:text-slate-600" />
-                    </div>
-                  </td>
+                      {key ? (
+                        <SortableHeader
+                          label={label}
+                          active={deviceSort.key === key as DeviceSortKey}
+                          dir={deviceSort.dir}
+                          onClick={() => flipSort(deviceSort, key as DeviceSortKey, setDeviceSort)}
+                        />
+                      ) : label}
+                    </th>
+                  ))}
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {filtered.map((device, i) => {
+                  const cpuSpark = cpuHistories[device.id] ?? [];
+                  return (
+                    <tr
+                      key={device.id}
+                      className="cursor-pointer transition-colors"
+                      style={{
+                        borderBottom: i < filtered.length - 1 ? '1px solid var(--line-soft)' : 'none',
+                      }}
+                      onMouseEnter={e => (e.currentTarget.style.background = 'var(--surface-2)')}
+                      onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                      onClick={() => navigate(`/devices/${device.id}`)}
+                    >
+                      <td className="px-4 py-[12px]">
+                        <GlowDot status={device.status} />
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <div className="text-[13px] font-medium" style={{ color: 'var(--ink)' }}>{device.name}</div>
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <TypePill type={device.device_type} />
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <span className="mono text-[11.5px]" style={{ color: 'var(--ink-2)' }}>{device.model || '—'}</span>
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <span className="mono num-tab text-[12px]" style={{ color: 'var(--ink-2)' }}>{device.ip_address}</span>
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <span
+                          className="mono text-[11.5px] flex items-center gap-[4px]"
+                          style={{ color: device.firmware_update_available || device.routerboard_upgrade_available ? 'var(--warn)' : 'var(--ink-3)' }}
+                        >
+                          {(device.firmware_update_available || device.routerboard_upgrade_available) && (
+                            <span
+                              className="text-[9px] font-bold px-[4px] py-[1px] rounded-[3px]"
+                              style={{ background: 'var(--warn)', color: 'var(--accent-fg)' }}
+                            >↑</span>
+                          )}
+                          {device.ros_version || '—'}
+                        </span>
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <CpuValue value={(() => { const arr = cpuHistories[device.id]; return arr && arr.length > 0 ? arr[arr.length - 1] : undefined; })()} />
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <LoadSparkline data={cpuSpark} />
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
+                          {device.last_seen
+                            ? new Date(device.last_seen).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                            : '—'}
+                        </span>
+                      </td>
+                      <td className="px-4 py-[12px]">
+                        <div
+                          className="flex items-center justify-end gap-1"
+                          onClick={e => e.stopPropagation()}
+                        >
+                          {canWrite && (
+                            <>
+                              <button
+                                onClick={() => syncMutation.mutate(device.id)}
+                                disabled={syncMutation.isPending}
+                                className="p-1.5 rounded transition-colors"
+                                style={{ color: 'var(--ink-4)' }}
+                                title="Sync now"
+                                onMouseEnter={e => (e.currentTarget.style.color = 'var(--accent)')}
+                                onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
+                              >
+                                <RefreshCw className={clsx('w-3.5 h-3.5', syncMutation.isPending && 'animate-spin')} />
+                              </button>
+                              <button
+                                onClick={() => setEditDevice(device)}
+                                className="p-1.5 rounded transition-colors"
+                                style={{ color: 'var(--ink-4)' }}
+                                title="Edit device"
+                                onMouseEnter={e => (e.currentTarget.style.color = 'var(--ink-2)')}
+                                onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
+                              >
+                                <Pencil className="w-3.5 h-3.5" />
+                              </button>
+                              {deleteConfirm === device.id ? (
+                                <div className="flex items-center gap-1">
+                                  <button
+                                    onClick={() => deleteMutation.mutate(device.id)}
+                                    className="text-[11px] font-medium px-1"
+                                    style={{ color: 'var(--bad)' }}
+                                  >Confirm</button>
+                                  <button
+                                    onClick={() => setDeleteConfirm(null)}
+                                    className="text-[11px] px-1"
+                                    style={{ color: 'var(--ink-4)' }}
+                                  >Cancel</button>
+                                </div>
+                              ) : (
+                                <button
+                                  onClick={() => setDeleteConfirm(device.id)}
+                                  className="p-1.5 rounded transition-colors"
+                                  style={{ color: 'var(--ink-4)' }}
+                                  title="Delete device"
+                                  onMouseEnter={e => (e.currentTarget.style.color = 'var(--bad)')}
+                                  onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
+                                >
+                                  <Trash2 className="w-3.5 h-3.5" />
+                                </button>
+                              )}
+                            </>
+                          )}
+                          <ChevronRight className="w-4 h-4" style={{ color: 'var(--ink-4)' }} />
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
           </div>
         </div>
       )}
@@ -452,20 +518,16 @@ export default function DevicesPage() {
       {discoveredList.length > 0 && (
         <div className="space-y-3">
           <div className="flex flex-wrap items-center gap-2">
-            <Radar className="w-4 h-4 text-amber-500" />
-            <h2 className="text-sm font-semibold text-gray-700 dark:text-slate-300">
+            <Radar className="w-4 h-4" style={{ color: 'var(--warn)' }} />
+            <h2 className="text-[13px] font-semibold" style={{ color: 'var(--ink-2)' }}>
               Discovered Devices
             </h2>
-            <span className="text-xs text-gray-400 dark:text-slate-500">
-              — Mikrotik neighbors seen by your managed devices, not yet added to management
+            <span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>
+              — MikroTik neighbors seen by managed devices, not yet added
             </span>
             <label
-              className={clsx(
-                'ml-auto flex items-center gap-2 text-xs select-none',
-                duplicateCount === 0
-                  ? 'text-gray-300 dark:text-slate-600 cursor-not-allowed'
-                  : 'text-gray-600 dark:text-slate-400 cursor-pointer'
-              )}
+              className="ml-auto flex items-center gap-2 select-none mono text-[11px]"
+              style={{ color: duplicateCount === 0 ? 'var(--ink-4)' : 'var(--ink-3)', cursor: duplicateCount === 0 ? 'not-allowed' : 'pointer' }}
               title={
                 duplicateCount === 0
                   ? 'No duplicates of already-managed devices detected'
@@ -474,20 +536,19 @@ export default function DevicesPage() {
             >
               <input
                 type="checkbox"
-                className="rounded border-gray-300 dark:border-slate-600"
                 checked={hideDuplicates}
                 disabled={duplicateCount === 0}
                 onChange={(e) => setHideDuplicates(e.target.checked)}
               />
-              Hide duplicates of managed devices
+              Hide duplicates
               {duplicateCount > 0 && (
-                <span className="text-gray-400 dark:text-slate-500">({duplicateCount})</span>
+                <span style={{ color: 'var(--ink-4)' }}>({duplicateCount})</span>
               )}
             </label>
             {canWrite && visibleDiscovered.length > 0 && (
               <button
                 onClick={() => setShowTryAllModal(true)}
-                className="btn-primary text-xs py-1.5 px-3"
+                className="btn-primary text-[12px] py-[5px] px-3"
                 title="Try adding all discovered devices with one credential method"
               >
                 Try All
@@ -495,107 +556,89 @@ export default function DevicesPage() {
             )}
           </div>
           {visibleDiscovered.length === 0 ? (
-            <div className="card p-4 text-xs text-gray-500 dark:text-slate-400 text-center">
+            <div className="card p-4 text-center mono text-[11px]" style={{ color: 'var(--ink-4)' }}>
               All {discoveredList.length} discovered neighbor(s) are already managed devices.
             </div>
           ) : (
           <div className="card overflow-hidden">
             <div className="overflow-x-auto">
-            <table className="w-full text-sm">
+            <table className="w-full">
               <thead>
-                <tr className="border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
-                  <th className="table-header px-4 py-2.5 text-left">
-                    <SortableHeader
-                      label="Identity"
-                      active={discoveredSort.key === 'identity'}
-                      dir={discoveredSort.dir}
-                      onClick={() => flipSort(discoveredSort, 'identity', setDiscoveredSort)}
-                    />
-                  </th>
-                  <th className="table-header px-4 py-2.5 text-left">
-                    <SortableHeader
-                      label="IP Address"
-                      active={discoveredSort.key === 'address'}
-                      dir={discoveredSort.dir}
-                      onClick={() => flipSort(discoveredSort, 'address', setDiscoveredSort)}
-                    />
-                  </th>
-                  <th className="table-header px-4 py-2.5 text-left">
-                    <SortableHeader
-                      label="MAC Address"
-                      active={discoveredSort.key === 'mac_address'}
-                      dir={discoveredSort.dir}
-                      onClick={() => flipSort(discoveredSort, 'mac_address', setDiscoveredSort)}
-                    />
-                  </th>
-                  <th className="table-header px-4 py-2.5 text-left">
-                    <SortableHeader
-                      label="Seen By"
-                      active={discoveredSort.key === 'seen_by'}
-                      dir={discoveredSort.dir}
-                      onClick={() => flipSort(discoveredSort, 'seen_by', setDiscoveredSort)}
-                    />
-                  </th>
-                  <th className="table-header px-4 py-2.5 text-left">
-                    <SortableHeader
-                      label="Last Seen"
-                      active={discoveredSort.key === 'discovered_at'}
-                      dir={discoveredSort.dir}
-                      onClick={() => flipSort(discoveredSort, 'discovered_at', setDiscoveredSort)}
-                    />
-                  </th>
-                  <th className="table-header px-4 py-2.5 w-36" />
+                <tr style={{ borderBottom: '1px solid var(--line)' }}>
+                  {(['Identity', 'IP Address', 'MAC Address', 'Seen By', 'Last Seen', ''] as const).map((label, i) => (
+                    <th key={i} className="table-header px-4 py-[10px] text-left" style={i === 5 ? { width: 140 } : undefined}>
+                      {label === 'Identity' && (
+                        <SortableHeader label="IDENTITY" active={discoveredSort.key === 'identity'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'identity', setDiscoveredSort)} />
+                      )}
+                      {label === 'IP Address' && (
+                        <SortableHeader label="IP ADDRESS" active={discoveredSort.key === 'address'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'address', setDiscoveredSort)} />
+                      )}
+                      {label === 'MAC Address' && (
+                        <SortableHeader label="MAC" active={discoveredSort.key === 'mac_address'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'mac_address', setDiscoveredSort)} />
+                      )}
+                      {label === 'Seen By' && (
+                        <SortableHeader label="SEEN BY" active={discoveredSort.key === 'seen_by'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'seen_by', setDiscoveredSort)} />
+                      )}
+                      {label === 'Last Seen' && (
+                        <SortableHeader label="LAST SEEN" active={discoveredSort.key === 'discovered_at'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'discovered_at', setDiscoveredSort)} />
+                      )}
+                    </th>
+                  ))}
                 </tr>
               </thead>
-              <tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra">
+              <tbody>
                 {visibleDiscovered.map((d, i) => (
                   <tr
                     key={d.mac_address || d.address || i}
-                    className={clsx(
-                      'hover:bg-amber-50/50 dark:hover:bg-amber-900/10',
-                      d.duplicate_of_device_id != null && 'opacity-70'
-                    )}
+                    style={{
+                      borderBottom: i < visibleDiscovered.length - 1 ? '1px solid var(--line-soft)' : 'none',
+                      opacity: d.duplicate_of_device_id != null ? 0.6 : 1,
+                    }}
+                    onMouseEnter={e => (e.currentTarget.style.background = 'var(--surface-2)')}
+                    onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
                   >
-                    <td className="px-4 py-2.5 font-medium text-gray-900 dark:text-white">
+                    <td className="px-4 py-[11px]">
                       <div className="flex items-center gap-2">
-                        <span>{d.identity || '—'}</span>
+                        <span className="text-[13px] font-medium" style={{ color: 'var(--ink)' }}>{d.identity || '—'}</span>
                         {d.duplicate_of_device_id != null && (
                           <span
-                            className="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300"
+                            className="mono text-[9.5px] uppercase tracking-wide px-[6px] py-[2px] rounded"
+                            style={{ background: 'var(--good-bg)', color: 'var(--good)' }}
                             title={`Matches managed device: ${d.duplicate_of_device_name ?? ''}`}
                           >
-                            Already managed
-                            {d.duplicate_of_device_name ? ` · ${d.duplicate_of_device_name}` : ''}
+                            managed{d.duplicate_of_device_name ? ` · ${d.duplicate_of_device_name}` : ''}
                           </span>
                         )}
                       </div>
                     </td>
-                    <td className="px-4 py-2.5 font-mono text-gray-600 dark:text-slate-400">
+                    <td className="px-4 py-[11px]">
                       {d.address ? (
-                        d.address
+                        <span className="mono num-tab text-[12px]" style={{ color: 'var(--ink-2)' }}>{d.address}</span>
                       ) : (
-                        <span className="text-amber-500 dark:text-amber-400 italic text-xs font-sans">
+                        <span className="mono text-[11px] italic" style={{ color: 'var(--warn)' }}>
                           Not detected — enter manually
                         </span>
                       )}
                     </td>
-                    <td className="px-4 py-2.5 font-mono text-xs text-gray-500 dark:text-slate-500">
-                      {d.mac_address || '—'}
+                    <td className="px-4 py-[11px]">
+                      <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>{d.mac_address || '—'}</span>
                     </td>
-                    <td className="px-4 py-2.5 text-gray-500 dark:text-slate-400 text-xs">
-                      {d.seen_by}
+                    <td className="px-4 py-[11px]">
+                      <span className="text-[12px]" style={{ color: 'var(--ink-3)' }}>{d.seen_by}</span>
                     </td>
-                    <td className="px-4 py-2.5 text-gray-400 dark:text-slate-500 text-xs">
-                      {new Date(d.discovered_at).toLocaleString()}
+                    <td className="px-4 py-[11px]">
+                      <span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>
+                        {new Date(d.discovered_at).toLocaleString()}
+                      </span>
                     </td>
-                    <td className="px-4 py-2.5">
+                    <td className="px-4 py-[11px]">
                       {canWrite && d.duplicate_of_device_id == null && (
                         <button
                           onClick={() => {
                             setAddPrefill({ name: d.identity || '', ip_address: d.address });
                             setShowAddModal(true);
                           }}
-                          className="btn-primary text-xs py-1 px-3 flex items-center gap-1"
+                          className="btn-primary text-[12px] py-[5px] px-3 flex items-center gap-1"
                         >
                           <Plus className="w-3 h-3" />
                           Add to Manager
diff --git a/frontend/src/version.ts b/frontend/src/version.ts
index 473a335..c6e95af 100644
--- a/frontend/src/version.ts
+++ b/frontend/src/version.ts
@@ -1 +1 @@
-export const APP_VERSION = 'v0.10.8 Beta';
+export const APP_VERSION = 'v0.10.9 Beta';
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 3345b18..9e766d0 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,6 +5,7 @@ export default {
   theme: {
     extend: {
       colors: {
+        // Legacy brand palette — kept for backward compat with existing components
         brand: {
           50: '#eff6ff',
           100: '#dbeafe',
@@ -21,11 +22,35 @@ export default {
           light: '#f1f5f9',
           dark: '#0f172a',
         },
+        // Design token colors — reference CSS vars so light/dark switch automatically
+        bg: 'var(--bg)',
+        surface: 'var(--surface)',
+        'surface-2': 'var(--surface-2)',
+        'surface-3': 'var(--surface-3)',
+        line: 'var(--line)',
+        'line-soft': 'var(--line-soft)',
+        ink: 'var(--ink)',
+        'ink-2': 'var(--ink-2)',
+        'ink-3': 'var(--ink-3)',
+        'ink-4': 'var(--ink-4)',
+        accent: 'var(--accent)',
+        'accent-2': 'var(--accent-2)',
+        'accent-soft': 'var(--accent-soft)',
+        good: 'var(--good)',
+        warn: 'var(--warn)',
+        bad: 'var(--bad)',
+        info: 'var(--info)',
+        violet: 'var(--violet)',
+      },
+      fontFamily: {
+        sans: ['Geist', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
       },
       animation: {
         'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
         'fade-in': 'fadeIn 0.2s ease-out',
         'slide-in': 'slideIn 0.2s ease-out',
+        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
       },
       keyframes: {
         fadeIn: {
@@ -36,6 +61,10 @@ export default {
           '0%': { transform: 'translateX(-10px)', opacity: '0' },
           '100%': { transform: 'translateX(0)', opacity: '1' },
         },
+        glowPulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.4' },
+        },
       },
     },
   },