diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8ee7510..4e28b0b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,7 @@ import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { useEffect, useState } from 'react'
 import { routeTree } from './routeTree.gen'
 import { useAuth } from './lib/auth'
-import { Skeleton } from './components/ui/skeleton'
+import { LoadingText } from './components/ui/skeleton'
 
 const router = createRouter({
   routeTree,
@@ -24,17 +24,13 @@ function AppInner() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Only show skeleton during initial auth check -- NOT on subsequent isLoading changes.
+  // Only show loading text during initial auth check -- NOT on subsequent isLoading changes.
   // Reacting to isLoading here would unmount the entire router tree (including LoginPage)
   // every time an auth action sets isLoading, destroying all component local state.
   if (!hasChecked) {
     return (
       <div className="flex items-center justify-center min-h-screen bg-background">
-        <div className="space-y-4 w-64">
-          <Skeleton className="h-8 w-48 mx-auto" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-        </div>
+        <LoadingText />
       </div>
     )
   }
diff --git a/frontend/src/components/about/AnsiNfoModal.tsx b/frontend/src/components/about/AnsiNfoModal.tsx
index 13c2e78..d3e1bd0 100644
--- a/frontend/src/components/about/AnsiNfoModal.tsx
+++ b/frontend/src/components/about/AnsiNfoModal.tsx
@@ -146,7 +146,7 @@ export function AnsiNfoModal({ open, onOpenChange }: AnsiNfoModalProps) {
         }}
       >
         {/* Retro title bar */}
-        <div className="flex items-center justify-between px-3 pr-10 py-1.5 bg-surface border-b border-border font-mono text-xs">
+        <div className="flex items-center justify-between px-3 pr-10 py-1.5 bg-panel border-b border-border font-mono text-xs">
           <DialogTitle id="ansi-nfo-title" className="text-text-muted text-xs font-normal font-mono">
             TOD.NFO — ACiD View v1.0
           </DialogTitle>
diff --git a/frontend/src/components/alerts/AlertRulesPage.tsx b/frontend/src/components/alerts/AlertRulesPage.tsx
index de9ed5d..39f3a35 100644
--- a/frontend/src/components/alerts/AlertRulesPage.tsx
+++ b/frontend/src/components/alerts/AlertRulesPage.tsx
@@ -698,7 +698,7 @@ export function AlertRulesPage() {
             No alert rules configured.
           </p>
         ) : (
-          <div className="rounded-lg border border-border bg-surface overflow-hidden">
+          <div className="rounded-lg border border-border bg-panel overflow-hidden">
             {/* Header */}
             <div className="flex items-center gap-3 px-4 py-2 border-b border-border text-xs text-text-muted font-medium">
               <span className="flex-1">Name</span>
@@ -710,7 +710,7 @@ export function AlertRulesPage() {
             {rules.map((rule) => (
               <div
                 key={rule.id}
-                className="flex items-center gap-3 px-4 py-2.5 border-b border-border/50 hover:bg-surface text-sm"
+                className="flex items-center gap-3 px-4 py-2.5 border-b border-border/50 hover:bg-panel text-sm"
               >
                 <div className="flex-1 min-w-0">
                   <span className="text-text-primary truncate block">
@@ -809,7 +809,7 @@ export function AlertRulesPage() {
             {channels.map((ch) => (
               <div
                 key={ch.id}
-                className="rounded-lg border border-border bg-surface p-4 space-y-2"
+                className="rounded-lg border border-border bg-panel p-4 space-y-2"
               >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
diff --git a/frontend/src/components/alerts/AlertsPage.tsx b/frontend/src/components/alerts/AlertsPage.tsx
index 657efb5..dece3e7 100644
--- a/frontend/src/components/alerts/AlertsPage.tsx
+++ b/frontend/src/components/alerts/AlertsPage.tsx
@@ -89,7 +89,7 @@ function AlertRow({
     alert.silenced_until && new Date(alert.silenced_until) > new Date()
 
   return (
-    <div className="flex items-center gap-3 px-4 py-3 border-b border-border/50 hover:bg-surface transition-colors">
+    <div className="flex items-center gap-3 px-4 py-3 border-b border-border/50 hover:bg-panel transition-colors">
       <StatusIcon status={alert.status} />
       <SeverityBadge severity={alert.severity} />
 
@@ -271,7 +271,7 @@ export function AlertsPage() {
               description="All clear! No alerts have been triggered."
             />
           ) : (
-            <div className="rounded-lg border border-border bg-surface overflow-hidden">
+            <div className="rounded-lg border border-border bg-panel overflow-hidden">
               {alerts.map((alert) => (
                 <AlertRow
                   key={alert.id}
@@ -302,7 +302,7 @@ export function AlertsPage() {
               description="Alert events will appear here as they are triggered and resolved."
             />
           ) : (
-            <div className="rounded-lg border border-border bg-surface overflow-hidden">
+            <div className="rounded-lg border border-border bg-panel overflow-hidden">
               {/* Table header */}
               <div className="flex items-center gap-3 px-4 py-2 border-b border-border text-[10px] uppercase tracking-wider text-text-muted font-semibold">
                 <span className="w-5" />
@@ -315,7 +315,7 @@ export function AlertsPage() {
               {alerts.map((alert) => (
                 <div
                   key={alert.id}
-                  className="flex items-center gap-3 px-4 py-2.5 border-b border-border/50 hover:bg-surface text-sm"
+                  className="flex items-center gap-3 px-4 py-2.5 border-b border-border/50 hover:bg-panel text-sm"
                 >
                   <StatusIcon status={alert.status} />
                   <span className="w-16">
diff --git a/frontend/src/components/audit/AuditLogTable.tsx b/frontend/src/components/audit/AuditLogTable.tsx
index 0a813fc..a7f842f 100644
--- a/frontend/src/components/audit/AuditLogTable.tsx
+++ b/frontend/src/components/audit/AuditLogTable.tsx
@@ -80,7 +80,7 @@ function actionBadgeClasses(action: string): string {
   if (action.startsWith('device_')) return 'bg-info/10 text-info border-info/20'
   if (action.startsWith('alert_')) return 'bg-warning/10 text-warning border-warning/20'
   if (action === 'login' || action === 'logout') return 'bg-success/10 text-success border-success/20'
-  if (action.startsWith('firmware')) return 'bg-purple-500/10 text-purple-400 border-purple-500/20'
+  if (action.startsWith('firmware')) return 'bg-warning/10 text-warning border-warning/20'
   if (action.startsWith('bulk_')) return 'bg-error/10 text-error border-error/20'
   return 'bg-elevated text-text-secondary border-border'
 }
@@ -143,7 +143,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
           value={actionFilter}
           onChange={(e) => { setActionFilter(e.target.value); setPage(1) }}
           aria-label="Filter by action"
-          className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+          className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
         >
           {ACTION_TYPES.map((a) => (
             <option key={a.value} value={a.value}>
@@ -160,7 +160,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
             value={dateFrom}
             onChange={(e) => { setDateFrom(e.target.value); setPage(1) }}
             aria-label="Filter from date"
-            className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+            className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
           />
         </div>
 
@@ -172,7 +172,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
             value={dateTo}
             onChange={(e) => { setDateTo(e.target.value); setPage(1) }}
             aria-label="Filter to date"
-            className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+            className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
           />
         </div>
 
@@ -185,7 +185,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
             value={userSearch}
             onChange={(e) => setUserSearch(e.target.value)}
             aria-label="Filter by user"
-            className="h-8 rounded-md border border-border bg-surface pl-7 pr-2 text-xs text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent w-40"
+            className="h-8 rounded-md border border-border bg-panel pl-7 pr-2 text-xs text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent w-40"
           />
         </div>
 
@@ -196,7 +196,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
         <button
           onClick={handleExport}
           disabled={exporting || !data?.total}
-          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-elevated hover:text-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-panel px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-elevated hover:text-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           <Download className="h-3.5 w-3.5" />
           {exporting ? 'Exporting...' : 'Export CSV'}
@@ -204,7 +204,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
       </div>
 
       {/* Table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         {isLoading ? (
           <div className="p-8 text-center">
             <div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-accent border-t-transparent" />
@@ -278,7 +278,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
                 setPage(1)
               }}
               aria-label="Rows per page"
-              className="h-7 rounded border border-border bg-surface px-1.5 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+              className="h-7 rounded border border-border bg-panel px-1.5 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
             >
               {PER_PAGE_OPTIONS.map((n) => (
                 <option key={n} value={n}>
diff --git a/frontend/src/components/auth/EmergencyKitDialog.tsx b/frontend/src/components/auth/EmergencyKitDialog.tsx
index 9d12f9e..7df5fcd 100644
--- a/frontend/src/components/auth/EmergencyKitDialog.tsx
+++ b/frontend/src/components/auth/EmergencyKitDialog.tsx
@@ -220,7 +220,7 @@ export function EmergencyKitDialog({
         <div className="flex gap-2">
           <button
             onClick={handleCopy}
-            className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border bg-surface px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-surface-hover"
+            className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border bg-panel px-4 py-2.5 text-sm font-medium text-text-primary transition-colors hover:bg-panel-hover"
           >
             {copied ? (
               <>
@@ -245,7 +245,7 @@ export function EmergencyKitDialog({
         </div>
 
         {/* Instructions */}
-        <div className="mt-3 rounded-md bg-surface-secondary p-3 text-xs text-text-secondary leading-relaxed">
+        <div className="mt-3 rounded-md bg-panel-secondary p-3 text-xs text-text-secondary leading-relaxed">
           The PDF includes your Secret Key. Print it or save it securely.
           You can also store the key in your password manager. Do NOT store it alongside your password.
         </div>
diff --git a/frontend/src/components/auth/SrpUpgradeDialog.tsx b/frontend/src/components/auth/SrpUpgradeDialog.tsx
index 26e456f..1e7287d 100644
--- a/frontend/src/components/auth/SrpUpgradeDialog.tsx
+++ b/frontend/src/components/auth/SrpUpgradeDialog.tsx
@@ -134,7 +134,7 @@ export function SrpUpgradeDialog({
             </div>
           ) : (
             <>
-              <div className="rounded-md bg-surface-secondary p-4 text-sm text-text-secondary leading-relaxed space-y-3">
+              <div className="rounded-md bg-panel-secondary p-4 text-sm text-text-secondary leading-relaxed space-y-3">
                 <p>
                   <strong>What happens:</strong>
                 </p>
diff --git a/frontend/src/components/certificates/BulkDeployDialog.tsx b/frontend/src/components/certificates/BulkDeployDialog.tsx
index 87bd24e..e1fa649 100644
--- a/frontend/src/components/certificates/BulkDeployDialog.tsx
+++ b/frontend/src/components/certificates/BulkDeployDialog.tsx
@@ -275,7 +275,7 @@ export function BulkDeployDialog({
                     'rounded-lg border p-4 text-center',
                     result.failed > 0
                       ? 'border-error/30 bg-error/5'
-                      : 'border-border bg-surface',
+                      : 'border-border bg-panel',
                   )}
                 >
                   <XCircle
diff --git a/frontend/src/components/certificates/CAStatusCard.tsx b/frontend/src/components/certificates/CAStatusCard.tsx
index 82a2621..39c9e0a 100644
--- a/frontend/src/components/certificates/CAStatusCard.tsx
+++ b/frontend/src/components/certificates/CAStatusCard.tsx
@@ -76,7 +76,7 @@ export function CAStatusCard({ ca, canWrite: writable, tenantId }: CAStatusCardP
   if (!ca) {
     return (
       <div className="max-w-lg mx-auto">
-        <div className="rounded-lg border border-border bg-surface p-8 text-center space-y-6">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center space-y-6">
           <div className="mx-auto w-16 h-16 rounded-2xl bg-accent/10 flex items-center justify-center">
             <Shield className="h-8 w-8 text-accent" />
           </div>
@@ -118,7 +118,7 @@ export function CAStatusCard({ ca, canWrite: writable, tenantId }: CAStatusCardP
   return (
     <div
       className={cn(
-        'rounded-lg border bg-surface p-6 space-y-4',
+        'rounded-lg border bg-panel p-6 space-y-4',
         isExpired ? 'border-error/40' : 'border-success/30',
       )}
     >
diff --git a/frontend/src/components/certificates/CertificatesPage.tsx b/frontend/src/components/certificates/CertificatesPage.tsx
index c9b4a80..386039c 100644
--- a/frontend/src/components/certificates/CertificatesPage.tsx
+++ b/frontend/src/components/certificates/CertificatesPage.tsx
@@ -74,7 +74,7 @@ export function CertificatesPage() {
             Certificate Authority
           </h1>
         </div>
-        <TableSkeleton rows={3} />
+        <TableSkeleton />
       </div>
     )
   }
diff --git a/frontend/src/components/certificates/DeviceCertTable.tsx b/frontend/src/components/certificates/DeviceCertTable.tsx
index 02c30d1..f25bca5 100644
--- a/frontend/src/components/certificates/DeviceCertTable.tsx
+++ b/frontend/src/components/certificates/DeviceCertTable.tsx
@@ -189,7 +189,7 @@ export function DeviceCertTable({
   }
 
   if (loading) {
-    return <TableSkeleton rows={4} />
+    return <TableSkeleton />
   }
 
   return (
diff --git a/frontend/src/components/command-palette/CommandPalette.tsx b/frontend/src/components/command-palette/CommandPalette.tsx
index 7cec592..119c3ed 100644
--- a/frontend/src/components/command-palette/CommandPalette.tsx
+++ b/frontend/src/components/command-palette/CommandPalette.tsx
@@ -204,7 +204,7 @@ export function CommandPalette() {
   const visiblePages = pageCommands.filter((p) => p.visible)
 
   const itemClass =
-    'flex items-center gap-3 px-2 py-2 rounded-lg text-sm text-text-secondary cursor-pointer data-[selected=true]:bg-accent-muted data-[selected=true]:text-accent'
+    'flex items-center gap-3 px-2 py-2 rounded-lg text-sm text-text-secondary cursor-pointer data-[selected=true]:bg-accent-soft data-[selected=true]:text-accent'
   const groupHeadingClass =
     '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-text-muted [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider'
 
@@ -216,7 +216,7 @@ export function CommandPalette() {
       overlayClassName="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
       contentClassName="fixed left-1/2 top-[20%] -translate-x-1/2 z-50 w-full max-w-lg"
     >
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center gap-2 px-4 border-b border-border">
           <Search className="h-4 w-4 text-text-muted flex-shrink-0" />
           <Command.Input
diff --git a/frontend/src/components/config-editor/CommandExecutor.tsx b/frontend/src/components/config-editor/CommandExecutor.tsx
index b7fba44..f7e04d9 100644
--- a/frontend/src/components/config-editor/CommandExecutor.tsx
+++ b/frontend/src/components/config-editor/CommandExecutor.tsx
@@ -136,7 +136,7 @@ export function CommandExecutor({ tenantId, deviceId, currentPath }: CommandExec
           {results.length > 0 && (
             <div className="max-h-48 overflow-y-auto space-y-2">
               {results.map((r, i) => (
-                <div key={i} className="bg-surface border-border rounded-md font-mono text-xs p-2 border">
+                <div key={i} className="bg-panel border-border rounded-md font-mono text-xs p-2 border">
                   <div className="flex items-center gap-2 mb-1">
                     <span className="text-[10px] text-text-muted">{r.timestamp}</span>
                     <span className="text-xs font-mono text-text-secondary">{r.command}</span>
diff --git a/frontend/src/components/config-editor/ConfigEditorPage.tsx b/frontend/src/components/config-editor/ConfigEditorPage.tsx
index 9569788..ab7211d 100644
--- a/frontend/src/components/config-editor/ConfigEditorPage.tsx
+++ b/frontend/src/components/config-editor/ConfigEditorPage.tsx
@@ -325,7 +325,7 @@ export function ConfigEditorPage() {
 
       {/* Delete Confirmation Dialog */}
       <Dialog open={deleteConfirmOpen} onOpenChange={(o) => !o && setDeleteConfirmOpen(false)}>
-        <DialogContent className="max-w-sm bg-surface border-border text-text-primary">
+        <DialogContent className="max-w-sm bg-panel border-border text-text-primary">
           <DialogHeader>
             <DialogTitle className="text-sm">Confirm Delete</DialogTitle>
           </DialogHeader>
diff --git a/frontend/src/components/config-editor/EntryForm.tsx b/frontend/src/components/config-editor/EntryForm.tsx
index 9f7b0b5..464cab1 100644
--- a/frontend/src/components/config-editor/EntryForm.tsx
+++ b/frontend/src/components/config-editor/EntryForm.tsx
@@ -143,7 +143,7 @@ export function EntryForm({ open, onClose, mode, entry, columns, onSubmit }: Ent
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto bg-surface border-border text-text-primary">
+      <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto bg-panel border-border text-text-primary">
         <DialogHeader>
           <DialogTitle className="text-sm">
             {mode === 'add' ? 'Add New Entry' : 'Edit Entry'}
diff --git a/frontend/src/components/config-editor/EntryTable.tsx b/frontend/src/components/config-editor/EntryTable.tsx
index efe4d91..7e72629 100644
--- a/frontend/src/components/config-editor/EntryTable.tsx
+++ b/frontend/src/components/config-editor/EntryTable.tsx
@@ -42,7 +42,7 @@ export function EntryTable({
         className={cn(
           'rounded-lg border p-4 text-sm',
           isContainerPath
-            ? 'border-border bg-surface text-text-secondary'
+            ? 'border-border bg-panel text-text-secondary'
             : 'border-error/30 bg-error/10 text-error',
         )}
       >
@@ -64,14 +64,8 @@ export function EntryTable({
 
   if (isLoading) {
     return (
-      <div className="space-y-2">
-        <div className="flex items-center justify-between mb-3">
-          <div className="h-5 w-48 bg-elevated/50 rounded animate-pulse" />
-          <div className="h-8 w-24 bg-elevated/50 rounded animate-pulse" />
-        </div>
-        {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="h-10 bg-surface rounded animate-pulse" />
-        ))}
+      <div className="py-8 text-center">
+        <span className="text-[9px] text-text-muted">Loading&hellip;</span>
       </div>
     )
   }
@@ -128,7 +122,7 @@ export function EntryTable({
                 <tr
                   key={entry['.id'] || i}
                   className={cn(
-                    'border-b border-border/50 hover:bg-surface transition-colors',
+                    'border-b border-border/50 hover:bg-panel transition-colors',
                     entry['dynamic'] === 'true' && 'text-text-muted',
                   )}
                 >
diff --git a/frontend/src/components/config-editor/MenuTree.tsx b/frontend/src/components/config-editor/MenuTree.tsx
index b1b21b5..f0bc924 100644
--- a/frontend/src/components/config-editor/MenuTree.tsx
+++ b/frontend/src/components/config-editor/MenuTree.tsx
@@ -265,7 +265,7 @@ function TreeItem({
         className={cn(
           'flex items-center gap-1.5 w-full px-2 py-1 text-xs rounded transition-colors',
           isActive
-            ? 'bg-[hsl(var(--accent-muted))] text-accent'
+            ? 'bg-[hsl(var(--accent-soft))] text-accent'
             : 'text-text-secondary hover:text-text-primary hover:bg-elevated/50',
         )}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
diff --git a/frontend/src/components/config/AddressListPanel.tsx b/frontend/src/components/config/AddressListPanel.tsx
index 147f636..b95cef3 100644
--- a/frontend/src/components/config/AddressListPanel.tsx
+++ b/frontend/src/components/config/AddressListPanel.tsx
@@ -145,7 +145,7 @@ export function AddressListPanel({ tenantId, deviceId, active }: ConfigPanelProp
         </Button>
       </div>
 
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <List className="h-4 w-4" />
diff --git a/frontend/src/components/config/AddressPanel.tsx b/frontend/src/components/config/AddressPanel.tsx
index 90072f5..aad49d2 100644
--- a/frontend/src/components/config/AddressPanel.tsx
+++ b/frontend/src/components/config/AddressPanel.tsx
@@ -282,7 +282,7 @@ function AddressTable({
   return (
     <>
       {/* Table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Network className="h-4 w-4" />
diff --git a/frontend/src/components/config/ArpPanel.tsx b/frontend/src/components/config/ArpPanel.tsx
index 442e799..b54ff46 100644
--- a/frontend/src/components/config/ArpPanel.tsx
+++ b/frontend/src/components/config/ArpPanel.tsx
@@ -193,8 +193,8 @@ export function ArpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
               className={cn(
                 'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
                 filterTab === tab.key
-                  ? 'bg-surface text-text-primary shadow-sm'
-                  : 'text-text-secondary hover:text-text-primary hover:bg-surface/50',
+                  ? 'bg-panel text-text-primary shadow-sm'
+                  : 'text-text-secondary hover:text-text-primary hover:bg-panel/50',
               )}
             >
               {tab.label}
@@ -290,7 +290,7 @@ function ArpTable({
   return (
     <>
       {/* Table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Network className="h-4 w-4" />
diff --git a/frontend/src/components/config/BandwidthTestTool.tsx b/frontend/src/components/config/BandwidthTestTool.tsx
index c055062..61ed058 100644
--- a/frontend/src/components/config/BandwidthTestTool.tsx
+++ b/frontend/src/components/config/BandwidthTestTool.tsx
@@ -82,7 +82,7 @@ export function BandwidthTestTool({ tenantId, deviceId }: ConfigPanelProps) {
 
   return (
     <div className="space-y-4">
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
           <div className="space-y-1 col-span-2 sm:col-span-1">
             <Label className="text-xs text-text-secondary">Target Address</Label>
@@ -99,7 +99,7 @@ export function BandwidthTestTool({ tenantId, deviceId }: ConfigPanelProps) {
             <select
               value={direction}
               onChange={(e) => setDirection(e.target.value)}
-              className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+              className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
             >
               <option value="both">Both</option>
               <option value="send">Send</option>
@@ -111,7 +111,7 @@ export function BandwidthTestTool({ tenantId, deviceId }: ConfigPanelProps) {
             <select
               value={protocol}
               onChange={(e) => setProtocol(e.target.value)}
-              className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+              className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
             >
               <option value="tcp">TCP</option>
               <option value="udp">UDP</option>
@@ -170,7 +170,7 @@ export function BandwidthTestTool({ tenantId, deviceId }: ConfigPanelProps) {
       )}
 
       {results.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <div className="px-4 py-2 border-b border-border/50 flex items-center gap-2">
             <Gauge className="h-4 w-4 text-accent" />
             <span className="text-sm font-medium text-text-secondary">Bandwidth Test Results</span>
diff --git a/frontend/src/components/config/BatchConfigPanel.tsx b/frontend/src/components/config/BatchConfigPanel.tsx
index f0136e1..649dfe2 100644
--- a/frontend/src/components/config/BatchConfigPanel.tsx
+++ b/frontend/src/components/config/BatchConfigPanel.tsx
@@ -180,11 +180,11 @@ function DeviceSelector({
     onSelectionChange(new Set())
   }
 
-  if (isLoading) return <TableSkeleton rows={5} />
+  if (isLoading) return <TableSkeleton />
 
   if (devices.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-8 text-center">
+      <div className="rounded-lg border border-border bg-panel p-8 text-center">
         <p className="text-text-muted text-sm">No devices found for this tenant.</p>
       </div>
     )
@@ -208,7 +208,7 @@ function DeviceSelector({
         </div>
       </div>
 
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-border bg-elevated/50">
@@ -327,7 +327,7 @@ function ChangeDefiner({
       </div>
 
       {operationType && (
-        <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+        <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
           {operationType === 'add-firewall-rule' && (
             <>
               <h4 className="text-sm font-medium text-text-secondary">Firewall Rule</h4>
@@ -605,7 +605,7 @@ function ExecutionPanel({
   return (
     <div className="space-y-4">
       {/* Change description */}
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <h4 className="text-sm font-medium text-text-secondary mb-1">Change to Apply</h4>
         <p className="text-sm text-text-primary">{change.description}</p>
         <p className="text-xs text-text-muted mt-1 font-mono">
@@ -626,7 +626,7 @@ function ExecutionPanel({
 
       {/* Summary */}
       {isComplete && (
-        <div className="rounded-lg border border-border bg-surface p-4 flex items-center gap-4">
+        <div className="rounded-lg border border-border bg-panel p-4 flex items-center gap-4">
           <div className="flex items-center gap-2 text-success">
             <CheckCircle className="h-5 w-5" />
             <span className="text-sm font-medium">{successCount} succeeded</span>
@@ -641,7 +641,7 @@ function ExecutionPanel({
       )}
 
       {/* Device status table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-border bg-elevated/50">
diff --git a/frontend/src/components/config/BridgePortPanel.tsx b/frontend/src/components/config/BridgePortPanel.tsx
index 9c8f3bc..2f2bf61 100644
--- a/frontend/src/components/config/BridgePortPanel.tsx
+++ b/frontend/src/components/config/BridgePortPanel.tsx
@@ -138,11 +138,11 @@ export function BridgePortPanel({ tenantId, deviceId, active }: ConfigPanelProps
       </div>
 
       {ports.entries.length === 0 ? (
-        <div className="rounded-lg border border-border bg-surface p-6 text-center text-sm text-text-muted">
+        <div className="rounded-lg border border-border bg-panel p-6 text-center text-sm text-text-muted">
           No bridge ports configured.
         </div>
       ) : (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-xs">
               <thead>
@@ -212,7 +212,7 @@ export function BridgePortPanel({ tenantId, deviceId, active }: ConfigPanelProps
                 <select
                   value={formData['interface'] || ''}
                   onChange={(e) => setFormData((f) => ({ ...f, interface: e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary font-mono"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary font-mono"
                 >
                   <option value="">Select...</option>
                   {ifaceNames.map((name) => <option key={name} value={name}>{name}</option>)}
@@ -223,7 +223,7 @@ export function BridgePortPanel({ tenantId, deviceId, active }: ConfigPanelProps
                 <select
                   value={formData['bridge'] || ''}
                   onChange={(e) => setFormData((f) => ({ ...f, bridge: e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary font-mono"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary font-mono"
                 >
                   {bridgeNames.map((name) => <option key={name} value={name}>{name}</option>)}
                 </select>
@@ -243,7 +243,7 @@ export function BridgePortPanel({ tenantId, deviceId, active }: ConfigPanelProps
                 <select
                   value={formData['frame-types'] || 'admit-all'}
                   onChange={(e) => setFormData((f) => ({ ...f, 'frame-types': e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
                 >
                   {FRAME_TYPES.map((ft) => <option key={ft} value={ft}>{ft}</option>)}
                 </select>
@@ -253,7 +253,7 @@ export function BridgePortPanel({ tenantId, deviceId, active }: ConfigPanelProps
                 <select
                   value={formData['ingress-filtering'] || 'no'}
                   onChange={(e) => setFormData((f) => ({ ...f, 'ingress-filtering': e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
                 >
                   <option value="yes">Yes</option>
                   <option value="no">No</option>
@@ -264,7 +264,7 @@ export function BridgePortPanel({ tenantId, deviceId, active }: ConfigPanelProps
                 <select
                   value={formData['hw'] || 'yes'}
                   onChange={(e) => setFormData((f) => ({ ...f, hw: e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
                 >
                   <option value="yes">Yes</option>
                   <option value="no">No</option>
@@ -297,7 +297,7 @@ export function BridgePortPanel({ tenantId, deviceId, active }: ConfigPanelProps
                 <select
                   value={formData['edge'] || 'auto'}
                   onChange={(e) => setFormData((f) => ({ ...f, edge: e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
                 >
                   <option value="auto">Auto</option>
                   <option value="yes">Yes</option>
diff --git a/frontend/src/components/config/BridgeVlanPanel.tsx b/frontend/src/components/config/BridgeVlanPanel.tsx
index bb1c465..9da0e40 100644
--- a/frontend/src/components/config/BridgeVlanPanel.tsx
+++ b/frontend/src/components/config/BridgeVlanPanel.tsx
@@ -140,7 +140,7 @@ export function BridgeVlanPanel({ tenantId, deviceId, active }: ConfigPanelProps
 
       {/* VLAN Filtering status per bridge */}
       {bridges.entries.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface p-3">
+        <div className="rounded-lg border border-border bg-panel p-3">
           <div className="flex items-center gap-2 mb-2">
             <Network className="h-4 w-4 text-accent" />
             <span className="text-sm font-medium text-text-secondary">Bridge VLAN Filtering</span>
@@ -170,11 +170,11 @@ export function BridgeVlanPanel({ tenantId, deviceId, active }: ConfigPanelProps
 
       {/* VLAN Table */}
       {vlans.entries.length === 0 ? (
-        <div className="rounded-lg border border-border bg-surface p-6 text-center text-sm text-text-muted">
+        <div className="rounded-lg border border-border bg-panel p-6 text-center text-sm text-text-muted">
           No bridge VLAN entries configured.
         </div>
       ) : (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-xs">
               <thead>
@@ -247,7 +247,7 @@ export function BridgeVlanPanel({ tenantId, deviceId, active }: ConfigPanelProps
                 <select
                   value={formData['bridge'] || ''}
                   onChange={(e) => setFormData((f) => ({ ...f, bridge: e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary font-mono"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary font-mono"
                 >
                   {bridgeNames.map((name) => <option key={name} value={name}>{name}</option>)}
                 </select>
diff --git a/frontend/src/components/config/ConfigDiffViewer.tsx b/frontend/src/components/config/ConfigDiffViewer.tsx
index 8bfc1cb..17d016a 100644
--- a/frontend/src/components/config/ConfigDiffViewer.tsx
+++ b/frontend/src/components/config/ConfigDiffViewer.tsx
@@ -81,9 +81,9 @@ export function ConfigDiffViewer({
   const isLoading = loadingOld || loadingNew
 
   return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
+    <div className="rounded-lg border border-border bg-panel overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2.5 border-b border-border bg-surface">
+      <div className="flex items-center justify-between px-4 py-2.5 border-b border-border bg-panel">
         <div className="flex items-center gap-2 text-xs text-text-muted">
           {isEncrypted && (
             <span className="inline-flex items-center gap-1 text-info" title="Decrypted from encrypted backup">
@@ -126,8 +126,8 @@ export function ConfigDiffViewer({
 
       {/* Diff content */}
       {isLoading ? (
-        <div className="p-8 text-center text-sm text-text-muted animate-pulse">
-          Loading diff...
+        <div className="py-8 text-center">
+          <span className="text-[9px] text-text-muted">Loading&hellip;</span>
         </div>
       ) : !diffFile ? (
         <div className="p-8 text-center text-sm text-text-muted">
diff --git a/frontend/src/components/config/ConfigHistorySection.tsx b/frontend/src/components/config/ConfigHistorySection.tsx
index 2c4e1de..ce0fc6b 100644
--- a/frontend/src/components/config/ConfigHistorySection.tsx
+++ b/frontend/src/components/config/ConfigHistorySection.tsx
@@ -65,7 +65,7 @@ export function ConfigHistorySection({ tenantId, deviceId, deviceName }: ConfigH
   })
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-4">
+    <div className="rounded-lg border border-border bg-panel p-4">
       <div className="flex items-center gap-2 mb-3">
         <History className="h-4 w-4 text-text-muted" />
         <h3 className="text-sm font-medium text-text-muted">Configuration History</h3>
@@ -83,7 +83,7 @@ export function ConfigHistorySection({ tenantId, deviceId, deviceName }: ConfigH
       )}
 
       {isLoading ? (
-        <TableSkeleton rows={3} />
+        <TableSkeleton />
       ) : !changes || changes.length === 0 ? (
         <div className="flex items-center justify-center py-6">
           <span className="text-xs text-text-muted">No configuration changes recorded yet.</span>
diff --git a/frontend/src/components/config/ConfigTab.tsx b/frontend/src/components/config/ConfigTab.tsx
index 3fdc853..7b86620 100644
--- a/frontend/src/components/config/ConfigTab.tsx
+++ b/frontend/src/components/config/ConfigTab.tsx
@@ -158,16 +158,11 @@ export function ConfigTab({
         {/* Timeline panel */}
         <div className="w-72 flex-shrink-0">
           {isLoading ? (
-            <div className="space-y-2">
-              {[0, 1, 2].map((i) => (
-                <div
-                  key={i}
-                  className="h-14 rounded-lg border border-border bg-surface animate-pulse"
-                />
-              ))}
+            <div className="py-8 text-center">
+              <span className="text-[9px] text-text-muted">Loading&hellip;</span>
             </div>
           ) : !backups || backups.length === 0 ? (
-            <div className="rounded-lg border border-border bg-surface p-6 text-center text-sm text-text-muted">
+            <div className="rounded-lg border border-border bg-panel p-6 text-center text-sm text-text-muted">
               No backups yet. Click &lsquo;Backup Now&rsquo; to create the first backup.
             </div>
           ) : (
@@ -201,7 +196,7 @@ export function ConfigTab({
               }
             />
           ) : (
-            <div className="rounded-lg border border-border bg-surface p-8 text-center text-sm text-text-muted h-full flex items-center justify-center min-h-32">
+            <div className="rounded-lg border border-border bg-panel p-8 text-center text-sm text-text-muted h-full flex items-center justify-center min-h-32">
               {selectedShas.length < 2
                 ? 'Select two backups from the timeline to compare'
                 : 'Click "Compare selected" to view the diff'}
diff --git a/frontend/src/components/config/ConnTrackPanel.tsx b/frontend/src/components/config/ConnTrackPanel.tsx
index 159e5f6..6e75d9a 100644
--- a/frontend/src/components/config/ConnTrackPanel.tsx
+++ b/frontend/src/components/config/ConnTrackPanel.tsx
@@ -104,7 +104,7 @@ export function ConnTrackPanel({ tenantId, deviceId, active }: ConfigPanelProps)
       </div>
 
       {/* Active connections count */}
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <div className="flex items-center gap-3">
           <Activity className="h-5 w-5 text-accent" />
           <div>
@@ -120,7 +120,7 @@ export function ConnTrackPanel({ tenantId, deviceId, active }: ConfigPanelProps)
       </div>
 
       {/* Tracking settings */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">Connection Tracking Settings</span>
           <Button size="sm" variant="outline" className="gap-1" onClick={handleEdit}>
@@ -154,7 +154,7 @@ export function ConnTrackPanel({ tenantId, deviceId, active }: ConfigPanelProps)
                 <select
                   value={formData['enabled'] || 'auto'}
                   onChange={(e) => setFormData((f) => ({ ...f, enabled: e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
                 >
                   <option value="auto">Auto</option>
                   <option value="yes">Yes</option>
diff --git a/frontend/src/components/config/DhcpClientPanel.tsx b/frontend/src/components/config/DhcpClientPanel.tsx
index 95ca2db..d2ea949 100644
--- a/frontend/src/components/config/DhcpClientPanel.tsx
+++ b/frontend/src/components/config/DhcpClientPanel.tsx
@@ -206,7 +206,7 @@ export function DhcpClientPanel({ tenantId, deviceId, active }: ConfigPanelProps
       </div>
 
       {/* DHCP Client table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Globe className="h-4 w-4" />
diff --git a/frontend/src/components/config/DhcpPanel.tsx b/frontend/src/components/config/DhcpPanel.tsx
index 9f0cf47..4f5ed96 100644
--- a/frontend/src/components/config/DhcpPanel.tsx
+++ b/frontend/src/components/config/DhcpPanel.tsx
@@ -240,8 +240,8 @@ export function DhcpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
             className={cn(
               'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
               activeTab === tab.key
-                ? 'bg-surface text-text-primary shadow-sm'
-                : 'text-text-secondary hover:text-text-primary hover:bg-surface/50',
+                ? 'bg-panel text-text-primary shadow-sm'
+                : 'text-text-secondary hover:text-text-primary hover:bg-panel/50',
             )}
           >
             {tab.icon}
@@ -400,7 +400,7 @@ function ServersTab({
   }, [form, editing, panel])
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+    <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-text-primary">DHCP Servers</h3>
         <Button variant="outline" size="sm" onClick={handleAdd} className="gap-1.5">
@@ -651,7 +651,7 @@ function PoolsTab({
   }, [form, editing, panel])
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+    <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-text-primary">Address Pools</h3>
         <Button variant="outline" size="sm" onClick={handleAdd} className="gap-1.5">
@@ -860,7 +860,7 @@ function LeasesTab({
   }
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+    <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-text-primary">DHCP Leases</h3>
         <Button variant="outline" size="sm" onClick={handleAddStatic} className="gap-1.5">
@@ -1112,7 +1112,7 @@ function NetworksTab({
   }, [form, editing, panel])
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+    <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="text-sm font-medium text-text-primary">DHCP Networks</h3>
         <Button variant="outline" size="sm" onClick={handleAdd} className="gap-1.5">
diff --git a/frontend/src/components/config/DiffViewer.tsx b/frontend/src/components/config/DiffViewer.tsx
index e9e79b8..e8f51dd 100644
--- a/frontend/src/components/config/DiffViewer.tsx
+++ b/frontend/src/components/config/DiffViewer.tsx
@@ -10,10 +10,10 @@ interface DiffViewerProps {
 }
 
 function classifyLine(line: string): string {
-  if (line.startsWith('@@')) return 'bg-blue-900/20 text-blue-300'
+  if (line.startsWith('@@')) return 'bg-info/10 text-info'
   if (line.startsWith('+++') || line.startsWith('---')) return 'text-text-muted'
-  if (line.startsWith('+')) return 'bg-green-900/30 text-green-300'
-  if (line.startsWith('-')) return 'bg-red-900/30 text-red-300'
+  if (line.startsWith('+')) return 'bg-success/10 text-success'
+  if (line.startsWith('-')) return 'bg-error/10 text-error'
   return 'text-text-primary'
 }
 
@@ -24,7 +24,7 @@ export function DiffViewer({ tenantId, deviceId, snapshotId, onClose }: DiffView
   })
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-4">
+    <div className="rounded-lg border border-border bg-panel p-4">
       {/* Header */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-3">
@@ -47,10 +47,8 @@ export function DiffViewer({ tenantId, deviceId, snapshotId, onClose }: DiffView
 
       {/* Content */}
       {isLoading ? (
-        <div className="space-y-2">
-          {[75, 90, 65, 85, 70, 80].map((w, i) => (
-            <div key={i} className="h-4 bg-elevated rounded animate-pulse" style={{ width: `${w}%` }} />
-          ))}
+        <div className="py-8 text-center">
+          <span className="text-[9px] text-text-muted">Loading&hellip;</span>
         </div>
       ) : isError || !diff ? (
         <div className="flex items-center justify-center py-6">
diff --git a/frontend/src/components/config/DnsPanel.tsx b/frontend/src/components/config/DnsPanel.tsx
index 2fc53db..d54af71 100644
--- a/frontend/src/components/config/DnsPanel.tsx
+++ b/frontend/src/components/config/DnsPanel.tsx
@@ -302,7 +302,7 @@ export function DnsPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
       </div>
 
       {/* Section 1: Resolver Settings */}
-      <div className="rounded-lg border border-border bg-surface p-4 space-y-4">
+      <div className="rounded-lg border border-border bg-panel p-4 space-y-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Server className="h-4 w-4 text-accent" />
@@ -393,7 +393,7 @@ export function DnsPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
       </div>
 
       {/* Section 2: Static DNS Entries */}
-      <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+      <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Globe className="h-4 w-4 text-accent" />
diff --git a/frontend/src/components/config/FirewallPanel.tsx b/frontend/src/components/config/FirewallPanel.tsx
index c965478..7b87341 100644
--- a/frontend/src/components/config/FirewallPanel.tsx
+++ b/frontend/src/components/config/FirewallPanel.tsx
@@ -23,7 +23,7 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import {
   Dialog,
   DialogContent,
@@ -643,7 +643,7 @@ function FilterRulesTable({
         </Button>
       </div>
 
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
@@ -836,7 +836,7 @@ function NatRulesTable({
         </Button>
       </div>
 
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead>
@@ -1340,16 +1340,10 @@ function CellEmpty() {
 
 function LoadingRows({ cols }: { cols: number }) {
   return (
-    <>
-      {Array.from({ length: 5 }).map((_, i) => (
-        <tr key={i} className="border-b border-border/50">
-          {Array.from({ length: cols }).map((_, j) => (
-            <td key={j} className="px-3 py-2">
-              <Skeleton className="h-4 w-full" />
-            </td>
-          ))}
-        </tr>
-      ))}
-    </>
+    <tr>
+      <td colSpan={cols} className="py-8 text-center">
+        <LoadingText />
+      </td>
+    </tr>
   )
 }
diff --git a/frontend/src/components/config/InterfacesPanel.tsx b/frontend/src/components/config/InterfacesPanel.tsx
index af57409..969bceb 100644
--- a/frontend/src/components/config/InterfacesPanel.tsx
+++ b/frontend/src/components/config/InterfacesPanel.tsx
@@ -24,7 +24,7 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import {
   Select,
   SelectContent,
@@ -71,14 +71,14 @@ const SUB_TABS: { key: SubTab; label: string; icon: React.ElementType }[] = [
 // ---------------------------------------------------------------------------
 
 const TYPE_COLORS: Record<string, string> = {
-  ether: '#3B82F6',
-  bridge: '#8B5CF6',
-  vlan: '#F59E0B',
-  bonding: '#10B981',
-  pppoe: '#EF4444',
-  l2tp: '#EC4899',
-  ovpn: '#06B6D4',
-  wlan: '#84CC16',
+  ether: 'hsl(var(--accent))',
+  bridge: 'hsl(var(--info))',
+  vlan: 'hsl(var(--warning))',
+  bonding: 'hsl(var(--success))',
+  pppoe: 'hsl(var(--error))',
+  l2tp: 'hsl(var(--error))',
+  ovpn: 'hsl(var(--info))',
+  wlan: 'hsl(var(--success))',
 }
 
 // ---------------------------------------------------------------------------
@@ -228,23 +228,13 @@ export function InterfacesPanel({ tenantId, deviceId, active }: ConfigPanelProps
 }
 
 // ---------------------------------------------------------------------------
-// Loading skeleton
+// Loading state
 // ---------------------------------------------------------------------------
 
-function TableSkeleton({ rows = 5 }: { rows?: number }) {
+function TableLoading() {
   return (
-    <div className="rounded-lg border border-border bg-surface">
-      <div className="p-3 border-b border-border">
-        <Skeleton className="h-4 w-32" />
-      </div>
-      {Array.from({ length: rows }).map((_, i) => (
-        <div key={i} className="flex items-center gap-4 p-3 border-b border-border last:border-0">
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-4 w-16" />
-          <Skeleton className="h-4 w-20" />
-          <Skeleton className="h-4 w-12" />
-        </div>
-      ))}
+    <div className="py-8 text-center">
+      <LoadingText />
     </div>
   )
 }
@@ -260,18 +250,18 @@ function InterfacesTable({
   entries: Record<string, string>[]
   isLoading: boolean
 }) {
-  if (isLoading) return <TableSkeleton />
+  if (isLoading) return <TableLoading />
 
   if (entries.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-8 text-center text-text-secondary text-sm">
+      <div className="rounded-lg border border-border bg-panel p-8 text-center text-text-secondary text-sm">
         No interfaces found on this device.
       </div>
     )
   }
 
   return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
+    <div className="rounded-lg border border-border bg-panel overflow-hidden">
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-border bg-elevated/30">
@@ -362,7 +352,7 @@ function IpAddressesTab({ entries, isLoading, interfaceNames, addChange }: IpAdd
     })
   }
 
-  if (isLoading) return <TableSkeleton />
+  if (isLoading) return <TableLoading />
 
   return (
     <div className="space-y-3">
@@ -374,11 +364,11 @@ function IpAddressesTab({ entries, isLoading, interfaceNames, addChange }: IpAdd
       </div>
 
       {entries.length === 0 ? (
-        <div className="rounded-lg border border-border bg-surface p-8 text-center text-text-secondary text-sm">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center text-text-secondary text-sm">
           No IP addresses configured.
         </div>
       ) : (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border bg-elevated/30">
@@ -621,7 +611,7 @@ function VlansTab({ entries, isLoading, interfaceNames, addChange }: VlansTabPro
     })
   }
 
-  if (isLoading) return <TableSkeleton />
+  if (isLoading) return <TableLoading />
 
   return (
     <div className="space-y-3">
@@ -633,11 +623,11 @@ function VlansTab({ entries, isLoading, interfaceNames, addChange }: VlansTabPro
       </div>
 
       {entries.length === 0 ? (
-        <div className="rounded-lg border border-border bg-surface p-8 text-center text-text-secondary text-sm">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center text-text-secondary text-sm">
           No VLANs configured.
         </div>
       ) : (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border bg-elevated/30">
@@ -926,7 +916,7 @@ function BridgesTab({
     })
   }
 
-  if (isLoading) return <TableSkeleton />
+  if (isLoading) return <TableLoading />
 
   return (
     <div className="space-y-6">
@@ -941,11 +931,11 @@ function BridgesTab({
         </div>
 
         {bridges.length === 0 ? (
-          <div className="rounded-lg border border-border bg-surface p-6 text-center text-text-secondary text-sm">
+          <div className="rounded-lg border border-border bg-panel p-6 text-center text-text-secondary text-sm">
             No bridges configured.
           </div>
         ) : (
-          <div className="rounded-lg border border-border bg-surface overflow-hidden">
+          <div className="rounded-lg border border-border bg-panel overflow-hidden">
             <table className="w-full text-sm">
               <thead>
                 <tr className="border-b border-border bg-elevated/30">
@@ -1015,11 +1005,11 @@ function BridgesTab({
         </div>
 
         {bridgePorts.length === 0 ? (
-          <div className="rounded-lg border border-border bg-surface p-6 text-center text-text-secondary text-sm">
+          <div className="rounded-lg border border-border bg-panel p-6 text-center text-text-secondary text-sm">
             No bridge ports configured.
           </div>
         ) : (
-          <div className="rounded-lg border border-border bg-surface overflow-hidden">
+          <div className="rounded-lg border border-border bg-panel overflow-hidden">
             <table className="w-full text-sm">
               <thead>
                 <tr className="border-b border-border bg-elevated/30">
diff --git a/frontend/src/components/config/IpsecPanel.tsx b/frontend/src/components/config/IpsecPanel.tsx
index f4525a3..34e2223 100644
--- a/frontend/src/components/config/IpsecPanel.tsx
+++ b/frontend/src/components/config/IpsecPanel.tsx
@@ -87,7 +87,7 @@ export function IpsecPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
         {SUB_TABS.map((tab) => (
           <button key={tab.key} onClick={() => setActiveTab(tab.key)}
             className={cn('flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
-              activeTab === tab.key ? 'bg-surface text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary hover:bg-surface/50')}>
+              activeTab === tab.key ? 'bg-panel text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary hover:bg-panel/50')}>
             {tab.icon}{tab.label}
           </button>
         ))}
@@ -147,11 +147,11 @@ function PeersTab({ entries, panel }: { entries: PeerEntry[]; panel: PanelHook }
           <div className="space-y-1"><Label className="text-xs text-text-secondary">Address</Label><Input value={form.address} onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))} placeholder="0.0.0.0/0" className="h-8 text-sm font-mono" /></div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1"><Label className="text-xs text-text-secondary">Auth Method</Label>
-              <select value={form['auth-method']} onChange={(e) => setForm((f) => ({ ...f, 'auth-method': e.target.value }))} className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary">
+              <select value={form['auth-method']} onChange={(e) => setForm((f) => ({ ...f, 'auth-method': e.target.value }))} className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary">
                 <option value="pre-shared-key">Pre-Shared Key</option><option value="rsa-key">RSA Key</option><option value="rsa-signature">RSA Signature</option>
               </select></div>
             <div className="space-y-1"><Label className="text-xs text-text-secondary">Exchange Mode</Label>
-              <select value={form['exchange-mode']} onChange={(e) => setForm((f) => ({ ...f, 'exchange-mode': e.target.value }))} className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary">
+              <select value={form['exchange-mode']} onChange={(e) => setForm((f) => ({ ...f, 'exchange-mode': e.target.value }))} className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary">
                 <option value="main">Main</option><option value="aggressive">Aggressive</option><option value="ike2">IKEv2</option>
               </select></div>
           </div>
@@ -208,8 +208,8 @@ function PoliciesTab({ entries, panel }: { entries: PolicyEntry[]; panel: PanelH
             <div className="space-y-1"><Label className="text-xs text-text-secondary">Dst Address</Label><Input value={form['dst-address']} onChange={(e) => setForm((f) => ({ ...f, 'dst-address': e.target.value }))} placeholder="10.0.0.0/24" className="h-8 text-sm font-mono" /></div>
           </div>
           <div className="grid grid-cols-3 gap-3">
-            <div className="space-y-1"><Label className="text-xs text-text-secondary">Tunnel</Label><select value={form.tunnel} onChange={(e) => setForm((f) => ({ ...f, tunnel: e.target.value }))} className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"><option value="yes">Yes</option><option value="no">No</option></select></div>
-            <div className="space-y-1"><Label className="text-xs text-text-secondary">Action</Label><select value={form.action} onChange={(e) => setForm((f) => ({ ...f, action: e.target.value }))} className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"><option value="encrypt">Encrypt</option><option value="none">None</option></select></div>
+            <div className="space-y-1"><Label className="text-xs text-text-secondary">Tunnel</Label><select value={form.tunnel} onChange={(e) => setForm((f) => ({ ...f, tunnel: e.target.value }))} className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"><option value="yes">Yes</option><option value="no">No</option></select></div>
+            <div className="space-y-1"><Label className="text-xs text-text-secondary">Action</Label><select value={form.action} onChange={(e) => setForm((f) => ({ ...f, action: e.target.value }))} className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"><option value="encrypt">Encrypt</option><option value="none">None</option></select></div>
             <div className="space-y-1"><Label className="text-xs text-text-secondary">Proposal</Label><Input value={form.proposal} onChange={(e) => setForm((f) => ({ ...f, proposal: e.target.value }))} className="h-8 text-sm" /></div>
           </div>
         </div>
@@ -275,7 +275,7 @@ function ProposalsTab({ entries, panel }: { entries: ProposalEntry[]; panel: Pan
 
 function SasTab({ entries }: { entries: SaEntry[] }) {
   return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
+    <div className="rounded-lg border border-border bg-panel overflow-hidden">
       <div className="px-4 py-2 border-b border-border/50"><span className="text-sm font-medium text-text-secondary">Installed SAs ({entries.length})</span></div>
       {entries.length === 0 ? <div className="px-4 py-8 text-center text-sm text-text-muted">No active security associations.</div> : (
         <div className="overflow-x-auto"><table className="w-full text-sm"><thead><tr className="border-b border-border/50 text-text-secondary text-xs">
@@ -301,7 +301,7 @@ function SasTab({ entries }: { entries: SaEntry[] }) {
 
 function TableWrapper({ title, count, onAdd, children }: { title: string; count: number; onAdd: () => void; children: React.ReactNode }) {
   return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
+    <div className="rounded-lg border border-border bg-panel overflow-hidden">
       <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
         <span className="text-sm font-medium text-text-secondary">{title} ({count})</span>
         <Button size="sm" variant="outline" className="gap-1" onClick={onAdd}><Plus className="h-3.5 w-3.5" />Add</Button>
diff --git a/frontend/src/components/config/ManglePanel.tsx b/frontend/src/components/config/ManglePanel.tsx
index fd11f9d..b97d5a1 100644
--- a/frontend/src/components/config/ManglePanel.tsx
+++ b/frontend/src/components/config/ManglePanel.tsx
@@ -127,7 +127,7 @@ export function ManglePanel({ tenantId, deviceId, active }: ConfigPanelProps) {
             onClick={() => setChainFilter(chain)}
             className={cn(
               'px-3 py-1.5 rounded-md text-sm font-medium transition-colors capitalize',
-              chainFilter === chain ? 'bg-surface text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary hover:bg-surface/50',
+              chainFilter === chain ? 'bg-panel text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary hover:bg-panel/50',
             )}
           >
             {chain}
@@ -193,7 +193,7 @@ function MangleTable({ entries, panel }: { entries: MangleEntry[]; panel: PanelH
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Filter className="h-4 w-4" />
diff --git a/frontend/src/components/config/PingTool.tsx b/frontend/src/components/config/PingTool.tsx
index f3621a3..40eab89 100644
--- a/frontend/src/components/config/PingTool.tsx
+++ b/frontend/src/components/config/PingTool.tsx
@@ -90,7 +90,7 @@ export function PingTool({ tenantId, deviceId }: ConfigPanelProps) {
   return (
     <div className="space-y-4">
       {/* Input form */}
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
           <div className="space-y-1 col-span-2">
             <Label className="text-xs text-text-secondary">Target IP / Hostname</Label>
@@ -166,7 +166,7 @@ export function PingTool({ tenantId, deviceId }: ConfigPanelProps) {
       )}
 
       {results.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <div className="px-4 py-2 border-b border-border/50 flex items-center gap-2">
             <Activity className="h-4 w-4 text-accent" />
             <span className="text-sm font-medium text-text-secondary">Ping Results</span>
@@ -189,7 +189,7 @@ export function PingTool({ tenantId, deviceId }: ConfigPanelProps) {
 
       {/* Stats summary */}
       {stats && (
-        <div className="rounded-lg border border-border bg-surface p-4">
+        <div className="rounded-lg border border-border bg-panel p-4">
           <div className="grid grid-cols-3 sm:grid-cols-6 gap-4 text-center">
             <StatBox label="Sent" value={String(stats.sent)} />
             <StatBox label="Received" value={String(stats.received)} />
diff --git a/frontend/src/components/config/PoolPanel.tsx b/frontend/src/components/config/PoolPanel.tsx
index 4fb674d..62a0530 100644
--- a/frontend/src/components/config/PoolPanel.tsx
+++ b/frontend/src/components/config/PoolPanel.tsx
@@ -275,7 +275,7 @@ function PoolTable({
   return (
     <>
       {/* Table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Layers className="h-4 w-4" />
diff --git a/frontend/src/components/config/PppPanel.tsx b/frontend/src/components/config/PppPanel.tsx
index c10f7d9..7e6e562 100644
--- a/frontend/src/components/config/PppPanel.tsx
+++ b/frontend/src/components/config/PppPanel.tsx
@@ -98,7 +98,7 @@ export function PppPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
         {SUB_TABS.map((tab) => (
           <button key={tab.key} onClick={() => setActiveTab(tab.key)}
             className={cn('flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
-              activeTab === tab.key ? 'bg-surface text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary hover:bg-surface/50')}>
+              activeTab === tab.key ? 'bg-panel text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary hover:bg-panel/50')}>
             {tab.icon}{tab.label}
             {tab.key === 'active' && activeConns.entries.length > 0 && (
               <span className="text-xs bg-accent/20 text-accent px-1 rounded">{activeConns.entries.length}</span>
@@ -146,7 +146,7 @@ function ProfilesTab({ entries, panel }: { entries: ProfileEntry[]; panel: Panel
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">PPP Profiles ({entries.length})</span>
           <Button size="sm" variant="outline" className="gap-1" onClick={handleAdd}><Plus className="h-3.5 w-3.5" />Add Profile</Button>
@@ -219,7 +219,7 @@ function SecretsTab({ entries, panel, profileNames }: { entries: SecretEntry[];
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">PPP Secrets ({entries.length})</span>
           <Button size="sm" variant="outline" className="gap-1" onClick={handleAdd}><Plus className="h-3.5 w-3.5" />Add Secret</Button>
@@ -252,7 +252,7 @@ function SecretsTab({ entries, panel, profileNames }: { entries: SecretEntry[];
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1"><Label className="text-xs text-text-secondary">Service</Label>
-              <select value={form.service} onChange={(e) => setForm((f) => ({ ...f, service: e.target.value }))} className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary">
+              <select value={form.service} onChange={(e) => setForm((f) => ({ ...f, service: e.target.value }))} className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary">
                 {PPP_SERVICES.map((s) => <option key={s} value={s}>{s}</option>)}
               </select></div>
             <div className="space-y-1"><Label className="text-xs text-text-secondary">Profile</Label><Input value={form.profile} onChange={(e) => setForm((f) => ({ ...f, profile: e.target.value }))} placeholder="default" className="h-8 text-sm" list="profile-names" />
@@ -281,7 +281,7 @@ function ActiveTab({ entries, tenantId, deviceId, refetch }: { entries: ActiveEn
   })
 
   return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
+    <div className="rounded-lg border border-border bg-panel overflow-hidden">
       <div className="px-4 py-2 border-b border-border/50">
         <span className="text-sm font-medium text-text-secondary">Active Connections ({entries.length})</span>
       </div>
diff --git a/frontend/src/components/config/RestorePreview.tsx b/frontend/src/components/config/RestorePreview.tsx
index fc040de..8d38146 100644
--- a/frontend/src/components/config/RestorePreview.tsx
+++ b/frontend/src/components/config/RestorePreview.tsx
@@ -52,10 +52,8 @@ export function RestorePreview({
 
   if (isLoading) {
     return (
-      <div className="space-y-4 p-4">
-        <div className="h-12 rounded-lg bg-elevated animate-pulse" />
-        <div className="h-32 rounded-lg bg-elevated animate-pulse" />
-        <div className="h-16 rounded-lg bg-elevated animate-pulse" />
+      <div className="py-8 text-center">
+        <span className="text-[9px] text-text-muted">Loading&hellip;</span>
       </div>
     )
   }
@@ -100,7 +98,7 @@ export function RestorePreview({
       )}
 
       {/* Summary bar */}
-      <div className="rounded-lg border border-border bg-surface-raised p-3 flex items-center justify-between">
+      <div className="rounded-lg border border-border bg-panel-raised p-3 flex items-center justify-between">
         <div className="flex items-center gap-4 text-sm">
           <span className="text-success font-mono">+{diff.added}</span>
           <span className="text-error font-mono">-{diff.removed}</span>
@@ -125,7 +123,7 @@ export function RestorePreview({
           {changedCategories.map((cat) => (
             <button
               key={cat.path}
-              className="w-full px-3 py-2 flex items-center justify-between hover:bg-surface-raised/50 transition-colors"
+              className="w-full px-3 py-2 flex items-center justify-between hover:bg-panel-raised/50 transition-colors"
               onClick={() => togglePath(cat.path)}
             >
               <div className="flex items-center gap-2 text-sm">
diff --git a/frontend/src/components/config/RoutesPanel.tsx b/frontend/src/components/config/RoutesPanel.tsx
index f7fd29a..0ad07e1 100644
--- a/frontend/src/components/config/RoutesPanel.tsx
+++ b/frontend/src/components/config/RoutesPanel.tsx
@@ -170,8 +170,8 @@ export function RoutesPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
             className={cn(
               'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
               filterTab === tab.key
-                ? 'bg-surface text-text-primary shadow-sm'
-                : 'text-text-secondary hover:text-text-primary hover:bg-surface/50',
+                ? 'bg-panel text-text-primary shadow-sm'
+                : 'text-text-secondary hover:text-text-primary hover:bg-panel/50',
             )}
           >
             {tab.label}
@@ -313,7 +313,7 @@ function RoutesTable({
   return (
     <>
       {/* Table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Route className="h-4 w-4" />
diff --git a/frontend/src/components/config/ScriptsPanel.tsx b/frontend/src/components/config/ScriptsPanel.tsx
index d49bc69..fd4a378 100644
--- a/frontend/src/components/config/ScriptsPanel.tsx
+++ b/frontend/src/components/config/ScriptsPanel.tsx
@@ -148,8 +148,8 @@ export function ScriptsPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
             className={cn(
               'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
               activeTab === tab.key
-                ? 'bg-surface text-text-primary shadow-sm'
-                : 'text-text-secondary hover:text-text-primary hover:bg-surface/50',
+                ? 'bg-panel text-text-primary shadow-sm'
+                : 'text-text-secondary hover:text-text-primary hover:bg-panel/50',
             )}
           >
             {tab.icon}
@@ -275,7 +275,7 @@ function ScriptsTab({
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Code className="h-4 w-4" />
@@ -477,7 +477,7 @@ function SchedulerTab({
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Clock className="h-4 w-4" />
diff --git a/frontend/src/components/config/ServicesPanel.tsx b/frontend/src/components/config/ServicesPanel.tsx
index c4f275b..b62454d 100644
--- a/frontend/src/components/config/ServicesPanel.tsx
+++ b/frontend/src/components/config/ServicesPanel.tsx
@@ -230,7 +230,7 @@ function ServiceTable({
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Shield className="h-4 w-4" />
@@ -337,7 +337,7 @@ function ServiceTable({
               <select
                 value={form.disabled}
                 onChange={(e) => setForm((f) => ({ ...f, disabled: e.target.value }))}
-                className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+                className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
               >
                 <option value="false">Enabled</option>
                 <option value="true">Disabled</option>
diff --git a/frontend/src/components/config/SnmpPanel.tsx b/frontend/src/components/config/SnmpPanel.tsx
index be590dc..06b6823 100644
--- a/frontend/src/components/config/SnmpPanel.tsx
+++ b/frontend/src/components/config/SnmpPanel.tsx
@@ -158,7 +158,7 @@ export function SnmpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
       </div>
 
       {/* SNMP Status + Settings */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2">
             <Radio className="h-4 w-4 text-accent" />
@@ -192,7 +192,7 @@ export function SnmpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
       </div>
 
       {/* Communities */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">SNMP Communities</span>
           <Button size="sm" variant="outline" className="gap-1" onClick={handleAddCommunity}>
@@ -279,7 +279,7 @@ export function SnmpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
             <div className="space-y-1">
               <Label className="text-xs text-text-secondary">Trap Version</Label>
               <select value={settingsForm['trap-version'] || '1'} onChange={(e) => setSettingsForm((f) => ({ ...f, 'trap-version': e.target.value }))}
-                className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary">
+                className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary">
                 <option value="1">v1</option>
                 <option value="2">v2c</option>
                 <option value="3">v3</option>
@@ -313,7 +313,7 @@ export function SnmpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
               <div className="space-y-1">
                 <Label className="text-xs text-text-secondary">Read Access</Label>
                 <select value={communityForm['read-access'] || 'yes'} onChange={(e) => setCommunityForm((f) => ({ ...f, 'read-access': e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary">
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary">
                   <option value="yes">Yes</option>
                   <option value="no">No</option>
                 </select>
@@ -321,7 +321,7 @@ export function SnmpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
               <div className="space-y-1">
                 <Label className="text-xs text-text-secondary">Write Access</Label>
                 <select value={communityForm['write-access'] || 'no'} onChange={(e) => setCommunityForm((f) => ({ ...f, 'write-access': e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary">
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary">
                   <option value="yes">Yes</option>
                   <option value="no">No</option>
                 </select>
@@ -329,7 +329,7 @@ export function SnmpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
               <div className="space-y-1">
                 <Label className="text-xs text-text-secondary">Security</Label>
                 <select value={communityForm['security'] || 'none'} onChange={(e) => setCommunityForm((f) => ({ ...f, security: e.target.value }))}
-                  className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary">
+                  className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary">
                   <option value="none">None</option>
                   <option value="authorized">Authorized</option>
                   <option value="private">Private</option>
diff --git a/frontend/src/components/config/SwitchPortManager.tsx b/frontend/src/components/config/SwitchPortManager.tsx
index b3b185c..0dcb9e0 100644
--- a/frontend/src/components/config/SwitchPortManager.tsx
+++ b/frontend/src/components/config/SwitchPortManager.tsx
@@ -10,7 +10,7 @@
 import { useMemo } from 'react'
 import { Zap, Network } from 'lucide-react'
 import { Badge } from '@/components/ui/badge'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { useConfigBrowse } from '@/hooks/useConfigPanel'
 import type { ConfigPanelProps } from '@/lib/configPanelTypes'
@@ -134,19 +134,15 @@ export function SwitchPortManager({ tenantId, deviceId, active }: ConfigPanelPro
 
   if (isLoading) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-4">
-        <div className="flex flex-wrap gap-2">
-          {Array.from({ length: 8 }).map((_, i) => (
-            <Skeleton key={i} className="h-20 w-16 rounded-md" />
-          ))}
-        </div>
+      <div className="py-8 text-center">
+        <LoadingText />
       </div>
     )
   }
 
   if (etherPorts.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-8 text-center text-text-secondary text-sm">
+      <div className="rounded-lg border border-border bg-panel p-8 text-center text-text-secondary text-sm">
         <Network className="h-8 w-8 mx-auto mb-2 opacity-40" />
         No ethernet ports detected on this device.
       </div>
@@ -156,7 +152,7 @@ export function SwitchPortManager({ tenantId, deviceId, active }: ConfigPanelPro
   return (
     <div className="space-y-4">
       {/* Port grid */}
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <h3 className="text-sm font-medium text-text-primary mb-3">Switch Ports</h3>
         <div className="flex flex-wrap gap-2">
           {etherPorts.map((port) => {
@@ -177,7 +173,7 @@ export function SwitchPortManager({ tenantId, deviceId, active }: ConfigPanelPro
       </div>
 
       {/* VLAN Legend */}
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <h3 className="text-sm font-medium text-text-primary mb-2">VLAN Legend</h3>
         <div className="flex flex-wrap gap-3">
           <LegendItem color={UNASSIGNED_COLOR} label="Unassigned" />
diff --git a/frontend/src/components/config/SystemPanel.tsx b/frontend/src/components/config/SystemPanel.tsx
index 19bf9ad..c6ef9f6 100644
--- a/frontend/src/components/config/SystemPanel.tsx
+++ b/frontend/src/components/config/SystemPanel.tsx
@@ -104,8 +104,8 @@ export function SystemPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
             className={cn(
               'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
               activeTab === tab.key
-                ? 'bg-surface text-text-primary shadow-sm'
-                : 'text-text-secondary hover:text-text-primary hover:bg-surface/50',
+                ? 'bg-panel text-text-primary shadow-sm'
+                : 'text-text-secondary hover:text-text-primary hover:bg-panel/50',
             )}
           >
             {tab.icon}
@@ -179,7 +179,7 @@ function IdentityTab({
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">System Identity</span>
           <Button size="sm" variant="outline" className="gap-1" onClick={handleEdit}>
@@ -283,7 +283,7 @@ function ClockTab({
   return (
     <div className="space-y-4">
       {/* Clock info */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">Clock Settings</span>
           <Button size="sm" variant="outline" className="gap-1" onClick={handleEditClock}>
@@ -300,7 +300,7 @@ function ClockTab({
       </div>
 
       {/* NTP info */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">NTP Client</span>
           <Button size="sm" variant="outline" className="gap-1" onClick={handleEditNtp}>
@@ -351,7 +351,7 @@ function ClockTab({
               <select
                 value={ntpEnabled}
                 onChange={(e) => setNtpEnabled(e.target.value)}
-                className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+                className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
               >
                 <option value="yes">Yes</option>
                 <option value="no">No</option>
@@ -394,7 +394,7 @@ function ResourcesTab({ data }: { data: Record<string, string> }) {
 
   return (
     <div className="space-y-4">
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="px-4 py-2 border-b border-border/50">
           <span className="text-sm font-medium text-text-secondary">System Resources</span>
         </div>
diff --git a/frontend/src/components/config/TorchTool.tsx b/frontend/src/components/config/TorchTool.tsx
index 41bbb61..033a201 100644
--- a/frontend/src/components/config/TorchTool.tsx
+++ b/frontend/src/components/config/TorchTool.tsx
@@ -106,14 +106,14 @@ export function TorchTool({ tenantId, deviceId, active }: ConfigPanelProps) {
 
   return (
     <div className="space-y-4">
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
           <div className="space-y-1">
             <Label className="text-xs text-text-secondary">Interface</Label>
             <select
               value={iface}
               onChange={(e) => setIface(e.target.value)}
-              className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary font-mono"
+              className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary font-mono"
             >
               {ifaceNames.length > 0
                 ? ifaceNames.map((name) => (
@@ -190,7 +190,7 @@ export function TorchTool({ tenantId, deviceId, active }: ConfigPanelProps) {
       )}
 
       {entries.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <div className="px-4 py-2 border-b border-border/50 flex items-center gap-2">
             <Flame className="h-4 w-4 text-accent" />
             <span className="text-sm font-medium text-text-secondary">
@@ -229,7 +229,7 @@ export function TorchTool({ tenantId, deviceId, active }: ConfigPanelProps) {
       )}
 
       {entries.length === 0 && !torchMutation.isPending && !torchMutation.isIdle && (
-        <div className="rounded-lg border border-border bg-surface p-6 text-center text-sm text-text-muted">
+        <div className="rounded-lg border border-border bg-panel p-6 text-center text-sm text-text-muted">
           No traffic captured. Try a different interface or remove filters.
         </div>
       )}
diff --git a/frontend/src/components/config/TracerouteTool.tsx b/frontend/src/components/config/TracerouteTool.tsx
index ecfef2f..13f1058 100644
--- a/frontend/src/components/config/TracerouteTool.tsx
+++ b/frontend/src/components/config/TracerouteTool.tsx
@@ -69,7 +69,7 @@ export function TracerouteTool({ tenantId, deviceId }: ConfigPanelProps) {
 
   return (
     <div className="space-y-4">
-      <div className="rounded-lg border border-border bg-surface p-4">
+      <div className="rounded-lg border border-border bg-panel p-4">
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
           <div className="space-y-1 col-span-2">
             <Label className="text-xs text-text-secondary">Target IP / Hostname</Label>
@@ -108,7 +108,7 @@ export function TracerouteTool({ tenantId, deviceId }: ConfigPanelProps) {
             <select
               value={protocol}
               onChange={(e) => setProtocol(e.target.value)}
-              className="h-8 w-full rounded-md border border-border bg-surface px-3 text-sm text-text-primary"
+              className="h-8 w-full rounded-md border border-border bg-panel px-3 text-sm text-text-primary"
             >
               <option value="icmp">ICMP</option>
               <option value="udp">UDP</option>
@@ -137,7 +137,7 @@ export function TracerouteTool({ tenantId, deviceId }: ConfigPanelProps) {
       )}
 
       {hops.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <div className="px-4 py-2 border-b border-border/50 flex items-center gap-2">
             <Route className="h-4 w-4 text-accent" />
             <span className="text-sm font-medium text-text-secondary">
diff --git a/frontend/src/components/config/UsersPanel.tsx b/frontend/src/components/config/UsersPanel.tsx
index 06a6a81..d758a3e 100644
--- a/frontend/src/components/config/UsersPanel.tsx
+++ b/frontend/src/components/config/UsersPanel.tsx
@@ -148,7 +148,7 @@ export function UsersPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
 
       {/* Groups overview */}
       {groups.length > 0 && (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <div className="px-4 py-2 border-b border-border/50 flex items-center gap-2">
             <Shield className="h-4 w-4 text-text-muted" />
             <span className="text-sm font-medium text-text-secondary">User Groups</span>
@@ -266,7 +266,7 @@ function UsersTable({
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <div className="flex items-center justify-between px-4 py-2 border-b border-border/50">
           <div className="flex items-center gap-2 text-sm font-medium text-text-secondary">
             <Users className="h-4 w-4" />
diff --git a/frontend/src/components/dashboard/AlertSummary.tsx b/frontend/src/components/dashboard/AlertSummary.tsx
index 0919c1d..a8dda83 100644
--- a/frontend/src/components/dashboard/AlertSummary.tsx
+++ b/frontend/src/components/dashboard/AlertSummary.tsx
@@ -69,7 +69,7 @@ export function AlertSummary({
   }))
 
   return (
-    <Card className="bg-surface border-border">
+    <Card className="bg-panel border-border">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-medium text-text-secondary">
           Alert Summary
diff --git a/frontend/src/components/dashboard/BandwidthChart.tsx b/frontend/src/components/dashboard/BandwidthChart.tsx
index ab7b77e..da9b527 100644
--- a/frontend/src/components/dashboard/BandwidthChart.tsx
+++ b/frontend/src/components/dashboard/BandwidthChart.tsx
@@ -45,7 +45,7 @@ function BwTooltip({ active, payload }: CustomTooltipProps) {
   if (!active || !payload || payload.length === 0) return null
   const item = payload[0]
   return (
-    <div className="rounded-md border border-border bg-surface px-3 py-2 text-xs">
+    <div className="rounded-md border border-border bg-panel px-3 py-2 text-xs">
       <p className="font-medium text-text-primary">{item.payload.hostname}</p>
       <p className="text-text-secondary">{formatBw(item.value)}</p>
     </div>
@@ -56,7 +56,7 @@ export function BandwidthChart({ devices }: BandwidthChartProps) {
   const chartHeight = Math.max(200, devices.length * 36)
 
   return (
-    <Card className="bg-surface border-border">
+    <Card className="bg-panel border-border">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-medium text-text-secondary">
           Top Bandwidth Consumers
@@ -78,7 +78,7 @@ export function BandwidthChart({ devices }: BandwidthChartProps) {
                 <XAxis
                   type="number"
                   tickFormatter={formatAxisTick}
-                  tick={{ fontSize: 11, fill: '#94a3b8' }}
+                  tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
                   axisLine={false}
                   tickLine={false}
                 />
@@ -86,19 +86,19 @@ export function BandwidthChart({ devices }: BandwidthChartProps) {
                   type="category"
                   dataKey="hostname"
                   width={120}
-                  tick={{ fontSize: 11, fill: '#cbd5e1' }}
+                  tick={{ fontSize: 10, fill: 'hsl(var(--text-secondary))' }}
                   axisLine={false}
                   tickLine={false}
                 />
                 <Tooltip
                   content={<BwTooltip />}
-                  cursor={{ fill: '#334155', opacity: 0.5 }}
+                  cursor={{ fill: 'hsl(var(--elevated))', opacity: 0.5 }}
                 />
                 <Bar
                   dataKey="bandwidthBps"
-                  fill="#38BDF8"
-                  radius={[0, 4, 4, 0]}
-                  maxBarSize={24}
+                  fill="hsl(var(--accent))"
+                  radius={[0, 2, 2, 0]}
+                  maxBarSize={20}
                 />
               </BarChart>
             </ResponsiveContainer>
diff --git a/frontend/src/components/dashboard/EventsTimeline.tsx b/frontend/src/components/dashboard/EventsTimeline.tsx
index 36f3c73..17cb0aa 100644
--- a/frontend/src/components/dashboard/EventsTimeline.tsx
+++ b/frontend/src/components/dashboard/EventsTimeline.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Bell, Server, HardDrive } from 'lucide-react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/utils'
 import { eventsApi, type DashboardEvent, type EventsParams } from '@/lib/eventsApi'
 import { DeviceLink } from '@/components/ui/device-link'
@@ -83,22 +82,6 @@ function EventIcon({ event }: { event: DashboardEvent }) {
   }
 }
 
-function TimelineSkeleton() {
-  return (
-    <div className="space-y-3">
-      {Array.from({ length: 5 }).map((_, i) => (
-        <div key={i} className="flex items-start gap-3 pl-3">
-          <Skeleton className="h-4 w-4 rounded-full shrink-0 mt-0.5" />
-          <div className="flex-1 space-y-1.5">
-            <Skeleton className="h-3.5 w-3/4" />
-            <Skeleton className="h-3 w-1/2" />
-          </div>
-          <Skeleton className="h-3 w-12 shrink-0" />
-        </div>
-      ))}
-    </div>
-  )
-}
 
 export function EventsTimeline({ tenantId, isSuperAdmin }: EventsTimelineProps) {
   const [filterType, setFilterType] = useState<EventFilter>(undefined)
@@ -115,86 +98,79 @@ export function EventsTimeline({ tenantId, isSuperAdmin }: EventsTimelineProps)
   })
 
   return (
-    <Card className="bg-surface border-border">
-      <CardHeader className="pb-2">
-        <div className="flex items-center justify-between gap-2">
-          <CardTitle className="text-sm font-medium text-text-secondary">
-            Recent Events
-          </CardTitle>
-          <div className="flex gap-1">
-            {FILTERS.map((f) => (
-              <button
-                key={f.label}
-                onClick={() => setFilterType(f.value)}
-                className={cn(
-                  'px-2 py-0.5 rounded text-xs font-medium transition-colors',
-                  filterType === f.value
-                    ? 'bg-accent/15 text-accent'
-                    : 'text-text-muted hover:text-text-secondary hover:bg-elevated/50',
-                )}
-              >
-                {f.label}
-              </button>
-            ))}
-          </div>
+    <div className="bg-panel border border-border rounded-sm">
+      <div className="px-3 py-2 border-b border-border-subtle bg-elevated flex items-center justify-between">
+        <span className="text-[7px] font-medium text-text-muted uppercase tracking-[1.5px]">
+          Recent Events
+        </span>
+        <div className="flex gap-0.5">
+          {FILTERS.map((f) => (
+            <button
+              key={f.label}
+              onClick={() => setFilterType(f.value)}
+              className={cn(
+                'px-1.5 py-0.5 rounded-sm text-[10px] font-medium transition-[background-color,color] duration-[50ms]',
+                filterType === f.value
+                  ? 'bg-accent-soft text-accent'
+                  : 'text-text-muted hover:text-text-secondary',
+              )}
+            >
+              {f.label}
+            </button>
+          ))}
         </div>
-      </CardHeader>
-      <CardContent>
+      </div>
+      <div>
         {isSuperAdmin && !tenantId ? (
-          <div className="flex items-center justify-center py-8 text-sm text-text-muted">
+          <div className="py-5 text-center text-[9px] text-text-muted">
             Select a tenant to view events
           </div>
         ) : isLoading ? (
-          <TimelineSkeleton />
+          <div className="py-5 text-center text-[9px] text-text-muted">
+            Loading…
+          </div>
         ) : !events || events.length === 0 ? (
-          <div className="flex items-center justify-center py-8 text-sm text-text-muted">
+          <div className="py-5 text-center text-[9px] text-text-muted">
             No recent events
           </div>
         ) : (
-          <div className="max-h-[400px] overflow-y-auto pr-1">
-            <div className="relative border-l-2 border-border ml-2">
-              {events.map((event) => (
-                <div
-                  key={event.id}
-                  className="relative flex items-start gap-3 pb-3 pl-4 last:pb-0"
-                >
-                  {/* Icon positioned over the timeline line */}
-                  <div className="absolute -left-[9px] top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-surface">
-                    <EventIcon event={event} />
-                  </div>
-
-                  {/* Content */}
-                  <div className="flex-1 min-w-0 ml-1">
-                    <p className="text-sm font-medium text-text-primary truncate">
-                      {event.title}
-                    </p>
-                    <p className="text-xs text-text-muted truncate">
-                      {event.description}
-                      {event.device_hostname && (
-                        <span className="ml-1 text-text-secondary">
-                          &mdash;{' '}
-                          {event.device_id ? (
-                            <DeviceLink tenantId={tenantId} deviceId={event.device_id}>
-                              {event.device_hostname}
-                            </DeviceLink>
-                          ) : (
-                            event.device_hostname
-                          )}
-                        </span>
-                      )}
-                    </p>
-                  </div>
-
-                  {/* Timestamp */}
-                  <span className="text-xs text-text-muted whitespace-nowrap shrink-0 mt-0.5">
-                    {formatRelativeTime(event.timestamp)}
+          <div className="max-h-[400px] overflow-y-auto divide-y divide-border-subtle">
+            {events.map((event) => (
+              <div
+                key={event.id}
+                className="flex items-center gap-2.5 px-3 py-1.5"
+              >
+                <div className="shrink-0">
+                  <EventIcon event={event} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <span className="text-xs text-text-primary truncate block">
+                    {event.title}
+                  </span>
+                  <span className="text-[10px] text-text-muted truncate block">
+                    {event.description}
+                    {event.device_hostname && (
+                      <span className="ml-1 text-text-secondary">
+                        &mdash;{' '}
+                        {event.device_id ? (
+                          <DeviceLink tenantId={tenantId} deviceId={event.device_id}>
+                            {event.device_hostname}
+                          </DeviceLink>
+                        ) : (
+                          event.device_hostname
+                        )}
+                      </span>
+                    )}
                   </span>
                 </div>
-              ))}
-            </div>
+                <span className="text-[10px] font-mono text-text-muted whitespace-nowrap shrink-0">
+                  {formatRelativeTime(event.timestamp)}
+                </span>
+              </div>
+            ))}
           </div>
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   )
 }
diff --git a/frontend/src/components/dashboard/HealthScore.tsx b/frontend/src/components/dashboard/HealthScore.tsx
index 65698ec..b6e610d 100644
--- a/frontend/src/components/dashboard/HealthScore.tsx
+++ b/frontend/src/components/dashboard/HealthScore.tsx
@@ -132,7 +132,7 @@ export function HealthScore({
   const dashOffset = CIRCUMFERENCE * (1 - progress)
 
   return (
-    <Card className="bg-surface border-border">
+    <Card className="bg-panel border-border">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-medium text-text-secondary">
           Network Health
diff --git a/frontend/src/components/dashboard/KpiCards.tsx b/frontend/src/components/dashboard/KpiCards.tsx
index 553f4be..4931b76 100644
--- a/frontend/src/components/dashboard/KpiCards.tsx
+++ b/frontend/src/components/dashboard/KpiCards.tsx
@@ -44,45 +44,31 @@ function KpiCard({
   const animatedValue = useAnimatedCounter(value, 800, decimals)
 
   return (
-    <Card
+    <div
       className={cn(
-        'bg-gradient-to-br from-[#f8f8ff] to-elevated dark:from-elevated dark:to-[#16162a] border-border transition-colors',
-        highlight && 'border-warning/30',
+        'bg-panel border border-border px-3 py-2.5 rounded-sm',
+        highlight && 'border-l-2 border-l-warning',
       )}
     >
-      <CardContent className="p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex flex-col gap-1">
-            <span className="text-[10px] font-medium text-text-muted uppercase tracking-wider">
-              {label}
-            </span>
-            <div className="flex items-baseline gap-1">
-              <span
-                className={cn(
-                  'text-2xl font-medium tabular-nums font-mono',
-                  colorClass,
-                )}
-              >
-                {decimals > 0 ? animatedValue.toFixed(decimals) : animatedValue}
-              </span>
-              {suffix && (
-                <span className="text-sm font-medium text-text-muted">
-                  {suffix}
-                </span>
-              )}
-            </div>
-          </div>
-          <div
-            className={cn(
-              'flex h-10 w-10 items-center justify-center rounded-lg bg-elevated/50',
-              colorClass,
-            )}
-          >
-            {icon}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
+      <div className="text-[7px] font-medium text-text-muted uppercase tracking-[1.5px] mb-1">
+        {label}
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span
+          className={cn(
+            'text-lg font-medium tabular-nums font-mono',
+            colorClass,
+          )}
+        >
+          {decimals > 0 ? animatedValue.toFixed(decimals) : animatedValue}
+        </span>
+        {suffix && (
+          <span className="text-xs text-text-muted">
+            {suffix}
+          </span>
+        )}
+      </div>
+    </div>
   )
 }
 
diff --git a/frontend/src/components/dashboard/QuickActions.tsx b/frontend/src/components/dashboard/QuickActions.tsx
index 11cdc75..12f906c 100644
--- a/frontend/src/components/dashboard/QuickActions.tsx
+++ b/frontend/src/components/dashboard/QuickActions.tsx
@@ -72,34 +72,38 @@ export function QuickActions({ tenantId, isSuperAdmin }: QuickActionsProps) {
   const actions = getActions(tenantId, isSuperAdmin)
 
   return (
-    <Card className="bg-surface border-border">
-      <CardHeader className="pb-2">
-        <CardTitle className="text-sm font-medium text-text-secondary">
+    <div className="bg-panel border border-border rounded-sm">
+      <div className="px-3 py-2 border-b border-border-subtle bg-elevated">
+        <span className="text-[7px] font-medium text-text-muted uppercase tracking-[1.5px]">
           Quick Actions
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-2 gap-2">
-          {actions.map((action) => (
-            <Link
-              key={action.label}
-              to={action.to}
-              className={cn(
-                'flex flex-col items-center gap-1.5 rounded-lg px-3 py-3',
-                'text-text-secondary hover:bg-elevated/50 hover:text-text-primary',
-                'transition-colors text-center',
-              )}
-            >
-              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-elevated/50">
-                {action.icon}
-              </div>
-              <span className="text-xs font-medium leading-tight">
+        </span>
+      </div>
+      <div className="divide-y divide-border-subtle">
+        {actions.map((action) => (
+          <Link
+            key={action.label}
+            to={action.to}
+            className={cn(
+              'flex items-center gap-2.5 px-3 py-2',
+              'text-text-secondary hover:text-text-primary',
+              'border-l-2 border-transparent hover:border-accent',
+              'transition-[border-color,color] duration-[50ms]',
+            )}
+          >
+            <div className="text-text-muted">
+              {action.icon}
+            </div>
+            <div className="min-w-0">
+              <span className="text-xs font-medium block">
                 {action.label}
               </span>
-            </Link>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
+              <span className="text-[10px] text-text-muted block">
+                {action.description}
+              </span>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
   )
 }
diff --git a/frontend/src/components/dashboard/WirelessIssues.tsx b/frontend/src/components/dashboard/WirelessIssues.tsx
index 2010959..1af0680 100644
--- a/frontend/src/components/dashboard/WirelessIssues.tsx
+++ b/frontend/src/components/dashboard/WirelessIssues.tsx
@@ -25,7 +25,7 @@ export function WirelessIssues({ tenantId }: WirelessIssuesProps) {
   })
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-5">
+    <div className="rounded-lg border border-border bg-panel p-5">
       <h3 className="text-sm font-semibold text-text-primary mb-4 flex items-center gap-2">
         <Wifi className="h-4 w-4 text-text-muted" />
         APs Needing Attention
diff --git a/frontend/src/components/firmware/FirmwarePage.tsx b/frontend/src/components/firmware/FirmwarePage.tsx
index 843ded4..7da2edb 100644
--- a/frontend/src/components/firmware/FirmwarePage.tsx
+++ b/frontend/src/components/firmware/FirmwarePage.tsx
@@ -50,7 +50,7 @@ function StatCard({
   color: string
 }) {
   return (
-    <div className="rounded-lg border border-border bg-surface p-4">
+    <div className="rounded-lg border border-border bg-panel p-4">
       <div className={cn('text-2xl font-bold', color)}>{value}</div>
       <div className="text-xs text-text-muted mt-1">{label}</div>
     </div>
@@ -184,7 +184,7 @@ function UpgradeDialog({
               </div>
             )}
 
-            <div className="rounded border border-border bg-surface p-3 text-xs text-text-secondary">
+            <div className="rounded border border-border bg-panel p-3 text-xs text-text-secondary">
               A mandatory config backup will be taken before upgrading each device.
             </div>
 
@@ -254,10 +254,10 @@ function VersionGroupCard({
 
   return (
     <>
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         <button
           onClick={() => setExpanded((v) => !v)}
-          className="flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-surface transition-colors"
+          className="flex items-center gap-3 px-4 py-3 w-full text-left hover:bg-panel transition-colors"
         >
           {expanded ? (
             <ChevronDown className="h-4 w-4 text-text-muted" />
diff --git a/frontend/src/components/firmware/UpgradeProgressModal.tsx b/frontend/src/components/firmware/UpgradeProgressModal.tsx
index b81a99d..e7e1278 100644
--- a/frontend/src/components/firmware/UpgradeProgressModal.tsx
+++ b/frontend/src/components/firmware/UpgradeProgressModal.tsx
@@ -256,7 +256,7 @@ function MassUpgradeProgress({
       )}
 
       {/* Device list */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden max-h-48 overflow-y-auto">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden max-h-48 overflow-y-auto">
         {rollout.jobs.map((job) => {
           const config = STATUS_CONFIG[job.status] ?? STATUS_CONFIG.pending
           const Icon = config.icon
diff --git a/frontend/src/components/fleet/AdoptionWizard.tsx b/frontend/src/components/fleet/AdoptionWizard.tsx
index 50e2ccd..e32210d 100644
--- a/frontend/src/components/fleet/AdoptionWizard.tsx
+++ b/frontend/src/components/fleet/AdoptionWizard.tsx
@@ -231,7 +231,7 @@ export function AdoptionWizard({ tenantId }: AdoptionWizardProps) {
 
       {/* Step 3: Configure Credentials */}
       {step === 3 && (
-        <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+        <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
           <div>
             <h3 className="text-sm font-semibold">Configure Credentials</h3>
             <p className="text-xs text-text-muted mt-0.5">
@@ -253,7 +253,7 @@ export function AdoptionWizard({ tenantId }: AdoptionWizardProps) {
                 className={cn(
                   'flex-1 px-3 py-1.5 rounded text-xs font-medium transition-colors',
                   credMode === opt.value
-                    ? 'bg-surface text-text-primary shadow-sm'
+                    ? 'bg-panel text-text-primary shadow-sm'
                     : 'text-text-muted hover:text-text-secondary',
                 )}
               >
@@ -389,7 +389,7 @@ export function AdoptionWizard({ tenantId }: AdoptionWizardProps) {
 
       {/* Step 4: Assign Groups & Tags */}
       {step === 4 && (
-        <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+        <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
           <div>
             <h3 className="text-sm font-semibold">Assign Groups & Tags</h3>
             <p className="text-xs text-text-muted mt-0.5">
@@ -584,7 +584,7 @@ function SubnetStep({
   }
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+    <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
       <div>
         <h3 className="text-sm font-semibold">Enter Subnet</h3>
         <p className="text-xs text-text-muted mt-0.5">
@@ -682,7 +682,7 @@ function ScanResultsStep({
   ).length
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+    <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-sm font-semibold">Scan Results</h3>
@@ -703,7 +703,7 @@ function ScanResultsStep({
       <div className="rounded-md border border-border/50 overflow-hidden max-h-72 overflow-y-auto">
         <table className="w-full text-sm">
           <thead className="sticky top-0">
-            <tr className="border-b border-border bg-surface">
+            <tr className="border-b border-border bg-panel">
               <th className="px-3 py-2 w-8">
                 <Checkbox
                   checked={allNewSelected}
@@ -959,7 +959,7 @@ function ImportVerifyStep({
   ])
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+    <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
       <div>
         <h3 className="text-sm font-semibold">Import & Verify</h3>
         <p className="text-xs text-text-muted mt-0.5">
@@ -1013,7 +1013,7 @@ function ImportVerifyStep({
             <div className="rounded-md border border-border/50 overflow-hidden">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b border-border bg-surface">
+                  <tr className="border-b border-border bg-panel">
                     <th className="text-left px-3 py-2 text-xs font-medium text-text-muted">
                       Device
                     </th>
diff --git a/frontend/src/components/fleet/FleetDashboard.tsx b/frontend/src/components/fleet/FleetDashboard.tsx
index 06d8990..c072d55 100644
--- a/frontend/src/components/fleet/FleetDashboard.tsx
+++ b/frontend/src/components/fleet/FleetDashboard.tsx
@@ -1,17 +1,17 @@
 import { useState, useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
 import { useAuth } from '@/lib/auth'
-import { metricsApi, tenantsApi } from '@/lib/api'
+import { metricsApi, tenantsApi, type FleetDevice } from '@/lib/api'
 import { useUIStore } from '@/lib/store'
 import { alertsApi } from '@/lib/alertsApi'
 import { useEventStreamContext } from '@/contexts/EventStreamContext'
-import { LayoutDashboard } from 'lucide-react'
+import { LayoutDashboard, MapPin } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import { EmptyState } from '@/components/ui/empty-state'
 
 // ─── Dashboard Widgets ───────────────────────────────────────────────────────
-import { KpiCards } from '@/components/dashboard/KpiCards'
 import { HealthScore } from '@/components/dashboard/HealthScore'
 import { EventsTimeline } from '@/components/dashboard/EventsTimeline'
 import { BandwidthChart, type BandwidthDevice } from '@/components/dashboard/BandwidthChart'
@@ -30,39 +30,122 @@ const REFRESH_OPTIONS: { label: string; value: RefreshInterval }[] = [
   { label: 'Off', value: false },
 ]
 
-// ─── Dashboard Skeleton ──────────────────────────────────────────────────────
+// ─── Dashboard Loading ───────────────────────────────────────────────────────
 
-function DashboardSkeleton() {
+function DashboardLoading() {
   return (
-    <div className="space-y-4">
-      {/* KPI cards skeleton */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="rounded-lg border border-border p-4">
-            <Skeleton className="h-3 w-24 mb-2" />
-            <Skeleton className="h-8 w-16" />
-          </div>
-        ))}
+    <div className="py-8 text-center">
+      <LoadingText />
+    </div>
+  )
+}
+
+// ─── Needs Attention (inline component) ─────────────────────────────────────
+
+interface AttentionItem {
+  id: string
+  deviceId: string
+  tenantId: string
+  hostname: string
+  model: string | null
+  severity: 'error' | 'warning'
+  reason: string
+  hasCoords: boolean
+}
+
+function NeedsAttention({ devices }: { devices: FleetDevice[] }) {
+  const items = useMemo<AttentionItem[]>(() => {
+    const result: AttentionItem[] = []
+
+    for (const d of devices) {
+      const base = {
+        deviceId: d.id,
+        tenantId: d.tenant_id,
+        hostname: d.hostname,
+        model: d.model,
+        hasCoords: d.latitude != null && d.longitude != null,
+      }
+
+      if (d.status === 'offline') {
+        result.push({ ...base, id: `${d.id}-offline`, severity: 'error', reason: 'Offline' })
+      } else if (d.status === 'degraded') {
+        result.push({ ...base, id: `${d.id}-degraded`, severity: 'warning', reason: 'Degraded' })
+      }
+
+      if (d.last_cpu_load != null && d.last_cpu_load > 80) {
+        result.push({ ...base, id: `${d.id}-cpu`, severity: 'warning', reason: `CPU ${d.last_cpu_load}%` })
+      }
+    }
+
+    result.sort((a, b) => {
+      if (a.severity === b.severity) return 0
+      return a.severity === 'error' ? -1 : 1
+    })
+
+    return result.slice(0, 10)
+  }, [devices])
+
+  const count = items.length
+
+  return (
+    <div className="bg-panel border border-border-default rounded-sm mb-3.5">
+      <div className="px-3 py-2 border-b border-border-default bg-elevated">
+        <span className="text-[7px] font-medium text-text-muted uppercase tracking-[1.5px]">
+          Needs Attention
+        </span>
+        <span className="text-[7px] text-[hsl(var(--text-label))]"> · </span>
+        <span className="text-[7px] text-text-secondary font-mono">{count}</span>
       </div>
-      {/* Widget grid skeleton */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        <div className="lg:col-span-2 rounded-lg border border-border p-4 space-y-3">
-          <Skeleton className="h-4 w-32" />
-          <Skeleton className="h-48 w-full" />
+      {count > 0 ? (
+        <div className="divide-y divide-border-subtle">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center justify-between px-3 py-1.5 border-l-2"
+              style={{
+                borderLeftColor:
+                  item.severity === 'error'
+                    ? 'hsl(var(--error))'
+                    : 'hsl(var(--warning))',
+              }}
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <Link
+                  to="/tenants/$tenantId/devices/$deviceId"
+                  params={{ tenantId: item.tenantId, deviceId: item.deviceId }}
+                  className="text-xs text-text-primary font-medium truncate hover:text-accent transition-[color] duration-[50ms]"
+                >
+                  {item.hostname}
+                </Link>
+                <span className="text-[10px] text-text-secondary flex-shrink-0">
+                  {item.model}
+                </span>
+                {item.hasCoords && (
+                  <Link
+                    to="/map"
+                    className="text-text-muted hover:text-accent transition-[color] duration-[50ms] flex-shrink-0"
+                    title="View on map"
+                  >
+                    <MapPin className="h-3 w-3" />
+                  </Link>
+                )}
+              </div>
+              <span
+                className={cn(
+                  'text-[10px] font-mono font-medium flex-shrink-0 ml-2',
+                  item.severity === 'error' ? 'text-error' : 'text-warning',
+                )}
+              >
+                {item.reason}
+              </span>
+            </div>
+          ))}
         </div>
-        <div className="rounded-lg border border-border p-4 space-y-3">
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-32 w-full" />
+      ) : (
+        <div className="py-5 text-center">
+          <span className="text-[9px] text-text-muted">No issues detected</span>
         </div>
-        <div className="lg:col-span-2 rounded-lg border border-border p-4 space-y-3">
-          <Skeleton className="h-4 w-40" />
-          <Skeleton className="h-48 w-full" />
-        </div>
-        <div className="rounded-lg border border-border p-4 space-y-3">
-          <Skeleton className="h-4 w-28" />
-          <Skeleton className="h-32 w-full" />
-        </div>
-      </div>
+      )}
     </div>
   )
 }
@@ -96,9 +179,9 @@ export function FleetDashboard() {
     isFetching: fleetFetching,
     dataUpdatedAt,
   } = useQuery({
-    queryKey: ['fleet-summary', isSuperAdmin ? 'all' : tenantId],
+    queryKey: ['fleet-summary', isSuperAdmin && !selectedTenantId ? 'all' : tenantId],
     queryFn: () =>
-      isSuperAdmin
+      isSuperAdmin && !selectedTenantId
         ? metricsApi.fleetSummaryAll()
         : metricsApi.fleetSummary(tenantId),
     // Disable polling when SSE is connected (events update cache directly)
@@ -128,6 +211,15 @@ export function FleetDashboard() {
   const onlinePercent =
     totalDevices > 0 ? (onlineDevices.length / totalDevices) * 100 : 0
 
+  const degradedCount = useMemo(
+    () => fleetDevices?.filter((d) => d.status === 'degraded').length ?? 0,
+    [fleetDevices],
+  )
+  const offlineCount = useMemo(
+    () => fleetDevices?.filter((d) => d.status === 'offline').length ?? 0,
+    [fleetDevices],
+  )
+
   // Alert counts
   const alerts = alertsData?.items ?? []
   const criticalCount = alerts.filter((a) => a.severity === 'critical').length
@@ -183,10 +275,10 @@ export function FleetDashboard() {
   return (
     <div className="space-y-6" data-testid="dashboard">
       {/* ── Page Header ─────────────────────────────────────────────────── */}
-      <div className="flex items-center justify-between gap-4">
+      <div className="flex items-center justify-between gap-4 pb-2.5 mb-3.5 border-b border-border-default">
         <div>
-          <h1 className="text-xl font-semibold">Dashboard</h1>
-          <p className="text-sm text-text-muted mt-0.5">
+          <h1 className="text-sm font-semibold text-text-primary">Overview</h1>
+          <p className="text-[9px] text-text-muted mt-0.5">
             Fleet overview across{' '}
             {isSuperAdmin
               ? selectedTenantId && selectedTenantName
@@ -213,7 +305,7 @@ export function FleetDashboard() {
             </span>
           )}
           {/* Refresh interval selector */}
-          <div className="flex items-center rounded-md border border-border bg-surface">
+          <div className="flex items-center rounded-md border border-border bg-panel">
             {REFRESH_OPTIONS.map((opt) => (
               <button
                 key={opt.label}
@@ -223,7 +315,7 @@ export function FleetDashboard() {
                   'px-2.5 py-1 text-xs font-medium transition-colors',
                   'first:rounded-l-md last:rounded-r-md',
                   refreshInterval === opt.value
-                    ? 'bg-accent/15 text-accent'
+                    ? 'bg-accent-soft text-accent'
                     : 'text-text-muted hover:text-text-secondary hover:bg-elevated/50',
                 )}
               >
@@ -236,7 +328,7 @@ export function FleetDashboard() {
 
       {/* ── Dashboard Content ───────────────────────────────────────────── */}
       {fleetLoading ? (
-        <DashboardSkeleton />
+        <DashboardLoading />
       ) : totalDevices === 0 ? (
         <EmptyState
           icon={LayoutDashboard}
@@ -245,13 +337,54 @@ export function FleetDashboard() {
         />
       ) : (
         <>
-          {/* KPI Cards — full width, 4 columns */}
-          <KpiCards
-            totalDevices={totalDevices}
-            onlinePercent={onlinePercent}
-            activeAlerts={totalAlerts}
-            totalBandwidthBps={totalBandwidthBps}
-          />
+          {/* Metrics Strip — joined 4-column bar */}
+          <div className="flex gap-px mb-3.5 bg-border-default rounded-sm overflow-hidden">
+            <div className="flex-1 bg-panel px-3 py-2">
+              <div className="text-lg font-medium font-mono text-text-primary">
+                {totalDevices}
+              </div>
+              <div className="text-[7px] text-text-muted uppercase tracking-[1.5px] font-medium mt-0.5">
+                Devices
+              </div>
+            </div>
+            <div className="flex-1 bg-panel px-3 py-2">
+              <div className="text-lg font-medium font-mono text-success">
+                {onlineDevices.length}
+              </div>
+              <div className="text-[7px] text-text-muted uppercase tracking-[1.5px] font-medium mt-0.5">
+                Online
+              </div>
+            </div>
+            <div className="flex-1 bg-panel px-3 py-2">
+              <div
+                className={cn(
+                  'text-lg font-medium font-mono',
+                  degradedCount > 0 ? 'text-warning' : 'text-text-primary',
+                )}
+              >
+                {degradedCount}
+              </div>
+              <div className="text-[7px] text-text-muted uppercase tracking-[1.5px] font-medium mt-0.5">
+                Degraded
+              </div>
+            </div>
+            <div className="flex-1 bg-panel px-3 py-2">
+              <div
+                className={cn(
+                  'text-lg font-medium font-mono',
+                  offlineCount > 0 ? 'text-error' : 'text-text-primary',
+                )}
+              >
+                {offlineCount}
+              </div>
+              <div className="text-[7px] text-text-muted uppercase tracking-[1.5px] font-medium mt-0.5">
+                Offline
+              </div>
+            </div>
+          </div>
+
+          {/* Needs Attention — full width */}
+          <NeedsAttention devices={fleetDevices ?? []} />
 
           {/* Widget Grid — responsive 3 columns */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
diff --git a/frontend/src/components/fleet/FleetTable.tsx b/frontend/src/components/fleet/FleetTable.tsx
index 50bc2dd..c36ce1e 100644
--- a/frontend/src/components/fleet/FleetTable.tsx
+++ b/frontend/src/components/fleet/FleetTable.tsx
@@ -92,7 +92,7 @@ function SortHeader({ column, label, currentSort, currentDir, onSort, className
 function DeviceCard({ device, tenantId }: { device: DeviceResponse; tenantId: string }) {
   return (
     <div
-      className="w-full text-left rounded-lg border border-border bg-surface p-3 hover:bg-elevated/50 transition-colors min-h-[44px]"
+      className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/30 transition-[background-color] duration-[50ms] min-h-[44px]"
       data-testid={`device-card-${device.hostname}`}
     >
       <div className="flex items-start justify-between gap-2">
@@ -345,7 +345,7 @@ export function FleetTable({
         isFetching && !isLoading && 'opacity-70',
       )}>
         {isLoading ? (
-          <TableSkeleton rows={3} />
+          <TableSkeleton />
         ) : items.length === 0 ? (
           <EmptyState
             icon={Monitor}
@@ -402,7 +402,7 @@ export function FleetTable({
                             data-index={virtualRow.index}
                             ref={virtualizer.measureElement}
                             className={cn(
-                              'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                              'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                               selectedIndex === virtualRow.index && 'bg-elevated/50',
                             )}
                             style={{
@@ -460,7 +460,7 @@ export function FleetTable({
                       key={device.id}
                       data-testid={`device-row-${device.hostname}`}
                       className={cn(
-                        'border-b border-border/50 hover:bg-elevated/50 transition-colors',
+                        'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
                         selectedIndex === idx && 'bg-elevated/50',
                       )}
                     >
diff --git a/frontend/src/components/fleet/RemoteWinBoxButton.tsx b/frontend/src/components/fleet/RemoteWinBoxButton.tsx
index 43d3de5..bfa8390 100644
--- a/frontend/src/components/fleet/RemoteWinBoxButton.tsx
+++ b/frontend/src/components/fleet/RemoteWinBoxButton.tsx
@@ -162,26 +162,26 @@ export function RemoteWinBoxButton({ tenantId, deviceId }: RemoteWinBoxButtonPro
   if (state === 'idle' || state === 'failed' || state === 'terminated') {
     return (
       <div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1">
           <button
             onClick={handleOpen}
             disabled={createMutation.isPending}
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-accent text-white hover:bg-accent/90 disabled:opacity-50"
+            className="inline-flex items-center gap-1 px-2 py-1 rounded-[var(--radius-control)] text-[10px] text-text-secondary border border-border-default hover:border-accent transition-[border-color,color] duration-[50ms] disabled:opacity-50"
+            title="Open Remote WinBox (browser)"
           >
             {createMutation.isPending ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
+              <Loader2 className="h-3 w-3 animate-spin" />
             ) : (
-              <Globe className="h-4 w-4" />
+              <Globe className="h-3 w-3" />
             )}
-            {createMutation.isPending ? 'Starting...' : 'Remote WinBox'}
+            {createMutation.isPending ? 'Starting' : 'Remote'}
           </button>
           <button
             onClick={handleReset}
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground"
-            title="Reset all remote WinBox sessions for this device"
+            className="inline-flex items-center px-1.5 py-1 rounded-[var(--radius-control)] text-text-muted border border-border-default hover:border-accent transition-[border-color] duration-[50ms]"
+            title="Reset remote sessions"
           >
-            <RefreshCw className="h-4 w-4" />
-            Reset
+            <RefreshCw className="h-3 w-3" />
           </button>
         </div>
         {state === 'failed' && error && (
diff --git a/frontend/src/components/fleet/SSHTerminal.tsx b/frontend/src/components/fleet/SSHTerminal.tsx
index 97e582f..19b3260 100644
--- a/frontend/src/components/fleet/SSHTerminal.tsx
+++ b/frontend/src/components/fleet/SSHTerminal.tsx
@@ -162,10 +162,11 @@ export function SSHTerminal({ tenantId, deviceId, deviceName }: SSHTerminalProps
         return (
             <button
                 onClick={handleOpen}
-                className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-accent text-white hover:bg-accent/90"
+                className="inline-flex items-center gap-1 px-2 py-1 rounded-[var(--radius-control)] text-[10px] text-text-secondary border border-border-default hover:border-accent transition-[border-color,color] duration-[50ms]"
+                title="Open SSH Terminal"
             >
-                <TerminalIcon className="h-4 w-4" />
-                SSH Terminal
+                <TerminalIcon className="h-3 w-3" />
+                SSH
             </button>
         )
     }
diff --git a/frontend/src/components/fleet/ScanResultsList.tsx b/frontend/src/components/fleet/ScanResultsList.tsx
index 6575e9f..a3b8bed 100644
--- a/frontend/src/components/fleet/ScanResultsList.tsx
+++ b/frontend/src/components/fleet/ScanResultsList.tsx
@@ -104,7 +104,7 @@ export function ScanResultsList({ tenantId, results, onDone }: Props) {
           <div className="rounded-lg border border-border overflow-hidden">
             <table className="w-full text-sm">
               <thead>
-                <tr className="border-b border-border bg-surface">
+                <tr className="border-b border-border bg-panel">
                   <th className="px-3 py-2 w-8">
                     <Checkbox
                       checked={allSelected}
@@ -121,7 +121,7 @@ export function ScanResultsList({ tenantId, results, onDone }: Props) {
                 {results.discovered.map((device) => (
                   <tr
                     key={device.ip_address}
-                    className="border-b border-border/50 hover:bg-surface cursor-pointer"
+                    className="border-b border-border/50 hover:bg-panel cursor-pointer"
                     onClick={() => toggleSelect(device.ip_address)}
                   >
                     <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
@@ -154,7 +154,7 @@ export function ScanResultsList({ tenantId, results, onDone }: Props) {
 
           {/* Credentials */}
           {selected.size > 0 && (
-            <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+            <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
               <div className="flex items-center gap-2">
                 <h3 className="text-sm font-medium">
                   Credentials for {selected.size} selected device{selected.size !== 1 ? 's' : ''}
diff --git a/frontend/src/components/fleet/WinBoxButton.tsx b/frontend/src/components/fleet/WinBoxButton.tsx
index 7d9f304..6ef9ee6 100644
--- a/frontend/src/components/fleet/WinBoxButton.tsx
+++ b/frontend/src/components/fleet/WinBoxButton.tsx
@@ -78,14 +78,15 @@ export function WinBoxButton({ tenantId, deviceId }: WinBoxButtonProps) {
                         openMutation.mutate()
                     }}
                     disabled={openMutation.isPending}
-                    className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-accent text-white hover:bg-accent/90 disabled:opacity-50"
+                    className="inline-flex items-center gap-1 px-2 py-1 rounded-[var(--radius-control)] text-[10px] text-text-secondary border border-border-default hover:border-accent transition-[border-color,color] duration-[50ms] disabled:opacity-50"
+                    title="Open WinBox tunnel"
                 >
                     {openMutation.isPending ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
+                        <Loader2 className="h-3 w-3 animate-spin" />
                     ) : (
-                        <Monitor className="h-4 w-4" />
+                        <Monitor className="h-3 w-3" />
                     )}
-                    {openMutation.isPending ? 'Connecting...' : 'Open WinBox'}
+                    {openMutation.isPending ? 'Connecting' : 'WinBox'}
                 </button>
                 {error && <p className="mt-2 text-sm text-error">{error}</p>}
             </div>
@@ -94,18 +95,17 @@ export function WinBoxButton({ tenantId, deviceId }: WinBoxButtonProps) {
 
     if (state === 'ready' && tunnelInfo) {
         return (
-            <div className="rounded-md border p-4 space-y-3">
-                <p className="font-medium text-sm">WinBox tunnel ready</p>
-                <p className="text-sm text-text-muted">
-                    Connect to: <code className="font-mono">{tunnelInfo.host}:{tunnelInfo.port}</code>
+            <div className="rounded-sm border border-border-default bg-panel p-2.5 space-y-2">
+                <p className="text-xs text-text-primary">
+                    Tunnel ready: <code className="font-mono text-[10px] text-text-secondary">{tunnelInfo.host}:{tunnelInfo.port}</code>
                 </p>
-                <div className="flex gap-2">
+                <div className="flex gap-1">
                     <button
                         onClick={copyAddress}
-                        className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border hover:bg-accent"
+                        className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] rounded-[var(--radius-control)] border border-border-default text-text-secondary hover:border-accent transition-[border-color] duration-[50ms]"
                     >
-                        <Copy className="h-3 w-3" />
-                        {copied ? 'Copied!' : 'Copy Address'}
+                        <Copy className="h-2.5 w-2.5" />
+                        {copied ? 'Copied' : 'Copy'}
                     </button>
                     <button
                         onClick={() => {
@@ -113,15 +113,13 @@ export function WinBoxButton({ tenantId, deviceId }: WinBoxButtonProps) {
                             closeMutation.mutate()
                         }}
                         disabled={closeMutation.isPending}
-                        className="inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border hover:bg-accent disabled:opacity-50"
+                        className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] rounded-[var(--radius-control)] border border-border-default text-text-muted hover:border-accent disabled:opacity-50 transition-[border-color] duration-[50ms]"
                     >
-                        <X className="h-3 w-3" />
-                        Close Tunnel
+                        <X className="h-2.5 w-2.5" />
+                        Close
                     </button>
                 </div>
-                <p className="text-xs text-text-muted">
-                    Tunnel closes after 5 min of inactivity
-                </p>
+                <p className="text-[9px] text-text-muted">Closes after 5 min idle</p>
             </div>
         )
     }
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 3a755bb..707caec 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -1,15 +1,20 @@
-import { type ReactNode } from 'react'
+import { type ReactNode, useEffect } from 'react'
 import { Sidebar } from './Sidebar'
-import { ContextStrip } from './ContextStrip'
 import { ShortcutsDialog } from './ShortcutsDialog'
 import { CommandPalette } from '@/components/command-palette/CommandPalette'
 import { Toaster } from '@/components/ui/toast'
+import { useUIStore } from '@/lib/store'
 
 interface AppLayoutProps {
   children: ReactNode
 }
 
 export function AppLayout({ children }: AppLayoutProps) {
+  // Apply persisted UI scale on mount
+  const uiScale = useUIStore((s) => s.uiScale)
+  useEffect(() => {
+    document.documentElement.style.zoom = `${uiScale}%`
+  }, [uiScale])
   return (
     <div className="flex h-screen overflow-hidden bg-background">
       <a
@@ -20,7 +25,6 @@ export function AppLayout({ children }: AppLayoutProps) {
       </a>
       <Sidebar />
       <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
-        <ContextStrip />
         <main id="main-content" tabIndex={-1} className="flex-1 overflow-auto p-5">
           {children}
         </main>
diff --git a/frontend/src/components/layout/ContextStrip.tsx b/frontend/src/components/layout/ContextStrip.tsx
deleted file mode 100644
index 3746dd5..0000000
--- a/frontend/src/components/layout/ContextStrip.tsx
+++ /dev/null
@@ -1,266 +0,0 @@
-import { useEffect } from 'react'
-import { useNavigate, Link } from '@tanstack/react-router'
-import { ChevronDown, Sun, Moon, LogOut, Settings, Menu } from 'lucide-react'
-import { useQuery } from '@tanstack/react-query'
-import { useCommandPalette } from '@/components/command-palette/useCommandPalette'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { useAuth, isSuperAdmin } from '@/lib/auth'
-import { useUIStore } from '@/lib/store'
-import { tenantsApi, metricsApi } from '@/lib/api'
-import { getLicenseStatus } from '@/lib/settingsApi'
-import { useEventStreamContext } from '@/contexts/EventStreamContext'
-import type { ConnectionState } from '@/hooks/useEventStream'
-import { NotificationBell } from '@/components/alerts/NotificationBell'
-
-const SYSTEM_TENANT_ID = '00000000-0000-0000-0000-000000000000'
-
-const CONNECTION_COLORS: Record<ConnectionState, string> = {
-  connected: 'bg-success',
-  connecting: 'bg-warning animate-pulse',
-  reconnecting: 'bg-warning animate-pulse',
-  disconnected: 'bg-error',
-}
-
-const CONNECTION_LABELS: Record<ConnectionState, string> = {
-  connected: 'Connected',
-  connecting: 'Connecting',
-  reconnecting: 'Reconnecting',
-  disconnected: 'Disconnected',
-}
-
-// Generate a deterministic color from a string
-function tenantColor(name: string): string {
-  const colors = [
-    'bg-info', 'bg-success', 'bg-accent', 'bg-warning',
-    'bg-error', 'bg-info', 'bg-accent', 'bg-success',
-  ]
-  let hash = 0
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  return colors[Math.abs(hash) % colors.length]
-}
-
-export function ContextStrip() {
-  const { user, logout } = useAuth()
-  const { selectedTenantId, setSelectedTenantId, theme, setTheme, setMobileSidebarOpen } = useUIStore()
-  const { connectionState } = useEventStreamContext()
-  const navigate = useNavigate()
-  const superAdmin = isSuperAdmin(user)
-
-  // Tenant list (super_admin only)
-  const { data: tenants } = useQuery({
-    queryKey: ['tenants'],
-    queryFn: tenantsApi.list,
-    enabled: superAdmin,
-    select: (data) => data.filter((t) => t.id !== SYSTEM_TENANT_ID),
-  })
-
-  const selectedTenant = tenants?.find((t) => t.id === selectedTenantId)
-
-  // Auto-select when there's exactly one tenant and nothing selected
-  useEffect(() => {
-    if (superAdmin && tenants && tenants.length === 1 && !selectedTenantId) {
-      setSelectedTenantId(tenants[0].id)
-    }
-  }, [tenants, selectedTenantId, superAdmin, setSelectedTenantId])
-
-  // Fleet summary for status indicators
-  const tenantId = superAdmin ? selectedTenantId : user?.tenant_id
-  const { data: fleet } = useQuery({
-    queryKey: ['fleet-summary', superAdmin ? 'all' : tenantId],
-    queryFn: () =>
-      superAdmin && !selectedTenantId
-        ? metricsApi.fleetSummaryAll()
-        : tenantId
-          ? metricsApi.fleetSummary(tenantId)
-          : Promise.resolve([]),
-    enabled: !!tenantId || superAdmin,
-    refetchInterval: 30_000,
-  })
-
-  const offlineCount = fleet?.filter((d) => d.status === 'offline').length ?? 0
-  const degradedCount = fleet?.filter((d) => d.status === 'degraded').length ?? 0
-
-  // License status (super_admin only)
-  const { data: license } = useQuery({
-    queryKey: ['license-status'],
-    queryFn: getLicenseStatus,
-    enabled: superAdmin,
-    refetchInterval: 60_000,
-  })
-
-  const handleLogout = async () => {
-    await logout()
-    void navigate({ to: '/login' })
-  }
-
-  // User initials for avatar
-  const initials = user?.name
-    ? user.name.split(' ').map((w) => w[0]).join('').slice(0, 2).toUpperCase()
-    : user?.email?.slice(0, 2).toUpperCase() ?? '?'
-
-  // Tenant display name for non-super_admin
-  const tenantName = superAdmin
-    ? (selectedTenant?.name ?? 'All Orgs')
-    : user?.name ?? 'Tenant'
-
-  return (
-    <div className="flex items-center h-9 bg-background/80 border-b border-border px-4 gap-4 flex-shrink-0">
-      {/* Mobile hamburger */}
-      <button
-        onClick={() => setMobileSidebarOpen(true)}
-        className="lg:hidden p-1 rounded-md text-text-muted hover:text-text-primary hover:bg-elevated transition-colors -ml-1"
-        aria-label="Open menu"
-      >
-        <Menu className="h-4 w-4" />
-      </button>
-
-      {/* Left: Org switcher */}
-      <div className="flex items-center border-r border-border pr-4">
-        {superAdmin && tenants && tenants.length > 0 ? (
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors">
-              <div
-                className={`w-4 h-4 rounded flex items-center justify-center text-[8px] font-bold text-white ${tenantColor(tenantName)}`}
-              >
-                {tenantName[0]?.toUpperCase()}
-              </div>
-              <span className="truncate max-w-[120px]">{tenantName}</span>
-              <ChevronDown className="h-3 w-3 flex-shrink-0" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuLabel className="text-xs">Organization</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={() => setSelectedTenantId(null)} className="text-xs">
-                All Orgs
-              </DropdownMenuItem>
-              {tenants.map((tenant) => (
-                <DropdownMenuItem
-                  key={tenant.id}
-                  onClick={() => setSelectedTenantId(tenant.id)}
-                  className="text-xs"
-                >
-                  <div
-                    className={`w-3 h-3 rounded flex items-center justify-center text-[7px] font-bold text-white mr-1.5 ${tenantColor(tenant.name)}`}
-                  >
-                    {tenant.name[0]?.toUpperCase()}
-                  </div>
-                  {tenant.name}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ) : (
-          <span className="text-xs text-text-secondary truncate max-w-[120px]">
-            {superAdmin ? 'No orgs' : (user?.name ?? 'Tenant')}
-          </span>
-        )}
-      </div>
-
-      {/* Center: Status indicators */}
-      <div className="flex-1 hidden sm:flex items-center gap-3">
-        {fleet ? (
-          <>
-            {offlineCount > 0 && (
-              <button
-                onClick={() => void navigate({ to: '/' })}
-                className="flex items-center gap-1 text-xs text-error hover:text-error/80 transition-colors"
-              >
-                <span className="w-1.5 h-1.5 rounded-full bg-error" />
-                {offlineCount} down
-              </button>
-            )}
-            {degradedCount > 0 && (
-              <button
-                onClick={() => void navigate({ to: '/' })}
-                className="flex items-center gap-1 text-xs text-warning hover:text-warning/80 transition-colors"
-              >
-                <span className="w-1.5 h-1.5 rounded-full bg-warning" />
-                {degradedCount} degraded
-              </button>
-            )}
-            {offlineCount === 0 && degradedCount === 0 && fleet.length > 0 && (
-              <span className="text-xs text-text-muted">All systems nominal</span>
-            )}
-            {fleet.length === 0 && (
-              <span className="text-xs text-text-muted">No devices</span>
-            )}
-          </>
-        ) : (
-          <span className="text-xs text-text-muted">Status loading...</span>
-        )}
-        {license?.over_limit && (
-          <span className="text-xs font-mono text-error animate-pulse">
-            {license.actual_devices}/{license.licensed_devices} licensed
-          </span>
-        )}
-      </div>
-
-      {/* Right: Actions */}
-      <div className="flex items-center gap-2 ml-auto">
-        {/* Notification bell */}
-        {tenantId && <NotificationBell tenantId={tenantId} />}
-
-        {/* Command palette shortcut */}
-        <button
-          onClick={() => useCommandPalette.getState().setOpen(true)}
-          className="text-[10px] font-mono text-text-muted hover:text-text-secondary border border-border rounded px-1.5 py-0.5 transition-colors"
-          aria-label="Open command palette"
-        >
-          &#8984;K
-        </button>
-
-        {/* Connection status dot */}
-        <div
-          className={`w-1.5 h-1.5 rounded-full ${CONNECTION_COLORS[connectionState]}`}
-          role="status"
-          aria-label={`Connection: ${CONNECTION_LABELS[connectionState]}`}
-          title={CONNECTION_LABELS[connectionState]}
-        />
-
-        {/* Theme toggle */}
-        <button
-          onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-          className="p-1 rounded text-text-muted hover:text-text-primary transition-colors"
-          aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-        >
-          {theme === 'dark' ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
-        </button>
-
-        {/* User avatar dropdown */}
-        <DropdownMenu>
-          <DropdownMenuTrigger className="flex items-center" aria-label="User menu">
-            <div className="w-[22px] h-[22px] rounded-full bg-elevated flex items-center justify-center text-[9px] font-semibold text-text-secondary">
-              {initials}
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>
-              <div className="text-xs font-normal text-text-secondary">{user?.email}</div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem asChild>
-              <Link to="/settings" className="flex items-center gap-2 text-xs">
-                <Settings className="h-3.5 w-3.5" />
-                Settings
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => void handleLogout()} className="text-error text-xs">
-              <LogOut className="h-3.5 w-3.5" />
-              Sign out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 6416cd8..23154e5 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,59 +1,197 @@
 import { useEffect, useRef } from 'react'
 import { APP_VERSION } from '@/lib/version'
-import { Link, useRouterState } from '@tanstack/react-router'
+import { Link, useRouterState, useNavigate } from '@tanstack/react-router'
 import {
   Monitor,
   Building2,
   Users,
   Settings,
-  ChevronLeft,
-  ChevronRight,
-  Download,
+  LayoutDashboard,
+  Wifi,
+  MapPin,
+  Bell,
+  Map,
   Terminal,
   FileCode,
-  LayoutDashboard,
-  ClipboardList,
-  Wifi,
-  BarChart3,
-  MapPin,
-  ShieldCheck,
-  KeyRound,
-  Info,
-  Bell,
-  Network,
-  Map,
-  Layers,
+  Download,
   Wrench,
+  ClipboardList,
+  BellRing,
   Calendar,
   FileBarChart,
-  Eye,
-  BellRing,
+  ShieldCheck,
+  KeyRound,
+  Sun,
+  Moon,
+  LogOut,
+  ChevronDown,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useAuth, isSuperAdmin, isTenantAdmin } from '@/lib/auth'
 import { useUIStore } from '@/lib/store'
+import { useEventStreamContext } from '@/contexts/EventStreamContext'
+import { alertEventsApi, tenantsApi } from '@/lib/api'
+import { useQuery } from '@tanstack/react-query'
 import { RugLogo } from '@/components/brand/RugLogo'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import type { ConnectionState } from '@/hooks/useEventStream'
+
+// ─── Types ──────────────────────────────────────────────────────────────────
 
 interface NavItem {
   label: string
   href: string
   icon: React.FC<{ className?: string }>
   exact?: boolean
+  badge?: number
 }
 
-interface NavSection {
-  label: string
-  items: NavItem[]
-  visible: boolean
+// ─── Constants ──────────────────────────────────────────────────────────────
+
+const SYSTEM_TENANT_ID = '00000000-0000-0000-0000-000000000000'
+
+const CONNECTION_LABELS: Record<ConnectionState, string> = {
+  connected: 'Connected',
+  connecting: 'Connecting',
+  reconnecting: 'Reconnecting',
+  disconnected: 'Disconnected',
 }
 
+// ─── Styles ─────────────────────────────────────────────────────────────────
+
+const navItemBase =
+  'flex items-center gap-2 text-[13px] py-[5px] px-2 pl-[10px] border-l-2 border-transparent transition-[border-color,color] duration-[50ms] linear'
+
+const navItemInactive =
+  'text-text-secondary hover:border-accent'
+
+const navItemActive =
+  'text-text-primary font-medium border-accent bg-accent-soft rounded-r-sm'
+
+const lowFreqBase =
+  'flex items-center gap-2 text-[13px] text-text-muted py-[3px] px-2 pl-[10px] border-l-2 border-transparent transition-[border-color,color] duration-[50ms] linear hover:border-accent'
+
+const iconClass = 'h-4 w-4 text-text-muted flex-shrink-0'
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
 export function Sidebar() {
-  const { user } = useAuth()
-  const { sidebarCollapsed, toggleSidebar, mobileSidebarOpen, setMobileSidebarOpen } = useUIStore()
+  const { user, logout } = useAuth()
+  const {
+    sidebarCollapsed,
+    toggleSidebar,
+    mobileSidebarOpen,
+    setMobileSidebarOpen,
+    selectedTenantId,
+    setSelectedTenantId,
+    theme,
+    setTheme,
+    uiScale,
+    setUIScale,
+  } = useUIStore()
+  const { connectionState } = useEventStreamContext()
   const routerState = useRouterState()
   const currentPath = routerState.location.pathname
+  const navigate = useNavigate()
+  const navRef = useRef<HTMLElement>(null)
+
+  const superAdmin = isSuperAdmin(user)
+  const tenantAdmin = isTenantAdmin(user)
+  const tenantId = superAdmin ? selectedTenantId : user?.tenant_id
+
+  // ─── Queries ────────────────────────────────────────────────────────────
+
+  const { data: tenants } = useQuery({
+    queryKey: ['tenants'],
+    queryFn: tenantsApi.list,
+    enabled: superAdmin,
+    select: (data) => data.filter((t) => t.id !== SYSTEM_TENANT_ID),
+  })
+
+  const selectedTenant = tenants?.find((t) => t.id === selectedTenantId)
+
+  // Auto-select when there's exactly one tenant and nothing selected
+  useEffect(() => {
+    if (superAdmin && tenants && tenants.length === 1 && !selectedTenantId) {
+      setSelectedTenantId(tenants[0].id)
+    }
+  }, [tenants, selectedTenantId, superAdmin, setSelectedTenantId])
+
+  const { data: alertCount } = useQuery({
+    queryKey: ['alert-active-count', tenantId],
+    queryFn: () => alertEventsApi.activeCount(tenantId!),
+    enabled: !!tenantId,
+    refetchInterval: 30_000,
+  })
+
+  // ─── Tenant display name ───────────────────────────────────────────────
+
+  const tenantName = superAdmin
+    ? (selectedTenant?.name ?? 'All Orgs')
+    : (user?.name ?? user?.email ?? 'Tenant')
+
+  // ─── Nav items ────────────────────────────────────────────────────────
+
+  const operateItems: NavItem[] = [
+    { label: 'Overview', href: '/', icon: LayoutDashboard, exact: true },
+    ...(!superAdmin && user?.tenant_id
+      ? [
+          { label: 'Devices', href: `/tenants/${user.tenant_id}/devices`, icon: Monitor },
+          { label: 'Sites', href: `/tenants/${user.tenant_id}/sites`, icon: MapPin },
+        ]
+      : []),
+    {
+      label: 'Alerts',
+      href: '/alerts',
+      icon: Bell,
+      badge: alertCount && alertCount > 0 ? alertCount : undefined,
+    },
+    ...(!superAdmin && user?.tenant_id
+      ? [{ label: 'Wireless', href: `/tenants/${user.tenant_id}/wireless-links`, icon: Wifi }]
+      : [{ label: 'Wireless', href: '/wireless', icon: Wifi }]
+    ),
+    { label: 'Map', href: '/map', icon: Map },
+  ]
+
+  const actItems: NavItem[] = [
+    { label: 'Config', href: '/config-editor', icon: Terminal },
+    { label: 'Templates', href: '/templates', icon: FileCode },
+    { label: 'Firmware', href: '/firmware', icon: Download },
+    { label: 'Commands', href: '/bulk-commands', icon: Wrench },
+  ]
+
+  const lowFreqItems: NavItem[] = [
+    ...(superAdmin || tenantAdmin
+      ? [{ label: 'Organizations', href: '/tenants', icon: Building2 }]
+      : []),
+    ...(tenantAdmin && user?.tenant_id
+      ? [{ label: 'Users', href: `/tenants/${user.tenant_id}/users`, icon: Users }]
+      : []),
+    { label: 'Certificates', href: '/certificates', icon: ShieldCheck },
+    { label: 'VPN', href: '/vpn', icon: KeyRound },
+    { label: 'Alert Rules', href: '/alert-rules', icon: BellRing },
+    { label: 'Maintenance', href: '/maintenance', icon: Calendar },
+    { label: 'Settings', href: '/settings', icon: Settings },
+    { label: 'Audit Log', href: '/audit', icon: ClipboardList },
+    { label: 'Reports', href: '/reports', icon: FileBarChart },
+  ]
+
+  // ─── Active state ─────────────────────────────────────────────────────
+
+  const isActive = (item: NavItem) => {
+    if (item.exact) return currentPath === item.href
+    if (item.href === '/settings')
+      return currentPath === '/settings' || currentPath.startsWith('/settings/')
+    return currentPath.startsWith(item.href) && item.href.length > 1
+  }
+
+  // ─── Focus trap for mobile ───────────────────────────────────────────
 
-  // Mobile sidebar focus trap
   useEffect(() => {
     if (!mobileSidebarOpen) return
 
@@ -86,9 +224,8 @@ export function Sidebar() {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [mobileSidebarOpen, setMobileSidebarOpen])
 
-  const navRef = useRef<HTMLElement>(null)
+  // ─── Keyboard shortcut: [ to toggle ───────────────────────────────────
 
-  // Keyboard toggle: [ key collapses/expands sidebar
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (
@@ -105,262 +242,253 @@ export function Sidebar() {
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [toggleSidebar])
 
-  const sections: NavSection[] = [
-    {
-      label: 'Fleet',
-      visible: true,
-      items: [
-        {
-          label: 'Overview',
-          href: '/',
-          icon: LayoutDashboard,
-          exact: true,
-        },
-        // Only show Devices for non-super_admin with a tenant_id
-        ...(!isSuperAdmin(user) && user?.tenant_id
-          ? [
-              {
-                label: 'Devices',
-                href: `/tenants/${user.tenant_id}/devices`,
-                icon: Monitor,
-              },
-            ]
-          : []),
-        ...(!isSuperAdmin(user) && user?.tenant_id
-          ? [
-              {
-                label: 'Sites',
-                href: `/tenants/${user.tenant_id}/sites`,
-                icon: MapPin,
-              },
-            ]
-          : []),
-        ...(!isSuperAdmin(user) && user?.tenant_id
-          ? [{
-              label: 'Wireless Links',
-              href: `/tenants/${user.tenant_id}/wireless-links`,
-              icon: Wifi,
-            }]
-          : [{
-              label: 'Wireless Links',
-              href: '/wireless',
-              icon: Wifi,
-            }]
-        ),
-        {
-          label: 'Traffic',
-          href: '/traffic',
-          icon: BarChart3,
-        },
-        {
-          label: 'Alerts',
-          href: '/alerts',
-          icon: Bell,
-        },
-        {
-          label: 'Topology',
-          href: '/topology',
-          icon: Network,
-        },
-        {
-          label: 'Map',
-          href: '/map',
-          icon: Map,
-        },
-      ],
-    },
-    {
-      label: 'Config',
-      visible: true,
-      items: [
-        {
-          label: 'Editor',
-          href: '/config-editor',
-          icon: Terminal,
-        },
-        {
-          label: 'Templates',
-          href: '/templates',
-          icon: FileCode,
-        },
-        {
-          label: 'Firmware',
-          href: '/firmware',
-          icon: Download,
-        },
-        {
-          label: 'Certificates',
-          href: '/certificates',
-          icon: ShieldCheck,
-        },
-        {
-          label: 'VPN',
-          href: '/vpn',
-          icon: KeyRound,
-        },
-        {
-          label: 'Batch Config',
-          href: '/batch-config',
-          icon: Layers,
-        },
-        {
-          label: 'Bulk Commands',
-          href: '/bulk-commands',
-          icon: Wrench,
-        },
-      ],
-    },
-    {
-      label: 'Admin',
-      visible: isSuperAdmin(user) || isTenantAdmin(user),
-      items: [
-        ...(isTenantAdmin(user) && user?.tenant_id
-          ? [
-              {
-                label: 'Users',
-                href: `/tenants/${user.tenant_id}/users`,
-                icon: Users,
-              },
-            ]
-          : []),
-        ...(isSuperAdmin(user) || isTenantAdmin(user)
-          ? [
-              {
-                label: 'Organizations',
-                href: '/tenants',
-                icon: Building2,
-              },
-            ]
-          : []),
-        {
-          label: 'Audit Log',
-          href: '/audit',
-          icon: ClipboardList,
-        },
-        {
-          label: 'Settings',
-          href: '/settings',
-          icon: Settings,
-        },
-        {
-          label: 'Alert Rules',
-          href: '/alert-rules',
-          icon: BellRing,
-        },
-        {
-          label: 'Maintenance',
-          href: '/maintenance',
-          icon: Calendar,
-        },
-        {
-          label: 'Reports',
-          href: '/reports',
-          icon: FileBarChart,
-        },
-        {
-          label: 'Transparency',
-          href: '/transparency',
-          icon: Eye,
-        },
-        {
-          label: 'About',
-          href: '/about',
-          icon: Info,
-        },
-      ],
-    },
-  ]
+  // ─── Logout handler ───────────────────────────────────────────────────
 
-  const visibleSections = sections.filter((s) => s.visible)
-
-  const isActive = (item: NavItem) => {
-    if (item.exact) return currentPath === item.href
-    // Settings should only match exact to avoid catching everything
-    if (item.href === '/settings') return currentPath === '/settings' || currentPath.startsWith('/settings/')
-    return currentPath.startsWith(item.href) && item.href.length > 1
+  const handleLogout = async () => {
+    await logout()
+    void navigate({ to: '/login' })
   }
 
-  const sidebarContent = (showCollapsed: boolean) => (
+  // ─── Render helpers ───────────────────────────────────────────────────
+
+  const renderNavItem = (item: NavItem, collapsed: boolean) => {
+    const Icon = item.icon
+    const active = isActive(item)
+    return (
+      <Link
+        key={item.href}
+        to={item.href}
+        onClick={() => setMobileSidebarOpen(false)}
+        data-testid={`nav-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
+        className={cn(
+          collapsed
+            ? 'flex items-center justify-center py-[5px] px-2 border-l-2 border-transparent transition-[border-color,color] duration-[50ms] linear hover:border-accent'
+            : navItemBase,
+          active
+            ? navItemActive
+            : collapsed
+              ? 'text-text-secondary'
+              : navItemInactive,
+        )}
+        title={collapsed ? item.label : undefined}
+        aria-label={collapsed ? item.label : undefined}
+        aria-current={active ? 'page' : undefined}
+      >
+        <Icon className={iconClass} aria-hidden="true" />
+        {!collapsed && (
+          <span className="truncate flex-1">{item.label}</span>
+        )}
+        {!collapsed && item.badge !== undefined && item.badge > 0 && (
+          <span className="text-[8px] font-semibold font-mono bg-alert-badge text-background px-1.5 rounded-sm leading-4">
+            {item.badge}
+          </span>
+        )}
+      </Link>
+    )
+  }
+
+  const renderLowFreqItem = (item: NavItem, collapsed: boolean) => {
+    const Icon = item.icon
+    const active = isActive(item)
+    return (
+      <Link
+        key={item.href}
+        to={item.href}
+        onClick={() => setMobileSidebarOpen(false)}
+        data-testid={`nav-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
+        className={cn(
+          collapsed
+            ? 'flex items-center justify-center py-[3px] px-2 border-l-2 border-transparent transition-[border-color,color] duration-[50ms] linear hover:border-accent'
+            : lowFreqBase,
+          active && navItemActive,
+        )}
+        title={collapsed ? item.label : undefined}
+        aria-label={collapsed ? item.label : undefined}
+        aria-current={active ? 'page' : undefined}
+      >
+        <Icon className={iconClass} aria-hidden="true" />
+        {!collapsed && <span className="truncate">{item.label}</span>}
+      </Link>
+    )
+  }
+
+  // ─── Sidebar content ─────────────────────────────────────────────────
+
+  const sidebarContent = (collapsed: boolean) => (
     <>
-      {/* Logo */}
+      {/* Logo area */}
       <div
         className={cn(
-          'flex items-center h-12 px-3 border-b border-border',
-          showCollapsed ? 'justify-center' : 'gap-2',
+          'flex items-center border-b border-border-subtle px-3 py-2',
+          collapsed ? 'justify-center h-12' : 'gap-2 min-h-[48px]',
         )}
       >
-        <RugLogo size={showCollapsed ? 24 : 28} className="flex-shrink-0" />
-        {!showCollapsed && (
-          <span className="text-sm font-semibold text-text-primary truncate">
-            TOD
-          </span>
+        <RugLogo size={collapsed ? 24 : 28} className="flex-shrink-0" />
+        {!collapsed && (
+          <div className="min-w-0">
+            <span className="text-sm font-semibold text-text-primary">TOD</span>
+            <div className="text-[8px] text-text-muted truncate">{tenantName}</div>
+          </div>
         )}
       </div>
 
-      {/* Navigation */}
-      <nav ref={navRef} data-slot="fleet-nav" className="flex-1 py-2 overflow-y-auto">
-        {visibleSections.map((section, sectionIdx) => (
-          <div key={section.label}>
-            {showCollapsed && sectionIdx > 0 && (
-              <div className="mx-2 my-1 border-t border-border" />
-            )}
-            {!showCollapsed && (
-              <div className="px-3 pt-4 pb-1 text-[10px] font-semibold uppercase tracking-wider text-text-muted">
-                {section.label}
-              </div>
-            )}
-            {section.items.map((item) => {
-              const Icon = item.icon
-              const active = isActive(item)
-              return (
-                <Link
-                  key={`${section.label}-${item.label}`}
-                  to={item.href}
-                  onClick={() => setMobileSidebarOpen(false)}
-                  data-testid={`nav-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
-                  className={cn(
-                    'flex items-center gap-2.5 px-3 py-2 mx-1 rounded-md text-sm transition-colors min-h-[44px]',
-                    active
-                      ? 'bg-[hsl(var(--accent-muted))] text-accent rounded-md'
-                      : 'text-text-muted hover:text-text-primary hover:bg-elevated/50 rounded-md',
-                    showCollapsed && 'justify-center px-0',
-                  )}
-                  title={showCollapsed ? item.label : undefined}
-                  aria-label={showCollapsed ? item.label : undefined}
-                  aria-current={active ? 'page' : undefined}
+      {/* Tenant selector (super_admin only) */}
+      {superAdmin && !collapsed && tenants && tenants.length > 0 && (
+        <div className="px-3 py-2 border-b border-border-subtle">
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center gap-1.5 w-full text-[11px] text-text-secondary hover:text-text-primary transition-[color] duration-[50ms] linear">
+              <span className="truncate flex-1 text-left">{tenantName}</span>
+              <ChevronDown className="h-3 w-3 flex-shrink-0 text-text-muted" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" sideOffset={4}>
+              <DropdownMenuItem
+                onClick={() => setSelectedTenantId(null)}
+                className="text-xs"
+              >
+                All Orgs
+              </DropdownMenuItem>
+              {tenants.map((tenant) => (
+                <DropdownMenuItem
+                  key={tenant.id}
+                  onClick={() => setSelectedTenantId(tenant.id)}
+                  className="text-xs"
                 >
-                  <Icon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
-                  {!showCollapsed && (
-                    <span className="truncate">{item.label}</span>
-                  )}
-                </Link>
-              )
-            })}
-          </div>
-        ))}
-      </nav>
-
-      {/* Version identifier */}
-      {!showCollapsed && (
-        <div className="px-3 py-1 text-center">
-          <span className="font-mono text-[9px] text-text-muted">TOD {APP_VERSION}</span>
+                  {tenant.name}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       )}
+      {superAdmin && collapsed && (
+        <div className="border-b border-border-subtle" />
+      )}
 
-      {/* Collapse toggle (hidden on mobile) */}
-      <button
-        onClick={toggleSidebar}
-        className="hidden lg:flex items-center justify-center h-10 border-t border-border text-text-muted hover:text-text-secondary transition-colors"
-        title={showCollapsed ? 'Expand sidebar ([)' : 'Collapse sidebar ([)'}
-        aria-label={showCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        data-testid="sidebar-toggle"
-      >
-        {showCollapsed ? (
-          <ChevronRight className="h-4 w-4" />
-        ) : (
-          <ChevronLeft className="h-4 w-4" />
+      {/* Main navigation */}
+      <nav ref={navRef} data-slot="fleet-nav" className="flex-1 overflow-y-auto py-2">
+        {/* operate section */}
+        {!collapsed && (
+          <div className="text-[7px] uppercase tracking-[3px] text-text-label pl-[10px] mb-2">
+            operate
+          </div>
         )}
-      </button>
+        {operateItems.map((item) => renderNavItem(item, collapsed))}
+
+        {/* Hairline separator */}
+        <div className="mx-2 my-2 border-t border-border-subtle" />
+
+        {/* act section */}
+        {!collapsed && (
+          <div className="text-[7px] uppercase tracking-[3px] text-text-label pl-[10px] mb-2">
+            act
+          </div>
+        )}
+        {actItems.map((item) => renderNavItem(item, collapsed))}
+
+        {/* Low-frequency items separator */}
+        <div className="mx-2 my-2 border-t border-border-subtle" />
+
+        {/* Low-frequency items */}
+        {lowFreqItems.map((item) => renderLowFreqItem(item, collapsed))}
+      </nav>
+
+      {/* Footer */}
+      <div className="border-t border-border-subtle px-3 py-2">
+        {!collapsed ? (
+          <>
+            {/* User row: email + theme + logout */}
+            <div className="flex items-center gap-1.5 mb-1">
+              <span className="text-[8px] text-text-muted truncate flex-1">
+                {user?.email}
+              </span>
+              <button
+                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                className="p-0.5 text-text-muted hover:text-text-secondary transition-[color] duration-[50ms] linear"
+                aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+              >
+                {theme === 'dark' ? (
+                  <Sun className="h-3 w-3" />
+                ) : (
+                  <Moon className="h-3 w-3" />
+                )}
+              </button>
+              <button
+                onClick={() => void handleLogout()}
+                className="p-0.5 text-text-muted hover:text-text-secondary transition-[color] duration-[50ms] linear"
+                aria-label="Sign out"
+              >
+                <LogOut className="h-3 w-3" />
+              </button>
+            </div>
+            {/* Scale selector */}
+            <div className="flex items-center gap-px rounded-[var(--radius-control)] border border-border-subtle overflow-hidden mb-1">
+              {([100, 110, 125] as const).map((s) => (
+                <button
+                  key={s}
+                  onClick={() => setUIScale(s)}
+                  className={cn(
+                    'flex-1 text-[8px] py-px text-center transition-[background-color,color] duration-[50ms]',
+                    uiScale === s
+                      ? 'bg-accent-soft text-text-primary font-medium'
+                      : 'text-text-muted hover:text-text-secondary',
+                  )}
+                >
+                  {s}%
+                </button>
+              ))}
+            </div>
+            {/* Connection + version row */}
+            <div className="flex items-center gap-1.5">
+              <span
+                className={cn(
+                  'w-[5px] h-[5px] rounded-full flex-shrink-0',
+                  connectionState === 'connected' ? 'bg-online' : 'bg-offline',
+                  (connectionState === 'connecting' || connectionState === 'reconnecting') && 'animate-pulse',
+                )}
+                role="status"
+                aria-label={`Connection: ${CONNECTION_LABELS[connectionState]}`}
+              />
+              <span className="text-[8px] text-text-muted">
+                {CONNECTION_LABELS[connectionState]}
+              </span>
+              <span className="text-[8px] text-text-muted font-mono ml-auto">
+                {APP_VERSION}
+              </span>
+            </div>
+          </>
+        ) : (
+          /* Collapsed footer: just connection dot and theme toggle */
+          <div className="flex flex-col items-center gap-2">
+            <button
+              onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+              className="p-0.5 text-text-muted hover:text-text-secondary transition-[color] duration-[50ms] linear"
+              aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+            >
+              {theme === 'dark' ? (
+                <Sun className="h-3 w-3" />
+              ) : (
+                <Moon className="h-3 w-3" />
+              )}
+            </button>
+            <button
+              onClick={() => void handleLogout()}
+              className="p-0.5 text-text-muted hover:text-text-secondary transition-[color] duration-[50ms] linear"
+              aria-label="Sign out"
+            >
+              <LogOut className="h-3 w-3" />
+            </button>
+            <span
+              className={cn(
+                'w-[5px] h-[5px] rounded-full',
+                connectionState === 'connected' ? 'bg-online' : 'bg-offline',
+                (connectionState === 'connecting' || connectionState === 'reconnecting') && 'animate-pulse',
+              )}
+              role="status"
+              aria-label={`Connection: ${CONNECTION_LABELS[connectionState]}`}
+            />
+          </div>
+        )}
+      </div>
     </>
   )
 
@@ -371,13 +499,15 @@ export function Sidebar() {
         data-testid="sidebar"
         data-sidebar
         className={cn(
-          'hidden lg:flex flex-col border-r border-border bg-sidebar transition-all duration-200',
-          sidebarCollapsed ? 'w-14' : 'w-[180px]',
+          'hidden lg:flex flex-col border-r border-border-default bg-sidebar transition-[width] duration-200',
+          sidebarCollapsed ? 'w-14' : 'w-[172px]',
         )}
       >
         {sidebarContent(sidebarCollapsed)}
       </aside>
 
+      {/* Mobile hamburger (rendered outside sidebar for AppLayout) */}
+
       {/* Mobile overlay */}
       {mobileSidebarOpen && (
         <>
@@ -390,7 +520,7 @@ export function Sidebar() {
             role="dialog"
             aria-modal="true"
             aria-label="Navigation"
-            className="lg:hidden fixed inset-y-0 left-0 z-50 w-[180px] flex flex-col bg-sidebar border-r border-border"
+            className="lg:hidden fixed inset-y-0 left-0 z-50 w-[172px] flex flex-col bg-sidebar border-r border-border-default"
           >
             {sidebarContent(false)}
           </aside>
diff --git a/frontend/src/components/maintenance/MaintenanceList.tsx b/frontend/src/components/maintenance/MaintenanceList.tsx
index 0c44b76..ea07e83 100644
--- a/frontend/src/components/maintenance/MaintenanceList.tsx
+++ b/frontend/src/components/maintenance/MaintenanceList.tsx
@@ -99,13 +99,8 @@ export function MaintenanceList({ tenantId }: MaintenanceListProps) {
 
   if (isLoading) {
     return (
-      <div className="space-y-4">
-        {[1, 2, 3].map((i) => (
-          <div
-            key={i}
-            className="h-20 rounded-lg border border-border bg-surface animate-pulse"
-          />
-        ))}
+      <div className="py-8 text-center">
+        <span className="text-[9px] text-text-muted">Loading&hellip;</span>
       </div>
     )
   }
@@ -266,7 +261,7 @@ function WindowCard({
 
   return (
     <div
-      className={`rounded-lg border border-border bg-surface p-3 ${
+      className={`rounded-lg border border-border bg-panel p-3 ${
         isPast ? 'opacity-60' : ''
       }`}
     >
diff --git a/frontend/src/components/map/MapPage.tsx b/frontend/src/components/map/MapPage.tsx
index ed050ea..8a88062 100644
--- a/frontend/src/components/map/MapPage.tsx
+++ b/frontend/src/components/map/MapPage.tsx
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query'
 import { MapPin } from 'lucide-react'
 import { metricsApi, tenantsApi } from '@/lib/api'
 import { useAuth, isSuperAdmin } from '@/lib/auth'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import { FleetMap } from './FleetMap'
 
 export function MapPage() {
@@ -55,7 +55,11 @@ export function MapPage() {
   }, [superAdmin, selectedTenant, user])
 
   if (devicesLoading) {
-    return <Skeleton className="h-[calc(100vh-8rem)] w-full rounded-lg" />
+    return (
+      <div className="flex items-center justify-center h-[calc(100vh-8rem)]">
+        <LoadingText />
+      </div>
+    )
   }
 
   if (devicesError) {
@@ -88,7 +92,7 @@ export function MapPage() {
           <select
             value={selectedTenant}
             onChange={(e) => setSelectedTenant(e.target.value)}
-            className="text-xs bg-elevated/50 border border-border text-text-primary rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-border-bright"
+            className="text-xs bg-elevated/50 border border-border text-text-primary rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-border-default"
           >
             <option value="all">All Organizations</option>
             {tenants.map((t) => (
diff --git a/frontend/src/components/monitoring/HealthChart.tsx b/frontend/src/components/monitoring/HealthChart.tsx
index 4dd1b27..378edba 100644
--- a/frontend/src/components/monitoring/HealthChart.tsx
+++ b/frontend/src/components/monitoring/HealthChart.tsx
@@ -33,7 +33,7 @@ function CustomTooltip({
 }: { active?: boolean; payload?: Array<{ value?: number }>; label?: string; unit: string }) {
   if (!active || !payload?.length) return null
   return (
-    <div className="rounded border border-border bg-surface px-2 py-1.5 text-xs text-text-primary">
+    <div className="rounded border border-border bg-panel px-2 py-1.5 text-xs text-text-primary">
       <div className="mb-1 text-text-muted">{label}</div>
       <div>
         {(payload[0].value ?? 0).toFixed(1)}
@@ -64,10 +64,10 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
               <stop offset="100%" stopColor={color} stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
           <XAxis
             dataKey="bucket"
-            tick={{ fontSize: 9, fill: '#94a3b8' }}
+            tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             interval="preserveStartEnd"
@@ -75,7 +75,7 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
           <YAxis
             domain={domain}
             tickFormatter={(v: number) => `${v}${unit}`}
-            tick={{ fontSize: 9, fill: '#94a3b8' }}
+            tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             width={40}
diff --git a/frontend/src/components/monitoring/HealthTab.tsx b/frontend/src/components/monitoring/HealthTab.tsx
index fbdc62c..b53c90e 100644
--- a/frontend/src/components/monitoring/HealthTab.tsx
+++ b/frontend/src/components/monitoring/HealthTab.tsx
@@ -41,28 +41,26 @@ export function HealthTab({ tenantId, deviceId, active = true }: HealthTabProps)
       />
 
       {isLoading ? (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          {[0, 1, 2, 3].map((i) => (
-            <div key={i} className="rounded-lg border border-border bg-surface p-4 h-44 animate-pulse" />
-          ))}
+        <div className="py-8 text-center">
+          <span className="text-[9px] text-text-muted">Loading&hellip;</span>
         </div>
       ) : !data || data.length === 0 ? (
-        <div className="rounded-lg border border-border bg-surface p-8 text-center text-sm text-text-muted">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center text-sm text-text-muted">
           No health metrics data available for the selected time range.
         </div>
       ) : (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          <div className="rounded-lg border border-border bg-surface p-4">
+          <div className="rounded-lg border border-border bg-panel p-4">
             <HealthChart
               data={data}
               metric="avg_cpu"
               label="CPU Load"
-              color="#38BDF8"
+              color="hsl(var(--accent))"
               unit="%"
               maxY={100}
             />
           </div>
-          <div className="rounded-lg border border-border bg-surface p-4">
+          <div className="rounded-lg border border-border bg-panel p-4">
             <HealthChart
               data={data}
               metric="avg_mem_pct"
@@ -72,7 +70,7 @@ export function HealthTab({ tenantId, deviceId, active = true }: HealthTabProps)
               maxY={100}
             />
           </div>
-          <div className="rounded-lg border border-border bg-surface p-4">
+          <div className="rounded-lg border border-border bg-panel p-4">
             <HealthChart
               data={data}
               metric="avg_disk_pct"
@@ -82,7 +80,7 @@ export function HealthTab({ tenantId, deviceId, active = true }: HealthTabProps)
               maxY={100}
             />
           </div>
-          <div className="rounded-lg border border-border bg-surface p-4">
+          <div className="rounded-lg border border-border bg-panel p-4">
             <HealthChart
               data={data}
               metric="avg_temp"
diff --git a/frontend/src/components/monitoring/InterfacesTab.tsx b/frontend/src/components/monitoring/InterfacesTab.tsx
index f2dadd3..af86476 100644
--- a/frontend/src/components/monitoring/InterfacesTab.tsx
+++ b/frontend/src/components/monitoring/InterfacesTab.tsx
@@ -87,13 +87,11 @@ export function InterfacesTab({ tenantId, deviceId, active = true }: InterfacesT
 
       {/* Charts */}
       {isLoading ? (
-        <div className="space-y-4">
-          {[0, 1, 2].map((i) => (
-            <div key={i} className="rounded-lg border border-border bg-surface p-4 h-56 animate-pulse" />
-          ))}
+        <div className="py-8 text-center">
+          <span className="text-[9px] text-text-muted">Loading&hellip;</span>
         </div>
       ) : !trafficData || trafficData.length === 0 ? (
-        <div className="rounded-lg border border-border bg-surface p-8 text-center text-sm text-text-muted">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center text-sm text-text-muted">
           {interfaces && interfaces.length === 0
             ? 'No interfaces discovered for this device.'
             : 'No traffic data available for the selected time range.'}
@@ -103,7 +101,7 @@ export function InterfacesTab({ tenantId, deviceId, active = true }: InterfacesT
           {interfaceNames.map((ifaceName) => {
             const ifaceData = byInterface.get(ifaceName) ?? []
             return (
-              <div key={ifaceName} className="rounded-lg border border-border bg-surface p-4">
+              <div key={ifaceName} className="rounded-lg border border-border bg-panel p-4">
                 <TrafficChart data={ifaceData} interfaceName={ifaceName} />
               </div>
             )
diff --git a/frontend/src/components/monitoring/Sparkline.tsx b/frontend/src/components/monitoring/Sparkline.tsx
index 9400b65..4f86ba1 100644
--- a/frontend/src/components/monitoring/Sparkline.tsx
+++ b/frontend/src/components/monitoring/Sparkline.tsx
@@ -7,7 +7,7 @@ interface SparklineProps {
   height?: number
 }
 
-export function Sparkline({ data, color = '#38BDF8', width = 60, height = 24 }: SparklineProps) {
+export function Sparkline({ data, color = 'hsl(var(--accent))', width = 60, height = 24 }: SparklineProps) {
   const chartData = data.map((v, i) => ({ v, i }))
   return (
     <LineChart width={width} height={height} data={chartData}>
diff --git a/frontend/src/components/monitoring/TimeRangeSelector.tsx b/frontend/src/components/monitoring/TimeRangeSelector.tsx
index c78d04e..a9bbb56 100644
--- a/frontend/src/components/monitoring/TimeRangeSelector.tsx
+++ b/frontend/src/components/monitoring/TimeRangeSelector.tsx
@@ -101,7 +101,7 @@ export function TimeRangeSelector({
             className={cn(
               'px-2.5 py-1 text-xs rounded border transition-colors',
               value === preset
-                ? 'bg-elevated border-border-bright text-text-primary'
+                ? 'bg-elevated border-border-default text-text-primary'
                 : 'bg-transparent border-border/50 text-text-primary/40 hover:text-text-primary/60 hover:border-border',
             )}
           >
@@ -113,7 +113,7 @@ export function TimeRangeSelector({
           className={cn(
             'px-2.5 py-1 text-xs rounded border transition-colors',
             value === 'custom'
-              ? 'bg-elevated border-border-bright text-text-primary'
+              ? 'bg-elevated border-border-default text-text-primary'
               : 'bg-transparent border-border/50 text-text-primary/40 hover:text-text-primary/60 hover:border-border',
           )}
         >
diff --git a/frontend/src/components/monitoring/TrafficChart.tsx b/frontend/src/components/monitoring/TrafficChart.tsx
index d9ba2f0..1da3437 100644
--- a/frontend/src/components/monitoring/TrafficChart.tsx
+++ b/frontend/src/components/monitoring/TrafficChart.tsx
@@ -36,7 +36,7 @@ function formatBucket(bucket: string, useDate: boolean): string {
 function CustomTooltip({ active, payload, label }: { active?: boolean; payload?: Array<{ value?: number; dataKey?: string; name?: string; color?: string }>; label?: string }) {
   if (!active || !payload?.length) return null
   return (
-    <div className="rounded border border-border bg-surface px-2 py-1.5 text-xs text-text-primary">
+    <div className="rounded border border-border bg-panel px-2 py-1.5 text-xs text-text-primary">
       <div className="mb-1 text-text-muted">{label}</div>
       {payload.map((entry) => (
         <div key={entry.dataKey} className="flex items-center gap-2">
@@ -70,25 +70,25 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
         <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
           <defs>
             <linearGradient id={`rx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor="#38BDF8" stopOpacity={0.3} />
-              <stop offset="100%" stopColor="#38BDF8" stopOpacity={0} />
+              <stop offset="0%" stopColor="hsl(var(--accent))" stopOpacity={0.3} />
+              <stop offset="100%" stopColor="hsl(var(--accent))" stopOpacity={0} />
             </linearGradient>
             <linearGradient id={`tx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="0%" stopColor="#4ADE80" stopOpacity={0.3} />
               <stop offset="100%" stopColor="#4ADE80" stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
           <XAxis
             dataKey="bucket"
-            tick={{ fontSize: 10, fill: '#94a3b8' }}
+            tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             interval="preserveStartEnd"
           />
           <YAxis
             tickFormatter={formatBps}
-            tick={{ fontSize: 10, fill: '#94a3b8' }}
+            tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
             axisLine={false}
             tickLine={false}
             width={60}
@@ -98,7 +98,7 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
             type="monotone"
             dataKey="avg_rx_bps"
             name="avg_rx_bps"
-            stroke="#38BDF8"
+            stroke="hsl(var(--accent))"
             strokeWidth={1.5}
             fill={`url(#rx-grad-${interfaceName})`}
           />
diff --git a/frontend/src/components/monitoring/WirelessTab.tsx b/frontend/src/components/monitoring/WirelessTab.tsx
index 600f2d8..048a111 100644
--- a/frontend/src/components/monitoring/WirelessTab.tsx
+++ b/frontend/src/components/monitoring/WirelessTab.tsx
@@ -38,7 +38,7 @@ function ClientCountMiniChart({ data }: { data: WirelessMetricPoint[] }) {
             <stop offset="100%" stopColor="#A78BFA" stopOpacity={0} />
           </linearGradient>
         </defs>
-        <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
         <XAxis dataKey="bucket" hide />
         <Area
           type="monotone"
@@ -57,7 +57,7 @@ function WirelessInterfaceCard({ section }: { section: WirelessInterfaceSection
   const { interfaceName, latest, history } = section
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-4 space-y-3">
+    <div className="rounded-lg border border-border bg-panel p-4 space-y-3">
       {/* Interface name header */}
       <h3 className="text-sm font-medium text-text-primary">{interfaceName}</h3>
 
@@ -159,13 +159,11 @@ export function WirelessTab({ tenantId, deviceId, active = true }: WirelessTabPr
       />
 
       {isLoading ? (
-        <div className="space-y-4">
-          {[0, 1].map((i) => (
-            <div key={i} className="rounded-lg border border-border bg-surface p-4 h-48 animate-pulse" />
-          ))}
+        <div className="py-8 text-center">
+          <span className="text-[9px] text-text-muted">Loading&hellip;</span>
         </div>
       ) : hasNoWireless ? (
-        <div className="rounded-lg border border-border bg-surface p-8 text-center text-sm text-text-muted">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center text-sm text-text-muted">
           No wireless interfaces detected on this device.
         </div>
       ) : (
diff --git a/frontend/src/components/network/ClientsTab.tsx b/frontend/src/components/network/ClientsTab.tsx
index 066fb1a..446eedd 100644
--- a/frontend/src/components/network/ClientsTab.tsx
+++ b/frontend/src/components/network/ClientsTab.tsx
@@ -171,7 +171,7 @@ export function ClientsTab({ tenantId, deviceId, active }: ClientsTabProps) {
 
   // Loading state
   if (isLoading) {
-    return <TableSkeleton rows={8} />
+    return <TableSkeleton />
   }
 
   // Error state
@@ -246,7 +246,7 @@ export function ClientsTab({ tenantId, deviceId, active }: ClientsTabProps) {
         <div className="overflow-x-auto rounded-lg border border-border">
           <table className="w-full text-sm">
             <thead>
-              <tr className="bg-surface text-text-secondary text-left">
+              <tr className="bg-panel text-text-secondary text-left">
                 {/* Expand chevron column */}
                 <th className="w-8 px-3 py-2.5" />
 
diff --git a/frontend/src/components/network/InterfaceGauges.tsx b/frontend/src/components/network/InterfaceGauges.tsx
index 0f319e4..554be9f 100644
--- a/frontend/src/components/network/InterfaceGauges.tsx
+++ b/frontend/src/components/network/InterfaceGauges.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { metricsApi, type InterfaceMetricPoint } from '@/lib/api'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 
 interface InterfaceGaugesProps {
   tenantId: string
@@ -101,21 +101,15 @@ export function InterfaceGauges({ tenantId, deviceId, active }: InterfaceGaugesP
 
   if (isLoading) {
     return (
-      <div className="space-y-3">
-        {[0, 1, 2].map((i) => (
-          <div key={i} className="rounded-lg border border-border bg-surface p-3">
-            <Skeleton className="h-4 w-24 mb-2" />
-            <Skeleton className="h-3 w-full mb-1" />
-            <Skeleton className="h-3 w-full" />
-          </div>
-        ))}
+      <div className="py-8 text-center">
+        <LoadingText />
       </div>
     )
   }
 
   if (!interfaces || interfaces.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-6 text-center text-sm text-text-muted">
+      <div className="rounded-lg border border-border bg-panel p-6 text-center text-sm text-text-muted">
         No interface data available.
       </div>
     )
@@ -149,7 +143,7 @@ export function InterfaceGauges({ tenantId, deviceId, active }: InterfaceGaugesP
         const values = latestByIface.get(ifaceName) ?? { rx: 0, tx: 0 }
 
         return (
-          <div key={ifaceName} className="rounded-lg border border-border bg-surface p-3">
+          <div key={ifaceName} className="rounded-lg border border-border bg-panel p-3">
             <div className="flex items-center justify-between mb-1.5">
               <span className="text-sm font-medium text-text-primary">{ifaceName}</span>
               <span className="text-[10px] text-text-muted">
diff --git a/frontend/src/components/network/LogsTab.tsx b/frontend/src/components/network/LogsTab.tsx
index 8818e2d..2d10b93 100644
--- a/frontend/src/components/network/LogsTab.tsx
+++ b/frontend/src/components/network/LogsTab.tsx
@@ -2,7 +2,7 @@ import { useState, useMemo, useCallback, useRef, useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Search, RefreshCw } from 'lucide-react'
 import { networkApi, type LogEntry } from '@/lib/networkApi'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 
 interface LogsTabProps {
   tenantId: string
@@ -62,16 +62,10 @@ function TopicBadge({ topics }: { topics: string }) {
   )
 }
 
-function TableSkeleton() {
+function TableLoading() {
   return (
-    <div className="space-y-1">
-      {Array.from({ length: 8 }).map((_, i) => (
-        <div key={i} className="flex gap-3 py-2 px-3">
-          <Skeleton className="h-4 w-32 shrink-0" />
-          <Skeleton className="h-4 w-20 shrink-0" />
-          <Skeleton className="h-4 flex-1" />
-        </div>
-      ))}
+    <div className="py-8 text-center">
+      <LoadingText />
     </div>
   )
 }
@@ -187,9 +181,9 @@ export function LogsTab({ tenantId, deviceId, active }: LogsTabProps) {
       </div>
 
       {/* Log table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         {isLoading ? (
-          <TableSkeleton />
+          <TableLoading />
         ) : error ? (
           <div className="p-6 text-center text-sm text-error">
             Failed to fetch device logs. The device may be offline or unreachable.
diff --git a/frontend/src/components/network/TopologyMap.tsx b/frontend/src/components/network/TopologyMap.tsx
index ce3a161..a5e7508 100644
--- a/frontend/src/components/network/TopologyMap.tsx
+++ b/frontend/src/components/network/TopologyMap.tsx
@@ -99,7 +99,7 @@ function DeviceNode({ data }: NodeProps<DeviceNodeData>) {
   return (
     <div
       className={cn(
-        'rounded-lg border bg-surface px-3 py-2 min-w-[180px]',
+        'rounded-lg border bg-panel px-3 py-2 min-w-[180px]',
         'transition-colors',
         isOnline ? 'border-border' : 'border-error/30',
       )}
@@ -339,7 +339,7 @@ export function TopologyMap({ tenantId }: TopologyMapProps) {
       >
         <Background color="hsl(var(--muted))" gap={20} size={1} />
         <Controls
-          className="!bg-surface !border-border [&>button]:!bg-surface [&>button]:!border-border [&>button]:!text-text-secondary [&>button:hover]:!bg-elevated"
+          className="!bg-panel !border-border [&>button]:!bg-panel [&>button]:!border-border [&>button]:!text-text-secondary [&>button:hover]:!bg-elevated"
         />
         <MiniMap
           nodeColor={(node) => {
@@ -349,7 +349,7 @@ export function TopologyMap({ tenantId }: TopologyMapProps) {
               : 'hsl(var(--error))'
           }}
           maskColor="hsl(var(--background) / 0.7)"
-          className="!bg-surface !border-border"
+          className="!bg-panel !border-border"
         />
       </ReactFlow>
 
@@ -357,7 +357,7 @@ export function TopologyMap({ tenantId }: TopologyMapProps) {
       {tooltip && <NodeTooltip data={tooltip} onClose={() => setTooltip(null)} />}
 
       {/* Legend */}
-      <div className="absolute bottom-4 left-4 rounded-lg border border-border bg-surface/90 backdrop-blur-sm px-3 py-2 text-xs text-text-muted">
+      <div className="absolute bottom-4 left-4 rounded-lg border border-border bg-panel/90 backdrop-blur-sm px-3 py-2 text-xs text-text-muted">
         <div className="flex items-center gap-4">
           <span className="flex items-center gap-1.5">
             <span className="h-2 w-2 rounded-full bg-success" /> Online
diff --git a/frontend/src/components/network/VpnTab.tsx b/frontend/src/components/network/VpnTab.tsx
index 2e3dac6..2ef43cf 100644
--- a/frontend/src/components/network/VpnTab.tsx
+++ b/frontend/src/components/network/VpnTab.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { Shield, Lock, Globe } from 'lucide-react'
 import { networkApi, type VpnTunnel } from '@/lib/networkApi'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import { Badge } from '@/components/ui/badge'
 
 interface VpnTabProps {
@@ -26,17 +26,17 @@ const VPN_TYPE_CONFIG = {
   wireguard: {
     icon: Shield,
     label: 'WireGuard',
-    color: '#a855f7', // purple
+    color: 'hsl(var(--accent))',
   },
   ipsec: {
     icon: Lock,
     label: 'IPsec',
-    color: '#3b82f6', // blue
+    color: 'hsl(var(--info))',
   },
   l2tp: {
     icon: Globe,
     label: 'L2TP',
-    color: '#22c55e', // green
+    color: 'hsl(var(--success))',
   },
 } as const
 
@@ -102,17 +102,15 @@ export function VpnTab({ tenantId, deviceId, active }: VpnTabProps) {
 
   if (isLoading) {
     return (
-      <div className="mt-4 space-y-2">
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
-        <Skeleton className="h-10 w-full" />
+      <div className="mt-4 py-8 text-center">
+        <LoadingText />
       </div>
     )
   }
 
   if (error) {
     return (
-      <div className="mt-4 rounded-lg border border-border bg-surface p-6 text-center text-sm text-error">
+      <div className="mt-4 rounded-lg border border-border bg-panel p-6 text-center text-sm text-error">
         Failed to load VPN tunnels. The device may not support this feature.
       </div>
     )
@@ -120,7 +118,7 @@ export function VpnTab({ tenantId, deviceId, active }: VpnTabProps) {
 
   if (!data || data.tunnels.length === 0) {
     return (
-      <div className="mt-4 rounded-lg border border-border bg-surface p-8 text-center">
+      <div className="mt-4 rounded-lg border border-border bg-panel p-8 text-center">
         <Shield className="w-10 h-10 mx-auto mb-3 text-text-muted opacity-40" />
         <p className="text-sm font-medium text-text-primary mb-1">
           No active VPN tunnels
@@ -134,7 +132,7 @@ export function VpnTab({ tenantId, deviceId, active }: VpnTabProps) {
   }
 
   return (
-    <div className="mt-4 rounded-lg border border-border bg-surface overflow-hidden">
+    <div className="mt-4 rounded-lg border border-border bg-panel overflow-hidden">
       <table className="w-full text-left">
         <thead>
           <tr className="border-b border-border bg-elevated/50">
diff --git a/frontend/src/components/operations/BulkCommandWizard.tsx b/frontend/src/components/operations/BulkCommandWizard.tsx
index fc4159d..1f54033 100644
--- a/frontend/src/components/operations/BulkCommandWizard.tsx
+++ b/frontend/src/components/operations/BulkCommandWizard.tsx
@@ -251,7 +251,7 @@ export function BulkCommandWizard({ tenantId }: BulkCommandWizardProps) {
 
       {/* Step 2: Enter Command */}
       {step === 2 && (
-        <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+        <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
           <div>
             <h3 className="text-sm font-semibold">Enter RouterOS Command</h3>
             <p className="text-xs text-text-muted mt-0.5">
@@ -294,7 +294,7 @@ export function BulkCommandWizard({ tenantId }: BulkCommandWizardProps) {
 
       {/* Step 3: Review & Execute */}
       {step === 3 && (
-        <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+        <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
           <div>
             <h3 className="text-sm font-semibold">Review & Execute</h3>
             <p className="text-xs text-text-muted mt-0.5">
@@ -336,7 +336,7 @@ export function BulkCommandWizard({ tenantId }: BulkCommandWizardProps) {
             <div className="rounded-lg border border-border overflow-hidden">
               <table className="w-full text-sm">
                 <thead>
-                  <tr className="border-b border-border bg-surface">
+                  <tr className="border-b border-border bg-panel">
                     <th className="text-left px-3 py-2 text-xs font-medium text-text-muted">
                       Device
                     </th>
@@ -611,11 +611,11 @@ function DeviceSelectionStep({
   }
 
   if (devicesLoading) {
-    return <TableSkeleton rows={5} />
+    return <TableSkeleton />
   }
 
   return (
-    <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+    <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
       <div>
         <h3 className="text-sm font-semibold">Select Target Devices</h3>
         <p className="text-xs text-text-muted mt-0.5">
@@ -641,7 +641,7 @@ function DeviceSelectionStep({
             className={cn(
               'flex-1 px-3 py-1.5 rounded text-xs font-medium transition-colors',
               mode === opt.value
-                ? 'bg-surface text-text-primary shadow-sm'
+                ? 'bg-panel text-text-primary shadow-sm'
                 : 'text-text-muted hover:text-text-secondary',
             )}
           >
@@ -699,7 +699,7 @@ function DeviceSelectionStep({
         <div className="rounded-md border border-border/50 overflow-hidden max-h-72 overflow-y-auto">
           <table className="w-full text-sm">
             <thead className="sticky top-0">
-              <tr className="border-b border-border bg-surface">
+              <tr className="border-b border-border bg-panel">
                 <th className="px-3 py-2 w-8">
                   <Checkbox
                     checked={
diff --git a/frontend/src/components/reports/ReportsPage.tsx b/frontend/src/components/reports/ReportsPage.tsx
index b20c75a..08d3973 100644
--- a/frontend/src/components/reports/ReportsPage.tsx
+++ b/frontend/src/components/reports/ReportsPage.tsx
@@ -122,8 +122,8 @@ export function ReportsPage({ tenantId }: ReportsPageProps) {
                 className={cn(
                   'flex items-start gap-3 p-4 rounded-lg border text-left transition-all',
                   isSelected
-                    ? 'border-accent bg-accent-muted/30 ring-1 ring-accent'
-                    : 'border-border bg-surface hover:border-text-muted',
+                    ? 'border-accent bg-accent-soft/30 ring-1 ring-accent'
+                    : 'border-border bg-panel hover:border-text-muted',
                 )}
               >
                 <div
@@ -172,7 +172,7 @@ export function ReportsPage({ tenantId }: ReportsPageProps) {
                 type="date"
                 value={dateFrom}
                 onChange={(e) => setDateFrom(e.target.value)}
-                className="w-full h-9 rounded-md border border-border bg-surface px-3 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+                className="w-full h-9 rounded-md border border-border bg-panel px-3 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
               />
             </div>
             <div className="flex-1">
@@ -187,7 +187,7 @@ export function ReportsPage({ tenantId }: ReportsPageProps) {
                 type="date"
                 value={dateTo}
                 onChange={(e) => setDateTo(e.target.value)}
-                className="w-full h-9 rounded-md border border-border bg-surface px-3 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+                className="w-full h-9 rounded-md border border-border bg-panel px-3 text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
               />
             </div>
           </div>
diff --git a/frontend/src/components/settings/ApiKeysPage.tsx b/frontend/src/components/settings/ApiKeysPage.tsx
index 9a83a8f..3a20d25 100644
--- a/frontend/src/components/settings/ApiKeysPage.tsx
+++ b/frontend/src/components/settings/ApiKeysPage.tsx
@@ -166,7 +166,7 @@ export function ApiKeysPage({ tenantId }: ApiKeysPageProps) {
           action={{ label: 'Create API Key', onClick: () => setShowCreateDialog(true) }}
         />
       ) : (
-        <div className="rounded-lg border border-border bg-surface overflow-hidden">
+        <div className="rounded-lg border border-border bg-panel overflow-hidden">
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border bg-elevated/30">
@@ -264,7 +264,7 @@ export function ApiKeysPage({ tenantId }: ApiKeysPageProps) {
               </label>
               <input
                 type="text"
-                className="w-full rounded-md border border-border-bright bg-elevated/50 px-3 py-2 text-sm focus:border-accent focus:outline-none"
+                className="w-full rounded-md border border-border-default bg-elevated/50 px-3 py-2 text-sm focus:border-accent focus:outline-none"
                 placeholder="e.g. Monitoring Integration"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
@@ -300,7 +300,7 @@ export function ApiKeysPage({ tenantId }: ApiKeysPageProps) {
               </label>
               <input
                 type="date"
-                className="w-full rounded-md border border-border-bright bg-elevated/50 px-3 py-2 text-sm focus:border-accent focus:outline-none"
+                className="w-full rounded-md border border-border-default bg-elevated/50 px-3 py-2 text-sm focus:border-accent focus:outline-none"
                 value={expiresAt}
                 onChange={(e) => setExpiresAt(e.target.value)}
                 min={new Date().toISOString().split('T')[0]}
diff --git a/frontend/src/components/settings/SettingsPage.tsx b/frontend/src/components/settings/SettingsPage.tsx
index 7b95628..dbe9713 100644
--- a/frontend/src/components/settings/SettingsPage.tsx
+++ b/frontend/src/components/settings/SettingsPage.tsx
@@ -78,7 +78,7 @@ export function SettingsPage() {
       </div>
 
       {/* Account section */}
-      <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-1">
+      <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-1">
         <SectionHeader icon={User} title="Account" />
         <InfoRow label="Email" value={user?.email} />
         <InfoRow label="Role" value={
@@ -94,13 +94,13 @@ export function SettingsPage() {
       </div>
 
       {/* Password & Security section */}
-      <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-1">
+      <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-1">
         <SectionHeader icon={Lock} title="Password & Security" />
         <ChangePasswordForm />
       </div>
 
       {/* Permissions section */}
-      <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-1">
+      <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-1">
         <SectionHeader icon={Shield} title="Permissions" />
         <InfoRow label="Read devices" value="Yes" />
         <InfoRow
@@ -118,7 +118,7 @@ export function SettingsPage() {
       </div>
 
       {/* System info section */}
-      <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-1">
+      <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-1">
         <SectionHeader icon={Info} title="System" />
         <InfoRow label="API" value={
           <a
@@ -135,7 +135,7 @@ export function SettingsPage() {
 
       {/* Quick links */}
       {isTenantAdmin(user) && (
-        <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-1">
+        <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-1">
           <SectionHeader icon={Key} title="Integrations" />
           <Link
             to="/settings/api-keys"
@@ -152,7 +152,7 @@ export function SettingsPage() {
 
       {/* Maintenance — super_admin only */}
       {isSuperAdmin(user) && (
-        <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-1">
+        <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-1">
           <SectionHeader icon={Monitor} title="Maintenance" />
           <div className="flex items-center justify-between py-2">
             <div>
@@ -182,7 +182,7 @@ export function SettingsPage() {
       {isSuperAdmin(user) && <SMTPSettingsSection />}
 
       {/* Data & Privacy section */}
-      <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-3">
+      <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-3">
         <SectionHeader icon={Shield} title="Data & Privacy" />
 
         {/* Export Data */}
@@ -377,7 +377,7 @@ function SMTPSettingsSection() {
   if (isLoading) return null
 
   return (
-    <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-3">
+    <div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-3">
       <div className="flex items-center justify-between">
         <SectionHeader icon={Mail} title="System Email (SMTP)" />
         <span className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${
diff --git a/frontend/src/components/setup/SetupWizard.tsx b/frontend/src/components/setup/SetupWizard.tsx
index 53ec567..718dc84 100644
--- a/frontend/src/components/setup/SetupWizard.tsx
+++ b/frontend/src/components/setup/SetupWizard.tsx
@@ -484,7 +484,7 @@ export function SetupWizard() {
         <StepIndicator currentStep={step} />
 
         {/* Card */}
-        <div className="bg-surface border border-border rounded-lg p-8">
+        <div className="bg-panel border border-border rounded-lg p-8">
           {step === 1 && (
             <CreateTenantStep
               onComplete={(tenant) => {
diff --git a/frontend/src/components/simple-config/SimpleFormSection.tsx b/frontend/src/components/simple-config/SimpleFormSection.tsx
index 138d15d..6c05ed6 100644
--- a/frontend/src/components/simple-config/SimpleFormSection.tsx
+++ b/frontend/src/components/simple-config/SimpleFormSection.tsx
@@ -19,7 +19,7 @@ export function SimpleFormSection({
   children,
 }: SimpleFormSectionProps) {
   return (
-    <div className="rounded-lg border border-border bg-surface p-4 space-y-4">
+    <div className="rounded-lg border border-border bg-panel p-4 space-y-4">
       <div className="flex items-center gap-2.5">
         <Icon className="h-4.5 w-4.5 text-accent flex-shrink-0" />
         <div>
diff --git a/frontend/src/components/simple-config/SimpleModeToggle.tsx b/frontend/src/components/simple-config/SimpleModeToggle.tsx
index a372c8e..ce89354 100644
--- a/frontend/src/components/simple-config/SimpleModeToggle.tsx
+++ b/frontend/src/components/simple-config/SimpleModeToggle.tsx
@@ -14,31 +14,31 @@ interface SimpleModeToggleProps {
 
 export function SimpleModeToggle({ mode, onModeChange }: SimpleModeToggleProps) {
   return (
-    <div className="flex items-center gap-1 rounded-lg border border-border bg-elevated/50 p-1">
-      <Button
-        variant="ghost"
-        size="sm"
+    <div className="flex items-center gap-px rounded-[var(--radius-control)] border border-border-default overflow-hidden">
+      <button
         onClick={() => onModeChange('simple')}
         className={cn(
-          'gap-1.5 h-7 px-2.5 text-xs',
-          mode === 'simple' && 'bg-accent/20 text-accent',
+          'flex items-center gap-1 px-1.5 py-0.5 text-[10px] transition-[background-color,color] duration-[50ms]',
+          mode === 'simple'
+            ? 'bg-accent-soft text-text-primary font-medium'
+            : 'text-text-muted hover:text-text-secondary',
         )}
       >
-        <LayoutGrid className="h-3.5 w-3.5" />
+        <LayoutGrid className="h-2.5 w-2.5" />
         Simple
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
+      </button>
+      <button
         onClick={() => onModeChange('standard')}
         className={cn(
-          'gap-1.5 h-7 px-2.5 text-xs',
-          mode === 'standard' && 'bg-accent/20 text-accent',
+          'flex items-center gap-1 px-1.5 py-0.5 text-[10px] transition-[background-color,color] duration-[50ms]',
+          mode === 'standard'
+            ? 'bg-accent-soft text-text-primary font-medium'
+            : 'text-text-muted hover:text-text-secondary',
         )}
       >
-        <Sliders className="h-3.5 w-3.5" />
+        <Sliders className="h-2.5 w-2.5" />
         Standard
-      </Button>
+      </button>
     </div>
   )
 }
diff --git a/frontend/src/components/simple-config/SimpleStatusBanner.tsx b/frontend/src/components/simple-config/SimpleStatusBanner.tsx
index 5c7684f..acb5f9f 100644
--- a/frontend/src/components/simple-config/SimpleStatusBanner.tsx
+++ b/frontend/src/components/simple-config/SimpleStatusBanner.tsx
@@ -16,7 +16,7 @@ export function SimpleStatusBanner({ items, isLoading }: SimpleStatusBannerProps
           <div key={i} className="flex flex-col">
             <span className="text-xs text-text-muted">{item.label}</span>
             {isLoading ? (
-              <div className="h-5 w-24 mt-0.5 rounded bg-elevated animate-shimmer" />
+              <span className="text-[9px] text-text-muted mt-0.5">Loading&hellip;</span>
             ) : (
               <span className="text-sm font-medium text-text-primary">
                 {item.value || '\u2014'}
diff --git a/frontend/src/components/simple-config/StandardConfigSidebar.tsx b/frontend/src/components/simple-config/StandardConfigSidebar.tsx
index 5422347..09c61d0 100644
--- a/frontend/src/components/simple-config/StandardConfigSidebar.tsx
+++ b/frontend/src/components/simple-config/StandardConfigSidebar.tsx
@@ -133,17 +133,17 @@ export function StandardConfigSidebar({
   onSwitchToSimple,
 }: StandardConfigSidebarProps) {
   return (
-    <div className="w-48 flex-shrink-0 flex flex-col min-h-[400px]">
-      <nav className="space-y-3 overflow-y-auto flex-1">
+    <div className="w-44 flex-shrink-0 flex flex-col min-h-[400px]">
+      <nav className="space-y-2 overflow-y-auto flex-1">
         {STANDARD_GROUPS.map((group) => {
           const GroupIcon = group.icon
           return (
             <div key={group.label}>
-              <p className="flex items-center gap-1.5 text-xs font-medium text-text-muted uppercase tracking-wider mb-1 px-3">
+              <p className="flex items-center gap-1.5 text-[7px] text-text-label uppercase tracking-[2px] mb-1 pl-2">
                 <GroupIcon className="h-3 w-3" />
                 {group.label}
               </p>
-              <div className="space-y-0.5">
+              <div>
                 {group.items.map((item) => {
                   const isActive = activeTab === item.id
                   return (
@@ -152,10 +152,10 @@ export function StandardConfigSidebar({
                       onClick={() => onTabChange(item.id)}
                       data-testid={`tab-${item.id}`}
                       className={cn(
-                        'flex items-center w-full text-left pl-7 pr-3 py-1.5 rounded-r-lg text-sm transition-colors',
+                        'flex items-center w-full text-left pl-6 pr-2 py-[3px] text-xs border-l-2 transition-[border-color,color] duration-[50ms]',
                         isActive
-                          ? 'bg-accent/10 text-accent border-l-2 border-accent'
-                          : 'text-text-secondary hover:text-text-primary hover:bg-elevated/50 border-l-2 border-transparent',
+                          ? 'bg-accent-soft text-text-primary font-medium border-accent rounded-r-sm'
+                          : 'text-text-secondary hover:border-accent border-transparent',
                       )}
                     >
                       <span className="truncate">{item.label}</span>
@@ -169,13 +169,13 @@ export function StandardConfigSidebar({
       </nav>
 
       {onSwitchToSimple && (
-        <div className="mt-auto pt-4 border-t border-border/50">
+        <div className="mt-auto pt-2 border-t border-border-subtle">
           <button
             onClick={onSwitchToSimple}
-            className="flex items-center gap-2 w-full text-left px-3 py-2 text-xs text-text-muted hover:text-text-secondary transition-colors"
+            className="flex items-center gap-1.5 w-full text-left px-2 py-1.5 text-[10px] text-text-muted hover:text-text-secondary transition-[color] duration-[50ms]"
           >
-            <Sliders className="h-3.5 w-3.5" />
-            Switch to Simple mode
+            <Sliders className="h-3 w-3" />
+            Simple mode
           </button>
         </div>
       )}
diff --git a/frontend/src/components/simple-config/categories/LanDhcpPanel.tsx b/frontend/src/components/simple-config/categories/LanDhcpPanel.tsx
index ef01a16..4f48441 100644
--- a/frontend/src/components/simple-config/categories/LanDhcpPanel.tsx
+++ b/frontend/src/components/simple-config/categories/LanDhcpPanel.tsx
@@ -180,7 +180,7 @@ export function LanDhcpPanel({ tenantId, deviceId, active }: ConfigPanelProps) {
         {activeLeases.length === 0 ? (
           <p className="text-xs text-text-muted">No active DHCP leases</p>
         ) : (
-          <div className="rounded-lg border border-border bg-surface overflow-hidden">
+          <div className="rounded-lg border border-border bg-panel overflow-hidden">
             <table className="w-full text-xs">
               <thead>
                 <tr className="border-b border-border bg-elevated/30">
diff --git a/frontend/src/components/simple-config/categories/WifiSimplePanel.tsx b/frontend/src/components/simple-config/categories/WifiSimplePanel.tsx
index 6d8aff8..536864f 100644
--- a/frontend/src/components/simple-config/categories/WifiSimplePanel.tsx
+++ b/frontend/src/components/simple-config/categories/WifiSimplePanel.tsx
@@ -126,7 +126,7 @@ export function WifiSimplePanel({ tenantId, deviceId, active, routerosVersion }:
   // No wireless hardware
   if (wireless.entries.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-12 text-center">
+      <div className="rounded-lg border border-border bg-panel p-12 text-center">
         <Wifi className="h-8 w-8 text-text-muted/50 mx-auto mb-3" />
         <p className="text-sm font-medium text-text-secondary">
           This device does not have wireless hardware
diff --git a/frontend/src/components/sites/SiteHealthGrid.tsx b/frontend/src/components/sites/SiteHealthGrid.tsx
index 96e580a..f08273d 100644
--- a/frontend/src/components/sites/SiteHealthGrid.tsx
+++ b/frontend/src/components/sites/SiteHealthGrid.tsx
@@ -57,15 +57,8 @@ export function SiteHealthGrid({ tenantId, siteId }: SiteHealthGridProps) {
 
   if (devicesLoading) {
     return (
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="rounded-lg border border-border bg-surface p-4 space-y-3 animate-pulse">
-            <div className="h-4 w-24 bg-elevated rounded" />
-            <div className="h-1.5 w-full bg-elevated rounded-full" />
-            <div className="h-1.5 w-full bg-elevated rounded-full" />
-            <div className="h-3 w-16 bg-elevated rounded" />
-          </div>
-        ))}
+      <div className="py-8 text-center">
+        <span className="text-[9px] text-text-muted">Loading&hellip;</span>
       </div>
     )
   }
@@ -74,7 +67,7 @@ export function SiteHealthGrid({ tenantId, siteId }: SiteHealthGridProps) {
 
   if (devices.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-8 text-center">
+      <div className="rounded-lg border border-border bg-panel p-8 text-center">
         <p className="text-sm text-text-muted">
           No devices assigned to this site. Assign devices from the fleet page.
         </p>
@@ -103,7 +96,7 @@ export function SiteHealthGrid({ tenantId, siteId }: SiteHealthGridProps) {
             to="/tenants/$tenantId/devices/$deviceId"
             params={{ tenantId, deviceId: device.id }}
             className={cn(
-              'rounded-lg border bg-surface p-4 space-y-2 hover:bg-elevated/50 transition-colors block',
+              'rounded-lg border bg-panel p-4 space-y-2 hover:bg-elevated/50 transition-colors block',
               borderColor(device.status),
             )}
           >
diff --git a/frontend/src/components/sites/SiteSectorView.tsx b/frontend/src/components/sites/SiteSectorView.tsx
index 0bacd73..85cf03e 100644
--- a/frontend/src/components/sites/SiteSectorView.tsx
+++ b/frontend/src/components/sites/SiteSectorView.tsx
@@ -145,7 +145,7 @@ export function SiteSectorView({ tenantId, siteId }: SiteSectorViewProps) {
   }, [linksData])
 
   if (sectorsLoading || devicesLoading) {
-    return <TableSkeleton rows={6} />
+    return <TableSkeleton />
   }
 
   const sectors = sectorData?.items ?? []
@@ -153,7 +153,7 @@ export function SiteSectorView({ tenantId, siteId }: SiteSectorViewProps) {
 
   if (sectors.length === 0 && unassignedDevices.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-surface p-8 text-center space-y-3">
+      <div className="rounded-lg border border-border bg-panel p-8 text-center space-y-3">
         <p className="text-sm text-text-muted">
           No sectors defined. Create sectors to organize APs by direction.
         </p>
@@ -315,7 +315,7 @@ function SectorSection({
   const isUnassigned = !sector
 
   return (
-    <div className="rounded-lg border border-border bg-surface overflow-hidden">
+    <div className="rounded-lg border border-border bg-panel overflow-hidden">
       {/* Section header */}
       <button
         className="w-full flex items-center gap-2 px-4 py-3 hover:bg-elevated/50 transition-colors text-left"
diff --git a/frontend/src/components/sites/SiteTable.tsx b/frontend/src/components/sites/SiteTable.tsx
index 3e875a4..99e3efa 100644
--- a/frontend/src/components/sites/SiteTable.tsx
+++ b/frontend/src/components/sites/SiteTable.tsx
@@ -99,7 +99,7 @@ export function SiteTable({ tenantId, search, onCreateClick, onEditClick }: Site
   }
 
   if (isLoading) {
-    return <TableSkeleton rows={4} />
+    return <TableSkeleton />
   }
 
   if (!data || data.sites.length === 0) {
diff --git a/frontend/src/components/templates/PushProgressPanel.tsx b/frontend/src/components/templates/PushProgressPanel.tsx
index 98a6615..8c8b03e 100644
--- a/frontend/src/components/templates/PushProgressPanel.tsx
+++ b/frontend/src/components/templates/PushProgressPanel.tsx
@@ -101,7 +101,7 @@ export function PushProgressPanel({ tenantId, rolloutId, onClose }: PushProgress
           return (
             <div
               key={job.device_id}
-              className="flex items-center gap-3 rounded-lg border border-border/50 bg-surface/50 px-3 py-2"
+              className="flex items-center gap-3 rounded-lg border border-border/50 bg-panel/50 px-3 py-2"
             >
               <Icon
                 className={cn(
diff --git a/frontend/src/components/templates/TemplateEditor.tsx b/frontend/src/components/templates/TemplateEditor.tsx
index ef589b7..5142f4a 100644
--- a/frontend/src/components/templates/TemplateEditor.tsx
+++ b/frontend/src/components/templates/TemplateEditor.tsx
@@ -164,7 +164,7 @@ export function TemplateEditor({ template, onSave, onCancel }: TemplateEditorPro
             onChange={(e) => setDescription(e.target.value)}
             placeholder="What does this template configure?"
             rows={2}
-            className="w-full px-3 py-2 text-sm rounded-md bg-elevated/50 border border-border text-text-primary placeholder:text-text-muted resize-none focus:outline-none focus:ring-1 focus:ring-border-bright"
+            className="w-full px-3 py-2 text-sm rounded-md bg-elevated/50 border border-border text-text-primary placeholder:text-text-muted resize-none focus:outline-none focus:ring-1 focus:ring-border-default"
           />
         </div>
 
@@ -176,7 +176,7 @@ export function TemplateEditor({ template, onSave, onCancel }: TemplateEditorPro
             onChange={(e) => setContent(e.target.value)}
             placeholder={`# Example: Set system identity\n/system identity set name={{ device.hostname }}-{{ site_name }}\n\n# Add IP address\n/ip address add address={{ mgmt_ip }}/24 interface=ether1`}
             rows={16}
-            className="w-full px-3 py-2 text-sm rounded-md bg-background border border-border text-success placeholder:text-text-muted font-mono resize-y focus:outline-none focus:ring-1 focus:ring-border-bright leading-relaxed"
+            className="w-full px-3 py-2 text-sm rounded-md bg-background border border-border text-success placeholder:text-text-muted font-mono resize-y focus:outline-none focus:ring-1 focus:ring-border-default leading-relaxed"
           />
         </div>
 
@@ -247,7 +247,7 @@ export function TemplateEditor({ template, onSave, onCancel }: TemplateEditorPro
             <div className="rounded-lg border border-border overflow-hidden">
               <table className="w-full text-xs">
                 <thead>
-                  <tr className="bg-surface border-b border-border">
+                  <tr className="bg-panel border-b border-border">
                     <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Name</th>
                     <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted w-28">Type</th>
                     <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Default</th>
diff --git a/frontend/src/components/templates/TemplatePushWizard.tsx b/frontend/src/components/templates/TemplatePushWizard.tsx
index c064b26..d788c63 100644
--- a/frontend/src/components/templates/TemplatePushWizard.tsx
+++ b/frontend/src/components/templates/TemplatePushWizard.tsx
@@ -150,7 +150,7 @@ export function TemplatePushWizard({ open, onClose, tenantId, template }: Templa
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
-      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto bg-surface border-border text-text-primary">
+      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto bg-panel border-border text-text-primary">
         <DialogHeader>
           <DialogTitle className="text-sm flex items-center gap-2">
             Push Template: {template.name}
@@ -193,7 +193,7 @@ export function TemplatePushWizard({ open, onClose, tenantId, template }: Templa
                 {devices?.map((device) => (
                   <label
                     key={device.id}
-                    className="flex items-center gap-3 px-3 py-2 hover:bg-surface cursor-pointer"
+                    className="flex items-center gap-3 px-3 py-2 hover:bg-panel cursor-pointer"
                   >
                     <Checkbox
                       checked={selectedDeviceIds.has(device.id)}
@@ -237,7 +237,7 @@ export function TemplatePushWizard({ open, onClose, tenantId, template }: Templa
               Provide values for template variables. Built-in device variables are auto-populated per device.
             </div>
 
-            <div className="text-[10px] text-text-muted bg-surface rounded px-3 py-2">
+            <div className="text-[10px] text-text-muted bg-panel rounded px-3 py-2">
               Auto-populated: {'{{ device.hostname }}'}, {'{{ device.ip }}'}, {'{{ device.model }}'}
             </div>
 
@@ -321,7 +321,7 @@ export function TemplatePushWizard({ open, onClose, tenantId, template }: Templa
                     'text-xs px-2 py-1 rounded transition-colors',
                     previewDevice === d.id
                       ? 'bg-elevated text-text-primary'
-                      : 'bg-surface text-text-secondary hover:text-text-secondary',
+                      : 'bg-panel text-text-secondary hover:text-text-secondary',
                   )}
                 >
                   {d.hostname}
diff --git a/frontend/src/components/templates/TemplatesPage.tsx b/frontend/src/components/templates/TemplatesPage.tsx
index 8fcfc38..0064a74 100644
--- a/frontend/src/components/templates/TemplatesPage.tsx
+++ b/frontend/src/components/templates/TemplatesPage.tsx
@@ -229,7 +229,7 @@ export function TemplatesPage() {
             {templates.map((template) => (
               <div
                 key={template.id}
-                className="rounded-lg border border-border bg-surface/50 p-4 hover:bg-surface transition-colors"
+                className="rounded-lg border border-border bg-panel/50 p-4 hover:bg-panel transition-colors"
               >
                 <div className="flex items-start justify-between">
                   <div className="flex-1 min-w-0">
@@ -313,7 +313,7 @@ export function TemplatesPage() {
         open={!!deleteConfirmId}
         onOpenChange={(o) => !o && setDeleteConfirmId(null)}
       >
-        <DialogContent className="max-w-sm bg-surface border-border text-text-primary">
+        <DialogContent className="max-w-sm bg-panel border-border text-text-primary">
           <DialogHeader>
             <DialogTitle className="text-sm">Delete Template</DialogTitle>
           </DialogHeader>
diff --git a/frontend/src/components/tenants/TenantList.tsx b/frontend/src/components/tenants/TenantList.tsx
index c7581da..ce488cd 100644
--- a/frontend/src/components/tenants/TenantList.tsx
+++ b/frontend/src/components/tenants/TenantList.tsx
@@ -60,7 +60,7 @@ export function TenantList() {
       <div className="rounded-lg border border-border overflow-hidden">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border bg-surface">
+            <tr className="border-b border-border bg-panel">
               <th className="text-left px-3 py-2 text-xs font-medium text-text-muted">Name</th>
               <th className="text-right px-3 py-2 text-xs font-medium text-text-muted">Users</th>
               <th className="text-right px-3 py-2 text-xs font-medium text-text-muted">Devices</th>
@@ -74,7 +74,7 @@ export function TenantList() {
             {isLoading ? (
               <tr>
                 <td colSpan={5} className="px-3 py-4">
-                  <TableSkeleton rows={5} />
+                  <TableSkeleton />
                 </td>
               </tr>
             ) : tenants?.length === 0 ? (
@@ -87,7 +87,7 @@ export function TenantList() {
               tenants?.map((tenant) => (
                 <tr
                   key={tenant.id}
-                  className="border-b border-border/50 hover:bg-surface transition-colors"
+                  className="border-b border-border/50 hover:bg-panel transition-colors"
                 >
                   <td className="px-3 py-2.5">
                     <Link
diff --git a/frontend/src/components/transparency/TransparencyLogTable.tsx b/frontend/src/components/transparency/TransparencyLogTable.tsx
index 7fe6347..de2c06f 100644
--- a/frontend/src/components/transparency/TransparencyLogTable.tsx
+++ b/frontend/src/components/transparency/TransparencyLogTable.tsx
@@ -195,7 +195,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
             label="Unique Devices"
             value={stats.unique_devices.toLocaleString()}
           />
-          <div className="rounded-lg border border-border bg-surface p-3">
+          <div className="rounded-lg border border-border bg-panel p-3">
             <div className="text-[10px] font-medium uppercase tracking-wider text-text-muted mb-2">
               By Justification
             </div>
@@ -228,7 +228,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
             setJustificationFilter(e.target.value)
             setPage(1)
           }}
-          className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+          className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
         >
           {JUSTIFICATION_TYPES.map((j) => (
             <option key={j.value} value={j.value}>
@@ -244,7 +244,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
             setActionFilter(e.target.value)
             setPage(1)
           }}
-          className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+          className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
         >
           {ACTION_TYPES.map((a) => (
             <option key={a.value} value={a.value}>
@@ -263,7 +263,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
               setDateFrom(e.target.value)
               setPage(1)
             }}
-            className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+            className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
           />
         </div>
 
@@ -277,7 +277,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
               setDateTo(e.target.value)
               setPage(1)
             }}
-            className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+            className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
           />
         </div>
 
@@ -288,7 +288,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
         <button
           onClick={handleExport}
           disabled={exporting || !data?.total}
-          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-elevated hover:text-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-panel px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-elevated hover:text-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           <Download className="h-3.5 w-3.5" />
           {exporting ? 'Exporting...' : 'Export CSV'}
@@ -296,7 +296,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
       </div>
 
       {/* Table */}
-      <div className="rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="rounded-lg border border-border bg-panel overflow-hidden">
         {isLoading ? (
           <div className="p-8 text-center">
             <div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-accent border-t-transparent" />
@@ -373,7 +373,7 @@ export function TransparencyLogTable({ tenantId }: TransparencyLogTableProps) {
                 setPerPage(Number(e.target.value))
                 setPage(1)
               }}
-              className="h-7 rounded border border-border bg-surface px-1.5 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
+              className="h-7 rounded border border-border bg-panel px-1.5 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
             >
               {PER_PAGE_OPTIONS.map((n) => (
                 <option key={n} value={n}>
@@ -438,7 +438,7 @@ interface StatsCardProps {
 
 function StatsCard({ icon: Icon, label, value }: StatsCardProps) {
   return (
-    <div className="rounded-lg border border-border bg-surface p-3">
+    <div className="rounded-lg border border-border bg-panel p-3">
       <div className="flex items-center gap-2 mb-1">
         <Icon className="h-3.5 w-3.5 text-text-muted" />
         <span className="text-[10px] font-medium uppercase tracking-wider text-text-muted">
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index dc0aced..9b3966c 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -10,8 +10,8 @@ function Badge({ className, color, children, ...props }: BadgeProps) {
   return (
     <span
       className={cn(
-        'inline-flex items-center rounded-md px-1.5 py-0.5 text-xs font-medium border',
-        !color && 'border-border bg-elevated text-text-secondary',
+        'inline-flex items-center rounded-sm px-1.5 py-0.5 text-xs font-medium border',
+        !color && 'border-border-default bg-elevated text-text-secondary',
         className,
       )}
       style={style}
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 427b1e8..f039373 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -4,17 +4,17 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium transition-[background-color,border-color,color] duration-[50ms] ease-linear focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:pointer-events-none disabled:text-text-muted disabled:border-border-subtle',
   {
     variants: {
       variant: {
-        default: 'bg-[hsl(var(--accent-muted))] text-accent hover:bg-accent/20',
-        solid: 'bg-accent text-white hover:bg-accent-hover',
-        destructive: 'bg-error/15 text-error hover:bg-error/20',
+        default: 'bg-accent text-background active:brightness-90 rounded-[var(--radius-control)]',
+        solid: 'bg-accent text-background active:brightness-90 rounded-[var(--radius-control)]',
+        destructive: 'bg-error/15 text-error hover:bg-error/20 active:bg-error/25 rounded-[var(--radius-control)]',
         outline:
-          'border border-border bg-transparent text-text-secondary hover:bg-elevated hover:text-text-primary',
-        secondary: 'bg-elevated text-text-secondary hover:text-text-primary',
-        ghost: 'text-text-secondary hover:bg-elevated hover:text-text-primary',
+          'border border-border-default bg-transparent text-text-secondary hover:border-accent active:bg-elevated rounded-[var(--radius-control)]',
+        secondary: 'bg-elevated text-text-secondary hover:text-text-primary active:brightness-95 rounded-[var(--radius-control)]',
+        ghost: 'text-text-secondary hover:bg-elevated hover:text-text-primary active:bg-elevated rounded-[var(--radius-control)]',
         link: 'text-accent underline-offset-4 hover:underline',
       },
       size: {
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index a755c69..eb74a8e 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     <div
       ref={ref}
       className={cn(
-        'rounded-lg border border-border bg-surface text-text-primary',
+        'rounded-sm border border-border-default bg-panel text-text-primary',
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
index 4d295db..5075a56 100644
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-border bg-elevated/50 focus-visible:outline-none focus-visible:border-accent disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=checked]:border-accent data-[state=checked]:text-white',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-border-default bg-panel focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:text-text-muted disabled:border-border-subtle data-[state=checked]:bg-accent data-[state=checked]:border-accent data-[state=checked]:text-background',
       className,
     )}
     {...props}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index a32c713..ac4c1ea 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -32,7 +32,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%] w-full max-w-lg rounded-lg border border-border bg-surface text-text-primary p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%] w-full max-w-lg rounded-lg border border-border bg-panel text-text-primary p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 1e7a9c2..015727f 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -38,7 +38,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-surface p-1 text-text-primary',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-panel p-1 text-text-primary',
       className,
     )}
     {...props}
@@ -55,7 +55,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-surface p-1 text-text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-panel p-1 text-text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 43e32d9..489da73 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-8 w-full rounded-md border border-border bg-elevated/50 px-3 py-1 text-sm text-text-primary placeholder:text-text-muted transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus:border-accent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-8 w-full rounded-[var(--radius-control)] border border-border-default bg-panel px-2.5 py-1.5 text-xs text-text-primary placeholder:text-text-muted transition-[border-color] duration-[50ms] ease-linear file:border-0 file:bg-transparent file:text-xs file:font-medium focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:text-text-muted disabled:border-border-subtle',
           className,
         )}
         ref={ref}
diff --git a/frontend/src/components/ui/page-skeleton.tsx b/frontend/src/components/ui/page-skeleton.tsx
index 4e6707b..2aeb964 100644
--- a/frontend/src/components/ui/page-skeleton.tsx
+++ b/frontend/src/components/ui/page-skeleton.tsx
@@ -1,84 +1,13 @@
-import { Skeleton } from './skeleton'
+import { LoadingText } from './skeleton'
 
-/** Table-style skeleton with header + rows */
-export function TableSkeleton({ rows = 8 }: { rows?: number }) {
-  return (
-    <div className="space-y-3">
-      {/* Header */}
-      <div className="flex items-center gap-4">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-8 w-32 ml-auto" />
-      </div>
-      {/* Filter bar */}
-      <div className="flex gap-2">
-        <Skeleton className="h-9 w-64" />
-        <Skeleton className="h-9 w-32" />
-      </div>
-      {/* Table header */}
-      <div className="flex gap-4 py-2">
-        <Skeleton className="h-4 w-32" />
-        <Skeleton className="h-4 w-24" />
-        <Skeleton className="h-4 w-20" />
-        <Skeleton className="h-4 w-28" />
-        <Skeleton className="h-4 w-16 ml-auto" />
-      </div>
-      {/* Rows */}
-      {Array.from({ length: rows }).map((_, i) => (
-        <div key={i} className="flex items-center gap-4 py-3">
-          <Skeleton className="h-4 w-40" />
-          <Skeleton className="h-4 w-28" />
-          <Skeleton className="h-4 w-16" />
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-8 w-20 ml-auto" />
-        </div>
-      ))}
-    </div>
-  )
+export function TableSkeleton() {
+  return <div className="py-8 text-center"><LoadingText /></div>
 }
 
-/** Card grid skeleton */
-export function CardGridSkeleton({ cards = 6 }: { cards?: number }) {
-  return (
-    <div className="space-y-4">
-      <Skeleton className="h-8 w-48" />
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {Array.from({ length: cards }).map((_, i) => (
-          <div key={i} className="rounded-lg border border-border p-4 space-y-3">
-            <Skeleton className="h-5 w-3/4" />
-            <Skeleton className="h-4 w-1/2" />
-            <Skeleton className="h-16 w-full" />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
+export function CardGridSkeleton() {
+  return <div className="py-8 text-center"><LoadingText /></div>
 }
 
-/** Detail page skeleton (header + tabs + content) */
 export function DetailPageSkeleton() {
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-3">
-        <Skeleton className="h-8 w-8 rounded-full" />
-        <div className="space-y-1">
-          <Skeleton className="h-6 w-48" />
-          <Skeleton className="h-4 w-32" />
-        </div>
-        <Skeleton className="h-9 w-24 ml-auto" />
-      </div>
-      {/* Tabs */}
-      <div className="flex gap-4 border-b border-border pb-2">
-        <Skeleton className="h-5 w-20" />
-        <Skeleton className="h-5 w-20" />
-        <Skeleton className="h-5 w-20" />
-        <Skeleton className="h-5 w-20" />
-      </div>
-      {/* Content area */}
-      <div className="grid grid-cols-2 gap-4">
-        <Skeleton className="h-48 w-full" />
-        <Skeleton className="h-48 w-full" />
-      </div>
-      <Skeleton className="h-64 w-full" />
-    </div>
-  )
+  return <div className="py-8 text-center"><LoadingText /></div>
 }
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index 65a1188..4166c25 100644
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -16,7 +16,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-lg border border-border bg-surface p-4 text-text-primary outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 w-72 rounded-lg border border-border bg-panel p-4 text-text-primary outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index 0797ee7..527db3e 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -14,7 +14,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-8 w-full items-center justify-between rounded-md border border-border bg-elevated/50 px-3 py-1 text-sm text-text-primary focus:outline-none focus:border-accent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-8 w-full items-center justify-between rounded-[var(--radius-control)] border border-border-default bg-panel px-2.5 py-1 text-xs text-text-primary focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:text-text-muted disabled:border-border-subtle [&>span]:line-clamp-1',
       className,
     )}
     {...props}
@@ -63,7 +63,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-surface text-text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-panel text-text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
index b02e1d6..634af0f 100644
--- a/frontend/src/components/ui/skeleton.tsx
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -1,15 +1,11 @@
 import { cn } from '@/lib/utils'
 
-type SkeletonProps = React.HTMLAttributes<HTMLDivElement>
-
-export function Skeleton({ className, ...props }: SkeletonProps) {
-  return (
-    <div
-      className={cn(
-        'animate-shimmer rounded-md bg-elevated bg-shimmer bg-shimmer relative overflow-hidden',
-        className,
-      )}
-      {...props}
-    />
-  )
+// Compatibility shim — returns null. Remove once all imports are cleaned up.
+export function Skeleton({ className: _className }: { className?: string }) {
+  return null
+}
+
+// Use this for panels where loading delay is noticeable
+export function LoadingText({ text = 'Loading\u2026' }: { text?: string }) {
+  return <span className="text-[9px] text-text-muted">{text}</span>
 }
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 7043508..7abdfa4 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[hsl(var(--accent-muted))] data-[state=active]:text-accent data-[state=active]:font-semibold data-[state=inactive]:text-text-muted data-[state=inactive]:hover:text-text-secondary',
+      'inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-xs font-medium transition-[background-color,border-color,color] duration-[50ms] ease-linear focus-visible:outline-none disabled:pointer-events-none disabled:text-text-muted data-[state=active]:border-b-2 data-[state=active]:border-accent data-[state=active]:text-text-primary data-[state=active]:font-medium data-[state=active]:bg-accent-soft/50 data-[state=inactive]:text-text-secondary data-[state=inactive]:hover:text-text-primary',
       className,
     )}
     {...props}
diff --git a/frontend/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
index 1d91e40..bc437eb 100644
--- a/frontend/src/components/ui/toast.tsx
+++ b/frontend/src/components/ui/toast.tsx
@@ -8,11 +8,10 @@ export function Toaster() {
     <SonnerToaster
       position="bottom-right"
       toastOptions={{
-        className: 'bg-surface border-border text-text-primary',
+        className: 'bg-elevated border border-border-default text-text-primary rounded-[var(--radius-control)]',
         descriptionClassName: 'text-text-secondary',
       }}
       theme={theme}
-      richColors
     />
   )
 }
diff --git a/frontend/src/components/users/UserList.tsx b/frontend/src/components/users/UserList.tsx
index c964fbc..66d3e45 100644
--- a/frontend/src/components/users/UserList.tsx
+++ b/frontend/src/components/users/UserList.tsx
@@ -76,7 +76,7 @@ export function UserList({ tenantId }: Props) {
       <div className="rounded-lg border border-border overflow-hidden">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border bg-surface">
+            <tr className="border-b border-border bg-panel">
               <th scope="col" className="text-left px-3 py-2 text-xs font-medium text-text-muted">Name</th>
               <th scope="col" className="text-left px-3 py-2 text-xs font-medium text-text-muted">Email</th>
               <th scope="col" className="text-left px-3 py-2 text-xs font-medium text-text-muted">Role</th>
@@ -91,7 +91,7 @@ export function UserList({ tenantId }: Props) {
             {isLoading ? (
               <tr>
                 <td colSpan={6} className="px-3 py-4">
-                  <TableSkeleton rows={5} />
+                  <TableSkeleton />
                 </td>
               </tr>
             ) : users?.length === 0 ? (
@@ -104,7 +104,7 @@ export function UserList({ tenantId }: Props) {
               users?.map((u) => (
                 <tr
                   key={u.id}
-                  className="border-b border-border/50 hover:bg-surface transition-colors"
+                  className="border-b border-border/50 hover:bg-panel transition-colors"
                 >
                   <td className="px-3 py-2.5 font-medium">{u.name}</td>
                   <td className="px-3 py-2.5 text-text-secondary">{u.email}</td>
diff --git a/frontend/src/components/vpn/VpnPage.tsx b/frontend/src/components/vpn/VpnPage.tsx
index d0548d9..72bf9ce 100644
--- a/frontend/src/components/vpn/VpnPage.tsx
+++ b/frontend/src/components/vpn/VpnPage.tsx
@@ -190,7 +190,7 @@ export function VpnPage() {
     return (
       <div className="p-6 space-y-6">
         <h1 className="text-2xl font-bold text-text-primary">VPN</h1>
-        <TableSkeleton rows={3} />
+        <TableSkeleton />
       </div>
     )
   }
@@ -202,7 +202,7 @@ export function VpnPage() {
       <div className="p-6 space-y-6">
         <h1 className="text-2xl font-bold text-text-primary">VPN</h1>
         <div className="max-w-lg mx-auto mt-12">
-          <div className="rounded-lg border border-border bg-surface p-8 text-center space-y-6">
+          <div className="rounded-lg border border-border bg-panel p-8 text-center space-y-6">
             <div className="mx-auto w-16 h-16 rounded-2xl bg-accent/10 flex items-center justify-center">
               <Shield className="h-8 w-8 text-accent" />
             </div>
@@ -309,7 +309,7 @@ export function VpnPage() {
 
       {/* Peer list */}
       {peersLoading ? (
-        <TableSkeleton rows={3} />
+        <TableSkeleton />
       ) : peers.length === 0 ? (
         <div className="rounded-lg border border-dashed border-accent/30 bg-accent/5 p-8 text-center space-y-3">
           <ShieldCheck className="h-10 w-10 text-accent mx-auto" />
@@ -496,7 +496,7 @@ function InfoCard({
   muted?: boolean
 }) {
   return (
-    <div className="rounded-lg border border-border bg-surface p-4">
+    <div className="rounded-lg border border-border bg-panel p-4">
       <div className="flex items-center gap-2 mb-1">
         <Icon className="h-4 w-4 text-text-muted" />
         <span className="text-xs text-text-muted uppercase tracking-wider">{label}</span>
diff --git a/frontend/src/components/wireless/RFStatsCard.tsx b/frontend/src/components/wireless/RFStatsCard.tsx
index b911c40..0151920 100644
--- a/frontend/src/components/wireless/RFStatsCard.tsx
+++ b/frontend/src/components/wireless/RFStatsCard.tsx
@@ -29,7 +29,7 @@ export function RFStatsCard({ tenantId, deviceId, active }: RFStatsCardProps) {
   })
 
   if (isLoading) {
-    return <TableSkeleton rows={2} />
+    return <TableSkeleton />
   }
 
   if (!data || data.items.length === 0) {
@@ -49,7 +49,7 @@ export function RFStatsCard({ tenantId, deviceId, active }: RFStatsCardProps) {
         {data.items.map((stat: RFStatsResponse) => (
           <div
             key={stat.interface}
-            className="rounded-lg border border-border bg-surface p-3"
+            className="rounded-lg border border-border bg-panel p-3"
           >
             <div className="flex items-center gap-2 mb-3">
               <Radio className="h-4 w-4 text-text-muted" />
diff --git a/frontend/src/components/wireless/SignalHistoryChart.tsx b/frontend/src/components/wireless/SignalHistoryChart.tsx
index d4f8ac4..3edbae7 100644
--- a/frontend/src/components/wireless/SignalHistoryChart.tsx
+++ b/frontend/src/components/wireless/SignalHistoryChart.tsx
@@ -129,7 +129,7 @@ export function SignalHistoryChart({ tenantId, deviceId, macAddress }: SignalHis
             <Line
               type="monotone"
               dataKey="signal_avg"
-              stroke="#3b82f6"
+              stroke="hsl(var(--accent))"
               strokeWidth={2}
               dot={false}
               activeDot={{ r: 3 }}
diff --git a/frontend/src/components/wireless/WirelessLinksTable.tsx b/frontend/src/components/wireless/WirelessLinksTable.tsx
index cd38031..f8046f2 100644
--- a/frontend/src/components/wireless/WirelessLinksTable.tsx
+++ b/frontend/src/components/wireless/WirelessLinksTable.tsx
@@ -88,7 +88,7 @@ export function WirelessLinksTable({ tenantId, siteId }: WirelessLinksTableProps
   }, [data])
 
   if (isLoading) {
-    return <TableSkeleton rows={8} />
+    return <TableSkeleton />
   }
 
   if (!data || data.items.length === 0) {
diff --git a/frontend/src/components/wireless/WirelessStationTable.tsx b/frontend/src/components/wireless/WirelessStationTable.tsx
index 7ee280d..00a6e74 100644
--- a/frontend/src/components/wireless/WirelessStationTable.tsx
+++ b/frontend/src/components/wireless/WirelessStationTable.tsx
@@ -44,7 +44,7 @@ export function WirelessStationTable({ tenantId, deviceId, active }: WirelessSta
   })
 
   if (isLoading) {
-    return <TableSkeleton rows={5} />
+    return <TableSkeleton />
   }
 
   if (!data || data.items.length === 0) {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b683c09..3d8e878 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -26,121 +26,118 @@
 @tailwind components;
 @tailwind utilities;
 
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
 @layer base {
   :root {
-    /* ── Deep Space Light Mode ── */
-    --background: 240 20% 99%;
-    --surface: 0 0% 100%;
-    --elevated: 240 33% 96%;
-    --border: 0 0% 0% / 0.08;
-    --border-bright: 240 14% 88%;
+    /* ── Warm Precision Light Mode ── */
+    --background: 39 21% 89%;      /* #eae7de */
+    --sidebar: 36 16% 85%;          /* #e0dcd2 */
+    --panel: 40 24% 95%;            /* #f6f4ec */
+    --elevated: 39 22% 92%;         /* #f0ede4 */
 
-    --text-primary: 240 7% 7%;
-    --text-secondary: 249 14% 37%;
-    --text-muted: 249 11% 57%;
+    --border-subtle: 30 18% 13% / 0.06;
+    --border-default: 30 18% 13% / 0.14;
 
-    --accent: 239 76% 62%;
-    --accent-hover: 244 75% 58%;
-    --accent-muted: 239 76% 62% / 0.1;
-    --ring: 239 76% 62%;
+    --text-primary: 43 27% 8%;      /* #1a1810 */
+    --text-secondary: 40 12% 30%;   /* #564e42 — slightly darker for dense readability */
+    --text-muted: 36 7% 50%;        /* #8a8578 */
 
-    --success: 142 71% 35%;
-    --warning: 32 95% 44%;
-    --error: 0 72% 51%;
-    --info: 217 91% 50%;
+    --accent: 43 32% 40%;           /* #8a7a48 */
+    --accent-soft: 43 32% 40% / 0.10;
+    --ring: 43 32% 40%;
 
-    --online: 142 71% 35%;
-    --offline: 0 72% 51%;
-    --unknown: 249 11% 57%;
+    --text-label: 36 7% 50%;        /* same as text-muted in light */
 
-    --chart-1: 239 76% 62%;
-    --chart-2: 142 71% 35%;
-    --chart-3: 32 95% 44%;
-    --chart-4: 0 72% 51%;
-    --chart-5: 280 68% 50%;
-    --chart-6: 217 91% 50%;
+    --success: 140 35% 35%;         /* #3a7a4a */
+    --warning: 43 66% 36%;          /* #9a7a20 */
+    --error: 11 48% 44%;            /* #a85040 */
+    --info: 175 35% 38%;              /* #3f8278 — warm teal, readable */
 
-    /* Sidebar */
-    --sidebar: 210 40% 98%;
+    --online: 140 35% 35%;
+    --offline: 11 48% 44%;
+    --unknown: 36 7% 50%;
 
-    /* Functional tokens mapped to Tailwind names */
+    --alert-badge: 43 78% 30%;      /* #8a6a10 */
+
+    --chart-1: 43 32% 40%;
+    --chart-2: 140 35% 35%;
+    --chart-3: 43 66% 36%;
+    --chart-4: 11 48% 44%;
+    --chart-5: 280 30% 45%;
+    --chart-6: 217 50% 45%;
+
+    /* Functional mappings */
     --foreground: var(--text-primary);
-    --card: var(--surface);
+    --card: var(--panel);
     --card-foreground: var(--text-primary);
-    --popover: var(--surface);
+    --popover: var(--panel);
     --popover-foreground: var(--text-primary);
     --primary: var(--accent);
-    --primary-foreground: 0 0% 100%;
+    --primary-foreground: 40 24% 95%;
     --secondary: var(--elevated);
     --secondary-foreground: var(--text-primary);
     --muted: var(--elevated);
     --muted-foreground: var(--text-secondary);
-    --input: var(--border);
+    --input: var(--border-default);
     --destructive: var(--error);
+    --border: var(--border-default);
 
-    /* Border radius */
-    --radius: 0.5rem;
-
-    /* Content width */
+    --radius: 0.125rem;
+    --radius-control: 0.25rem;
     --content-max: 1312px;
-    --sidebar-width: 13.5rem;
+    --sidebar-width: 172px;
   }
 
   .dark {
-    /* ── Deep Space Dark Mode ── */
-    --background: 240 7% 7%;
-    --surface: 240 22% 10%;
-    --elevated: 240 28% 14%;
-    --border: 0 0% 100% / 0.06;
-    --border-bright: 240 24% 19%;
+    /* ── Warm Precision Dark Mode ── */
+    --background: 40 14% 4%;        /* #0c0b09 */
+    --sidebar: 40 10% 7%;           /* #141310 */
+    --panel: 40 8% 9%;              /* #1a1916 */
+    --elevated: 40 7% 11%;          /* #1e1d1a */
 
-    --text-primary: 240 14% 91%;
-    --text-secondary: 249 9% 59%;
-    --text-muted: 249 13% 44%;
+    --border-subtle: 36 10% 65% / 0.06;
+    --border-default: 36 10% 65% / 0.10;
 
-    --accent: 235 91% 74%;
-    --accent-hover: 239 84% 67%;
-    --accent-muted: 239 84% 67% / 0.15;
-    --ring: 235 91% 74%;
+    --text-primary: 39 16% 78%;     /* #d4ccb8 */
+    --text-secondary: 36 7% 54%;    /* #948e80 */
+    --text-muted: 40 8% 33%;        /* #5e5a50 */
 
-    --success: 142 69% 58%;
-    --warning: 38 92% 50%;
-    --error: 0 84% 60%;
-    --info: 217 91% 60%;
+    --accent: 43 28% 47%;           /* #9a8a58 */
+    --accent-soft: 43 28% 47% / 0.10;
+    --ring: 43 28% 47%;
 
-    --online: 142 69% 58%;
-    --offline: 0 84% 60%;
-    --unknown: 249 9% 59%;
+    --text-label: 40 8% 27%;        /* #4a4840 — section labels only */
 
-    --chart-1: 235 91% 74%;
-    --chart-2: 142 69% 58%;
-    --chart-3: 38 92% 50%;
-    --chart-4: 0 84% 60%;
-    --chart-5: 280 68% 68%;
-    --chart-6: 217 91% 60%;
+    --success: 133 22% 45%;         /* #5a8a62 */
+    --warning: 38 54% 50%;          /* #c49a3a */
+    --error: 8 42% 53%;             /* #c06050 */
+    --info: 175 35% 55%;              /* #6bb0a5 — warm teal, readable */
+
+    --online: 133 22% 45%;
+    --offline: 8 42% 53%;
+    --unknown: 36 7% 54%;
+
+    --alert-badge: 43 56% 53%;      /* #d4a43a */
+
+    --chart-1: 43 28% 47%;
+    --chart-2: 133 22% 45%;
+    --chart-3: 38 54% 50%;
+    --chart-4: 8 42% 53%;
+    --chart-5: 280 30% 55%;
+    --chart-6: 217 50% 55%;
 
     --foreground: var(--text-primary);
-    --card: var(--surface);
+    --card: var(--panel);
     --card-foreground: var(--text-primary);
-    --popover: var(--surface);
+    --popover: var(--panel);
     --popover-foreground: var(--text-primary);
     --primary: var(--accent);
-    --primary-foreground: 222 47% 11%;
+    --primary-foreground: 40 14% 4%;
     --secondary: var(--elevated);
     --secondary-foreground: var(--text-primary);
-    --muted: 217 33% 17% / 0.5;
+    --muted: var(--elevated);
     --muted-foreground: var(--text-secondary);
-    --input: var(--border);
-    --sidebar: 222 47% 11%;
+    --input: var(--border-default);
+    --border: var(--border-default);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -184,12 +181,15 @@
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: hsl(var(--elevated)); border-radius: 3px; }
-  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--border-bright)); }
+  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--text-muted)); }
+
+  :root {
+    transition: background-color 100ms linear, color 100ms linear;
+  }
 
-  /* ── Deep Space transitions ── */
   button, a, input, select, textarea,
   [role="button"], [role="tab"], [role="menuitem"] {
-    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
+    transition: background-color 50ms linear, border-color 50ms linear, color 50ms linear;
   }
 
   [data-sidebar] {
@@ -197,13 +197,45 @@
   }
 
   [data-radix-dialog-overlay] {
-    transition: opacity 150ms ease;
+    transition: none;
   }
   [data-radix-dialog-content] {
-    transition: opacity 150ms ease, transform 150ms ease;
+    transition: none;
   }
 
   .font-mono, [class*="font-mono"] {
     font-variant-numeric: tabular-nums;
   }
 }
+
+/* ── Interaction classes ── */
+@layer components {
+  .list-item-interactive {
+    border-left: 2px solid transparent;
+    transition: border-color 50ms linear, background-color 50ms linear;
+  }
+  .list-item-interactive:hover,
+  .list-item-interactive:focus-visible {
+    border-left-color: hsl(var(--accent));
+    outline: none;
+  }
+  .list-item-interactive:active {
+    background-color: hsl(var(--elevated));
+  }
+
+  /* Panel empty state — centered muted text */
+  .panel-empty {
+    text-align: center;
+    padding: 1.25rem 0.625rem;
+    color: hsl(var(--text-muted));
+    font-size: 0.5625rem; /* 9px */
+  }
+
+  /* Panel error state — centered error text */
+  .panel-error {
+    text-align: center;
+    padding: 1.25rem 0.625rem;
+    color: hsl(var(--error));
+    font-size: 0.5625rem;
+  }
+}
diff --git a/frontend/src/lib/store.ts b/frontend/src/lib/store.ts
index ad6c134..be66467 100644
--- a/frontend/src/lib/store.ts
+++ b/frontend/src/lib/store.ts
@@ -2,17 +2,21 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { applyTheme } from './theme'
 
+type UIScale = 100 | 110 | 125
+
 interface UIState {
   selectedTenantId: string | null
   sidebarCollapsed: boolean
   mobileSidebarOpen: boolean
   theme: 'dark' | 'light'
+  uiScale: UIScale
 
   setSelectedTenantId: (id: string | null) => void
   setSidebarCollapsed: (collapsed: boolean) => void
   toggleSidebar: () => void
   setMobileSidebarOpen: (open: boolean) => void
   setTheme: (theme: 'dark' | 'light') => void
+  setUIScale: (scale: UIScale) => void
 }
 
 export const useUIStore = create<UIState>()(
@@ -22,6 +26,7 @@ export const useUIStore = create<UIState>()(
       sidebarCollapsed: false,
       mobileSidebarOpen: false,
       theme: 'dark',
+      uiScale: 100,
 
       setSelectedTenantId: (id) => set({ selectedTenantId: id }),
       setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
@@ -31,6 +36,10 @@ export const useUIStore = create<UIState>()(
         applyTheme(theme)
         set({ theme })
       },
+      setUIScale: (scale) => {
+        document.documentElement.style.zoom = `${scale}%`
+        set({ uiScale: scale })
+      },
     }),
     {
       name: 'tod-ui-state',
@@ -38,6 +47,7 @@ export const useUIStore = create<UIState>()(
         sidebarCollapsed: state.sidebarCollapsed,
         theme: state.theme,
         selectedTenantId: state.selectedTenantId,
+        uiScale: state.uiScale,
       }),
     },
   ),
diff --git a/frontend/src/routes/_authenticated.tsx b/frontend/src/routes/_authenticated.tsx
index 6f20a43..3cded92 100644
--- a/frontend/src/routes/_authenticated.tsx
+++ b/frontend/src/routes/_authenticated.tsx
@@ -12,7 +12,7 @@ import { EventStreamProvider } from '@/contexts/EventStreamContext'
 import type { FleetDevice } from '@/lib/api'
 import { AppLayout } from '@/components/layout/AppLayout'
 import { PageTransition } from '@/components/layout/PageTransition'
-import { Skeleton } from '@/components/ui/skeleton'
+import { LoadingText } from '@/components/ui/skeleton'
 import { ErrorBoundary } from '@/components/ui/error-boundary'
 
 export const Route = createFileRoute('/_authenticated')({
@@ -164,11 +164,7 @@ function AuthenticatedLayout() {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-screen bg-background">
-        <div className="space-y-4 w-64">
-          <Skeleton className="h-8 w-48 mx-auto" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-        </div>
+        <LoadingText />
       </div>
     )
   }
diff --git a/frontend/src/routes/_authenticated/about.tsx b/frontend/src/routes/_authenticated/about.tsx
index 44e34ff..35cc183 100644
--- a/frontend/src/routes/_authenticated/about.tsx
+++ b/frontend/src/routes/_authenticated/about.tsx
@@ -512,16 +512,16 @@ function AboutPage() {
         <RugLogo size={64} />
         <h1 className="text-2xl font-bold text-text-primary">TOD - The Other Dude</h1>
         <p className="text-text-secondary">
-          MSP fleet management platform for RouterOS devices
+          MikroTik fleet management platform
         </p>
-        <span className="inline-block px-3 py-1 text-xs font-mono font-medium text-accent bg-accent-muted rounded-full">
+        <span className="inline-block px-3 py-1 text-xs font-mono font-medium text-accent bg-accent-soft rounded-full">
           {APP_VERSION}
         </span>
       </div>
 
       {/* License */}
       {license && (
-        <div className="rounded-lg border border-border bg-surface p-5 space-y-2">
+        <div className="rounded-lg border border-border bg-panel p-5 space-y-2">
           <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
             License
           </h2>
@@ -542,7 +542,7 @@ function AboutPage() {
       )}
 
       {/* Features summary */}
-      <div className="rounded-lg border border-border bg-surface p-5 space-y-3">
+      <div className="rounded-lg border border-border bg-panel p-5 space-y-3">
         <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
           Platform
         </h2>
@@ -575,7 +575,7 @@ function AboutPage() {
       </div>
 
       {/* Support Development */}
-      <div className="rounded-lg border border-border bg-surface p-5 space-y-4">
+      <div className="rounded-lg border border-border bg-panel p-5 space-y-4">
         <h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
           Support Development
         </h2>
diff --git a/frontend/src/routes/_authenticated/audit.tsx b/frontend/src/routes/_authenticated/audit.tsx
index 8b35630..d513127 100644
--- a/frontend/src/routes/_authenticated/audit.tsx
+++ b/frontend/src/routes/_authenticated/audit.tsx
@@ -31,7 +31,7 @@ function AuditPage() {
           <ClipboardList className="h-5 w-5 text-text-muted" />
           Audit Trail
         </h1>
-        <div className="rounded-lg border border-border bg-surface p-8 text-center">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center">
           <p className="text-sm text-text-muted">
             You need at least operator permissions to view the audit trail.
           </p>
@@ -52,7 +52,7 @@ function AuditPage() {
       {tenantId ? (
         <AuditLogTable tenantId={tenantId} />
       ) : (
-        <div className="rounded-lg border border-border bg-surface p-12 text-center">
+        <div className="rounded-lg border border-border bg-panel p-12 text-center">
           <Building2 className="h-8 w-8 text-text-muted mx-auto mb-3" />
           <p className="text-sm text-text-muted">
             Select an organization from the header to view audit logs.
diff --git a/frontend/src/routes/_authenticated/batch-config.tsx b/frontend/src/routes/_authenticated/batch-config.tsx
index 1e741b8..a21e0e5 100644
--- a/frontend/src/routes/_authenticated/batch-config.tsx
+++ b/frontend/src/routes/_authenticated/batch-config.tsx
@@ -30,7 +30,7 @@ function BatchConfigPage() {
           <Wrench className="h-5 w-5 text-text-muted" />
           Batch Configuration
         </h1>
-        <div className="rounded-lg border border-border bg-surface p-8 text-center">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center">
           <p className="text-sm text-text-muted">
             You need at least operator permissions to use batch configuration.
           </p>
@@ -58,7 +58,7 @@ function BatchConfigPage() {
       {tenantId ? (
         <BatchConfigPanel tenantId={tenantId} />
       ) : (
-        <div className="rounded-lg border border-border bg-surface p-8 text-center space-y-2">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center space-y-2">
           <Building2 className="h-6 w-6 mx-auto text-text-muted" />
           <p className="text-sm text-text-muted">
             Select an organization from the header to get started.
diff --git a/frontend/src/routes/_authenticated/bulk-commands.tsx b/frontend/src/routes/_authenticated/bulk-commands.tsx
index 2a213d6..839aa4b 100644
--- a/frontend/src/routes/_authenticated/bulk-commands.tsx
+++ b/frontend/src/routes/_authenticated/bulk-commands.tsx
@@ -31,7 +31,7 @@ function BulkCommandsPage() {
           <Terminal className="h-5 w-5 text-text-muted" />
           Bulk Commands
         </h1>
-        <div className="rounded-lg border border-border bg-surface p-8 text-center">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center">
           <p className="text-sm text-text-muted">
             You need at least operator permissions to use bulk commands.
           </p>
diff --git a/frontend/src/routes/_authenticated/maintenance.tsx b/frontend/src/routes/_authenticated/maintenance.tsx
index ee4fa4f..025bfe4 100644
--- a/frontend/src/routes/_authenticated/maintenance.tsx
+++ b/frontend/src/routes/_authenticated/maintenance.tsx
@@ -32,7 +32,7 @@ function MaintenancePage() {
           <Calendar className="h-5 w-5 text-text-muted" />
           Maintenance Windows
         </h1>
-        <div className="rounded-lg border border-border bg-surface p-8 text-center">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center">
           <p className="text-sm text-text-muted">
             You need at least operator permissions to manage maintenance windows.
           </p>
diff --git a/frontend/src/routes/_authenticated/reports.tsx b/frontend/src/routes/_authenticated/reports.tsx
index e55f165..b91bb9e 100644
--- a/frontend/src/routes/_authenticated/reports.tsx
+++ b/frontend/src/routes/_authenticated/reports.tsx
@@ -33,7 +33,7 @@ function ReportsPageRoute() {
           <FileText className="h-5 w-5 text-text-muted" />
           Reports
         </h1>
-        <div className="rounded-lg border border-border bg-surface p-8 text-center">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center">
           <p className="text-sm text-text-muted">
             You need at least operator permissions to generate reports.
           </p>
@@ -61,7 +61,7 @@ function ReportsPageRoute() {
       {tenantId ? (
         <ReportsPage tenantId={tenantId} />
       ) : (
-        <div className="rounded-lg border border-border bg-surface p-12 text-center">
+        <div className="rounded-lg border border-border bg-panel p-12 text-center">
           <Building2 className="h-8 w-8 text-text-muted mx-auto mb-3" />
           <p className="text-sm text-text-muted">
             Select an organization from the header to view reports.
diff --git a/frontend/src/routes/_authenticated/settings.api-keys.tsx b/frontend/src/routes/_authenticated/settings.api-keys.tsx
index aeb2ad2..d10174e 100644
--- a/frontend/src/routes/_authenticated/settings.api-keys.tsx
+++ b/frontend/src/routes/_authenticated/settings.api-keys.tsx
@@ -18,7 +18,7 @@ function ApiKeysRoute() {
   if (!isTenantAdmin(user)) {
     return (
       <div className="space-y-6 max-w-2xl">
-        <div className="rounded-lg border border-border bg-surface px-6 py-12 text-center">
+        <div className="rounded-lg border border-border bg-panel px-6 py-12 text-center">
           <ShieldAlert className="h-10 w-10 text-text-muted mx-auto mb-3" />
           <h2 className="text-sm font-medium mb-1">Access Denied</h2>
           <p className="text-sm text-text-muted">
@@ -32,7 +32,7 @@ function ApiKeysRoute() {
   return (
     <div className="space-y-4 max-w-4xl">
       {!tenantId ? (
-        <div className="rounded-lg border border-border bg-surface p-8 text-center space-y-2">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center space-y-2">
           <Building2 className="h-6 w-6 mx-auto text-text-muted" />
           <p className="text-sm text-text-muted">
             Select an organization from the header to manage API keys.
diff --git a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
index 5589462..5e5fda0 100644
--- a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
+++ b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
@@ -2,12 +2,10 @@ import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import {
-  ChevronRight,
   Eye,
   EyeOff,
   Pencil,
   Trash2,
-  Circle,
   Tag,
   FolderOpen,
   BellOff,
@@ -189,50 +187,18 @@ function EditDeviceDialog({
   )
 }
 
-function StatusBadge({ status }: { status: string }) {
-  const config: Record<string, { label: string; className: string }> = {
-    online: { label: 'Online', className: 'text-success border-success/50 bg-success/10' },
-    offline: { label: 'Offline', className: 'text-error border-error/50 bg-error/10' },
-    unknown: { label: 'Unknown', className: 'text-text-muted border-border bg-elevated/50' },
-  }
-  const c = config[status] ?? config.unknown
-  return (
-    <span className={cn('inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded border', c.className)}>
-      <Circle className="h-2 w-2 fill-current" />
-      {c.label}
-    </span>
-  )
-}
-
 function TlsSecurityBadge({ tlsMode }: { tlsMode: string }) {
-  const config: Record<string, { label: string; icon: React.ElementType; className: string }> = {
-    portal_ca: {
-      label: 'CA Verified',
-      icon: ShieldCheck,
-      className: 'text-success border-success/50 bg-success/10',
-    },
-    auto: {
-      label: 'Self-Signed TLS',
-      icon: Shield,
-      className: 'text-warning border-warning/50 bg-warning/10',
-    },
-    insecure: {
-      label: 'Insecure TLS',
-      icon: ShieldAlert,
-      className: 'text-orange-400 border-orange-400/50 bg-orange-400/10',
-    },
-    plain: {
-      label: 'Plain-Text (Insecure)',
-      icon: ShieldOff,
-      className: 'text-error border-error/50 bg-error/10',
-    },
+  const config: Record<string, { label: string; icon: React.ElementType; color: string }> = {
+    portal_ca: { label: 'CA Verified', icon: ShieldCheck, color: 'text-success' },
+    auto: { label: 'Self-Signed TLS', icon: Shield, color: 'text-warning' },
+    insecure: { label: 'Insecure TLS', icon: ShieldAlert, color: 'text-warning' },
+    plain: { label: 'Plain-Text', icon: ShieldOff, color: 'text-error' },
   }
   const c = config[tlsMode] ?? config.auto
   const Icon = c.icon
   return (
-    <span className={cn('inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded border', c.className)}>
+    <span className={cn('flex-shrink-0', c.color)} title={c.label}>
       <Icon className="h-3 w-3" />
-      {c.label}
     </span>
   )
 }
@@ -323,9 +289,9 @@ function TlsModeSelector({
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-start gap-4 py-2 border-b border-border/50 last:border-0">
-      <span className="text-xs text-text-muted w-32 flex-shrink-0 pt-0.5">{label}</span>
-      <span className="text-sm text-text-primary flex-1">{value ?? '—'}</span>
+    <div className="flex items-center gap-3 py-1 border-b border-border-subtle last:border-0">
+      <span className="text-[10px] text-text-muted w-24 flex-shrink-0">{label}</span>
+      <span className="text-xs text-text-primary flex-1">{value ?? '—'}</span>
     </div>
   )
 }
@@ -336,7 +302,11 @@ function DeviceDetailPage() {
   const queryClient = useQueryClient()
   const { user } = useAuth()
   const [showCreds, setShowCreds] = useState(false)
-  const [activeTab, setActiveTab] = useState('overview')
+  const [activeTab, setActiveTabRaw] = useState('overview')
+  const setActiveTab = (tab: string) => {
+    setActiveTabRaw(tab)
+    document.getElementById('main-content')?.scrollTo(0, 0)
+  }
   const [editOpen, setEditOpen] = useState(false)
   const { mode, toggleMode } = useSimpleConfigMode(deviceId)
 
@@ -465,57 +435,67 @@ function DeviceDetailPage() {
 
   return (
     <div className={cn('space-y-4', mode === 'simple' ? 'max-w-5xl' : 'max-w-3xl')} data-testid="device-detail">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-1 text-xs text-text-muted">
-        <Link to="/tenants" className="hover:text-text-secondary transition-colors">
-          Tenants
-        </Link>
-        <ChevronRight className="h-3 w-3" />
-        <Link
-          to="/tenants/$tenantId/devices"
-          params={{ tenantId }}
-          className="hover:text-text-secondary transition-colors"
-        >
-          {tenant?.name ?? tenantId}
-        </Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-text-secondary">{device.hostname}</span>
-      </div>
-
-      {/* Device header */}
-      <div className="flex items-start justify-between">
-        <div className="space-y-1">
-          <div className="flex items-center gap-3">
-            <h1 className="text-lg font-semibold" data-testid="device-hostname">{device.hostname}</h1>
-            <StatusBadge status={device.status} />
-            <TlsSecurityBadge tlsMode={device.tls_mode} />
-          </div>
-          <p className="font-mono text-sm text-text-secondary">{device.ip_address}</p>
+      {/* Device workspace header */}
+      <div className="bg-sidebar border border-border-default rounded-sm px-3 py-1.5">
+        {/* Top row: device identity */}
+        <div className="flex items-center gap-1.5 min-w-0">
+          <Link
+            to="/tenants/$tenantId/devices"
+            params={{ tenantId }}
+            className="text-[8px] text-text-muted hover:text-text-secondary transition-[color] duration-[50ms] flex-shrink-0"
+          >
+            Devices
+          </Link>
+          <span className="text-[8px] text-text-muted flex-shrink-0">&rsaquo;</span>
+          <div className={cn(
+            'w-1.5 h-1.5 rounded-full flex-shrink-0',
+            device.status === 'online' ? 'bg-online' :
+            device.status === 'degraded' ? 'bg-warning' : 'bg-offline'
+          )} />
+          <h1 className="text-[13px] font-semibold text-text-primary truncate" data-testid="device-hostname">
+            {device.hostname}
+          </h1>
+          <span className={cn(
+            'text-[9px] flex-shrink-0',
+            device.status === 'online' ? 'text-online' :
+            device.status === 'degraded' ? 'text-warning' : 'text-offline'
+          )}>
+            {device.status}
+          </span>
+          <TlsSecurityBadge tlsMode={device.tls_mode} />
         </div>
-        <div className="flex items-center gap-3">
-          <SimpleModeToggle mode={mode} onModeChange={toggleMode} />
-          {user?.role !== 'viewer' && (
-            <div className="flex gap-2">
-              {device.routeros_version !== null && (
-                <>
-                  <WinBoxButton tenantId={tenantId} deviceId={deviceId} />
-                  <RemoteWinBoxButton tenantId={tenantId} deviceId={deviceId} />
-                </>
-              )}
+        {/* Metadata + actions row */}
+        <div className="flex items-center justify-between mt-0.5 gap-2">
+          <div className="text-[9px] text-text-secondary truncate pl-[9px]">
+            {device.model ?? device.board_name ?? '\u2014'}
+            {' \u00b7 '}
+            <span className="font-mono text-[8px]">{device.ip_address}</span>
+            {device.routeros_version && (
+              <>
+                {' \u00b7 '}
+                <span className="font-mono text-[8px]">v{device.routeros_version}</span>
+              </>
+            )}
+          </div>
+          <div className="flex items-center gap-1 flex-shrink-0">
+            <SimpleModeToggle mode={mode} onModeChange={toggleMode} />
+            {user?.role !== 'viewer' && device.routeros_version !== null && (
+              <>
+                <WinBoxButton tenantId={tenantId} deviceId={deviceId} />
+                <RemoteWinBoxButton tenantId={tenantId} deviceId={deviceId} />
+              </>
+            )}
+            {user?.role !== 'viewer' && (
               <SSHTerminal tenantId={tenantId} deviceId={deviceId} deviceName={device.hostname} />
-            </div>
-          )}
-          <div className="flex gap-2">
+            )}
             {canWrite(user) && (
-              <Button variant="outline" size="sm" onClick={() => setEditOpen(true)} data-testid="button-edit-device">
-                <Pencil className="h-3.5 w-3.5" />
-                Edit
+              <Button variant="ghost" size="icon" className="h-6 w-6 text-text-muted" onClick={() => setEditOpen(true)} data-testid="button-edit-device">
+                <Pencil className="h-3 w-3" />
               </Button>
             )}
             {canDelete(user) && (
-              <Button variant="destructive" size="sm" onClick={handleDelete} data-testid="button-delete-device">
-                <Trash2 className="h-3.5 w-3.5" />
-                Delete
+              <Button variant="ghost" size="icon" className="h-6 w-6 text-text-muted" onClick={handleDelete} data-testid="button-delete-device">
+                <Trash2 className="h-3 w-3" />
               </Button>
             )}
           </div>
@@ -542,7 +522,7 @@ function DeviceDetailPage() {
         overviewContent={
           <>
             {/* Device info */}
-            <div className="rounded-lg border border-border bg-surface px-4 py-2">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-1.5">
               <InfoRow label="Model" value={device.model} />
               <InfoRow label="RouterOS" value={device.routeros_version} />
               <InfoRow label="Firmware" value={device.firmware_version || 'N/A'} />
@@ -595,7 +575,7 @@ function DeviceDetailPage() {
             </div>
 
             {/* Credentials (masked) */}
-            <div className="rounded-lg border border-border bg-surface px-4 py-3">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-2">
               <div className="flex items-center justify-between mb-3">
                 <h3 className="text-sm font-medium text-text-secondary">Credentials</h3>
                 <Button
@@ -632,7 +612,7 @@ function DeviceDetailPage() {
             </div>
 
             {/* Groups */}
-            <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-3">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-2 space-y-3">
               <div className="flex items-center gap-2">
                 <FolderOpen className="h-4 w-4 text-text-muted" />
                 <h3 className="text-sm font-medium text-text-secondary">Groups</h3>
@@ -641,7 +621,7 @@ function DeviceDetailPage() {
                 {device.groups.map((group) => (
                   <div
                     key={group.id}
-                    className="flex items-center gap-1 text-xs border border-border-bright rounded px-2 py-1"
+                    className="flex items-center gap-1 text-xs border border-border-default rounded px-2 py-1"
                   >
                     {group.name}
                     {canWrite(user) && (
@@ -678,7 +658,7 @@ function DeviceDetailPage() {
             </div>
 
             {/* Tags */}
-            <div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-3">
+            <div className="rounded-sm border border-border-default bg-panel px-3 py-2 space-y-3">
               <div className="flex items-center gap-2">
                 <Tag className="h-4 w-4 text-text-muted" />
                 <h3 className="text-sm font-medium text-text-secondary">Tags</h3>
@@ -721,7 +701,7 @@ function DeviceDetailPage() {
             </div>
 
             {/* Interface Utilization */}
-            <div className="rounded-lg border border-border bg-surface p-4">
+            <div className="rounded-lg border border-border bg-panel p-4">
               <h3 className="text-sm font-medium text-text-muted mb-3">Interface Utilization</h3>
               <InterfaceGauges tenantId={tenantId} deviceId={deviceId} active={activeTab === 'overview'} />
             </div>
@@ -824,7 +804,7 @@ function DeviceAlertsSection({
   const resolvedAlerts = alerts.filter((a) => a.status === 'resolved').slice(0, 5)
 
   if (isLoading) {
-    return <TableSkeleton rows={3} />
+    return <TableSkeleton />
   }
 
   return (
@@ -842,12 +822,12 @@ function DeviceAlertsSection({
         </h3>
 
         {firingAlerts.length === 0 ? (
-          <div className="rounded-lg border border-border bg-surface p-6 text-center">
+          <div className="rounded-lg border border-border bg-panel p-6 text-center">
             <CheckCircle className="h-6 w-6 text-success/50 mx-auto mb-1" />
             <p className="text-xs text-text-muted">No active alerts for this device.</p>
           </div>
         ) : (
-          <div className="rounded-lg border border-border bg-surface overflow-hidden">
+          <div className="rounded-lg border border-border bg-panel overflow-hidden">
             {firingAlerts.map((alert) => {
               const isSilenced =
                 alert.silenced_until && new Date(alert.silenced_until) > new Date()
@@ -940,7 +920,7 @@ function DeviceAlertsSection({
           </button>
 
           {showResolved && (
-            <div className="rounded-lg border border-border bg-surface overflow-hidden">
+            <div className="rounded-lg border border-border bg-panel overflow-hidden">
               {resolvedAlerts.map((alert) => (
                 <div
                   key={alert.id}
diff --git a/frontend/src/routes/_authenticated/tenants/$tenantId/index.tsx b/frontend/src/routes/_authenticated/tenants/$tenantId/index.tsx
index a6086ca..73126af 100644
--- a/frontend/src/routes/_authenticated/tenants/$tenantId/index.tsx
+++ b/frontend/src/routes/_authenticated/tenants/$tenantId/index.tsx
@@ -23,7 +23,7 @@ function TenantDetailPage() {
   })
 
   if (isLoading) {
-    return <CardGridSkeleton cards={3} />
+    return <CardGridSkeleton />
   }
 
   if (!tenant) {
@@ -49,7 +49,7 @@ function TenantDetailPage() {
         <Link
           to="/tenants/$tenantId/users"
           params={{ tenantId }}
-          className="flex items-center gap-3 rounded-lg border border-border bg-surface p-4 hover:bg-elevated/50 transition-colors group"
+          className="flex items-center gap-3 rounded-lg border border-border bg-panel p-4 hover:bg-elevated/50 transition-colors group"
         >
           <Users className="h-8 w-8 text-text-muted group-hover:text-text-muted transition-colors" />
           <div>
@@ -61,7 +61,7 @@ function TenantDetailPage() {
         <Link
           to="/tenants/$tenantId/sites"
           params={{ tenantId }}
-          className="flex items-center gap-3 rounded-lg border border-border bg-surface p-4 hover:bg-elevated/50 transition-colors group"
+          className="flex items-center gap-3 rounded-lg border border-border bg-panel p-4 hover:bg-elevated/50 transition-colors group"
         >
           <MapPin className="h-8 w-8 text-text-muted group-hover:text-text-muted transition-colors" />
           <div>
@@ -73,7 +73,7 @@ function TenantDetailPage() {
         <Link
           to="/tenants/$tenantId/devices"
           params={{ tenantId }}
-          className="flex items-center gap-3 rounded-lg border border-border bg-surface p-4 hover:bg-elevated/50 transition-colors group"
+          className="flex items-center gap-3 rounded-lg border border-border bg-panel p-4 hover:bg-elevated/50 transition-colors group"
         >
           <Monitor className="h-8 w-8 text-text-muted group-hover:text-text-muted transition-colors" />
           <div>
diff --git a/frontend/src/routes/_authenticated/tenants/$tenantId/sites/$siteId.tsx b/frontend/src/routes/_authenticated/tenants/$tenantId/sites/$siteId.tsx
index 97ac9e5..f109746 100644
--- a/frontend/src/routes/_authenticated/tenants/$tenantId/sites/$siteId.tsx
+++ b/frontend/src/routes/_authenticated/tenants/$tenantId/sites/$siteId.tsx
@@ -26,9 +26,8 @@ function SiteDetailPage() {
 
   if (isLoading) {
     return (
-      <div className="animate-pulse space-y-4">
-        <div className="h-6 w-48 bg-elevated rounded" />
-        <div className="h-4 w-64 bg-elevated rounded" />
+      <div className="py-8 text-center">
+        <span className="text-[9px] text-text-muted">Loading&hellip;</span>
       </div>
     )
   }
@@ -49,7 +48,7 @@ function SiteDetailPage() {
       </div>
 
       {/* Site info card */}
-      <div className="rounded-lg border border-border bg-surface p-6 space-y-4">
+      <div className="rounded-lg border border-border bg-panel p-6 space-y-4">
         <div className="flex items-center gap-3">
           <MapPin className="h-6 w-6 text-text-muted" />
           <h1 className="text-xl font-semibold">{site.name}</h1>
@@ -87,15 +86,15 @@ function SiteDetailPage() {
 
       {/* Health stats summary */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div className="rounded-lg border border-border bg-surface p-4 text-center">
+        <div className="rounded-lg border border-border bg-panel p-4 text-center">
           <p className="text-2xl font-semibold">{site.device_count}</p>
           <p className="text-xs text-text-muted">Devices</p>
         </div>
-        <div className="rounded-lg border border-border bg-surface p-4 text-center">
+        <div className="rounded-lg border border-border bg-panel p-4 text-center">
           <p className="text-2xl font-semibold">{site.online_count}</p>
           <p className="text-xs text-text-muted">Online</p>
         </div>
-        <div className="rounded-lg border border-border bg-surface p-4 text-center">
+        <div className="rounded-lg border border-border bg-panel p-4 text-center">
           <p
             className={cn(
               'text-2xl font-semibold',
@@ -110,7 +109,7 @@ function SiteDetailPage() {
           </p>
           <p className="text-xs text-text-muted">Online %</p>
         </div>
-        <div className="rounded-lg border border-border bg-surface p-4 text-center">
+        <div className="rounded-lg border border-border bg-panel p-4 text-center">
           <p className={cn('text-2xl font-semibold', site.alert_count > 0 && 'text-red-500')}>
             {site.alert_count}
           </p>
diff --git a/frontend/src/routes/_authenticated/topology.tsx b/frontend/src/routes/_authenticated/topology.tsx
index 2adf6f8..5641bd5 100644
--- a/frontend/src/routes/_authenticated/topology.tsx
+++ b/frontend/src/routes/_authenticated/topology.tsx
@@ -42,7 +42,7 @@ function TopologyPage() {
       </div>
 
       {/* Topology map (full remaining height) */}
-      <div className="flex-1 min-h-0 mx-4 mb-4 rounded-lg border border-border bg-surface overflow-hidden">
+      <div className="flex-1 min-h-0 mx-4 mb-4 rounded-lg border border-border bg-panel overflow-hidden">
         {tenantId ? (
           <TopologyMap tenantId={tenantId} />
         ) : (
diff --git a/frontend/src/routes/_authenticated/traffic.tsx b/frontend/src/routes/_authenticated/traffic.tsx
index b20671f..4333921 100644
--- a/frontend/src/routes/_authenticated/traffic.tsx
+++ b/frontend/src/routes/_authenticated/traffic.tsx
@@ -84,7 +84,7 @@ function TrafficPage() {
 
       {/* KPI Cards */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-4">
             <p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
               Fleet Avg CPU
@@ -100,7 +100,7 @@ function TrafficPage() {
           </CardContent>
         </Card>
 
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-4">
             <p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
               Fleet Avg Memory
@@ -116,7 +116,7 @@ function TrafficPage() {
           </CardContent>
         </Card>
 
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-4">
             <p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
               Devices Online
@@ -130,13 +130,13 @@ function TrafficPage() {
 
       {/* Top Resource Consumers */}
       {isLoading ? (
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-6">
             <p className="text-sm text-text-muted">Loading fleet data...</p>
           </CardContent>
         </Card>
       ) : devices.length === 0 ? (
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="flex flex-col items-center justify-center gap-3 p-12">
             <Inbox className="h-10 w-10 text-text-muted" />
             <p className="text-sm font-medium text-text-secondary">
@@ -149,7 +149,7 @@ function TrafficPage() {
           <h2 className="text-sm font-semibold text-text-primary">
             Top Resource Consumers
           </h2>
-          <Card className="border-border bg-surface overflow-hidden">
+          <Card className="border-border bg-panel overflow-hidden">
             <div className="overflow-x-auto">
               <table className="w-full text-left">
                 <thead>
@@ -180,7 +180,7 @@ function TrafficPage() {
                   {top10.map((device) => (
                     <tr
                       key={device.id}
-                      className="border-b border-border/50 hover:bg-surface-hover transition-colors"
+                      className="border-b border-border/50 hover:bg-panel-hover transition-colors"
                     >
                       <td className="px-4 py-3 text-sm text-text-secondary">
                         {tenantId ? (
diff --git a/frontend/src/routes/_authenticated/transparency.tsx b/frontend/src/routes/_authenticated/transparency.tsx
index de459e9..41064be 100644
--- a/frontend/src/routes/_authenticated/transparency.tsx
+++ b/frontend/src/routes/_authenticated/transparency.tsx
@@ -35,7 +35,7 @@ function TransparencyPage() {
           <Eye className="h-5 w-5 text-text-muted" />
           Data Transparency
         </h1>
-        <div className="rounded-lg border border-border bg-surface p-8 text-center">
+        <div className="rounded-lg border border-border bg-panel p-8 text-center">
           <p className="text-sm text-text-muted">
             You need admin permissions to view the transparency dashboard.
           </p>
@@ -61,7 +61,7 @@ function TransparencyPage() {
       {tenantId ? (
         <TransparencyLogTable tenantId={tenantId} />
       ) : (
-        <div className="rounded-lg border border-border bg-surface p-12 text-center">
+        <div className="rounded-lg border border-border bg-panel p-12 text-center">
           <Building2 className="h-8 w-8 text-text-muted mx-auto mb-3" />
           <p className="text-sm text-text-muted">
             Select an organization from the header to view transparency logs.
diff --git a/frontend/src/routes/_authenticated/wireless.tsx b/frontend/src/routes/_authenticated/wireless.tsx
index 6b8b88f..dd793cb 100644
--- a/frontend/src/routes/_authenticated/wireless.tsx
+++ b/frontend/src/routes/_authenticated/wireless.tsx
@@ -57,7 +57,7 @@ function WirelessPage() {
 
       {/* KPI Cards */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-4">
             <p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
               APs with Issues
@@ -68,7 +68,7 @@ function WirelessPage() {
           </CardContent>
         </Card>
 
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-4">
             <p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
               Worst Signal
@@ -84,7 +84,7 @@ function WirelessPage() {
           </CardContent>
         </Card>
 
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-4">
             <p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
               Total Clients
@@ -98,13 +98,13 @@ function WirelessPage() {
 
       {/* Issues Table or All Clear */}
       {isLoading ? (
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="p-6">
             <p className="text-sm text-text-muted">Loading wireless data...</p>
           </CardContent>
         </Card>
       ) : issues.length === 0 ? (
-        <Card className="border-border bg-surface">
+        <Card className="border-border bg-panel">
           <CardContent className="flex flex-col items-center justify-center gap-3 p-12">
             <CheckCircle2 className="h-10 w-10 text-success" />
             <p className="text-sm font-medium text-text-secondary">
@@ -113,7 +113,7 @@ function WirelessPage() {
           </CardContent>
         </Card>
       ) : (
-        <Card className="border-border bg-surface overflow-hidden">
+        <Card className="border-border bg-panel overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-left">
               <thead>
@@ -150,7 +150,7 @@ function WirelessPage() {
                 {issues.map((issue, idx) => (
                   <tr
                     key={`${issue.device_id}-${issue.interface}-${idx}`}
-                    className="border-b border-border/50 hover:bg-surface-hover transition-colors"
+                    className="border-b border-border/50 hover:bg-panel-hover transition-colors"
                   >
                     <td className="px-4 py-3 text-sm text-text-secondary">
                       <div className="flex items-center gap-2">
diff --git a/frontend/src/routes/forgot-password.tsx b/frontend/src/routes/forgot-password.tsx
index 8eff567..a058a7a 100644
--- a/frontend/src/routes/forgot-password.tsx
+++ b/frontend/src/routes/forgot-password.tsx
@@ -46,7 +46,7 @@ function ForgotPasswordPage() {
           </p>
         </div>
 
-        <div className="rounded-lg border border-border bg-surface/50 p-6">
+        <div className="rounded-lg border border-border bg-panel/50 p-6">
           {sent ? (
             <div className="space-y-4">
               <div className="rounded-md bg-success/10 border border-success/30 px-3 py-3">
diff --git a/frontend/src/routes/login.tsx b/frontend/src/routes/login.tsx
index 88e1ae1..37c1531 100644
--- a/frontend/src/routes/login.tsx
+++ b/frontend/src/routes/login.tsx
@@ -121,11 +121,11 @@ function LoginPage() {
             <RugLogo size={56} />
           </div>
           <h1 className="text-lg font-semibold text-text-primary">TOD - The Other Dude</h1>
-          <p className="text-xs text-text-muted mt-1">MSP Fleet Management</p>
+          <p className="text-xs text-text-muted mt-1">MikroTik Fleet Management</p>
         </div>
 
         {/* Login card */}
-        <div className="rounded-lg border border-border bg-surface p-6">
+        <div className="rounded-lg border border-border bg-panel p-6">
           <form onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
             <div className="space-y-1.5">
               <Label htmlFor="email">Email</Label>
diff --git a/frontend/src/routes/reset-password.tsx b/frontend/src/routes/reset-password.tsx
index 02b0e03..f059dc4 100644
--- a/frontend/src/routes/reset-password.tsx
+++ b/frontend/src/routes/reset-password.tsx
@@ -46,7 +46,7 @@ function ResetPasswordPage() {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background">
         <div className="w-full max-w-sm text-center">
-          <div className="rounded-lg border border-border bg-surface/50 p-6 space-y-4">
+          <div className="rounded-lg border border-border bg-panel/50 p-6 space-y-4">
             <p className="text-sm text-error">Invalid reset link. No token provided.</p>
             <Link to="/login" className="block text-sm text-accent hover:underline">
               Back to Sign In
@@ -69,7 +69,7 @@ function ResetPasswordPage() {
           <p className="text-xs text-text-muted mt-1">Choose a strong password</p>
         </div>
 
-        <div className="rounded-lg border border-border bg-surface/50 p-6">
+        <div className="rounded-lg border border-border bg-panel/50 p-6">
           {success ? (
             <div className="space-y-4">
               <div className="rounded-md bg-success/10 border border-success/30 px-3 py-3">
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index e61aefd..bbce155 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -11,45 +11,29 @@ const config: Config = {
       colors: {
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
-        surface: 'hsl(var(--surface))',
+        sidebar: 'hsl(var(--sidebar))',
+        panel: 'hsl(var(--panel))',
         elevated: 'hsl(var(--elevated))',
-        border: 'hsl(var(--border))',
-        'border-bright': 'hsl(var(--border-bright))',
+        'border-subtle': 'hsl(var(--border-subtle))',
+        'border-default': 'hsl(var(--border-default))',
+        border: 'hsl(var(--border-default))',
         'text-primary': 'hsl(var(--text-primary))',
         'text-secondary': 'hsl(var(--text-secondary))',
         'text-muted': 'hsl(var(--text-muted))',
+        'text-label': 'hsl(var(--text-label))',
         accent: {
           DEFAULT: 'hsl(var(--accent))',
-          hover: 'hsl(var(--accent-hover))',
-          muted: 'hsl(var(--accent-muted))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--text-primary))',
+          soft: 'hsl(var(--accent-soft))',
         },
+        'alert-badge': 'hsl(var(--alert-badge))',
+        card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))' },
+        popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))' },
+        primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' },
+        secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))' },
+        muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' },
+        destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--text-primary))' },
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
-        sidebar: 'hsl(var(--sidebar))',
         online: 'hsl(var(--online))',
         offline: 'hsl(var(--offline))',
         unknown: 'hsl(var(--unknown))',
@@ -68,22 +52,12 @@ const config: Config = {
         sans: ['Manrope', 'system-ui', '-apple-system', 'sans-serif'],
         mono: ['IBM Plex Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
       },
-      animation: {
-        shimmer: 'shimmer 1.5s ease-in-out infinite',
-      },
-      backgroundImage: {
-        shimmer:
-          'linear-gradient(90deg, transparent 0%, hsl(var(--elevated)) 20%, hsl(var(--surface)) 50%, hsl(var(--elevated)) 80%, transparent 100%)',
-      },
-      backgroundSize: {
-        shimmer: '200% 100%',
-      },
       borderRadius: {
-        sm: '0.25rem',
+        sm: '0.0625rem',
         DEFAULT: 'var(--radius)',
-        md: '0.375rem',
-        lg: 'var(--radius)',
-        xl: '0.75rem',
+        md: 'var(--radius-control)',
+        lg: 'var(--radius-control)',
+        xl: 'var(--radius-control)',
       },
     },
   },
diff --git a/web_redesign.md b/web_redesign.md
new file mode 100644
index 0000000..9bff9b7
--- /dev/null
+++ b/web_redesign.md
@@ -0,0 +1,152 @@
+We need to redesign the website to remove all startup / SaaS / marketing patterns.
+
+Current issue:
+It feels too “salesy” and corporate — like a product trying to convince people to use it.
+
+That is the wrong tone.
+
+---
+
+## Core direction
+
+This should feel like:
+- a tool
+- a system
+- a project that exists because it needed to exist
+
+NOT:
+- a startup landing page
+- a marketing funnel
+- a conversion-optimized site
+
+---
+
+## Tone
+
+- Direct
+- Honest
+- Slightly indifferent to whether the user signs up
+- No hype language
+- No promises
+- No “transform your workflow” nonsense
+
+---
+
+## Remove immediately
+
+- Any “hero pitch” language
+- Any “why choose us” sections
+- Any fake trust signals (logos, testimonials, “companies use this”)
+- Any email capture / gated content
+- Any “Get Started Now” pressure CTAs
+
+---
+
+## Replace with
+
+### 1. Simple top section
+
+- Project name
+- One blunt sentence describing what it is
+- Links:
+  - GitHub
+  - Docs
+  - Download / Self-host
+  - SaaS (optional, not emphasized)
+
+Example tone:
+“This is a network control system. It’s in active development. Things may break.”
+
+---
+
+### 2. “What it does” (not marketing)
+
+- Bullet points
+- No adjectives
+- No hype
+
+Bad:
+“Powerful, scalable, next-gen network automation”
+
+Good:
+- Monitor device state
+- Push configuration
+- Track changes
+- Run commands across devices
+
+---
+
+### 3. “What it is not”
+
+This is important for your voice.
+
+Example:
+- Not finished
+- Not stable
+- Not for everyone
+- Not trying to replace everything
+
+---
+
+### 4. Screenshots
+
+- Real UI
+- No mockups
+- No gradients / marketing framing
+- No captions trying to sell
+
+---
+
+### 5. Development status
+
+- Be explicit:
+  - versioning
+  - breaking changes
+  - expectations
+
+---
+
+### 6. Pricing (if present)
+
+- Simple
+- No anchoring tricks
+- No “save 20%”
+- No fake urgency
+
+---
+
+## Visual direction
+
+- Use the same Warm Precision system
+- No big hero sections
+- No oversized typography
+- No soft gradients
+- No “landing page layout”
+
+Layout should feel like:
+- documentation
+- system panel
+- terminal-adjacent
+
+---
+
+## Anti-pattern check
+
+If any section feels like:
+- it’s trying to convince the user
+- it’s trying to impress the user
+- it’s trying to capture the user
+
+Remove or rewrite it.
+
+---
+
+## Goal
+
+The site should feel like:
+
+“This exists. If you need it, you’ll understand it.”
+
+Not:
+
+“Please use this product.”