LOTS OF STYLING STUFF FINALLY THAT I HAD TO DO FINALYL AAUUFH

webui/src/App.jsx

@@ -81,7 +81,7 @@ function DesktopLayout({ layout, onOpenHelpOverlay }) {
       <div className={`flex min-w-0 flex-[1.22] flex-col ${themeGapClass} overflow-y-auto pr-0`}>
         <DriverVideo />
         <TelemetryPanel />
-        <LogPanel />
+        {/* <LogPanel /> */}
       </div>
       <div className={`flex min-w-0 flex-1 flex-col ${themeGapClass} overflow-y-auto`}>
         <GlobalObjectiveBanner layout={layout} />

webui/src/components/AdminPanel/AdminIpLogPanel.jsx

@@ -1,15 +1,13 @@
 // Admin Ip Log Panel
 // Purpose: Defines the Admin Ip Log Panel module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
+import CardFrame from '../CardFrame/index.jsx';
+
 export default function AdminIpLogPanel({ entries }) {
   const logs = entries || [];
   return (
-    <div className="panel-section space-y-0.5 text-base">
+    <CardFrame title="Admin IP log" meta={logs.length} bodyClassName="space-y-0.5 text-base">
-      <div className="flex items-center justify-between text-sm text-slate-400">
+      <div className="h-64 overflow-y-auto font-mono text-xs">
-        <span>Admin IP log</span>
-        <span>{logs.length}</span>
-      </div>
-      <div className="surface h-64 overflow-y-auto font-mono text-xs">
         {logs.length === 0 ? (
           <p>No admin log entries yet.</p>
         ) : (
@@ -17,7 +15,7 @@ export default function AdminIpLogPanel({ entries }) {
             .slice()
             .reverse()
             .map((entry) => (
-              <div key={entry.id} className="surface">
+              <div key={entry.id}>
                 <span className="text-amber-400">{entry.ts ? new Date(entry.ts).toLocaleTimeString() : '--'}</span>{' '}
                 {entry.label && <span className="text-teal-400">[{entry.label}]</span>}{' '}
                 <span className="text-slate-200">{entry.message}</span>{' '}
@@ -28,6 +26,6 @@ export default function AdminIpLogPanel({ entries }) {
         )}
       </div>
       <p className="text-xs text-slate-500">Admin-only log stream; IPs never appear in user data.</p>
-    </div>
+    </CardFrame>
   );
 }

webui/src/components/AdminPanel/AdminPanelContent.jsx

@@ -8,6 +8,7 @@ import LlmCommentaryPanel from './LlmCommentaryPanel.jsx';
 import OverseerControlPanel from './OverseerControlPanel.jsx';
 import ReplaySnapshotHealth from './ReplaySnapshotHealth.jsx';
 import AdminIpLogPanel from './AdminIpLogPanel.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 
 const MODES = [
   { key: 'open', label: 'Open' },
@@ -279,10 +280,7 @@ export default function AdminPanelContent() {
 
   if (!isAdmin) return null;
 
-  return (
+  const actions = (
-    <section className="panel-section space-y-0.5 text-base">
-      <div className="flex items-center justify-between gap-0.5 text-sm">
-        <span>Admin controls</span>
         <select value={currentMode} onChange={handleModeChange} className="field-input text-sm">
           {MODES.map((mode) => (
             <option key={mode.key} value={mode.key}>
@@ -290,7 +288,10 @@ export default function AdminPanelContent() {
             </option>
           ))}
         </select>
-      </div>
+  );
+
+  return (
+    <CardFrame title="Admin controls" actions={actions} bodyClassName="space-y-0.5 text-base">
       <div className="flex gap-0.5 text-xs">
         <button
           type="button"
@@ -514,6 +515,6 @@ export default function AdminPanelContent() {
         clearingHistory={clearingOverseerHistory}
       />
       <AdminIpLogPanel entries={adminLogs} />
-    </section>
+    </CardFrame>
   );
 }

webui/src/components/AuthPanel/index.jsx

@@ -3,9 +3,10 @@
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import { useState } from 'react';
 import { useSessionActions } from '../../context/SessionContext.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 
 export default function AuthPanel() {
-  const { login, setRole } = useSessionActions();
+  const { login } = useSessionActions();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
@@ -25,8 +26,7 @@ export default function AuthPanel() {
   }
 
   return (
-    <div className="panel-section space-y-0.5 text-base">
+    <CardFrame title="Admin login" bodyClassName="space-y-0.5 text-base">
-      <p className="text-sm text-slate-400">Admin login</p>
       <form className="flex flex-col gap-0.5" onSubmit={handleLogin}>
         <input
           className="field-input"
@@ -53,6 +53,6 @@ export default function AuthPanel() {
           Spectator
         </button>
       </div> */}
-    </div>
+    </CardFrame>
   );
 }

webui/src/components/CameraTiltControl/index.jsx

@@ -10,7 +10,7 @@ function formatDegrees(value) {
 
 function KeyPill({ label }) {
   if (!label) return null;
-  return <span className="rounded border border-white/40 px-1 text-[0.7rem] text-white">{label}</span>;
+  return <span className="rounded bg-slate-800 px-1 py-0.5 text-[0.6rem] font-semibold text-slate-200">{label}</span>;
 }
 
 export default function CameraTiltControl({
@@ -143,10 +143,14 @@ export default function CameraTiltControl({
   }
 
   return (
-    <div className={`space-y-0.5 ${className}`.trim()}>
+    <div className={`space-y-0.5 ${disabled ? 'opacity-50' : ''} ${className}`.trim()}>
       <div className={`flex items-center justify-between ${labelRowClass}`.trim()}>
         <span className={labelClass}>{label}</span>
-        {showValue ? <span className={valueClass}>{formatDegrees(value)}</span> : null}
+        {showValue ? (
+          <span className={`rounded bg-slate-800 px-1 py-0.5 text-[0.7rem] font-semibold ${valueClass}`.trim()}>
+            {formatDegrees(value)}
+          </span>
+        ) : null}
       </div>
       <div>
         {slider}

webui/src/components/CardFrame/index.jsx

@@ -53,14 +53,14 @@ export default function CardFrame({
   const cardStyle = accentRgb ? { borderColor: rgba(accentRgb, 0.35) } : undefined;
   const headerStyle = accentRgb
     ? {
-        backgroundImage: `linear-gradient(90deg, rgba(23,23,23,0.96) 0%, rgba(38,38,38,0.94) 58%, ${rgba(accentRgb, 0.18)} 100%)`,
+        backgroundImage: `linear-gradient(90deg, rgba(23,23,23,0.96) 0%, rgba(38,38,38,0.94) 30%, ${rgba(accentRgb, 0.28)} 100%)`,
       }
     : undefined;
 
   return (
     <section
       className={cx(
-        'panel-section border border-neutral-500/60 bg-neutral-900/95',
+        'panel-section border-2 border-neutral-500/60 bg-neutral-900/95',
         clipOverflow ? 'overflow-hidden' : 'overflow-visible',
         fillHeight && 'flex h-full min-h-0 flex-col',
         className,

webui/src/components/ChatMessageRow/index.jsx

@@ -121,15 +121,15 @@ export function ChatIdentity({ message, toolsToggle = null }) {
 
 function chatRowClass(message) {
   if (isBotMessage(message)) {
-    return 'surface-muted flex flex-col gap-0.5 border border-emerald-500/40 bg-emerald-900/15 text-sm';
+    return 'flex flex-col gap-0.5 rounded-md border border-emerald-500/40 bg-emerald-950 px-0.5 py-0.5 text-sm text-neutral-100';
   }
   const isAdmin =
     message.role === 'admin' || message.role === 'lockdown' || message.role === 'lockdown-admin';
-  return `surface-muted flex flex-col gap-0.5 text-sm ${
+  return `flex flex-col gap-0.5 rounded-md bg-neutral-800 px-0.5 py-0.5 text-sm text-neutral-100 ${
     isAdmin
       ? 'border border-amber-400/30'
       : message.fromDiscord
-        ? 'border border-indigo-400/30 bg-indigo-900/20'
+        ? 'border border-indigo-400/30 bg-indigo-950'
         : ''
   }`;
 }

webui/src/components/ChatPanel/index.jsx

@@ -154,7 +154,7 @@ export default function ChatPanel({
       fillHeight={fillHeight}
       bodyClassName="space-y-0.5 text-base"
     >
-      <div className={`surface overflow-y-auto space-y-0.5 px-0 ${listClass}`} ref={listRef}>
+      <div className={`overflow-y-auto space-y-0.5 px-0 ${listClass}`} ref={listRef}>
         {sorted.length === 0 && typingRows.length === 0 ? (
           <p className="text-sm text-slate-500">No messages yet.</p>
         ) : (

webui/src/components/DriverVideo/index.jsx

@@ -10,6 +10,7 @@ import OvercurrentOverlay from '../HudOverlays/OvercurrentOverlay/index.jsx';
 import LowBatteryOverlay from '../HudOverlays/LowBatteryOverlay/index.jsx';
 import DriverBottomStrip from '../HudOverlays/DriverBottomStrip/index.jsx';
 import HudChatInput from '../HudOverlays/HudChatInput/index.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 
 export default function DriverVideo({ layoutFormat = 'desktop' }) {
   const roverId = useSessionSelector((state) => state.session?.assignment?.roverId ?? null);
@@ -20,7 +21,7 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
 
   if (!roverId) {
     return (
-      <section className="panel">
+      <CardFrame hideHeader className="shrink-0">
         <div className="panel-muted content-center text-center text-sm text-slate-400 aspect-[4/3]">
           <p>You are not assigned to a rover.</p>
           <p className="mt-0">
@@ -29,13 +30,13 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
             </a>
           </p>
         </div>
-      </section>
+      </CardFrame>
     );
   }
 
   const mobileHud = layoutFormat !== 'desktop';
   return (
-    <section className="panel">
+    <CardFrame hideHeader className="shrink-0">
       <div className="flex flex-col gap-0.5">
         <div className="relative w-full overflow-hidden bg-black aspect-[4/3]">
           <RoverMediaPlayer roverId={roverId} videoMode={videoMode} />
@@ -58,6 +59,6 @@ export default function DriverVideo({ layoutFormat = 'desktop' }) {
         </div>
         <DriverBottomStrip mobileHud={mobileHud} />
       </div>
-    </section>
+    </CardFrame>
   );
 }

webui/src/components/GamepadMappingSettings/GamepadMappingSettingsContent.jsx

@@ -9,6 +9,7 @@ import {
   createProfileForPad,
 } from '../../controls/inputs/gamepadBindings.js';
 import { useGamepadHubState } from '../../controls/inputs/gamepadHub.js';
+import CardFrame from '../CardFrame/index.jsx';
 import SliderField from './SliderField.jsx';
 import { ACTIONS, NUMBER_FORMAT } from './constants.js';
 import {
@@ -222,20 +223,16 @@ export default function GamepadMappingSettings() {
   }, [activePad, activeProfile]);
 
   return (
-    <section className="panel-section space-y-0.5 text-sm">
+    <CardFrame
-      <div className="flex items-center justify-between">
+      title="Controller"
-        <div>
+      meta={activePad ? 'Move sticks or press buttons to bind' : 'Connect a controller to configure.'}
-          <p className="text-xs text-slate-400">Controller</p>
+      bodyClassName="space-y-0.5 text-sm"
-          <p className="text-[0.65rem] text-slate-500">
+    >
-            {activePad ? 'Move sticks or press buttons to bind' : 'Connect a controller to configure.'}
+      {captureAction && (
-          </p>
+        <p className="mt-0 text-[0.7rem] text-emerald-400">Capturing {captureAction.label}…</p>
-          {captureAction && (
+      )}
-            <p className="mt-0 text-[0.7rem] text-emerald-400">Capturing {captureAction.label}…</p>
-          )}
-        </div>
-      </div>
 
-      <div className="space-y-0.5 surface">
+      <div className="space-y-0.5">
         <p className="text-[0.7rem] text-slate-500">Connected controller</p>
         {hubState.pads.length === 0 ? (
           <p className="text-[0.7rem] text-slate-400">No controller detected.</p>
@@ -257,7 +254,7 @@ export default function GamepadMappingSettings() {
         )}
       </div>
 
-      <div className="space-y-0.5 surface">
+      <div className="space-y-0.5">
         <p className="text-[0.7rem] text-slate-500">Calibration</p>
         <div className="space-y-0.5">
           <SliderField
@@ -296,7 +293,7 @@ export default function GamepadMappingSettings() {
             value={activeProfile.calibration?.auxSideScale ?? 0.55}
             onChange={(value) => updateCalibration({ auxSideScale: value })}
           />
-          <label className="surface-muted block p-0.5">
+          <label className="block p-0.5">
             <div className="flex items-center justify-between text-xs text-slate-300">
               <span className="font-semibold text-slate-100">Camera mode</span>
               <select
@@ -324,14 +321,14 @@ export default function GamepadMappingSettings() {
 
       <div className="space-y-0.5">
         {Object.entries(grouped).map(([section, actions]) => (
-          <div key={section} className="space-y-0.5 surface">
+          <div key={section} className="space-y-0.5">
             <p className="text-[0.7rem] text-slate-500">{section}</p>
             <div className="space-y-0.5">
               {actions.map((action) => {
                 const binding = activeProfile.bindings?.[action.id];
                 const source = binding?.sources?.[0] ?? null;
                 return (
-                  <div key={action.id} className="surface-muted flex items-center justify-between text-xs">
+                  <div key={action.id} className="flex items-center justify-between text-xs">
                     <div>
                       <p className="font-semibold text-slate-100">{action.label}</p>
                       <p className="text-[0.65rem] text-slate-400">{formatSource(source)}</p>
@@ -390,7 +387,7 @@ export default function GamepadMappingSettings() {
         ))}
       </div>
 
-      <div className="space-y-0.5 surface">
+      <div className="space-y-0.5">
         <p className="text-[0.7rem] text-slate-500">Diagnostics</p>
         {!activePad ? (
           <p className="text-[0.7rem] text-slate-400">No controller detected.</p>
@@ -435,6 +432,6 @@ export default function GamepadMappingSettings() {
           </div>
         )}
       </div>
-    </section>
+    </CardFrame>
   );
 }

webui/src/components/GamepadMappingSettings/SliderField.jsx

@@ -5,7 +5,7 @@ import { NUMBER_FORMAT } from './constants.js';
 
 export default function SliderField({ label, description, min, max, step, value, onChange }) {
   return (
-    <label className="surface-muted block p-0.5">
+    <label className="block p-0.5">
       <div className="flex items-center justify-between text-xs text-slate-300">
         <span className="font-semibold text-slate-100">{label}</span>
         <span className="font-mono text-slate-400">{NUMBER_FORMAT.format(value)}</span>

webui/src/components/HelpPanel/index.jsx

@@ -2,24 +2,25 @@
 // Purpose: Defines the Help Panel module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import { useControlSystem } from '../../controls/index.js';
+import CardFrame from '../CardFrame/index.jsx';
 import HelpContentView from '../HelpContentView/index.jsx';
 
 export default function HelpPanel({ layout, onOpenOverlay }) {
   const { state } = useControlSystem();
 
+  const actions = (
+    <button
+      type="button"
+      onClick={onOpenOverlay}
+      className="button-dark px-1 py-0.25 text-[0.75rem]"
+    >
+      Open full help
+    </button>
+  );
+
   return (
-    <section className="panel-section space-y-0.5 text-sm">
+    <CardFrame title="Help" actions={actions} bodyClassName="space-y-0.5 text-sm">
-      <div className="flex items-center justify-between text-xs text-slate-400">
-        <span>Help</span>
-        <button
-          type="button"
-          onClick={onOpenOverlay}
-          className="button-dark px-1 py-0.25 text-[0.75rem]"
-        >
-          Open full help
-        </button>
-      </div>
       <HelpContentView layout={layout} keymap={state?.keymap || {}} />
-    </section>
+    </CardFrame>
   );
 }

webui/src/components/HomeAssistantControls/index.jsx

@@ -104,8 +104,8 @@ function EntityRow({ entity, connected, controlsLocked, onToggle, onSetColor, on
     : controlsLocked
     ? 'border-slate-800 bg-slate-900 text-slate-300 cursor-not-allowed'
     : isOn
-    ? 'border-emerald-700 bg-emerald-900/80 text-emerald-50 hover:bg-emerald-800'
+    ? 'border-emerald-700 bg-emerald-900 text-emerald-50 hover:bg-emerald-800'
-    : 'border-rose-800 bg-rose-900/80 text-rose-50 hover:bg-rose-800';
+    : 'border-rose-800 bg-rose-900 text-rose-50 hover:bg-rose-800';
 
   useEffect(() => {
     if (!supportsColor || draggingRef.current) return;

webui/src/components/HudOverlays/DriverBottomStrip/index.jsx

@@ -23,7 +23,7 @@ export default function DriverBottomStrip({ roverId = null, mobileHud = false })
   return (
     <div className="space-y-0.5">
       <LightBumpBars roverId={effectiveRoverId} />
-      <div className="panel-section space-y-0.5 text-sm">
+      <div className="space-y-0.5 text-sm">
         <BatteryBar visual={batteryVisual} compact={mobileHud} />
       </div>
     </div>

webui/src/components/KeymapSettings/index.jsx

@@ -8,6 +8,7 @@ import { canonicalizeKeyInput, formatKeyLabel } from '../../controls/keymapUtils
 import { setKeyboardCaptureLocked } from '../../controls/inputs/keyboardCaptureLock.js';
 import { useSettingsNamespace } from '../../settings/index.js';
 import { INPUT_SETTINGS_DEFAULTS } from '../../settings/namespaces.js';
+import CardFrame from '../CardFrame/index.jsx';
 
 const KEY_ACTIONS = [
   { id: 'driveForward', label: 'Drive Forward', group: 'Driving' },
@@ -118,7 +119,7 @@ function useKeyCapture(onCapture) {
 
 function SpeedField({ label, description, value, onChange, min = 0, max = 500, step = 5 }) {
   return (
-    <label className="surface-muted block p-0.5">
+    <label className="block p-0.5">
       <div className="flex items-center justify-between text-xs text-slate-300">
         <span className="font-semibold text-slate-100">{label}</span>
         <input
@@ -212,17 +213,17 @@ export default function KeymapSettings() {
   );
 
   return (
-    <section className="panel-section space-y-0.5 text-sm">
+    <CardFrame
-      <div className="flex items-center justify-between">
+      title="Keyboard layout"
-        <div>
+      meta="Per-browser · click to change a binding"
-          <p className="text-xs text-slate-400">Keyboard layout</p>
+      actions={
-          <p className="text-[0.7rem] text-slate-500">Per-browser · click to change a binding</p>
-        </div>
         <button type="button" onClick={() => resetKeyBindings()} className="button-dark text-xs">
           Reset defaults
         </button>
-      </div>
+      }
-      <div className="space-y-0.5 surface">
+      bodyClassName="space-y-0.5 text-sm"
+    >
+      <div className="space-y-0.5">
         <p className="text-[0.7rem] text-slate-500">Keyboard speeds</p>
         <div className="space-y-0.5">
           <SpeedField
@@ -245,7 +246,7 @@ export default function KeymapSettings() {
           />
         </div>
       </div>
-      <div className="space-y-0.5 surface">
+      <div className="space-y-0.5">
         <p className="text-[0.7rem] text-slate-500">Camera tilt</p>
         <SpeedField
           label="Tilt speed"
@@ -259,14 +260,14 @@ export default function KeymapSettings() {
       </div>
       <div className="space-y-0.5">
         {Object.entries(grouped).map(([group, actions]) => (
-          <div key={group} className="space-y-0.5 surface">
+          <div key={group} className="space-y-0.5">
             <p className="text-[0.75rem] text-slate-400">{group}</p>
             <div className="space-y-0.5">
               {actions.map((action) => {
                 const value = currentKey(action.id);
                 const isActive = active === action.id;
                 return (
-                  <div key={action.id} className="surface-muted flex items-center justify-between text-xs">
+                  <div key={action.id} className="flex items-center justify-between text-xs">
                     <div>
                       <p className="font-semibold text-slate-100">{action.label}</p>
                       <p className="text-[0.65rem] text-slate-400">{formatKeyLabel(value)}</p>
@@ -294,6 +295,6 @@ export default function KeymapSettings() {
           </div>
         ))}
       </div>
-    </section>
+    </CardFrame>
   );
 }

webui/src/components/OvercurrentLimiterPanel/index.jsx

@@ -4,6 +4,7 @@
 import { useMemo } from 'react';
 import { useControlSystem } from '../../controls/index.js';
 import { OVERCURRENT_GROUPS } from '../../controls/overcurrentLimiter.js';
+import CardFrame from '../CardFrame/index.jsx';
 
 const GROUP_LABELS = {
   drive: 'Drive wheels',
@@ -32,11 +33,11 @@ export default function OvercurrentLimiterPanel() {
   const groups = useMemo(() => OVERCURRENT_GROUPS.map((group) => group.key), []);
 
   return (
-    <section className="panel-section space-y-0.5 text-sm">
+    <CardFrame
-      <div className="flex items-center justify-between text-xs text-slate-400">
+      title="Overcurrent limiter"
-        <span>Overcurrent limiter</span>
+      meta={overcurrentLimiter?.adminImmune ? 'Admin immune' : 'Active'}
-        <span>{overcurrentLimiter?.adminImmune ? 'Admin immune' : 'Active'}</span>
+      bodyClassName="space-y-0.5 text-sm"
-      </div>
+    >
       {!roverId ? (
         <p className="text-xs text-slate-500">Assign a rover to view limiter status.</p>
       ) : (
@@ -46,7 +47,7 @@ export default function OvercurrentLimiterPanel() {
             const over = overcurrentLimiter?.overcurrent?.groups?.[key] ?? false;
             const scale = overcurrentLimiter?.scales?.perGroup?.[key] ?? 1;
             return (
-              <div key={key} className="surface space-y-0.5">
+              <div key={key} className="space-y-0.5">
                 <div className="flex items-center justify-between text-xs">
                   <span className="text-slate-200">{GROUP_LABELS[key] || key}</span>
                   <span className={over ? 'text-red-300' : 'text-slate-400'}>
@@ -67,13 +68,13 @@ export default function OvercurrentLimiterPanel() {
               </div>
             );
           })}
-          <div className="surface text-[0.7rem] text-slate-400">
+          <div className="text-[0.7rem] text-slate-400">
             <div>{`Down rate ${overcurrentLimiter?.config?.downRatePerSec}/s · Up rate ${overcurrentLimiter?.config?.upRatePerSec}/s`}</div>
             <div>{`Release delay ${overcurrentLimiter?.config?.releaseDelaySec}s`}</div>
             <div>{`Output rate ${overcurrentLimiter?.config?.outputRateMs}ms`}</div>
           </div>
         </div>
       )}
-    </section>
+    </CardFrame>
   );
 }

webui/src/components/RawUserPilePanel/index.jsx

@@ -70,7 +70,7 @@ export default function RawUserPilePanel({
         <div className="space-y-0.5">
           <div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
             <div className="min-w-0">
-              <div className="surface flex w-full items-center px-0 py-0">
+              <div className="flex w-full items-center px-0 py-0">
                 <NicknameForm compact={compact} />
               </div>
             </div>
@@ -82,7 +82,7 @@ export default function RawUserPilePanel({
 
       <div className={`space-y-0.5 ${fillHeight ? 'flex flex-1 min-h-0 flex-col' : ''}`}>
         <div
-          className={`surface flex flex-wrap content-start items-start gap-0.5 px-0 pb-0 ${baseListClass} ${compact ? 'text-[0.8rem]' : ''}`}
+          className={`flex flex-wrap content-start items-start gap-0.5 px-0 pb-0 ${baseListClass} ${compact ? 'text-[0.8rem]' : ''}`}
         >
           {sorted.length === 0 ? (
             <p className="text-sm text-slate-500">Waiting for users…</p>
@@ -90,7 +90,7 @@ export default function RawUserPilePanel({
             sorted.map((user) => (
               <span
                 key={user.socketId}
-                className={`rounded bg-slate-800/80 px-1 py-0.25 text-[0.7rem] ${roleColors(user.role)}`}
+                className={`rounded px-1 py-0.25 text-[0.7rem] ${roleColors(user.role)}`}
               >
                 {formatLabel(user, selfId)}
               </span>

webui/src/components/RightPaneTabs/index.jsx

@@ -76,10 +76,15 @@ function DriveDockPanel() {
   const cameraDisabled = Boolean(!roverId || dockAssist.cameraLocked);
 
   return (
-    <section className={`panel-section grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] ${themeGapClass}`}>
+    <CardFrame
+      hideHeader
+      
+      className="h-full"
+      bodyClassName={`grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] ${themeGapClass}`}
+    >
       <DriveDockAction layout="desktop" expand driveDockState={driveDockState} />
       {!hideInlineControls ? (
-        <div className={`surface ${themeStackClass} p-0 text-sm text-slate-200`}>
+        <div className={`${themeStackClass} p-0 text-sm text-slate-200`}>
           {nightVisionAvailable && (
             <NightVisionControl
               nightVisionOn={nightVisionState?.nightVisionOn}
@@ -108,18 +113,18 @@ function DriveDockPanel() {
               onChange={setServoAngle}
               keyDownLabel={downLabel}
               keyUpLabel={upLabel}
-              className={`${themeStackClass} px-1 py-1`}
+              className={`${themeStackClass} rounded-xl border-2 border-emerald-300/70 bg-emerald-900 px-1 py-1 text-emerald-50`}
-              labelRowClass="text-xs text-slate-300"
+              labelRowClass="text-xs text-emerald-100"
-              labelClass=""
+              labelClass="text-sm font-semibold"
               valueClass="font-mono text-slate-100"
               sliderClass="w-full"
               accentClass="accent-emerald-400"
-              endpointClass="text-[0.7rem] text-slate-400"
+              endpointClass="text-[0.7rem] text-emerald-100/80"
             />
           )}
         </div>
       ) : null}
-    </section>
+    </CardFrame>
   );
 }
 

webui/src/components/RoomCameraPanel/index.jsx

@@ -10,10 +10,10 @@ import CardFrame from '../CardFrame/index.jsx';
 
 function EmptyState() {
   return (
-    <div className="panel-section space-y-0.5 text-sm">
+    <CardFrame title="Room cameras" bodyClassName="space-y-0.5 text-sm">
       <p className="text-center text-slate-400">No room cameras configured.</p>
       <p className="text-center text-slate-500">Add entries to server config to populate this list.</p>
-    </div>
+    </CardFrame>
   );
 }
 
@@ -97,7 +97,7 @@ export default function RoomCameraPanel({
         {cameras.map((camera) => {
           const feed = feedMap[camera.id] || null;
           return (
-            <article key={camera.id} className="w-full space-y-0.5 rounded bg-zinc-950 p-0.5 shadow-inner shadow-black/40">
+            <article key={camera.id} className="w-full space-y-0.5 p-0.5">
               {/* <header className="space-y-0.5">
                 <p className="text-lg font-semibold text-white">{camera.name || camera.id}</p>
                 {camera.description && <p className="text-xs text-slate-500">{camera.description}</p>}

webui/src/components/SessionSnapshot/index.jsx

@@ -3,16 +3,16 @@
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import { useMemo } from 'react';
 import { useSession } from '../../context/SessionContext.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 
 export default function SessionSnapshot() {
   const { session } = useSession();
   const payload = useMemo(() => JSON.stringify(session ?? {}, null, 2), [session]);
   return (
-    <div className="panel-section flex min-h-0 flex-col gap-0.5 text-xs">
+    <CardFrame title="Session snapshot" className="min-h-0" bodyClassName="flex min-h-0 flex-col gap-0.5 text-xs">
-      <p className="text-sm text-slate-400">Session snapshot</p>
+      <pre className="min-h-0 flex-1 overflow-y-auto font-mono text-[0.7rem] text-lime-300">
-      <pre className="surface min-h-0 flex-1 overflow-y-auto font-mono text-[0.7rem] text-lime-300">
         {payload}
       </pre>
-    </div>
+    </CardFrame>
   );
 }

webui/src/components/SettingsPanel/index.jsx

@@ -11,6 +11,7 @@ import OvercurrentLimiterPanel from '../OvercurrentLimiterPanel/index.jsx';
 import Tabs, { Tab, TabList, TabPanel, TabPanels } from '../Tabs/index.jsx';
 import SessionSnapshot from '../SessionSnapshot/index.jsx';
 import SocketLogPanel from '../SocketLogPanel/index.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 import { useHudMapSetting } from '../../hooks/useHudMapSetting.js';
 import { useSettingsNamespace } from '../../settings/index.js';
 import { useSocket } from '../../context/SocketContext.jsx';
@@ -121,8 +122,7 @@ export default function SettingsPanel() {
         </TabPanel>
         <TabPanel id="page">
           <div className="space-y-0.5">
-            <section className="panel-section space-y-0.5 text-sm">
+            <CardFrame title="HUD" bodyClassName="space-y-0.5 text-sm">
-              <p className="text-slate-400">HUD</p>
               <label className="flex items-center gap-0.5 text-slate-200">
                 <input
                   type="checkbox"
@@ -133,9 +133,8 @@ export default function SettingsPanel() {
                 <span>Show top-down map in HUD (desktop)</span>
               </label>
               <p className="text-xs text-slate-500">Mobile HUD keeps the map on by default.</p>
-            </section>
+            </CardFrame>
-            <section className="panel-section space-y-0.5 text-sm">
+            <CardFrame title="Mobile controls" bodyClassName="space-y-0.5 text-sm">
-              <p className="text-slate-400">Mobile controls</p>
               <label className="flex items-center gap-0.5 text-slate-200">
                 <input
                   type="checkbox"
@@ -145,9 +144,8 @@ export default function SettingsPanel() {
                 />
                 <span>Swap control columns (put joystick on the left)</span>
               </label>
-            </section>
+            </CardFrame>
-            <section className="panel-section space-y-0.5 text-sm">
+            <CardFrame title="Macros" bodyClassName="space-y-0.5 text-sm">
-              <p className="text-slate-400">Macros</p>
               <label className="flex items-center gap-0.5 text-slate-200">
                 <input
                   type="checkbox"
@@ -157,9 +155,8 @@ export default function SettingsPanel() {
                 />
                 <span>Enable backward bump in drive macro</span>
               </label>
-            </section>
+            </CardFrame>
-            <section className="panel-section space-y-0.5 text-sm">
+            <CardFrame title="Audio" bodyClassName="space-y-0.5 text-sm">
-              <p className="text-slate-400">Audio</p>
               <label className="grid gap-0.5 text-slate-200">
                 <div className="flex items-center justify-between gap-0.5">
                   <span>Master volume</span>
@@ -233,9 +230,8 @@ export default function SettingsPanel() {
               <p className="text-xs text-slate-500">
                 Lowers rover audio only while the main brush is running.
               </p>
-            </section>
+            </CardFrame>
-            <section className="panel-section space-y-0.5 text-sm">
+            <CardFrame title="Connection" bodyClassName="space-y-0.5 text-sm">
-              <p className="text-slate-400">Connection</p>
               <label className="flex items-center justify-between gap-0.5 text-slate-200">
                 <span>Transport</span>
                 <select
@@ -248,14 +244,13 @@ export default function SettingsPanel() {
                 </select>
               </label>
               <p className="text-xs text-slate-500">Switching reconnects your session.</p>
-            </section>
+            </CardFrame>
           </div>
         </TabPanel>
         <TabPanel id="admin">
           <div className="space-y-0.5">
-            <section className="panel-section space-y-0.5 text-sm">
+            <CardFrame title="Manual OI commands" bodyClassName="space-y-0.5 text-sm">
-              <p className="text-slate-400">Manual OI commands</p>
+              <div className="flex flex-wrap gap-0.5">
-              <div className="surface flex flex-wrap gap-0.5">
                 {manualTabs.map((tab) => (
                   <button
                     key={tab.key}
@@ -268,10 +263,9 @@ export default function SettingsPanel() {
                   </button>
                 ))}
               </div>
-            </section>
+            </CardFrame>
-            <section className="panel-section space-y-0.5 text-sm">
+            <CardFrame title="Sensor stream" bodyClassName="space-y-0.5 text-sm">
-              <p className="text-slate-400">Sensor stream</p>
+              <div className="flex gap-0.5">
-              <div className="surface flex gap-0.5">
                 {sensorButtons.map((btn) => (
                   <button
                     key={btn.key}
@@ -285,7 +279,7 @@ export default function SettingsPanel() {
                 ))}
               </div>
               {!canControl && <p className="text-xs text-slate-500">Assign a rover to toggle streams.</p>}
-            </section>
+            </CardFrame>
             <AuthPanel />
             <OvercurrentLimiterPanel />
             <AdminPanel />

webui/src/components/SocketLogPanel/index.jsx

@@ -3,6 +3,7 @@
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import { useEffect, useMemo, useState } from 'react';
 import { useSocket } from '../../context/SocketContext.jsx';
+import CardFrame from '../CardFrame/index.jsx';
 
 const MAX_ENTRIES = 300;
 const MAX_PAYLOAD_LENGTH = 240;
@@ -113,19 +114,19 @@ export default function SocketLogPanel() {
     };
   }, [socket]);
 
-  return (
+  const actions = (
-    <section className="panel-section space-y-0.5 text-base">
-      <div className="flex items-center justify-between text-sm text-slate-400">
-        <span>Socket activity</span>
         <div className="flex items-center gap-0.5 text-xs text-slate-400">
-          <span className="surface-muted">in {counters.in}</span>
+          <span>in {counters.in}</span>
-          <span className="surface-muted">out {counters.out}</span>
+          <span>out {counters.out}</span>
           <button type="button" className="button-dark text-xs" onClick={() => setEntries([])}>
             Clear
           </button>
         </div>
-      </div>
+  );
-      <div className="surface h-64 overflow-y-auto font-mono text-xs">
+
+  return (
+    <CardFrame title="Socket activity" actions={actions} bodyClassName="space-y-0.5 text-base">
+      <div className="h-64 overflow-y-auto font-mono text-xs">
         {entries.length === 0 ? (
           <p>No socket activity yet.</p>
         ) : (
@@ -133,7 +134,7 @@ export default function SocketLogPanel() {
             .slice()
             .reverse()
             .map((entry) => (
-              <div key={entry.id} className="surface">
+              <div key={entry.id}>
                 <span className="text-slate-400">{entry.timestamp}</span>{' '}
                 <span className={entry.direction === 'in' ? 'text-emerald-400' : 'text-amber-400'}>
                   [{entry.direction.toUpperCase()}]
@@ -145,6 +146,6 @@ export default function SocketLogPanel() {
         )}
       </div>
       <p className="text-xs text-slate-500">Logs are collected only while this panel is open.</p>
-    </section>
+    </CardFrame>
   );
 }

webui/src/components/TopDownMap/TopDownMapContent.jsx

@@ -65,7 +65,7 @@ function TopDownMapContent({ sensors = {}, variant = 'full', size: overrideSize,
 
   return (
     <div
-      className={`${overlay ? 'relative' : 'surface relative p-1'}`}
+      className={`${overlay ? 'relative' : 'relative p-1'}`}
       style={overlay ? { width: `${size}px`, height: `${size}px` } : { height: '100%', width: '100%', aspectRatio: '1 / 1' }}
     >
       <svg width="100%" height="100%" viewBox={`0 0 ${size} ${size}`} preserveAspectRatio="xMidYMid meet" className="mx-auto block">

webui/src/components/UserListPanel/index.jsx

@@ -10,11 +10,11 @@ import CardFrame from '../CardFrame/index.jsx';
 
 export function NicknameEntryPanel({ compact = false }) {
   return (
-    <section className="panel-section flex h-full min-h-0 flex-col gap-0.5 text-base">
+    <CardFrame hideHeader className="h-full" bodyClassName="flex h-full min-h-0 flex-col gap-0.5 text-base">
-      <div className="surface flex w-full items-center px-0 py-0">
+      <div className="flex w-full items-center px-0 py-0">
         <NicknameForm compact={compact} />
       </div>
-    </section>
+    </CardFrame>
   );
 }
 
@@ -126,7 +126,7 @@ export default function UserListPanel({
         return (
           <div
             key={user.socketId}
-            className={`surface-muted flex items-center gap-0.5 ${compact ? 'py-0.25 text-[0.8rem]' : 'text-sm'}`}
+            className={`flex items-center gap-0.5 ${compact ? 'py-0.25 text-[0.8rem]' : 'text-sm'}`}
           >
             <p className={`font-semibold ${roleColors(user.role)}`}>{formatLabel(user, selfId)}</p>
             {user.roverId ? (
@@ -150,14 +150,19 @@ export default function UserListPanel({
     );
 
   return (
-    <section
+    <CardFrame
-      className={`panel-section space-y-0.5 text-base ${fillHeight ? 'flex h-full min-h-0 flex-col overflow-hidden' : ''} ${className}`}
+      title={!hideHeader ? (isTurnsMode ? (showQueuesSection ? 'Turn queues' : 'Users') : 'Users') : ''}
+      meta={!hideHeader ? (showQueuesSection && isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length) : null}
+      hideHeader={hideHeader}
+      fillHeight={fillHeight}
+      className={className}
+      bodyClassName="space-y-0.5 text-base"
     >
       {!hideNicknameForm && (
         <div className="space-y-0.5">
           <div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
             <div className="min-w-0">
-              <div className="surface flex w-full items-center px-0 py-0">
+              <div className="flex w-full items-center px-0 py-0">
                 <NicknameForm compact={compact} />
               </div>
             </div>
@@ -168,21 +173,8 @@ export default function UserListPanel({
       )}
 
       <div className={`space-y-0.5 ${fillHeight ? 'flex flex-1 min-h-0 flex-col' : ''}`}>
-        {!hideHeader && (
+        {!hideHeader && showToggle ? (
-          <div className={`flex items-center justify-between text-sm text-slate-400 ${compact ? 'text-xs' : ''}`}>
+          <div className="flex justify-end">
-            <div className="flex items-center gap-0.5">
-              <span>
-                {isTurnsMode
-                  ? showQueuesSection
-                    ? 'Turn queues'
-                    : 'Users'
-                  : 'Users'}
-              </span>
-              <span className="text-xs text-slate-500">
-                {showQueuesSection && isTurnsMode ? Object.keys(turnQueues || {}).length : sorted.length}
-              </span>
-            </div>
-            {showToggle ? (
               <div className="inline-flex overflow-hidden rounded border border-slate-700 text-[0.7rem]">
                 <button
                   type="button"
@@ -199,11 +191,10 @@ export default function UserListPanel({
                   Users
                 </button>
               </div>
-            ) : null}
           </div>
-        )}
+        ) : null}
         {showQueuesSection ? (
-          <div className={`surface space-y-0.5 px-0 pb-0 ${turnsListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
+          <div className={`space-y-0.5 px-0 pb-0 ${turnsListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
             {Object.keys(turnQueues || {}).length === 0 ? (
               <p className="text-sm text-slate-500">No turn queues yet.</p>
             ) : (
@@ -220,7 +211,7 @@ export default function UserListPanel({
                       : queue[0]
                     : null;
                 return (
-                  <div key={roverId} className={`surface-muted flex flex-col gap-0.5 ${compact ? 'text-[0.8rem] py-0.25' : 'text-sm'}`}>
+                  <div key={roverId} className={`flex flex-col gap-0.5 ${compact ? 'text-[0.8rem] py-0.25' : 'text-sm'}`}>
                     <div className="flex items-center gap-0.5">
                       <p className="font-semibold text-slate-200">
                         <span
@@ -277,7 +268,7 @@ export default function UserListPanel({
         ) : null}
 
         {showUsersSection ? (
-          <div className={`surface space-y-0.5 px-0 pb-0 ${usersListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
+          <div className={`space-y-0.5 px-0 pb-0 ${usersListClass} ${compact ? 'text-[0.8rem]' : ''}`}>
             {renderUserList()}
           </div>
         ) : null}
@@ -288,10 +279,10 @@ export default function UserListPanel({
               <span>Users</span>
               <span className="text-[0.7rem] text-slate-500">{sorted.length}</span>
             </div>
-            <div className={`surface space-y-0.5 px-0 pb-0 ${usersListClass}`}>{renderUserList()}</div>
+            <div className={`space-y-0.5 px-0 pb-0 ${usersListClass}`}>{renderUserList()}</div>
           </div>
         ) : null}
       </div>
-    </section>
+    </CardFrame>
   );
 }

webui/src/themeFlags.js

@@ -1,5 +1,9 @@
 export const PRIDE_THEME_ENABLED = true;
 
 export const pageBackgroundClass = PRIDE_THEME_ENABLED ? 'pride-page-bg' : 'bg-black';
-export const themeGapClass = PRIDE_THEME_ENABLED ? 'gap-1' : 'gap-0.5';
+// export const themeGapClass = PRIDE_THEME_ENABLED ? 'gap-1' : 'gap-0.5';
-export const themeStackClass = PRIDE_THEME_ENABLED ? 'space-y-1' : 'space-y-0.5';
+// export const themeStackClass = PRIDE_THEME_ENABLED ? 'space-y-1' : 'space-y-0.5';
+
+// permanent smaller gaps i think is better probably
+export const themeGapClass = 'gap-0.5';
+export const themeStackClass = 'space-y-0.5';