From f91ef8483206c1e74b35268198ed0a3b8b6419ed Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 02:12:35 -0400
Subject: [PATCH 1/7] feat(redesign): design-system tokens, 23 Vue components,
 game-aware shell + Fleet/Solo dashboard

Tokens ported 1:1 from the Claude Design bundle (colors/game-themes/type/spacing/elevation/motion/fonts) with the data-theme/data-game theming contract via useThemeGame (+ cc-skin-swap repaint guard). 23 design-system components reimplemented as Vue SFCs (core/forms/data/navigation/feedback/brand). DashboardLayout rebuilt as the game-aware shell (GameSwitcher, grouped nav with permission gating preserved, agent-health footer, topbar). DashboardView: Fleet + Solo with per-game GAME_FIELDS rows and the themed ECharts PlayersChart; Solo wired to the real server store, Fleet on representative data pending the multi-instance backend. All four game skins (Rust/Dune/Conan/Soulmask). vue-tsc + vite build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/index.html                           |  20 +-
 frontend/src/assets/corrosion-mark.svg        |   8 +
 .../src/components/brand/CorrosionMark.vue    |  29 +
 frontend/src/components/ds/brand/Logo.vue     |  92 +++
 frontend/src/components/ds/core/Badge.vue     |  62 ++
 frontend/src/components/ds/core/Button.vue    |  82 +++
 frontend/src/components/ds/core/Icon.vue      |  73 ++
 .../src/components/ds/core/IconButton.vue     |  62 ++
 frontend/src/components/ds/core/Kbd.vue       |  20 +
 frontend/src/components/ds/core/StatusDot.vue |  48 ++
 frontend/src/components/ds/core/Tag.vue       |  52 ++
 frontend/src/components/ds/data/Avatar.vue    |  72 ++
 .../src/components/ds/data/ConsoleLine.vue    |  54 ++
 frontend/src/components/ds/data/Panel.vue     |  57 ++
 .../src/components/ds/data/PlayersChart.vue   |  98 +++
 .../src/components/ds/data/ResourceMeter.vue  |  53 ++
 .../src/components/ds/data/ServerCard.vue     | 166 +++++
 frontend/src/components/ds/data/StatCard.vue  |  62 ++
 frontend/src/components/ds/feedback/Alert.vue |  86 +++
 .../src/components/ds/feedback/EmptyState.vue |  39 +
 frontend/src/components/ds/forms/Checkbox.vue |  50 ++
 frontend/src/components/ds/forms/Input.vue    |  90 +++
 frontend/src/components/ds/forms/Select.vue   |  86 +++
 frontend/src/components/ds/forms/Switch.vue   |  59 ++
 .../components/ds/navigation/GameSwitcher.vue |  71 ++
 .../src/components/ds/navigation/NavItem.vue  |  50 ++
 .../src/components/ds/navigation/Tabs.vue     |  67 ++
 .../src/components/layout/DashboardLayout.vue | 683 ++++++++++++++----
 frontend/src/composables/useThemeGame.ts      | 114 +++
 frontend/src/main.ts                          |   4 +
 frontend/src/style.css                        |  17 +-
 frontend/src/styles/corrosion.css             |  15 +
 frontend/src/styles/tokens/base.css           |  75 ++
 frontend/src/styles/tokens/colors.css         | 136 ++++
 frontend/src/styles/tokens/elevation.css      |  40 +
 frontend/src/styles/tokens/fonts.css          |  21 +
 frontend/src/styles/tokens/game-themes.css    | 150 ++++
 frontend/src/styles/tokens/motion.css         |  27 +
 frontend/src/styles/tokens/spacing.css        |  50 ++
 frontend/src/styles/tokens/typography.css     |  75 ++
 frontend/src/views/admin/DashboardView.vue    | 602 +++++++++++----
 frontend/src/views/admin/_dashboardMock.ts    | 159 ++++
 42 files changed, 3577 insertions(+), 299 deletions(-)
 create mode 100644 frontend/src/assets/corrosion-mark.svg
 create mode 100644 frontend/src/components/brand/CorrosionMark.vue
 create mode 100644 frontend/src/components/ds/brand/Logo.vue
 create mode 100644 frontend/src/components/ds/core/Badge.vue
 create mode 100644 frontend/src/components/ds/core/Button.vue
 create mode 100644 frontend/src/components/ds/core/Icon.vue
 create mode 100644 frontend/src/components/ds/core/IconButton.vue
 create mode 100644 frontend/src/components/ds/core/Kbd.vue
 create mode 100644 frontend/src/components/ds/core/StatusDot.vue
 create mode 100644 frontend/src/components/ds/core/Tag.vue
 create mode 100644 frontend/src/components/ds/data/Avatar.vue
 create mode 100644 frontend/src/components/ds/data/ConsoleLine.vue
 create mode 100644 frontend/src/components/ds/data/Panel.vue
 create mode 100644 frontend/src/components/ds/data/PlayersChart.vue
 create mode 100644 frontend/src/components/ds/data/ResourceMeter.vue
 create mode 100644 frontend/src/components/ds/data/ServerCard.vue
 create mode 100644 frontend/src/components/ds/data/StatCard.vue
 create mode 100644 frontend/src/components/ds/feedback/Alert.vue
 create mode 100644 frontend/src/components/ds/feedback/EmptyState.vue
 create mode 100644 frontend/src/components/ds/forms/Checkbox.vue
 create mode 100644 frontend/src/components/ds/forms/Input.vue
 create mode 100644 frontend/src/components/ds/forms/Select.vue
 create mode 100644 frontend/src/components/ds/forms/Switch.vue
 create mode 100644 frontend/src/components/ds/navigation/GameSwitcher.vue
 create mode 100644 frontend/src/components/ds/navigation/NavItem.vue
 create mode 100644 frontend/src/components/ds/navigation/Tabs.vue
 create mode 100644 frontend/src/composables/useThemeGame.ts
 create mode 100644 frontend/src/styles/corrosion.css
 create mode 100644 frontend/src/styles/tokens/base.css
 create mode 100644 frontend/src/styles/tokens/colors.css
 create mode 100644 frontend/src/styles/tokens/elevation.css
 create mode 100644 frontend/src/styles/tokens/fonts.css
 create mode 100644 frontend/src/styles/tokens/game-themes.css
 create mode 100644 frontend/src/styles/tokens/motion.css
 create mode 100644 frontend/src/styles/tokens/spacing.css
 create mode 100644 frontend/src/styles/tokens/typography.css
 create mode 100644 frontend/src/views/admin/_dashboardMock.ts

diff --git a/frontend/index.html b/frontend/index.html
index 71230e0..35a0aca 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" class="dark" data-theme="dark" data-game="rust">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -9,8 +9,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0a0a0a" />
     <title>Corrosion Management</title>
+    <script>
+      /* FOUC guard — apply persisted theme/game to <html> before the app mounts,
+         so the design-system tokens paint with the right skin from frame one. */
+      (function () {
+        try {
+          var el = document.documentElement;
+          var t = localStorage.getItem('cc-theme');
+          var g = localStorage.getItem('cc-game');
+          if (t === 'dark' || t === 'light') {
+            el.setAttribute('data-theme', t);
+            el.classList.toggle('dark', t === 'dark');
+          }
+          if (g) el.setAttribute('data-game', g);
+        } catch (e) {}
+      })();
+    </script>
   </head>
-  <body class="bg-neutral-950">
+  <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/frontend/src/assets/corrosion-mark.svg b/frontend/src/assets/corrosion-mark.svg
new file mode 100644
index 0000000..95fd3b4
--- /dev/null
+++ b/frontend/src/assets/corrosion-mark.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Corrosion">
+  <path d="M40.2 9.45 A24 24 0 0 1 54.6 23.8" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M54.6 40.2 A24 24 0 0 1 40.2 54.6" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M23.8 54.6 A24 24 0 0 1 9.45 40.2" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M9.45 23.8 A24 24 0 0 1 23.8 9.45" stroke="currentColor" stroke-width="6.4" stroke-linecap="round"></path>
+  <path d="M32 16V24M32 40V48M16 32H24M40 32H48" stroke="currentColor" stroke-width="3.6" stroke-linecap="round"></path>
+  <circle cx="32" cy="32" r="4.4" fill="currentColor"></circle>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/brand/CorrosionMark.vue b/frontend/src/components/brand/CorrosionMark.vue
new file mode 100644
index 0000000..c492d46
--- /dev/null
+++ b/frontend/src/components/brand/CorrosionMark.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+/**
+ * Corrosion brand mark — segmented "C-core" reticle.
+ * A bold ring split into four arc segments around a centered control node,
+ * with N/E/S/W targeting ticks. Drawn in `currentColor` so it themes to the
+ * active accent (set `color: var(--accent)` on a parent) and stays crisp to ~12px.
+ * Source: design-system assets/mark.svg (64×64 viewBox).
+ */
+withDefaults(defineProps<{ size?: number | string }>(), { size: 24 })
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-label="Corrosion"
+  >
+    <path d="M40.2 9.45 A24 24 0 0 1 54.6 23.8" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M54.6 40.2 A24 24 0 0 1 40.2 54.6" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M23.8 54.6 A24 24 0 0 1 9.45 40.2" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M9.45 23.8 A24 24 0 0 1 23.8 9.45" stroke="currentColor" stroke-width="6.4" stroke-linecap="round" />
+    <path d="M32 16V24M32 40V48M16 32H24M40 32H48" stroke="currentColor" stroke-width="3.6" stroke-linecap="round" />
+    <circle cx="32" cy="32" r="4.4" fill="currentColor" />
+  </svg>
+</template>
diff --git a/frontend/src/components/ds/brand/Logo.vue b/frontend/src/components/ds/brand/Logo.vue
new file mode 100644
index 0000000..15fa7d7
--- /dev/null
+++ b/frontend/src/components/ds/brand/Logo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * Logo — Corrosion brand lockup.
+ * Composes the CorrosionMark SVG + Oxanium wordmark + optional tagline.
+ *
+ * The mark renders in `currentColor`, so set `color: var(--accent)` on a
+ * parent (or pass `markColor`) to theme it per active game.
+ *
+ * Props mirror Logo.jsx exactly:
+ *   size       — base px size; drives mark em-size + wordmark scaling
+ *   wordmark   — show the "Corrosion" text (default true)
+ *   tagline    — false | true (→ "Management Panel") | custom string
+ *   glow       — accent drop-shadow for marketing / login hero use
+ *   markColor  — force a fixed color on the mark (bypasses currentColor theming)
+ */
+import { computed } from 'vue'
+import CorrosionMark from '@/components/brand/CorrosionMark.vue'
+
+const props = withDefaults(
+  defineProps<{
+    size?: number
+    wordmark?: boolean
+    tagline?: boolean | string
+    glow?: boolean
+    markColor?: string
+  }>(),
+  { size: 26, wordmark: true, tagline: false, glow: false },
+)
+
+const gap = computed(() => Math.round(props.size * 0.4) + 'px')
+const wordmarkGap = computed(() => Math.round(props.size * 0.14) + 'px')
+const wordmarkFontSize = computed(() => (props.size * 0.62) + 'px')
+const taglineFontSize = computed(() => Math.max(8, props.size * 0.26) + 'px')
+const glowFilter = computed(() =>
+  props.glow ? `drop-shadow(0 0 ${props.size * 0.5}px var(--accent-glow))` : 'none'
+)
+const tagText = computed(() =>
+  typeof props.tagline === 'string' ? props.tagline : 'Management Panel'
+)
+</script>
+
+<template>
+  <span
+    class="cc-logo"
+    :style="{ display: 'inline-flex', alignItems: 'center', gap, lineHeight: 1 }"
+  >
+    <!-- Mark wrapper: sets font-size so CorrosionMark's 1em sizing works; applies glow -->
+    <span
+      :style="{
+        fontSize: size + 'px',
+        display: 'inline-flex',
+        filter: glowFilter,
+        color: markColor ?? undefined,
+      }"
+    >
+      <CorrosionMark :size="size" />
+    </span>
+
+    <!-- Wordmark + optional tagline -->
+    <span
+      v-if="wordmark"
+      :style="{ display: 'inline-flex', flexDirection: 'column', gap: wordmarkGap }"
+    >
+      <span
+        :style="{
+          fontFamily: 'var(--font-brand)',
+          fontWeight: 800,
+          fontSize: wordmarkFontSize,
+          letterSpacing: '0.005em',
+          color: 'var(--text-primary)',
+          lineHeight: 1,
+        }"
+      >Corrosion</span>
+      <span
+        v-if="tagline"
+        :style="{
+          fontFamily: 'var(--font-brand)',
+          fontWeight: 600,
+          fontSize: taglineFontSize,
+          letterSpacing: '0.26em',
+          textTransform: 'uppercase',
+          color: 'var(--accent-text)',
+          lineHeight: 1,
+        }"
+      >{{ tagText }}</span>
+    </span>
+  </span>
+</template>
+
+<style>
+.cc-logo { user-select: none; }
+</style>
diff --git a/frontend/src/components/ds/core/Badge.vue b/frontend/src/components/ds/core/Badge.vue
new file mode 100644
index 0000000..1ebe068
--- /dev/null
+++ b/frontend/src/components/ds/core/Badge.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/** Badge — compact status/label chip. Tone drives fg/soft-bg/border; `solid` fills. */
+import { computed } from 'vue'
+import Icon from './Icon.vue'
+import StatusDot from './StatusDot.vue'
+
+const props = withDefaults(
+  defineProps<{
+    tone?: 'neutral' | 'accent' | 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping'
+    solid?: boolean
+    dot?: boolean
+    pulse?: boolean
+    icon?: string
+    size?: 'md' | 'lg'
+    mono?: boolean
+    uppercase?: boolean
+  }>(),
+  { tone: 'neutral', solid: false, dot: false, pulse: false, size: 'md', mono: false, uppercase: false },
+)
+
+const NEUTRAL: [string, string, string] = ['var(--text-secondary)', 'var(--surface-raised-2)', 'var(--border-default)']
+const TONES: Record<string, [string, string, string]> = {
+  neutral: NEUTRAL,
+  accent: ['var(--accent-text)', 'var(--accent-soft)', 'var(--accent-border)'],
+  online: ['var(--status-online)', 'var(--status-online-soft)', 'var(--status-online-border)'],
+  offline: ['var(--status-offline)', 'var(--status-offline-soft)', 'var(--status-offline-border)'],
+  warn: ['var(--status-warn)', 'var(--status-warn-soft)', 'var(--status-warn-border)'],
+  info: ['var(--status-info)', 'var(--status-info-soft)', 'var(--status-info-border)'],
+  starting: ['var(--status-starting)', 'var(--status-starting-soft)', 'var(--status-starting-border)'],
+  wiping: ['var(--status-wiping)', 'var(--status-wiping-soft)', 'var(--status-wiping-border)'],
+}
+
+const styleObj = computed(() => {
+  const [fg, soft, border] = TONES[props.tone] ?? NEUTRAL
+  return props.solid
+    ? { background: fg, color: 'var(--surface-canvas)', boxShadow: 'none' }
+    : { background: soft, color: fg, boxShadow: `inset 0 0 0 1px ${border}` }
+})
+</script>
+
+<template>
+  <span
+    class="cc-badge"
+    :class="[size === 'lg' && 'cc-badge--lg', mono && 'cc-badge--mono', uppercase && 'cc-badge--uppercase']"
+    :style="styleObj"
+  >
+    <StatusDot v-if="dot" :tone="tone" :size="6" :pulse="pulse" />
+    <Icon v-if="icon" :name="icon" :size="size === 'lg' ? 13 : 12" :stroke-width="2.5" />
+    <slot />
+  </span>
+</template>
+
+<style>
+.cc-badge {
+  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
+  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); line-height: 1;
+  border-radius: var(--radius-sm); white-space: nowrap; letter-spacing: 0.005em;
+}
+.cc-badge--lg { height: 24px; padding: 0 10px; font-size: var(--text-sm); }
+.cc-badge--mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
+.cc-badge--uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-2xs); }
+</style>
diff --git a/frontend/src/components/ds/core/Button.vue b/frontend/src/components/ds/core/Button.vue
new file mode 100644
index 0000000..bcd1190
--- /dev/null
+++ b/frontend/src/components/ds/core/Button.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * Button — primary action control; `variant="primary"` carries the live game accent.
+ * Variants: primary | secondary | ghost | outline | danger | danger-soft.
+ * Sizes: sm | md | lg. Pass Lucide names via `icon` / `iconRight`.
+ * Native click bubbles via attribute fall-through (root is the <button>).
+ */
+import { computed } from 'vue'
+import Icon from './Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'danger-soft'
+    size?: 'sm' | 'md' | 'lg'
+    icon?: string
+    iconRight?: string
+    loading?: boolean
+    block?: boolean
+    disabled?: boolean
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  { variant: 'primary', size: 'md', loading: false, block: false, disabled: false, type: 'button' },
+)
+
+const iconSize = computed(() => (props.size === 'lg' ? 17 : props.size === 'sm' ? 14 : 15))
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[
+      'cc-btn',
+      `cc-btn--${variant}`,
+      size !== 'md' && `cc-btn--${size}`,
+      block && 'cc-btn--block',
+    ]"
+  >
+    <span v-if="loading" class="cc-btn__spin" />
+    <Icon v-else-if="icon" :name="icon" :size="iconSize" :stroke-width="2.25" />
+    <span v-if="$slots.default"><slot /></span>
+    <Icon v-if="iconRight && !loading" :name="iconRight" :size="iconSize" :stroke-width="2.25" />
+  </button>
+</template>
+
+<style>
+.cc-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); line-height: 1;
+  white-space: nowrap; height: var(--control-h-md); padding: 0 14px;
+  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; user-select: none;
+  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
+}
+.cc-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+.cc-btn:active { transform: translateY(0.5px); }
+.cc-btn[disabled], .cc-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
+.cc-btn--block { width: 100%; }
+.cc-btn--sm { height: var(--control-h-sm); padding: 0 10px; font-size: var(--text-xs); border-radius: var(--radius-sm); gap: 6px; }
+.cc-btn--lg { height: var(--control-h-lg); padding: 0 18px; font-size: var(--text-base); gap: 9px; }
+
+.cc-btn--primary { background: var(--accent); color: var(--accent-contrast); }
+.cc-btn--primary:hover { background: var(--accent-hover); }
+.cc-btn--primary:active { background: var(--accent-press); }
+
+.cc-btn--secondary { background: var(--surface-raised-2); color: var(--text-primary); box-shadow: var(--ring-default); }
+.cc-btn--secondary:hover { background: var(--surface-active); }
+
+.cc-btn--ghost { background: transparent; color: var(--text-secondary); }
+.cc-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
+
+.cc-btn--outline { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.cc-btn--outline:hover { background: var(--accent-soft); }
+
+.cc-btn--danger { background: var(--danger); color: #fff; }
+.cc-btn--danger:hover { filter: brightness(1.1); }
+
+.cc-btn--danger-soft { background: var(--status-offline-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--status-offline-border); }
+.cc-btn--danger-soft:hover { background: var(--danger); color: #fff; }
+
+.cc-btn__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: cc-btn-spin 0.6s linear infinite; }
+@keyframes cc-btn-spin { to { transform: rotate(360deg); } }
+</style>
diff --git a/frontend/src/components/ds/core/Icon.vue b/frontend/src/components/ds/core/Icon.vue
new file mode 100644
index 0000000..94419d6
--- /dev/null
+++ b/frontend/src/components/ds/core/Icon.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/**
+ * Icon — renders a Lucide icon by kebab-case name (matches the design system's
+ * string `icon` prop API, e.g. <Icon name="refresh-cw" />). Maps to
+ * `lucide-vue-next` via a registry so the bundle only ships icons we use.
+ * Lucide icons render with `currentColor`, so they theme to the parent's color.
+ * Add new icons to `registry` as the port grows.
+ */
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import {
+  Play, Pause, RefreshCw, Trash2, Settings, Terminal, Power, Box, Sun, Moon,
+  Loader, LoaderCircle, TrendingUp, TrendingDown, Minus, Plus, Server, Users,
+  Puzzle, FolderOpen, Cpu, BarChart3, Rocket, TriangleAlert, Bell, Search,
+  ChevronDown, ChevronRight, ChevronLeft, ChevronUp, Check, X, Calendar, Clock,
+  ShoppingCart, CreditCard, HardDrive, Activity, Shield, Download, Upload,
+  Wifi, WifiOff, Map, Gauge, Gift, Flame, DoorOpen, Pickaxe, Swords, Crosshair,
+  Navigation, MessageSquare, FileText, Bookmark, ExternalLink, Copy, LogOut,
+  Eye, EyeOff, Globe, Key, Layers, List, MoreVertical, Zap,
+  Info, OctagonAlert, CircleCheck, Sparkles, Inbox,
+  LayoutDashboard, CalendarClock, Drama, ChevronsUpDown, ServerCog,
+  LayoutGrid, SquareDashed, MemoryStick, CornerDownLeft,
+} from 'lucide-vue-next'
+
+const props = withDefaults(
+  defineProps<{ name: string; size?: number; strokeWidth?: number }>(),
+  { size: 16, strokeWidth: 2 },
+)
+
+const registry: Record<string, Component> = {
+  play: Play, pause: Pause, 'refresh-cw': RefreshCw, 'trash-2': Trash2,
+  settings: Settings, terminal: Terminal, power: Power, box: Box, sun: Sun,
+  moon: Moon, loader: LoaderCircle, 'loader-2': Loader, 'trending-up': TrendingUp,
+  'trending-down': TrendingDown, minus: Minus, plus: Plus, server: Server,
+  users: Users, puzzle: Puzzle, 'folder-open': FolderOpen, cpu: Cpu,
+  'bar-chart-3': BarChart3, rocket: Rocket, 'triangle-alert': TriangleAlert,
+  bell: Bell, search: Search, 'chevron-down': ChevronDown,
+  'chevron-right': ChevronRight, 'chevron-left': ChevronLeft, 'chevron-up': ChevronUp,
+  check: Check, x: X, calendar: Calendar, clock: Clock,
+  'shopping-cart': ShoppingCart, 'credit-card': CreditCard, 'hard-drive': HardDrive,
+  activity: Activity, shield: Shield, download: Download, upload: Upload,
+  wifi: Wifi, 'wifi-off': WifiOff, map: Map, gauge: Gauge, gift: Gift,
+  flame: Flame, 'door-open': DoorOpen, pickaxe: Pickaxe, swords: Swords,
+  crosshair: Crosshair, navigation: Navigation, 'message-square': MessageSquare,
+  'file-text': FileText, bookmark: Bookmark, 'external-link': ExternalLink,
+  copy: Copy, 'log-out': LogOut, eye: Eye, 'eye-off': EyeOff, globe: Globe,
+  key: Key, layers: Layers, list: List, 'more-vertical': MoreVertical, zap: Zap,
+  info: Info, 'octagon-alert': OctagonAlert, 'circle-check': CircleCheck,
+  sparkles: Sparkles, inbox: Inbox,
+  'layout-dashboard': LayoutDashboard, 'calendar-clock': CalendarClock, drama: Drama,
+  'chevrons-up-down': ChevronsUpDown, 'server-cog': ServerCog, 'layout-grid': LayoutGrid,
+  'square-dashed': SquareDashed, 'memory-stick': MemoryStick, 'corner-down-left': CornerDownLeft,
+}
+
+const cmp = computed<Component | null>(() => registry[props.name] ?? null)
+</script>
+
+<template>
+  <component
+    :is="cmp"
+    v-if="cmp"
+    class="cc-icon"
+    :size="size"
+    :width="size"
+    :height="size"
+    :stroke-width="strokeWidth"
+    aria-hidden="true"
+  />
+</template>
+
+<style>
+.cc-icon { display: inline-block; flex: none; vertical-align: middle; }
+</style>
diff --git a/frontend/src/components/ds/core/IconButton.vue b/frontend/src/components/ds/core/IconButton.vue
new file mode 100644
index 0000000..191e437
--- /dev/null
+++ b/frontend/src/components/ds/core/IconButton.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/**
+ * IconButton — square icon-only action button.
+ * Variants: ghost | solid | accent | danger.
+ * Sizes: sm | md | lg.
+ * Native click bubbles via attribute fall-through (root is <button>).
+ */
+import { computed } from 'vue'
+import Icon from './Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    icon: string
+    variant?: 'ghost' | 'solid' | 'accent' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    active?: boolean
+    label?: string
+    disabled?: boolean
+  }>(),
+  { variant: 'ghost', size: 'md', active: false, disabled: false },
+)
+
+const iconPx = computed(() => (props.size === 'lg' ? 19 : props.size === 'sm' ? 15 : 17))
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="label"
+    :title="label"
+    :disabled="disabled"
+    :class="[
+      'cc-iconbtn',
+      variant !== 'ghost' && `cc-iconbtn--${variant}`,
+      size !== 'md' && `cc-iconbtn--${size}`,
+      active && 'cc-iconbtn--active',
+    ]"
+  >
+    <Icon :name="icon" :size="iconPx" :stroke-width="2" />
+  </button>
+</template>
+
+<style>
+.cc-iconbtn {
+  display:inline-flex; align-items:center; justify-content:center; flex:none;
+  width:var(--control-h-md); height:var(--control-h-md); border-radius:var(--radius-md);
+  border:1px solid transparent; background:transparent; color:var(--text-secondary);
+  cursor:pointer; transition:var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
+}
+.cc-iconbtn:hover { background:var(--surface-hover); color:var(--text-primary); }
+.cc-iconbtn:active { transform: translateY(0.5px); }
+.cc-iconbtn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
+.cc-iconbtn[disabled] { opacity:.4; pointer-events:none; }
+.cc-iconbtn--sm { width:var(--control-h-sm); height:var(--control-h-sm); border-radius:var(--radius-sm); }
+.cc-iconbtn--lg { width:var(--control-h-lg); height:var(--control-h-lg); }
+.cc-iconbtn--solid { background:var(--surface-raised-2); box-shadow:var(--ring-default); }
+.cc-iconbtn--solid:hover { background:var(--surface-active); }
+.cc-iconbtn--accent { background:var(--accent); color:var(--accent-contrast); }
+.cc-iconbtn--accent:hover { background:var(--accent-hover); }
+.cc-iconbtn--danger:hover { background:var(--status-offline-soft); color:var(--danger); }
+.cc-iconbtn--active { background:var(--accent-soft); color:var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); }
+</style>
diff --git a/frontend/src/components/ds/core/Kbd.vue b/frontend/src/components/ds/core/Kbd.vue
new file mode 100644
index 0000000..1e86492
--- /dev/null
+++ b/frontend/src/components/ds/core/Kbd.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Kbd — keyboard shortcut key chip, rendered as <kbd>.
+ * Uses mono font and inset border + bottom shadow to mimic a physical key.
+ * No props — purely a presentational slot wrapper; native attrs fall through.
+ */
+</script>
+
+<template>
+  <kbd class="cc-kbd"><slot /></kbd>
+</template>
+
+<style>
+.cc-kbd {
+  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px;
+  font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1; color:var(--text-secondary);
+  background:var(--surface-raised-2); border-radius:var(--radius-sm);
+  box-shadow: inset 0 0 0 1px var(--border-default), 0 1px 0 var(--border-default);
+}
+</style>
diff --git a/frontend/src/components/ds/core/StatusDot.vue b/frontend/src/components/ds/core/StatusDot.vue
new file mode 100644
index 0000000..264d398
--- /dev/null
+++ b/frontend/src/components/ds/core/StatusDot.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/** StatusDot — small live-status dot; pulses when live. Tone maps to status tokens. */
+withDefaults(
+  defineProps<{
+    tone?: 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping' | 'neutral' | 'accent'
+    size?: number
+    pulse?: boolean
+  }>(),
+  { tone: 'online', size: 8, pulse: false },
+)
+
+const TONE: Record<string, string> = {
+  online: 'var(--status-online)',
+  offline: 'var(--status-offline)',
+  warn: 'var(--status-warn)',
+  info: 'var(--status-info)',
+  starting: 'var(--status-starting)',
+  wiping: 'var(--status-wiping)',
+  neutral: 'var(--text-muted)',
+  accent: 'var(--accent)',
+}
+</script>
+
+<template>
+  <span
+    class="cc-dot"
+    :class="pulse && 'cc-dot--pulse'"
+    :style="{
+      width: size + 'px',
+      height: size + 'px',
+      background: TONE[tone] || TONE.neutral,
+      boxShadow: pulse ? '0 0 8px -1px ' + (TONE[tone] || TONE.neutral) : 'none',
+    }"
+  />
+</template>
+
+<style>
+.cc-dot { display: inline-block; flex: none; border-radius: 50%; position: relative; }
+.cc-dot--pulse::after {
+  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
+  animation: cc-dot-pulse 1.8s var(--ease-out) infinite;
+}
+@keyframes cc-dot-pulse {
+  0% { transform: scale(1); opacity: 0.6; }
+  70%, 100% { transform: scale(2.6); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) { .cc-dot--pulse::after { animation: none; } }
+</style>
diff --git a/frontend/src/components/ds/core/Tag.vue b/frontend/src/components/ds/core/Tag.vue
new file mode 100644
index 0000000..d6a696e
--- /dev/null
+++ b/frontend/src/components/ds/core/Tag.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+/**
+ * Tag — removable or static label chip.
+ * Set `removable` to show the dismiss ×; emit `remove` is fired when clicked.
+ * Optional `icon` prefix via Icon registry.
+ */
+import Icon from './Icon.vue'
+
+withDefaults(
+  defineProps<{
+    icon?: string
+    removable?: boolean
+  }>(),
+  { removable: false },
+)
+
+const emit = defineEmits<{
+  remove: []
+}>()
+</script>
+
+<template>
+  <span :class="['cc-tag', !removable && 'cc-tag--static']">
+    <Icon v-if="icon" :name="icon" :size="12" :stroke-width="2.25" />
+    <span><slot /></span>
+    <button
+      v-if="removable"
+      type="button"
+      class="cc-tag__x"
+      aria-label="Remove"
+      @click="emit('remove')"
+    >
+      <Icon name="x" :size="11" :stroke-width="2.5" />
+    </button>
+  </span>
+</template>
+
+<style>
+.cc-tag {
+  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 4px 0 9px;
+  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:500; line-height:1;
+  color:var(--text-secondary); background:var(--surface-raised-2);
+  border-radius:var(--radius-sm); box-shadow:var(--ring-default);
+}
+.cc-tag--static { padding:0 9px; }
+.cc-tag__x {
+  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
+  border-radius:var(--radius-xs); color:var(--text-tertiary); cursor:pointer; border:0; background:transparent;
+  transition:var(--transition-colors);
+}
+.cc-tag__x:hover { background:var(--surface-active); color:var(--text-primary); }
+</style>
diff --git a/frontend/src/components/ds/data/Avatar.vue b/frontend/src/components/ds/data/Avatar.vue
new file mode 100644
index 0000000..c0a76f8
--- /dev/null
+++ b/frontend/src/components/ds/data/Avatar.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * Avatar — player / operator avatar. Renders an image, or falls back to initials.
+ * Optional status dot (online / offline / warn / idle) sits bottom-right.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    name?: string
+    src?: string
+    size?: number
+    shape?: 'rounded' | 'circle'
+    status?: 'online' | 'offline' | 'warn' | 'idle'
+  }>(),
+  { name: '', size: 32, shape: 'rounded' },
+)
+
+const TONE: Record<string, string> = {
+  online: 'var(--status-online)',
+  offline: 'var(--status-offline)',
+  warn: 'var(--status-warn)',
+  idle: 'var(--text-muted)',
+}
+
+const initials = computed(() =>
+  props.name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(w => w[0] ?? '')
+    .join('')
+    .toUpperCase() || '?',
+)
+
+const dotSize = computed(() => Math.max(7, Math.round(props.size * 0.28)))
+const dotColor = computed(() => (props.status ? (TONE[props.status] ?? TONE.idle) : ''))
+</script>
+
+<template>
+  <span
+    class="cc-avatar"
+    :class="shape === 'circle' && 'cc-avatar--circle'"
+    :style="{
+      width: size + 'px',
+      height: size + 'px',
+      fontSize: Math.round(size * 0.4) + 'px',
+    }"
+  >
+    <img v-if="src" :src="src" :alt="name" />
+    <template v-else>{{ initials }}</template>
+    <span
+      v-if="status"
+      class="cc-avatar__status"
+      :style="{ width: dotSize + 'px', height: dotSize + 'px', background: dotColor }"
+    />
+  </span>
+</template>
+
+<style>
+.cc-avatar {
+  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
+  border-radius: var(--radius-md); background: var(--surface-active); color: var(--text-secondary);
+  font-family: var(--font-mono); font-weight: 600; overflow: visible; box-shadow: var(--ring-default);
+}
+.cc-avatar--circle { border-radius: 50%; }
+.cc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cc-avatar__status {
+  position: absolute; right: -2px; bottom: -2px; border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--surface-base);
+}
+</style>
diff --git a/frontend/src/components/ds/data/ConsoleLine.vue b/frontend/src/components/ds/data/ConsoleLine.vue
new file mode 100644
index 0000000..a92ad3c
--- /dev/null
+++ b/frontend/src/components/ds/data/ConsoleLine.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * ConsoleLine — one line in the RCON / server log stream.
+ * Monospace, color-coded by level. Optional timestamp and actor (who).
+ */
+withDefaults(
+  defineProps<{
+    time?: string
+    level?: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
+    who?: string
+  }>(),
+  { level: 'info' },
+)
+
+const LABEL: Record<string, string> = {
+  cmd: 'cmd',
+  chat: 'chat',
+  info: 'info',
+  warn: 'warn',
+  error: 'err',
+  connect: 'join',
+  kill: 'kill',
+}
+</script>
+
+<template>
+  <div :class="['cc-line', 'cc-line--' + level]">
+    <span v-if="time" class="cc-line__time">{{ time }}</span>
+    <span class="cc-line__tag">{{ LABEL[level ?? 'info'] ?? level }}</span>
+    <span class="cc-line__msg">
+      <span v-if="who" class="cc-line__who">{{ who }} </span>
+      <slot />
+    </span>
+  </div>
+</template>
+
+<style>
+.cc-line { display: flex; gap: 10px; padding: 2px 12px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.65; align-items: baseline; }
+.cc-line:hover { background: var(--surface-hover); }
+.cc-line__time { color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
+.cc-line__tag { flex: none; text-transform: uppercase; font-weight: 600; font-size: 10px; letter-spacing: .05em; padding: 0 5px; border-radius: var(--radius-xs); height: 15px; display: inline-flex; align-items: center; }
+.cc-line__msg { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; min-width: 0; }
+.cc-line__who { color: var(--accent-text); }
+.cc-line--cmd .cc-line__tag { background: var(--accent-soft); color: var(--accent-text); }
+.cc-line--cmd .cc-line__msg { color: var(--text-primary); }
+.cc-line--chat .cc-line__tag { background: var(--surface-active); color: var(--text-secondary); }
+.cc-line--info .cc-line__tag { background: var(--status-info-soft); color: var(--status-info); }
+.cc-line--warn .cc-line__tag { background: var(--status-warn-soft); color: var(--status-warn); }
+.cc-line--warn .cc-line__msg { color: var(--status-warn); }
+.cc-line--error .cc-line__tag { background: var(--status-offline-soft); color: var(--status-offline); }
+.cc-line--error .cc-line__msg { color: var(--status-offline); }
+.cc-line--connect .cc-line__tag { background: var(--status-online-soft); color: var(--status-online); }
+.cc-line--kill .cc-line__tag { background: var(--status-wiping-soft); color: var(--status-wiping); }
+</style>
diff --git a/frontend/src/components/ds/data/Panel.vue b/frontend/src/components/ds/data/Panel.vue
new file mode 100644
index 0000000..eb936d4
--- /dev/null
+++ b/frontend/src/components/ds/data/Panel.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * Panel — standard section container.
+ * Header: optional eyebrow / title / subtitle / right-aligned actions.
+ * Body: padding removed when flushBody=true (tables / lists manage their own).
+ */
+withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    eyebrow?: string
+    variant?: 'base' | 'raised' | 'flush'
+    flushBody?: boolean
+  }>(),
+  { variant: 'base', flushBody: false },
+)
+</script>
+
+<template>
+  <section
+    :class="[
+      'cc-panel',
+      variant === 'raised' && 'cc-panel--raised',
+      variant === 'flush' && 'cc-panel--flush',
+    ]"
+  >
+    <header v-if="title || subtitle || eyebrow || $slots.actions" class="cc-panel__head">
+      <div class="cc-panel__titles">
+        <div v-if="eyebrow" class="t-eyebrow">{{ eyebrow }}</div>
+        <div v-if="title" class="cc-panel__title">
+          {{ title }}
+          <slot name="title-append" />
+        </div>
+        <div v-if="subtitle" class="cc-panel__sub">{{ subtitle }}</div>
+      </div>
+      <div v-if="$slots.actions" class="cc-panel__actions">
+        <slot name="actions" />
+      </div>
+    </header>
+    <div :class="['cc-panel__body', flushBody && 'cc-panel__body--flush']">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style>
+.cc-panel { background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default); display: flex; flex-direction: column; min-width: 0; }
+.cc-panel--raised { background: var(--surface-raised); }
+.cc-panel--flush { box-shadow: none; background: transparent; }
+.cc-panel__head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); }
+.cc-panel__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.cc-panel__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
+.cc-panel__sub { font-size: var(--text-xs); color: var(--text-tertiary); }
+.cc-panel__actions { display: flex; align-items: center; gap: 6px; flex: none; }
+.cc-panel__body { padding: 16px; min-width: 0; }
+.cc-panel__body--flush { padding: 0; }
+</style>
diff --git a/frontend/src/components/ds/data/PlayersChart.vue b/frontend/src/components/ds/data/PlayersChart.vue
new file mode 100644
index 0000000..834cb9e
--- /dev/null
+++ b/frontend/src/components/ds/data/PlayersChart.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+/**
+ * PlayersChart — themed ECharts area chart of players online.
+ * Reads the live design tokens (--accent etc.) from CSS so it matches the
+ * active theme/game, and re-renders when data-game / data-theme flip on <html>.
+ */
+import { onMounted, onBeforeUnmount, useTemplateRef } from 'vue'
+import * as echarts from 'echarts'
+
+const props = withDefaults(
+  defineProps<{ height?: number; data?: number[]; max?: number }>(),
+  { height: 200, max: 200 },
+)
+
+const el = useTemplateRef<HTMLDivElement>('el')
+let chart: echarts.ECharts | null = null
+let ro: ResizeObserver | null = null
+let mo: MutationObserver | null = null
+
+const DEFAULT_SERIES = [
+  60, 52, 44, 38, 33, 30, 34, 46, 62, 78, 92, 104,
+  118, 126, 131, 138, 142, 151, 168, 182, 176, 150, 112, 84,
+]
+
+function cssVar(name: string, node?: HTMLElement): string {
+  return getComputedStyle(node || document.documentElement).getPropertyValue(name).trim()
+}
+
+function render(): void {
+  if (!chart || !el.value) return
+  const node = el.value
+  const accent = cssVar('--accent', node) || '#f26622'
+  const grid = cssVar('--border-subtle', node) || 'rgba(255,255,255,0.06)'
+  const text = cssVar('--text-tertiary', node) || '#767d89'
+  const mono = 'JetBrains Mono, monospace'
+  const hours = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`)
+  const series = props.data ?? DEFAULT_SERIES
+
+  chart.setOption({
+    animationDuration: 700,
+    grid: { left: 8, right: 12, top: 14, bottom: 22, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: cssVar('--surface-overlay', node) || '#1f2329',
+      borderColor: cssVar('--border-default', node) || 'rgba(255,255,255,0.1)',
+      borderWidth: 1,
+      textStyle: { color: cssVar('--text-primary', node) || '#fff', fontFamily: mono, fontSize: 11 },
+      axisPointer: { type: 'line', lineStyle: { color: accent, opacity: 0.5 } },
+    },
+    xAxis: {
+      type: 'category', data: hours, boundaryGap: false,
+      axisLine: { lineStyle: { color: grid } }, axisTick: { show: false },
+      axisLabel: { color: text, fontFamily: mono, fontSize: 10, interval: 3 },
+    },
+    yAxis: {
+      type: 'value', max: props.max,
+      splitLine: { lineStyle: { color: grid } },
+      axisLabel: { color: text, fontFamily: mono, fontSize: 10 },
+    },
+    series: [{
+      type: 'line', smooth: 0.4, symbol: 'none', data: series,
+      lineStyle: { color: accent, width: 2 },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: accent + '55' },
+          { offset: 1, color: accent + '00' },
+        ]),
+      },
+      markLine: {
+        silent: true, symbol: 'none',
+        lineStyle: { color: text, type: 'dashed', opacity: 0.5 },
+        data: [{ yAxis: props.max, label: { formatter: `cap ${props.max}`, color: text, fontFamily: mono, fontSize: 9 } }],
+      },
+    }],
+  })
+}
+
+onMounted(() => {
+  if (!el.value) return
+  chart = echarts.init(el.value, undefined, { renderer: 'canvas' })
+  render()
+  ro = new ResizeObserver(() => chart?.resize())
+  ro.observe(el.value)
+  mo = new MutationObserver(render)
+  mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-game', 'data-theme'] })
+})
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+  mo?.disconnect()
+  chart?.dispose()
+  chart = null
+})
+</script>
+
+<template>
+  <div ref="el" :style="{ width: '100%', height: height + 'px' }" />
+</template>
diff --git a/frontend/src/components/ds/data/ResourceMeter.vue b/frontend/src/components/ds/data/ResourceMeter.vue
new file mode 100644
index 0000000..32e87e1
--- /dev/null
+++ b/frontend/src/components/ds/data/ResourceMeter.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * ResourceMeter — labeled utilization bar (CPU, RAM, disk, network).
+ * tone="auto" colors by threshold: green <70%, amber <90%, red ≥90%.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    icon?: string
+    value?: number
+    sub?: string
+    tone?: 'auto' | 'ok' | 'warn' | 'danger' | 'accent'
+  }>(),
+  { value: 0, tone: 'auto' },
+)
+
+const pct = computed(() => Math.max(0, Math.min(100, props.value)))
+
+const resolvedTone = computed(() => {
+  if (props.tone !== 'auto') return props.tone
+  return pct.value >= 90 ? 'danger' : pct.value >= 70 ? 'warn' : 'ok'
+})
+</script>
+
+<template>
+  <div :class="['cc-meter', 'cc-meter--' + resolvedTone]">
+    <div class="cc-meter__top">
+      <span class="cc-meter__label">{{ label }}</span>
+      <span class="cc-meter__val">
+        {{ pct }}%<span v-if="sub" class="cc-meter__sub">{{ sub }}</span>
+      </span>
+    </div>
+    <div class="cc-meter__track">
+      <div class="cc-meter__fill" :style="{ width: pct + '%' }" />
+    </div>
+  </div>
+</template>
+
+<style>
+.cc-meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.cc-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.cc-meter__label { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
+.cc-meter__val { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.cc-meter__sub { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
+.cc-meter__track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-active); overflow: hidden; }
+.cc-meter__fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out), background var(--dur-base); }
+.cc-meter--accent .cc-meter__fill { background: var(--accent); }
+.cc-meter--ok .cc-meter__fill { background: var(--status-online); }
+.cc-meter--warn .cc-meter__fill { background: var(--status-warn); }
+.cc-meter--danger .cc-meter__fill { background: var(--status-offline); }
+</style>
diff --git a/frontend/src/components/ds/data/ServerCard.vue b/frontend/src/components/ds/data/ServerCard.vue
new file mode 100644
index 0000000..88279e1
--- /dev/null
+++ b/frontend/src/components/ds/data/ServerCard.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+/**
+ * ServerCard — server instance summary card.
+ * Sets :data-game so per-game accent token re-skins apply via the global [data-game] selector.
+ * Status drives the dot + left rail color.
+ * `offline` dims the card and swaps the power IconButton to a Start action.
+ * Pending state shows when status==='online' && cpu==null && ram==null.
+ */
+import { computed } from 'vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import ResourceMeter from './ResourceMeter.vue'
+
+export interface StatItem {
+  label: string
+  value: string | number
+}
+
+const props = withDefaults(
+  defineProps<{
+    game?: string
+    gameIcon?: string
+    name: string
+    region?: string
+    map?: string
+    version?: string
+    status?: 'online' | 'offline' | 'starting' | 'wiping' | 'updating'
+    players?: { cur: number; max: number }
+    cpu?: number
+    ram?: number
+    ramSub?: string
+    ip?: string
+    stats?: StatItem[]
+  }>(),
+  {
+    game: 'rust',
+    gameIcon: 'box',
+    status: 'online',
+    players: () => ({ cur: 0, max: 0 }),
+  },
+)
+
+const emit = defineEmits<{
+  console: []
+  settings: []
+  power: []
+}>()
+
+interface StatusEntry {
+  tone: 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping' | 'neutral' | 'accent'
+  label: string
+  pulse: boolean
+}
+
+const DEFAULT_STATUS: StatusEntry = { tone: 'online', label: 'Online', pulse: true }
+
+const STATUS_MAP: Record<string, StatusEntry> = {
+  online:   { tone: 'online',   label: 'Online',   pulse: true },
+  offline:  { tone: 'offline',  label: 'Offline',  pulse: false },
+  starting: { tone: 'starting', label: 'Booting',  pulse: true },
+  wiping:   { tone: 'wiping',   label: 'Wiping',   pulse: true },
+  updating: { tone: 'starting', label: 'Updating', pulse: true },
+}
+
+const st = computed<StatusEntry>(() => STATUS_MAP[props.status ?? 'online'] ?? DEFAULT_STATUS)
+const offline = computed(() => props.status === 'offline')
+
+const statList = computed<StatItem[]>(() => {
+  if (props.stats) return props.stats
+  const items: StatItem[] = [
+    { label: 'Players', value: `${props.players?.cur ?? 0} / ${props.players?.max ?? 0}` },
+  ]
+  if (props.version) {
+    items.push({ label: 'Build', value: props.version })
+  }
+  return items
+})
+
+const pending = computed(
+  () => props.status === 'online' && props.cpu == null && props.ram == null,
+)
+
+const showMeters = computed(
+  () => !offline.value && (props.cpu != null || props.ram != null),
+)
+</script>
+
+<template>
+  <div
+    :data-game="game"
+    :class="['cc-server', offline && 'cc-server--offline']"
+  >
+    <!-- Head -->
+    <div class="cc-server__head">
+      <div class="cc-server__game">
+        <Icon :name="gameIcon" :size="18" :stroke-width="2" />
+      </div>
+      <div class="cc-server__id">
+        <div class="cc-server__name">
+          {{ name }}
+          <Badge :tone="st.tone" dot :pulse="st.pulse">{{ st.label }}</Badge>
+        </div>
+        <div class="cc-server__meta">
+          <span v-if="region">{{ region }}</span>
+          <span v-if="map">{{ map }}</span>
+          <span v-if="ip">{{ ip }}</span>
+        </div>
+      </div>
+      <div class="cc-server__actions">
+        <IconButton icon="terminal" variant="ghost" size="sm" label="Console" @click="emit('console')" />
+        <IconButton icon="settings" variant="ghost" size="sm" label="Settings" @click="emit('settings')" />
+        <IconButton
+          :icon="offline ? 'play' : 'power'"
+          :variant="offline ? 'accent' : 'ghost'"
+          size="sm"
+          :label="offline ? 'Start' : 'Power'"
+          @click="emit('power')"
+        />
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="cc-server__body">
+      <div class="cc-server__stats">
+        <div v-for="(s, i) in statList" :key="i" class="cc-server__stat">
+          <b>{{ s.value }}</b>
+          <span>{{ s.label }}</span>
+        </div>
+      </div>
+
+      <div v-if="showMeters" class="cc-server__meters">
+        <ResourceMeter v-if="cpu != null" label="CPU" :value="cpu" />
+        <ResourceMeter v-if="ram != null" label="RAM" :value="ram" :sub="ramSub" />
+      </div>
+
+      <div v-if="pending" class="cc-server__pending">
+        <Icon name="loader" :size="13" :stroke-width="2.5" />
+        Telemetry pending · agent monitoring
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.cc-server { position: relative; background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default); overflow: hidden; transition: var(--transition-colors); }
+.cc-server::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .9; }
+.cc-server:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
+.cc-server--offline::before { background: var(--status-offline); }
+.cc-server--offline { opacity: .82; }
+.cc-server__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 17px; }
+.cc-server__game { width: 34px; height: 34px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.cc-server__id { flex: 1; min-width: 0; }
+.cc-server__name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
+.cc-server__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; display: flex; gap: 10px; }
+.cc-server__body { padding: 0 14px 13px 17px; display: flex; flex-direction: column; gap: 11px; }
+.cc-server__stats { display: flex; gap: 18px; }
+.cc-server__stat { display: flex; flex-direction: column; gap: 1px; }
+.cc-server__stat b { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.cc-server__stat span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
+.cc-server__meters { display: flex; gap: 14px; }
+.cc-server__meters > * { flex: 1; }
+.cc-server__pending { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+.cc-server__pending .cc-icon { color: var(--status-starting); }
+.cc-server__actions { display: flex; gap: 5px; }
+</style>
diff --git a/frontend/src/components/ds/data/StatCard.vue b/frontend/src/components/ds/data/StatCard.vue
new file mode 100644
index 0000000..e244450
--- /dev/null
+++ b/frontend/src/components/ds/data/StatCard.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/**
+ * StatCard — KPI tile with icon, big mono value, and optional delta + note row.
+ * Green delta = up/good, red = down/bad, muted = flat.
+ */
+import { computed } from 'vue'
+import Icon from '@/components/ds/core/Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    value: string | number
+    unit?: string
+    icon?: string
+    delta?: string | number
+    deltaDir?: 'up' | 'down' | 'flat'
+    note?: string
+  }>(),
+  { deltaDir: 'up' },
+)
+
+const deltaIcon = computed(() =>
+  props.deltaDir === 'up' ? 'trending-up' : props.deltaDir === 'down' ? 'trending-down' : 'minus',
+)
+
+const showFoot = computed(() => props.delta != null || !!props.note)
+</script>
+
+<template>
+  <div class="cc-stat">
+    <div class="cc-stat__top">
+      <div v-if="icon" class="cc-stat__ico">
+        <Icon :name="icon" :size="15" :stroke-width="2.25" />
+      </div>
+      <div class="cc-stat__label">{{ label }}</div>
+    </div>
+    <div class="cc-stat__value">
+      {{ value }}<span v-if="unit" class="cc-stat__unit">{{ unit }}</span>
+    </div>
+    <div v-if="showFoot" class="cc-stat__foot">
+      <span v-if="delta != null" :class="['cc-stat__delta', 'cc-stat__delta--' + deltaDir]">
+        <Icon :name="deltaIcon" :size="13" :stroke-width="2.5" />{{ delta }}
+      </span>
+      <span v-if="note" class="cc-stat__note">{{ note }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.cc-stat { background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; overflow: hidden; }
+.cc-stat__top { display: flex; align-items: center; gap: 8px; }
+.cc-stat__ico { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
+.cc-stat__label { font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); letter-spacing: .01em; }
+.cc-stat__value { font-family: var(--font-mono); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; gap: 4px; }
+.cc-stat__unit { font-size: 14px; color: var(--text-muted); font-weight: 500; }
+.cc-stat__foot { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-xs); }
+.cc-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
+.cc-stat__delta--up { color: var(--status-online); }
+.cc-stat__delta--down { color: var(--status-offline); }
+.cc-stat__delta--flat { color: var(--text-tertiary); }
+.cc-stat__note { color: var(--text-tertiary); }
+</style>
diff --git a/frontend/src/components/ds/feedback/Alert.vue b/frontend/src/components/ds/feedback/Alert.vue
new file mode 100644
index 0000000..056be13
--- /dev/null
+++ b/frontend/src/components/ds/feedback/Alert.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * Alert — contextual inline alert strip.
+ * Tones: info | warn | danger | online | accent | neutral.
+ * Pass `title` for a bold heading, default slot for body text, `actions` slot
+ * for inline action buttons. Set `dismissible` to show an × ghost button that
+ * emits `dismiss`.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+type Tone = 'info' | 'warn' | 'danger' | 'online' | 'accent' | 'neutral'
+
+const ICONS: Record<Tone, string> = {
+  info: 'info',
+  warn: 'triangle-alert',
+  danger: 'octagon-alert',
+  online: 'circle-check',
+  accent: 'sparkles',
+  neutral: 'info',
+}
+
+const props = withDefaults(
+  defineProps<{
+    tone?: Tone
+    title?: string
+    dismissible?: boolean
+    icon?: string
+  }>(),
+  { tone: 'info', dismissible: false },
+)
+
+defineEmits<{ dismiss: [] }>()
+</script>
+
+<template>
+  <div
+    :class="['cc-alert', 'cc-alert--' + tone]"
+    role="status"
+  >
+    <span class="cc-alert__icon">
+      <Icon :name="icon ?? ICONS[tone]" :size="17" :stroke-width="2" />
+    </span>
+    <div class="cc-alert__main">
+      <div v-if="title" class="cc-alert__title">{{ title }}</div>
+      <div v-if="$slots.default" class="cc-alert__body"><slot /></div>
+      <div v-if="$slots.actions" class="cc-alert__actions"><slot name="actions" /></div>
+    </div>
+    <button
+      v-if="dismissible"
+      class="cc-alert__dismiss"
+      type="button"
+      aria-label="Dismiss"
+      @click="$emit('dismiss')"
+    >
+      <Icon name="x" :size="15" :stroke-width="2.25" />
+    </button>
+  </div>
+</template>
+
+<style>
+.cc-alert { display:flex; gap:11px; padding:12px 13px; border-radius:var(--radius-md); background:var(--surface-raised); box-shadow:var(--ring-default); }
+.cc-alert__icon { flex:none; margin-top:1px; }
+.cc-alert__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
+.cc-alert__title { font-size:var(--text-sm); font-weight:600; color:var(--text-primary); }
+.cc-alert__body { font-size:var(--text-xs); color:var(--text-secondary); line-height:1.5; }
+.cc-alert__actions { display:flex; gap:8px; margin-top:8px; }
+.cc-alert--info { background:var(--status-info-soft); box-shadow: inset 0 0 0 1px var(--status-info-border); }
+.cc-alert--info .cc-alert__icon { color:var(--status-info); }
+.cc-alert--warn { background:var(--status-warn-soft); box-shadow: inset 0 0 0 1px var(--status-warn-border); }
+.cc-alert--warn .cc-alert__icon { color:var(--status-warn); }
+.cc-alert--danger { background:var(--status-offline-soft); box-shadow: inset 0 0 0 1px var(--status-offline-border); }
+.cc-alert--danger .cc-alert__icon { color:var(--status-offline); }
+.cc-alert--online { background:var(--status-online-soft); box-shadow: inset 0 0 0 1px var(--status-online-border); }
+.cc-alert--online .cc-alert__icon { color:var(--status-online); }
+.cc-alert--accent { background:var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.cc-alert--accent .cc-alert__icon { color:var(--accent-text); }
+.cc-alert__dismiss {
+  flex: none; display:inline-flex; align-items:center; justify-content:center;
+  width:26px; height:26px; border-radius:var(--radius-sm); border:none; cursor:pointer;
+  background:transparent; color:var(--text-secondary);
+  transition: var(--transition-colors);
+  margin-top:-3px; margin-right:-3px;
+}
+.cc-alert__dismiss:hover { background:var(--surface-hover); color:var(--text-primary); }
+.cc-alert__dismiss:focus-visible { outline:none; box-shadow:var(--focus-ring); }
+</style>
diff --git a/frontend/src/components/ds/feedback/EmptyState.vue b/frontend/src/components/ds/feedback/EmptyState.vue
new file mode 100644
index 0000000..7e78037
--- /dev/null
+++ b/frontend/src/components/ds/feedback/EmptyState.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * EmptyState — zero-data placeholder with icon, title, description, and an
+ * optional action slot (pass a Button or link).
+ *
+ * Icon registry note: default icon 'inbox' is not in the registry — it will
+ * silently not render per Icon.vue's null guard. Callers should pass a
+ * registered icon name (e.g. icon="server", icon="folder-open").
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+withDefaults(
+  defineProps<{
+    icon?: string
+    title?: string
+    description?: string
+  }>(),
+  { icon: 'inbox' },
+)
+</script>
+
+<template>
+  <div class="cc-empty">
+    <div class="cc-empty__icon">
+      <Icon :name="icon" :size="22" :stroke-width="1.75" />
+    </div>
+    <div v-if="title" class="cc-empty__title">{{ title }}</div>
+    <div v-if="description" class="cc-empty__desc">{{ description }}</div>
+    <div v-if="$slots.action" class="cc-empty__action"><slot name="action" /></div>
+  </div>
+</template>
+
+<style>
+.cc-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; padding:36px 24px; }
+.cc-empty__icon { width:46px; height:46px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:var(--text-tertiary); background:var(--surface-raised-2); box-shadow:var(--ring-default); }
+.cc-empty__title { font-size:var(--text-base); font-weight:600; color:var(--text-primary); }
+.cc-empty__desc { font-size:var(--text-sm); color:var(--text-tertiary); max-width:340px; line-height:1.5; }
+.cc-empty__action { margin-top:12px; }
+</style>
diff --git a/frontend/src/components/ds/forms/Checkbox.vue b/frontend/src/components/ds/forms/Checkbox.vue
new file mode 100644
index 0000000..600e5b5
--- /dev/null
+++ b/frontend/src/components/ds/forms/Checkbox.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * Checkbox — square toggle; checked/indeterminate state carries the live game accent.
+ * v-model binds to boolean checked state via defineModel<boolean>().
+ * The hidden <input type="checkbox"> drives CSS :checked/:indeterminate/:focus-visible/:disabled.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    disabled?: boolean
+    id?: string
+  }>(),
+  { disabled: false },
+)
+
+const model = defineModel<boolean>()
+</script>
+
+<template>
+  <label class="cc-check" :for="id">
+    <input
+      type="checkbox"
+      :id="id"
+      :checked="model"
+      :disabled="disabled"
+      @change="model = ($event.target as HTMLInputElement).checked"
+    />
+    <span class="cc-check__box">
+      <Icon name="check" :size="12" :stroke-width="3" />
+    </span>
+    <span v-if="label" class="cc-check__label">{{ label }}</span>
+  </label>
+</template>
+
+<style>
+.cc-check { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
+.cc-check input { position:absolute; opacity:0; width:0; height:0; }
+.cc-check__box {
+  width:17px; height:17px; flex:none; border-radius:var(--radius-xs); background:var(--surface-inset);
+  box-shadow: inset 0 0 0 1px var(--border-strong); display:flex; align-items:center; justify-content:center;
+  color:transparent; transition:var(--transition-colors);
+}
+.cc-check input:checked + .cc-check__box { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color:var(--accent-contrast); }
+.cc-check input:indeterminate + .cc-check__box { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color:var(--accent-contrast); }
+.cc-check input:focus-visible + .cc-check__box { box-shadow: var(--focus-ring); }
+.cc-check input:disabled + .cc-check__box { opacity:.5; }
+.cc-check__label { font-size:var(--text-sm); color:var(--text-primary); }
+</style>
diff --git a/frontend/src/components/ds/forms/Input.vue b/frontend/src/components/ds/forms/Input.vue
new file mode 100644
index 0000000..84a2a77
--- /dev/null
+++ b/frontend/src/components/ds/forms/Input.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * Input — text field with label, hint/error, leading icon and affixes.
+ * Reach for `mono` on any technical value (ports, tokens, IDs).
+ * v-model binds to the inner <input> value via defineModel<string>().
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    hint?: string
+    error?: string
+    icon?: string
+    prefix?: string
+    suffix?: string
+    size?: 'md' | 'sm'
+    mono?: boolean
+    required?: boolean
+    id?: string
+    placeholder?: string
+    disabled?: boolean
+    type?: string
+  }>(),
+  { size: 'md', mono: false, required: false, disabled: false, type: 'text' },
+)
+
+const model = defineModel<string>()
+
+const invalid = () => !!props.error
+</script>
+
+<template>
+  <label
+    class="cc-field"
+    :for="id"
+  >
+    <span v-if="label" class="cc-field__label">
+      {{ label }}<span v-if="required" class="req">*</span>
+    </span>
+    <span
+      :class="[
+        'cc-input',
+        size === 'sm' && 'cc-input--sm',
+        mono && 'cc-input--mono',
+        invalid() && 'cc-input--invalid',
+      ]"
+    >
+      <Icon v-if="icon" :name="icon" :size="15" />
+      <span v-if="prefix" class="cc-input__affix">{{ prefix }}</span>
+      <input
+        :id="id"
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :value="model"
+        @input="model = ($event.target as HTMLInputElement).value"
+      />
+      <span v-if="suffix" class="cc-input__affix">{{ suffix }}</span>
+    </span>
+    <span
+      v-if="hint || error"
+      :class="['cc-field__hint', invalid() && 'cc-field__hint--error']"
+    >{{ error ?? hint }}</span>
+  </label>
+</template>
+
+<style>
+.cc-field { display:flex; flex-direction:column; gap:6px; }
+.cc-field__label { font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); }
+.cc-field__label .req { color:var(--accent-text); margin-left:2px; }
+.cc-input {
+  display:flex; align-items:center; gap:8px; height:var(--control-h-md); padding:0 11px;
+  background:var(--surface-inset); border-radius:var(--radius-md); box-shadow:var(--ring-default);
+  transition:var(--transition-colors); color:var(--text-tertiary);
+}
+.cc-input:focus-within { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-input--sm { height:var(--control-h-sm); padding:0 9px; }
+.cc-input--invalid { box-shadow: inset 0 0 0 1px var(--status-offline-border); }
+.cc-input--invalid:focus-within { box-shadow: inset 0 0 0 1px var(--danger); }
+.cc-input input {
+  flex:1; min-width:0; background:transparent; border:0; outline:0; padding:0; margin:0;
+  font-family:var(--font-sans); font-size:var(--text-sm); color:var(--text-primary);
+}
+.cc-input input::placeholder { color:var(--text-muted); }
+.cc-input--mono input { font-family:var(--font-mono); }
+.cc-input__affix { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap; }
+.cc-field__hint { font-size:var(--text-xs); color:var(--text-tertiary); }
+.cc-field__hint--error { color:var(--danger); }
+</style>
diff --git a/frontend/src/components/ds/forms/Select.vue b/frontend/src/components/ds/forms/Select.vue
new file mode 100644
index 0000000..3e27f0b
--- /dev/null
+++ b/frontend/src/components/ds/forms/Select.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * Select — styled native <select> with chevron overlay.
+ * With `label` the root becomes a <label> wrapping the control.
+ * v-model binds to the selected value via defineModel<string>().
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+type SelectOption = string | { value: string; label: string }
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    options?: SelectOption[]
+    size?: 'md' | 'sm'
+    id?: string
+    disabled?: boolean
+  }>(),
+  { options: () => [], size: 'md', disabled: false },
+)
+
+const model = defineModel<string>()
+
+function optionValue(o: SelectOption): string {
+  return typeof o === 'string' ? o : o.value
+}
+function optionLabel(o: SelectOption): string {
+  return typeof o === 'string' ? o : o.label
+}
+</script>
+
+<template>
+  <!-- With label: wrap in <label> matching React's cc-field layout -->
+  <label v-if="label" class="cc-field" :for="id">
+    <span class="cc-field__label">{{ label }}</span>
+    <span :class="['cc-select', size === 'sm' && 'cc-select--sm']">
+      <select
+        :id="id"
+        :disabled="disabled"
+        :value="model"
+        @change="model = ($event.target as HTMLSelectElement).value"
+      >
+        <option
+          v-for="(o, i) in options"
+          :key="i"
+          :value="optionValue(o)"
+        >{{ optionLabel(o) }}</option>
+      </select>
+      <span class="cc-select__chev">
+        <Icon name="chevron-down" :size="15" />
+      </span>
+    </span>
+  </label>
+
+  <!-- Without label: bare control -->
+  <span v-else :class="['cc-select', size === 'sm' && 'cc-select--sm']">
+    <select
+      :id="id"
+      :disabled="disabled"
+      :value="model"
+      @change="model = ($event.target as HTMLSelectElement).value"
+    >
+      <option
+        v-for="(o, i) in options"
+        :key="i"
+        :value="optionValue(o)"
+      >{{ optionLabel(o) }}</option>
+    </select>
+    <span class="cc-select__chev">
+      <Icon name="chevron-down" :size="15" />
+    </span>
+  </span>
+</template>
+
+<style>
+.cc-select { position:relative; display:flex; align-items:center; }
+.cc-select select {
+  appearance:none; width:100%; height:var(--control-h-md); padding:0 32px 0 11px;
+  background:var(--surface-inset); color:var(--text-primary); border:0; border-radius:var(--radius-md);
+  box-shadow:var(--ring-default); font-family:var(--font-sans); font-size:var(--text-sm); cursor:pointer;
+  transition:var(--transition-colors); outline:0;
+}
+.cc-select select:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-select--sm select { height:var(--control-h-sm); padding:0 28px 0 9px; }
+.cc-select__chev { position:absolute; right:9px; pointer-events:none; color:var(--text-tertiary); display:flex; }
+</style>
diff --git a/frontend/src/components/ds/forms/Switch.vue b/frontend/src/components/ds/forms/Switch.vue
new file mode 100644
index 0000000..77d651a
--- /dev/null
+++ b/frontend/src/components/ds/forms/Switch.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * Switch — toggle control; checked state carries the live game accent.
+ * v-model binds to boolean checked state via defineModel<boolean>().
+ * The hidden <input type="checkbox"> drives CSS :checked/:focus-visible/:disabled.
+ */
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    size?: 'md' | 'sm'
+    disabled?: boolean
+    id?: string
+  }>(),
+  { size: 'md', disabled: false },
+)
+
+const model = defineModel<boolean>()
+</script>
+
+<template>
+  <label
+    :class="['cc-switch', size === 'sm' && 'cc-switch--sm']"
+    :for="id"
+  >
+    <input
+      type="checkbox"
+      :id="id"
+      :checked="model"
+      :disabled="disabled"
+      @change="model = ($event.target as HTMLInputElement).checked"
+    />
+    <span class="cc-switch__track">
+      <span class="cc-switch__thumb" />
+    </span>
+    <span v-if="label" class="cc-switch__label">{{ label }}</span>
+  </label>
+</template>
+
+<style>
+.cc-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
+.cc-switch input { position:absolute; opacity:0; width:0; height:0; }
+.cc-switch__track {
+  position:relative; width:36px; height:20px; border-radius:var(--radius-pill); flex:none;
+  background:var(--surface-active); box-shadow: inset 0 0 0 1px var(--border-default);
+  transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
+}
+.cc-switch__thumb {
+  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
+  background:var(--text-secondary); transition: transform var(--dur-base) var(--ease-emphasized), background var(--dur-base);
+}
+.cc-switch input:checked + .cc-switch__track { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-switch input:checked + .cc-switch__track .cc-switch__thumb { transform:translateX(16px); background:var(--accent-contrast); }
+.cc-switch input:focus-visible + .cc-switch__track { box-shadow: var(--focus-ring); }
+.cc-switch input:disabled + .cc-switch__track { opacity:.5; }
+.cc-switch__label { font-size:var(--text-sm); color:var(--text-primary); }
+.cc-switch--sm .cc-switch__track { width:30px; height:17px; }
+.cc-switch--sm .cc-switch__thumb { width:13px; height:13px; }
+.cc-switch--sm input:checked + .cc-switch__track .cc-switch__thumb { transform:translateX(13px); }
+</style>
diff --git a/frontend/src/components/ds/navigation/GameSwitcher.vue b/frontend/src/components/ds/navigation/GameSwitcher.vue
new file mode 100644
index 0000000..43ad82a
--- /dev/null
+++ b/frontend/src/components/ds/navigation/GameSwitcher.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * GameSwitcher — segmented control for switching the active game context.
+ * Set `data-game` on a root shell element to the chosen key so the global
+ * [data-game] CSS custom properties re-skin the entire panel.
+ * Per-game accent comes from var(--accent) which is resolved by the [data-game] token scope.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+export interface GameOption {
+  key: string
+  label: string
+  icon?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    games: (string | GameOption)[]
+    showLabels?: boolean
+    class?: string
+  }>(),
+  { showLabels: true },
+)
+
+const model = defineModel<string>({ required: true })
+
+function normalise(g: string | GameOption): GameOption {
+  return typeof g === 'string' ? { key: g, label: g } : g
+}
+</script>
+
+<template>
+  <div :class="['cc-gameswitch', props.class]" role="group">
+    <button
+      v-for="raw in games"
+      :key="normalise(raw).key"
+      type="button"
+      :aria-pressed="normalise(raw).key === model"
+      :data-game="normalise(raw).key"
+      class="cc-gameswitch__opt"
+      :title="normalise(raw).label"
+      @click="model = normalise(raw).key"
+    >
+      <Icon
+        v-if="normalise(raw).icon"
+        :name="normalise(raw).icon ?? ''"
+        :size="14"
+        :stroke-width="2.25"
+        :style="{ color: normalise(raw).key === model ? 'var(--accent)' : 'inherit' }"
+      />
+      <span
+        v-else
+        class="cc-gameswitch__dot"
+        :style="{ background: normalise(raw).key === model ? 'var(--accent)' : 'var(--text-muted)' }"
+      />
+      <span v-if="showLabels">{{ normalise(raw).label }}</span>
+    </button>
+  </div>
+</template>
+
+<style>
+.cc-gameswitch { display:inline-flex; align-items:center; gap:3px; padding:3px; background:var(--surface-inset); border-radius:var(--radius-md); box-shadow:var(--ring-default); }
+.cc-gameswitch__opt {
+  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border:0; background:transparent;
+  font-family:var(--font-sans); font-size:var(--text-xs); font-weight:600; color:var(--text-tertiary);
+  border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition-colors); white-space:nowrap;
+}
+.cc-gameswitch__opt:hover { color:var(--text-primary); }
+.cc-gameswitch__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
+.cc-gameswitch__opt[aria-pressed="true"] { background:var(--surface-raised-2); color:var(--text-primary); box-shadow:var(--ring-default); }
+</style>
diff --git a/frontend/src/components/ds/navigation/NavItem.vue b/frontend/src/components/ds/navigation/NavItem.vue
new file mode 100644
index 0000000..d10d33e
--- /dev/null
+++ b/frontend/src/components/ds/navigation/NavItem.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * NavItem — sidebar navigation row: icon + label, active state with accent rail,
+ * optional trailing count. Collapsed mode renders icon-only at 40 px wide.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+withDefaults(
+  defineProps<{
+    icon: string
+    label: string
+    active?: boolean
+    count?: number | string
+    collapsed?: boolean
+  }>(),
+  { active: false, collapsed: false },
+)
+
+const emit = defineEmits<{ click: [] }>()
+</script>
+
+<template>
+  <div
+    :class="['cc-nav', active && 'cc-nav--active', collapsed && 'cc-nav--collapsed']"
+    role="button"
+    :aria-current="active ? 'page' : undefined"
+    :title="collapsed ? label : undefined"
+    @click="emit('click')"
+  >
+    <span class="cc-nav__icon">
+      <Icon :name="icon" :size="17" :stroke-width="2" />
+    </span>
+    <span v-if="!collapsed" class="cc-nav__label">{{ label }}</span>
+    <span v-if="!collapsed && count != null" class="cc-nav__count">{{ count }}</span>
+  </div>
+</template>
+
+<style>
+.cc-nav { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:var(--radius-md);
+  color:var(--text-secondary); cursor:pointer; transition:var(--transition-colors); position:relative; user-select:none; }
+.cc-nav:hover { background:var(--surface-hover); color:var(--text-primary); }
+.cc-nav__icon { flex:none; color:var(--text-tertiary); display:flex; transition:var(--transition-colors); }
+.cc-nav__label { flex:1; font-size:var(--text-sm); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.cc-nav__count { font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); padding:1px 6px; border-radius:var(--radius-pill); background:var(--surface-active); }
+.cc-nav--active { background:var(--accent-soft); color:var(--accent-text); }
+.cc-nav--active .cc-nav__icon { color:var(--accent-text); }
+.cc-nav--active::before { content:''; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:var(--radius-pill); background:var(--accent); }
+.cc-nav--active .cc-nav__count { background:var(--accent-soft-strong); color:var(--accent-text); }
+.cc-nav--collapsed { justify-content:center; padding:0; width:40px; }
+</style>
diff --git a/frontend/src/components/ds/navigation/Tabs.vue b/frontend/src/components/ds/navigation/Tabs.vue
new file mode 100644
index 0000000..c698356
--- /dev/null
+++ b/frontend/src/components/ds/navigation/Tabs.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * Tabs — horizontal tab bar. variant="pill" fills active tab with accent-soft;
+ * variant="line" underlines with accent. Items can be bare strings or TabItem objects.
+ */
+import Icon from '@/components/ds/core/Icon.vue'
+
+export interface TabItem {
+  value: string
+  label: string
+  icon?: string
+  count?: number | string
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: (string | TabItem)[]
+    variant?: 'pill' | 'line'
+    class?: string
+  }>(),
+  { variant: 'pill' },
+)
+
+const model = defineModel<string>({ required: true })
+
+function normalise(it: string | TabItem): TabItem {
+  return typeof it === 'string' ? { value: it, label: it } : it
+}
+</script>
+
+<template>
+  <div
+    :class="['cc-tabs', `cc-tabs--${variant}`, props.class]"
+    role="tablist"
+  >
+    <button
+      v-for="raw in items"
+      :key="normalise(raw).value"
+      type="button"
+      role="tab"
+      :aria-selected="normalise(raw).value === model"
+      class="cc-tab"
+      @click="model = normalise(raw).value"
+    >
+      <Icon v-if="normalise(raw).icon" :name="normalise(raw).icon ?? ''" :size="15" />
+      {{ normalise(raw).label }}
+      <span v-if="normalise(raw).count != null" class="cc-tab__count">{{ normalise(raw).count }}</span>
+    </button>
+  </div>
+</template>
+
+<style>
+.cc-tabs { display:flex; align-items:center; gap:2px; position:relative; }
+.cc-tabs--line { box-shadow: inset 0 -1px 0 var(--border-subtle); gap:4px; }
+.cc-tab {
+  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px; border:0; background:transparent;
+  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:500; color:var(--text-tertiary);
+  cursor:pointer; border-radius:var(--radius-sm); transition:var(--transition-colors); white-space:nowrap; position:relative;
+}
+.cc-tab:hover { color:var(--text-primary); background:var(--surface-hover); }
+.cc-tabs--pill .cc-tab[aria-selected="true"] { color:var(--accent-text); background:var(--accent-soft); }
+.cc-tabs--line .cc-tab { border-radius:0; height:38px; padding:0 4px; margin:0 7px; }
+.cc-tabs--line .cc-tab:hover { background:transparent; }
+.cc-tabs--line .cc-tab[aria-selected="true"] { color:var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
+.cc-tab__count { font-family:var(--font-mono); font-size:11px; padding:1px 6px; border-radius:var(--radius-pill); background:var(--surface-active); color:var(--text-tertiary); }
+.cc-tab[aria-selected="true"] .cc-tab__count { background:var(--accent-soft); color:var(--accent-text); }
+</style>
diff --git a/frontend/src/components/layout/DashboardLayout.vue b/frontend/src/components/layout/DashboardLayout.vue
index 43acc33..e2868a1 100644
--- a/frontend/src/components/layout/DashboardLayout.vue
+++ b/frontend/src/components/layout/DashboardLayout.vue
@@ -1,103 +1,120 @@
 <script setup lang="ts">
+/**
+ * DashboardLayout — game-aware app shell (Phase C redesign).
+ * Replaces the old Tailwind-only sidebar with the DS component set.
+ * Preserves: navSections, permission gating, super-admin section, logout, RouterView.
+ * Adds: GameSwitcher, Logo, DS NavItem, agent-health footer, topbar w/ search + theme toggle.
+ */
 import { ref } from 'vue'
-import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useServerStore } from '@/stores/server'
-import {
-  LayoutDashboard,
-  Server,
-  Terminal,
-  Users,
-  Puzzle,
-  RefreshCw,
-  Map,
-  MessageSquare,
-  BarChart3,
-  Bell,
-  UserPlus,
-  ShoppingBag,
-  Package,
-  Settings,
-  LogOut,
-  Shield,
-  Key,
-  CreditCard,
-  Network,
-  Clock,
-  AlertTriangle,
-  FileText,
-  FolderOpen,
-  Menu,
-  X,
-} from 'lucide-vue-next'
+import { useThemeGame } from '@/composables/useThemeGame'
+import Logo from '@/components/ds/brand/Logo.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import StatusDot from '@/components/ds/core/StatusDot.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Avatar from '@/components/ds/data/Avatar.vue'
+import NavItem from '@/components/ds/navigation/NavItem.vue'
+import GameSwitcher from '@/components/ds/navigation/GameSwitcher.vue'
+import type { GameOption } from '@/components/ds/navigation/GameSwitcher.vue'
+import type { ActiveGame } from '@/composables/useThemeGame'
 
+// ---- Stores / composables ----
 const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 const server = useServerStore()
-const sidebarOpen = ref(false)
+const { theme, activeGame, setActiveGame, toggleTheme } = useThemeGame()
 
-type NavItem = { name: string; path: string; icon: any; permission: string | null }
-type NavSection = { label: string; items: NavItem[] }
+// ---- Mobile sidebar ----
+const sidebarOpen = ref(false)
+function closeSidebar() { sidebarOpen.value = false }
+
+// ---- App version ----
+const APP_VERSION = '1.0.8'
+
+// ---- Game switcher ----
+const GAME_OPTIONS: GameOption[] = [
+  { key: 'all',      label: 'All games',     icon: 'layers' },
+  { key: 'rust',     label: 'Rust',          icon: 'box' },
+  { key: 'dune',     label: 'Dune',          icon: 'sun' },
+  { key: 'conan',    label: 'Conan Exiles',  icon: 'swords' },
+  { key: 'soulmask', label: 'Soulmask',      icon: 'drama' },
+]
+
+const GAME_LABEL: Record<string, string> = {
+  all: 'All games', rust: 'Rust', dune: 'Dune',
+  conan: 'Conan Exiles', soulmask: 'Soulmask',
+}
+
+function onActiveGame(val: string) {
+  setActiveGame(val as ActiveGame)
+}
+
+// ---- Navigation ----
+type NavItemDef = { name: string; path: string; icon: string; permission: string | null }
+type NavSection = { label: string; items: NavItemDef[] }
 
 const navSections: NavSection[] = [
   {
     label: '',
     items: [
-      { name: 'Dashboard', path: '/', icon: LayoutDashboard, permission: null },
+      { name: 'Dashboard', path: '/', icon: 'layout-dashboard', permission: null },
     ],
   },
   {
     label: 'Server',
     items: [
-      { name: 'Server', path: '/server', icon: Server, permission: 'server.view' },
-      { name: 'Console', path: '/console', icon: Terminal, permission: 'console.view' },
-      { name: 'Players', path: '/players', icon: Users, permission: 'players.view' },
-      { name: 'Plugins', path: '/plugins', icon: Puzzle, permission: 'plugins.view' },
-      { name: 'File Manager', path: '/files', icon: FolderOpen, permission: 'files.view' },
+      { name: 'Server', path: '/server', icon: 'server', permission: 'server.view' },
+      { name: 'Console', path: '/console', icon: 'terminal', permission: 'console.view' },
+      { name: 'Players', path: '/players', icon: 'users', permission: 'players.view' },
+      { name: 'Plugins', path: '/plugins', icon: 'puzzle', permission: 'plugins.view' },
+      { name: 'File manager', path: '/files', icon: 'folder-open', permission: 'files.view' },
     ],
   },
   {
-    label: 'Plugin Configs',
+    label: 'Plugin configs',
     items: [
-      { name: 'Plugin Configs', path: '/plugin-configs', icon: Puzzle, permission: null },
+      { name: 'Plugin configs', path: '/plugin-configs', icon: 'puzzle', permission: null },
     ],
   },
   {
     label: 'Operations',
     items: [
-      { name: 'Auto-Wiper', path: '/wipes', icon: RefreshCw, permission: 'wipes.view' },
-      { name: 'Maps', path: '/maps', icon: Map, permission: 'maps.view' },
-      { name: 'Schedules', path: '/schedules', icon: Clock, permission: 'schedules.view' },
+      { name: 'Wipe manager', path: '/wipes', icon: 'trash-2', permission: 'wipes.view' },
+      { name: 'Maps', path: '/maps', icon: 'map', permission: 'maps.view' },
+      { name: 'Schedules', path: '/schedules', icon: 'calendar-clock', permission: 'schedules.view' },
     ],
   },
   {
     label: 'Monitoring',
     items: [
-      { name: 'Chat Log', path: '/chat', icon: MessageSquare, permission: 'chat.view' },
-      { name: 'Analytics', path: '/analytics', icon: BarChart3, permission: 'analytics.view' },
-      { name: 'Alerts', path: '/alerts', icon: AlertTriangle, permission: 'alerts.view' },
-      { name: 'Notifications', path: '/notifications', icon: Bell, permission: 'notifications.view' },
+      { name: 'Chat log', path: '/chat', icon: 'message-square', permission: 'chat.view' },
+      { name: 'Analytics', path: '/analytics', icon: 'bar-chart-3', permission: 'analytics.view' },
+      { name: 'Alerts', path: '/alerts', icon: 'triangle-alert', permission: 'alerts.view' },
+      { name: 'Notifications', path: '/notifications', icon: 'bell', permission: 'notifications.view' },
     ],
   },
   {
     label: 'Management',
     items: [
-      { name: 'Team', path: '/team', icon: UserPlus, permission: null },
-      { name: 'Store', path: '/store/config', icon: ShoppingBag, permission: 'store.view' },
-      { name: 'Modules', path: '/modules', icon: Package, permission: 'modules.view' },
-      { name: 'Changelog', path: '/changelog', icon: FileText, permission: 'changelog.view' },
-      { name: 'Settings', path: '/settings', icon: Settings, permission: 'settings.view' },
+      { name: 'Team', path: '/team', icon: 'users', permission: null },
+      { name: 'Store', path: '/store/config', icon: 'shopping-cart', permission: 'store.view' },
+      { name: 'Modules', path: '/modules', icon: 'layers', permission: 'modules.view' },
+      { name: 'Changelog', path: '/changelog', icon: 'file-text', permission: 'changelog.view' },
+      { name: 'Settings', path: '/settings', icon: 'settings', permission: 'settings.view' },
     ],
   },
 ]
 
 const adminNavItems = [
-  { name: 'Admin Home', path: '/admin', icon: Shield },
-  { name: 'Licenses', path: '/admin/licenses', icon: Key },
-  { name: 'Subscriptions', path: '/admin/subscriptions', icon: CreditCard },
-  { name: 'Users', path: '/admin/users', icon: Users },
-  { name: 'Server Fleet', path: '/admin/servers', icon: Network },
+  { name: 'Admin home', path: '/admin', icon: 'shield' },
+  { name: 'Licenses', path: '/admin/licenses', icon: 'key' },
+  { name: 'Subscriptions', path: '/admin/subscriptions', icon: 'credit-card' },
+  { name: 'Users', path: '/admin/users', icon: 'users' },
+  { name: 'Server fleet', path: '/admin/servers', icon: 'server' },
 ]
 
 function isActive(path: string): boolean {
@@ -105,16 +122,12 @@ function isActive(path: string): boolean {
   return route.path.startsWith(path)
 }
 
-function handleLogout() {
-  auth.logout()
-  router.push('/login')
+function navigate(path: string) {
+  router.push(path)
+  closeSidebar()
 }
 
-function closeSidebar() {
-  sidebarOpen.value = false
-}
-
-function canShowNavItem(item: NavItem): boolean {
+function canShowNavItem(item: NavItemDef): boolean {
   if (!item.permission) return true
   return auth.hasPermission(item.permission)
 }
@@ -122,134 +135,486 @@ function canShowNavItem(item: NavItem): boolean {
 function hasVisibleItems(section: NavSection): boolean {
   return section.items.some(canShowNavItem)
 }
+
+// ---- Agent health ----
+const agentTone = computed(() => {
+  const cs = server.connection?.connection_status
+  if (cs === 'connected') return 'online' as const
+  if (cs === 'degraded') return 'warn' as const
+  return 'offline' as const
+})
+const agentLabel = computed(() => {
+  const cs = server.connection?.connection_status
+  if (cs === 'connected') return 'Healthy'
+  if (cs === 'degraded') return 'Degraded'
+  return 'Offline'
+})
+const agentName = computed(() => {
+  const ip = server.connection?.server_ip
+  return ip ?? 'asgard-01'
+})
+
+// ---- Topbar ----
+const serverName = computed(() => auth.license?.server_name ?? 'Your servers')
+const userName = computed(() => auth.user?.username ?? '')
+const themeIcon = computed(() => theme.value === 'dark' ? 'sun' : 'moon')
+
+// ---- Import computed from vue (missed above) ----
+import { computed } from 'vue'
 </script>
 
 <template>
-  <div class="flex h-screen bg-neutral-950">
-    <!-- Mobile Hamburger -->
-    <button
-      @click="sidebarOpen = true"
-      class="md:hidden fixed top-4 left-4 z-40 p-2 bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-300 hover:text-oxide-400 transition-colors"
-    >
-      <Menu class="w-5 h-5" />
-    </button>
-
-    <!-- Sidebar Overlay (Mobile) -->
+  <!-- Outer app grid: sidebar | main -->
+  <div class="app">
+    <!-- ===================================================== SIDEBAR ===== -->
+    <!-- Mobile overlay -->
     <div
       v-if="sidebarOpen"
+      class="sidebar-overlay"
       @click="closeSidebar"
-      class="md:hidden fixed inset-0 bg-black/50 z-40"
     />
 
-    <!-- Sidebar -->
     <aside
-      class="w-64 bg-neutral-900 border-r border-neutral-800 flex flex-col fixed inset-y-0 left-0 z-50 transform transition-transform"
-      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
+      class="app__sidebar"
+      :class="sidebarOpen ? 'app__sidebar--open' : ''"
     >
-      <!-- Logo -->
-      <div class="p-4 border-b border-neutral-800">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
-            <div>
-              <h1 class="text-sm font-bold text-oxide-500 tracking-wider">CORROSION</h1>
-              <p class="text-xs text-neutral-500">{{ auth.license?.server_name || 'Server Management' }}</p>
-            </div>
-          </div>
-          <button
-            @click="closeSidebar"
-            class="md:hidden text-neutral-400 hover:text-neutral-200 transition-colors"
-          >
-            <X class="w-5 h-5" />
-          </button>
-        </div>
+      <!-- Brand -->
+      <div class="side__brand">
+        <Logo :size="22" />
+        <Badge tone="neutral" :mono="true" class="side__ver">{{ APP_VERSION }}</Badge>
       </div>
 
-      <!-- Server Status Indicator -->
-      <div class="px-4 py-3 border-b border-neutral-800">
-        <div class="flex items-center gap-2">
-          <div
-            class="w-2 h-2 rounded-full"
-            :class="{
-              'bg-green-500': server.connection?.connection_status === 'connected',
-              'bg-yellow-500': server.connection?.connection_status === 'degraded',
-              'bg-red-500': server.connection?.connection_status === 'offline' || !server.connection,
-            }"
-          />
-          <span class="text-sm text-neutral-400">
-            {{ server.stats?.player_count ?? 0 }}/{{ server.stats?.max_players ?? 0 }} players
-          </span>
+      <!-- Active game switcher -->
+      <div class="side__game">
+        <div class="t-eyebrow side__lbl">
+          Active game · {{ GAME_LABEL[activeGame] ?? 'All games' }}
         </div>
+        <GameSwitcher
+          :model-value="activeGame"
+          :games="GAME_OPTIONS"
+          :show-labels="false"
+          @update:model-value="onActiveGame"
+        />
       </div>
 
       <!-- Navigation -->
-      <nav class="flex-1 overflow-y-auto py-2">
+      <nav class="side__nav">
         <template v-for="section in navSections" :key="section.label">
           <template v-if="hasVisibleItems(section)">
-            <!-- Section Header -->
-            <div v-if="section.label" class="mt-4 mb-1 px-4">
-              <span class="text-[10px] font-semibold uppercase tracking-widest text-neutral-500">{{ section.label }}</span>
+            <div class="side__sec">
+              <div v-if="section.label" class="t-eyebrow side__lbl">{{ section.label }}</div>
+              <NavItem
+                v-for="item in section.items"
+                v-show="canShowNavItem(item)"
+                :key="item.path"
+                :icon="item.icon"
+                :label="item.name"
+                :active="isActive(item.path)"
+                @click="navigate(item.path)"
+              />
             </div>
-
-            <!-- Section Items -->
-            <RouterLink
-              v-for="item in section.items"
-              v-show="canShowNavItem(item)"
-              :key="item.path"
-              :to="item.path"
-              @click="closeSidebar"
-              class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
-              :class="isActive(item.path)
-                ? 'bg-oxide-500/10 text-oxide-400'
-                : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
-            >
-              <component :is="item.icon" class="w-4 h-4" />
-              {{ item.name }}
-            </RouterLink>
           </template>
         </template>
 
-        <!-- Platform Admin Section (super-admin only) -->
-        <template v-if="auth.isSuperAdmin">
-          <div class="mt-4 mb-1 px-4">
-            <span class="text-[10px] font-semibold uppercase tracking-widest text-oxide-500">Platform</span>
-          </div>
-          <RouterLink
+        <!-- Platform admin section (super-admin only) -->
+        <div v-if="auth.isSuperAdmin" class="side__sec">
+          <div class="t-eyebrow side__lbl side__lbl--platform">Platform</div>
+          <NavItem
             v-for="item in adminNavItems"
             :key="item.path"
-            :to="item.path"
-            @click="closeSidebar"
-            class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
-            :class="isActive(item.path)
-              ? 'bg-oxide-500/10 text-oxide-400'
-              : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
-          >
-            <component :is="item.icon" class="w-4 h-4" />
-            {{ item.name }}
-          </RouterLink>
-        </template>
+            :icon="item.icon"
+            :label="item.name"
+            :active="isActive(item.path)"
+            @click="navigate(item.path)"
+          />
+        </div>
       </nav>
 
-      <!-- User -->
-      <div class="p-4 border-t border-neutral-800">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm text-neutral-300">{{ auth.user?.username }}</p>
-            <p class="text-xs text-neutral-500">{{ auth.user?.email }}</p>
+      <!-- Agent health footer -->
+      <div class="side__foot">
+        <div class="agent">
+          <div class="agent__row">
+            <StatusDot :tone="agentTone" :pulse="agentTone === 'online'" />
+            <span class="agent__name">{{ agentName }}</span>
+            <Badge :tone="agentTone" size="md">{{ agentLabel }}</Badge>
           </div>
+          <div class="agent__meta">
+            Agent v{{ APP_VERSION }}
+            <template v-if="server.stats"> · {{ server.stats.player_count }}/{{ server.stats.max_players }} players</template>
+          </div>
+        </div>
+        <!-- User / logout row -->
+        <div class="side__user">
+          <span class="side__user-name">{{ auth.user?.username ?? '' }}</span>
           <button
-            @click="handleLogout"
-            class="text-neutral-500 hover:text-oxide-400 transition-colors"
+            type="button"
+            class="side__logout"
+            title="Sign out"
+            @click="() => { auth.logout(); router.push('/login') }"
           >
-            <LogOut class="w-4 h-4" />
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
+            </svg>
           </button>
         </div>
       </div>
     </aside>
 
-    <!-- Main Content (offset by sidebar width on desktop) -->
-    <main class="flex-1 overflow-y-auto md:pl-64">
-      <RouterView />
-    </main>
+    <!-- ======================================================= MAIN ===== -->
+    <div class="app__main">
+      <!-- Topbar -->
+      <header class="app__topbar">
+        <!-- Mobile hamburger (left of topbar on small screens) -->
+        <button
+          class="topbar-hamburger"
+          type="button"
+          aria-label="Open navigation"
+          @click="sidebarOpen = true"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+        </button>
+
+        <!-- Breadcrumb -->
+        <div class="top__crumbs">
+          <span class="crumb">Corrosion</span>
+          <span class="crumb__sep">/</span>
+          <span class="crumb crumb--cluster">{{ serverName }}</span>
+        </div>
+
+        <!-- Search -->
+        <div class="top__search">
+          <svg class="top__search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
+          </svg>
+          <input placeholder="Search servers, players, configs…" readonly />
+          <span class="top__kbd">
+            <kbd class="cc-kbd">⌘</kbd><kbd class="cc-kbd">K</kbd>
+          </span>
+        </div>
+
+        <!-- Actions -->
+        <div class="top__actions">
+          <IconButton
+            :icon="themeIcon"
+            label="Toggle theme"
+            @click="toggleTheme"
+          />
+          <IconButton icon="bell" label="Alerts" @click="router.push('/alerts')" />
+          <Button size="sm" icon="rocket">Deploy server</Button>
+          <Avatar
+            :name="userName"
+            :size="30"
+            status="online"
+          />
+        </div>
+      </header>
+
+      <!-- Page content -->
+      <main class="app__content">
+        <RouterView />
+      </main>
+    </div>
   </div>
 </template>
+
+<style>
+/* ============================================================ SHELL ===== */
+html, body { height: 100%; }
+body { margin: 0; overflow: hidden; }
+
+.app {
+  display: grid;
+  grid-template-columns: var(--sidebar-w, 228px) 1fr;
+  height: 100vh;
+  background: var(--surface-canvas, #0a0a0b);
+}
+
+/* ---- Sidebar ---- */
+.app__sidebar {
+  background: var(--surface-base);
+  border-right: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  z-index: 50;
+}
+
+.side__brand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 16px 12px;
+}
+
+.side__ver {
+  font-family: var(--font-mono);
+}
+
+.side__game {
+  padding: 2px 14px 13px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.side__lbl {
+  margin-bottom: 7px;
+}
+
+.side__lbl--platform {
+  color: var(--accent-text);
+}
+
+.side__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 13px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.side__sec {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.side__sec .t-eyebrow {
+  margin: 0 0 5px 10px;
+}
+
+.side__foot {
+  padding: 11px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.agent {
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 9px 11px;
+}
+
+.agent__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent__name {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.agent__meta {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 5px;
+  padding-left: 16px;
+}
+
+.side__user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  padding: 4px 2px 0;
+}
+
+.side__user-name {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.side__logout {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  flex: none;
+}
+.side__logout:hover { background: var(--surface-hover); color: var(--text-primary); }
+
+/* ---- Main ---- */
+.app__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.app__topbar {
+  height: var(--topbar-h, 52px);
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-base);
+}
+
+.top__crumbs {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  font-size: var(--text-sm);
+}
+
+.crumb { color: var(--text-tertiary); }
+.crumb__sep { color: var(--text-muted); }
+.crumb--cluster {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-primary);
+  font-weight: 600;
+  background: var(--surface-raised-2);
+  border: 0;
+  box-shadow: var(--ring-default);
+  height: 30px;
+  padding: 0 10px;
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+}
+
+.top__search {
+  flex: 1;
+  max-width: 440px;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: 34px;
+  padding: 0 11px;
+  background: var(--surface-inset);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  color: var(--text-tertiary);
+}
+
+.top__search-icon { flex: none; }
+
+.top__search input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  cursor: default;
+}
+
+.top__search input::placeholder { color: var(--text-muted); }
+
+.top__kbd { display: flex; gap: 3px; }
+
+.top__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.app__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 22px 24px 40px;
+}
+
+/* ---- Mobile hamburger ---- */
+.topbar-hamburger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  flex: none;
+}
+.topbar-hamburger:hover { background: var(--surface-hover); color: var(--text-primary); }
+
+/* ---- Sidebar overlay (mobile) ---- */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 49;
+}
+
+/* ---- Kbd styling ---- */
+.cc-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  background: var(--surface-active);
+  border-radius: var(--radius-xs, 3px);
+  box-shadow: var(--ring-default);
+  font-family: var(--font-sans);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  line-height: 1;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 900px) {
+  .app {
+    grid-template-columns: 1fr;
+  }
+
+  .app__sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 228px;
+    transform: translateX(-100%);
+    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .app__sidebar--open {
+    transform: translateX(0);
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .topbar-hamburger {
+    display: inline-flex;
+  }
+
+  .top__search {
+    display: none;
+  }
+}
+</style>
diff --git a/frontend/src/composables/useThemeGame.ts b/frontend/src/composables/useThemeGame.ts
new file mode 100644
index 0000000..8283bfe
--- /dev/null
+++ b/frontend/src/composables/useThemeGame.ts
@@ -0,0 +1,114 @@
+/**
+ * useThemeGame — the Corrosion design-system theming contract.
+ *
+ * Drives `data-theme` and `data-game` on <html>, the two attributes the token
+ * system keys off (see styles/tokens/colors.css + game-themes.css):
+ *   <html data-theme="dark|light" data-game="rust|dune|conan|soulmask|...">
+ *
+ * Dark is primary; Rust (Oxide Orange) is the default/brand accent.
+ *
+ * Runtime swaps add the `cc-skin-swap` class for one frame so every
+ * accent-consuming surface repaints immediately — without it Chrome leaves
+ * elements that read var(--accent) AND have a color/bg transition on the old
+ * accent until the next reflow (see styles/tokens/base.css + readme).
+ */
+import { ref, readonly } from 'vue'
+
+export type Theme = 'dark' | 'light'
+export type Game =
+  | 'rust'
+  | 'dune'
+  | 'conan'
+  | 'soulmask'
+  | 'ark'
+  | 'valheim'
+  | 'palworld'
+
+/** The fleet filter: 'all' (every game) plus each individual game. */
+export type ActiveGame = 'all' | Game
+
+const THEME_KEY = 'cc-theme'
+const GAME_KEY = 'cc-game'
+const ACTIVE_GAME_KEY = 'cc-active-game'
+
+const VALID_THEMES: readonly Theme[] = ['dark', 'light']
+const VALID_GAMES: readonly Game[] = [
+  'rust',
+  'dune',
+  'conan',
+  'soulmask',
+  'ark',
+  'valheim',
+  'palworld',
+]
+
+// Module-scope singletons so every caller shares one reactive source.
+const theme = ref<Theme>('dark')
+const game = ref<Game>('rust')
+// Fleet filter: 'all' shows every game and uses the neutral house skin (Oxide);
+// a specific game both filters the fleet AND re-skins the shell (the drill-in rule).
+const activeGame = ref<ActiveGame>('all')
+
+function apply(): void {
+  const el = document.documentElement
+  el.classList.add('cc-skin-swap')
+  el.setAttribute('data-theme', theme.value)
+  el.setAttribute('data-game', game.value)
+  // Keep Tailwind's `dark` class in sync — existing views may use `dark:` utilities.
+  el.classList.toggle('dark', theme.value === 'dark')
+  // Drop the swap guard after the paint that picked up the new accent.
+  requestAnimationFrame(() =>
+    requestAnimationFrame(() => el.classList.remove('cc-skin-swap')),
+  )
+}
+
+let initialized = false
+
+/**
+ * Read persisted prefs and apply them to <html>. Call once at app start
+ * (after a tiny inline FOUC guard in index.html has set the initial attrs).
+ */
+export function initThemeGame(): void {
+  if (initialized) return
+  const t = localStorage.getItem(THEME_KEY)
+  if (t && (VALID_THEMES as string[]).includes(t)) theme.value = t as Theme
+  const ag = localStorage.getItem(ACTIVE_GAME_KEY)
+  if (ag && (ag === 'all' || (VALID_GAMES as string[]).includes(ag))) {
+    activeGame.value = ag as ActiveGame
+  }
+  // Skin follows the filter: 'all' -> neutral house (rust/oxide), else the game.
+  game.value = activeGame.value === 'all' ? 'rust' : activeGame.value
+  apply()
+  initialized = true
+}
+
+export function useThemeGame() {
+  function setTheme(t: Theme): void {
+    theme.value = t
+    localStorage.setItem(THEME_KEY, t)
+    apply()
+  }
+  function setGame(g: Game): void {
+    game.value = g
+    localStorage.setItem(GAME_KEY, g)
+    apply()
+  }
+  function setActiveGame(g: ActiveGame): void {
+    activeGame.value = g
+    localStorage.setItem(ACTIVE_GAME_KEY, g)
+    // 'all' uses the neutral house skin (rust/oxide); a game re-skins to itself.
+    setGame(g === 'all' ? 'rust' : g)
+  }
+  function toggleTheme(): void {
+    setTheme(theme.value === 'dark' ? 'light' : 'dark')
+  }
+  return {
+    theme: readonly(theme),
+    game: readonly(game),
+    activeGame: readonly(activeGame),
+    setTheme,
+    setGame,
+    setActiveGame,
+    toggleTheme,
+  }
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index c7816df..4acb41b 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,6 +5,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { VueFinderPlugin } from 'vuefinder'
 import App from './App.vue'
 import router from './router'
+import { initThemeGame } from './composables/useThemeGame'
 import './style.css'
 import 'vuefinder/dist/vuefinder.css'
 
@@ -17,4 +18,7 @@ app.use(pinia)
 app.use(router)
 app.use(VueFinderPlugin)
 
+// Apply the design-system theming contract (data-theme/data-game on <html>).
+initThemeGame()
+
 app.mount('#app')
diff --git a/frontend/src/style.css b/frontend/src/style.css
index ea6fec3..88d6d34 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,6 +1,10 @@
 @import "tailwindcss";
+@import "./styles/corrosion.css";
 
-/* Corrosion Brand — Oxide Orange #F26622 */
+/* Tailwind utility colors — Oxide ramp (existing views use bg-oxide-*).
+   The full design-token system (neutral ramp, surfaces, per-game accents,
+   typography, spacing, elevation, motion) lives in ./styles/ and is the
+   source of truth for the redesign. */
 @theme {
   --color-oxide-50: #FEF3EB;
   --color-oxide-100: #FDE3D0;
@@ -15,7 +19,8 @@
   --color-oxide-950: #3D1506;
 }
 
-/* Dark mode is default — Rust servers run at night */
+/* Legacy brand vars — retained during the redesign port so any view still
+   referencing them keeps working; superseded by the ./styles tokens. */
 :root {
   --corrosion-accent: #F26622;
   --corrosion-dark: #000000;
@@ -24,12 +29,8 @@
   --corrosion-border: #2a2a2a;
 }
 
-body {
-  @apply bg-neutral-950 text-neutral-100 antialiased;
-  margin: 0;
-  min-height: 100vh;
-}
-
+/* Body background / text / font now come from the design system
+   (./styles/tokens/base.css → var(--surface-canvas), var(--text-primary)). */
 #app {
   min-height: 100vh;
 }
diff --git a/frontend/src/styles/corrosion.css b/frontend/src/styles/corrosion.css
new file mode 100644
index 0000000..472b0ef
--- /dev/null
+++ b/frontend/src/styles/corrosion.css
@@ -0,0 +1,15 @@
+/* ============================================================
+   Corrosion Control — Design System
+   Root stylesheet. Consumers link THIS one file.
+   Import order matters: fonts → primitives → colors → game themes
+   → base. (base.css references color/accent tokens.)
+   ============================================================ */
+
+@import url("tokens/fonts.css");
+@import url("tokens/spacing.css");
+@import url("tokens/typography.css");
+@import url("tokens/motion.css");
+@import url("tokens/colors.css");
+@import url("tokens/game-themes.css");
+@import url("tokens/elevation.css");
+@import url("tokens/base.css");
diff --git a/frontend/src/styles/tokens/base.css b/frontend/src/styles/tokens/base.css
new file mode 100644
index 0000000..4fb95a4
--- /dev/null
+++ b/frontend/src/styles/tokens/base.css
@@ -0,0 +1,75 @@
+/* ============================================================
+   Corrosion Control — Base / Reset
+   Minimal, opinionated. Applies the token system to bare HTML so
+   specimen cards and kits inherit the look without boilerplate.
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background-color: var(--surface-canvas);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "cv01", "ss01";
+}
+
+h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
+
+a { color: inherit; text-decoration: none; }
+
+::selection {
+  background: var(--accent-soft-strong);
+  color: var(--text-primary);
+}
+
+/* Tabular numbers everywhere numbers matter */
+.tnum { font-variant-numeric: tabular-nums; }
+
+/* Custom scrollbars — quiet, on-brand */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+*::-webkit-scrollbar { width: 10px; height: 10px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: var(--radius-pill);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }
+
+/* Focus-visible default */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Reduced motion guard */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ---- Skin-swap repaint guard ----
+   When flipping data-game or data-theme on the root, add the .cc-skin-swap
+   class for ONE frame. This suppresses transitions during the swap so every
+   accent-consuming surface repaints immediately — works around a Chrome
+   custom-property + transition staleness where elements that both read
+   var(--accent)/var(--accent-text) AND have a color/background transition keep
+   the old accent until the next reflow. See readme "Theming contract". */
+.cc-skin-swap *,
+.cc-skin-swap *::before,
+.cc-skin-swap *::after { transition: none !important; }
diff --git a/frontend/src/styles/tokens/colors.css b/frontend/src/styles/tokens/colors.css
new file mode 100644
index 0000000..8382fbe
--- /dev/null
+++ b/frontend/src/styles/tokens/colors.css
@@ -0,0 +1,136 @@
+/* ============================================================
+   Corrosion Control — Color System
+   ------------------------------------------------------------
+   Three layers:
+   1. Raw neutral ramp (absolute; identical in both themes)
+   2. Semantic surface / text / border tokens (flip per theme)
+   3. Status colors (online/offline/warn/info/...) — game-agnostic
+   Game ACCENT colors live in game-themes.css.
+
+   Theme + game are set together on <html>:
+     <html data-theme="dark" data-game="rust">
+   Dark is primary. Light is full-parity.
+   ============================================================ */
+
+:root {
+  /* ---- Raw neutral ramp (warm-cool slate, absolute) ---- */
+  --n-0:   #ffffff;
+  --n-25:  #fafbfc;
+  --n-50:  #f3f5f7;
+  --n-100: #e8ebef;
+  --n-150: #dce0e6;
+  --n-200: #ccd2da;
+  --n-300: #aeb6c1;
+  --n-400: #8a929e;
+  --n-500: #6b7280;
+  --n-600: #515862;
+  --n-650: #444a53;
+  --n-700: #363b43;
+  --n-750: #2b2f36;
+  --n-800: #1f2329;
+  --n-850: #181b20;
+  --n-900: #121419;
+  --n-925: #0e0f13;
+  --n-950: #0a0b0e;
+  --n-975: #060709;
+
+  /* ---- Semantic: DARK (default) ---- */
+  --surface-canvas:  var(--n-950);   /* app background */
+  --surface-sunken:  var(--n-975);   /* wells, deep insets */
+  --surface-base:    var(--n-925);   /* primary panels */
+  --surface-raised:  var(--n-850);   /* cards, rows */
+  --surface-raised-2:var(--n-800);   /* nested cards, hover cards */
+  --surface-overlay: var(--n-800);   /* menus, popovers, dialogs */
+  --surface-inset:   #07080a;        /* inputs, console, code */
+  --surface-hover:   rgba(255, 255, 255, 0.045);
+  --surface-active:  rgba(255, 255, 255, 0.075);
+  --surface-selected:rgba(255, 255, 255, 0.06);
+
+  --border-subtle:   rgba(255, 255, 255, 0.06);
+  --border-default:  rgba(255, 255, 255, 0.10);
+  --border-strong:   rgba(255, 255, 255, 0.16);
+
+  --text-primary:    #f2f4f7;
+  --text-secondary:  #aeb4bf;
+  --text-tertiary:   #767d89;
+  --text-muted:      #565d68;
+  --text-inverse:    #0a0b0e;
+  --text-on-accent:  var(--accent-contrast);
+
+  /* Scrim for modals / image overlays */
+  --scrim: rgba(4, 5, 7, 0.66);
+
+  /* ---- Status / semantic (consistent across themes) ---- */
+  --status-online:        #36c780;
+  --status-online-soft:   rgba(54, 199, 128, 0.14);
+  --status-online-border: rgba(54, 199, 128, 0.38);
+
+  --status-offline:        #e5484d;
+  --status-offline-soft:   rgba(229, 72, 77, 0.14);
+  --status-offline-border: rgba(229, 72, 77, 0.40);
+
+  --status-warn:        #e8a33c;
+  --status-warn-soft:   rgba(232, 163, 60, 0.15);
+  --status-warn-border: rgba(232, 163, 60, 0.40);
+
+  --status-info:        #4c8df0;
+  --status-info-soft:   rgba(76, 141, 240, 0.15);
+  --status-info-border: rgba(76, 141, 240, 0.40);
+
+  --status-starting:        #2bc2d4;  /* booting / updating / restarting */
+  --status-starting-soft:   rgba(43, 194, 212, 0.15);
+  --status-starting-border: rgba(43, 194, 212, 0.40);
+
+  --status-wiping:        #9b7bf0;    /* Rust map wipe / maintenance */
+  --status-wiping-soft:   rgba(155, 123, 240, 0.16);
+  --status-wiping-border: rgba(155, 123, 240, 0.40);
+
+  /* Aliases used by components */
+  --success: var(--status-online);
+  --danger:  var(--status-offline);
+  --warning: var(--status-warn);
+  --info:    var(--status-info);
+
+  /* Data-viz categorical (ECharts-friendly) */
+  --viz-1: var(--accent);
+  --viz-2: #4c8df0;
+  --viz-3: #36c780;
+  --viz-4: #9b7bf0;
+  --viz-5: #2bc2d4;
+  --viz-6: #e8a33c;
+  --viz-grid: var(--border-subtle);
+}
+
+/* ---- Semantic: LIGHT (full parity) ---- */
+[data-theme="light"] {
+  --surface-canvas:  #f5f6f8;
+  --surface-sunken:  #eceef1;
+  --surface-base:    #ffffff;
+  --surface-raised:  #ffffff;
+  --surface-raised-2:#fbfcfd;
+  --surface-overlay: #ffffff;
+  --surface-inset:   #f1f3f5;
+  --surface-hover:   rgba(12, 16, 22, 0.04);
+  --surface-active:  rgba(12, 16, 22, 0.07);
+  --surface-selected:rgba(12, 16, 22, 0.05);
+
+  --border-subtle:   rgba(12, 16, 22, 0.07);
+  --border-default:  rgba(12, 16, 22, 0.12);
+  --border-strong:   rgba(12, 16, 22, 0.20);
+
+  --text-primary:    #14171c;
+  --text-secondary:  #474e58;
+  --text-tertiary:   #6b727e;
+  --text-muted:      #969ca6;
+  --text-inverse:    #ffffff;
+
+  --scrim: rgba(16, 20, 28, 0.45);
+
+  /* Status soft fills need a touch more alpha on light */
+  --status-online-soft:   rgba(33, 160, 98, 0.12);
+  --status-offline-soft:  rgba(206, 44, 49, 0.10);
+  --status-warn-soft:     rgba(193, 124, 18, 0.13);
+  --status-info-soft:     rgba(43, 105, 214, 0.10);
+  --status-starting-soft: rgba(18, 150, 168, 0.12);
+  --status-wiping-soft:   rgba(118, 86, 214, 0.12);
+}
diff --git a/frontend/src/styles/tokens/elevation.css b/frontend/src/styles/tokens/elevation.css
new file mode 100644
index 0000000..1583765
--- /dev/null
+++ b/frontend/src/styles/tokens/elevation.css
@@ -0,0 +1,40 @@
+/* ============================================================
+   Corrosion Control — Elevation, Borders, Glows
+   Shadows are quiet on dark surfaces; depth comes from layered
+   fills + hairline borders. Accent "glow" is reserved for
+   active/live states and game-themed focus.
+   ============================================================ */
+
+:root {
+  /* Hairline rings (use as box-shadow inset or border) */
+  --ring-subtle: inset 0 0 0 1px var(--border-subtle);
+  --ring-default: inset 0 0 0 1px var(--border-default);
+  --ring-strong: inset 0 0 0 1px var(--border-strong);
+
+  /* Drop shadows — tuned for dark; subtle and tight */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40);
+  --shadow-md: 0 6px 18px -4px rgba(0, 0, 0, 0.50);
+  --shadow-lg: 0 18px 40px -10px rgba(0, 0, 0, 0.60);
+  --shadow-xl: 0 32px 70px -16px rgba(0, 0, 0, 0.70);
+
+  /* Popover / menu — combines ring + drop for crisp edges on dark */
+  --shadow-pop: 0 0 0 1px var(--border-default), 0 12px 36px -8px rgba(0, 0, 0, 0.66);
+
+  /* Accent glow — game-themed; used on live/active controls & focus */
+  --glow-accent: 0 0 0 1px var(--accent-border), 0 0 22px -2px var(--accent-glow);
+  --glow-accent-sm: 0 0 14px -2px var(--accent-glow);
+  --glow-online: 0 0 12px -1px rgba(54, 199, 128, 0.55);
+
+  /* Focus ring */
+  --focus-ring: 0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--accent);
+}
+
+[data-theme="light"] {
+  --shadow-xs: 0 1px 2px rgba(16, 20, 28, 0.06);
+  --shadow-sm: 0 2px 6px rgba(16, 20, 28, 0.08);
+  --shadow-md: 0 8px 20px -6px rgba(16, 20, 28, 0.12);
+  --shadow-lg: 0 20px 44px -12px rgba(16, 20, 28, 0.16);
+  --shadow-xl: 0 32px 70px -18px rgba(16, 20, 28, 0.20);
+  --shadow-pop: 0 0 0 1px var(--border-default), 0 14px 38px -10px rgba(16, 20, 28, 0.20);
+}
diff --git a/frontend/src/styles/tokens/fonts.css b/frontend/src/styles/tokens/fonts.css
new file mode 100644
index 0000000..5fb6020
--- /dev/null
+++ b/frontend/src/styles/tokens/fonts.css
@@ -0,0 +1,21 @@
+/* ============================================================
+   Corrosion Control — Fonts
+   Geist     — UI / body / app headings
+   JetBrains Mono — console, data, IDs, telemetry
+   Oxanium   — brand wordmark + marketing display (game-ops flavor)
+   ------------------------------------------------------------
+   NOTE: Loaded from Google Fonts CDN. If you want these self-
+   hosted (offline), send the woff2 files and these @imports
+   become @font-face rules.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Oxanium:wght@500;600;700;800&display=swap');
+
+:root {
+  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
+  /* Brand wordmark + big marketing display — squared, technical, gamey */
+  --font-brand: 'Oxanium', 'Geist', system-ui, sans-serif;
+  /* App-level display headings stay on the neutral sans */
+  --font-display: var(--font-sans);
+}
diff --git a/frontend/src/styles/tokens/game-themes.css b/frontend/src/styles/tokens/game-themes.css
new file mode 100644
index 0000000..dc3c463
--- /dev/null
+++ b/frontend/src/styles/tokens/game-themes.css
@@ -0,0 +1,150 @@
+/* ============================================================
+   Corrosion Control — Game Themes (the re-skin layer)
+   ------------------------------------------------------------
+   The shell is neutral. Each game declares an ACCENT ramp + an
+   ATMOSPHERE (backdrop hues for hero headers, login, glows).
+   Set on <html data-game="rust"> (or dune / ark / valheim / ...).
+   Default (no data-game) = Corrosion brand = Oxide Orange.
+
+   Accent contract every game must define:
+     --accent            base fill
+     --accent-hover      hover fill
+     --accent-press      pressed / darker
+     --accent-contrast   text/icon ON the accent fill
+     --accent-text       accent used AS text on dark surfaces (lightened for AA)
+     --accent-soft       low-alpha tint background
+     --accent-soft-strong
+     --accent-border     accent hairline
+     --accent-glow       glow color (box-shadow)
+     --game-label        printable name
+     --atmo-1 / --atmo-2 backdrop gradient stops
+     --atmo-haze         radial haze color
+   ============================================================ */
+
+/* ---------- Default brand / RUST — Oxide Orange #F26622 ---------- */
+:root,
+[data-game="rust"] {
+  --accent:          #f26622;
+  --accent-hover:    #ff7a38;
+  --accent-press:    #d9550f;
+  --accent-contrast: #190d05;
+  --accent-text:     #ff8a4c;
+  --accent-soft:        rgba(242, 102, 34, 0.13);
+  --accent-soft-strong: rgba(242, 102, 34, 0.22);
+  --accent-border:      rgba(242, 102, 34, 0.42);
+  --accent-glow:        rgba(242, 102, 34, 0.50);
+  --game-label: "Rust"; /* @kind other */
+  --atmo-1: #2c1206;
+  --atmo-2: #0a0b0e;
+  --atmo-haze: rgba(242, 102, 34, 0.30);
+}
+
+/* ---------- DUNE: AWAKENING — Spice Amber / desert gold ---------- */
+[data-game="dune"] {
+  --accent:          #e9a53a;
+  --accent-hover:    #f7b94f;
+  --accent-press:    #c9851f;
+  --accent-contrast: #1c1303;
+  --accent-text:     #f0bc5e;
+  --accent-soft:        rgba(233, 165, 58, 0.14);
+  --accent-soft-strong: rgba(233, 165, 58, 0.24);
+  --accent-border:      rgba(233, 165, 58, 0.44);
+  --accent-glow:        rgba(233, 165, 58, 0.46);
+  --game-label: "Dune: Awakening"; /* @kind other */
+  --atmo-1: #2c1e08;
+  --atmo-2: #0a0b0e;
+  --atmo-haze: rgba(233, 165, 58, 0.30);
+}
+
+/* ---------- SOULMASK: Ritual Jade ---------- */
+[data-game="soulmask"] {
+  --accent:          #43c47e;
+  --accent-hover:    #59d792;
+  --accent-press:    #2c9c5f;
+  --accent-contrast: #04140c;
+  --accent-text:     #63d894;
+  --accent-soft:        rgba(67, 196, 126, 0.14);
+  --accent-soft-strong: rgba(67, 196, 126, 0.24);
+  --accent-border:      rgba(67, 196, 126, 0.42);
+  --accent-glow:        rgba(67, 196, 126, 0.46);
+  --game-label: "Soulmask"; /* @kind other */
+  --atmo-1: #08231a;
+  --atmo-2: #0a0b0e;
+  --atmo-haze: rgba(67, 196, 126, 0.26);
+}
+
+/* ---------- CONAN EXILES: Hyborian Bronze ---------- */
+[data-game="conan"] {
+  --accent:          #bb7637;
+  --accent-hover:    #d28d4b;
+  --accent-press:    #985c24;
+  --accent-contrast: #160d03;
+  --accent-text:     #d59a5e;
+  --accent-soft:        rgba(187, 118, 55, 0.15);
+  --accent-soft-strong: rgba(187, 118, 55, 0.26);
+  --accent-border:      rgba(187, 118, 55, 0.44);
+  --accent-glow:        rgba(187, 118, 55, 0.46);
+  --game-label: "Conan Exiles"; /* @kind other */
+  --atmo-1: #2a1b0b;
+  --atmo-2: #0a0b0e;
+  --atmo-haze: rgba(187, 118, 55, 0.30);
+}
+
+/* ---------- Room to add more (stubs, ready to ship) ---------- */
+[data-game="ark"] {
+  --accent:          #36c2a8;
+  --accent-hover:    #4ad7bd;
+  --accent-press:    #1f9c86;
+  --accent-contrast: #04140f;
+  --accent-text:     #54dcc2;
+  --accent-soft:        rgba(54, 194, 168, 0.14);
+  --accent-soft-strong: rgba(54, 194, 168, 0.24);
+  --accent-border:      rgba(54, 194, 168, 0.42);
+  --accent-glow:        rgba(54, 194, 168, 0.46);
+  --game-label: "ARK"; /* @kind other */
+  --atmo-1: #07241f;
+  --atmo-2: #0a0b0e;
+  --atmo-haze: rgba(54, 194, 168, 0.26);
+}
+
+[data-game="valheim"] {
+  --accent:          #5b9bf0;
+  --accent-hover:    #74afff;
+  --accent-press:    #3c7ad4;
+  --accent-contrast: #050d1a;
+  --accent-text:     #7fb2ff;
+  --accent-soft:        rgba(91, 155, 240, 0.14);
+  --accent-soft-strong: rgba(91, 155, 240, 0.24);
+  --accent-border:      rgba(91, 155, 240, 0.42);
+  --accent-glow:        rgba(91, 155, 240, 0.46);
+  --game-label: "Valheim"; /* @kind other */
+  --atmo-1: #0a1c2e;
+  --atmo-2: #0a0b0e;
+  --atmo-haze: rgba(91, 155, 240, 0.26);
+}
+
+[data-game="palworld"] {
+  --accent:          #58b6e8;
+  --accent-hover:    #71c8f6;
+  --accent-press:    #3a92c4;
+  --accent-contrast: #04121b;
+  --accent-text:     #7fcaf2;
+  --accent-soft:        rgba(88, 182, 232, 0.14);
+  --accent-soft-strong: rgba(88, 182, 232, 0.24);
+  --accent-border:      rgba(88, 182, 232, 0.42);
+  --accent-glow:        rgba(88, 182, 232, 0.46);
+  --game-label: "Palworld"; /* @kind other */
+  --atmo-1: #08222e;
+  --atmo-2: #0a0b0e;
+  --atmo-haze: rgba(88, 182, 232, 0.26);
+}
+
+/* ---------- Light-theme accent legibility ----------
+   On light surfaces, accent-as-text reads better at the pressed
+   (darker) value. Placed last so it wins for --accent-text when
+   data-theme="light" and data-game=* are both on <html>. */
+[data-theme="light"] {
+  --accent-text: var(--accent-press);
+  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-soft-strong: color-mix(in srgb, var(--accent) 20%, transparent);
+}
diff --git a/frontend/src/styles/tokens/motion.css b/frontend/src/styles/tokens/motion.css
new file mode 100644
index 0000000..127ed7c
--- /dev/null
+++ b/frontend/src/styles/tokens/motion.css
@@ -0,0 +1,27 @@
+/* ============================================================
+   Corrosion Control — Motion
+   Fast, mechanical, precise. No bounce on chrome. Subtle spring
+   reserved for "live" telemetry (pulses, meters). Respect
+   prefers-reduced-motion in components.
+   ============================================================ */
+
+:root {
+  --dur-instant: 80ms;  /* @kind other */
+  --dur-fast: 120ms;    /* @kind other */
+  --dur-base: 170ms;    /* @kind other */
+  --dur-slow: 240ms;    /* @kind other */
+  --dur-slower: 360ms;  /* @kind other */
+
+  /* Easings */
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);        /* @kind other */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* @kind other */
+  --ease-in: cubic-bezier(0.5, 0, 0.84, 0);           /* @kind other */
+  --ease-emphasized: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */
+
+  /* Common transition bundles */
+  --transition-colors: color var(--dur-fast) var(--ease-standard),
+    background-color var(--dur-fast) var(--ease-standard),
+    border-color var(--dur-fast) var(--ease-standard),
+    box-shadow var(--dur-fast) var(--ease-standard);
+  --transition-transform: transform var(--dur-base) var(--ease-out);
+}
diff --git a/frontend/src/styles/tokens/spacing.css b/frontend/src/styles/tokens/spacing.css
new file mode 100644
index 0000000..e3daa47
--- /dev/null
+++ b/frontend/src/styles/tokens/spacing.css
@@ -0,0 +1,50 @@
+/* ============================================================
+   Corrosion Control — Spacing, Radius, Sizing
+   Dense ops-cockpit scale. 4px base grid, tightened.
+   ============================================================ */
+
+:root {
+  /* Space scale (px) — used for padding, gap, margins */
+  --space-0: 0;
+  --space-px: 1px;
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-1-5: 6px;
+  --space-2: 8px;
+  --space-2-5: 10px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-14: 56px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+
+  /* Radius — small & technical; cards stay crisp, not rounded-blobby */
+  --radius-xs: 3px;
+  --radius-sm: 5px;
+  --radius-md: 7px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --radius-pill: 999px;
+
+  /* Control heights — compact rows for data-dense UI */
+  --control-h-xs: 24px;
+  --control-h-sm: 30px;
+  --control-h-md: 36px;
+  --control-h-lg: 44px;
+
+  /* Layout primitives */
+  --sidebar-w: 248px;
+  --sidebar-w-collapsed: 64px;
+  --topbar-h: 56px;
+  --content-max: 1440px;
+  --container-pad: var(--space-6);
+}
diff --git a/frontend/src/styles/tokens/typography.css b/frontend/src/styles/tokens/typography.css
new file mode 100644
index 0000000..81c8b66
--- /dev/null
+++ b/frontend/src/styles/tokens/typography.css
@@ -0,0 +1,75 @@
+/* ============================================================
+   Corrosion Control — Typography
+   Geist for UI & display; JetBrains Mono for telemetry, IDs,
+   console, and any numeric/code data. Dense reading sizes.
+   ============================================================ */
+
+:root {
+  /* Font sizes (px) — base UI is 14 (dense) */
+  --text-2xs: 11px;
+  --text-xs: 12px;
+  --text-sm: 13px;
+  --text-base: 14px;
+  --text-md: 15px;
+  --text-lg: 17px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 38px;
+  --text-5xl: 50px;
+  --text-6xl: 66px;
+  --text-7xl: 88px;
+
+  /* Line heights */
+  --leading-none: 1;
+  --leading-tight: 1.15;
+  --leading-snug: 1.3;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
+
+  /* Weights */
+  --weight-light: 300;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-black: 800;
+
+  /* Letter spacing */
+  --tracking-tighter: -0.03em;
+  --tracking-tight: -0.015em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+  --tracking-wider: 0.06em;
+  --tracking-caps: 0.10em;   /* eyebrows / overlines / labels */
+
+  /* ---- Semantic roles (font shorthands via custom props) ---- */
+  --font-display: var(--font-sans);
+}
+
+/* ---- Optional helper classes (cards/kits can use these) ---- */
+.t-display {
+  font-family: var(--font-display);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--tracking-tight);
+  line-height: var(--leading-tight);
+}
+.t-eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+.t-mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--tracking-normal);
+}
+.t-metric {
+  font-family: var(--font-mono);
+  font-weight: var(--weight-semibold);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--tracking-tight);
+}
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index e6a95ef..a59023a 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -1,155 +1,497 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+/**
+ * DashboardView — Fleet / Solo dashboard.
+ * Fleet:  multi-game server cockpit (representative mock data — pending multi-instance backend).
+ * Solo:   single-server detail wired to the real useServerStore where data exists.
+ *
+ * View toggle (Fleet / Solo) lives inside the page so the shell (DashboardLayout) stays clean.
+ * Routing stays at path '/', no new routes added.
+ */
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
 import { useServerStore } from '@/stores/server'
-import { useWipeStore } from '@/stores/wipe'
+import { useThemeGame } from '@/composables/useThemeGame'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import ServerCard from '@/components/ds/data/ServerCard.vue'
+import ConsoleLine from '@/components/ds/data/ConsoleLine.vue'
+import ResourceMeter from '@/components/ds/data/ResourceMeter.vue'
+import PlayersChart from '@/components/ds/data/PlayersChart.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import {
+  MOCK_SERVERS, MOCK_FEED, MOCK_WIPES, buildStats,
+  type MockServer, type GameKey,
+} from './_dashboardMock'
 
-const router = useRouter()
-const auth = useAuthStore()
+// ---- Stores / composables ----
 const server = useServerStore()
-const wipe = useWipeStore()
+const router = useRouter()
+const { activeGame } = useThemeGame()
 
-onMounted(async () => {
-  server.fetchServer()
-  try {
-    await wipe.fetchSchedules()
-  } catch {
-    // Non-critical — dashboard still loads without wipe data
-  }
-})
+// ---- View toggle ----
+const VIEW_KEY = 'cc-dash-view'
+const view = ref<'fleet' | 'solo'>((localStorage.getItem(VIEW_KEY) as 'fleet' | 'solo') ?? 'fleet')
+function setView(v: string) {
+  view.value = v as 'fleet' | 'solo'
+  localStorage.setItem(VIEW_KEY, v)
+}
 
-const nextWipeDate = computed<string>(() => {
-  const upcoming = wipe.schedules
-    .filter(s => s.is_active && s.next_scheduled_run)
-    .map(s => new Date(s.next_scheduled_run!))
-    .sort((a, b) => a.getTime() - b.getTime())
+const viewItems = [
+  { value: 'fleet', label: 'Fleet', icon: 'layout-grid' },
+  { value: 'solo', label: 'Solo', icon: 'square-dashed' },
+]
 
-  if (upcoming.length === 0) return 'Not Scheduled'
+// ---- Fleet: filter servers by activeGame ----
+const serverStatus = ref<'all' | 'online' | 'offline'>('all')
+const statusItems = computed(() => [
+  { value: 'all', label: 'All', count: inGame.value.length },
+  { value: 'online', label: 'Running', count: inGame.value.filter((s) => s.status !== 'offline').length },
+  { value: 'offline', label: 'Stopped', count: inGame.value.filter((s) => s.status === 'offline').length },
+])
 
-  return upcoming[0]!.toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
+const GAME_LABEL: Record<string, string> = { rust: 'Rust', dune: 'Dune', conan: 'Conan Exiles', soulmask: 'Soulmask' }
+
+const inGame = computed<MockServer[]>(() =>
+  activeGame.value === 'all'
+    ? MOCK_SERVERS
+    : MOCK_SERVERS.filter((s) => s.game === (activeGame.value as GameKey)),
+)
+
+const shownServers = computed<MockServer[]>(() => {
+  const sv = serverStatus.value
+  return inGame.value.filter((s) => {
+    if (sv === 'all') return true
+    if (sv === 'online') return s.status !== 'offline'
+    return s.status === 'offline'
   })
 })
 
-function statusColor(status: string | undefined): string {
-  switch (status) {
-    case 'connected': return 'bg-green-500'
-    case 'degraded': return 'bg-yellow-500'
-    default: return 'bg-red-500'
+// ---- Fleet KPIs ----
+const runningCount = computed(() => inGame.value.filter((s) => s.status !== 'offline').length)
+const playersCur = computed(() => inGame.value.reduce((a, s) => a + (s.players?.cur ?? 0), 0))
+const playersMax = computed(() => inGame.value.reduce((a, s) => a + (s.players?.max ?? 0), 0))
+const cpuValues = computed(() => inGame.value.filter((s) => s.cpu != null).map((s) => s.cpu as number))
+const avgCpu = computed<string>(() =>
+  cpuValues.value.length
+    ? String(Math.round(cpuValues.value.reduce((a, b) => a + b, 0) / cpuValues.value.length))
+    : '—',
+)
+
+const scopeLabel = computed(() =>
+  activeGame.value === 'all'
+    ? 'Fleet overview'
+    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} fleet`,
+)
+
+const fleetTitle = computed(() => {
+  if (activeGame.value === 'all') {
+    const games = new Set(MOCK_SERVERS.map((s) => s.game)).size
+    return `${MOCK_SERVERS.length} servers · ${games} games`
   }
+  const n = inGame.value.length
+  const label = GAME_LABEL[activeGame.value as string] ?? activeGame.value
+  return `${n} ${label} server${n === 1 ? '' : 's'}`
+})
+
+const chartSubtitle = computed(() =>
+  activeGame.value === 'all'
+    ? 'All servers · last 24 hours'
+    : `${GAME_LABEL[activeGame.value as string] ?? activeGame.value} servers · last 24 hours`,
+)
+
+// ---- Chart period toggle ----
+const chartPeriod = ref('24h')
+const periodItems = [
+  { value: '24h', label: '24h' },
+  { value: '7d', label: '7d' },
+  { value: '30d', label: '30d' },
+]
+
+// ---- Solo: real store data + representative fallbacks ----
+const soloName = computed(() => server.config?.server_name ?? 'Main · 2x Vanilla')
+const soloPlayers = computed(() => server.stats?.player_count ?? 0)
+const soloMaxPlayers = computed(() => server.stats?.max_players ?? server.config?.max_players ?? 200)
+const soloFps = computed(() => server.stats?.fps ?? 59.8)
+// Memory: store gives memory_usage_mb (no max), use 8192 MB representative max for %
+const soloRamMb = computed(() => server.stats?.memory_usage_mb ?? 0)
+const soloRamPct = computed(() => soloRamMb.value > 0 ? Math.round((soloRamMb.value / 8192) * 100) : 68)
+const soloRamSub = computed(() => soloRamMb.value > 0 ? `${(soloRamMb.value / 1024).toFixed(1)} / 8 GB` : '5.4 / 8 GB')
+// CPU: not in ServerStats; use representative value
+const soloCpuPct = 41
+// Status badge derived from connection_status
+const soloStatus = computed<'online' | 'offline' | 'starting' | 'wiping'>(() => {
+  const cs = server.connection?.connection_status
+  if (cs === 'connected') return 'online'
+  if (cs === 'degraded') return 'starting'
+  return 'offline'
+})
+const soloStatusTone = computed<'online' | 'offline' | 'starting' | 'warn'>(() => {
+  if (soloStatus.value === 'online') return 'online'
+  if (soloStatus.value === 'starting') return 'warn'
+  return 'offline'
+})
+const soloStatusLabel = computed(() => {
+  if (soloStatus.value === 'online') return 'Online'
+  if (soloStatus.value === 'starting') return 'Degraded'
+  return 'Offline'
+})
+const soloRegion = computed(() => {
+  const ip = server.connection?.server_ip
+  return ip ? 'Bare metal' : 'US-East'
+})
+const soloIp = computed(() => {
+  const ip = server.connection?.server_ip
+  const port = server.connection?.game_port ?? server.connection?.server_port
+  if (ip && port) return `${ip}:${port}`
+  return '89.142.0.7:28015'
+})
+const soloUptime = computed(() => {
+  const sec = server.stats?.uptime_seconds ?? 0
+  if (sec === 0) return '—'
+  const d = Math.floor(sec / 86400)
+  const h = Math.floor((sec % 86400) / 3600)
+  return `${d}d ${h}h`
+})
+
+// Representative plugin list (uMod plugin state not in backend store)
+const pluginStates = ref([
+  { name: 'RaidableBases', ver: '2.7.4', on: true },
+  { name: 'Kits', ver: '4.3.1', on: true },
+  { name: 'CorrosionTeleportGUI', ver: '1.2.0', on: true },
+  { name: 'Economics', ver: '3.9.6', on: true },
+  { name: 'ZLevels Remastered', ver: '3.2.0', on: false },
+])
+
+// Console input
+const consoleInput = ref('')
+
+function sendConsoleCommand() {
+  if (!consoleInput.value.trim()) return
+  server.sendCommand(consoleInput.value.trim()).catch(() => {})
+  consoleInput.value = ''
 }
 
-function statusLabel(status: string | undefined): string {
-  switch (status) {
-    case 'connected': return 'Online'
-    case 'degraded': return 'Degraded'
-    default: return 'Offline'
-  }
-}
+// Navigation helpers
+function navConsole() { router.push('/console') }
+function navWipes()   { router.push('/wipes') }
 
-function formatUptime(seconds: number | undefined): string {
-  if (!seconds) return '\u2014'
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  if (h > 0) return `${h}h ${m}m`
-  return `${m}m`
-}
+// ---- Lifecycle ----
+onMounted(() => {
+  server.fetchServer()
+})
 </script>
 
 <template>
-  <div class="p-6 space-y-8">
-    <!-- Welcome header -->
-    <div>
-      <h1 class="text-2xl font-bold text-neutral-100">
-        Welcome back, {{ auth.user?.username }}
-      </h1>
-      <p class="text-sm text-neutral-500 mt-1">Here's what's happening with your server.</p>
-    </div>
-
-    <!-- Stat cards grid -->
-    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-      <!-- Server Status -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Server Status</p>
-        <div class="flex items-center gap-2">
-          <span class="h-2.5 w-2.5 rounded-full" :class="statusColor(server.connection?.connection_status)"></span>
-          <span class="text-2xl font-bold text-neutral-100">{{ statusLabel(server.connection?.connection_status) }}</span>
-        </div>
-      </div>
-
-      <!-- Players Online -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Players Online</p>
-        <p class="text-2xl font-bold text-neutral-100">
-          {{ server.stats?.player_count ?? 0 }}/{{ server.stats?.max_players ?? server.config?.max_players ?? 0 }}
-        </p>
-      </div>
-
-      <!-- Next Wipe -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Next Wipe</p>
-        <p class="text-2xl font-bold text-neutral-100">{{ nextWipeDate }}</p>
-      </div>
-
-      <!-- Uptime -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <p class="text-sm text-neutral-400 mb-2">Uptime</p>
-        <p class="text-2xl font-bold text-neutral-100">{{ formatUptime(server.stats?.uptime_seconds) }}</p>
-      </div>
-    </div>
-
-    <!-- Quick Actions -->
-    <div>
-      <h2 class="text-lg font-semibold text-neutral-200 mb-4">Quick Actions</h2>
-      <div class="flex flex-wrap gap-3">
-        <button
-          :disabled="server.connection?.connection_status === 'connected'"
-          @click="server.startServer()"
-          class="px-4 py-2.5 bg-green-600/20 hover:bg-green-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-green-400 border border-green-600/30 rounded-lg text-sm font-medium transition-colors"
-        >
-          Start Server
-        </button>
-        <button
-          :disabled="server.connection?.connection_status !== 'connected'"
-          @click="server.stopServer()"
-          class="px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-red-400 border border-red-600/30 rounded-lg text-sm font-medium transition-colors"
-        >
-          Stop Server
-        </button>
-        <button
-          @click="router.push('/wipes')"
-          class="px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded-lg text-sm font-medium transition-colors"
-        >
-          Trigger Wipe
-        </button>
-      </div>
-    </div>
-
-    <!-- Server Info (if configured) -->
-    <div v-if="server.config" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-lg font-semibold text-neutral-200 mb-3">Server Configuration</h2>
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
+  <div class="dash">
+    <!-- ===== FLEET VIEW ===== -->
+    <template v-if="view === 'fleet'">
+      <!-- Page head -->
+      <div class="page__head">
         <div>
-          <span class="text-neutral-500">Server Name</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.server_name || 'Not set' }}</p>
+          <div class="t-eyebrow">{{ scopeLabel }}</div>
+          <h1 class="page__title">{{ fleetTitle }}</h1>
         </div>
-        <div>
-          <span class="text-neutral-500">Max Players</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.max_players ?? 'Not set' }}</p>
-        </div>
-        <div>
-          <span class="text-neutral-500">World Size</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.world_size ?? 'Not set' }}</p>
-        </div>
-        <div>
-          <span class="text-neutral-500">Current Seed</span>
-          <p class="text-neutral-200 mt-0.5">{{ server.config.current_seed ?? 'Not set' }}</p>
+        <div class="page__actions">
+          <Tabs v-model="view" :items="viewItems" @update:model-value="setView" />
+          <Button variant="secondary" size="sm" icon="download">Export</Button>
+          <Button size="sm" icon="rocket">Deploy server</Button>
         </div>
       </div>
-    </div>
+
+      <!-- KPIs -->
+      <div class="dash__kpis">
+        <StatCard icon="server" label="Servers running" :value="String(runningCount)" :unit="'/' + inGame.length" delta="+1" note="today" />
+        <StatCard icon="users" label="Players online" :value="String(playersCur)" :unit="'/' + playersMax" delta="+38" note="since wipe" />
+        <StatCard icon="cpu" :label="activeGame === 'all' ? 'Fleet CPU' : 'Avg CPU'" :value="avgCpu" :unit="avgCpu === '—' ? '' : '%'" note="reporting agents" />
+        <StatCard icon="server-cog" label="Agent nodes" value="2" unit="/2" note="all reporting" />
+      </div>
+
+      <!-- Main grid -->
+      <div class="dash__grid">
+        <!-- Left column -->
+        <div class="dash__col">
+          <!-- Players chart panel — themed ECharts -->
+          <Panel title="Players online" :subtitle="chartSubtitle">
+            <template #actions>
+              <Tabs v-model="chartPeriod" :items="periodItems" />
+            </template>
+            <PlayersChart :height="200" :max="200" />
+          </Panel>
+
+          <!-- Servers list -->
+          <Panel :flush-body="true" title="Servers">
+            <template #actions>
+              <Tabs v-model="serverStatus" :items="statusItems" />
+            </template>
+            <div class="server__list">
+              <ServerCard
+                v-for="(s, i) in shownServers"
+                :key="i"
+                :game="s.game"
+                :game-icon="s.gameIcon"
+                :name="s.name"
+                :region="s.region"
+                :map="s.map"
+                :version="s.version"
+                :status="s.status"
+                :players="s.players"
+                :cpu="s.cpu"
+                :ram="s.ram"
+                :ram-sub="s.ramSub"
+                :ip="s.ip"
+                :stats="buildStats(s)"
+              />
+              <div v-if="shownServers.length === 0" class="server__empty">
+                No servers match the current filter.
+              </div>
+            </div>
+          </Panel>
+        </div>
+
+        <!-- Right sidebar column -->
+        <div class="dash__col dash__col--side">
+          <!-- Live activity -->
+          <Panel :flush-body="true" title="Live activity">
+            <template #actions>
+              <Badge tone="online" :dot="true" :pulse="true">Live</Badge>
+            </template>
+            <div class="feed">
+              <ConsoleLine
+                v-for="(f, i) in MOCK_FEED"
+                :key="i"
+                :time="f.time"
+                :level="f.level"
+                :who="f.who"
+              >{{ f.msg }}</ConsoleLine>
+            </div>
+          </Panel>
+
+          <!-- Upcoming wipes -->
+          <Panel title="Upcoming wipes">
+            <div class="wipes">
+              <div
+                v-for="(w, i) in MOCK_WIPES"
+                :key="i"
+                class="wipe"
+                :data-game="w.game"
+              >
+                <div class="wipe__dot" />
+                <div class="wipe__body">
+                  <div class="wipe__name">{{ w.name }}</div>
+                  <div class="wipe__when">{{ w.when }}</div>
+                </div>
+                <Badge :tone="w.tone" size="md">{{ w.label }}</Badge>
+              </div>
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </template>
+
+    <!-- ===== SOLO VIEW ===== -->
+    <template v-else>
+      <!-- Page head -->
+      <div class="page__head">
+        <div class="solo-id">
+          <div class="solo-id__chip">
+            <Icon name="box" :size="21" :stroke-width="2" />
+          </div>
+          <div>
+            <div class="solo-id__name">
+              {{ soloName }}
+              <Badge :tone="soloStatusTone" :dot="true" :pulse="soloStatus === 'online'">{{ soloStatusLabel }}</Badge>
+            </div>
+            <div class="solo-id__meta">
+              {{ soloRegion }} · {{ soloIp }}
+              <span v-if="soloUptime !== '—'"> · up {{ soloUptime }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="page__actions">
+          <Tabs v-model="view" :items="viewItems" @update:model-value="setView" />
+          <Button variant="secondary" size="sm" icon="refresh-cw" @click="server.restartServer()">Restart</Button>
+          <Button variant="danger-soft" size="sm" icon="power" @click="server.stopServer()">Stop</Button>
+          <Button size="sm" icon="terminal" @click="navConsole">Console</Button>
+        </div>
+      </div>
+
+      <!-- KPIs -->
+      <div class="dash__kpis">
+        <StatCard icon="users" label="Players online" :value="String(soloPlayers)" :unit="'/' + soloMaxPlayers" delta="+12" note="since wipe" />
+        <StatCard icon="cpu" label="CPU" :value="String(soloCpuPct)" unit="%" delta="3%" delta-dir="down" note="agent · representative" />
+        <StatCard icon="memory-stick" label="Memory" :value="String(soloRamPct)" unit="%" :note="soloRamSub" />
+        <StatCard icon="gauge" label="Server FPS" :value="String(soloFps)" delta-dir="flat" note="stable" />
+      </div>
+
+      <!-- Solo grid -->
+      <div class="dash__grid">
+        <!-- Left column -->
+        <div class="dash__col">
+          <!-- Players chart — themed ECharts -->
+          <Panel title="Players online" :subtitle="soloName + ' · last 24 hours'">
+            <PlayersChart :height="196" :max="soloMaxPlayers" />
+          </Panel>
+
+          <!-- Console panel -->
+          <Panel :flush-body="true" title="Console">
+            <template #actions>
+              <Badge tone="online" :dot="true" :pulse="soloStatus === 'online'">Live</Badge>
+            </template>
+            <div class="feed feed--solo">
+              <ConsoleLine
+                v-for="(f, i) in MOCK_FEED"
+                :key="i"
+                :time="f.time"
+                :level="f.level"
+                :who="f.who"
+              >{{ f.msg }}</ConsoleLine>
+            </div>
+            <div class="console-bar">
+              <span class="console-bar__prompt">&gt;</span>
+              <Input
+                v-model="consoleInput"
+                :mono="true"
+                size="sm"
+                placeholder="say, kick, ban, oxide.reload …"
+                style="flex: 1"
+                @keydown.enter="sendConsoleCommand"
+              />
+              <Button size="sm" variant="secondary" icon="corner-down-left" @click="sendConsoleCommand">Send</Button>
+            </div>
+          </Panel>
+        </div>
+
+        <!-- Right sidebar -->
+        <div class="dash__col dash__col--side">
+          <!-- Resources -->
+          <Panel title="Resources" subtitle="Companion agent telemetry">
+            <div class="solo-meters">
+              <ResourceMeter label="CPU" :value="soloCpuPct" sub="representative" />
+              <ResourceMeter label="Memory" :value="soloRamPct" :sub="soloRamSub" />
+              <ResourceMeter label="Disk" :value="64" sub="representative" />
+            </div>
+          </Panel>
+
+          <!-- Plugins -->
+          <Panel :flush-body="true" title="Plugins" subtitle="uMod / Oxide">
+            <template #actions>
+              <Button size="sm" variant="ghost" icon="plus" @click="router.push('/plugins')">Add</Button>
+            </template>
+            <div class="plugs">
+              <div
+                v-for="(p, i) in pluginStates"
+                :key="i"
+                class="plug"
+              >
+                <div class="plug__id">
+                  <span class="plug__name">{{ p.name }}</span>
+                  <span class="plug__ver">{{ p.ver }}</span>
+                </div>
+                <Switch v-model="p.on" size="sm" />
+              </div>
+            </div>
+          </Panel>
+
+          <!-- Next wipe -->
+          <Panel title="Next wipe">
+            <div class="solo-wipe">
+              <div>
+                <div class="solo-wipe__when">Thu · 18:00 UTC</div>
+                <div class="solo-wipe__sub">representative — configure in wipe manager</div>
+              </div>
+              <Button size="sm" variant="outline" icon="calendar-clock" @click="navWipes">Edit</Button>
+            </div>
+          </Panel>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
+
+<style scoped>
+/* ---------- Shared shell ---------- */
+.dash { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
+
+.page__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; row-gap: 12px;
+}
+.page__title {
+  font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 5px; white-space: nowrap;
+}
+.page__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
+
+.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
+.dash__grid { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 16px; align-items: start; }
+.dash__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+
+/* ---------- Servers list ---------- */
+.server__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
+.server__empty { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-muted); text-align: center; padding: 24px; }
+
+/* ---------- Live feed ---------- */
+.feed { padding: 8px 2px; max-height: 340px; overflow-y: auto; }
+.feed--solo { max-height: 230px; }
+
+/* ---------- Upcoming wipes ---------- */
+.wipes { display: flex; flex-direction: column; gap: 4px; }
+.wipe { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-radius: var(--radius-md); }
+.wipe:hover { background: var(--surface-hover); }
+.wipe__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 10px -1px var(--accent-glow); }
+.wipe__body { flex: 1; min-width: 0; }
+.wipe__name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.wipe__when { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
+
+/* ---------- Solo identity header ---------- */
+.solo-id { display: flex; align-items: center; gap: 13px; }
+.solo-id__chip {
+  width: 42px; height: 42px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.solo-id__name {
+  display: flex; align-items: center; gap: 10px;
+  font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em;
+  color: var(--text-primary); white-space: nowrap;
+}
+.solo-id__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 3px; }
+
+/* ---------- Console bar ---------- */
+.console-bar {
+  display: flex; align-items: center; gap: 9px; padding: 11px 12px;
+  border-top: 1px solid var(--border-subtle); background: var(--surface-inset);
+}
+.console-bar__prompt { font-family: var(--font-mono); color: var(--accent-text); font-weight: 700; }
+
+/* ---------- Resources ---------- */
+.solo-meters { display: flex; flex-direction: column; gap: 13px; }
+
+/* ---------- Plugin list ---------- */
+.plugs { display: flex; flex-direction: column; }
+.plug { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
+.plug:last-child { border-bottom: 0; }
+.plug__id { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
+.plug__name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.plug__ver { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
+
+/* ---------- Next wipe ---------- */
+.solo-wipe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.solo-wipe__when { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.solo-wipe__sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 1180px) {
+  .dash__grid { grid-template-columns: 1fr; }
+  .server__list { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+  .dash__kpis { grid-template-columns: repeat(2, 1fr); }
+}
+</style>
diff --git a/frontend/src/views/admin/_dashboardMock.ts b/frontend/src/views/admin/_dashboardMock.ts
new file mode 100644
index 0000000..8c16b9b
--- /dev/null
+++ b/frontend/src/views/admin/_dashboardMock.ts
@@ -0,0 +1,159 @@
+/**
+ * Dashboard mock data — representative placeholder pending multi-instance backend.
+ * Current backend is single-server-per-license; the fleet view is a forward-looking
+ * surface that will bind to a multi-instance API. All data here is static and clearly
+ * labeled so it is never confused for real tenant data.
+ *
+ * Per-game fields are isolated by game key — a Dune row NEVER receives a Rust field
+ * like `umod`, and vice-versa. See GAME_FIELDS for the row-field contract.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ServerStatus = 'online' | 'offline' | 'starting' | 'wiping' | 'updating'
+export type GameKey = 'rust' | 'dune' | 'conan' | 'soulmask'
+
+export interface MockServer {
+  game: GameKey
+  gameIcon: string
+  name: string
+  region: string
+  map: string
+  version: string
+  status: ServerStatus
+  players: { cur: number; max: number }
+  cpu?: number
+  ram?: number
+  ramSub?: string
+  ip: string
+  // Rust-only
+  umod?: string
+  wipe?: string
+  // Dune-only
+  sietches?: string
+  control?: string
+  // Conan-only
+  clans?: string
+  purge?: string
+  // Soulmask-only
+  tribe?: string
+  mask?: string
+}
+
+export interface MockFeedLine {
+  time: string
+  level: 'cmd' | 'chat' | 'info' | 'warn' | 'error' | 'connect' | 'kill'
+  who?: string
+  msg: string
+}
+
+export interface MockWipe {
+  game: GameKey
+  name: string
+  when: string
+  tone: 'wiping' | 'starting' | 'warn' | 'online'
+  label: string
+}
+
+export interface StatItem {
+  label: string
+  value: string | number
+}
+
+// ---------------------------------------------------------------------------
+// Fleet server roster
+// ---------------------------------------------------------------------------
+
+export const MOCK_SERVERS: MockServer[] = [
+  {
+    game: 'rust', gameIcon: 'box', name: 'Main · 2x Vanilla', region: 'US-East',
+    map: 'Procedural 4500', version: 'v2024.12', status: 'online',
+    players: { cur: 142, max: 200 }, cpu: 41, ram: 68, ramSub: '5.4 / 8 GB',
+    ip: '89.142.0.7:28015', umod: '14', wipe: '2d',
+  },
+  {
+    game: 'rust', gameIcon: 'box', name: '5x Modded · Build', region: 'US-East',
+    map: 'Barren 3000', version: 'v2024.12', status: 'online',
+    players: { cur: 38, max: 100 }, ip: '89.142.0.7:28017', umod: '27', wipe: '2d',
+  },
+  {
+    game: 'rust', gameIcon: 'box', name: 'Hardcore · Solo/Duo', region: 'US-West',
+    map: 'Procedural 3500', version: 'v2024.12', status: 'wiping',
+    players: { cur: 0, max: 80 }, cpu: 8, ram: 30, ramSub: '2.4 / 8 GB',
+    ip: '74.91.3.2:28015', umod: '9', wipe: 'now',
+  },
+  {
+    game: 'dune', gameIcon: 'sun', name: 'Arrakis · Hardcore', region: 'EU-Frankfurt',
+    map: 'Hagga Basin', version: 'v0.9.4', status: 'online',
+    players: { cur: 54, max: 60 }, cpu: 63, ram: 74, ramSub: '11.8 / 16 GB',
+    ip: '51.83.12.4:7777', sietches: '3', control: '62%',
+  },
+  {
+    game: 'dune', gameIcon: 'sun', name: 'Deep Desert · PvP', region: 'EU-Frankfurt',
+    map: 'Deep Desert', version: 'v0.9.4', status: 'starting',
+    players: { cur: 0, max: 40 }, ip: '51.83.12.4:7779', sietches: '0', control: '—',
+  },
+  {
+    game: 'dune', gameIcon: 'sun', name: 'Sietch · Roleplay', region: 'SG-Singapore',
+    map: 'Hagga Basin', version: 'v0.9.4', status: 'offline',
+    players: { cur: 0, max: 50 }, ip: '139.99.4.8:7777', sietches: '5', control: '—',
+  },
+  {
+    game: 'conan', gameIcon: 'swords', name: 'Exiled Lands · PvP-C', region: 'US-East',
+    map: 'Exiled Lands', version: 'v3.0.5', status: 'online',
+    players: { cur: 32, max: 40 }, cpu: 48, ram: 60, ramSub: '9.6 / 16 GB',
+    ip: '89.142.0.7:7777', clans: '7', purge: 'Tier 4',
+  },
+  {
+    game: 'soulmask', gameIcon: 'drama', name: 'Sienna Plateau · PvE', region: 'EU-Frankfurt',
+    map: 'Sienna Plateau', version: 'v1.4', status: 'online',
+    players: { cur: 18, max: 30 }, cpu: 35, ram: 52, ramSub: '8.3 / 16 GB',
+    ip: '51.83.12.4:8777', tribe: '4', mask: 'Jaguar',
+  },
+]
+
+// ---------------------------------------------------------------------------
+// Per-game stat field sets — never share slots across games
+// ---------------------------------------------------------------------------
+
+function pl(s: MockServer): string {
+  return `${s.players.cur} / ${s.players.max}`
+}
+
+export const GAME_FIELDS: Record<GameKey, (s: MockServer) => StatItem[]> = {
+  rust:     (s) => [{ label: 'Players', value: pl(s) }, { label: 'uMod', value: s.umod ?? '—' }, { label: 'Wipe', value: s.wipe ?? '—' }],
+  dune:     (s) => [{ label: 'Players', value: pl(s) }, { label: 'Sietches', value: s.sietches ?? '—' }, { label: 'Control', value: s.control ?? '—' }],
+  conan:    (s) => [{ label: 'Players', value: pl(s) }, { label: 'Clans', value: s.clans ?? '—' }, { label: 'Purge', value: s.purge ?? '—' }],
+  soulmask: (s) => [{ label: 'Players', value: pl(s) }, { label: 'Tribe', value: s.tribe ?? '—' }, { label: 'Mask', value: s.mask ?? '—' }],
+}
+
+export function buildStats(s: MockServer): StatItem[] {
+  const fn = GAME_FIELDS[s.game] ?? GAME_FIELDS.rust
+  return fn(s)
+}
+
+// ---------------------------------------------------------------------------
+// Live activity feed
+// ---------------------------------------------------------------------------
+
+export const MOCK_FEED: MockFeedLine[] = [
+  { time: '18:42:07', level: 'connect', who: 'ShadowFox', msg: 'connected — 89.142.0.7' },
+  { time: '18:41:55', level: 'cmd', who: 'admin', msg: 'oxide.grant group default kits.use' },
+  { time: '18:41:30', level: 'kill', who: 'ironMaiden', msg: 'was killed by Scorpion (AK-47, 84m)' },
+  { time: '18:40:12', level: 'warn', msg: '5x Modded agent reconnected — telemetry resuming' },
+  { time: '18:39:48', level: 'chat', who: 'BlightWalker:', msg: 'anyone selling sulfur?' },
+  { time: '18:38:02', level: 'info', msg: 'RaidableBases spawned Tier-3 at G14' },
+  { time: '18:36:51', level: 'connect', who: 'Vex', msg: 'connected — 51.83.12.4' },
+]
+
+// ---------------------------------------------------------------------------
+// Upcoming wipes
+// ---------------------------------------------------------------------------
+
+export const MOCK_WIPES: MockWipe[] = [
+  { game: 'rust', name: 'Main · 2x Vanilla', when: 'Thu · 18:00 UTC', tone: 'wiping', label: 'Map + BP' },
+  { game: 'rust', name: '5x Modded · Build', when: 'Thu · 18:00 UTC', tone: 'wiping', label: 'Map only' },
+  { game: 'dune', name: 'Deep Desert · PvP', when: 'Sun · 12:00 UTC', tone: 'starting', label: 'Deep Desert' },
+]

From 560d023250226dea6fd36771b120a658a3e4031a Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 02:21:14 -0400
Subject: [PATCH 2/7] feat(redesign): re-skin auth + account views to DS (Phase
 D batch 1)

Auth (Login/Register/ForgotPassword/SetupWizard) + account cluster (Settings/Team/Notifications) re-skinned onto design-system components + tokens. JPEG login banner replaced with the C-gauge mark + Oxanium wordmark. All logic/store/router/handlers preserved (TOTP flow, validators, save handlers, API endpoints). Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/views/admin/NotificationsView.vue     | 195 +++---
 frontend/src/views/admin/SettingsView.vue     | 354 +++++------
 frontend/src/views/admin/TeamView.vue         | 256 ++++----
 .../src/views/auth/ForgotPasswordView.vue     | 198 +++++--
 frontend/src/views/auth/LoginView.vue         | 367 +++++++-----
 frontend/src/views/auth/RegisterView.vue      | 275 +++++----
 frontend/src/views/auth/SetupWizardView.vue   | 559 ++++++++++++++----
 7 files changed, 1357 insertions(+), 847 deletions(-)

diff --git a/frontend/src/views/admin/NotificationsView.vue b/frontend/src/views/admin/NotificationsView.vue
index f148b29..3776fb3 100644
--- a/frontend/src/views/admin/NotificationsView.vue
+++ b/frontend/src/views/admin/NotificationsView.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useToastStore } from '@/stores/toast'
 import type { NotificationConfig } from '@/types'
-import { Bell, Save, Loader2 } from 'lucide-vue-next'
+
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
 
 const api = useApi()
 const toast = useToastStore()
@@ -26,12 +30,12 @@ const saving = ref(false)
 const isLoading = ref(false)
 
 const eventToggles = [
-  { key: 'notify_wipe_start' as const, label: 'Wipe Started', desc: 'When a wipe begins' },
-  { key: 'notify_wipe_complete' as const, label: 'Wipe Complete', desc: 'When a wipe finishes successfully' },
-  { key: 'notify_wipe_failed' as const, label: 'Wipe Failed', desc: 'When a wipe fails or rolls back' },
-  { key: 'notify_server_crash' as const, label: 'Server Crash', desc: 'When the server process crashes' },
-  { key: 'notify_server_offline' as const, label: 'Server Offline', desc: 'When the server goes unreachable' },
-  { key: 'notify_store_purchase' as const, label: 'Store Purchase', desc: 'When a player buys from the store' },
+  { key: 'notify_wipe_start' as const, label: 'Wipe started', desc: 'When a wipe begins' },
+  { key: 'notify_wipe_complete' as const, label: 'Wipe complete', desc: 'When a wipe finishes successfully' },
+  { key: 'notify_wipe_failed' as const, label: 'Wipe failed', desc: 'When a wipe fails or rolls back' },
+  { key: 'notify_server_crash' as const, label: 'Server crash', desc: 'When the server process crashes' },
+  { key: 'notify_server_offline' as const, label: 'Server offline', desc: 'When the server goes unreachable' },
+  { key: 'notify_store_purchase' as const, label: 'Store purchase', desc: 'When a player buys from the store' },
 ]
 
 async function fetchConfig() {
@@ -58,129 +62,114 @@ async function saveConfig() {
   }
 }
 
+// Coerce nullable string fields to string for DS Input (which expects string, not string|null)
+const discordWebhookUrl = computed<string>({
+  get: () => config.value.discord_webhook_url ?? '',
+  set: (v) => { config.value.discord_webhook_url = v || null },
+})
+const pushbulletApiKey = computed<string>({
+  get: () => config.value.pushbullet_api_key ?? '',
+  set: (v) => { config.value.pushbullet_api_key = v || null },
+})
+
 onMounted(() => {
   fetchConfig()
 })
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Bell class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Notifications</h1>
+  <div class="notifs">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Monitoring</div>
+        <h1 class="page__title">Notifications</h1>
       </div>
-      <button
+      <Button
+        size="sm"
+        icon="save"
+        :loading="saving"
         @click="saveConfig"
-        :disabled="saving"
-        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
       >
-        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
-        <Save v-else class="w-4 h-4" />
-        {{ saving ? 'Saving...' : 'Save Changes' }}
-      </button>
+        {{ saving ? 'Saving...' : 'Save changes' }}
+      </Button>
     </div>
 
-    <!-- Discord -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h2 class="text-sm font-medium text-neutral-200">Discord Webhook</h2>
-          <p class="text-xs text-neutral-500 mt-0.5">Send notifications to a Discord channel</p>
-        </div>
-        <button
-          @click="config.discord_enabled = !config.discord_enabled"
-          class="w-9 h-5 rounded-full transition-colors"
-          :class="config.discord_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
-        >
-          <div
-            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-            :class="config.discord_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
-          />
-        </button>
-      </div>
-      <input
-        v-model="config.discord_webhook_url"
+    <!-- Discord webhook -->
+    <Panel title="Discord webhook" subtitle="Send notifications to a Discord channel" eyebrow="Channel">
+      <template #actions>
+        <Switch v-model="config.discord_enabled" />
+      </template>
+      <Input
+        v-model="discordWebhookUrl"
         type="url"
         placeholder="https://discord.com/api/webhooks/..."
         :disabled="!config.discord_enabled"
-        class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors disabled:opacity-40"
+        :mono="true"
       />
-    </div>
+    </Panel>
 
     <!-- Pushbullet -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h2 class="text-sm font-medium text-neutral-200">Pushbullet</h2>
-          <p class="text-xs text-neutral-500 mt-0.5">Push notifications to your devices</p>
-        </div>
-        <button
-          @click="config.pushbullet_enabled = !config.pushbullet_enabled"
-          class="w-9 h-5 rounded-full transition-colors"
-          :class="config.pushbullet_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
-        >
-          <div
-            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-            :class="config.pushbullet_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
-          />
-        </button>
-      </div>
-      <input
-        v-model="config.pushbullet_api_key"
-        type="text"
+    <Panel title="Pushbullet" subtitle="Push notifications to your devices" eyebrow="Channel">
+      <template #actions>
+        <Switch v-model="config.pushbullet_enabled" />
+      </template>
+      <Input
+        v-model="pushbulletApiKey"
         placeholder="Pushbullet API key"
         :disabled="!config.pushbullet_enabled"
-        class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors disabled:opacity-40"
+        :mono="true"
       />
-    </div>
+    </Panel>
 
-    <!-- Email -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center justify-between">
-        <div>
-          <h2 class="text-sm font-medium text-neutral-200">Email Alerts</h2>
-          <p class="text-xs text-neutral-500 mt-0.5">Send critical alerts to your registered email</p>
-        </div>
-        <button
-          @click="config.email_alerts_enabled = !config.email_alerts_enabled"
-          class="w-9 h-5 rounded-full transition-colors"
-          :class="config.email_alerts_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
-        >
-          <div
-            class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-            :class="config.email_alerts_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
-          />
-        </button>
-      </div>
-    </div>
+    <!-- Email alerts -->
+    <Panel title="Email alerts" subtitle="Send critical alerts to your registered email" eyebrow="Channel">
+      <template #actions>
+        <Switch v-model="config.email_alerts_enabled" />
+      </template>
+      <!-- No additional fields for email — toggle only -->
+    </Panel>
 
-    <!-- Event Toggles -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Event Triggers</h2>
-      <div class="space-y-4">
+    <!-- Event triggers -->
+    <Panel title="Event triggers" subtitle="Choose which events fire notifications" eyebrow="Routing">
+      <div class="triggers">
         <div
           v-for="toggle in eventToggles"
           :key="toggle.key"
-          class="flex items-center justify-between"
+          class="trigger-row"
         >
-          <div>
-            <p class="text-sm text-neutral-200">{{ toggle.label }}</p>
-            <p class="text-xs text-neutral-500">{{ toggle.desc }}</p>
+          <div class="trigger-text">
+            <span class="trigger-label">{{ toggle.label }}</span>
+            <span class="trigger-desc">{{ toggle.desc }}</span>
           </div>
-          <button
-            @click="config[toggle.key] = !config[toggle.key]"
-            class="w-9 h-5 rounded-full transition-colors"
-            :class="config[toggle.key] ? 'bg-oxide-500' : 'bg-neutral-700'"
-          >
-            <div
-              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-              :class="config[toggle.key] ? 'translate-x-4.5' : 'translate-x-0.5'"
-            />
-          </button>
+          <Switch v-model="config[toggle.key]" />
         </div>
       </div>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.notifs { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
+
+.page__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap;
+}
+.page__title {
+  font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 5px;
+}
+
+/* Event triggers */
+.triggers { display: flex; flex-direction: column; gap: 2px; }
+.trigger-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  padding: 11px 4px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.trigger-row:last-child { border-bottom: 0; }
+.trigger-text { display: flex; flex-direction: column; gap: 2px; }
+.trigger-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.trigger-desc { font-size: var(--text-xs); color: var(--text-tertiary); }
+</style>
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index b6d9135..f48cb2f 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -3,14 +3,20 @@ import { ref, onMounted } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { useToastStore } from '@/stores/toast'
 import { useApi } from '@/composables/useApi'
-import { Settings, Key, Globe, User, Save, Loader2, Eye } from 'lucide-vue-next'
+
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
 
 const auth = useAuthStore()
 const toast = useToastStore()
 const api = useApi()
 
 const saving = ref(false)
-const section = ref<'account' | 'license' | 'domain' | 'public'>('account')
+const section = ref<string>('account')
 
 const accountForm = ref({
   username: '',
@@ -86,209 +92,225 @@ async function savePublicSite() {
 onMounted(() => {
   loadForms()
 })
+
+const tabItems = [
+  { value: 'account', label: 'Account', icon: 'user' },
+  { value: 'license', label: 'License', icon: 'key' },
+  { value: 'domain', label: 'Domain', icon: 'globe' },
+  { value: 'public', label: 'Public status', icon: 'eye' },
+]
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <Settings class="w-5 h-5 text-oxide-500" />
-      <h1 class="text-2xl font-bold text-neutral-100">Settings</h1>
+  <div class="settings">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Management</div>
+        <h1 class="page__title">Settings</h1>
+      </div>
     </div>
 
     <!-- Section tabs -->
-    <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden w-fit">
-      <button
-        v-for="tab in ([
-          { key: 'account', label: 'Account', icon: User },
-          { key: 'license', label: 'License', icon: Key },
-          { key: 'domain', label: 'Domain', icon: Globe },
-          { key: 'public', label: 'Public Status', icon: Eye },
-        ] as const)"
-        :key="tab.key"
-        @click="section = tab.key"
-        class="flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors"
-        :class="section === tab.key
-          ? 'bg-oxide-500/15 text-oxide-400'
-          : 'text-neutral-400 hover:text-neutral-200'"
-      >
-        <component :is="tab.icon" class="w-4 h-4" />
-        {{ tab.label }}
-      </button>
-    </div>
+    <Tabs v-model="section" :items="tabItems" />
 
     <!-- Account -->
-    <div v-if="section === 'account'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Account Details</h2>
-      <div class="grid grid-cols-2 gap-4">
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Username</label>
-          <input
-            v-model="accountForm.username"
-            type="text"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-          />
-        </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Email</label>
-          <input
-            v-model="accountForm.email"
-            type="email"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-          />
-        </div>
+    <Panel v-if="section === 'account'" title="Account details" eyebrow="Identity">
+      <template #actions>
+        <Button size="sm" :loading="saving" icon="save" @click="saveAccount">Save</Button>
+      </template>
+      <div class="form-grid">
+        <Input
+          v-model="accountForm.username"
+          label="Username"
+          placeholder="your-handle"
+          :required="true"
+        />
+        <Input
+          v-model="accountForm.email"
+          label="Email"
+          type="email"
+          placeholder="you@example.com"
+          :required="true"
+        />
       </div>
-      <div class="flex items-center gap-3">
-        <p class="text-xs text-neutral-500">
-          2FA: <span :class="auth.user?.totp_enabled ? 'text-green-400' : 'text-yellow-400'">
-            {{ auth.user?.totp_enabled ? 'Enabled' : 'Not configured' }}
-          </span>
-        </p>
+      <div class="totp-row">
+        <span class="field-label">2FA status</span>
+        <Badge
+          :tone="auth.user?.totp_enabled ? 'online' : 'warn'"
+          :dot="true"
+        >
+          {{ auth.user?.totp_enabled ? 'Enabled' : 'Not configured' }}
+        </Badge>
       </div>
-      <button
-        @click="saveAccount"
-        :disabled="saving"
-        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-      >
-        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
-        <Save v-else class="w-4 h-4" />
-        Save
-      </button>
-    </div>
+    </Panel>
 
     <!-- License -->
-    <div v-if="section === 'license'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">License Information</h2>
-      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">License Key</p>
-          <p class="text-sm font-mono text-neutral-300">{{ auth.license?.license_key || '\u2014' }}</p>
+    <Panel v-if="section === 'license'" title="License information" eyebrow="Subscription">
+      <div class="lic-grid">
+        <div class="lic-field">
+          <span class="field-label">License key</span>
+          <span class="field-mono">{{ auth.license?.license_key ?? '—' }}</span>
         </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Status</p>
-          <span
-            class="text-xs font-medium px-2 py-0.5 rounded-full"
-            :class="{
-              'bg-green-500/10 text-green-400': auth.license?.status === 'active',
-              'bg-yellow-500/10 text-yellow-400': auth.license?.status === 'suspended',
-              'bg-red-500/10 text-red-400': auth.license?.status === 'expired' || auth.license?.status === 'revoked',
-            }"
+        <div class="lic-field">
+          <span class="field-label">Status</span>
+          <Badge
+            :tone="auth.license?.status === 'active' ? 'online' : auth.license?.status === 'suspended' ? 'warn' : 'offline'"
           >
-            {{ auth.license?.status || 'Unknown' }}
+            {{ auth.license?.status ?? 'Unknown' }}
+          </Badge>
+        </div>
+        <div class="lic-field">
+          <span class="field-label">Expires</span>
+          <span class="field-value">
+            {{ auth.license?.expires_at ? new Date(auth.license.expires_at).toLocaleDateString() : 'Never' }}
           </span>
         </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Expires</p>
-          <p class="text-sm text-neutral-300">
-            {{ auth.license?.expires_at ? new Date(auth.license.expires_at).toLocaleDateString() : 'Never' }}
-          </p>
+        <div class="lic-field">
+          <span class="field-label">Server name</span>
+          <span class="field-value">{{ auth.license?.server_name ?? 'Not set' }}</span>
         </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Server Name</p>
-          <p class="text-sm text-neutral-300">{{ auth.license?.server_name || 'Not set' }}</p>
+        <div class="lic-field">
+          <span class="field-label">Webstore</span>
+          <Badge :tone="auth.license?.webstore_active ? 'online' : 'neutral'">
+            {{ auth.license?.webstore_active ? 'Active' : 'Inactive' }}
+          </Badge>
         </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Webstore</p>
-          <p class="text-sm text-neutral-300">{{ auth.license?.webstore_active ? 'Active' : 'Inactive' }}</p>
-        </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Modules</p>
-          <p class="text-sm text-neutral-300">{{ auth.license?.modules_enabled?.length ?? 0 }} enabled</p>
+        <div class="lic-field">
+          <span class="field-label">Modules</span>
+          <span class="field-mono">{{ auth.license?.modules_enabled?.length ?? 0 }} enabled</span>
         </div>
       </div>
-    </div>
+    </Panel>
 
     <!-- Domain -->
-    <div v-if="section === 'domain'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Domain & Subdomain</h2>
-      <div class="space-y-4">
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Subdomain</label>
-          <div class="flex items-center gap-0">
-            <input
+    <Panel v-if="section === 'domain'" title="Domain &amp; subdomain" eyebrow="Routing">
+      <template #actions>
+        <Button size="sm" :loading="saving" icon="save" @click="saveDomain">Save</Button>
+      </template>
+      <div class="domain-stack">
+        <div class="cc-field">
+          <span class="cc-field__label">Subdomain</span>
+          <div class="subdomain-row">
+            <Input
               v-model="domainForm.subdomain"
-              type="text"
               placeholder="my-server"
-              class="flex-1 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-l-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+              style="flex: 1"
             />
-            <span class="px-3 py-2 bg-neutral-700 border border-l-0 border-neutral-700 rounded-r-lg text-sm text-neutral-400">
-              .corrosionmgmt.com
-            </span>
+            <span class="subdomain-suffix">.corrosionmgmt.com</span>
           </div>
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Custom Domain (optional)</label>
-          <input
-            v-model="domainForm.custom_domain"
-            type="text"
-            placeholder="panel.myserver.com"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-          />
-          <p class="text-xs text-neutral-600 mt-1">Point a CNAME record to panel.corrosionmgmt.com</p>
-        </div>
+        <Input
+          v-model="domainForm.custom_domain"
+          label="Custom domain"
+          placeholder="panel.myserver.com"
+          hint="Point a CNAME record to panel.corrosionmgmt.com"
+        />
       </div>
-      <button
-        @click="saveDomain"
-        :disabled="saving"
-        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-      >
-        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
-        <Save v-else class="w-4 h-4" />
-        Save
-      </button>
-    </div>
+    </Panel>
 
-    <!-- Public Status Page -->
-    <div v-if="section === 'public'" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Public Status Page</h2>
-      <p class="text-xs text-neutral-500">
-        Showcase your server on the public Corrosion status page at
-        <a href="https://status.corrosionmgmt.com" target="_blank" class="text-oxide-400 hover:text-oxide-300">
-          status.corrosionmgmt.com
-        </a>
-      </p>
+    <!-- Public status page -->
+    <Panel v-if="section === 'public'" title="Public status page" eyebrow="Visibility">
+      <template #actions>
+        <Button size="sm" :loading="saving" icon="save" @click="savePublicSite">Save</Button>
+      </template>
+      <div class="public-stack">
+        <p class="section-note">
+          Showcase your server on the public Corrosion status page at
+          <a href="https://status.corrosionmgmt.com" target="_blank" class="link">status.corrosionmgmt.com</a>.
+        </p>
 
-      <div class="space-y-4">
-        <!-- Toggle -->
-        <div class="flex items-center justify-between p-4 bg-neutral-800 rounded-lg border border-neutral-700">
+        <div class="toggle-row">
           <div>
-            <p class="text-sm font-medium text-neutral-200">Show on status page</p>
-            <p class="text-xs text-neutral-500 mt-1">Display your server publicly with live stats</p>
+            <p class="toggle-label">Show on status page</p>
+            <p class="toggle-desc">Display your server publicly with live stats</p>
           </div>
-          <button
-            @click="publicSiteForm.show_on_status_page = !publicSiteForm.show_on_status_page"
-            :class="publicSiteForm.show_on_status_page ? 'bg-oxide-600' : 'bg-neutral-700'"
-            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-oxide-500 focus:ring-offset-2 focus:ring-offset-neutral-900"
-          >
-            <span
-              :class="publicSiteForm.show_on_status_page ? 'translate-x-6' : 'translate-x-1'"
-              class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
-            ></span>
-          </button>
+          <Switch v-model="publicSiteForm.show_on_status_page" />
         </div>
 
-        <!-- Description -->
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Description (optional)</label>
+        <div class="cc-field">
+          <span class="cc-field__label">Description <span class="optional">(optional)</span></span>
           <textarea
             v-model="publicSiteForm.status_page_description"
             placeholder="Friendly 10x modded server with custom plugins..."
             rows="3"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
-          ></textarea>
-          <p class="text-xs text-neutral-600 mt-1">Brief description shown on the status page</p>
+            class="cc-textarea"
+          />
+          <span class="cc-field__hint">Brief description shown on the status page</span>
         </div>
       </div>
-
-      <button
-        @click="savePublicSite"
-        :disabled="saving"
-        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-      >
-        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
-        <Save v-else class="w-4 h-4" />
-        Save
-      </button>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.settings {
+  max-width: 860px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.page__title { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin-top: 5px; }
+
+/* Account tab */
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.totp-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
+
+/* License tab */
+.lic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
+.lic-field { display: flex; flex-direction: column; gap: 5px; }
+
+/* Domain tab */
+.domain-stack { display: flex; flex-direction: column; gap: 14px; }
+.subdomain-row { display: flex; align-items: center; gap: 0; }
+.subdomain-suffix {
+  display: flex; align-items: center;
+  height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-raised-2); color: var(--text-muted);
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  box-shadow: var(--ring-default);
+  white-space: nowrap; flex: none;
+}
+/* Remove the right-radius from the preceding Input's inner element */
+.subdomain-row :deep(.cc-input) { border-radius: var(--radius-md) 0 0 var(--radius-md); }
+
+/* Public status tab */
+.public-stack { display: flex; flex-direction: column; gap: 16px; }
+.section-note { font-size: var(--text-sm); color: var(--text-tertiary); margin: 0; }
+.link { color: var(--accent-text); text-decoration: none; }
+.link:hover { text-decoration: underline; }
+.toggle-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  padding: 13px 14px;
+  background: var(--surface-raised-2); border-radius: var(--radius-md); box-shadow: var(--ring-default);
+}
+.toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin: 0; }
+.toggle-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin: 3px 0 0; }
+
+/* Shared field helpers */
+.field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+.field-mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.field-value { font-size: var(--text-sm); color: var(--text-primary); }
+.optional { font-weight: 400; color: var(--text-muted); }
+
+/* Textarea (no DS component for textarea — minimal consistent styling) */
+.cc-textarea {
+  width: 100%; padding: 9px 11px; resize: vertical;
+  background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5;
+  outline: 0; transition: var(--transition-colors);
+  box-sizing: border-box;
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+@media (max-width: 680px) {
+  .form-grid { grid-template-columns: 1fr; }
+  .lic-grid { grid-template-columns: 1fr 1fr; }
+}
+</style>
diff --git a/frontend/src/views/admin/TeamView.vue b/frontend/src/views/admin/TeamView.vue
index 6a3efd2..bca12b2 100644
--- a/frontend/src/views/admin/TeamView.vue
+++ b/frontend/src/views/admin/TeamView.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useToastStore } from '@/stores/toast'
 import type { TeamMember, Role } from '@/types'
-import { UserPlus, Shield, Mail, Trash2, RefreshCw } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const api = useApi()
 const toast = useToastStore()
@@ -16,12 +21,11 @@ const inviteEmail = ref('')
 const inviteRole = ref('')
 const inviting = ref(false)
 
-function roleBadgeClass(roleName: string): string {
+function roleTone(roleName: string): 'accent' | 'info' | 'neutral' {
   switch (roleName.toLowerCase()) {
-    case 'owner': return 'bg-oxide-500/15 text-oxide-400'
-    case 'admin': return 'bg-purple-500/15 text-purple-400'
-    case 'moderator': return 'bg-blue-500/15 text-blue-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+    case 'owner': return 'accent'
+    case 'admin': return 'info'
+    default: return 'neutral'
   }
 }
 
@@ -72,135 +76,173 @@ async function removeMember(member: TeamMember) {
 onMounted(() => {
   fetchTeam()
 })
+
+const roleOptions = computed(() =>
+  roles.value.map((r) => ({ value: r.id, label: r.role_name }))
+)
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <UserPlus class="w-5 h-5 text-oxide-500" />
-        <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Team Management</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">{{ members.length }} members</p>
-        </div>
+  <div class="team">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Management</div>
+        <h1 class="page__title">Team</h1>
       </div>
-      <div class="flex items-center gap-3">
-        <button
+      <div class="page__actions">
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="refresh-cw"
+          :loading="isLoading"
           @click="fetchTeam"
-          :disabled="isLoading"
-          class="flex items-center gap-2 px-3 py-2 text-sm text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
         >
-          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
-        </button>
-        <button
+          Refresh
+        </Button>
+        <Button
+          size="sm"
+          icon="mail"
           @click="showInvite = !showInvite"
-          class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
         >
-          <Mail class="w-4 h-4" />
-          Invite Member
-        </button>
+          Invite member
+        </Button>
       </div>
     </div>
 
-    <!-- Invite form -->
-    <div v-if="showInvite" class="bg-neutral-900 border border-oxide-500/20 rounded-lg p-5">
-      <h3 class="text-sm font-medium text-neutral-200 mb-3">Invite a Team Member</h3>
-      <form @submit.prevent="sendInvite" class="flex items-end gap-3">
-        <div class="flex-1">
-          <label class="block text-xs text-neutral-500 mb-1">Email Address</label>
-          <input
-            v-model="inviteEmail"
-            type="email"
-            required
-            placeholder="team@example.com"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+    <!-- Invite panel -->
+    <Panel v-if="showInvite" title="Invite a team member" eyebrow="New invite">
+      <form @submit.prevent="sendInvite" class="invite-form">
+        <Input
+          v-model="inviteEmail"
+          label="Email address"
+          type="email"
+          placeholder="team@example.com"
+          :required="true"
+          style="flex: 1"
+        />
+        <div class="invite-role">
+          <span class="cc-field__label">Role</span>
+          <Select
+            v-model="inviteRole"
+            :options="[{ value: '', label: 'Select role...' }, ...roleOptions]"
           />
         </div>
-        <div class="w-48">
-          <label class="block text-xs text-neutral-500 mb-1">Role</label>
-          <select
-            v-model="inviteRole"
-            required
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-          >
-            <option value="" disabled>Select role...</option>
-            <option v-for="role in roles" :key="role.id" :value="role.id">
-              {{ role.role_name }}
-            </option>
-          </select>
+        <div class="invite-action">
+          <!-- spacer to align with inputs -->
+          <span class="cc-field__label">&nbsp;</span>
+          <Button type="submit" size="md" :loading="inviting">
+            {{ inviting ? 'Sending...' : 'Send invite' }}
+          </Button>
         </div>
-        <button
-          type="submit"
-          :disabled="inviting"
-          class="px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-        >
-          {{ inviting ? 'Sending...' : 'Send Invite' }}
-        </button>
       </form>
-    </div>
+    </Panel>
 
     <!-- Team table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <Panel :flush-body="true" title="Members" :subtitle="members.length + ' total'">
+      <!-- Empty state -->
+      <EmptyState
+        v-if="!isLoading && members.length === 0"
+        icon="users"
+        title="No team members"
+        description="Invite someone to get started."
+      >
+        <template #action>
+          <Button size="sm" icon="mail" @click="showInvite = true">Invite member</Button>
+        </template>
+      </EmptyState>
+
+      <!-- Loading skeleton -->
+      <div v-else-if="isLoading" class="table-loading">
+        <div v-for="i in 3" :key="i" class="skeleton-row" />
+      </div>
+
+      <!-- Table -->
+      <table v-else class="cc-table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Member</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Email</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Role</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
+          <tr>
+            <th>Member</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Status</th>
+            <th class="col-actions">Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="members.length === 0">
-            <td colspan="5" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="isLoading">Loading team...</template>
-              <template v-else>No team members yet. Invite someone to get started.</template>
-            </td>
-          </tr>
-          <tr
-            v-for="member in members"
-            :key="member.id"
-            class="hover:bg-neutral-800/50 transition-colors"
-          >
-            <td class="px-4 py-3">
-              <div class="flex items-center gap-2">
-                <Shield class="w-4 h-4 text-neutral-600" />
-                <span class="text-sm font-medium text-neutral-100">{{ member.username }}</span>
+        <tbody>
+          <tr v-for="member in members" :key="member.id">
+            <td>
+              <div class="member-id">
+                <span class="member-avatar">{{ (member.username ?? '?')[0]?.toUpperCase() ?? '?' }}</span>
+                <span class="member-name">{{ member.username }}</span>
               </div>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ member.email }}</td>
-            <td class="px-4 py-3">
-              <span
-                class="text-xs font-medium px-2 py-0.5 rounded-full"
-                :class="roleBadgeClass(member.role_name)"
-              >
-                {{ member.role_name }}
-              </span>
+            <td class="cell-mono">{{ member.email }}</td>
+            <td>
+              <Badge :tone="roleTone(member.role_name)">{{ member.role_name }}</Badge>
             </td>
-            <td class="px-4 py-3">
-              <span
-                class="text-xs font-medium px-2 py-0.5 rounded-full"
-                :class="member.accepted_at
-                  ? 'bg-green-500/10 text-green-400'
-                  : 'bg-yellow-500/10 text-yellow-400'"
-              >
+            <td>
+              <Badge :tone="member.accepted_at ? 'online' : 'warn'" :dot="true">
                 {{ member.accepted_at ? 'Active' : 'Pending' }}
-              </span>
+              </Badge>
             </td>
-            <td class="px-4 py-3 text-right">
-              <button
-                @click="removeMember(member)"
-                class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
+            <td class="col-actions">
+              <Button
+                variant="ghost"
+                size="sm"
+                icon="trash-2"
                 title="Remove member"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
+                @click="removeMember(member)"
+              />
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.team { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
+
+.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; row-gap: 10px; }
+.page__title { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin-top: 5px; }
+.page__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
+
+/* Invite form */
+.invite-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
+.invite-role { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
+.invite-action { display: flex; flex-direction: column; gap: 6px; }
+
+/* Table */
+.cc-table { width: 100%; border-collapse: collapse; }
+.cc-table th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.cc-table td {
+  padding: 11px 16px;
+  font-size: var(--text-sm); color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.cc-table tbody tr:last-child td { border-bottom: 0; }
+.cc-table tbody tr:hover td { background: var(--surface-hover); }
+.col-actions { text-align: right; width: 56px; }
+
+.member-id { display: flex; align-items: center; gap: 10px; }
+.member-avatar {
+  width: 28px; height: 28px; border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center; flex: none;
+  background: var(--accent-soft); color: var(--accent-text);
+  font-size: var(--text-xs); font-weight: 700;
+}
+.member-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.cell-mono { font-family: var(--font-mono); font-size: var(--text-xs) !important; color: var(--text-tertiary) !important; }
+
+/* Loading skeleton */
+.table-loading { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
+.skeleton-row { height: 40px; border-radius: var(--radius-md); background: var(--surface-raised-2); animation: cc-skeleton 1.4s ease-in-out infinite; }
+@keyframes cc-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+</style>
diff --git a/frontend/src/views/auth/ForgotPasswordView.vue b/frontend/src/views/auth/ForgotPasswordView.vue
index c616c73..d7aa3e2 100644
--- a/frontend/src/views/auth/ForgotPasswordView.vue
+++ b/frontend/src/views/auth/ForgotPasswordView.vue
@@ -2,7 +2,10 @@
 import { ref } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { RouterLink } from 'vue-router'
-import { Mail, ArrowLeft, CheckCircle2, Loader2 } from 'lucide-vue-next'
+import Logo from '@/components/ds/brand/Logo.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
 
 const api = useApi()
 const email = ref('')
@@ -27,76 +30,149 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950 flex items-center justify-center p-6">
-    <div class="w-full max-w-md">
-      <!-- Logo -->
-      <div class="text-center mb-8">
-        <div class="flex items-center justify-center gap-2 mb-2">
-          <img src="/logo.png" alt="Corrosion" class="h-10 w-10" />
-          <h1 class="text-2xl font-bold text-oxide-500 tracking-wider">CORROSION</h1>
+  <div class="auth-shell">
+    <div class="auth-card">
+      <!-- Branding -->
+      <div class="auth-brand">
+        <div class="auth-brand__mark">
+          <Logo :size="36" tagline="Game Server Operations" />
         </div>
-        <p class="text-neutral-500 text-sm">Server Management Platform</p>
       </div>
 
-      <!-- Card -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
-        <div v-if="success" class="text-center space-y-4">
-          <CheckCircle2 class="w-12 h-12 text-green-500 mx-auto" />
-          <h2 class="text-xl font-bold text-neutral-100">Check your email</h2>
-          <p class="text-sm text-neutral-400">
-            We've sent password reset instructions to <strong class="text-neutral-200">{{ email }}</strong>
-          </p>
-          <RouterLink
-            to="/login"
-            class="inline-flex items-center gap-2 text-sm text-oxide-400 hover:text-oxide-300 transition-colors"
-          >
-            <ArrowLeft class="w-4 h-4" />
-            Back to login
-          </RouterLink>
+      <!-- Success state -->
+      <div v-if="success" class="auth-success">
+        <Alert tone="online" title="Check your email">
+          Reset instructions sent to <strong class="auth-success__addr">{{ email }}</strong>
+        </Alert>
+        <RouterLink to="/login" class="auth-back-link">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M19 12H5M12 5l-7 7 7 7" />
+          </svg>
+          Back to sign in
+        </RouterLink>
+      </div>
+
+      <!-- Form -->
+      <template v-else>
+        <div class="auth-form-header">
+          <h1 class="auth-form-header__title">Forgot password?</h1>
+          <p class="auth-form-header__sub">Enter your email to receive reset instructions.</p>
         </div>
 
-        <form v-else @submit.prevent="handleSubmit" class="space-y-6">
-          <div class="text-center mb-6">
-            <h2 class="text-xl font-bold text-neutral-100 mb-2">Forgot password?</h2>
-            <p class="text-sm text-neutral-400">Enter your email to receive reset instructions</p>
-          </div>
+        <Alert v-if="errorMessage" tone="danger">{{ errorMessage }}</Alert>
 
-          <div>
-            <label class="block text-sm text-neutral-400 mb-2">Email</label>
-            <div class="relative">
-              <Mail class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-500" />
-              <input
-                v-model="email"
-                type="email"
-                required
-                class="w-full pl-10 pr-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500"
-                placeholder="admin@example.com"
-              />
-            </div>
-          </div>
+        <form class="auth-form" @submit.prevent="handleSubmit">
+          <Input
+            v-model="email"
+            label="Email"
+            type="email"
+            placeholder="admin@example.com"
+            icon="mail"
+            :required="true"
+          />
 
-          <div v-if="errorMessage" class="p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
-            <p class="text-sm text-red-400">{{ errorMessage }}</p>
-          </div>
-
-          <button
+          <Button
             type="submit"
-            :disabled="isLoading"
-            class="w-full flex items-center justify-center gap-2 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+            :loading="isLoading"
+            :block="true"
+            size="md"
           >
-            <Loader2 v-if="isLoading" class="w-5 h-5 animate-spin" />
-            <span>{{ isLoading ? 'Sending...' : 'Send Reset Link' }}</span>
-          </button>
-
-          <RouterLink
-            to="/login"
-            class="flex items-center justify-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
-          >
-            <ArrowLeft class="w-4 h-4" />
-            Back to login
-          </RouterLink>
+            Send reset link
+          </Button>
         </form>
-      </div>
+
+        <RouterLink to="/login" class="auth-back-link">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M19 12H5M12 5l-7 7 7 7" />
+          </svg>
+          Back to sign in
+        </RouterLink>
+      </template>
     </div>
   </div>
 </template>
+
+<style scoped>
+.auth-shell {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default), var(--shadow-lg);
+  padding: var(--space-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.auth-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  padding-bottom: var(--space-1);
+}
+
+.auth-brand__mark {
+  color: var(--accent);
+}
+
+/* Success state */
+.auth-success {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  align-items: center;
+}
+.auth-success__addr {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Form header */
+.auth-form-header {
+  text-align: center;
+}
+.auth-form-header__title {
+  margin: 0 0 var(--space-1-5);
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: var(--tracking-tight);
+}
+.auth-form-header__sub {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* Back link */
+.auth-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  align-self: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+.auth-back-link:hover { color: var(--text-secondary); }
+</style>
diff --git a/frontend/src/views/auth/LoginView.vue b/frontend/src/views/auth/LoginView.vue
index 737dda9..5963c04 100644
--- a/frontend/src/views/auth/LoginView.vue
+++ b/frontend/src/views/auth/LoginView.vue
@@ -4,6 +4,10 @@ import { useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
 import type { AuthResponse } from '@/types'
+import Logo from '@/components/ds/brand/Logo.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
 
 const router = useRouter()
 const api = useApi()
@@ -96,158 +100,221 @@ function handleBackToLogin() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
-    <div class="w-full max-w-md">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
-        <!-- Branding -->
-        <div class="text-center mb-8">
-          <img src="/logo-hero.png" alt="Corrosion Management" class="h-32 mx-auto mb-2" />
+  <div class="auth-shell">
+    <div class="auth-card">
+      <!-- Branding -->
+      <div class="auth-brand">
+        <div class="auth-brand__mark">
+          <Logo :size="40" :glow="true" tagline="Game Server Operations" />
         </div>
-
-        <!-- Error message -->
-        <div
-          v-if="error"
-          class="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"
-        >
-          {{ error }}
-        </div>
-
-        <!-- Login form -->
-        <form v-if="!showTotpInput" @submit.prevent="handleLogin" class="space-y-5">
-          <div>
-            <label for="email" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              Email
-            </label>
-            <input
-              id="email"
-              v-model="email"
-              type="email"
-              required
-              autocomplete="email"
-              placeholder="admin@example.com"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-
-          <div>
-            <label for="password" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              Password
-            </label>
-            <input
-              id="password"
-              v-model="password"
-              type="password"
-              required
-              autocomplete="current-password"
-              placeholder="Enter your password"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-
-          <button
-            type="submit"
-            :disabled="loading"
-            class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
-          >
-            <svg
-              v-if="loading"
-              class="animate-spin h-5 w-5 text-white"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-            {{ loading ? 'Signing in...' : 'Sign In' }}
-          </button>
-        </form>
-
-        <!-- TOTP verification form -->
-        <div v-else class="space-y-5">
-          <div class="text-center">
-            <p class="text-sm text-neutral-400">
-              Enter the 6-digit code from your authenticator app.
-            </p>
-          </div>
-
-          <div>
-            <label for="totp" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              Authentication Code
-            </label>
-            <input
-              id="totp"
-              ref="totpInputEl"
-              v-model="totpCode"
-              type="text"
-              inputmode="numeric"
-              autocomplete="one-time-code"
-              placeholder="000000"
-              maxlength="6"
-              @keydown.enter="handleTotpVerify"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors text-center tracking-widest text-lg font-mono"
-            />
-          </div>
-
-          <button
-            type="button"
-            :disabled="totpCode.length !== 6 || loading"
-            @click="handleTotpVerify"
-            class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
-          >
-            <svg
-              v-if="loading"
-              class="animate-spin h-5 w-5 text-white"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-            {{ loading ? 'Verifying...' : 'Verify Code' }}
-          </button>
-
-          <button
-            type="button"
-            :disabled="loading"
-            @click="handleBackToLogin"
-            class="w-full py-2 text-sm text-neutral-500 hover:text-neutral-300 transition-colors"
-          >
-            Back to sign in
-          </button>
-        </div>
-
-        <!-- Register link -->
-        <p v-if="!showTotpInput" class="mt-6 text-center text-sm text-neutral-500">
-          Don't have an account?
-          <router-link to="/register" class="text-oxide-400 hover:text-oxide-300 transition-colors">
-            Create one
-          </router-link>
-        </p>
       </div>
+
+      <!-- Error message -->
+      <Alert v-if="error" tone="danger" class="auth-alert">{{ error }}</Alert>
+
+      <!-- Login form -->
+      <form v-if="!showTotpInput" class="auth-form" @submit.prevent="handleLogin">
+        <Input
+          v-model="email"
+          id="email"
+          label="Email"
+          type="email"
+          placeholder="admin@example.com"
+          autocomplete="email"
+          :required="true"
+        />
+
+        <Input
+          v-model="password"
+          id="password"
+          label="Password"
+          type="password"
+          placeholder="Enter your password"
+          autocomplete="current-password"
+          :required="true"
+        />
+
+        <Button
+          type="submit"
+          :loading="loading"
+          :block="true"
+          size="md"
+        >
+          Sign in
+        </Button>
+      </form>
+
+      <!-- TOTP verification -->
+      <div v-else class="auth-form">
+        <div class="auth-totp-hint">
+          <p class="auth-totp-hint__text">Enter the 6-digit code from your authenticator app.</p>
+        </div>
+
+        <div class="auth-totp-field">
+          <label class="auth-totp-field__label" for="totp">Authentication code</label>
+          <input
+            id="totp"
+            ref="totpInputEl"
+            v-model="totpCode"
+            type="text"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            placeholder="000000"
+            maxlength="6"
+            class="auth-totp-input"
+            @keydown.enter="handleTotpVerify"
+          />
+        </div>
+
+        <Button
+          type="button"
+          :loading="loading"
+          :disabled="totpCode.length !== 6"
+          :block="true"
+          size="md"
+          @click="handleTotpVerify"
+        >
+          Verify code
+        </Button>
+
+        <button
+          type="button"
+          :disabled="loading"
+          class="auth-back-link"
+          @click="handleBackToLogin"
+        >
+          Back to sign in
+        </button>
+      </div>
+
+      <!-- Register link -->
+      <p v-if="!showTotpInput" class="auth-footer">
+        No account?
+        <router-link to="/register" class="auth-footer__link">Create one</router-link>
+      </p>
     </div>
   </div>
 </template>
+
+<style scoped>
+.auth-shell {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default), var(--shadow-lg);
+  padding: var(--space-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.auth-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  padding-bottom: var(--space-2);
+}
+
+.auth-brand__mark {
+  color: var(--accent);
+}
+
+.auth-alert {
+  /* Alert component handles its own layout */
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* TOTP hint text */
+.auth-totp-hint {
+  text-align: center;
+}
+.auth-totp-hint__text {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: var(--leading-normal);
+  margin: 0;
+}
+
+/* TOTP bare input — monospace, centered, large tracking */
+.auth-totp-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+.auth-totp-field__label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+.auth-totp-input {
+  width: 100%;
+  height: var(--control-h-md);
+  padding: 0 var(--space-3);
+  background: var(--surface-inset);
+  border: none;
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: var(--text-xl);
+  font-weight: 600;
+  letter-spacing: 0.35em;
+  text-align: center;
+  outline: none;
+  box-sizing: border-box;
+  transition: box-shadow 120ms ease;
+}
+.auth-totp-input:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.auth-totp-input::placeholder {
+  color: var(--text-muted);
+  letter-spacing: 0.35em;
+}
+
+/* Ghost back link */
+.auth-back-link {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  text-align: center;
+  padding: 0;
+  transition: color 120ms ease;
+}
+.auth-back-link:hover { color: var(--text-secondary); }
+.auth-back-link:disabled { opacity: 0.45; pointer-events: none; }
+
+/* Footer link row */
+.auth-footer {
+  margin: 0;
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+.auth-footer__link {
+  color: var(--accent-text);
+  text-decoration: none;
+  font-weight: 600;
+  margin-left: 4px;
+}
+.auth-footer__link:hover { color: var(--accent-hover); }
+</style>
diff --git a/frontend/src/views/auth/RegisterView.vue b/frontend/src/views/auth/RegisterView.vue
index 3079661..89690bf 100644
--- a/frontend/src/views/auth/RegisterView.vue
+++ b/frontend/src/views/auth/RegisterView.vue
@@ -4,6 +4,10 @@ import { useRouter } from 'vue-router'
 import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
 import type { AuthResponse } from '@/types'
+import Logo from '@/components/ds/brand/Logo.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
 
 const router = useRouter()
 const api = useApi()
@@ -74,138 +78,149 @@ async function handleRegister() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
-    <div class="w-full max-w-md">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
-        <!-- Branding -->
-        <div class="text-center mb-8">
-          <img src="/logo-hero.png" alt="Corrosion Management" class="h-28 mx-auto mb-2" />
-          <p class="text-sm text-neutral-500 mt-2">Create your account</p>
+  <div class="auth-shell">
+    <div class="auth-card">
+      <!-- Branding -->
+      <div class="auth-brand">
+        <div class="auth-brand__mark">
+          <Logo :size="36" tagline="Game Server Operations" />
         </div>
-
-        <!-- Error message -->
-        <div
-          v-if="error"
-          class="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"
-        >
-          {{ error }}
-        </div>
-
-        <!-- Register form -->
-        <form @submit.prevent="handleRegister" class="space-y-5">
-          <div>
-            <label for="email" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              Email
-            </label>
-            <input
-              id="email"
-              v-model="email"
-              type="email"
-              required
-              autocomplete="email"
-              placeholder="you@example.com"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-
-          <div>
-            <label for="username" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              Username
-            </label>
-            <input
-              id="username"
-              v-model="username"
-              type="text"
-              required
-              autocomplete="username"
-              placeholder="At least 3 characters"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-
-          <div>
-            <label for="password" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              Password
-            </label>
-            <input
-              id="password"
-              v-model="password"
-              type="password"
-              required
-              autocomplete="new-password"
-              placeholder="At least 8 characters"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-
-          <div>
-            <label for="confirm-password" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              Confirm Password
-            </label>
-            <input
-              id="confirm-password"
-              v-model="confirmPassword"
-              type="password"
-              required
-              autocomplete="new-password"
-              placeholder="Re-enter your password"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-
-          <div>
-            <label for="license-key" class="block text-sm font-medium text-neutral-400 mb-1.5">
-              License Key
-            </label>
-            <input
-              id="license-key"
-              v-model="licenseKey"
-              type="text"
-              required
-              autocomplete="off"
-              placeholder="XXXX-XXXX-XXXX-XXXX"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors font-mono tracking-wider"
-            />
-          </div>
-
-          <button
-            type="submit"
-            :disabled="loading || !formValid"
-            class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
-          >
-            <svg
-              v-if="loading"
-              class="animate-spin h-5 w-5 text-white"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              />
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              />
-            </svg>
-            {{ loading ? 'Creating account...' : 'Create Account' }}
-          </button>
-        </form>
-
-        <!-- Login link -->
-        <p class="mt-6 text-center text-sm text-neutral-500">
-          Already have an account?
-          <router-link to="/login" class="text-oxide-400 hover:text-oxide-300 transition-colors">
-            Sign in
-          </router-link>
-        </p>
+        <p class="auth-brand__sub">Create your account</p>
       </div>
+
+      <!-- Error message -->
+      <Alert v-if="error" tone="danger">{{ error }}</Alert>
+
+      <!-- Register form -->
+      <form class="auth-form" @submit.prevent="handleRegister">
+        <Input
+          v-model="email"
+          id="email"
+          label="Email"
+          type="email"
+          placeholder="you@example.com"
+          autocomplete="email"
+          :required="true"
+        />
+
+        <Input
+          v-model="username"
+          id="username"
+          label="Username"
+          type="text"
+          placeholder="At least 3 characters"
+          autocomplete="username"
+          :required="true"
+        />
+
+        <Input
+          v-model="password"
+          id="password"
+          label="Password"
+          type="password"
+          placeholder="At least 8 characters"
+          autocomplete="new-password"
+          :required="true"
+        />
+
+        <Input
+          v-model="confirmPassword"
+          id="confirm-password"
+          label="Confirm password"
+          type="password"
+          placeholder="Re-enter your password"
+          autocomplete="new-password"
+          :required="true"
+        />
+
+        <Input
+          v-model="licenseKey"
+          id="license-key"
+          label="License key"
+          type="text"
+          placeholder="XXXX-XXXX-XXXX-XXXX"
+          autocomplete="off"
+          :mono="true"
+          :required="true"
+        />
+
+        <Button
+          type="submit"
+          :loading="loading"
+          :disabled="!formValid"
+          :block="true"
+          size="md"
+        >
+          Create account
+        </Button>
+      </form>
+
+      <!-- Login link -->
+      <p class="auth-footer">
+        Already have an account?
+        <router-link to="/login" class="auth-footer__link">Sign in</router-link>
+      </p>
     </div>
   </div>
 </template>
+
+<style scoped>
+.auth-shell {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 400px;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default), var(--shadow-lg);
+  padding: var(--space-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.auth-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  padding-bottom: var(--space-1);
+}
+
+.auth-brand__mark {
+  color: var(--accent);
+}
+
+.auth-brand__sub {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.auth-footer {
+  margin: 0;
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+.auth-footer__link {
+  color: var(--accent-text);
+  text-decoration: none;
+  font-weight: 600;
+  margin-left: 4px;
+}
+.auth-footer__link:hover { color: var(--accent-hover); }
+</style>
diff --git a/frontend/src/views/auth/SetupWizardView.vue b/frontend/src/views/auth/SetupWizardView.vue
index 57fc042..d2f3262 100644
--- a/frontend/src/views/auth/SetupWizardView.vue
+++ b/frontend/src/views/auth/SetupWizardView.vue
@@ -3,7 +3,10 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useApi } from '@/composables/useApi'
-import { Server, Wifi, CheckCircle, ArrowRight, Loader2 } from 'lucide-vue-next'
+import Logo from '@/components/ds/brand/Logo.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
 
 const router = useRouter()
 const auth = useAuthStore()
@@ -21,13 +24,25 @@ const serverForm = ref({
   game_port: 28015,
 })
 
+// String mirrors for the DS Input component (which binds defineModel<string>).
+// Changes sync back to serverForm as numbers before submission.
+const serverPortStr = ref(String(serverForm.value.server_port))
+const gamePortStr = ref(String(serverForm.value.game_port))
+
+function syncPorts() {
+  serverForm.value.server_port = parseInt(serverPortStr.value, 10) || serverForm.value.server_port
+  serverForm.value.game_port = parseInt(gamePortStr.value, 10) || serverForm.value.game_port
+}
+
 const connectionTypes = [
-  { value: 'bare_metal', label: 'Bare Metal / VPS', desc: 'Direct connection via Companion Agent' },
+  { value: 'bare_metal', label: 'Bare metal / VPS', desc: 'Direct connection via Companion Agent' },
   { value: 'amp', label: 'AMP (CubeCoders)', desc: 'Connect through AMP panel API' },
   { value: 'pterodactyl', label: 'Pterodactyl', desc: 'Connect through Pterodactyl panel API' },
 ]
 
 async function submitServerConfig() {
+  syncPorts()
+
   if (!serverForm.value.server_name.trim()) {
     error.value = 'Server name is required.'
     return
@@ -58,180 +73,464 @@ async function completeSetup() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
-    <div class="w-full max-w-lg">
-      <!-- Progress -->
-      <div class="flex items-center justify-center gap-3 mb-8">
-        <div
-          class="flex items-center gap-2 text-sm"
-          :class="step >= 1 ? 'text-oxide-400' : 'text-neutral-600'"
-        >
-          <Server class="w-4 h-4" />
-          Server
-        </div>
-        <div class="w-8 h-px" :class="step >= 2 ? 'bg-oxide-500' : 'bg-neutral-700'" />
-        <div
-          class="flex items-center gap-2 text-sm"
-          :class="step >= 2 ? 'text-oxide-400' : 'text-neutral-600'"
-        >
-          <Wifi class="w-4 h-4" />
-          Connect
-        </div>
-        <div class="w-8 h-px" :class="step >= 3 ? 'bg-oxide-500' : 'bg-neutral-700'" />
-        <div
-          class="flex items-center gap-2 text-sm"
-          :class="step >= 3 ? 'text-oxide-400' : 'text-neutral-600'"
-        >
-          <CheckCircle class="w-4 h-4" />
-          Done
+  <div class="setup-shell">
+    <div class="setup-wrap">
+      <!-- Brand header -->
+      <div class="setup-brand">
+        <div class="setup-brand__mark">
+          <Logo :size="30" tagline="Setup" />
         </div>
       </div>
 
-      <!-- Step 1: Server Config -->
-      <div v-if="step === 1" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
-        <div class="text-center mb-6">
-          <img src="/logo.png" alt="Corrosion" class="h-12 w-12 mx-auto mb-3" />
-          <h1 class="text-xl font-bold text-neutral-100">Configure Your Server</h1>
-          <p class="text-sm text-neutral-500 mt-1">Let's get your Rust server connected to Corrosion.</p>
+      <!-- Progress stepper -->
+      <div class="setup-steps">
+        <div
+          v-for="(s, i) in [
+            { label: 'Server', icon: 'server' },
+            { label: 'Connect', icon: 'wifi' },
+            { label: 'Done', icon: 'check' },
+          ]"
+          :key="i"
+          class="setup-step"
+          :class="{
+            'setup-step--active': step === i + 1,
+            'setup-step--done': step > i + 1,
+          }"
+        >
+          <span class="setup-step__num">{{ step > i + 1 ? '✓' : i + 1 }}</span>
+          <span class="setup-step__label">{{ s.label }}</span>
+          <div v-if="i < 2" class="setup-step__connector" :class="step > i + 1 ? 'setup-step__connector--done' : ''" />
+        </div>
+      </div>
+
+      <!-- Step 1: Server config -->
+      <div v-if="step === 1" class="setup-card">
+        <div class="setup-card__head">
+          <h1 class="setup-card__title">Configure your server</h1>
+          <p class="setup-card__sub">Connect your Rust server to Corrosion.</p>
         </div>
 
-        <div v-if="error" class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
-          {{ error }}
-        </div>
+        <Alert v-if="error" tone="danger">{{ error }}</Alert>
 
-        <form @submit.prevent="submitServerConfig" class="space-y-4">
-          <div>
-            <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
-            <input
-              v-model="serverForm.server_name"
-              type="text"
-              required
-              placeholder="My Rust Server"
-              class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
+        <form class="setup-form" @submit.prevent="submitServerConfig">
+          <Input
+            v-model="serverForm.server_name"
+            label="Server name"
+            type="text"
+            placeholder="My Rust Server"
+            :required="true"
+          />
 
-          <div>
-            <label class="block text-xs text-neutral-500 mb-2">Connection Type</label>
-            <div class="space-y-2">
+          <!-- Connection type selector -->
+          <div class="conn-group">
+            <span class="conn-group__label">Connection type</span>
+            <div class="conn-options">
               <label
                 v-for="ct in connectionTypes"
                 :key="ct.value"
-                class="flex items-start gap-3 p-3 bg-neutral-800 border rounded-lg cursor-pointer transition-colors"
-                :class="serverForm.connection_type === ct.value
-                  ? 'border-oxide-500/50 bg-oxide-500/5'
-                  : 'border-neutral-700 hover:border-neutral-600'"
+                class="conn-option"
+                :class="serverForm.connection_type === ct.value ? 'conn-option--active' : ''"
               >
                 <input
                   v-model="serverForm.connection_type"
                   :value="ct.value"
                   type="radio"
                   name="connection_type"
-                  class="mt-0.5 accent-oxide-500"
+                  class="conn-option__radio"
                 />
-                <div>
-                  <p class="text-sm font-medium text-neutral-200">{{ ct.label }}</p>
-                  <p class="text-xs text-neutral-500">{{ ct.desc }}</p>
+                <div class="conn-option__body">
+                  <span class="conn-option__name">{{ ct.label }}</span>
+                  <span class="conn-option__desc">{{ ct.desc }}</span>
                 </div>
               </label>
             </div>
           </div>
 
-          <div class="grid grid-cols-3 gap-3">
-            <div class="col-span-1">
-              <label class="block text-xs text-neutral-500 mb-1">Server IP</label>
-              <input
-                v-model="serverForm.server_ip"
-                type="text"
-                placeholder="0.0.0.0"
-                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              />
-            </div>
-            <div>
-              <label class="block text-xs text-neutral-500 mb-1">RCON Port</label>
-              <input
-                v-model.number="serverForm.server_port"
-                type="number"
-                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              />
-            </div>
-            <div>
-              <label class="block text-xs text-neutral-500 mb-1">Game Port</label>
-              <input
-                v-model.number="serverForm.game_port"
-                type="number"
-                class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              />
-            </div>
+          <!-- Port / IP row -->
+          <div class="setup-ports">
+            <Input
+              v-model="serverForm.server_ip"
+              label="Server IP"
+              type="text"
+              placeholder="0.0.0.0"
+              :mono="true"
+            />
+            <Input
+              v-model="serverPortStr"
+              label="RCON port"
+              type="text"
+              placeholder="28016"
+              :mono="true"
+            />
+            <Input
+              v-model="gamePortStr"
+              label="Game port"
+              type="text"
+              placeholder="28015"
+              :mono="true"
+            />
           </div>
 
-          <button
+          <Button
             type="submit"
-            :disabled="isLoading"
-            class="w-full flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
+            :loading="isLoading"
+            :block="true"
+            size="md"
+            icon-right="arrow-right"
           >
-            <Loader2 v-if="isLoading" class="w-4 h-4 animate-spin" />
-            <template v-else>
-              Continue
-              <ArrowRight class="w-4 h-4" />
-            </template>
-          </button>
+            Continue
+          </Button>
         </form>
       </div>
 
-      <!-- Step 2: Connection Instructions -->
-      <div v-if="step === 2" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
-        <div class="text-center mb-6">
-          <Wifi class="w-10 h-10 text-oxide-500 mx-auto mb-3" />
-          <h1 class="text-xl font-bold text-neutral-100">Install the Companion Agent</h1>
-          <p class="text-sm text-neutral-500 mt-1">
-            The Companion Agent runs on your server and connects to Corrosion securely — no inbound ports required.
-          </p>
+      <!-- Step 2: Companion agent install -->
+      <div v-if="step === 2" class="setup-card">
+        <div class="setup-card__head setup-card__head--center">
+          <div class="setup-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" />
+            </svg>
+          </div>
+          <h1 class="setup-card__title">Install the Companion Agent</h1>
+          <p class="setup-card__sub">The agent runs on your server and connects to Corrosion — no inbound ports required.</p>
         </div>
 
-        <div class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 mb-6">
-          <p class="text-neutral-500 mb-2"># Download and install the Companion Agent</p>
-          <p class="text-oxide-400">curl -sSL https://get.corrosionmgmt.com | sh</p>
-          <p class="text-neutral-500 mt-3 mb-2"># Start the agent with your license key</p>
-          <p class="text-oxide-400">corrosion-agent start --key {{ auth.license?.license_key || 'YOUR-LICENSE-KEY' }}</p>
+        <div class="setup-code">
+          <p class="setup-code__comment"># Download and install the Companion Agent</p>
+          <p class="setup-code__cmd">curl -sSL https://get.corrosionmgmt.com | sh</p>
+          <p class="setup-code__comment setup-code__comment--mt"># Start the agent with your license key</p>
+          <p class="setup-code__cmd">corrosion-agent start --key {{ auth.license?.license_key ?? 'YOUR-LICENSE-KEY' }}</p>
         </div>
 
-        <p class="text-xs text-neutral-500 text-center mb-6">
-          The agent will automatically register with your panel. You can also use the uMod plugin for lightweight integration.
+        <p class="setup-hint">
+          The agent auto-registers with your panel. You can also use the uMod plugin for lightweight integration.
         </p>
 
-        <div class="flex gap-3">
-          <button
+        <div class="setup-actions">
+          <Button
+            type="button"
+            variant="secondary"
+            size="md"
             @click="step = 3"
-            class="flex-1 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-medium rounded-lg text-sm transition-colors text-center"
           >
-            Skip for Now
-          </button>
-          <button
+            Skip for now
+          </Button>
+          <Button
+            type="button"
+            size="md"
+            icon-right="arrow-right"
             @click="step = 3"
-            class="flex-1 flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg text-sm transition-colors"
           >
-            I've Installed It
-            <ArrowRight class="w-4 h-4" />
-          </button>
+            I've installed it
+          </Button>
         </div>
       </div>
 
       <!-- Step 3: Complete -->
-      <div v-if="step === 3" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 text-center">
-        <CheckCircle class="w-12 h-12 text-green-400 mx-auto mb-4" />
-        <h1 class="text-xl font-bold text-neutral-100 mb-2">You're All Set</h1>
-        <p class="text-sm text-neutral-500 mb-6">
-          Your server is configured. Head to the dashboard to start managing your Rust server.
-        </p>
-        <button
+      <div v-if="step === 3" class="setup-card setup-card--center">
+        <div class="setup-complete-icon">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+            <polyline points="22 4 12 14.01 9 11.01" />
+          </svg>
+        </div>
+        <h1 class="setup-card__title">You're all set</h1>
+        <p class="setup-card__sub">Your server is configured. Head to the dashboard to start managing your Rust server.</p>
+        <Button
+          type="button"
+          :loading="isLoading"
+          :block="true"
+          size="md"
           @click="completeSetup"
-          :disabled="isLoading"
-          class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
         >
-          Go to Dashboard
-        </button>
+          Go to dashboard
+        </Button>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.setup-shell {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+}
+
+.setup-wrap {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+/* Brand */
+.setup-brand {
+  display: flex;
+  justify-content: center;
+}
+.setup-brand__mark {
+  color: var(--accent);
+}
+
+/* Progress stepper */
+.setup-steps {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+}
+
+.setup-step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  position: relative;
+}
+
+.setup-step__num {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  color: var(--text-muted);
+  flex: none;
+  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
+}
+
+.setup-step--active .setup-step__num {
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+  color: var(--accent-text);
+}
+
+.setup-step--done .setup-step__num {
+  background: var(--accent);
+  box-shadow: none;
+  color: var(--accent-contrast);
+}
+
+.setup-step__label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.setup-step--active .setup-step__label,
+.setup-step--done .setup-step__label {
+  color: var(--text-secondary);
+}
+
+.setup-step__connector {
+  width: 40px;
+  height: 1px;
+  background: var(--border-default);
+  margin: 0 var(--space-2);
+  flex: none;
+  transition: background 200ms ease;
+}
+
+.setup-step__connector--done {
+  background: var(--accent-border);
+}
+
+/* Card */
+.setup-card {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default), var(--shadow-lg);
+  padding: var(--space-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.setup-card--center {
+  align-items: center;
+  text-align: center;
+}
+
+.setup-card__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+
+.setup-card__head--center {
+  align-items: center;
+  text-align: center;
+}
+
+.setup-card__title {
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: var(--tracking-tight);
+}
+
+.setup-card__sub {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: var(--leading-normal);
+}
+
+/* Icon in step 2 header */
+.setup-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+  color: var(--accent-text);
+  flex: none;
+}
+
+/* Step 3 check icon */
+.setup-complete-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--status-online-soft);
+  box-shadow: inset 0 0 0 1px var(--status-online-border);
+  color: var(--status-online);
+}
+
+/* Form */
+.setup-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* Connection type group */
+.conn-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1-5);
+}
+
+.conn-group__label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.conn-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.conn-option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--surface-inset);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  cursor: pointer;
+  transition: box-shadow 120ms ease, background 120ms ease;
+}
+
+.conn-option--active {
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+.conn-option__radio {
+  margin-top: 2px;
+  accent-color: var(--accent);
+  flex: none;
+}
+
+.conn-option__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.conn-option__name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.conn-option__desc {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+
+/* Port grid */
+.setup-ports {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: var(--space-3);
+}
+
+/* Code block */
+.setup-code {
+  background: var(--surface-sunken);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-subtle);
+  padding: var(--space-4) var(--space-5);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.8;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.setup-code__comment {
+  margin: 0;
+  color: var(--text-muted);
+}
+
+.setup-code__comment--mt {
+  margin-top: var(--space-2);
+}
+
+.setup-code__cmd {
+  margin: 0;
+  color: var(--accent-text);
+  word-break: break-all;
+}
+
+.setup-hint {
+  margin: 0;
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  text-align: center;
+  line-height: var(--leading-normal);
+}
+
+.setup-actions {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.setup-actions > * {
+  flex: 1;
+}
+</style>

From b42a2d7ea7b2949786cebd834aa8f46447fa8255 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 02:34:46 -0400
Subject: [PATCH 3/7] feat(redesign): re-skin
 server-ops/operations/store/analytics views to DS (Phase D batch 2)

18 admin views re-skinned onto design-system components + tokens: Server/Players/Plugins/ChatLog, Wipes/WipeProfiles/Maps/Schedules/Alerts, StoreConfig/StoreItems/ModuleStore, Analytics/WipeAnalytics/MapAnalytics/PlayerRetention/StoreRevenue. ECharts now read var(--accent) (token-driven, follows game skin). 14 icons added to the registry. All logic/store/router/handlers/API calls preserved; presentation-only re-skin. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/ds/core/Icon.vue      |    8 +
 frontend/src/views/admin/AlertsView.vue       |  414 ++++---
 frontend/src/views/admin/AnalyticsView.vue    |  338 ++++--
 frontend/src/views/admin/ChatLogView.vue      |  243 ++--
 frontend/src/views/admin/MapAnalyticsView.vue |  398 ++++---
 frontend/src/views/admin/MapsView.vue         |  239 +++-
 frontend/src/views/admin/ModuleStoreView.vue  |  535 +++++----
 .../src/views/admin/PlayerRetentionView.vue   |  362 ++++--
 frontend/src/views/admin/PlayersView.vue      |  292 +++--
 frontend/src/views/admin/PluginsView.vue      |  604 ++++++----
 frontend/src/views/admin/SchedulesView.vue    |  393 ++++--
 frontend/src/views/admin/ServerView.vue       | 1052 +++++++++--------
 frontend/src/views/admin/StoreConfigView.vue  |  340 +++---
 frontend/src/views/admin/StoreItemsView.vue   |  710 ++++++-----
 frontend/src/views/admin/StoreRevenueView.vue |  440 ++++---
 .../src/views/admin/WipeAnalyticsView.vue     |  342 ++++--
 frontend/src/views/admin/WipeProfilesView.vue |  651 ++++++----
 frontend/src/views/admin/WipesView.vue        |  573 ++++++---
 18 files changed, 4826 insertions(+), 3108 deletions(-)

diff --git a/frontend/src/components/ds/core/Icon.vue b/frontend/src/components/ds/core/Icon.vue
index 94419d6..1349f66 100644
--- a/frontend/src/components/ds/core/Icon.vue
+++ b/frontend/src/components/ds/core/Icon.vue
@@ -20,6 +20,9 @@ import {
   Info, OctagonAlert, CircleCheck, Sparkles, Inbox,
   LayoutDashboard, CalendarClock, Drama, ChevronsUpDown, ServerCog,
   LayoutGrid, SquareDashed, MemoryStick, CornerDownLeft,
+  Ban, Flag,
+  CircleAlert, ArrowDown, Award, DollarSign, FlaskConical, Mail, Package,
+  Pencil, Save, ShoppingBag, Target, User,
 } from 'lucide-vue-next'
 
 const props = withDefaults(
@@ -50,6 +53,11 @@ const registry: Record<string, Component> = {
   'layout-dashboard': LayoutDashboard, 'calendar-clock': CalendarClock, drama: Drama,
   'chevrons-up-down': ChevronsUpDown, 'server-cog': ServerCog, 'layout-grid': LayoutGrid,
   'square-dashed': SquareDashed, 'memory-stick': MemoryStick, 'corner-down-left': CornerDownLeft,
+  ban: Ban, flag: Flag,
+  'alert-circle': CircleAlert, 'arrow-down': ArrowDown, award: Award,
+  'dollar-sign': DollarSign, 'flask-conical': FlaskConical, mail: Mail,
+  package: Package, pencil: Pencil, save: Save, 'shopping-bag': ShoppingBag,
+  target: Target, user: User,
 }
 
 const cmp = computed<Component | null>(() => registry[props.name] ?? null)
diff --git a/frontend/src/views/admin/AlertsView.vue b/frontend/src/views/admin/AlertsView.vue
index ee84e2a..54b1669 100644
--- a/frontend/src/views/admin/AlertsView.vue
+++ b/frontend/src/views/admin/AlertsView.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
-import { AlertTriangle, Save, Loader2 } from 'lucide-vue-next'
 import { safeDate } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Checkbox from '@/components/ds/forms/Checkbox.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 interface AlertConfig {
   population_drop_enabled: boolean
@@ -62,15 +68,29 @@ async function saveConfig() {
   }
 }
 
-function getSeverityColor(severity: string): string {
-  switch (severity) {
-    case 'info': return 'bg-blue-500/10 text-blue-400'
-    case 'warning': return 'bg-yellow-500/10 text-yellow-400'
-    case 'critical': return 'bg-red-500/10 text-red-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+function severityTone(severity: string): 'info' | 'warn' | 'offline' | 'neutral' {
+  if (severity === 'info') return 'info'
+  if (severity === 'warning') return 'warn'
+  if (severity === 'critical') return 'offline'
+  return 'neutral'
+}
+
+// Range input handler (range emits string, keep numeric in config)
+function onThresholdInput(e: Event) {
+  const val = parseInt((e.target as HTMLInputElement).value, 10)
+  if (!isNaN(val)) {
+    config.value.population_drop_threshold_percent = val
   }
 }
 
+// FPS threshold: DS Input binds string; sync via a string ref
+const fpsStr = ref(String(config.value.fps_threshold))
+function onFpsUpdate(val: string | undefined) {
+  fpsStr.value = val ?? ''
+  const n = parseInt(val ?? '', 10)
+  if (!isNaN(n)) config.value.fps_threshold = n
+}
+
 onMounted(() => {
   fetchConfig()
   fetchHistory()
@@ -78,156 +98,258 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <AlertTriangle class="w-5 h-5 text-oxide-500" />
-      <h1 class="text-2xl font-bold text-neutral-100">Alerts</h1>
-    </div>
-
-    <!-- Alert Configuration -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Alert Configuration</h2>
-
-      <div v-if="isLoading" class="py-8 flex justify-center">
-        <Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
-      </div>
-
-      <div v-else class="space-y-6">
-        <!-- Population Drop Alert -->
-        <div class="space-y-3">
-          <div class="flex items-center justify-between">
-            <label class="text-sm font-medium text-neutral-200">Population Drop Alert</label>
-            <button
-              @click="config.population_drop_enabled = !config.population_drop_enabled"
-              class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-              :class="config.population_drop_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
-                :class="config.population_drop_enabled ? 'translate-x-6' : 'translate-x-1'"
-              />
-            </button>
-          </div>
-          <div v-if="config.population_drop_enabled">
-            <label class="block text-xs text-neutral-500 mb-2">Threshold (%)</label>
-            <input
-              v-model.number="config.population_drop_threshold_percent"
-              type="range"
-              min="10"
-              max="100"
-              class="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-oxide-500"
-            />
-            <div class="text-xs text-neutral-400 mt-1">{{ config.population_drop_threshold_percent }}%</div>
-          </div>
-        </div>
-
-        <!-- FPS Degradation Alert -->
-        <div class="space-y-3">
-          <div class="flex items-center justify-between">
-            <label class="text-sm font-medium text-neutral-200">FPS Degradation Alert</label>
-            <button
-              @click="config.fps_degradation_enabled = !config.fps_degradation_enabled"
-              class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-              :class="config.fps_degradation_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
-                :class="config.fps_degradation_enabled ? 'translate-x-6' : 'translate-x-1'"
-              />
-            </button>
-          </div>
-          <div v-if="config.fps_degradation_enabled">
-            <label class="block text-xs text-neutral-500 mb-2">FPS Threshold</label>
-            <input
-              v-model.number="config.fps_threshold"
-              type="number"
-              min="10"
-              max="60"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
-            />
-          </div>
-        </div>
-
-        <!-- Notification Channels -->
-        <div class="border-t border-neutral-800 pt-4">
-          <h3 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-3">Notification Channels</h3>
-          <div class="space-y-2">
-            <label class="flex items-center gap-3 cursor-pointer">
-              <input
-                v-model="config.notify_discord"
-                type="checkbox"
-                class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-500 focus:ring-2 focus:ring-oxide-500"
-              />
-              <span class="text-sm text-neutral-200">Discord</span>
-            </label>
-            <label class="flex items-center gap-3 cursor-pointer">
-              <input
-                v-model="config.notify_pushbullet"
-                type="checkbox"
-                class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-500 focus:ring-2 focus:ring-oxide-500"
-              />
-              <span class="text-sm text-neutral-200">Pushbullet</span>
-            </label>
-            <label class="flex items-center gap-3 cursor-pointer">
-              <input
-                v-model="config.notify_email"
-                type="checkbox"
-                class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-500 focus:ring-2 focus:ring-oxide-500"
-              />
-              <span class="text-sm text-neutral-200">Email</span>
-            </label>
-          </div>
-        </div>
-
-        <!-- Save Button -->
-        <button
-          @click="saveConfig"
-          :disabled="isSaving"
-          class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
-        >
-          <Loader2 v-if="isSaving" class="w-4 h-4 animate-spin" />
-          <Save v-else class="w-4 h-4" />
-          Save Configuration
-        </button>
+  <div class="alerts">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Monitoring</div>
+        <h1 class="page__title">Alerts</h1>
       </div>
     </div>
 
-    <!-- Alert History -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <div class="p-5 border-b border-neutral-800">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Alert History</h2>
+    <!-- Alert configuration -->
+    <Panel title="Alert configuration" subtitle="Trigger conditions and notification channels">
+      <div v-if="isLoading" class="loading-row">
+        <span class="cc-btn__spin" style="width:20px;height:20px;border-width:2.5px;" />
       </div>
-      <div v-if="history.length === 0" class="p-8 text-center text-neutral-500">
-        No alerts triggered yet.
+
+      <div v-else class="config-body">
+        <!-- Triggers section -->
+        <div class="config-section">
+          <div class="t-eyebrow config-section__eyebrow">Triggers</div>
+
+          <!-- Population drop -->
+          <div class="alert-rule">
+            <div class="alert-rule__head">
+              <div>
+                <div class="alert-rule__name">Population drop alert</div>
+                <div class="alert-rule__desc">Fire when player count falls by this percentage</div>
+              </div>
+              <Switch v-model="config.population_drop_enabled" />
+            </div>
+            <div v-if="config.population_drop_enabled" class="alert-rule__body">
+              <div class="range-field">
+                <input
+                  type="range"
+                  :value="config.population_drop_threshold_percent"
+                  min="10"
+                  max="100"
+                  class="cc-range"
+                  @input="onThresholdInput"
+                />
+                <span class="range-value">{{ config.population_drop_threshold_percent }}%</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- FPS degradation -->
+          <div class="alert-rule">
+            <div class="alert-rule__head">
+              <div>
+                <div class="alert-rule__name">FPS degradation alert</div>
+                <div class="alert-rule__desc">Fire when server FPS drops below threshold</div>
+              </div>
+              <Switch v-model="config.fps_degradation_enabled" />
+            </div>
+            <div v-if="config.fps_degradation_enabled" class="alert-rule__body">
+              <Input
+                :model-value="fpsStr"
+                label="FPS threshold"
+                type="number"
+                :mono="true"
+                hint="Minimum acceptable FPS (10–60)"
+                @update:model-value="onFpsUpdate"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Notification channels -->
+        <div class="config-section">
+          <div class="t-eyebrow config-section__eyebrow">Notification channels</div>
+          <div class="channels">
+            <Checkbox v-model="config.notify_discord" label="Discord" />
+            <Checkbox v-model="config.notify_pushbullet" label="Pushbullet" />
+            <Checkbox v-model="config.notify_email" label="Email" />
+          </div>
+        </div>
+
+        <!-- Save -->
+        <Button icon="save" :loading="isSaving" @click="saveConfig">
+          Save configuration
+        </Button>
       </div>
-      <table v-else class="w-full">
-        <thead class="bg-neutral-800/50 border-b border-neutral-800">
+    </Panel>
+
+    <!-- Alert history -->
+    <Panel :flush-body="true" title="Alert history">
+      <EmptyState
+        v-if="history.length === 0"
+        icon="triangle-alert"
+        title="No alerts triggered"
+        description="Alerts will appear here when trigger conditions are met."
+      />
+      <table v-else class="cc-table">
+        <thead>
           <tr>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Triggered</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Severity</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Title</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Message</th>
+            <th>Triggered</th>
+            <th>Type</th>
+            <th>Severity</th>
+            <th>Title</th>
+            <th>Message</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-for="alert in history" :key="alert.id" class="hover:bg-neutral-800/30">
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ safeDate(alert.triggered_at) }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ alert.alert_type }}</td>
-            <td class="px-4 py-3">
-              <span
-                class="text-xs font-medium px-2 py-0.5 rounded-full capitalize"
-                :class="getSeverityColor(alert.severity)"
-              >
-                {{ alert.severity }}
-              </span>
+        <tbody>
+          <tr v-for="entry in history" :key="entry.id">
+            <td class="td-mono">{{ safeDate(entry.triggered_at) }}</td>
+            <td>{{ entry.alert_type }}</td>
+            <td>
+              <Badge :tone="severityTone(entry.severity)">{{ entry.severity }}</Badge>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-200">{{ alert.title }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ alert.message }}</td>
+            <td class="td-primary">{{ entry.title }}</td>
+            <td>{{ entry.message }}</td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.alerts {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Page head */
+.page__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+.page__title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin-top: 4px;
+}
+
+/* Loading row */
+.loading-row {
+  display: flex;
+  justify-content: center;
+  padding: 40px;
+}
+
+/* Config body */
+.config-body {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.config-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.config-section__eyebrow { margin-bottom: 4px; }
+
+/* Alert rule card */
+.alert-rule {
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+}
+.alert-rule__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 13px 15px;
+}
+.alert-rule__name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.alert-rule__desc {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: 2px;
+}
+.alert-rule__body {
+  border-top: 1px solid var(--border-subtle);
+  padding: 13px 15px;
+}
+
+/* Range slider */
+.range-field {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.cc-range {
+  flex: 1;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  appearance: none;
+  background: var(--surface-active);
+  cursor: pointer;
+  accent-color: var(--accent);
+  outline: 0;
+}
+.range-value {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--accent-text);
+  font-weight: 600;
+  min-width: 36px;
+  text-align: right;
+}
+
+/* Channels */
+.channels {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Table */
+.cc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.cc-table thead tr {
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-inset);
+}
+.cc-table th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+.cc-table tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.cc-table tbody tr:last-child { border-bottom: 0; }
+.cc-table tbody tr:hover { background: var(--surface-hover); }
+.cc-table td {
+  padding: 11px 16px;
+  color: var(--text-secondary);
+  vertical-align: middle;
+}
+.td-primary { color: var(--text-primary); font-weight: 500; }
+.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+</style>
diff --git a/frontend/src/views/admin/AnalyticsView.vue b/frontend/src/views/admin/AnalyticsView.vue
index 5033608..2285874 100644
--- a/frontend/src/views/admin/AnalyticsView.vue
+++ b/frontend/src/views/admin/AnalyticsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, nextTick } from 'vue'
-import { BarChart3, TrendingUp, Users, Clock, Download } from 'lucide-vue-next'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import { useApi } from '@/composables/useApi'
@@ -8,6 +7,11 @@ import { useAuthStore } from '@/stores/auth'
 import { useToastStore } from '@/stores/toast'
 import type { AnalyticsSummary, TimeseriesData } from '@/types'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const api = useApi()
 const authStore = useAuthStore()
@@ -54,9 +58,22 @@ const loadAnalytics = async () => {
   }
 }
 
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
 const renderCharts = () => {
   if (!timeseries.value) return
 
+  const accent = cssVar('--accent') || '#CE422B'
+  const grid   = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
+  const axisLine = cssVar('--border-default') || '#404040'
+  const labelColor = cssVar('--text-tertiary') || '#808080'
+  const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
+  const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
+  const tooltipText = cssVar('--text-primary') || '#e5e5e5'
+  const mono = 'JetBrains Mono, monospace'
+
   // Player count chart
   if (playerChart.value) {
     if (playerChartInstance) {
@@ -68,9 +85,9 @@ const renderCharts = () => {
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' }
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
       },
       grid: {
         left: '3%',
@@ -86,14 +103,14 @@ const renderCharts = () => {
           day: 'numeric',
           hour: '2-digit'
         })),
-        axisLine: { lineStyle: { color: '#404040' } },
-        axisLabel: { color: '#808080', rotate: 45 }
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
       },
       yAxis: {
         type: 'value',
-        axisLine: { lineStyle: { color: '#404040' } },
-        splitLine: { lineStyle: { color: '#2a2a2a' } },
-        axisLabel: { color: '#808080' }
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: grid } },
+        axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
       },
       series: [
         {
@@ -101,14 +118,14 @@ const renderCharts = () => {
           type: 'line',
           data: timeseries.value.player_count,
           smooth: true,
-          lineStyle: { color: '#CE422B', width: 2 },
+          lineStyle: { color: accent, width: 2 },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(206, 66, 43, 0.3)' },
-              { offset: 1, color: 'rgba(206, 66, 43, 0)' }
+              { offset: 0, color: accent + '55' },
+              { offset: 1, color: accent + '00' }
             ])
           },
-          itemStyle: { color: '#CE422B' }
+          itemStyle: { color: accent }
         }
       ]
     })
@@ -125,13 +142,13 @@ const renderCharts = () => {
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' }
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
       },
       legend: {
         data: ['FPS', 'Entities'],
-        textStyle: { color: '#a3a3a3' },
+        textStyle: { color: labelColor, fontFamily: mono },
         top: 0
       },
       grid: {
@@ -148,25 +165,25 @@ const renderCharts = () => {
           day: 'numeric',
           hour: '2-digit'
         })),
-        axisLine: { lineStyle: { color: '#404040' } },
-        axisLabel: { color: '#808080', rotate: 45 }
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
       },
       yAxis: [
         {
           type: 'value',
           name: 'FPS',
           position: 'left',
-          axisLine: { lineStyle: { color: '#404040' } },
-          splitLine: { lineStyle: { color: '#2a2a2a' } },
-          axisLabel: { color: '#808080' }
+          axisLine: { lineStyle: { color: axisLine } },
+          splitLine: { lineStyle: { color: grid } },
+          axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
         },
         {
           type: 'value',
           name: 'Entities',
           position: 'right',
-          axisLine: { lineStyle: { color: '#404040' } },
+          axisLine: { lineStyle: { color: axisLine } },
           splitLine: { show: false },
-          axisLabel: { color: '#808080' }
+          axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
         }
       ],
       series: [
@@ -223,114 +240,209 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
+  <div class="analytics-view">
     <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <BarChart3 class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Analytics</h1>
-      </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="downloadCSV"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
-        >
-          <Download class="w-4 h-4" />
+    <div class="analytics-view__header">
+      <h1 class="analytics-view__title">Analytics</h1>
+      <div class="analytics-view__controls">
+        <Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
           Export CSV
-        </button>
-        <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-          <button
-            v-for="opt in (['24h', '7d', '30d'] as const)"
-            :key="opt"
-            @click="timeRange = opt"
-            class="px-3 py-2 text-sm font-medium transition-colors"
-            :class="timeRange === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-          >
-            {{ opt }}
-          </button>
-        </div>
+        </Button>
+        <Tabs
+          :items="(['24h', '7d', '30d'] as const).map(v => ({ value: v, label: v }))"
+          v-model="timeRange"
+          variant="pill"
+        />
       </div>
     </div>
 
     <!-- Loading state -->
-    <div v-if="loading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading analytics...</div>
+    <div v-if="loading" class="analytics-view__loading">
+      <span class="analytics-view__loading-text">Loading analytics...</span>
     </div>
 
     <template v-else-if="summary">
       <!-- Stat cards -->
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Users class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Peak Players</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ summary.peak_players }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
-        </div>
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <TrendingUp class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Avg Players</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ safeFixed(summary?.avg_players, 1) }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
-        </div>
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Clock class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Uptime</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ safeFixed(summary?.uptime_percentage, 1) }}%</p>
-          <p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
-        </div>
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <BarChart3 class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Unique Players</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ summary.unique_players ?? '—' }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Phase 2.2</p>
-        </div>
+      <div class="analytics-view__stats">
+        <StatCard
+          label="Peak players"
+          :value="summary.peak_players ?? '—'"
+          icon="users"
+          :note="`Last ${timeRange}`"
+        />
+        <StatCard
+          label="Avg players"
+          :value="safeFixed(summary?.avg_players, 1)"
+          icon="trending-up"
+          :note="`Last ${timeRange}`"
+        />
+        <StatCard
+          label="Uptime"
+          :value="safeFixed(summary?.uptime_percentage, 1)"
+          unit="%"
+          icon="clock"
+          :note="`Last ${timeRange}`"
+        />
+        <StatCard
+          label="Unique players"
+          :value="summary.unique_players ?? '—'"
+          icon="bar-chart-3"
+          note="Phase 2.2"
+        />
       </div>
 
       <!-- Charts -->
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Player Count Over Time</h2>
-          <div ref="playerChart" class="h-64"></div>
-        </div>
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Server Performance</h2>
-          <div ref="perfChart" class="h-64"></div>
-        </div>
+      <div class="analytics-view__charts">
+        <Panel title="Player count over time">
+          <div ref="playerChart" class="analytics-view__chart-area"></div>
+        </Panel>
+        <Panel title="Server performance">
+          <div ref="perfChart" class="analytics-view__chart-area"></div>
+        </Panel>
       </div>
 
-      <!-- Player Retention -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Player Retention</h2>
-          <span class="text-xs font-medium px-2 py-0.5 bg-neutral-800 text-neutral-500 rounded-full border border-neutral-700">Phase 2</span>
-        </div>
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-          <div class="bg-neutral-800/50 rounded-lg p-4 border border-neutral-800">
-            <p class="text-xs text-neutral-500 mb-1">New Players</p>
-            <p class="text-2xl font-bold text-neutral-600">\u2014</p>
-            <p class="text-xs text-neutral-600 mt-1">First-time visitors</p>
+      <!-- Player Retention placeholder -->
+      <Panel eyebrow="Coming in phase 2" title="Player retention">
+        <template #title-append>
+          <Badge tone="neutral">Phase 2</Badge>
+        </template>
+        <div class="analytics-view__retention-grid">
+          <div class="analytics-view__retention-cell">
+            <p class="analytics-view__retention-label">New players</p>
+            <p class="analytics-view__retention-value">—</p>
+            <p class="analytics-view__retention-note">First-time visitors</p>
           </div>
-          <div class="bg-neutral-800/50 rounded-lg p-4 border border-neutral-800">
-            <p class="text-xs text-neutral-500 mb-1">Returning Players</p>
-            <p class="text-2xl font-bold text-neutral-600">\u2014</p>
-            <p class="text-xs text-neutral-600 mt-1">Seen more than once</p>
+          <div class="analytics-view__retention-cell">
+            <p class="analytics-view__retention-label">Returning players</p>
+            <p class="analytics-view__retention-value">—</p>
+            <p class="analytics-view__retention-note">Seen more than once</p>
           </div>
-          <div class="bg-neutral-800/50 rounded-lg p-4 border border-neutral-800">
-            <p class="text-xs text-neutral-500 mb-1">Avg Session Duration</p>
-            <p class="text-2xl font-bold text-neutral-600">\u2014</p>
-            <p class="text-xs text-neutral-600 mt-1">Per visit</p>
+          <div class="analytics-view__retention-cell">
+            <p class="analytics-view__retention-label">Avg session duration</p>
+            <p class="analytics-view__retention-value">—</p>
+            <p class="analytics-view__retention-note">Per visit</p>
           </div>
         </div>
-        <p class="text-xs text-neutral-600 mt-4 text-center">Player retention analytics will be available in Phase 2</p>
-      </div>
+        <p class="analytics-view__retention-footer">
+          Player retention analytics will be available in phase 2.
+        </p>
+      </Panel>
     </template>
   </div>
 </template>
+
+<style scoped>
+.analytics-view {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.analytics-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.analytics-view__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.analytics-view__controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.analytics-view__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.analytics-view__loading-text {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.analytics-view__stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+@media (min-width: 1024px) {
+  .analytics-view__stats {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.analytics-view__charts {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 1024px) {
+  .analytics-view__charts {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.analytics-view__chart-area {
+  height: 256px;
+}
+
+.analytics-view__retention-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 1024px) {
+  .analytics-view__retention-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.analytics-view__retention-cell {
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.analytics-view__retention-label {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+
+.analytics-view__retention-value {
+  font-family: var(--font-mono);
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.analytics-view__retention-note {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.analytics-view__retention-footer {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  text-align: center;
+  margin-top: 12px;
+}
+</style>
diff --git a/frontend/src/views/admin/ChatLogView.vue b/frontend/src/views/admin/ChatLogView.vue
index d2914fd..c358254 100644
--- a/frontend/src/views/admin/ChatLogView.vue
+++ b/frontend/src/views/admin/ChatLogView.vue
@@ -3,7 +3,14 @@ import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useToastStore } from '@/stores/toast'
 import type { ChatMessage } from '@/types'
-import { MessageSquare, Search, Flag, RefreshCw } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const api = useApi()
 const toast = useToastStore()
@@ -32,12 +39,18 @@ const filteredMessages = computed(() => {
   return result
 })
 
-function channelBadgeClass(channel: string): string {
+const channelTabItems = computed(() => [
+  { value: 'all', label: 'All', count: messages.value.length },
+  { value: 'global', label: 'Global' },
+  { value: 'team', label: 'Team' },
+  { value: 'server', label: 'Server' },
+])
+
+function channelTone(channel: string): 'accent' | 'info' | 'neutral' {
   switch (channel) {
-    case 'global': return 'bg-oxide-500/15 text-oxide-400'
-    case 'team': return 'bg-blue-500/15 text-blue-400'
-    case 'server': return 'bg-neutral-700/50 text-neutral-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+    case 'global': return 'accent'
+    case 'team': return 'info'
+    default: return 'neutral'
   }
 }
 
@@ -76,89 +89,163 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <MessageSquare class="w-5 h-5 text-oxide-500" />
+  <div class="clv">
+    <!-- Page head -->
+    <div class="clv__head">
+      <div class="clv__head-id">
+        <div class="clv__head-chip">
+          <Icon name="message-square" :size="20" :stroke-width="2" />
+        </div>
         <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Chat Log</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">{{ messages.length }} messages</p>
+          <div class="t-eyebrow">Chat log</div>
+          <h1 class="clv__title">Chat log</h1>
         </div>
       </div>
-      <button
-        @click="fetchMessages"
-        :disabled="isLoading"
-        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
-      >
-        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
-        Refresh
-      </button>
+      <div class="clv__head-actions">
+        <div class="clv__stat-pill">
+          <span class="clv__stat-num">{{ messages.length }}</span>
+          <span class="clv__stat-label">messages</span>
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="refresh-cw"
+          :loading="isLoading"
+          :disabled="isLoading"
+          @click="fetchMessages"
+        >Refresh</Button>
+      </div>
     </div>
 
     <!-- Filters -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search messages, players, or Steam IDs..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-        <button
-          v-for="opt in (['all', 'global', 'team', 'server'] as const)"
-          :key="opt"
-          @click="channelFilter = opt"
-          class="px-3 py-2 text-sm font-medium transition-colors capitalize"
-          :class="channelFilter === opt
-            ? 'bg-oxide-500/15 text-oxide-400'
-            : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          {{ opt }}
-        </button>
-      </div>
+    <div class="clv__filters">
+      <Input
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search messages, players, or Steam IDs…"
+        size="sm"
+        style="max-width: 340px;"
+      />
+      <Tabs v-model="channelFilter" :items="channelTabItems" />
     </div>
 
-    <!-- Messages -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg divide-y divide-neutral-800">
-      <div v-if="filteredMessages.length === 0" class="px-4 py-12 text-center text-neutral-500 text-sm">
-        <template v-if="isLoading">Loading chat messages...</template>
-        <template v-else-if="searchQuery">No messages matching "{{ searchQuery }}"</template>
-        <template v-else>No chat messages yet. Messages will appear when the server is active.</template>
+    <!-- Messages panel -->
+    <Panel :flush-body="true">
+      <!-- Empty state -->
+      <EmptyState
+        v-if="filteredMessages.length === 0 && !isLoading"
+        icon="message-square"
+        :title="searchQuery ? 'No messages found' : 'No chat messages'"
+        :description="searchQuery
+          ? `No messages matching &quot;${searchQuery}&quot;.`
+          : 'No chat messages yet. Messages will appear when the server is active.'"
+      />
+
+      <!-- Loading -->
+      <div v-else-if="isLoading && filteredMessages.length === 0" class="clv__loading">
+        <Icon name="loader" :size="20" class="clv__spin" />
+        <span>Loading chat messages…</span>
       </div>
-      <div
-        v-for="msg in filteredMessages"
-        :key="msg.id"
-        class="flex items-start gap-4 px-4 py-3 hover:bg-neutral-800/50 transition-colors"
-        :class="{ 'bg-red-500/5 border-l-2 border-l-red-500/30': msg.flagged }"
-      >
-        <div class="shrink-0 text-right w-20">
-          <p class="text-xs text-neutral-500">{{ formatDate(msg.created_at) }}</p>
-          <p class="text-xs text-neutral-600">{{ formatTime(msg.created_at) }}</p>
-        </div>
-        <span
-          class="shrink-0 text-xs font-medium px-2 py-0.5 rounded-full mt-0.5"
-          :class="channelBadgeClass(msg.channel)"
+
+      <!-- Message list -->
+      <div v-else class="clv__messages">
+        <div
+          v-for="msg in filteredMessages"
+          :key="msg.id"
+          class="clv__row"
+          :class="{ 'clv__row--flagged': msg.flagged }"
         >
-          {{ msg.channel }}
-        </span>
-        <div class="flex-1 min-w-0">
-          <span class="text-sm font-medium text-oxide-400">{{ msg.player_name }}</span>
-          <span class="text-sm text-neutral-500 ml-2 font-mono">{{ msg.steam_id }}</span>
-          <p class="text-sm text-neutral-300 mt-0.5 break-words">{{ msg.message }}</p>
+          <!-- Timestamp -->
+          <div class="clv__ts">
+            <span class="clv__date">{{ formatDate(msg.created_at) }}</span>
+            <span class="clv__time">{{ formatTime(msg.created_at) }}</span>
+          </div>
+
+          <!-- Channel badge -->
+          <Badge :tone="channelTone(msg.channel)" size="md">{{ msg.channel }}</Badge>
+
+          <!-- Message body -->
+          <div class="clv__body">
+            <span class="clv__player">{{ msg.player_name }}</span>
+            <span class="clv__steam">{{ msg.steam_id }}</span>
+            <p class="clv__text">{{ msg.message }}</p>
+          </div>
+
+          <!-- Flag toggle -->
+          <IconButton
+            icon="bookmark"
+            :variant="msg.flagged ? 'accent' : 'ghost'"
+            size="sm"
+            :label="msg.flagged ? 'Unflag message' : 'Flag message'"
+            @click="toggleFlag(msg)"
+          />
         </div>
-        <button
-          @click="toggleFlag(msg)"
-          class="shrink-0 p-1 rounded transition-colors"
-          :class="msg.flagged ? 'text-red-400 hover:text-red-300' : 'text-neutral-600 hover:text-neutral-400'"
-          :title="msg.flagged ? 'Unflag message' : 'Flag message'"
-        >
-          <Flag class="w-4 h-4" />
-        </button>
       </div>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.clv { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.clv__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  flex-wrap: wrap; gap: 12px;
+}
+.clv__head-id { display: flex; align-items: center; gap: 12px; }
+.clv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.clv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.clv__head-actions { display: flex; align-items: center; gap: 12px; }
+
+/* Stat pill */
+.clv__stat-pill { display: flex; align-items: center; gap: 6px; }
+.clv__stat-num { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.clv__stat-label { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+/* Filters */
+.clv__filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+
+/* Loading */
+.clv__loading {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  padding: 48px; color: var(--text-tertiary); font-size: var(--text-sm);
+}
+@keyframes clv-spin { to { transform: rotate(360deg); } }
+.clv__spin { animation: clv-spin 0.7s linear infinite; }
+
+/* Messages */
+.clv__messages { display: flex; flex-direction: column; }
+.clv__row {
+  display: flex; align-items: flex-start; gap: 14px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.clv__row:last-child { border-bottom: 0; }
+.clv__row:hover { background: var(--surface-hover); }
+.clv__row--flagged {
+  background: var(--status-offline-soft);
+  border-left: 3px solid var(--status-offline-border);
+}
+.clv__row--flagged:hover { background: var(--status-offline-soft); filter: brightness(1.04); }
+
+/* Timestamp */
+.clv__ts { display: flex; flex-direction: column; align-items: flex-end; min-width: 68px; flex: none; padding-top: 1px; }
+.clv__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
+.clv__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
+
+/* Message body */
+.clv__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.clv__player { font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); }
+.clv__steam { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-left: 8px; }
+.clv__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; word-break: break-word; margin: 0; }
+</style>
diff --git a/frontend/src/views/admin/MapAnalyticsView.vue b/frontend/src/views/admin/MapAnalyticsView.vue
index 6483633..3bba563 100644
--- a/frontend/src/views/admin/MapAnalyticsView.vue
+++ b/frontend/src/views/admin/MapAnalyticsView.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, nextTick, computed } from 'vue'
-import { Map, TrendingUp, Award, Target, Download } from 'lucide-vue-next'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import { useApi } from '@/composables/useApi'
 import type { MapAnalyticsSummary } from '@/types'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const api = useApi()
 
@@ -30,6 +36,10 @@ const loadMapAnalytics = async () => {
   }
 }
 
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
 const renderCharts = () => {
   if (!analytics.value || analytics.value.maps.length === 0) return
 
@@ -44,20 +54,29 @@ const renderCharts = () => {
     const avgPlayers = analytics.value.maps.map(m => m.avg_players)
     const peakPlayers = analytics.value.maps.map(m => m.peak_players)
 
+    const accent = cssVar('--accent') || '#CE422B'
+    const grid   = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
+    const axisLine = cssVar('--border-default') || '#404040'
+    const labelColor = cssVar('--text-tertiary') || '#808080'
+    const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
+    const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
+    const tooltipText = cssVar('--text-primary') || '#e5e5e5'
+    const mono = 'JetBrains Mono, monospace'
+
     performanceChartInstance.setOption({
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' },
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
         axisPointer: {
           type: 'shadow'
         }
       },
       legend: {
         data: ['Avg Players', 'Peak Players'],
-        textStyle: { color: '#a3a3a3' },
+        textStyle: { color: labelColor, fontFamily: mono },
         top: 0
       },
       grid: {
@@ -70,22 +89,22 @@ const renderCharts = () => {
       xAxis: {
         type: 'category',
         data: mapNames,
-        axisLine: { lineStyle: { color: '#404040' } },
-        axisLabel: { color: '#808080', rotate: 45 }
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
       },
       yAxis: {
         type: 'value',
         name: 'Players',
-        axisLine: { lineStyle: { color: '#404040' } },
-        splitLine: { lineStyle: { color: '#2a2a2a' } },
-        axisLabel: { color: '#808080' }
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: grid } },
+        axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
       },
       series: [
         {
           name: 'Avg Players',
           type: 'bar',
           data: avgPlayers,
-          itemStyle: { color: '#CE422B' },
+          itemStyle: { color: accent },
           barGap: '10%'
         },
         {
@@ -138,182 +157,263 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
+  <div class="map-analytics-view">
     <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Map class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Map Analytics</h1>
-      </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="downloadCSV"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
-        >
-          <Download class="w-4 h-4" />
+    <div class="map-analytics-view__header">
+      <h1 class="map-analytics-view__title">Map analytics</h1>
+      <div class="map-analytics-view__controls">
+        <Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
           Export CSV
-        </button>
-        <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-          <button
-            v-for="opt in (['30d', '90d', 'all'] as const)"
-            :key="opt"
-            @click="timeRange = opt"
-            class="px-3 py-2 text-sm font-medium transition-colors"
-            :class="timeRange === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-          >
-            {{ opt }}
-          </button>
-        </div>
+        </Button>
+        <Tabs
+          :items="[
+            { value: '30d', label: '30d' },
+            { value: '90d', label: '90d' },
+            { value: 'all', label: 'All' }
+          ]"
+          v-model="timeRange"
+          variant="pill"
+        />
       </div>
     </div>
 
     <!-- Loading state -->
-    <div v-if="loading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading map analytics...</div>
+    <div v-if="loading" class="map-analytics-view__loading">
+      <span class="map-analytics-view__loading-text">Loading map analytics...</span>
     </div>
 
     <template v-else-if="analytics">
       <!-- Summary cards -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Award class="w-4 h-4 text-oxide-400" />
-            <p class="text-sm text-neutral-400">Best Performing Map</p>
-          </div>
-          <p class="text-xl font-bold text-neutral-100">
-            {{ analytics.best_performing_map ?? 'No data' }}
-          </p>
-          <p class="text-xs text-neutral-600 mt-1" v-if="analytics.maps.length > 0">
-            Avg {{ safeFixed(analytics?.maps?.[0]?.avg_players, 1) }} players
-          </p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Target class="w-4 h-4 text-green-400" />
-            <p class="text-sm text-neutral-400">Rotation Effectiveness</p>
-          </div>
-          <p class="text-xl font-bold text-neutral-100">
-            {{ safeFixed(analytics?.rotation_effectiveness, 1) }}%
-          </p>
-          <p class="text-xs text-neutral-600 mt-1">Overall rotation health</p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <TrendingUp class="w-4 h-4 text-blue-400" />
-            <p class="text-sm text-neutral-400">Total Maps Tracked</p>
-          </div>
-          <p class="text-xl font-bold text-neutral-100">{{ analytics.maps.length }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last {{ timeRange }}</p>
-        </div>
+      <div class="map-analytics-view__stats">
+        <StatCard
+          label="Best performing map"
+          :value="analytics.best_performing_map ?? 'No data'"
+          icon="award"
+          :note="analytics.maps.length > 0 ? `Avg ${safeFixed(analytics?.maps?.[0]?.avg_players, 1)} players` : undefined"
+        />
+        <StatCard
+          label="Rotation effectiveness"
+          :value="safeFixed(analytics?.rotation_effectiveness, 1)"
+          unit="%"
+          icon="target"
+          note="Overall rotation health"
+        />
+        <StatCard
+          label="Total maps tracked"
+          :value="analytics.maps.length"
+          icon="trending-up"
+          :note="`Last ${timeRange}`"
+        />
       </div>
 
       <!-- Performance chart -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">
-          Map Performance Comparison
-        </h2>
-        <div v-if="analytics.maps.length > 0" ref="performanceChart" class="h-80"></div>
-        <div v-else class="h-80 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
-          <p class="text-sm text-neutral-600">No map data available for this time range</p>
-        </div>
-      </div>
+      <Panel title="Map performance comparison">
+        <div v-if="analytics.maps.length > 0" ref="performanceChart" class="map-analytics-view__chart-area"></div>
+        <EmptyState
+          v-else
+          icon="map"
+          title="No map data"
+          description="No map data available for this time range."
+        />
+      </Panel>
 
       <!-- Map performance table -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">
-          Detailed Map Metrics
-        </h2>
-        <div v-if="sortedMaps.length > 0" class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead class="border-b border-neutral-800">
-              <tr>
-                <th class="text-left py-3 px-4 text-neutral-400 font-medium">Map Name</th>
-                <th class="text-left py-3 px-4 text-neutral-400 font-medium">Seed</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Times Used</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Avg Players</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Peak Players</th>
-                <th class="text-right py-3 px-4 text-neutral-400 font-medium">Effectiveness</th>
+      <Panel title="Detailed map metrics" :flush-body="sortedMaps.length > 0">
+        <div v-if="sortedMaps.length > 0" class="map-analytics-view__table-wrap">
+          <table class="map-analytics-view__table">
+            <thead>
+              <tr class="map-analytics-view__thead-row">
+                <th class="map-analytics-view__th map-analytics-view__th--left">Map name</th>
+                <th class="map-analytics-view__th map-analytics-view__th--left">Seed</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Times used</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Avg players</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Peak players</th>
+                <th class="map-analytics-view__th map-analytics-view__th--right">Effectiveness</th>
               </tr>
             </thead>
             <tbody>
               <tr
                 v-for="map in sortedMaps"
                 :key="map.map_id"
-                class="border-b border-neutral-800/50 hover:bg-neutral-800/30 transition-colors"
+                class="map-analytics-view__row"
               >
-                <td class="py-3 px-4 text-neutral-200 font-medium">{{ map.map_name }}</td>
-                <td class="py-3 px-4 text-neutral-400">{{ map.seed ?? '—' }}</td>
-                <td class="py-3 px-4 text-right text-neutral-300">{{ map.times_used }}</td>
-                <td class="py-3 px-4 text-right text-neutral-300">{{ safeFixed(map.avg_players, 1) }}</td>
-                <td class="py-3 px-4 text-right text-neutral-300">{{ map.peak_players }}</td>
-                <td class="py-3 px-4 text-right">
-                  <span
-                    class="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
-                    :class="{
-                      'bg-green-500/10 text-green-400': map.effectiveness_score >= 80,
-                      'bg-yellow-500/10 text-yellow-400': map.effectiveness_score >= 60 && map.effectiveness_score < 80,
-                      'bg-red-500/10 text-red-400': map.effectiveness_score < 60
-                    }"
+                <td class="map-analytics-view__td map-analytics-view__td--primary">{{ map.map_name }}</td>
+                <td class="map-analytics-view__td">{{ map.seed ?? '—' }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--num">{{ map.times_used }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--num">{{ safeFixed(map.avg_players, 1) }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--num">{{ map.peak_players }}</td>
+                <td class="map-analytics-view__td map-analytics-view__td--right">
+                  <Badge
+                    :tone="map.effectiveness_score >= 80 ? 'online' : map.effectiveness_score >= 60 ? 'warn' : 'offline'"
+                    mono
                   >
                     {{ safeFixed(map.effectiveness_score, 1) }}%
-                  </span>
+                  </Badge>
                 </td>
               </tr>
             </tbody>
           </table>
         </div>
-        <div v-else class="py-8 flex items-center justify-center border border-dashed border-neutral-800 rounded-lg">
-          <p class="text-sm text-neutral-600">No map data available</p>
-        </div>
-      </div>
+        <EmptyState
+          v-else
+          icon="map"
+          title="No map data"
+          description="No map data available."
+        />
+      </Panel>
 
       <!-- Insights section -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">
-          Actionable Insights
-        </h2>
-        <div class="space-y-3">
-          <div v-if="analytics.best_performing_map" class="flex items-start gap-3 p-3 bg-neutral-800/50 rounded-lg">
-            <Award class="w-5 h-5 text-oxide-400 mt-0.5 flex-shrink-0" />
-            <div>
-              <p class="text-sm text-neutral-200 font-medium">
-                Your best map is <span class="text-oxide-400">{{ analytics.best_performing_map }}</span>
-              </p>
-              <p class="text-xs text-neutral-500 mt-1">
-                Consider featuring this map more frequently in your rotation for maximum player engagement.
-              </p>
-            </div>
-          </div>
+      <Panel title="Actionable insights">
+        <div class="map-analytics-view__insights">
+          <Alert
+            v-if="analytics.best_performing_map"
+            tone="accent"
+            :title="`Best map: ${analytics.best_performing_map}`"
+          >
+            Consider featuring this map more frequently in your rotation for maximum player engagement.
+          </Alert>
 
-          <div
+          <Alert
             v-if="analytics.rotation_effectiveness < 70"
-            class="flex items-start gap-3 p-3 bg-yellow-500/5 border border-yellow-500/20 rounded-lg"
+            tone="warn"
+            title="Rotation effectiveness is below optimal"
           >
-            <Target class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" />
-            <div>
-              <p class="text-sm text-neutral-200 font-medium">Rotation effectiveness is below optimal</p>
-              <p class="text-xs text-neutral-500 mt-1">
-                Consider removing low-performing maps (effectiveness &lt; 60%) and testing new maps to improve overall rotation health.
-              </p>
-            </div>
-          </div>
+            Consider removing low-performing maps (effectiveness &lt; 60%) and testing new maps to improve overall rotation health.
+          </Alert>
 
-          <div
+          <Alert
             v-else-if="analytics.rotation_effectiveness >= 80"
-            class="flex items-start gap-3 p-3 bg-green-500/5 border border-green-500/20 rounded-lg"
+            tone="online"
+            title="Excellent rotation effectiveness"
           >
-            <TrendingUp class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
-            <div>
-              <p class="text-sm text-neutral-200 font-medium">Excellent rotation effectiveness!</p>
-              <p class="text-xs text-neutral-500 mt-1">
-                Your current map rotation is driving strong player engagement. Keep monitoring for any changes.
-              </p>
-            </div>
-          </div>
+            Your current map rotation is driving strong player engagement. Keep monitoring for any changes.
+          </Alert>
         </div>
-      </div>
+      </Panel>
     </template>
   </div>
 </template>
+
+<style scoped>
+.map-analytics-view {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.map-analytics-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.map-analytics-view__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.map-analytics-view__controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.map-analytics-view__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.map-analytics-view__loading-text {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.map-analytics-view__stats {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 768px) {
+  .map-analytics-view__stats {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.map-analytics-view__chart-area {
+  height: 320px;
+}
+
+.map-analytics-view__table-wrap {
+  overflow-x: auto;
+}
+
+.map-analytics-view__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.map-analytics-view__thead-row {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.map-analytics-view__th {
+  padding: 12px 16px;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.map-analytics-view__th--left {
+  text-align: left;
+}
+
+.map-analytics-view__th--right {
+  text-align: right;
+}
+
+.map-analytics-view__row {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background var(--dur-fast) var(--ease-standard);
+}
+
+.map-analytics-view__row:hover {
+  background: var(--surface-hover);
+}
+
+.map-analytics-view__td {
+  padding: 12px 16px;
+  color: var(--text-secondary);
+}
+
+.map-analytics-view__td--primary {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.map-analytics-view__td--num {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+.map-analytics-view__td--right {
+  text-align: right;
+}
+
+.map-analytics-view__insights {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>
diff --git a/frontend/src/views/admin/MapsView.vue b/frontend/src/views/admin/MapsView.vue
index 1335920..8161c97 100644
--- a/frontend/src/views/admin/MapsView.vue
+++ b/frontend/src/views/admin/MapsView.vue
@@ -4,8 +4,12 @@ import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
 import { useToastStore } from '@/stores/toast'
 import type { MapEntry } from '@/types'
-import { Map, Upload, Trash2, RefreshCw, Loader2 } from 'lucide-vue-next'
 import { safeFileSize } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const api = useApi()
 const auth = useAuthStore()
@@ -20,8 +24,8 @@ function formatSize(bytes: number): string {
   return safeFileSize(bytes)
 }
 
-function typeBadgeClass(type: string): string {
-  return type === 'custom' ? 'bg-oxide-500/15 text-oxide-400' : 'bg-blue-500/15 text-blue-400'
+function mapTypeTone(type: string): 'accent' | 'info' {
+  return type === 'custom' ? 'accent' : 'info'
 }
 
 async function fetchMaps() {
@@ -92,84 +96,211 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Map class="w-5 h-5 text-oxide-500" />
-        <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Map Library</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">{{ maps.length }} maps</p>
-        </div>
+  <div class="maps">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Operations</div>
+        <h1 class="page__title">
+          Map library
+          <span v-if="maps.length > 0" class="page__count">{{ maps.length }} maps</span>
+        </h1>
       </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="fetchMaps"
+      <div class="page__actions">
+        <IconButton
+          icon="refresh-cw"
+          label="Refresh"
+          :class="isLoading && 'spin'"
           :disabled="isLoading"
-          class="flex items-center gap-2 px-3 py-2 text-sm text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
-        </button>
+          @click="fetchMaps"
+        />
         <input
           ref="fileInputRef"
           type="file"
           accept=".map"
-          class="hidden"
+          class="hidden-input"
           @change="handleFileSelected"
         />
-        <button
+        <Button
+          icon="upload"
+          :loading="isUploading"
           @click="triggerFileInput"
-          :disabled="isUploading"
-          class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
         >
-          <Loader2 v-if="isUploading" class="w-4 h-4 animate-spin" />
-          <Upload v-else class="w-4 h-4" />
-          {{ isUploading ? 'Uploading...' : 'Upload Map' }}
-        </button>
+          {{ isUploading ? 'Uploading…' : 'Upload map' }}
+        </Button>
       </div>
     </div>
 
-    <!-- Maps grid -->
-    <div v-if="maps.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-      <Map class="w-10 h-10 text-neutral-600 mx-auto mb-3" />
-      <h3 class="text-lg font-medium text-neutral-300 mb-1">No Maps</h3>
-      <p class="text-sm text-neutral-500">Upload custom maps or they'll appear here when procedural maps are generated.</p>
-    </div>
+    <!-- Empty state -->
+    <Panel v-if="maps.length === 0">
+      <EmptyState
+        icon="map"
+        title="No maps"
+        description="Upload custom maps or they will appear here when procedural maps are generated."
+      >
+        <template #action>
+          <Button icon="upload" size="sm" @click="triggerFileInput">Upload map</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <div v-else class="grid grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Maps grid -->
+    <div v-else class="maps-grid">
       <div
         v-for="map in maps"
         :key="map.id"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden hover:border-neutral-700 transition-colors"
+        class="map-card"
       >
-        <!-- Thumbnail or placeholder -->
-        <div class="h-32 bg-neutral-800 flex items-center justify-center">
-          <img v-if="map.thumbnail_path" :src="map.thumbnail_path" :alt="map.display_name" class="w-full h-full object-cover" />
-          <Map v-else class="w-8 h-8 text-neutral-600" />
+        <!-- Thumbnail -->
+        <div class="map-card__thumb">
+          <img
+            v-if="map.thumbnail_path"
+            :src="map.thumbnail_path"
+            :alt="map.display_name"
+            class="map-card__img"
+          />
+          <svg v-else class="map-card__placeholder" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" /><line x1="9" y1="3" x2="9" y2="18" /><line x1="15" y1="6" x2="15" y2="21" />
+          </svg>
         </div>
-        <div class="p-4">
-          <div class="flex items-center justify-between mb-2">
-            <h3 class="text-sm font-medium text-neutral-100 truncate">{{ map.display_name }}</h3>
-            <span class="text-xs font-medium px-2 py-0.5 rounded-full shrink-0 ml-2" :class="typeBadgeClass(map.map_type)">
-              {{ map.map_type }}
-            </span>
+
+        <!-- Card body -->
+        <div class="map-card__body">
+          <div class="map-card__row">
+            <span class="map-card__name">{{ map.display_name }}</span>
+            <Badge :tone="mapTypeTone(map.map_type)" size="md">{{ map.map_type }}</Badge>
           </div>
-          <div class="flex items-center justify-between text-xs text-neutral-500">
+          <div class="map-card__meta">
             <span>{{ formatSize(map.file_size_bytes) }}</span>
             <span v-if="map.world_size">{{ map.world_size }}m</span>
-            <span v-if="map.seed">Seed: {{ map.seed }}</span>
+            <span v-if="map.seed" class="mono">Seed: {{ map.seed }}</span>
           </div>
-          <div class="flex justify-end mt-3">
-            <button
+          <div class="map-card__foot">
+            <IconButton
+              icon="trash-2"
+              variant="danger"
+              size="sm"
+              label="Delete map"
               @click="deleteMap(map)"
-              class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
-              title="Delete map"
-            >
-              <Trash2 class="w-4 h-4" />
-            </button>
+            />
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.maps {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Page head */
+.page__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.page__title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin-top: 4px;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.page__count {
+  font-size: var(--text-sm);
+  font-weight: 400;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.page__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.hidden-input { display: none; }
+
+/* Spin utility */
+.spin { animation: spin 0.7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Maps grid */
+.maps-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+/* Map card */
+.map-card {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+  transition: box-shadow var(--dur-base) var(--ease-standard);
+}
+.map-card:hover {
+  box-shadow: var(--ring-default), 0 0 0 1px var(--border-default);
+}
+.map-card__thumb {
+  height: 128px;
+  background: var(--surface-inset);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.map-card__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.map-card__placeholder { color: var(--text-muted); }
+.map-card__body { padding: 12px 14px; }
+.map-card__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 5px;
+}
+.map-card__name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.map-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  flex-wrap: wrap;
+}
+.mono { font-family: var(--font-mono); }
+.map-card__foot {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+@media (max-width: 640px) {
+  .maps-grid { grid-template-columns: 1fr 1fr; }
+}
+</style>
diff --git a/frontend/src/views/admin/ModuleStoreView.vue b/frontend/src/views/admin/ModuleStoreView.vue
index befaeec..28755af 100644
--- a/frontend/src/views/admin/ModuleStoreView.vue
+++ b/frontend/src/views/admin/ModuleStoreView.vue
@@ -3,8 +3,17 @@ import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
 import type { Module } from '@/types'
-import { ShoppingCart, Package, Search, Filter, X, Check, Download, AlertCircle } from 'lucide-vue-next'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
 
 const api = useApi()
 const auth = useAuthStore()
@@ -22,17 +31,22 @@ const isPurchasing = ref(false)
 const purchaseError = ref('')
 
 const categories = [
-  { value: 'all', label: 'All Modules' },
+  { value: 'all', label: 'All modules' },
   { value: 'loot', label: 'Loot' },
   { value: 'events', label: 'Events' },
   { value: 'economy', label: 'Economy' },
   { value: 'kits', label: 'Kits' },
-  { value: 'admin', label: 'Admin Tools' },
+  { value: 'admin', label: 'Admin tools' },
   { value: 'pvp', label: 'PVP' },
   { value: 'pve', label: 'PVE' },
   { value: 'building', label: 'Building' },
 ]
 
+const tabItems = computed(() => [
+  { value: 'catalog', label: 'Catalog', icon: 'package' },
+  { value: 'my-modules', label: `My modules (${myModules.value.length})`, icon: 'download' },
+])
+
 const filteredModules = computed(() => {
   let result = activeTab.value === 'catalog' ? modules.value : myModules.value
 
@@ -51,6 +65,21 @@ const filteredModules = computed(() => {
   return result
 })
 
+type BadgeTone = 'info' | 'accent' | 'warn' | 'online' | 'neutral' | 'offline'
+function categoryTone(category: string): BadgeTone {
+  const map: Record<string, BadgeTone> = {
+    loot: 'warn',
+    events: 'accent',
+    economy: 'online',
+    kits: 'info',
+    admin: 'accent',
+    pvp: 'offline',
+    pve: 'info',
+    building: 'warn',
+  }
+  return map[category] ?? 'neutral'
+}
+
 async function loadCatalog() {
   isLoading.value = true
   try {
@@ -94,10 +123,8 @@ async function confirmPurchase() {
     })
 
     if (response.payment_url) {
-      // Redirect to external payment provider
       window.location.href = response.payment_url
     } else if (response.success) {
-      // Instant purchase confirmed
       showPurchaseModal.value = false
       selectedModule.value = null
       await loadCatalog()
@@ -131,20 +158,6 @@ function closeModals() {
   purchaseError.value = ''
 }
 
-function categoryBadgeClass(category: string): string {
-  const colors: Record<string, string> = {
-    loot: 'bg-yellow-500/15 text-yellow-400',
-    events: 'bg-purple-500/15 text-purple-400',
-    economy: 'bg-green-500/15 text-green-400',
-    kits: 'bg-blue-500/15 text-blue-400',
-    admin: 'bg-oxide-500/15 text-oxide-400',
-    pvp: 'bg-red-500/15 text-red-400',
-    pve: 'bg-indigo-500/15 text-indigo-400',
-    building: 'bg-orange-500/15 text-orange-400',
-  }
-  return colors[category] || 'bg-neutral-700/50 text-neutral-400'
-}
-
 onMounted(() => {
   loadCatalog()
   loadMyModules()
@@ -152,323 +165,371 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <ShoppingCart class="w-5 h-5 text-oxide-500" />
-        <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Module Store</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">
-            Extend your server with premium gameplay modules
-          </p>
-        </div>
-      </div>
-      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-        <button
-          @click="activeTab = 'catalog'"
-          class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="activeTab === 'catalog' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          <span class="flex items-center gap-2">
-            <Package class="w-4 h-4" />
-            Catalog
-          </span>
-        </button>
-        <button
-          @click="activeTab = 'my-modules'"
-          class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="activeTab === 'my-modules' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          <span class="flex items-center gap-2">
-            <Download class="w-4 h-4" />
-            My Modules ({{ myModules.length }})
-          </span>
-        </button>
+  <div class="ms-page">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Management</div>
+        <h1 class="page__title">Module store</h1>
+        <p class="page__sub">Extend your server with premium gameplay modules.</p>
       </div>
+      <Tabs v-model="activeTab" :items="tabItems" />
     </div>
 
-    <!-- Filters -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-md">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search modules..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <div class="flex items-center gap-2">
-        <Filter class="w-4 h-4 text-neutral-500" />
-        <select
-          v-model="selectedCategory"
-          class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        >
-          <option v-for="cat in categories" :key="cat.value" :value="cat.value">
-            {{ cat.label }}
-          </option>
-        </select>
-      </div>
+    <!-- Filters bar -->
+    <div class="ms-filters">
+      <Input
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search modules…"
+        class="ms-filters__search"
+      />
+      <Select
+        v-model="selectedCategory"
+        :options="categories"
+        size="md"
+        class="ms-filters__cat"
+      />
     </div>
 
     <!-- Loading state -->
-    <div v-if="isLoading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading modules...</div>
+    <div v-if="isLoading" class="ms-loading">
+      <EmptyState icon="loader" title="Loading modules…" />
     </div>
 
     <!-- Module grid -->
-    <div v-else-if="filteredModules.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div
+    <div v-else-if="filteredModules.length > 0" class="ms-grid">
+      <article
         v-for="module in filteredModules"
         :key="module.id"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden hover:border-oxide-500/30 transition-all group"
+        class="ms-card"
       >
-        <!-- Preview Image -->
-        <div class="relative h-40 bg-neutral-800 overflow-hidden">
+        <!-- Preview image -->
+        <div class="ms-card__img">
           <img
             v-if="module.preview_image_url"
             :src="module.preview_image_url"
             :alt="module.name"
-            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            class="ms-card__img-el"
           />
-          <div v-else class="w-full h-full flex items-center justify-center">
-            <Package class="w-12 h-12 text-neutral-700" />
+          <div v-else class="ms-card__img-placeholder">
+            <Icon name="package" :size="36" :stroke-width="1.5" />
           </div>
-          <div class="absolute top-2 right-2">
-            <span class="text-xs font-medium px-2 py-1 rounded-full" :class="categoryBadgeClass(module.category)">
-              {{ module.category }}
-            </span>
+          <div class="ms-card__img-badges">
+            <Badge :tone="categoryTone(module.category)" size="md">{{ module.category }}</Badge>
           </div>
-          <div v-if="module.is_purchased" class="absolute top-2 left-2">
-            <span class="text-xs font-medium px-2 py-1 rounded-full bg-green-500/20 text-green-400 flex items-center gap-1">
-              <Check class="w-3 h-3" />
-              Purchased
-            </span>
+          <div v-if="module.is_purchased" class="ms-card__img-owned">
+            <Badge tone="online" icon="check" size="md">Purchased</Badge>
           </div>
         </div>
 
         <!-- Content -->
-        <div class="p-4 space-y-3">
-          <div>
-            <div class="flex items-start justify-between gap-2 mb-1">
-              <h3 class="text-base font-semibold text-neutral-100">{{ module.name }}</h3>
-              <span class="text-lg font-bold text-oxide-400 shrink-0">${{ safeFixed(module.price, 2) }}</span>
-            </div>
-            <p class="text-sm text-neutral-500 line-clamp-2">{{ module.description }}</p>
+        <div class="ms-card__body">
+          <div class="ms-card__header">
+            <span class="ms-card__name">{{ module.name }}</span>
+            <span class="ms-price">${{ safeFixed(module.price, 2) }}</span>
           </div>
+          <p class="ms-card__desc">{{ module.description }}</p>
 
           <!-- Features -->
-          <div class="flex flex-wrap gap-1.5">
-            <span
+          <div class="ms-card__features">
+            <Badge
               v-for="(feature, idx) in module.features.slice(0, 3)"
               :key="idx"
-              class="text-xs text-neutral-400 bg-neutral-800 px-2 py-0.5 rounded"
-            >
-              {{ feature }}
-            </span>
-            <span v-if="module.features.length > 3" class="text-xs text-neutral-500">
-              +{{ module.features.length - 3 }} more
-            </span>
+              tone="neutral"
+            >{{ feature }}</Badge>
+            <span v-if="module.features.length > 3" class="ms-card__more">+{{ module.features.length - 3 }} more</span>
           </div>
 
           <!-- Actions -->
-          <div class="flex gap-2 pt-2">
-            <button
-              @click="openDetailModal(module)"
-              class="flex-1 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 rounded-lg transition-colors"
-            >
-              Details
-            </button>
-            <button
+          <div class="ms-card__actions">
+            <Button variant="secondary" size="sm" :block="false" @click="openDetailModal(module)">Details</Button>
+            <Button
               v-if="!module.is_purchased"
+              size="sm"
               @click="initiatePurchase(module)"
-              class="flex-1 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
-            >
-              Purchase
-            </button>
-            <button
+            >Purchase</Button>
+            <Button
               v-else-if="!module.is_installed"
+              size="sm"
+              variant="outline"
+              icon="download"
               @click="installModule(module)"
-              class="flex-1 flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-green-400 bg-green-500/10 hover:bg-green-500/20 border border-green-500/20 rounded-lg transition-colors"
-            >
-              <Download class="w-3.5 h-3.5" />
-              Install
-            </button>
-            <button
+            >Install</Button>
+            <Button
               v-else
-              disabled
-              class="flex-1 flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-green-400 bg-green-500/10 border border-green-500/20 rounded-lg cursor-default"
-            >
-              <Check class="w-3.5 h-3.5" />
-              Installed
-            </button>
+              size="sm"
+              variant="outline"
+              icon="check"
+              :disabled="true"
+            >Installed</Button>
           </div>
         </div>
-      </div>
+      </article>
     </div>
 
     <!-- Empty state -->
-    <div v-else class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-      <Package class="w-12 h-12 text-neutral-600 mx-auto mb-3" />
-      <h3 class="text-lg font-medium text-neutral-300 mb-1">
-        {{ activeTab === 'catalog' ? 'No modules found' : 'No purchased modules' }}
-      </h3>
-      <p class="text-sm text-neutral-500">
-        {{ activeTab === 'catalog' ? 'Try adjusting your filters.' : 'Browse the catalog to purchase modules.' }}
-      </p>
-    </div>
+    <Panel v-else>
+      <EmptyState
+        icon="package"
+        :title="activeTab === 'catalog' ? 'No modules found' : 'No purchased modules'"
+        :description="activeTab === 'catalog' ? 'Try adjusting your search or category filter.' : 'Browse the catalog to purchase modules.'"
+      />
+    </Panel>
 
-    <!-- Detail Modal -->
+    <!-- ===== Detail modal ===== -->
     <div
       v-if="showDetailModal && selectedModule"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      class="ms-modal-backdrop"
       @click.self="closeModals"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">
-        <!-- Modal Header -->
-        <div class="sticky top-0 bg-neutral-900 border-b border-neutral-800 px-6 py-4 flex items-start justify-between">
-          <div class="flex-1">
-            <div class="flex items-center gap-3 mb-2">
-              <h2 class="text-xl font-bold text-neutral-100">{{ selectedModule.name }}</h2>
-              <span class="text-xs font-medium px-2 py-1 rounded-full" :class="categoryBadgeClass(selectedModule.category)">
-                {{ selectedModule.category }}
-              </span>
+      <div class="ms-modal ms-modal--wide">
+        <div class="ms-modal__head ms-modal__head--sticky">
+          <div class="ms-modal__head-content">
+            <div class="ms-modal__title-row">
+              <h2 class="ms-modal__title">{{ selectedModule.name }}</h2>
+              <Badge :tone="categoryTone(selectedModule.category)" size="md">{{ selectedModule.category }}</Badge>
             </div>
-            <p class="text-sm text-neutral-400">Version {{ selectedModule.version }}</p>
+            <p class="ms-modal__ver">Version {{ selectedModule.version }}</p>
           </div>
-          <button
-            @click="closeModals"
-            class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors"
-          >
-            <X class="w-5 h-5" />
-          </button>
+          <IconButton icon="x" label="Close" @click="closeModals" />
         </div>
 
-        <!-- Modal Body -->
-        <div class="p-6 space-y-6">
+        <div class="ms-modal__body">
           <!-- Screenshots -->
-          <div v-if="selectedModule.screenshots.length > 0" class="space-y-3">
-            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Screenshots</h3>
-            <div class="grid grid-cols-2 gap-3">
+          <div v-if="selectedModule.screenshots.length > 0" class="ms-detail-section">
+            <div class="ms-detail-section__label">Screenshots</div>
+            <div class="ms-screenshots">
               <img
                 v-for="(screenshot, idx) in selectedModule.screenshots"
                 :key="idx"
                 :src="screenshot"
                 :alt="`Screenshot ${idx + 1}`"
-                class="w-full h-48 object-cover rounded-lg border border-neutral-800"
+                class="ms-screenshot"
               />
             </div>
           </div>
 
           <!-- Description -->
-          <div class="space-y-3">
-            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Description</h3>
-            <p class="text-sm text-neutral-400 leading-relaxed">{{ selectedModule.description }}</p>
+          <div class="ms-detail-section">
+            <div class="ms-detail-section__label">Description</div>
+            <p class="ms-detail-desc">{{ selectedModule.description }}</p>
           </div>
 
           <!-- Features -->
-          <div class="space-y-3">
-            <h3 class="text-sm font-medium text-neutral-300 uppercase tracking-wider">Features</h3>
-            <ul class="space-y-2">
-              <li
-                v-for="(feature, idx) in selectedModule.features"
-                :key="idx"
-                class="flex items-start gap-2 text-sm text-neutral-400"
-              >
-                <Check class="w-4 h-4 text-oxide-500 shrink-0 mt-0.5" />
+          <div class="ms-detail-section">
+            <div class="ms-detail-section__label">Features</div>
+            <ul class="ms-features">
+              <li v-for="(feature, idx) in selectedModule.features" :key="idx" class="ms-feature">
+                <Icon name="check" :size="14" :stroke-width="2.5" class="ms-feature__icon" />
                 {{ feature }}
               </li>
             </ul>
           </div>
 
-          <!-- Price and Purchase -->
-          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 flex items-center justify-between">
+          <!-- Price and action -->
+          <div class="ms-detail-cta">
             <div>
-              <p class="text-sm text-neutral-400 mb-1">One-time purchase</p>
-              <p class="text-2xl font-bold text-oxide-400">${{ safeFixed(selectedModule.price, 2) }}</p>
+              <p class="ms-detail-cta__label">One-time purchase</p>
+              <p class="ms-price ms-price--lg">${{ safeFixed(selectedModule.price, 2) }}</p>
             </div>
-            <button
+            <Button
               v-if="!selectedModule.is_purchased"
               @click="initiatePurchase(selectedModule)"
-              class="px-6 py-3 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
-            >
-              Purchase Now
-            </button>
-            <button
+            >Purchase now</Button>
+            <Button
               v-else-if="!selectedModule.is_installed"
+              variant="outline"
+              icon="download"
               @click="installModule(selectedModule)"
-              class="flex items-center gap-2 px-6 py-3 text-sm font-medium text-green-400 bg-green-500/10 hover:bg-green-500/20 border border-green-500/20 rounded-lg transition-colors"
-            >
-              <Download class="w-4 h-4" />
-              Install
-            </button>
-            <div v-else class="flex items-center gap-2 text-green-400">
-              <Check class="w-5 h-5" />
-              <span class="text-sm font-medium">Installed</span>
+            >Install</Button>
+            <div v-else class="ms-installed">
+              <Icon name="check" :size="18" :stroke-width="2.5" />
+              <span>Installed</span>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Purchase Confirmation Modal -->
+    <!-- ===== Purchase confirmation modal ===== -->
     <div
       v-if="showPurchaseModal && selectedModule"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      class="ms-modal-backdrop"
       @click.self="closeModals"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-md w-full">
-        <!-- Header -->
-        <div class="border-b border-neutral-800 px-6 py-4">
-          <h2 class="text-xl font-bold text-neutral-100">Confirm Purchase</h2>
+      <div class="ms-modal">
+        <div class="ms-modal__head">
+          <h2 class="ms-modal__title">Confirm purchase</h2>
+          <IconButton icon="x" label="Close" @click="closeModals" />
         </div>
 
-        <!-- Body -->
-        <div class="p-6 space-y-4">
-          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 space-y-2">
-            <div class="flex items-center justify-between">
-              <span class="text-sm text-neutral-400">Module</span>
-              <span class="text-sm font-medium text-neutral-100">{{ selectedModule.name }}</span>
+        <div class="ms-modal__body">
+          <div class="ms-purchase-summary">
+            <div class="ms-purchase-row">
+              <span class="ms-purchase-row__label">Module</span>
+              <span class="ms-purchase-row__value">{{ selectedModule.name }}</span>
             </div>
-            <div class="flex items-center justify-between">
-              <span class="text-sm text-neutral-400">License</span>
-              <span class="text-sm font-medium text-neutral-100">{{ auth.license?.license_key }}</span>
+            <div class="ms-purchase-row">
+              <span class="ms-purchase-row__label">License</span>
+              <span class="ms-purchase-row__value ms-mono">{{ auth.license?.license_key }}</span>
             </div>
-            <div class="border-t border-neutral-700 pt-2 mt-2 flex items-center justify-between">
-              <span class="text-base font-medium text-neutral-300">Total</span>
-              <span class="text-2xl font-bold text-oxide-400">${{ safeFixed(selectedModule.price, 2) }}</span>
+            <div class="ms-purchase-divider" />
+            <div class="ms-purchase-row ms-purchase-row--total">
+              <span class="ms-purchase-row__label">Total</span>
+              <span class="ms-price ms-price--lg">${{ safeFixed(selectedModule.price, 2) }}</span>
             </div>
           </div>
 
-          <div v-if="purchaseError" class="flex items-start gap-2 bg-red-500/10 border border-red-500/20 rounded-lg p-3">
-            <AlertCircle class="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
-            <p class="text-sm text-red-400">{{ purchaseError }}</p>
-          </div>
+          <Alert v-if="purchaseError" tone="danger">{{ purchaseError }}</Alert>
 
-          <p class="text-xs text-neutral-500 leading-relaxed">
+          <p class="ms-purchase-terms">
             By confirming this purchase, you agree to the module license terms. This purchase is non-refundable once the module is installed.
           </p>
         </div>
 
-        <!-- Footer -->
-        <div class="border-t border-neutral-800 px-6 py-4 flex items-center justify-end gap-3">
-          <button
-            @click="closeModals"
-            :disabled="isPurchasing"
-            class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors disabled:opacity-50"
-          >
-            Cancel
-          </button>
-          <button
-            @click="confirmPurchase"
-            :disabled="isPurchasing"
-            class="px-6 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors disabled:opacity-50"
-          >
-            {{ isPurchasing ? 'Processing...' : 'Confirm Purchase' }}
-          </button>
+        <div class="ms-modal__foot">
+          <Button variant="secondary" :disabled="isPurchasing" @click="closeModals">Cancel</Button>
+          <Button :loading="isPurchasing" @click="confirmPurchase">Confirm purchase</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.ms-page { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
+
+.page__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; row-gap: 12px;
+}
+.page__title {
+  font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 5px;
+}
+.page__sub { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 3px; }
+
+/* Filters */
+.ms-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.ms-filters__search { flex: 1; min-width: 200px; max-width: 380px; }
+.ms-filters__cat { min-width: 160px; }
+
+.ms-loading { padding: 20px 0; }
+
+/* Module grid */
+.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
+
+/* Module card */
+.ms-card {
+  background: var(--surface-base); border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default); overflow: hidden; display: flex; flex-direction: column;
+  transition: box-shadow var(--dur-base) var(--ease-standard);
+}
+.ms-card:hover { box-shadow: inset 0 0 0 1px var(--accent-border), var(--ring-default); }
+
+.ms-card__img {
+  position: relative; height: 160px; overflow: hidden;
+  background: var(--surface-inset);
+}
+.ms-card__img-el {
+  width: 100%; height: 100%; object-fit: cover;
+  transition: transform 300ms var(--ease-standard);
+}
+.ms-card:hover .ms-card__img-el { transform: scale(1.04); }
+.ms-card__img-placeholder {
+  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
+  color: var(--text-muted);
+}
+.ms-card__img-badges { position: absolute; top: 8px; right: 8px; }
+.ms-card__img-owned { position: absolute; top: 8px; left: 8px; }
+
+.ms-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
+.ms-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.ms-card__name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.ms-card__desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.ms-card__features { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.ms-card__more { font-size: var(--text-xs); color: var(--text-muted); }
+.ms-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
+
+/* Price — mono + tabular */
+.ms-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--text-base); color: var(--accent-text); }
+.ms-price--lg { font-size: var(--text-2xl); }
+.ms-mono { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+
+/* Modal */
+.ms-modal-backdrop {
+  position: fixed; inset: 0; z-index: 60;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 16px;
+}
+.ms-modal {
+  background: var(--surface-base); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl, var(--ring-default)); max-width: 480px; width: 100%;
+  display: flex; flex-direction: column; max-height: 90vh;
+}
+.ms-modal--wide { max-width: 760px; }
+
+.ms-modal__head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); flex: none;
+}
+.ms-modal__head--sticky { position: sticky; top: 0; background: var(--surface-base); z-index: 1; }
+.ms-modal__head-content { flex: 1; min-width: 0; }
+.ms-modal__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.ms-modal__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.ms-modal__ver { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
+
+.ms-modal__body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
+.ms-modal__foot {
+  display: flex; align-items: center; justify-content: flex-end;
+  gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-subtle); flex: none;
+}
+
+/* Detail modal content */
+.ms-detail-section { display: flex; flex-direction: column; gap: 10px; }
+.ms-detail-section__label {
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+}
+.ms-detail-desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
+
+.ms-screenshots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.ms-screenshot { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--ring-default); }
+
+.ms-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.ms-feature { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); }
+.ms-feature__icon { flex: none; color: var(--accent-text); margin-top: 2px; }
+
+.ms-detail-cta {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  background: var(--surface-raised); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px 16px;
+}
+.ms-detail-cta__label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 4px; }
+
+.ms-installed {
+  display: flex; align-items: center; gap: 8px;
+  font-size: var(--text-sm); font-weight: 500; color: var(--status-online);
+}
+
+/* Purchase summary */
+.ms-purchase-summary {
+  background: var(--surface-raised); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px 16px;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.ms-purchase-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.ms-purchase-row--total { margin-top: 2px; }
+.ms-purchase-row__label { font-size: var(--text-sm); color: var(--text-tertiary); }
+.ms-purchase-row__value { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.ms-purchase-divider { height: 1px; background: var(--border-subtle); }
+
+.ms-purchase-terms { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .ms-grid { grid-template-columns: 1fr; }
+  .ms-filters__search { max-width: 100%; }
+}
+</style>
diff --git a/frontend/src/views/admin/PlayerRetentionView.vue b/frontend/src/views/admin/PlayerRetentionView.vue
index 0536a96..75f4310 100644
--- a/frontend/src/views/admin/PlayerRetentionView.vue
+++ b/frontend/src/views/admin/PlayerRetentionView.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, nextTick } from 'vue'
-import { Users, TrendingUp, Clock, Download, BarChart3 } from 'lucide-vue-next'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Button from '@/components/ds/core/Button.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Select from '@/components/ds/forms/Select.vue'
 
 const api = useApi()
 const authStore = useAuthStore()
@@ -60,6 +64,10 @@ const loadRetentionData = async () => {
   }
 }
 
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
 const renderCharts = () => {
   if (!retentionData.value || !retentionData.value.wipe_metrics.length) return
 
@@ -81,13 +89,22 @@ const renderCharts = () => {
     const retention48h = retentionData.value.wipe_metrics.map((w) => w.retention_48h_percent)
     const retention72h = retentionData.value.wipe_metrics.map((w) => w.retention_72h_percent)
 
+    const accent = cssVar('--accent') || '#CE422B'
+    const grid   = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
+    const axisLine = cssVar('--border-default') || '#404040'
+    const labelColor = cssVar('--text-tertiary') || '#808080'
+    const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
+    const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
+    const tooltipText = cssVar('--text-primary') || '#e5e5e5'
+    const mono = 'JetBrains Mono, monospace'
+
     retentionChartInstance.setOption({
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' },
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
         formatter: (params: any) => {
           let tooltip = `<strong>${params[0].axisValue}</strong><br/>`
           params.forEach((param: any) => {
@@ -98,7 +115,7 @@ const renderCharts = () => {
       },
       legend: {
         data: ['24h Return', '48h Return', '72h Return'],
-        textStyle: { color: '#a3a3a3' },
+        textStyle: { color: labelColor, fontFamily: mono },
         top: 0
       },
       grid: {
@@ -111,16 +128,18 @@ const renderCharts = () => {
       xAxis: {
         type: 'category',
         data: wipeLabels,
-        axisLine: { lineStyle: { color: '#404040' } },
-        axisLabel: { color: '#808080', rotate: 45 }
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
       },
       yAxis: {
         type: 'value',
         name: 'Retention %',
-        axisLine: { lineStyle: { color: '#404040' } },
-        splitLine: { lineStyle: { color: '#2a2a2a' } },
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: grid } },
         axisLabel: {
-          color: '#808080',
+          color: labelColor,
+          fontFamily: mono,
+          fontSize: 10,
           formatter: (value: number) => `${value}%`
         },
         max: 100
@@ -131,8 +150,8 @@ const renderCharts = () => {
           type: 'line',
           data: retention24h,
           smooth: true,
-          lineStyle: { color: '#CE422B', width: 3 },
-          itemStyle: { color: '#CE422B' },
+          lineStyle: { color: accent, width: 3 },
+          itemStyle: { color: accent },
           symbolSize: 8
         },
         {
@@ -187,117 +206,91 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
+  <div class="retention-view">
     <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Users class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Player Retention</h1>
-      </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="downloadCSV"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
-        >
-          <Download class="w-4 h-4" />
+    <div class="retention-view__header">
+      <h1 class="retention-view__title">Player retention</h1>
+      <div class="retention-view__controls">
+        <Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
           Export CSV
-        </button>
-        <div class="flex items-center gap-2 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2">
-          <label class="text-sm text-neutral-400">Wipes:</label>
-          <select
-            v-model.number="wipeCount"
-            class="bg-transparent text-neutral-100 text-sm focus:outline-none"
-          >
-            <option :value="3">Last 3</option>
-            <option :value="6">Last 6</option>
-            <option :value="10">Last 10</option>
-            <option :value="20">Last 20</option>
-          </select>
-        </div>
+        </Button>
+        <Select
+          :options="[
+            { value: '3', label: 'Last 3 wipes' },
+            { value: '6', label: 'Last 6 wipes' },
+            { value: '10', label: 'Last 10 wipes' },
+            { value: '20', label: 'Last 20 wipes' }
+          ]"
+          :model-value="String(wipeCount)"
+          size="sm"
+          @update:model-value="wipeCount = Number($event)"
+        />
       </div>
     </div>
 
     <!-- Loading state -->
-    <div v-if="loading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading retention data...</div>
+    <div v-if="loading" class="retention-view__loading">
+      <span class="retention-view__loading-text">Loading retention data...</span>
     </div>
 
     <template v-else-if="retentionData && retentionData.wipe_metrics.length > 0">
       <!-- Summary cards -->
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Users class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Unique Players</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ retentionData.summary.unique_players }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last 30 days</p>
-        </div>
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Clock class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Avg Session</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">
-            {{ safeFixed(retentionData?.summary?.avg_session_duration_minutes, 0) }}m
-          </p>
-          <p class="text-xs text-neutral-600 mt-1">Duration</p>
-        </div>
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <TrendingUp class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">New Players</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ retentionData.summary.new_players }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last 30 days</p>
-        </div>
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <BarChart3 class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Returning</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ retentionData.summary.returning_players }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last 30 days</p>
-        </div>
+      <div class="retention-view__stats">
+        <StatCard
+          label="Unique players"
+          :value="retentionData.summary.unique_players"
+          icon="users"
+          note="Last 30 days"
+        />
+        <StatCard
+          label="Avg session"
+          :value="safeFixed(retentionData?.summary?.avg_session_duration_minutes, 0)"
+          unit="m"
+          icon="clock"
+          note="Duration"
+        />
+        <StatCard
+          label="New players"
+          :value="retentionData.summary.new_players"
+          icon="trending-up"
+          note="Last 30 days"
+        />
+        <StatCard
+          label="Returning"
+          :value="retentionData.summary.returning_players"
+          icon="bar-chart-3"
+          note="Last 30 days"
+        />
       </div>
 
       <!-- Retention curve chart -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">
-          Retention Curve (Post-Wipe Return Rates)
-        </h2>
-        <div ref="retentionChart" class="h-96"></div>
-        <div class="mt-4 text-xs text-neutral-500">
-          <p>
-            <strong>How to read:</strong> Percentage of players who played in the 7 days before a wipe and
-            returned within 24h/48h/72h after the wipe.
-          </p>
-        </div>
-      </div>
+      <Panel title="Retention curve (post-wipe return rates)">
+        <div ref="retentionChart" class="retention-view__chart-area"></div>
+        <p class="retention-view__chart-note">
+          <strong>How to read:</strong> Percentage of players who played in the 7 days before a wipe and returned within 24h/48h/72h after the wipe.
+        </p>
+      </Panel>
 
       <!-- Wipe details table -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">
-          Wipe Details
-        </h2>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
+      <Panel title="Wipe details" :flush-body="true">
+        <div class="retention-view__table-wrap">
+          <table class="retention-view__table">
             <thead>
-              <tr class="border-b border-neutral-800">
-                <th class="text-left py-2 px-3 text-neutral-400 font-medium">Wipe Date</th>
-                <th class="text-right py-2 px-3 text-neutral-400 font-medium">Pre-Wipe Players</th>
-                <th class="text-right py-2 px-3 text-neutral-400 font-medium">24h Return</th>
-                <th class="text-right py-2 px-3 text-neutral-400 font-medium">48h Return</th>
-                <th class="text-right py-2 px-3 text-neutral-400 font-medium">72h Return</th>
+              <tr class="retention-view__thead-row">
+                <th class="retention-view__th retention-view__th--left">Wipe date</th>
+                <th class="retention-view__th retention-view__th--right">Pre-wipe players</th>
+                <th class="retention-view__th retention-view__th--right">24h return</th>
+                <th class="retention-view__th retention-view__th--right">48h return</th>
+                <th class="retention-view__th retention-view__th--right">72h return</th>
               </tr>
             </thead>
             <tbody>
               <tr
                 v-for="wipe in retentionData.wipe_metrics"
                 :key="wipe.wipe_id"
-                class="border-b border-neutral-800 hover:bg-neutral-800/50 transition-colors"
+                class="retention-view__row"
               >
-                <td class="py-3 px-3 text-neutral-300">
+                <td class="retention-view__td retention-view__td--date">
                   {{ new Date(wipe.wipe_date).toLocaleString('en-US', {
                     month: 'short',
                     day: 'numeric',
@@ -306,38 +299,165 @@ onMounted(() => {
                     minute: '2-digit'
                   }) }}
                 </td>
-                <td class="py-3 px-3 text-right text-neutral-300">
+                <td class="retention-view__td retention-view__td--num">
                   {{ wipe.total_players_before_wipe }}
                 </td>
-                <td class="py-3 px-3 text-right">
-                  <span class="text-neutral-100 font-medium">{{ wipe.returned_24h }}</span>
-                  <span class="text-neutral-500 text-xs ml-1">({{ safeFixed(wipe.retention_24h_percent, 1) }}%)</span>
+                <td class="retention-view__td retention-view__td--num">
+                  <span class="retention-view__count">{{ wipe.returned_24h }}</span>
+                  <span class="retention-view__pct">({{ safeFixed(wipe.retention_24h_percent, 1) }}%)</span>
                 </td>
-                <td class="py-3 px-3 text-right">
-                  <span class="text-neutral-100 font-medium">{{ wipe.returned_48h }}</span>
-                  <span class="text-neutral-500 text-xs ml-1">({{ safeFixed(wipe.retention_48h_percent, 1) }}%)</span>
+                <td class="retention-view__td retention-view__td--num">
+                  <span class="retention-view__count">{{ wipe.returned_48h }}</span>
+                  <span class="retention-view__pct">({{ safeFixed(wipe.retention_48h_percent, 1) }}%)</span>
                 </td>
-                <td class="py-3 px-3 text-right">
-                  <span class="text-neutral-100 font-medium">{{ wipe.returned_72h }}</span>
-                  <span class="text-neutral-500 text-xs ml-1">({{ safeFixed(wipe.retention_72h_percent, 1) }}%)</span>
+                <td class="retention-view__td retention-view__td--num">
+                  <span class="retention-view__count">{{ wipe.returned_72h }}</span>
+                  <span class="retention-view__pct">({{ safeFixed(wipe.retention_72h_percent, 1) }}%)</span>
                 </td>
               </tr>
             </tbody>
           </table>
         </div>
-      </div>
+      </Panel>
     </template>
 
     <!-- Empty state -->
-    <div
-      v-else
-      class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center"
-    >
-      <Users class="w-12 h-12 text-neutral-700 mx-auto mb-4" />
-      <p class="text-neutral-500 mb-2">No retention data available</p>
-      <p class="text-sm text-neutral-600">
-        Player retention metrics will appear here after wipes are tracked and players join/leave.
-      </p>
-    </div>
+    <Panel v-else>
+      <EmptyState
+        icon="users"
+        title="No retention data available"
+        description="Player retention metrics will appear here after wipes are tracked and players join/leave."
+      />
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.retention-view {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.retention-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.retention-view__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.retention-view__controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.retention-view__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.retention-view__loading-text {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.retention-view__stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+@media (min-width: 1024px) {
+  .retention-view__stats {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.retention-view__chart-area {
+  height: 384px;
+}
+
+.retention-view__chart-note {
+  margin-top: 12px;
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+}
+
+.retention-view__table-wrap {
+  overflow-x: auto;
+}
+
+.retention-view__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.retention-view__thead-row {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.retention-view__th {
+  padding: 10px 12px;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.retention-view__th--left {
+  text-align: left;
+}
+
+.retention-view__th--right {
+  text-align: right;
+}
+
+.retention-view__row {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background var(--dur-fast) var(--ease-standard);
+}
+
+.retention-view__row:hover {
+  background: var(--surface-hover);
+}
+
+.retention-view__td {
+  padding: 12px 12px;
+  color: var(--text-secondary);
+}
+
+.retention-view__td--date {
+  color: var(--text-secondary);
+}
+
+.retention-view__td--num {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.retention-view__count {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.retention-view__pct {
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  margin-left: 4px;
+}
+</style>
diff --git a/frontend/src/views/admin/PlayersView.vue b/frontend/src/views/admin/PlayersView.vue
index fb75a01..d3fc7f2 100644
--- a/frontend/src/views/admin/PlayersView.vue
+++ b/frontend/src/views/admin/PlayersView.vue
@@ -3,7 +3,14 @@ import { ref, computed, onMounted } from 'vue'
 import { useServerStore } from '@/stores/server'
 import { useApi } from '@/composables/useApi'
 import { useToastStore } from '@/stores/toast'
-import { Users, Search, Ban, LogOut, Shield, RefreshCw } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const server = useServerStore()
 const api = useApi()
@@ -50,6 +57,12 @@ const filteredPlayers = computed(() => {
 
 const onlineCount = computed(() => players.value.filter(p => p.is_online).length)
 
+const statusTabItems = computed(() => [
+  { value: 'all', label: 'All', count: players.value.length },
+  { value: 'online', label: 'Online', count: players.value.filter(p => p.is_online).length },
+  { value: 'offline', label: 'Offline', count: players.value.filter(p => !p.is_online).length },
+])
+
 function formatPlaytime(seconds: number): string {
   const h = Math.floor(seconds / 3600)
   const m = Math.floor((seconds % 3600) / 60)
@@ -58,7 +71,7 @@ function formatPlaytime(seconds: number): string {
 }
 
 function formatConnectedTime(iso: string | null): string {
-  if (!iso) return '\u2014'
+  if (!iso) return '—'
   const diff = Date.now() - new Date(iso).getTime()
   const m = Math.floor(diff / 60000)
   const h = Math.floor(m / 60)
@@ -66,6 +79,18 @@ function formatConnectedTime(iso: string | null): string {
   return `${m}m`
 }
 
+function playerStatusTone(player: Player): 'online' | 'offline' | 'warn' {
+  if (player.is_banned) return 'warn'
+  if (player.is_online) return 'online'
+  return 'offline'
+}
+
+function playerStatusLabel(player: Player): string {
+  if (player.is_banned) return 'Banned'
+  if (player.is_online) return 'Online'
+  return 'Offline'
+}
+
 async function fetchPlayers() {
   isLoading.value = true
   try {
@@ -106,132 +131,197 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Users class="w-5 h-5 text-oxide-500" />
+  <div class="pv">
+    <!-- Page head -->
+    <div class="pv__head">
+      <div class="pv__head-id">
+        <div class="pv__head-chip">
+          <Icon name="users" :size="20" :stroke-width="2" />
+        </div>
         <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Player Management</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">
-            {{ onlineCount }} online / {{ players.length }} total
-          </p>
+          <div class="t-eyebrow">Player management</div>
+          <h1 class="pv__title">Players</h1>
         </div>
       </div>
-      <button
-        @click="fetchPlayers"
-        :disabled="isLoading"
-        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
-      >
-        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
-        Refresh
-      </button>
+      <div class="pv__head-actions">
+        <div class="pv__stat-pill">
+          <span class="pv__stat-num">{{ onlineCount }}</span>
+          <span class="pv__stat-sep">/</span>
+          <span class="pv__stat-total">{{ players.length }}</span>
+          <Badge tone="online" :dot="true" :pulse="onlineCount > 0">Online</Badge>
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="refresh-cw"
+          :loading="isLoading"
+          :disabled="isLoading"
+          @click="fetchPlayers"
+        >Refresh</Button>
+      </div>
     </div>
 
     <!-- Filters -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search by name or Steam ID..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-        <button
-          v-for="opt in (['all', 'online', 'offline'] as const)"
-          :key="opt"
-          @click="filterStatus = opt"
-          class="px-3 py-2 text-sm font-medium transition-colors capitalize"
-          :class="filterStatus === opt
-            ? 'bg-oxide-500/15 text-oxide-400'
-            : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          {{ opt }}
-        </button>
-      </div>
+    <div class="pv__filters">
+      <Input
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search by name or Steam ID…"
+        size="sm"
+        :mono="false"
+        style="max-width: 320px;"
+      />
+      <Tabs v-model="filterStatus" :items="statusTabItems" />
     </div>
 
     <!-- Player table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <Panel :flush-body="true">
+      <!-- Empty state -->
+      <EmptyState
+        v-if="filteredPlayers.length === 0 && !isLoading"
+        icon="users"
+        :title="searchQuery ? 'No players found' : 'No players'"
+        :description="searchQuery
+          ? `No players matching &quot;${searchQuery}&quot;.`
+          : 'No players found. Server may be offline or API not connected.'"
+      />
+
+      <!-- Loading state -->
+      <div v-else-if="isLoading && filteredPlayers.length === 0" class="pv__loading">
+        <Icon name="loader" :size="20" class="pv__spin" />
+        <span>Loading players…</span>
+      </div>
+
+      <!-- Table -->
+      <table v-else class="pv__table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Player</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Steam ID</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Session</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Playtime</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Ping</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
+          <tr>
+            <th>Player</th>
+            <th>Steam ID</th>
+            <th>Status</th>
+            <th>Session</th>
+            <th>Playtime</th>
+            <th>Ping</th>
+            <th class="pv__th-right">Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="filteredPlayers.length === 0">
-            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="isLoading">Loading players...</template>
-              <template v-else-if="searchQuery">No players matching "{{ searchQuery }}"</template>
-              <template v-else>No players found. Server may be offline or API not connected.</template>
-            </td>
-          </tr>
+        <tbody>
           <tr
             v-for="player in filteredPlayers"
             :key="player.steam_id"
-            class="hover:bg-neutral-800/50 transition-colors"
           >
-            <td class="px-4 py-3">
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-medium text-neutral-100">{{ player.display_name }}</span>
-                <Shield v-if="player.is_admin" class="w-3.5 h-3.5 text-oxide-400" title="Admin" />
+            <td>
+              <div class="pv__player-name">
+                <span class="pv__name">{{ player.display_name }}</span>
+                <Badge v-if="player.is_admin" tone="accent" size="md">Admin</Badge>
               </div>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ player.steam_id }}</td>
-            <td class="px-4 py-3">
-              <span
-                class="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full"
-                :class="player.is_online
-                  ? 'bg-green-500/10 text-green-400'
-                  : player.is_banned
-                    ? 'bg-red-500/10 text-red-400'
-                    : 'bg-neutral-700/50 text-neutral-400'"
-              >
-                <span
-                  class="h-1.5 w-1.5 rounded-full"
-                  :class="player.is_online ? 'bg-green-500' : player.is_banned ? 'bg-red-500' : 'bg-neutral-500'"
-                />
-                {{ player.is_banned ? 'Banned' : player.is_online ? 'Online' : 'Offline' }}
-              </span>
+            <td class="pv__mono">{{ player.steam_id }}</td>
+            <td>
+              <Badge
+                :tone="playerStatusTone(player)"
+                :dot="true"
+                :pulse="player.is_online && !player.is_banned"
+              >{{ playerStatusLabel(player) }}</Badge>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">
-              {{ player.is_online ? formatConnectedTime(player.connected_at) : '\u2014' }}
+            <td class="pv__secondary">
+              {{ player.is_online ? formatConnectedTime(player.connected_at) : '—' }}
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatPlaytime(player.playtime_seconds) }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">
-              {{ player.is_online && player.ping_ms ? `${player.ping_ms}ms` : '\u2014' }}
+            <td class="pv__secondary pv__mono">{{ formatPlaytime(player.playtime_seconds) }}</td>
+            <td class="pv__secondary pv__mono">
+              {{ player.is_online && player.ping_ms ? `${player.ping_ms}ms` : '—' }}
             </td>
-            <td class="px-4 py-3 text-right">
-              <div class="flex items-center justify-end gap-1" v-if="player.is_online">
-                <button
+            <td class="pv__td-right">
+              <div v-if="player.is_online" class="pv__row-actions">
+                <IconButton
+                  icon="log-out"
+                  variant="ghost"
+                  size="sm"
+                  label="Kick"
                   @click="kickPlayer(player.steam_id, player.display_name)"
-                  class="p-1.5 text-neutral-500 hover:text-yellow-400 rounded transition-colors"
-                  title="Kick"
-                >
-                  <LogOut class="w-4 h-4" />
-                </button>
-                <button
+                />
+                <IconButton
+                  icon="ban"
+                  variant="danger"
+                  size="sm"
+                  label="Ban"
                   @click="banPlayer(player.steam_id, player.display_name)"
-                  class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
-                  title="Ban"
-                >
-                  <Ban class="w-4 h-4" />
-                </button>
+                />
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.pv { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.pv__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  flex-wrap: wrap; gap: 12px;
+}
+.pv__head-id { display: flex; align-items: center; gap: 12px; }
+.pv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.pv__head-actions { display: flex; align-items: center; gap: 12px; }
+
+/* Stat pill */
+.pv__stat-pill {
+  display: flex; align-items: center; gap: 7px;
+  font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
+}
+.pv__stat-num { font-weight: 700; color: var(--status-online); }
+.pv__stat-sep { color: var(--text-muted); }
+.pv__stat-total { color: var(--text-tertiary); }
+
+/* Filters */
+.pv__filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+
+/* Loading */
+.pv__loading {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  padding: 48px; color: var(--text-tertiary); font-size: var(--text-sm);
+}
+@keyframes pv-spin { to { transform: rotate(360deg); } }
+.pv__spin { animation: pv-spin 0.7s linear infinite; }
+
+/* Table */
+.pv__table { width: 100%; border-collapse: collapse; }
+.pv__table th {
+  padding: 10px 14px; text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.pv__table td {
+  padding: 10px 14px; font-size: var(--text-sm);
+  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
+}
+.pv__table tbody tr:last-child td { border-bottom: 0; }
+.pv__table tbody tr:hover td { background: var(--surface-hover); }
+
+/* Col helpers */
+.pv__th-right { text-align: right; }
+.pv__td-right { text-align: right; }
+.pv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs) !important; color: var(--text-secondary) !important; }
+.pv__secondary { color: var(--text-secondary) !important; }
+
+/* Player name cell */
+.pv__player-name { display: flex; align-items: center; gap: 8px; }
+.pv__name { font-weight: 500; }
+
+/* Row actions */
+.pv__row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
+</style>
diff --git a/frontend/src/views/admin/PluginsView.vue b/frontend/src/views/admin/PluginsView.vue
index d0deb43..573d7f3 100644
--- a/frontend/src/views/admin/PluginsView.vue
+++ b/frontend/src/views/admin/PluginsView.vue
@@ -4,7 +4,15 @@ import { usePluginStore } from '@/stores/plugins'
 import type { UmodPlugin } from '@/stores/plugins'
 import { useToastStore } from '@/stores/toast'
 import type { PluginEntry } from '@/types'
-import { Puzzle, Search, Download, RefreshCw, Power, PowerOff, Trash2, Loader2, Upload, X } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const pluginStore = usePluginStore()
 const toast = useToastStore()
@@ -35,6 +43,12 @@ const browsePlugins = computed(() => pluginStore.browseResults?.data ?? [])
 
 const loadedCount = computed(() => pluginStore.plugins.filter((p: PluginEntry) => p.is_loaded).length)
 
+const tabItems = [
+  { value: 'installed', label: 'Installed' },
+  { value: 'browse', label: 'Browse uMod' },
+  { value: 'upload', label: 'Upload custom' },
+]
+
 function sourceLabel(source: string): string {
   switch (source) {
     case 'umod': return 'uMod'
@@ -44,11 +58,11 @@ function sourceLabel(source: string): string {
   }
 }
 
-function sourceBadgeClass(source: string): string {
+function sourceTone(source: string): 'online' | 'accent' | 'neutral' {
   switch (source) {
-    case 'umod': return 'bg-green-500/10 text-green-400'
-    case 'corrosion_module': return 'bg-oxide-500/15 text-oxide-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+    case 'umod': return 'online'
+    case 'corrosion_module': return 'accent'
+    default: return 'neutral'
   }
 }
 
@@ -168,274 +182,249 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Puzzle class="w-5 h-5 text-oxide-500" />
+  <div class="plv">
+    <!-- Page head -->
+    <div class="plv__head">
+      <div class="plv__head-id">
+        <div class="plv__head-chip">
+          <Icon name="puzzle" :size="20" :stroke-width="2" />
+        </div>
         <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Plugins</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">
-            {{ loadedCount }} loaded / {{ pluginStore.plugins.length }} installed
-          </p>
+          <div class="t-eyebrow">Plugin management</div>
+          <h1 class="plv__title">Plugins</h1>
         </div>
       </div>
-      <button
-        @click="pluginStore.fetchPlugins()"
-        :disabled="pluginStore.isLoading"
-        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
-      >
-        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': pluginStore.isLoading }" />
-        Refresh
-      </button>
-    </div>
-
-    <!-- Tabs + Search -->
-    <div class="flex items-center gap-4">
-      <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-        <button
-          @click="tab = 'installed'"
-          class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="tab === 'installed' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          Installed
-        </button>
-        <button
-          @click="tab = 'browse'"
-          class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="tab === 'browse' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          Browse uMod
-        </button>
-        <button
-          @click="tab = 'upload'"
-          class="px-4 py-2 text-sm font-medium transition-colors"
-          :class="tab === 'upload' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-        >
-          Upload Custom
-        </button>
-      </div>
-      <div v-if="tab === 'installed'" class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search installed plugins..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <div v-if="tab === 'browse'" class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="browseQuery"
-          type="text"
-          placeholder="Search uMod plugins..."
-          @input="scheduleBrowseSearch"
-          @keydown.enter="handleBrowseSearch(1)"
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
+      <div class="plv__head-actions">
+        <div class="plv__stat-pill">
+          <span class="plv__stat-num">{{ loadedCount }}</span>
+          <span class="plv__stat-sep">/</span>
+          <span class="plv__stat-total">{{ pluginStore.plugins.length }}</span>
+          <span class="plv__stat-label">loaded</span>
+        </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="refresh-cw"
+          :loading="pluginStore.isLoading"
+          :disabled="pluginStore.isLoading"
+          @click="pluginStore.fetchPlugins()"
+        >Refresh</Button>
       </div>
     </div>
 
-    <!-- Installed Plugins -->
-    <div v-if="tab === 'installed'" class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <!-- Tab bar + search -->
+    <div class="plv__toolbar">
+      <Tabs v-model="tab" :items="tabItems" />
+      <Input
+        v-if="tab === 'installed'"
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search installed plugins…"
+        size="sm"
+        style="max-width: 280px;"
+      />
+      <Input
+        v-if="tab === 'browse'"
+        v-model="browseQuery"
+        icon="search"
+        placeholder="Search uMod plugins…"
+        size="sm"
+        style="max-width: 280px;"
+        @input="scheduleBrowseSearch"
+        @keydown.enter="handleBrowseSearch(1)"
+      />
+    </div>
+
+    <!-- ===== INSTALLED TAB ===== -->
+    <Panel v-if="tab === 'installed'" :flush-body="true">
+      <EmptyState
+        v-if="filteredPlugins.length === 0 && !pluginStore.isLoading"
+        icon="puzzle"
+        title="No plugins installed"
+        :description="searchQuery ? `No plugins matching &quot;${searchQuery}&quot;.` : 'Install plugins from the Browse uMod tab or upload a custom .cs file.'"
+      />
+      <div v-else-if="pluginStore.isLoading && filteredPlugins.length === 0" class="plv__loading">
+        <Icon name="loader" :size="20" class="plv__spin" />
+        <span>Loading plugins…</span>
+      </div>
+      <table v-else class="plv__table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Plugin</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Version</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Source</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Wipe Behavior</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
+          <tr>
+            <th>Plugin</th>
+            <th>Version</th>
+            <th>Source</th>
+            <th>Status</th>
+            <th>Wipe behavior</th>
+            <th class="plv__th-right">Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="filteredPlugins.length === 0">
-            <td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="pluginStore.isLoading">Loading plugins...</template>
-              <template v-else>No plugins installed yet.</template>
-            </td>
-          </tr>
+        <tbody>
           <tr
             v-for="plugin in filteredPlugins"
             :key="plugin.id"
-            class="hover:bg-neutral-800/50 transition-colors"
           >
-            <td class="px-4 py-3 text-sm font-medium text-neutral-100">{{ plugin.plugin_name }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ plugin.plugin_version || '\u2014' }}</td>
-            <td class="px-4 py-3">
-              <span class="text-xs font-medium px-2 py-0.5 rounded-full" :class="sourceBadgeClass(plugin.source)">
-                {{ sourceLabel(plugin.source) }}
-              </span>
+            <td class="plv__plugin-name">{{ plugin.plugin_name }}</td>
+            <td class="plv__mono">{{ plugin.plugin_version ?? '—' }}</td>
+            <td>
+              <Badge :tone="sourceTone(plugin.source)" size="md">{{ sourceLabel(plugin.source) }}</Badge>
             </td>
-            <td class="px-4 py-3">
-              <span
-                class="inline-flex items-center gap-1.5 text-xs font-medium"
-                :class="plugin.is_loaded ? 'text-green-400' : 'text-neutral-500'"
-              >
-                <span class="h-1.5 w-1.5 rounded-full" :class="plugin.is_loaded ? 'bg-green-500' : 'bg-neutral-600'" />
-                {{ plugin.is_loaded ? 'Loaded' : 'Unloaded' }}
-              </span>
+            <td>
+              <Badge
+                :tone="plugin.is_loaded ? 'online' : 'offline'"
+                :dot="true"
+                :pulse="plugin.is_loaded"
+              >{{ plugin.is_loaded ? 'Loaded' : 'Unloaded' }}</Badge>
             </td>
-            <td class="px-4 py-3 text-xs text-neutral-500">
+            <td class="plv__secondary plv__wipe-cell">
               <template v-if="plugin.never_wipe">Never wipe</template>
               <template v-else>
                 {{ [plugin.wipe_on_map && 'Map', plugin.wipe_on_bp && 'BP', plugin.wipe_on_full && 'Full'].filter(Boolean).join(', ') || 'None' }}
               </template>
             </td>
-            <td class="px-4 py-3 text-right">
-              <div class="flex items-center justify-end gap-1">
-                <button
+            <td class="plv__td-right">
+              <div class="plv__row-actions">
+                <IconButton
+                  :icon="plugin.is_loaded ? 'power' : 'play'"
+                  variant="ghost"
+                  size="sm"
+                  :label="plugin.is_loaded ? 'Unload' : 'Load'"
                   @click="handleToggleLoad(plugin)"
-                  class="p-1.5 rounded transition-colors"
-                  :class="plugin.is_loaded ? 'text-neutral-500 hover:text-yellow-400' : 'text-neutral-500 hover:text-green-400'"
-                  :title="plugin.is_loaded ? 'Unload' : 'Load'"
-                >
-                  <component :is="plugin.is_loaded ? PowerOff : Power" class="w-4 h-4" />
-                </button>
-                <button
+                />
+                <IconButton
+                  icon="trash-2"
+                  variant="danger"
+                  size="sm"
+                  label="Uninstall"
                   @click="handleUninstall(plugin)"
-                  class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
-                  title="Uninstall"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
 
-    <!-- Browse uMod -->
+    <!-- ===== BROWSE UMOD TAB ===== -->
     <div v-if="tab === 'browse'">
-      <!-- Empty state: no search yet -->
-      <div v-if="!browseQuery.trim() && browsePlugins.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-        <Search class="w-10 h-10 text-neutral-600 mx-auto mb-3" />
-        <h3 class="text-lg font-medium text-neutral-300 mb-1">Search uMod</h3>
-        <p class="text-sm text-neutral-500">Type a plugin name above to search the uMod plugin directory.</p>
-      </div>
+      <!-- No search yet -->
+      <Panel v-if="!browseQuery.trim() && browsePlugins.length === 0">
+        <EmptyState
+          icon="search"
+          title="Search uMod"
+          description="Type a plugin name above to search the uMod plugin directory."
+        />
+      </Panel>
 
       <!-- Loading -->
-      <div v-else-if="pluginStore.isBrowseLoading" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-        <Loader2 class="w-8 h-8 text-neutral-500 animate-spin mx-auto mb-3" />
-        <p class="text-sm text-neutral-500">Searching uMod...</p>
-      </div>
+      <Panel v-else-if="pluginStore.isBrowseLoading">
+        <div class="plv__loading">
+          <Icon name="loader" :size="20" class="plv__spin" />
+          <span>Searching uMod…</span>
+        </div>
+      </Panel>
 
       <!-- No results -->
-      <div v-else-if="browseQuery.trim() && browsePlugins.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-        <Download class="w-10 h-10 text-neutral-600 mx-auto mb-3" />
-        <h3 class="text-lg font-medium text-neutral-300 mb-1">No plugins found</h3>
-        <p class="text-sm text-neutral-500">No uMod plugins matched "{{ browseQuery }}". Try a different search term.</p>
-      </div>
+      <Panel v-else-if="browseQuery.trim() && browsePlugins.length === 0">
+        <EmptyState
+          icon="download"
+          title="No plugins found"
+          :description="`No uMod plugins matched &quot;${browseQuery}&quot;. Try a different search term.`"
+        />
+      </Panel>
 
       <!-- Results -->
-      <div v-else class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-        <div v-if="pluginStore.browseResults" class="px-4 py-2 border-b border-neutral-800 flex items-center justify-between">
-          <p class="text-xs text-neutral-500">
-            {{ pluginStore.browseResults.total.toLocaleString() }} plugins found
-            &bull; Page {{ pluginStore.browseResults.current_page }} of {{ pluginStore.browseResults.last_page }}
-          </p>
-          <div class="flex items-center gap-1">
-            <button
-              @click="browsePrev"
-              :disabled="browsePage <= 1 || pluginStore.isBrowseLoading"
-              class="px-2.5 py-1 text-xs font-medium rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-            >
-              &larr; Prev
-            </button>
-            <button
-              @click="browseNext"
-              :disabled="!pluginStore.browseResults || browsePage >= pluginStore.browseResults.last_page || pluginStore.isBrowseLoading"
-              class="px-2.5 py-1 text-xs font-medium rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-            >
-              Next &rarr;
-            </button>
-          </div>
-        </div>
-        <table class="w-full">
+      <Panel v-else :flush-body="true">
+        <template #actions>
+          <span v-if="pluginStore.browseResults" class="plv__browse-meta">
+            {{ pluginStore.browseResults.total.toLocaleString() }} plugins
+            &middot; page {{ pluginStore.browseResults.current_page }}/{{ pluginStore.browseResults.last_page }}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            icon="chevron-left"
+            :disabled="browsePage <= 1 || pluginStore.isBrowseLoading"
+            @click="browsePrev"
+          >Prev</Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            icon-right="chevron-right"
+            :disabled="!pluginStore.browseResults || browsePage >= pluginStore.browseResults.last_page || pluginStore.isBrowseLoading"
+            @click="browseNext"
+          >Next</Button>
+        </template>
+        <table class="plv__table">
           <thead>
-            <tr class="border-b border-neutral-800 text-left">
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Plugin</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Author</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Version</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Downloads</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Action</th>
+            <tr>
+              <th>Plugin</th>
+              <th>Author</th>
+              <th>Version</th>
+              <th>Downloads</th>
+              <th class="plv__th-right">Action</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-neutral-800">
+          <tbody>
             <tr
               v-for="result in browsePlugins"
               :key="result.name"
-              class="hover:bg-neutral-800/50 transition-colors"
             >
-              <td class="px-4 py-3">
-                <p class="text-sm font-medium text-neutral-100">{{ result.title }}</p>
-                <p v-if="result.description" class="text-xs text-neutral-500 mt-0.5 truncate max-w-xs">{{ result.description }}</p>
+              <td>
+                <div class="plv__browse-name">{{ result.title }}</div>
+                <div v-if="result.description" class="plv__browse-desc">{{ result.description }}</div>
               </td>
-              <td class="px-4 py-3 text-sm text-neutral-400">{{ result.author ?? '\u2014' }}</td>
-              <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ result.latest_release_version_formatted ?? '\u2014' }}</td>
-              <td class="px-4 py-3 text-sm text-neutral-400">{{ result.downloads_shortened ?? '\u2014' }}</td>
-              <td class="px-4 py-3 text-right">
-                <button
-                  @click="installFromBrowse(result)"
+              <td class="plv__secondary">{{ result.author ?? '—' }}</td>
+              <td class="plv__mono">{{ result.latest_release_version_formatted ?? '—' }}</td>
+              <td class="plv__secondary plv__mono">{{ result.downloads_shortened ?? '—' }}</td>
+              <td class="plv__td-right">
+                <Button
+                  size="sm"
+                  :variant="isAlreadyInstalled(result.name) ? 'secondary' : 'primary'"
+                  :icon="installing === result.name ? 'loader' : 'download'"
+                  :loading="installing === result.name"
                   :disabled="installing === result.name || isAlreadyInstalled(result.name)"
-                  class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ml-auto"
-                  :class="isAlreadyInstalled(result.name)
-                    ? 'bg-neutral-700 text-neutral-500 cursor-not-allowed'
-                    : 'bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white'"
-                >
-                  <Loader2 v-if="installing === result.name" class="w-3.5 h-3.5 animate-spin" />
-                  <Download v-else class="w-3.5 h-3.5" />
-                  {{ isAlreadyInstalled(result.name) ? 'Installed' : installing === result.name ? 'Installing...' : 'Install' }}
-                </button>
+                  @click="installFromBrowse(result)"
+                >{{ isAlreadyInstalled(result.name) ? 'Installed' : 'Install' }}</Button>
               </td>
             </tr>
           </tbody>
         </table>
         <!-- Bottom pagination -->
-        <div v-if="pluginStore.browseResults && pluginStore.browseResults.last_page > 1" class="px-4 py-3 border-t border-neutral-800 flex items-center justify-between">
-          <p class="text-xs text-neutral-500">
+        <div v-if="pluginStore.browseResults && pluginStore.browseResults.last_page > 1" class="plv__browse-foot">
+          <span class="plv__browse-meta">
             Page {{ pluginStore.browseResults.current_page }} of {{ pluginStore.browseResults.last_page }}
-          </p>
-          <div class="flex items-center gap-1">
-            <button
-              @click="browsePrev"
+          </span>
+          <div class="plv__browse-pag">
+            <Button
+              variant="secondary"
+              size="sm"
+              icon="chevron-left"
               :disabled="browsePage <= 1 || pluginStore.isBrowseLoading"
-              class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700"
-            >
-              &larr; Previous
-            </button>
-            <button
-              @click="browseNext"
+              @click="browsePrev"
+            >Previous</Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              icon-right="chevron-right"
               :disabled="!pluginStore.browseResults || browsePage >= pluginStore.browseResults.last_page || pluginStore.isBrowseLoading"
-              class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700"
-            >
-              Next &rarr;
-            </button>
+              @click="browseNext"
+            >Next</Button>
           </div>
         </div>
-      </div>
+      </Panel>
     </div>
 
-    <!-- Upload Custom Plugin -->
-    <div v-if="tab === 'upload'" class="space-y-4">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
-        <h2 class="text-base font-semibold text-neutral-100 mb-1">Upload Custom Plugin</h2>
-        <p class="text-sm text-neutral-500 mb-6">
-          Upload .cs plugin files from Lone Wolf, Codefling, or your own code. Max 5 MB.
-          The file will be pushed to your server via the companion agent.
-        </p>
+    <!-- ===== UPLOAD CUSTOM TAB ===== -->
+    <div v-if="tab === 'upload'" class="plv__upload-wrap">
+      <Panel title="Upload custom plugin" subtitle="Upload .cs plugin files from Lone Wolf, Codefling, or your own code. Max 5 MB.">
 
         <!-- Drop zone -->
         <div
-          class="relative border-2 border-dashed rounded-lg p-10 text-center transition-colors cursor-pointer"
-          :class="isDragOver
-            ? 'border-oxide-500 bg-oxide-500/5'
-            : uploadFile
-              ? 'border-green-600 bg-green-900/10'
-              : 'border-neutral-700 hover:border-neutral-600'"
+          class="plv__dropzone"
+          :class="{
+            'plv__dropzone--active': isDragOver,
+            'plv__dropzone--ready': !!uploadFile && !isDragOver,
+          }"
           @dragover.prevent="isDragOver = true"
           @dragleave.prevent="isDragOver = false"
           @drop.prevent="handleDrop"
@@ -445,65 +434,174 @@ onMounted(() => {
             ref="uploadInput"
             type="file"
             accept=".cs"
-            class="hidden"
+            class="plv__file-hidden"
             @change="handleFilePick"
           />
 
-          <!-- No file selected -->
+          <!-- No file -->
           <template v-if="!uploadFile">
-            <Upload class="w-10 h-10 text-neutral-600 mx-auto mb-3" />
-            <p class="text-sm font-medium text-neutral-300">Drop your .cs file here</p>
-            <p class="text-xs text-neutral-500 mt-1">or click to browse</p>
+            <div class="plv__drop-icon">
+              <Icon name="upload" :size="22" :stroke-width="1.75" />
+            </div>
+            <p class="plv__drop-label">Drop your .cs file here</p>
+            <p class="plv__drop-hint">or click to browse</p>
           </template>
 
           <!-- File selected -->
           <template v-else>
-            <div class="flex items-center justify-center gap-3">
-              <Puzzle class="w-8 h-8 text-green-400 flex-shrink-0" />
-              <div class="text-left">
-                <p class="text-sm font-medium text-neutral-100">{{ uploadFile.name }}</p>
-                <p class="text-xs text-neutral-500 mt-0.5">{{ (uploadFile.size / 1024).toFixed(1) }} KB</p>
+            <div class="plv__file-row">
+              <div class="plv__file-icon">
+                <Icon name="puzzle" :size="20" :stroke-width="1.75" />
               </div>
-              <button
+              <div class="plv__file-info">
+                <div class="plv__file-name">{{ uploadFile.name }}</div>
+                <div class="plv__file-size">{{ (uploadFile.size / 1024).toFixed(1) }} KB</div>
+              </div>
+              <IconButton
+                icon="x"
+                variant="ghost"
+                size="sm"
+                label="Remove"
                 @click.stop="clearUpload"
-                class="ml-2 p-1 text-neutral-500 hover:text-red-400 rounded transition-colors"
-                title="Remove"
-              >
-                <X class="w-4 h-4" />
-              </button>
+              />
             </div>
           </template>
         </div>
 
         <!-- Actions -->
-        <div class="flex items-center gap-3 mt-4">
-          <button
-            @click="handleUpload"
+        <div class="plv__upload-actions">
+          <Button
+            icon="upload"
+            :loading="isUploading"
             :disabled="!uploadFile || isUploading"
-            class="flex items-center gap-2 px-5 py-2 text-sm font-medium bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
-          >
-            <Loader2 v-if="isUploading" class="w-4 h-4 animate-spin" />
-            <Upload v-else class="w-4 h-4" />
-            {{ isUploading ? 'Uploading...' : 'Upload Plugin' }}
-          </button>
-          <button
+            @click="handleUpload"
+          >{{ isUploading ? 'Uploading…' : 'Upload plugin' }}</Button>
+          <Button
             v-if="uploadFile"
+            variant="ghost"
             @click="clearUpload"
-            class="px-4 py-2 text-sm font-medium text-neutral-400 hover:text-neutral-200 transition-colors"
-          >
-            Cancel
-          </button>
+          >Cancel</Button>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Info card -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-4">
-        <p class="text-xs text-neutral-500 leading-relaxed">
-          <span class="font-medium text-neutral-400">Note:</span>
-          The plugin will be registered in your plugin list immediately. Your companion agent must be connected
-          for the file to be delivered to the game server. If the agent is offline, re-upload once it reconnects.
-        </p>
-      </div>
+      <Alert tone="info">
+        The plugin will be registered in your plugin list immediately. Your companion agent must be connected
+        for the file to be delivered to the game server. If the agent is offline, re-upload once it reconnects.
+      </Alert>
     </div>
   </div>
 </template>
+
+<style scoped>
+.plv { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.plv__head {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  flex-wrap: wrap; gap: 12px;
+}
+.plv__head-id { display: flex; align-items: center; gap: 12px; }
+.plv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.plv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.plv__head-actions { display: flex; align-items: center; gap: 12px; }
+
+/* Stat pill */
+.plv__stat-pill {
+  display: flex; align-items: center; gap: 6px;
+  font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
+}
+.plv__stat-num { font-weight: 700; color: var(--accent-text); }
+.plv__stat-sep { color: var(--text-muted); }
+.plv__stat-total { color: var(--text-tertiary); }
+.plv__stat-label { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-tertiary); }
+
+/* Toolbar */
+.plv__toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+
+/* Loading */
+.plv__loading {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  padding: 48px; color: var(--text-tertiary); font-size: var(--text-sm);
+}
+@keyframes plv-spin { to { transform: rotate(360deg); } }
+.plv__spin { animation: plv-spin 0.7s linear infinite; }
+
+/* Table */
+.plv__table { width: 100%; border-collapse: collapse; }
+.plv__table th {
+  padding: 10px 14px; text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.plv__table td {
+  padding: 10px 14px; font-size: var(--text-sm);
+  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
+}
+.plv__table tbody tr:last-child td { border-bottom: 0; }
+.plv__table tbody tr:hover td { background: var(--surface-hover); }
+.plv__th-right { text-align: right; }
+.plv__td-right { text-align: right; }
+.plv__plugin-name { font-weight: 500; }
+.plv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs) !important; color: var(--text-secondary) !important; }
+.plv__secondary { color: var(--text-secondary) !important; }
+.plv__wipe-cell { font-size: var(--text-xs) !important; }
+.plv__row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
+
+/* Browse */
+.plv__browse-meta { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
+.plv__browse-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.plv__browse-desc {
+  font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px;
+  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.plv__browse-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; border-top: 1px solid var(--border-subtle);
+}
+.plv__browse-pag { display: flex; gap: 8px; }
+
+/* Upload */
+.plv__upload-wrap { display: flex; flex-direction: column; gap: 12px; }
+
+.plv__dropzone {
+  border: 2px dashed var(--border-default); border-radius: var(--radius-md);
+  padding: 40px 24px; text-align: center;
+  cursor: pointer; transition: var(--transition-colors);
+  display: flex; flex-direction: column; align-items: center; gap: 6px;
+}
+.plv__dropzone:hover { border-color: var(--accent-border); background: var(--accent-soft); }
+.plv__dropzone--active { border-color: var(--accent); background: var(--accent-soft); }
+.plv__dropzone--ready { border-color: var(--status-online-border); background: var(--status-online-soft); }
+
+.plv__file-hidden { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
+
+.plv__drop-icon {
+  width: 46px; height: 46px; border-radius: var(--radius-lg);
+  display: flex; align-items: center; justify-content: center;
+  background: var(--surface-raised-2); color: var(--text-tertiary);
+  box-shadow: var(--ring-default); margin-bottom: 4px;
+}
+.plv__drop-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.plv__drop-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+.plv__file-row { display: flex; align-items: center; gap: 12px; }
+.plv__file-icon {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  background: var(--status-online-soft); color: var(--status-online);
+  box-shadow: inset 0 0 0 1px var(--status-online-border);
+}
+.plv__file-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.plv__file-size { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
+
+.plv__upload-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
+</style>
diff --git a/frontend/src/views/admin/SchedulesView.vue b/frontend/src/views/admin/SchedulesView.vue
index b813d46..7a4430c 100644
--- a/frontend/src/views/admin/SchedulesView.vue
+++ b/frontend/src/views/admin/SchedulesView.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
-import { Clock, Plus, Edit, Trash2, Power, Loader2 } from 'lucide-vue-next'
 import { safeDate } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 interface ScheduledTask {
   id: string
@@ -12,7 +18,7 @@ interface ScheduledTask {
   timezone: string
   is_active: boolean
   next_run: string | null
-  task_config: Record<string, any>
+  task_config: Record<string, unknown>
 }
 
 const api = useApi()
@@ -31,6 +37,13 @@ const formData = ref({
 
 const timezones = ['UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'Europe/London', 'Europe/Paris', 'Asia/Tokyo']
 
+const TASK_TYPE_OPTIONS = [
+  { value: 'restart', label: 'Restart' },
+  { value: 'announcement', label: 'Announcement' },
+  { value: 'command', label: 'Command' },
+  { value: 'plugin_reload', label: 'Plugin reload' },
+]
+
 async function fetchTasks() {
   isLoading.value = true
   try {
@@ -95,167 +108,295 @@ async function toggleActive(task: ScheduledTask) {
   await fetchTasks()
 }
 
+function taskTypeLabel(type: string): string {
+  return type.replace('_', ' ')
+}
+
 onMounted(() => {
   fetchTasks()
 })
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Clock class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Scheduled Tasks</h1>
+  <div class="schedules">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Operations</div>
+        <h1 class="page__title">Scheduled tasks</h1>
       </div>
-      <button
-        @click="openCreateModal"
-        class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
-      >
-        <Plus class="w-4 h-4" />
-        New Task
-      </button>
+      <Button icon="plus" @click="openCreateModal">New task</Button>
     </div>
 
-    <!-- Tasks Table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <div v-if="isLoading" class="p-8 flex justify-center">
-        <Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
+    <!-- Tasks table -->
+    <Panel :flush-body="true" title="Tasks">
+      <div v-if="isLoading" class="loading-row">
+        <span class="cc-btn__spin" style="width:20px;height:20px;border-width:2.5px;" />
       </div>
-      <div v-else-if="tasks.length === 0" class="p-8 text-center text-neutral-500">
-        No scheduled tasks configured.
-      </div>
-      <table v-else class="w-full">
-        <thead class="bg-neutral-800/50 border-b border-neutral-800">
+
+      <EmptyState
+        v-else-if="tasks.length === 0"
+        icon="calendar-clock"
+        title="No scheduled tasks"
+        description="Create tasks to automate restarts, announcements, and commands."
+      >
+        <template #action>
+          <Button icon="plus" size="sm" @click="openCreateModal">New task</Button>
+        </template>
+      </EmptyState>
+
+      <table v-else class="cc-table">
+        <thead>
           <tr>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Task Name</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Schedule</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Timezone</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Next Run</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actions</th>
+            <th>Task name</th>
+            <th>Type</th>
+            <th>Schedule</th>
+            <th>Timezone</th>
+            <th>Next run</th>
+            <th>Status</th>
+            <th>Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-for="task in tasks" :key="task.id" class="hover:bg-neutral-800/30">
-            <td class="px-4 py-3 text-sm text-neutral-200">{{ task.task_name }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400 capitalize">{{ task.task_type.replace('_', ' ') }}</td>
-            <td class="px-4 py-3 text-sm font-mono text-neutral-400">{{ task.cron_expression }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ task.timezone }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ safeDate(task.next_run, '—') }}</td>
-            <td class="px-4 py-3">
-              <span
-                class="text-xs font-medium px-2 py-0.5 rounded-full"
-                :class="task.is_active ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
-              >
+        <tbody>
+          <tr v-for="task in tasks" :key="task.id">
+            <td class="td-primary">{{ task.task_name }}</td>
+            <td class="td-cap">{{ taskTypeLabel(task.task_type) }}</td>
+            <td class="td-mono">{{ task.cron_expression }}</td>
+            <td>{{ task.timezone }}</td>
+            <td class="td-mono">{{ safeDate(task.next_run, '—') }}</td>
+            <td>
+              <Badge :tone="task.is_active ? 'online' : 'neutral'">
                 {{ task.is_active ? 'Active' : 'Paused' }}
-              </span>
+              </Badge>
             </td>
-            <td class="px-4 py-3">
-              <div class="flex items-center gap-2">
-                <button
+            <td>
+              <div class="row-actions">
+                <IconButton
+                  icon="power"
+                  size="sm"
+                  :label="task.is_active ? 'Pause' : 'Activate'"
                   @click="toggleActive(task)"
-                  class="text-neutral-400 hover:text-oxide-400 transition-colors"
-                  :title="task.is_active ? 'Pause' : 'Activate'"
-                >
-                  <Power class="w-4 h-4" />
-                </button>
-                <button
+                />
+                <IconButton
+                  icon="pencil"
+                  size="sm"
+                  label="Edit"
                   @click="openEditModal(task)"
-                  class="text-neutral-400 hover:text-oxide-400 transition-colors"
-                >
-                  <Edit class="w-4 h-4" />
-                </button>
-                <button
+                />
+                <IconButton
+                  icon="trash-2"
+                  variant="danger"
+                  size="sm"
+                  label="Delete"
                   @click="deleteTask(task.id)"
-                  class="text-neutral-400 hover:text-red-400 transition-colors"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
+  </div>
 
-    <!-- Create/Edit Modal -->
+  <!-- Create / Edit Modal -->
+  <Teleport to="body">
     <div
       v-if="showModal"
-      class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+      class="modal-backdrop"
       @click.self="showModal = false"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg w-full max-w-lg">
-        <div class="p-5 border-b border-neutral-800">
-          <h2 class="text-lg font-bold text-neutral-100">{{ editingTask ? 'Edit Task' : 'New Task' }}</h2>
+      <div class="modal">
+        <div class="modal__head">
+          <h2 class="modal__title">{{ editingTask ? 'Edit task' : 'New task' }}</h2>
+          <IconButton icon="x" label="Close" @click="showModal = false" />
         </div>
-        <div class="p-5 space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-2">Task Name</label>
-            <input
-              v-model="formData.task_name"
-              type="text"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500"
-              placeholder="Daily restart"
-            />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-2">Task Type</label>
-            <select
-              v-model="formData.task_type"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
-            >
-              <option value="restart">Restart</option>
-              <option value="announcement">Announcement</option>
-              <option value="command">Command</option>
-              <option value="plugin_reload">Plugin Reload</option>
-            </select>
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-2">Cron Expression</label>
-            <input
-              v-model="formData.cron_expression"
-              type="text"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500"
-              placeholder="0 0 * * *"
-            />
-            <p class="text-xs text-neutral-500 mt-1">Example: "0 0 * * *" = daily at midnight</p>
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-2">Timezone</label>
-            <select
-              v-model="formData.timezone"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 focus:outline-none focus:ring-2 focus:ring-oxide-500"
-            >
-              <option v-for="tz in timezones" :key="tz" :value="tz">{{ tz }}</option>
-            </select>
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-2">Task Config (JSON)</label>
+
+        <div class="modal__body">
+          <Input
+            v-model="formData.task_name"
+            label="Task name"
+            placeholder="Daily restart"
+          />
+
+          <Select
+            v-model="formData.task_type"
+            label="Task type"
+            :options="TASK_TYPE_OPTIONS"
+          />
+
+          <Input
+            v-model="formData.cron_expression"
+            label="Cron expression"
+            placeholder="0 0 * * *"
+            :mono="true"
+            hint="Example: 0 0 * * * = daily at midnight"
+          />
+
+          <Select
+            v-model="formData.timezone"
+            label="Timezone"
+            :options="timezones"
+          />
+
+          <div class="cc-field">
+            <span class="cc-field__label">Task config (JSON)</span>
             <textarea
               v-model="formData.task_config"
               rows="4"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-200 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500"
               placeholder='{"message": "Server restarting..."}'
+              class="cc-textarea cc-textarea--mono"
             />
           </div>
         </div>
-        <div class="p-5 border-t border-neutral-800 flex justify-end gap-3">
-          <button
-            @click="showModal = false"
-            class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            @click="saveTask"
-            class="px-4 py-2 text-sm font-medium bg-oxide-500 hover:bg-oxide-600 text-white rounded-lg transition-colors"
-          >
-            {{ editingTask ? 'Update' : 'Create' }}
-          </button>
+
+        <div class="modal__foot">
+          <Button variant="secondary" @click="showModal = false">Cancel</Button>
+          <Button @click="saveTask">{{ editingTask ? 'Update' : 'Create' }}</Button>
         </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
+
+<style scoped>
+.schedules {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Page head */
+.page__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.page__title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin-top: 4px;
+}
+
+/* Loading row */
+.loading-row {
+  display: flex;
+  justify-content: center;
+  padding: 40px;
+}
+
+/* Table */
+.cc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.cc-table thead tr {
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-inset);
+}
+.cc-table th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+.cc-table tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.cc-table tbody tr:last-child { border-bottom: 0; }
+.cc-table tbody tr:hover { background: var(--surface-hover); }
+.cc-table td {
+  padding: 11px 16px;
+  color: var(--text-secondary);
+  vertical-align: middle;
+}
+.td-primary { color: var(--text-primary); font-weight: 500; }
+.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.td-cap { text-transform: capitalize; }
+
+.row-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  padding: 16px;
+}
+.modal {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,.45));
+  width: 100%;
+  max-width: 520px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.modal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.modal__title {
+  font-size: var(--text-base);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.modal__body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow-y: auto;
+}
+.modal__foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* Textarea */
+.cc-textarea {
+  width: 100%;
+  padding: 9px 11px;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  resize: vertical;
+  outline: 0;
+  transition: var(--transition-colors);
+  box-sizing: border-box;
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-textarea--mono { font-family: var(--font-mono); font-size: var(--text-xs); }
+</style>
diff --git a/frontend/src/views/admin/ServerView.vue b/frontend/src/views/admin/ServerView.vue
index 388d683..a754c31 100644
--- a/frontend/src/views/admin/ServerView.vue
+++ b/frontend/src/views/admin/ServerView.vue
@@ -3,25 +3,17 @@ import { ref, computed, onMounted } from 'vue'
 import { useServerStore } from '@/stores/server'
 import { useAuthStore } from '@/stores/auth'
 import { useToastStore } from '@/stores/toast'
-import {
-  Server,
-  Wifi,
-  WifiOff,
-  Play,
-  Square,
-  RotateCcw,
-  Save,
-  Loader2,
-  Download,
-  Terminal,
-  Monitor,
-  Rocket,
-  AlertTriangle,
-  Check,
-  Puzzle,
-} from 'lucide-vue-next'
 import type { DeploymentConfig, DeploymentStatus } from '@/types'
 import { useWebSocket } from '@/composables/useWebSocket'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import StatusDot from '@/components/ds/core/StatusDot.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const server = useServerStore()
 const auth = useAuthStore()
@@ -145,10 +137,10 @@ function getStageState(stageKey: string): 'pending' | 'active' | 'complete' | 'f
 }
 
 const oxideStages = [
-  { key: 'fetching_release', label: 'Check Latest Release' },
+  { key: 'fetching_release', label: 'Check latest release' },
   { key: 'downloading', label: 'Download Oxide' },
-  { key: 'installing', label: 'Extract Files' },
-  { key: 'restarting', label: 'Restart Server' },
+  { key: 'installing', label: 'Extract files' },
+  { key: 'restarting', label: 'Restart server' },
   { key: 'complete', label: 'Complete' },
 ] as const
 
@@ -158,8 +150,6 @@ function getOxideStageState(stageKey: string): 'pending' | 'active' | 'complete'
   if (status.stage === 'failed') {
     const currentStages = oxideStages
     const idx = currentStages.findIndex(s => s.key === stageKey)
-    // Find which stage was active when failure occurred — approximate from message
-    // For failed state, mark all stages before current as complete
     return idx === 0 ? 'failed' : 'pending'
   }
   const currentIdx = oxideStages.findIndex(s => s.key === status.stage)
@@ -237,6 +227,36 @@ async function toggleAutomation(field: 'crash_recovery_enabled' | 'auto_update_o
   }
 }
 
+// Deploy form string bindings (DS Input uses string v-model)
+const deployServerName = computed({
+  get: () => deployForm.value.server_name,
+  set: (v: string) => { deployForm.value.server_name = v },
+})
+const deployRconPassword = computed({
+  get: () => deployForm.value.rcon_password,
+  set: (v: string) => { deployForm.value.rcon_password = v },
+})
+
+// Config form string bindings
+const formServerName = computed({
+  get: () => form.value.server_name,
+  set: (v: string) => { form.value.server_name = v },
+})
+
+// Setup tab items
+const setupTabItems = [
+  { value: 'linux', label: 'Linux' },
+  { value: 'windows', label: 'Windows' },
+]
+
+// Connection status derived values
+const connStatusTone = computed<'online' | 'offline' | 'warn'>(() => {
+  const cs = server.connection?.connection_status
+  if (cs === 'connected') return 'online'
+  if (cs === 'degraded') return 'warn'
+  return 'offline'
+})
+
 onMounted(async () => {
   await server.fetchServer()
   loadFormFromConfig()
@@ -257,563 +277,575 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <Server class="w-5 h-5 text-oxide-500" />
-      <h1 class="text-2xl font-bold text-neutral-100">Server Management</h1>
-    </div>
-
-    <!-- Connection Status Card -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Connection</h2>
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Status</p>
-          <div class="flex items-center gap-2">
-            <component
-              :is="server.connection?.connection_status === 'connected' ? Wifi : WifiOff"
-              class="w-4 h-4"
-              :class="server.connection?.connection_status === 'connected' ? 'text-green-400' : 'text-red-400'"
-            />
-            <span class="text-sm font-medium text-neutral-100 capitalize">
-              {{ server.connection?.connection_status || 'Unknown' }}
-            </span>
-          </div>
+  <div class="sv">
+    <!-- Page head -->
+    <div class="sv__head">
+      <div class="sv__head-id">
+        <div class="sv__head-chip">
+          <Icon name="server" :size="20" :stroke-width="2" />
         </div>
         <div>
-          <p class="text-xs text-neutral-500 mb-1">Connection Type</p>
-          <p class="text-sm font-medium text-neutral-100 uppercase">
-            {{ server.connection?.connection_type || '\u2014' }}
-          </p>
-        </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Server IP</p>
-          <p class="text-sm font-mono text-neutral-300">
-            {{ server.connection?.server_ip || '\u2014' }}:{{ server.connection?.server_port || '' }}
-          </p>
-        </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Game Port</p>
-          <p class="text-sm font-mono text-neutral-300">
-            {{ server.connection?.game_port || '\u2014' }}
-          </p>
+          <div class="t-eyebrow">Server management</div>
+          <h1 class="sv__title">Server</h1>
         </div>
       </div>
     </div>
 
-    <!-- Server Controls -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Controls</h2>
-      <div class="flex flex-wrap gap-3">
-        <button
-          @click="serverAction('start')"
+    <!-- Connection -->
+    <Panel title="Connection">
+      <template #actions>
+        <Badge :tone="connStatusTone" :dot="true" :pulse="connStatusTone === 'online'">
+          {{ server.connection?.connection_status ?? 'Unknown' }}
+        </Badge>
+      </template>
+      <div class="sv__grid4">
+        <div class="sv__field">
+          <div class="sv__field-label">Status</div>
+          <div class="sv__field-val sv__field-val--inline">
+            <StatusDot :tone="connStatusTone" :pulse="connStatusTone === 'online'" />
+            <span>{{ server.connection?.connection_status ?? 'Unknown' }}</span>
+          </div>
+        </div>
+        <div class="sv__field">
+          <div class="sv__field-label">Connection type</div>
+          <div class="sv__field-val sv__field-val--mono">{{ server.connection?.connection_type ?? '—' }}</div>
+        </div>
+        <div class="sv__field">
+          <div class="sv__field-label">Server IP</div>
+          <div class="sv__field-val sv__field-val--mono">
+            {{ server.connection?.server_ip ?? '—' }}{{ server.connection?.server_port ? `:${server.connection.server_port}` : '' }}
+          </div>
+        </div>
+        <div class="sv__field">
+          <div class="sv__field-label">Game port</div>
+          <div class="sv__field-val sv__field-val--mono">{{ server.connection?.game_port ?? '—' }}</div>
+        </div>
+      </div>
+    </Panel>
+
+    <!-- Controls -->
+    <Panel title="Controls">
+      <div class="sv__controls">
+        <Button
+          variant="outline"
+          icon="play"
+          :loading="actionLoading === 'start'"
           :disabled="server.connection?.connection_status === 'connected' || actionLoading !== null"
-          class="flex items-center gap-2 px-4 py-2.5 bg-green-600/20 hover:bg-green-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-green-400 border border-green-600/30 rounded-lg text-sm font-medium transition-colors"
-        >
-          <Loader2 v-if="actionLoading === 'start'" class="w-4 h-4 animate-spin" />
-          <Play v-else class="w-4 h-4" />
-          Start Server
-        </button>
-        <button
+          @click="serverAction('start')"
+        >Start server</Button>
+        <Button
+          variant="danger-soft"
+          icon="power"
+          :loading="actionLoading === 'stop'"
+          :disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
           @click="serverAction('stop')"
+        >Stop server</Button>
+        <Button
+          variant="secondary"
+          icon="refresh-cw"
+          :loading="actionLoading === 'restart'"
           :disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
-          class="flex items-center gap-2 px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-red-400 border border-red-600/30 rounded-lg text-sm font-medium transition-colors"
-        >
-          <Loader2 v-if="actionLoading === 'stop'" class="w-4 h-4 animate-spin" />
-          <Square v-else class="w-4 h-4" />
-          Stop Server
-        </button>
-        <button
           @click="serverAction('restart')"
-          :disabled="server.connection?.connection_status !== 'connected' || actionLoading !== null"
-          class="flex items-center gap-2 px-4 py-2.5 bg-oxide-600/20 hover:bg-oxide-600/30 disabled:opacity-30 disabled:cursor-not-allowed text-oxide-400 border border-oxide-600/30 rounded-lg text-sm font-medium transition-colors"
+        >Restart server</Button>
+      </div>
+    </Panel>
+
+    <!-- Companion agent -->
+    <Panel title="Companion agent" subtitle="Bare-metal server management binary">
+      <template #actions>
+        <Badge :tone="isAgentConnected ? 'online' : 'offline'" :dot="true" :pulse="isAgentConnected">
+          {{ isAgentConnected ? 'Active' : 'Inactive' }}
+        </Badge>
+      </template>
+
+      <!-- Agent status row -->
+      <div class="sv__grid3 sv__mb">
+        <div class="sv__field">
+          <div class="sv__field-label">Agent status</div>
+          <div class="sv__field-val sv__field-val--inline">
+            <StatusDot :tone="isAgentConnected ? 'online' : 'offline'" :pulse="isAgentConnected" />
+            <span>{{ isAgentConnected ? 'Active' : 'Inactive' }}</span>
+          </div>
+        </div>
+        <div class="sv__field">
+          <div class="sv__field-label">Connection type</div>
+          <div class="sv__field-val sv__field-val--mono">{{ server.connection?.connection_type ?? '—' }}</div>
+        </div>
+        <div class="sv__field">
+          <div class="sv__field-label">Last heartbeat</div>
+          <div class="sv__field-val">{{ agentLastSeenLabel }}</div>
+        </div>
+      </div>
+
+      <!-- Download -->
+      <div class="sv__section-head">
+        <Icon name="download" :size="14" />
+        <span>Download companion agent</span>
+      </div>
+      <div class="sv__downloads sv__mb">
+        <a
+          href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64"
+          download="corrosion-companion-linux-amd64"
+          class="sv__dl-link"
         >
-          <Loader2 v-if="actionLoading === 'restart'" class="w-4 h-4 animate-spin" />
-          <RotateCcw v-else class="w-4 h-4" />
-          Restart Server
-        </button>
-      </div>
-    </div>
-
-    <!-- Companion Agent -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center gap-2 mb-5">
-        <Monitor class="w-4 h-4 text-oxide-400" />
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Companion Agent</h2>
+          <Icon name="download" :size="15" />
+          Linux (amd64)
+        </a>
+        <a
+          href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"
+          download="corrosion-companion-windows-amd64.exe"
+          class="sv__dl-link"
+        >
+          <Icon name="download" :size="15" />
+          Windows (amd64)
+        </a>
       </div>
 
-      <!-- Agent Status -->
-      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Agent Status</p>
-          <div class="flex items-center gap-2">
-            <span
-              class="w-2 h-2 rounded-full"
-              :class="isAgentConnected ? 'bg-green-400' : 'bg-neutral-600'"
-            />
-            <span
-              class="text-sm font-medium"
-              :class="isAgentConnected ? 'text-green-400' : 'text-neutral-400'"
-            >
-              {{ isAgentConnected ? 'Active' : 'Inactive' }}
-            </span>
-          </div>
-        </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Connection Type</p>
-          <p class="text-sm font-medium text-neutral-100 uppercase">
-            {{ server.connection?.connection_type || '\u2014' }}
-          </p>
-        </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Last Heartbeat</p>
-          <p class="text-sm font-medium" :class="agentLastSeen ? 'text-neutral-200' : 'text-neutral-500'">
-            {{ agentLastSeenLabel }}
-          </p>
+      <!-- Quick setup -->
+      <div class="sv__setup-head">
+        <div class="sv__section-head">
+          <Icon name="terminal" :size="14" />
+          <span>Quick setup</span>
         </div>
+        <Button
+          variant="secondary"
+          size="sm"
+          :icon="(setupTab === 'linux' ? copied : windowsCopied) ? 'check' : 'copy'"
+          @click="copySetupCommands"
+        >{{ (setupTab === 'linux' ? copied : windowsCopied) ? 'Copied' : 'Copy' }}</Button>
       </div>
 
-      <!-- Download Section -->
-      <div class="mb-6">
-        <div class="flex items-center gap-2 mb-3">
-          <Download class="w-3.5 h-3.5 text-neutral-500" />
-          <p class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Download Companion Agent</p>
-        </div>
-        <div class="flex flex-wrap gap-3">
-          <a
-            href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64"
-            download="corrosion-companion-linux-amd64"
-            class="flex items-center gap-2 px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 border border-neutral-700 hover:border-neutral-600 rounded-lg text-sm font-medium transition-colors"
-          >
-            <Download class="w-4 h-4 text-oxide-400" />
-            Linux (amd64)
-          </a>
-          <a
-            href="https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"
-            download="corrosion-companion-windows-amd64.exe"
-            class="flex items-center gap-2 px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 border border-neutral-700 hover:border-neutral-600 rounded-lg text-sm font-medium transition-colors"
-          >
-            <Download class="w-4 h-4 text-oxide-400" />
-            Windows (amd64)
-          </a>
-        </div>
+      <Tabs v-model="setupTab" :items="setupTabItems" class="sv__mb-sm" />
+
+      <Alert v-if="setupTab === 'windows'" tone="warn" class="sv__mb-sm">
+        PowerShell required — Command Prompt is not supported.
+      </Alert>
+
+      <!-- Linux commands -->
+      <div v-if="setupTab === 'linux'" class="sv__codeblock">
+        <p class="sv__cmt"># Download the agent</p>
+        <p>curl -LO https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64</p>
+        <p>chmod +x corrosion-companion-linux-amd64</p>
+        <p class="sv__cmt sv__mt">&#x23; Start with your license key</p>
+        <p>export LICENSE_ID=<span class="sv__accent">"{{ licenseKey }}"</span></p>
+        <p>export NATS_URL=<span class="sv__accent">"nats://nats.corrosionmgmt.com:4222"</span></p>
+        <p>./corrosion-companion-linux-amd64</p>
       </div>
 
-      <!-- Quick Setup Section — Tabbed -->
-      <div>
-        <div class="flex items-center justify-between mb-3">
-          <div class="flex items-center gap-2">
-            <Terminal class="w-3.5 h-3.5 text-neutral-500" />
-            <p class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Quick Setup</p>
-          </div>
-          <button
-            @click="copySetupCommands"
-            class="flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-md transition-colors"
-            :class="(setupTab === 'linux' ? copied : windowsCopied)
-              ? 'bg-green-600/20 text-green-400 border border-green-600/30'
-              : 'bg-neutral-800 hover:bg-neutral-700 text-neutral-400 hover:text-neutral-200 border border-neutral-700'"
-          >
-            {{ (setupTab === 'linux' ? copied : windowsCopied) ? 'Copied!' : 'Copy' }}
-          </button>
-        </div>
-
-        <!-- OS Tabs -->
-        <div class="flex bg-neutral-800 rounded-md p-0.5 mb-3 w-fit">
-          <button
-            @click="setupTab = 'linux'"
-            class="px-3 py-1 text-xs font-medium rounded transition-colors"
-            :class="setupTab === 'linux' ? 'bg-neutral-700 text-neutral-100' : 'text-neutral-500 hover:text-neutral-300'"
-          >Linux</button>
-          <button
-            @click="setupTab = 'windows'"
-            class="px-3 py-1 text-xs font-medium rounded transition-colors"
-            :class="setupTab === 'windows' ? 'bg-neutral-700 text-neutral-100' : 'text-neutral-500 hover:text-neutral-300'"
-          >Windows</button>
-        </div>
-
-        <!-- Windows Warning Badge -->
-        <div v-if="setupTab === 'windows'" class="flex items-center gap-2 mb-3 px-3 py-2 bg-amber-500/10 border border-amber-500/20 rounded-lg">
-          <AlertTriangle class="w-4 h-4 text-amber-400 shrink-0" />
-          <p class="text-xs text-amber-300">PowerShell Required — Command Prompt is not supported</p>
-        </div>
-
-        <!-- Linux Commands -->
-        <div v-if="setupTab === 'linux'" class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 overflow-x-auto">
-          <p class="text-neutral-500"># Download the agent</p>
-          <p>curl -LO https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-linux-amd64</p>
-          <p>chmod +x corrosion-companion-linux-amd64</p>
-          <p class="mt-3 text-neutral-500"># Start with your license key</p>
-          <p>export LICENSE_ID=<span class="text-oxide-400">"{{ licenseKey }}"</span></p>
-          <p>export NATS_URL=<span class="text-oxide-400">"nats://nats.corrosionmgmt.com:4222"</span></p>
-          <p>./corrosion-companion-linux-amd64</p>
-        </div>
-
-        <!-- Windows Commands -->
-        <div v-if="setupTab === 'windows'" class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 overflow-x-auto">
-          <p class="text-neutral-500"># Requires PowerShell (not Command Prompt)</p>
-          <p class="text-neutral-500"># Download the agent</p>
-          <p>Invoke-WebRequest -Uri <span class="text-oxide-400">"https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"</span> -OutFile <span class="text-oxide-400">"corrosion-companion-windows-amd64.exe"</span></p>
-          <p class="mt-3 text-neutral-500"># Start with your license key</p>
-          <p>$env:LICENSE_ID=<span class="text-oxide-400">"{{ licenseKey }}"</span></p>
-          <p>$env:NATS_URL=<span class="text-oxide-400">"nats://nats.corrosionmgmt.com:4222"</span></p>
-          <p>.\corrosion-companion-windows-amd64.exe</p>
-        </div>
+      <!-- Windows commands -->
+      <div v-if="setupTab === 'windows'" class="sv__codeblock">
+        <p class="sv__cmt"># Requires PowerShell (not Command Prompt)</p>
+        <p class="sv__cmt"># Download the agent</p>
+        <p>Invoke-WebRequest -Uri <span class="sv__accent">"https://cdn.corrosionmgmt.com/companion/latest/corrosion-companion-windows-amd64.exe"</span> -OutFile <span class="sv__accent">"corrosion-companion-windows-amd64.exe"</span></p>
+        <p class="sv__cmt sv__mt">&#x23; Start with your license key</p>
+        <p>$env:LICENSE_ID=<span class="sv__accent">"{{ licenseKey }}"</span></p>
+        <p>$env:NATS_URL=<span class="sv__accent">"nats://nats.corrosionmgmt.com:4222"</span></p>
+        <p>.\corrosion-companion-windows-amd64.exe</p>
       </div>
-    </div>
+    </Panel>
 
     <!-- Deploy Rust Server -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center gap-2 mb-5">
-        <Rocket class="w-4 h-4 text-oxide-400" />
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Deploy Rust Server</h2>
-      </div>
+    <Panel title="Deploy Rust server" subtitle="One-click: SteamCMD, download, configure, start">
+      <template #title-append>
+        <Icon name="rocket" :size="15" />
+      </template>
 
-      <!-- Deployment Progress Tracker -->
-      <div v-if="server.deploymentStatus || server.isDeploying" class="mb-6">
-        <div class="space-y-3">
-          <div
-            v-for="stage in deployStages"
-            :key="stage.key"
-            class="flex items-center gap-3"
-          >
-            <!-- Stage indicator -->
-            <div class="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
-              :class="{
-                'bg-neutral-800 text-neutral-600': getStageState(stage.key) === 'pending',
-                'bg-amber-500/20 text-amber-400': getStageState(stage.key) === 'active',
-                'bg-green-500/20 text-green-400': getStageState(stage.key) === 'complete',
-                'bg-red-500/20 text-red-400': getStageState(stage.key) === 'failed',
-              }"
-            >
-              <Loader2 v-if="getStageState(stage.key) === 'active'" class="w-3.5 h-3.5 animate-spin" />
-              <Check v-else-if="getStageState(stage.key) === 'complete'" class="w-3.5 h-3.5" />
-              <AlertTriangle v-else-if="getStageState(stage.key) === 'failed'" class="w-3.5 h-3.5" />
-              <span v-else class="w-1.5 h-1.5 rounded-full bg-neutral-600" />
-            </div>
-            <!-- Stage label -->
-            <span
-              class="text-sm"
-              :class="{
-                'text-neutral-600': getStageState(stage.key) === 'pending',
-                'text-amber-300 font-medium': getStageState(stage.key) === 'active',
-                'text-green-400': getStageState(stage.key) === 'complete',
-                'text-red-400': getStageState(stage.key) === 'failed',
-              }"
-            >{{ stage.label }}</span>
-          </div>
-        </div>
-
-        <!-- Status message -->
-        <div v-if="server.deploymentStatus?.message" class="mt-4 px-3 py-2 bg-neutral-800/50 rounded-lg">
-          <p class="text-xs text-neutral-400">{{ server.deploymentStatus.message }}</p>
-        </div>
-
-        <!-- Error display -->
-        <div v-if="server.deploymentStatus?.error" class="mt-3 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg">
-          <p class="text-xs text-red-400">{{ server.deploymentStatus.error }}</p>
-        </div>
-
-        <!-- Retry button on failure -->
-        <button
-          v-if="server.deploymentStatus?.stage === 'failed'"
-          @click="server.clearDeploymentStatus(); showDeployForm = true"
-          class="mt-3 flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
+      <!-- Deployment progress -->
+      <div v-if="server.deploymentStatus || server.isDeploying" class="sv__stages">
+        <div
+          v-for="stage in deployStages"
+          :key="stage.key"
+          class="sv__stage"
         >
-          <RotateCcw class="w-4 h-4" />
-          Retry Deployment
-        </button>
-      </div>
-
-      <!-- Deploy Form (shown when not deploying) -->
-      <div v-else>
-        <div v-if="!showDeployForm" class="text-center py-4">
-          <p class="text-sm text-neutral-400 mb-4">Automatically install SteamCMD, download Rust Dedicated Server, configure, and start — all with one click.</p>
-          <button
-            @click="showDeployForm = true"
-            class="inline-flex items-center gap-2 px-5 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
+          <div
+            class="sv__stage-dot"
+            :data-state="getStageState(stage.key)"
           >
-            <Rocket class="w-4 h-4" />
-            Deploy Server
-          </button>
+            <Icon v-if="getStageState(stage.key) === 'active'" name="loader" :size="13" class="sv__spin" />
+            <Icon v-else-if="getStageState(stage.key) === 'complete'" name="check" :size="13" />
+            <Icon v-else-if="getStageState(stage.key) === 'failed'" name="triangle-alert" :size="13" />
+            <span v-else class="sv__stage-nub" />
+          </div>
+          <span
+            class="sv__stage-label"
+            :data-state="getStageState(stage.key)"
+          >{{ stage.label }}</span>
         </div>
 
-        <form v-else @submit.prevent="startDeploy" class="space-y-4">
-          <div class="grid grid-cols-2 gap-4">
-            <div class="col-span-2">
-              <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
-              <input v-model="deployForm.server_name" type="text" required class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
-            </div>
-            <div>
-              <label class="block text-xs text-neutral-500 mb-1">Max Players</label>
-              <input v-model.number="deployForm.max_players" type="number" min="1" max="500" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
-            </div>
-            <div>
-              <label class="block text-xs text-neutral-500 mb-1">World Size</label>
-              <input v-model.number="deployForm.world_size" type="number" min="1000" max="8000" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
-            </div>
-            <div>
-              <label class="block text-xs text-neutral-500 mb-1">Map Seed</label>
-              <input v-model.number="deployForm.seed" type="number" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
-            </div>
-            <div>
-              <label class="block text-xs text-neutral-500 mb-1">Server Port</label>
-              <input v-model.number="deployForm.server_port" type="number" min="1024" max="65535" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
-            </div>
-            <div>
-              <label class="block text-xs text-neutral-500 mb-1">RCON Port</label>
-              <input v-model.number="deployForm.rcon_port" type="number" min="1024" max="65535" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors" />
-            </div>
-            <div class="col-span-2">
-              <label class="block text-xs text-neutral-500 mb-1">RCON Password <span class="text-red-400">*</span></label>
-              <input v-model="deployForm.rcon_password" type="password" required minlength="6" placeholder="Minimum 6 characters" class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors placeholder:text-neutral-600" />
-            </div>
+        <Alert v-if="server.deploymentStatus?.message" tone="neutral" class="sv__mt">
+          {{ server.deploymentStatus.message }}
+        </Alert>
+        <Alert v-if="server.deploymentStatus?.error" tone="danger" class="sv__mt">
+          {{ server.deploymentStatus.error }}
+        </Alert>
+
+        <div v-if="server.deploymentStatus?.stage === 'failed'" class="sv__mt">
+          <Button
+            variant="secondary"
+            icon="refresh-cw"
+            @click="server.clearDeploymentStatus(); showDeployForm = true"
+          >Retry deployment</Button>
+        </div>
+      </div>
+
+      <!-- Deploy form / prompt -->
+      <div v-else>
+        <div v-if="!showDeployForm" class="sv__deploy-prompt">
+          <p class="sv__deploy-desc">Automatically install SteamCMD, download Rust Dedicated Server, configure, and start — all with one click.</p>
+          <Button icon="rocket" @click="showDeployForm = true">Deploy server</Button>
+        </div>
+
+        <form v-else @submit.prevent="startDeploy" class="sv__form">
+          <div class="sv__form-grid">
+            <Input
+              v-model="deployServerName"
+              label="Server name"
+              :required="true"
+              class="sv__col-span2"
+            />
+            <Input
+              :model-value="String(deployForm.max_players)"
+              @update:model-value="v => { deployForm.max_players = Number(v) }"
+              label="Max players"
+              type="number"
+              :mono="true"
+            />
+            <Input
+              :model-value="String(deployForm.world_size)"
+              @update:model-value="v => { deployForm.world_size = Number(v) }"
+              label="World size"
+              type="number"
+              :mono="true"
+            />
+            <Input
+              :model-value="String(deployForm.seed)"
+              @update:model-value="v => { deployForm.seed = Number(v) }"
+              label="Map seed"
+              type="number"
+              :mono="true"
+            />
+            <Input
+              :model-value="String(deployForm.server_port)"
+              @update:model-value="v => { deployForm.server_port = Number(v) }"
+              label="Server port"
+              type="number"
+              :mono="true"
+            />
+            <Input
+              :model-value="String(deployForm.rcon_port)"
+              @update:model-value="v => { deployForm.rcon_port = Number(v) }"
+              label="RCON port"
+              type="number"
+              :mono="true"
+            />
+            <Input
+              v-model="deployRconPassword"
+              label="RCON password"
+              type="password"
+              placeholder="Minimum 6 characters"
+              :required="true"
+              class="sv__col-span2"
+            />
           </div>
-          <div class="flex items-center gap-3 pt-2">
-            <button
+          <div class="sv__form-actions">
+            <Button
               type="submit"
+              icon="rocket"
+              :loading="deployLoading"
               :disabled="deployLoading || !deployForm.rcon_password || deployForm.rcon_password.length < 6"
-              class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
-            >
-              <Loader2 v-if="deployLoading" class="w-4 h-4 animate-spin" />
-              <Rocket v-else class="w-4 h-4" />
-              {{ deployLoading ? 'Deploying...' : 'Deploy Server' }}
-            </button>
-            <button
-              type="button"
-              @click="showDeployForm = false"
-              class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
-            >Cancel</button>
+            >{{ deployLoading ? 'Deploying…' : 'Deploy server' }}</Button>
+            <Button variant="ghost" type="button" @click="showDeployForm = false">Cancel</Button>
           </div>
         </form>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Install Oxide/uMod -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center gap-2 mb-5">
-        <Puzzle class="w-4 h-4 text-oxide-400" />
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Install Oxide / uMod</h2>
-      </div>
+    <!-- Install Oxide / uMod -->
+    <Panel title="Install Oxide / uMod" subtitle="Required for all plugins including CorrosionCompanion">
+      <template #title-append>
+        <Icon name="puzzle" :size="15" />
+      </template>
 
-      <!-- Installation Progress Tracker -->
-      <div v-if="oxideStatus || isInstallingOxide" class="mb-6">
-        <div class="space-y-3">
+      <!-- Installation progress -->
+      <div v-if="oxideStatus || isInstallingOxide" class="sv__stages">
+        <div
+          v-for="stage in oxideStages"
+          :key="stage.key"
+          class="sv__stage"
+        >
           <div
-            v-for="stage in oxideStages"
-            :key="stage.key"
-            class="flex items-center gap-3"
+            class="sv__stage-dot"
+            :data-state="getOxideStageState(stage.key)"
           >
-            <!-- Stage indicator -->
-            <div class="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
-              :class="{
-                'bg-neutral-800 text-neutral-600': getOxideStageState(stage.key) === 'pending',
-                'bg-amber-500/20 text-amber-400': getOxideStageState(stage.key) === 'active',
-                'bg-green-500/20 text-green-400': getOxideStageState(stage.key) === 'complete',
-                'bg-red-500/20 text-red-400': getOxideStageState(stage.key) === 'failed',
-              }"
-            >
-              <Loader2 v-if="getOxideStageState(stage.key) === 'active'" class="w-3.5 h-3.5 animate-spin" />
-              <Check v-else-if="getOxideStageState(stage.key) === 'complete'" class="w-3.5 h-3.5" />
-              <AlertTriangle v-else-if="getOxideStageState(stage.key) === 'failed'" class="w-3.5 h-3.5" />
-              <span v-else class="w-1.5 h-1.5 rounded-full bg-neutral-600" />
-            </div>
-            <!-- Stage label -->
-            <span
-              class="text-sm"
-              :class="{
-                'text-neutral-600': getOxideStageState(stage.key) === 'pending',
-                'text-amber-300 font-medium': getOxideStageState(stage.key) === 'active',
-                'text-green-400': getOxideStageState(stage.key) === 'complete',
-                'text-red-400': getOxideStageState(stage.key) === 'failed',
-              }"
-            >{{ stage.label }}</span>
+            <Icon v-if="getOxideStageState(stage.key) === 'active'" name="loader" :size="13" class="sv__spin" />
+            <Icon v-else-if="getOxideStageState(stage.key) === 'complete'" name="check" :size="13" />
+            <Icon v-else-if="getOxideStageState(stage.key) === 'failed'" name="triangle-alert" :size="13" />
+            <span v-else class="sv__stage-nub" />
           </div>
+          <span
+            class="sv__stage-label"
+            :data-state="getOxideStageState(stage.key)"
+          >{{ stage.label }}</span>
         </div>
 
-        <!-- Status message -->
-        <div v-if="oxideStatus?.message" class="mt-4 px-3 py-2 bg-neutral-800/50 rounded-lg">
-          <p class="text-xs text-neutral-400">{{ oxideStatus.message }}</p>
-        </div>
+        <Alert v-if="oxideStatus?.message" tone="neutral" class="sv__mt">
+          {{ oxideStatus.message }}
+        </Alert>
+        <Alert v-if="oxideStatus?.error" tone="danger" class="sv__mt">
+          {{ oxideStatus.error }}
+        </Alert>
 
-        <!-- Error display -->
-        <div v-if="oxideStatus?.error" class="mt-3 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg">
-          <p class="text-xs text-red-400">{{ oxideStatus.error }}</p>
+        <div v-if="oxideStatus?.stage === 'failed'" class="sv__mt">
+          <Button
+            variant="secondary"
+            icon="refresh-cw"
+            @click="oxideStatus = null; installOxide()"
+          >Retry installation</Button>
         </div>
-
-        <!-- Retry button on failure -->
-        <button
-          v-if="oxideStatus?.stage === 'failed'"
-          @click="oxideStatus = null; installOxide()"
-          class="mt-3 flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
-        >
-          <RotateCcw class="w-4 h-4" />
-          Retry Installation
-        </button>
       </div>
 
-      <!-- Install Button (shown when not installing) -->
-      <div v-else class="text-center py-4">
-        <p class="text-sm text-neutral-400 mb-4">Install or update Oxide/uMod. Required for all plugins including CorrosionCompanion.</p>
-        <button
-          @click="installOxide()"
-          class="inline-flex items-center gap-2 px-5 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
-        >
-          <Puzzle class="w-4 h-4" />
-          Install Oxide
-        </button>
+      <!-- Install prompt -->
+      <div v-else class="sv__deploy-prompt">
+        <p class="sv__deploy-desc">Install or update Oxide / uMod. Required for all plugins including CorrosionCompanion.</p>
+        <Button icon="puzzle" @click="installOxide()">Install Oxide</Button>
       </div>
-    </div>
+    </Panel>
 
     <!-- Configuration -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Configuration</h2>
-        <button
+    <Panel title="Configuration">
+      <template #actions>
+        <Button
           v-if="!editMode"
+          variant="ghost"
+          size="sm"
+          icon="settings"
           @click="editMode = true; loadFormFromConfig()"
-          class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors"
-        >
-          Edit
-        </button>
-      </div>
+        >Edit</Button>
+        <template v-else>
+          <Button
+            variant="secondary"
+            size="sm"
+            type="button"
+            @click="editMode = false"
+          >Cancel</Button>
+          <Button
+            size="sm"
+            icon="check"
+            :loading="saving"
+            :disabled="saving"
+            @click="saveConfig"
+          >Save changes</Button>
+        </template>
+      </template>
 
       <!-- Read mode -->
-      <div v-if="!editMode" class="grid grid-cols-2 lg:grid-cols-4 gap-6">
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Server Name</p>
-          <p class="text-sm text-neutral-200">{{ server.config?.server_name || 'Not configured' }}</p>
+      <div v-if="!editMode" class="sv__grid4">
+        <div class="sv__field">
+          <div class="sv__field-label">Server name</div>
+          <div class="sv__field-val">{{ server.config?.server_name ?? 'Not configured' }}</div>
         </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Max Players</p>
-          <p class="text-sm text-neutral-200">{{ server.config?.max_players ?? '\u2014' }}</p>
+        <div class="sv__field">
+          <div class="sv__field-label">Max players</div>
+          <div class="sv__field-val sv__field-val--mono">{{ server.config?.max_players ?? '—' }}</div>
         </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">World Size</p>
-          <p class="text-sm text-neutral-200">{{ server.config?.world_size ?? '\u2014' }}</p>
+        <div class="sv__field">
+          <div class="sv__field-label">World size</div>
+          <div class="sv__field-val sv__field-val--mono">{{ server.config?.world_size ?? '—' }}</div>
         </div>
-        <div>
-          <p class="text-xs text-neutral-500 mb-1">Current Seed</p>
-          <p class="text-sm text-neutral-200">{{ server.config?.current_seed ?? '\u2014' }}</p>
+        <div class="sv__field">
+          <div class="sv__field-label">Current seed</div>
+          <div class="sv__field-val sv__field-val--mono">{{ server.config?.current_seed ?? '—' }}</div>
         </div>
       </div>
 
       <!-- Edit mode -->
-      <form v-else @submit.prevent="saveConfig" class="space-y-4">
-        <div class="grid grid-cols-2 gap-4">
-          <div class="col-span-2">
-            <label class="block text-xs text-neutral-500 mb-1">Server Name</label>
-            <input
-              v-model="form.server_name"
-              type="text"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-          <div>
-            <label class="block text-xs text-neutral-500 mb-1">Max Players</label>
-            <input
-              v-model.number="form.max_players"
-              type="number"
-              min="1"
-              max="500"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-          <div>
-            <label class="block text-xs text-neutral-500 mb-1">World Size</label>
-            <input
-              v-model.number="form.world_size"
-              type="number"
-              min="1000"
-              max="8000"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-          <div>
-            <label class="block text-xs text-neutral-500 mb-1">Current Seed</label>
-            <input
-              v-model.number="form.current_seed"
-              type="number"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-        </div>
-        <div class="flex items-center gap-3 pt-2">
-          <button
-            type="submit"
-            :disabled="saving"
-            class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
-          >
-            <Save class="w-4 h-4" />
-            {{ saving ? 'Saving...' : 'Save Changes' }}
-          </button>
-          <button
-            type="button"
-            @click="editMode = false"
-            class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
-          >
-            Cancel
-          </button>
+      <form v-else @submit.prevent="saveConfig" class="sv__form">
+        <div class="sv__form-grid">
+          <Input
+            v-model="formServerName"
+            label="Server name"
+            class="sv__col-span2"
+          />
+          <Input
+            :model-value="String(form.max_players)"
+            @update:model-value="v => { form.max_players = Number(v) }"
+            label="Max players"
+            type="number"
+            :mono="true"
+          />
+          <Input
+            :model-value="String(form.world_size)"
+            @update:model-value="v => { form.world_size = Number(v) }"
+            label="World size"
+            type="number"
+            :mono="true"
+          />
+          <Input
+            :model-value="String(form.current_seed)"
+            @update:model-value="v => { form.current_seed = Number(v) }"
+            label="Current seed"
+            type="number"
+            :mono="true"
+            class="sv__col-span2"
+          />
         </div>
       </form>
-    </div>
+    </Panel>
 
-    <!-- Advanced Settings -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Automation</h2>
-      <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm text-neutral-200">Auto-Restart</p>
-            <p class="text-xs text-neutral-500">Restart on crash detection</p>
+    <!-- Automation -->
+    <Panel title="Automation">
+      <div class="sv__toggles">
+        <div class="sv__toggle-row">
+          <div class="sv__toggle-body">
+            <div class="sv__toggle-label">Auto-restart</div>
+            <div class="sv__toggle-sub">Restart on crash detection</div>
           </div>
-          <button
-            @click="toggleAutomation('crash_recovery_enabled')"
+          <Switch
+            :model-value="server.config?.crash_recovery_enabled ?? false"
             :disabled="!server.config"
-            class="w-9 h-5 rounded-full transition-colors cursor-pointer disabled:opacity-40"
-            :class="server.config?.crash_recovery_enabled ? 'bg-oxide-500' : 'bg-neutral-700'"
-          >
-            <div
-              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-              :class="server.config?.crash_recovery_enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
-            />
-          </button>
+            @update:model-value="toggleAutomation('crash_recovery_enabled')"
+          />
         </div>
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm text-neutral-200">Auto-Update on Force Wipe</p>
-            <p class="text-xs text-neutral-500">Update when Facepunch pushes</p>
+        <div class="sv__toggle-row">
+          <div class="sv__toggle-body">
+            <div class="sv__toggle-label">Auto-update on force wipe</div>
+            <div class="sv__toggle-sub">Update when Facepunch pushes</div>
           </div>
-          <button
-            @click="toggleAutomation('auto_update_on_force_wipe')"
+          <Switch
+            :model-value="server.config?.auto_update_on_force_wipe ?? false"
             :disabled="!server.config"
-            class="w-9 h-5 rounded-full transition-colors cursor-pointer disabled:opacity-40"
-            :class="server.config?.auto_update_on_force_wipe ? 'bg-oxide-500' : 'bg-neutral-700'"
-          >
-            <div
-              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-              :class="server.config?.auto_update_on_force_wipe ? 'translate-x-4.5' : 'translate-x-0.5'"
-            />
-          </button>
+            @update:model-value="toggleAutomation('auto_update_on_force_wipe')"
+          />
         </div>
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm text-neutral-200">Force Wipe Eligible</p>
-            <p class="text-xs text-neutral-500">Server participates in force wipes</p>
+        <div class="sv__toggle-row">
+          <div class="sv__toggle-body">
+            <div class="sv__toggle-label">Force wipe eligible</div>
+            <div class="sv__toggle-sub">Server participates in force wipes</div>
           </div>
-          <button
-            @click="toggleAutomation('force_wipe_eligible')"
+          <Switch
+            :model-value="server.config?.force_wipe_eligible ?? false"
             :disabled="!server.config"
-            class="w-9 h-5 rounded-full transition-colors cursor-pointer disabled:opacity-40"
-            :class="server.config?.force_wipe_eligible ? 'bg-oxide-500' : 'bg-neutral-700'"
-          >
-            <div
-              class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-              :class="server.config?.force_wipe_eligible ? 'translate-x-4.5' : 'translate-x-0.5'"
-            />
-          </button>
+            @update:model-value="toggleAutomation('force_wipe_eligible')"
+          />
         </div>
       </div>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.sv { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.sv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.sv__head-id { display: flex; align-items: center; gap: 12px; }
+.sv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.sv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Layout grids */
+.sv__grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
+.sv__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+@media (max-width: 768px) {
+  .sv__grid4 { grid-template-columns: repeat(2, 1fr); }
+  .sv__grid3 { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Field */
+.sv__field-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 4px; }
+.sv__field-val { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.sv__field-val--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.sv__field-val--inline { display: flex; align-items: center; gap: 7px; }
+
+/* Spacing helpers */
+.sv__mb { margin-bottom: 20px; }
+.sv__mb-sm { margin-bottom: 12px; }
+.sv__mt { margin-top: 12px; }
+
+/* Controls */
+.sv__controls { display: flex; flex-wrap: wrap; gap: 10px; }
+
+/* Section head (label inside panel body) */
+.sv__section-head {
+  display: flex; align-items: center; gap: 7px;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  margin-bottom: 10px;
+}
+
+/* Download links */
+.sv__downloads { display: flex; flex-wrap: wrap; gap: 10px; }
+.sv__dl-link {
+  display: inline-flex; align-items: center; gap: 8px;
+  height: var(--control-h-md); padding: 0 14px;
+  background: var(--surface-raised-2); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
+  text-decoration: none; transition: var(--transition-colors);
+}
+.sv__dl-link:hover { background: var(--surface-active); }
+
+/* Setup head */
+.sv__setup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+
+/* Code block */
+.sv__codeblock {
+  background: var(--surface-inset); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 14px 16px; font-family: var(--font-mono); font-size: var(--text-xs);
+  color: var(--text-secondary); overflow-x: auto; line-height: 1.7;
+}
+.sv__cmt { color: var(--text-muted); }
+.sv__accent { color: var(--accent-text); }
+.sv__mt { margin-top: 12px; }
+
+/* Deploy prompt */
+.sv__deploy-prompt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 12px 0; }
+.sv__deploy-desc { font-size: var(--text-sm); color: var(--text-tertiary); max-width: 420px; line-height: 1.5; }
+
+/* Form */
+.sv__form { display: flex; flex-direction: column; gap: 16px; }
+.sv__form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
+.sv__col-span2 { grid-column: 1 / -1; }
+.sv__form-actions { display: flex; align-items: center; gap: 10px; }
+
+/* Deployment / Oxide stages */
+.sv__stages { display: flex; flex-direction: column; gap: 10px; }
+.sv__stage { display: flex; align-items: center; gap: 11px; }
+.sv__stage-dot {
+  width: 24px; height: 24px; border-radius: 50%; flex: none;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--surface-raised-2); color: var(--text-muted);
+  box-shadow: var(--ring-default);
+}
+.sv__stage-dot[data-state="active"] { background: var(--status-warn-soft); color: var(--status-warn); box-shadow: inset 0 0 0 1px var(--status-warn-border); }
+.sv__stage-dot[data-state="complete"] { background: var(--status-online-soft); color: var(--status-online); box-shadow: inset 0 0 0 1px var(--status-online-border); }
+.sv__stage-dot[data-state="failed"] { background: var(--status-offline-soft); color: var(--status-offline); box-shadow: inset 0 0 0 1px var(--status-offline-border); }
+.sv__stage-nub { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
+.sv__stage-label { font-size: var(--text-sm); color: var(--text-tertiary); }
+.sv__stage-label[data-state="active"] { color: var(--status-warn); font-weight: 600; }
+.sv__stage-label[data-state="complete"] { color: var(--status-online); }
+.sv__stage-label[data-state="failed"] { color: var(--status-offline); }
+
+@keyframes sv-spin { to { transform: rotate(360deg); } }
+.sv__spin { animation: sv-spin 0.7s linear infinite; }
+
+/* Automation toggles */
+.sv__toggles { display: flex; flex-direction: column; gap: 0; }
+.sv__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 14px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.sv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.sv__toggle-row:first-child { padding-top: 0; }
+.sv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.sv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+</style>
diff --git a/frontend/src/views/admin/StoreConfigView.vue b/frontend/src/views/admin/StoreConfigView.vue
index 008448b..279744d 100644
--- a/frontend/src/views/admin/StoreConfigView.vue
+++ b/frontend/src/views/admin/StoreConfigView.vue
@@ -3,7 +3,13 @@ import { ref, onMounted, computed } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useToastStore } from '@/stores/toast'
 import type { StoreConfig } from '@/types'
-import { Store, Save, Loader2, AlertTriangle, DollarSign } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
 
 const api = useApi()
 const toast = useToastStore()
@@ -22,10 +28,18 @@ const isLoading = ref(false)
 const saving = ref(false)
 const isConfigured = ref(false)
 
+// DS Input uses defineModel<string>() which emits string | undefined, but
+// paypal_client_id is string | null in the DB type. Bridge null ↔ undefined
+// so we never change what gets saved to the API.
+const paypalClientId = computed({
+  get: () => config.value.paypal_client_id ?? undefined,
+  set: (v: string | undefined) => { config.value.paypal_client_id = v ?? null },
+})
+
 const currencyOptions = [
-  { value: 'USD', label: 'USD - US Dollar' },
-  { value: 'EUR', label: 'EUR - Euro' },
-  { value: 'GBP', label: 'GBP - British Pound' },
+  { value: 'USD', label: 'USD — US Dollar' },
+  { value: 'EUR', label: 'EUR — Euro' },
+  { value: 'GBP', label: 'GBP — British Pound' },
 ]
 
 const showPayPalWarning = computed(() => {
@@ -40,7 +54,6 @@ async function fetchConfig() {
     isConfigured.value = !!data.config.store_name
   } catch (err: any) {
     if (err.response?.status === 404) {
-      // No config yet, use defaults
       isConfigured.value = false
     } else {
       toast.error('Failed to load store configuration')
@@ -51,7 +64,6 @@ async function fetchConfig() {
 }
 
 async function saveConfig() {
-  // Validation
   if (!config.value.store_name.trim()) {
     toast.error('Store name is required')
     return
@@ -73,7 +85,6 @@ async function saveConfig() {
       enabled: config.value.enabled,
     }
 
-    // Only include secret if it was entered
     if (paypalSecret.value.trim()) {
       payload.paypal_client_secret = paypalSecret.value
     }
@@ -81,7 +92,7 @@ async function saveConfig() {
     await api.put('/webstore/config', payload)
     toast.success('Store configuration saved successfully')
     isConfigured.value = true
-    paypalSecret.value = '' // Clear after save
+    paypalSecret.value = ''
   } catch (err: any) {
     const message = err.response?.data?.error || 'Failed to save configuration'
     toast.error(message)
@@ -96,202 +107,181 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Store class="w-5 h-5 text-oxide-500" />
-        <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Store Configuration</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">
-            Configure your integrated webstore and PayPal settings
-          </p>
-        </div>
+  <div class="sc-page">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Management</div>
+        <h1 class="page__title">Store configuration</h1>
+        <p class="page__sub">Configure your integrated webstore and PayPal settings.</p>
       </div>
-      <button
-        @click="saveConfig"
-        :disabled="saving || isLoading"
-        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
+      <Button :loading="saving" :disabled="isLoading" icon="save" @click="saveConfig">
+        Save configuration
+      </Button>
+    </div>
+
+    <!-- Loading skeleton -->
+    <div v-if="isLoading" class="sc-loading">
+      <EmptyState icon="loader" title="Loading configuration" description="Fetching your store settings…" />
+    </div>
+
+    <!-- Empty state — no config yet -->
+    <Panel v-else-if="!isConfigured && !config.store_name">
+      <EmptyState
+        icon="shopping-cart"
+        title="No store configured"
+        description="Set up your integrated webstore to start selling in-game items, ranks, and currency to your players. Fill out the form below to get started."
       >
-        <Loader2 v-if="saving" class="w-4 h-4 animate-spin" />
-        <Save v-else class="w-4 h-4" />
-        {{ saving ? 'Saving...' : 'Save Configuration' }}
-      </button>
-    </div>
-
-    <!-- Loading state -->
-    <div v-if="isLoading" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-      <Loader2 class="w-8 h-8 text-neutral-500 animate-spin mx-auto mb-3" />
-      <p class="text-sm text-neutral-500">Loading configuration...</p>
-    </div>
-
-    <!-- Empty state -->
-    <div
-      v-else-if="!isConfigured && !config.store_name"
-      class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center"
-    >
-      <Store class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h3 class="text-lg font-medium text-neutral-200 mb-2">No Store Configured</h3>
-      <p class="text-sm text-neutral-500 mb-6 max-w-md mx-auto">
-        Set up your integrated webstore to start selling in-game items, ranks, and currency to your players.
-      </p>
-      <p class="text-xs text-neutral-600">
-        Fill out the form below to get started.
-      </p>
-    </div>
+        <template #action>
+          <Button size="sm" variant="outline" icon="arrow-down">Complete the form below</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
     <!-- Configuration form -->
-    <div v-else class="space-y-6">
-      <!-- Store enable toggle with warning -->
-      <div
-        class="bg-neutral-900 border rounded-lg p-5"
-        :class="config.enabled ? 'border-oxide-500/50' : 'border-neutral-800'"
-      >
-        <div class="flex items-center justify-between">
-          <div>
-            <h2 class="text-sm font-medium text-neutral-200">Enable Webstore</h2>
-            <p class="text-xs text-neutral-500 mt-1">
-              Allow players to purchase items from your store
-            </p>
+    <div v-else class="sc-form">
+      <!-- Enable toggle -->
+      <Panel title="Webstore status" subtitle="Allow players to purchase items from your store">
+        <div class="sc-toggle-row">
+          <div class="sc-toggle-row__info">
+            <span class="sc-toggle-row__label">Enable webstore</span>
+            <span class="sc-toggle-row__hint">Players will be able to browse and purchase items when enabled.</span>
           </div>
-          <button
-            @click="config.enabled = !config.enabled"
-            :class="config.enabled ? 'bg-oxide-600' : 'bg-neutral-700'"
-            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-oxide-500 focus:ring-offset-2 focus:ring-offset-neutral-900"
-          >
-            <span
-              :class="config.enabled ? 'translate-x-6' : 'translate-x-1'"
-              class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
-            ></span>
-          </button>
+          <Switch v-model="config.enabled" />
         </div>
 
-        <!-- Warning when enabled without PayPal -->
-        <div
+        <Alert
           v-if="showPayPalWarning"
-          class="mt-4 flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg"
+          tone="warn"
+          title="PayPal configuration required"
+          class="sc-alert"
         >
-          <AlertTriangle class="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
-          <div class="text-xs text-yellow-300">
-            <strong>PayPal configuration required.</strong> You must configure PayPal credentials below before the store can process transactions.
-          </div>
-        </div>
-      </div>
+          Configure PayPal credentials in the section below before the store can process transactions.
+        </Alert>
+      </Panel>
 
-      <!-- Basic store info -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Store Information</h2>
-
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Store Name *</label>
-          <input
+      <!-- Store information -->
+      <Panel title="Store information" eyebrow="General">
+        <div class="sc-fields">
+          <Input
             v-model="config.store_name"
-            type="text"
+            label="Store name"
             placeholder="My Rust Server Store"
-            maxlength="200"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            :required="true"
+            hint="Displayed to players on the store page"
           />
-          <p class="text-xs text-neutral-600 mt-1">Displayed to players on the store page</p>
-        </div>
 
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Description (optional)</label>
-          <textarea
-            v-model="config.description"
-            placeholder="Welcome to our server store! Support us and get awesome in-game items..."
-            rows="3"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
-          ></textarea>
-          <p class="text-xs text-neutral-600 mt-1">Brief description shown on the store page</p>
-        </div>
+          <label class="cc-field">
+            <span class="cc-field__label">Description <span class="sc-opt">(optional)</span></span>
+            <textarea
+              v-model="config.description"
+              class="cc-textarea"
+              rows="3"
+              placeholder="Welcome to our server store! Support us and get awesome in-game items…"
+            />
+            <span class="cc-field__hint">Brief description shown on the store page.</span>
+          </label>
 
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Currency</label>
-          <div class="relative">
-            <DollarSign class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500 pointer-events-none" />
-            <select
-              v-model="config.currency"
-              class="w-full pl-9 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors appearance-none cursor-pointer"
-            >
-              <option v-for="opt in currencyOptions" :key="opt.value" :value="opt.value">
-                {{ opt.label }}
-              </option>
-            </select>
-          </div>
-          <p class="text-xs text-neutral-600 mt-1">Currency used for all transactions</p>
+          <Select
+            v-model="config.currency"
+            label="Currency"
+            :options="currencyOptions"
+            hint="Currency used for all transactions"
+          />
         </div>
-      </div>
+      </Panel>
 
       <!-- PayPal configuration -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 space-y-4">
-        <div>
-          <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">PayPal Configuration</h2>
-          <p class="text-xs text-neutral-500 mt-1">
-            Get your API credentials from the
-            <a
-              href="https://developer.paypal.com/dashboard/"
-              target="_blank"
-              class="text-oxide-400 hover:text-oxide-300 underline"
-            >
-              PayPal Developer Dashboard
-            </a>
-          </p>
-        </div>
-
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">PayPal Client ID *</label>
-          <input
-            v-model="config.paypal_client_id"
-            type="text"
+      <Panel title="PayPal configuration" eyebrow="Payments" subtitle="Get your API credentials from the PayPal Developer Dashboard.">
+        <div class="sc-fields">
+          <Input
+            v-model="paypalClientId"
+            label="PayPal Client ID"
             placeholder="AXxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 font-mono placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            :required="true"
+            :mono="true"
           />
-        </div>
 
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">PayPal Client Secret *</label>
-          <input
+          <Input
             v-model="paypalSecret"
+            label="PayPal Client Secret"
             type="password"
             placeholder="Enter to update (stored encrypted)"
-            class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 font-mono placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            :mono="true"
+            hint="Stored encrypted. Leave blank to keep existing secret."
+            :required="true"
           />
-          <p class="text-xs text-neutral-600 mt-1">
-            Stored encrypted. Leave blank to keep existing secret.
-          </p>
-        </div>
 
-        <!-- Sandbox mode toggle -->
-        <div class="flex items-center justify-between p-4 bg-neutral-800 rounded-lg border border-neutral-700">
-          <div>
-            <p class="text-sm font-medium text-neutral-200">Sandbox Mode</p>
-            <p class="text-xs text-neutral-500 mt-1">
-              Use PayPal sandbox for testing (no real transactions)
-            </p>
+          <!-- Sandbox mode toggle -->
+          <div class="sc-sandbox">
+            <div class="sc-toggle-row">
+              <div class="sc-toggle-row__info">
+                <span class="sc-toggle-row__label">Sandbox mode</span>
+                <span class="sc-toggle-row__hint">Use PayPal sandbox for testing — no real transactions.</span>
+              </div>
+              <Switch v-model="config.sandbox_mode" />
+            </div>
           </div>
-          <button
-            @click="config.sandbox_mode = !config.sandbox_mode"
-            :class="config.sandbox_mode ? 'bg-yellow-600' : 'bg-green-600'"
-            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-oxide-500 focus:ring-offset-2 focus:ring-offset-neutral-900"
+
+          <Alert
+            v-if="!config.sandbox_mode && config.enabled"
+            tone="danger"
+            title="Production mode active"
           >
-            <span
-              :class="config.sandbox_mode ? 'translate-x-6' : 'translate-x-1'"
-              class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
-            ></span>
-          </button>
+            Real transactions will be processed. Ensure your PayPal credentials are correct.
+          </Alert>
         </div>
-
-        <!-- Production warning -->
-        <div
-          v-if="!config.sandbox_mode && config.enabled"
-          class="flex items-start gap-3 p-3 bg-red-500/10 border border-red-500/30 rounded-lg"
-        >
-          <AlertTriangle class="w-4 h-4 text-red-400 mt-0.5 flex-shrink-0" />
-          <div class="text-xs text-red-300">
-            <strong>Production mode enabled.</strong> Real transactions will be processed. Ensure your PayPal credentials are correct.
-          </div>
-        </div>
-      </div>
+      </Panel>
     </div>
   </div>
 </template>
+
+<style scoped>
+.sc-page { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
+
+.page__head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; row-gap: 12px;
+}
+.page__title {
+  font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 5px;
+}
+.page__sub { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 3px; }
+
+.sc-loading { padding: 20px 0; }
+
+.sc-form { display: flex; flex-direction: column; gap: 16px; }
+
+.sc-fields { display: flex; flex-direction: column; gap: 16px; }
+
+/* Shared toggle row */
+.sc-toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px;
+}
+.sc-toggle-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.sc-toggle-row__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.sc-toggle-row__hint { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+.sc-sandbox {
+  background: var(--surface-raised); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px 16px;
+}
+
+.sc-alert { margin-top: 14px; }
+
+.sc-opt { font-weight: 400; color: var(--text-muted); }
+
+/* Textarea token style */
+.cc-textarea {
+  width: 100%; min-height: 80px; padding: 9px 11px;
+  background: var(--surface-inset); border: none; border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); resize: vertical;
+  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
+  line-height: var(--leading-normal); outline: none;
+  transition: var(--transition-colors);
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+</style>
diff --git a/frontend/src/views/admin/StoreItemsView.vue b/frontend/src/views/admin/StoreItemsView.vue
index efc0c5e..09ece79 100644
--- a/frontend/src/views/admin/StoreItemsView.vue
+++ b/frontend/src/views/admin/StoreItemsView.vue
@@ -2,8 +2,16 @@
 import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import type { StoreCategory, StoreItem } from '@/types'
-import { ShoppingBag, Plus, Trash2, RefreshCw, Edit2, DollarSign, X } from 'lucide-vue-next'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Checkbox from '@/components/ds/forms/Checkbox.vue'
 
 const api = useApi()
 
@@ -42,17 +50,23 @@ const itemTypes = [
   { value: 'kit', label: 'Kit', example: 'inventory.giveto {steam_id} rifle.ak 1' },
   { value: 'rank', label: 'Rank', example: 'oxide.usergroup add {steam_id} vip' },
   { value: 'currency', label: 'Currency', example: 'eco deposit {steam_id} 1000' },
-  { value: 'command', label: 'Custom Command', example: 'yourplugin.givereward {steam_id}' }
+  { value: 'command', label: 'Custom command', example: 'yourplugin.givereward {steam_id}' }
 ]
 
-function typeBadgeClass(type: string): string {
-  switch (type) {
-    case 'kit': return 'bg-blue-500/15 text-blue-400'
-    case 'rank': return 'bg-purple-500/15 text-purple-400'
-    case 'currency': return 'bg-yellow-500/15 text-yellow-400'
-    case 'command': return 'bg-oxide-500/15 text-oxide-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+const tabItems = computed(() => [
+  { value: 'categories', label: 'Categories', count: categories.value.length },
+  { value: 'items', label: 'Items', count: items.value.length },
+])
+
+type ItemTypeTone = 'info' | 'accent' | 'warn' | 'neutral'
+function typeTone(type: string): ItemTypeTone {
+  const map: Record<string, ItemTypeTone> = {
+    kit: 'info',
+    rank: 'accent',
+    currency: 'warn',
+    command: 'accent',
   }
+  return map[type] ?? 'neutral'
 }
 
 function autoGenerateSlug(name: string): string {
@@ -188,7 +202,6 @@ function removeCommand(index: number) {
 }
 
 async function saveItem() {
-  // Validate
   if (!itemForm.value.name.trim()) {
     alert('Item name is required')
     return
@@ -234,12 +247,22 @@ async function deleteItem(item: StoreItem) {
 function getCategoryName(categoryId: string | null): string {
   if (!categoryId) return 'Uncategorized'
   const cat = categories.value.find(c => c.id === categoryId)
-  return cat?.name || 'Unknown'
+  return cat?.name ?? 'Unknown'
 }
 
 const selectedTypeExample = computed(() => {
   const type = itemTypes.find(t => t.value === itemForm.value.item_type)
-  return type?.example || ''
+  return type?.example ?? ''
+})
+
+const categorySelectOptions = computed(() => [
+  { value: '', label: 'Uncategorized' },
+  ...categories.value.map(c => ({ value: c.id, label: c.name }))
+])
+
+const categorySelectValue = computed({
+  get: () => itemForm.value.category_id ?? '',
+  set: (v: string) => { itemForm.value.category_id = v || null }
 })
 
 onMounted(() => {
@@ -249,447 +272,408 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <ShoppingBag class="w-5 h-5 text-oxide-500" />
-        <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Store Items</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">
-            {{ categories.length }} categories, {{ items.length }} items
-          </p>
-        </div>
+  <div class="si-page">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Management · Store</div>
+        <h1 class="page__title">Store items</h1>
+        <p class="page__sub">{{ categories.length }} categories · {{ items.length }} items</p>
       </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="tab === 'categories' ? fetchCategories() : fetchItems()"
-          :disabled="isLoading"
-          class="flex items-center gap-2 px-3 py-2 text-sm text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
-        </button>
-        <button
-          v-if="tab === 'categories'"
-          @click="openCategoryModal()"
-          class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
-        >
-          <Plus class="w-4 h-4" />
-          Add Category
-        </button>
-        <button
-          v-else
-          @click="openItemModal()"
-          class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
-        >
-          <Plus class="w-4 h-4" />
-          Add Item
-        </button>
+      <div class="page__actions">
+        <IconButton icon="refresh-cw" label="Refresh" :class="{ 'si-spin': isLoading }" @click="tab === 'categories' ? fetchCategories() : fetchItems()" />
+        <Button v-if="tab === 'categories'" icon="plus" @click="openCategoryModal()">Add category</Button>
+        <Button v-else icon="plus" @click="openItemModal()">Add item</Button>
       </div>
     </div>
 
-    <!-- Tabs -->
-    <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden w-fit">
-      <button
-        @click="tab = 'categories'"
-        class="px-4 py-2 text-sm font-medium transition-colors"
-        :class="tab === 'categories' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-      >
-        Categories
-      </button>
-      <button
-        @click="tab = 'items'"
-        class="px-4 py-2 text-sm font-medium transition-colors"
-        :class="tab === 'items' ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-      >
-        Items
-      </button>
-    </div>
+    <!-- Tab bar + content panel -->
+    <Panel :flush-body="true">
+      <template #actions>
+        <Tabs v-model="tab" :items="tabItems" />
+      </template>
 
-    <!-- Categories Tab -->
-    <div v-if="tab === 'categories'" class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+      <!-- Categories table -->
+      <table v-if="tab === 'categories'" class="si-table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Name</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Slug</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Display Order</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Visible</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
+          <tr>
+            <th>Name</th>
+            <th>Slug</th>
+            <th class="si-col-num">Order</th>
+            <th>Visibility</th>
+            <th class="si-col-actions">Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
+        <tbody>
           <tr v-if="categories.length === 0">
-            <td colspan="5" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="isLoading">Loading categories...</template>
-              <template v-else>No categories yet. Add one to organize your store items.</template>
+            <td colspan="5" class="si-empty-cell">
+              <EmptyState
+                icon="folder-open"
+                :title="isLoading ? 'Loading…' : 'No categories'"
+                :description="isLoading ? '' : 'Add a category to organize your store items.'"
+              />
             </td>
           </tr>
-          <tr
-            v-for="category in categories"
-            :key="category.id"
-            class="hover:bg-neutral-800/50 transition-colors"
-          >
-            <td class="px-4 py-3">
-              <p class="text-sm font-medium text-neutral-100">{{ category.name }}</p>
-              <p v-if="category.description" class="text-xs text-neutral-500 truncate max-w-md">{{ category.description }}</p>
+          <tr v-for="category in categories" :key="category.id">
+            <td class="si-cell-primary">
+              <span class="si-name">{{ category.name }}</span>
+              <span v-if="category.description" class="si-sub">{{ category.description }}</span>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ category.slug }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ category.display_order }}</td>
-            <td class="px-4 py-3">
-              <span
-                class="text-xs font-medium px-2 py-0.5 rounded-full"
-                :class="category.visible ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
-              >
+            <td><span class="si-mono">{{ category.slug }}</span></td>
+            <td class="si-col-num si-mono">{{ category.display_order }}</td>
+            <td>
+              <Badge :tone="category.visible ? 'online' : 'neutral'">
                 {{ category.visible ? 'Visible' : 'Hidden' }}
-              </span>
+              </Badge>
             </td>
-            <td class="px-4 py-3 text-right">
-              <div class="flex items-center justify-end gap-1">
-                <button
-                  @click="openCategoryModal(category)"
-                  class="p-1.5 text-neutral-500 hover:text-oxide-400 rounded transition-colors"
-                  title="Edit"
-                >
-                  <Edit2 class="w-4 h-4" />
-                </button>
-                <button
-                  @click="deleteCategory(category)"
-                  class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
-                  title="Delete"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+            <td class="si-col-actions">
+              <div class="si-row-actions">
+                <IconButton icon="pencil" label="Edit" size="sm" @click="openCategoryModal(category)" />
+                <IconButton icon="trash-2" label="Delete" size="sm" variant="danger" @click="deleteCategory(category)" />
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
 
-    <!-- Items Tab -->
-    <div v-if="tab === 'items'" class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+      <!-- Items table -->
+      <table v-if="tab === 'items'" class="si-table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Item</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Category</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Type</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Price</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Commands</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
+          <tr>
+            <th>Item</th>
+            <th>Category</th>
+            <th>Type</th>
+            <th class="si-col-price">Price</th>
+            <th>Commands</th>
+            <th>Status</th>
+            <th class="si-col-actions">Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
+        <tbody>
           <tr v-if="items.length === 0">
-            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="isLoading">Loading items...</template>
-              <template v-else>No items yet. Add items to start selling.</template>
+            <td colspan="7" class="si-empty-cell">
+              <EmptyState
+                icon="shopping-bag"
+                :title="isLoading ? 'Loading…' : 'No items'"
+                :description="isLoading ? '' : 'Add items to start selling.'"
+              />
             </td>
           </tr>
-          <tr
-            v-for="item in items"
-            :key="item.id"
-            class="hover:bg-neutral-800/50 transition-colors"
-          >
-            <td class="px-4 py-3">
-              <p class="text-sm font-medium text-neutral-100">{{ item.name }}</p>
-              <p v-if="item.description" class="text-xs text-neutral-500 truncate max-w-xs">{{ item.description }}</p>
+          <tr v-for="item in items" :key="item.id">
+            <td class="si-cell-primary">
+              <span class="si-name">{{ item.name }}</span>
+              <span v-if="item.description" class="si-sub">{{ item.description }}</span>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ getCategoryName(item.category_id) }}</td>
-            <td class="px-4 py-3">
-              <span class="text-xs font-medium px-2 py-0.5 rounded-full" :class="typeBadgeClass(item.item_type)">
-                {{ item.item_type }}
-              </span>
+            <td class="si-text-secondary">{{ getCategoryName(item.category_id) }}</td>
+            <td><Badge :tone="typeTone(item.item_type)">{{ item.item_type }}</Badge></td>
+            <td class="si-col-price">
+              <span class="si-price">${{ safeFixed(item.price, 2) }}</span>
             </td>
-            <td class="px-4 py-3">
-              <div class="flex items-center gap-1 text-sm text-neutral-200">
-                <DollarSign class="w-3.5 h-3.5 text-neutral-500" />
-                {{ safeFixed(item.price, 2) }}
-              </div>
-            </td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">
-              {{ item.delivery_commands.length }} cmd{{ item.delivery_commands.length !== 1 ? 's' : '' }}
-            </td>
-            <td class="px-4 py-3">
-              <span
-                class="text-xs font-medium px-2 py-0.5 rounded-full"
-                :class="item.enabled ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
-              >
+            <td><span class="si-mono si-text-secondary">{{ item.delivery_commands.length }} cmd{{ item.delivery_commands.length !== 1 ? 's' : '' }}</span></td>
+            <td>
+              <Badge :tone="item.enabled ? 'online' : 'neutral'">
                 {{ item.enabled ? 'Enabled' : 'Disabled' }}
-              </span>
+              </Badge>
             </td>
-            <td class="px-4 py-3 text-right">
-              <div class="flex items-center justify-end gap-1">
-                <button
-                  @click="openItemModal(item)"
-                  class="p-1.5 text-neutral-500 hover:text-oxide-400 rounded transition-colors"
-                  title="Edit"
-                >
-                  <Edit2 class="w-4 h-4" />
-                </button>
-                <button
-                  @click="deleteItem(item)"
-                  class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
-                  title="Delete"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+            <td class="si-col-actions">
+              <div class="si-row-actions">
+                <IconButton icon="pencil" label="Edit" size="sm" @click="openItemModal(item)" />
+                <IconButton icon="trash-2" label="Delete" size="sm" variant="danger" @click="deleteItem(item)" />
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
 
-    <!-- Category Modal -->
+    <!-- ===== Category modal ===== -->
     <div
       v-if="showCategoryModal"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      class="si-modal-backdrop"
       @click.self="closeCategoryModal"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-lg w-full">
-        <div class="border-b border-neutral-800 px-6 py-4 flex items-center justify-between">
-          <h2 class="text-xl font-bold text-neutral-100">{{ editingCategory ? 'Edit Category' : 'Add Category' }}</h2>
-          <button @click="closeCategoryModal" class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors">
-            <X class="w-5 h-5" />
-          </button>
+      <div class="si-modal">
+        <div class="si-modal__head">
+          <h2 class="si-modal__title">{{ editingCategory ? 'Edit category' : 'Add category' }}</h2>
+          <IconButton icon="x" label="Close" @click="closeCategoryModal" />
         </div>
-        <div class="p-6 space-y-4">
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">Name</label>
-            <input
-              v-model="categoryForm.name"
-              @input="categoryForm.slug = autoGenerateSlug(categoryForm.name)"
-              type="text"
-              placeholder="VIP Kits"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">Slug (URL-safe)</label>
-            <input
-              v-model="categoryForm.slug"
-              type="text"
-              placeholder="vip-kits"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 font-mono placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">Description (optional)</label>
+        <div class="si-modal__body">
+          <Input
+            v-model="categoryForm.name"
+            label="Name"
+            placeholder="VIP Kits"
+            @input="categoryForm.slug = autoGenerateSlug(categoryForm.name)"
+          />
+          <Input
+            v-model="categoryForm.slug"
+            label="Slug (URL-safe)"
+            placeholder="vip-kits"
+            :mono="true"
+          />
+          <label class="cc-field">
+            <span class="cc-field__label">Description <span class="si-opt">(optional)</span></span>
             <textarea
               v-model="categoryForm.description"
+              class="cc-textarea"
               rows="2"
               placeholder="Premium kits for VIP players"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
             />
-          </div>
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">Display Order</label>
-            <input
-              v-model.number="categoryForm.display_order"
-              type="number"
-              min="0"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
-          <div class="flex items-center gap-3">
-            <input
-              v-model="categoryForm.visible"
-              type="checkbox"
-              id="category-visible"
-              class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50 transition-colors"
-            />
-            <label for="category-visible" class="text-sm text-neutral-300">Visible to customers</label>
-          </div>
+          </label>
+          <Input
+            v-model="categoryForm.display_order as any"
+            label="Display order"
+            type="number"
+          />
+          <Checkbox v-model="categoryForm.visible" label="Visible to customers" />
         </div>
-        <div class="border-t border-neutral-800 px-6 py-4 flex items-center justify-end gap-3">
-          <button
-            @click="closeCategoryModal"
-            class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            @click="saveCategory"
-            class="px-6 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
-          >
-            {{ editingCategory ? 'Save Changes' : 'Create Category' }}
-          </button>
+        <div class="si-modal__foot">
+          <Button variant="secondary" @click="closeCategoryModal">Cancel</Button>
+          <Button @click="saveCategory">{{ editingCategory ? 'Save changes' : 'Create category' }}</Button>
         </div>
       </div>
     </div>
 
-    <!-- Item Modal -->
+    <!-- ===== Item modal ===== -->
     <div
       v-if="showItemModal"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
+      class="si-modal-backdrop"
       @click.self="closeItemModal"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-        <div class="sticky top-0 bg-neutral-900 border-b border-neutral-800 px-6 py-4 flex items-center justify-between">
-          <h2 class="text-xl font-bold text-neutral-100">{{ editingItem ? 'Edit Item' : 'Add Item' }}</h2>
-          <button @click="closeItemModal" class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors">
-            <X class="w-5 h-5" />
-          </button>
+      <div class="si-modal si-modal--wide">
+        <div class="si-modal__head si-modal__head--sticky">
+          <h2 class="si-modal__title">{{ editingItem ? 'Edit item' : 'Add item' }}</h2>
+          <IconButton icon="x" label="Close" @click="closeItemModal" />
         </div>
-        <div class="p-6 space-y-6">
-          <!-- Basic Info -->
-          <div class="space-y-4">
-            <h3 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Basic Information</h3>
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Item Name</label>
-              <input
-                v-model="itemForm.name"
-                type="text"
-                placeholder="VIP Starter Kit"
-                class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Description (optional)</label>
+        <div class="si-modal__body">
+          <!-- Basic info section -->
+          <div class="si-section">
+            <div class="si-section__label">Basic information</div>
+            <Input v-model="itemForm.name" label="Item name" placeholder="VIP Starter Kit" />
+            <label class="cc-field">
+              <span class="cc-field__label">Description <span class="si-opt">(optional)</span></span>
               <textarea
                 v-model="itemForm.description"
+                class="cc-textarea"
                 rows="2"
                 placeholder="Get started with essential gear and resources"
-                class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
               />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Category</label>
-              <select
-                v-model="itemForm.category_id"
-                class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              >
-                <option :value="null">Uncategorized</option>
-                <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
-              </select>
-            </div>
+            </label>
+            <Select
+              v-model="categorySelectValue"
+              label="Category"
+              :options="categorySelectOptions"
+            />
           </div>
 
-          <!-- Pricing -->
-          <div class="space-y-4">
-            <h3 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Pricing</h3>
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Price (USD)</label>
-              <div class="relative">
-                <DollarSign class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-                <input
-                  v-model.number="itemForm.price"
-                  type="number"
-                  step="0.01"
-                  min="0.01"
-                  placeholder="9.99"
-                  class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-                />
-              </div>
-            </div>
+          <!-- Pricing section -->
+          <div class="si-section">
+            <div class="si-section__label">Pricing</div>
+            <Input
+              v-model="itemForm.price as any"
+              label="Price (USD)"
+              type="number"
+              prefix="$"
+              placeholder="9.99"
+            />
           </div>
 
-          <!-- Item Type -->
-          <div class="space-y-4">
-            <h3 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Item Type</h3>
-            <div class="grid grid-cols-2 gap-2">
+          <!-- Item type section -->
+          <div class="si-section">
+            <div class="si-section__label">Item type</div>
+            <div class="si-type-grid">
               <button
                 v-for="type in itemTypes"
                 :key="type.value"
+                type="button"
+                class="si-type-btn"
+                :class="itemForm.item_type === type.value ? 'si-type-btn--active' : ''"
                 @click="itemForm.item_type = type.value as any"
-                class="px-3 py-2 text-sm font-medium rounded-lg border transition-colors"
-                :class="itemForm.item_type === type.value
-                  ? 'bg-oxide-500/15 border-oxide-500 text-oxide-400'
-                  : 'bg-neutral-800 border-neutral-700 text-neutral-400 hover:text-neutral-200'"
               >
                 {{ type.label }}
               </button>
             </div>
           </div>
 
-          <!-- Delivery Commands -->
-          <div class="space-y-4">
-            <div class="flex items-center justify-between">
-              <h3 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Delivery Commands</h3>
-              <button
-                @click="addCommand"
-                class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 border border-neutral-700 rounded-lg transition-colors"
-              >
-                <Plus class="w-3 h-3" />
-                Add Command
-              </button>
+          <!-- Delivery commands section -->
+          <div class="si-section">
+            <div class="si-section__label-row">
+              <div class="si-section__label">Delivery commands</div>
+              <Button size="sm" variant="ghost" icon="plus" @click="addCommand">Add command</Button>
             </div>
-            <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-3 space-y-1.5 text-xs">
-              <p class="text-neutral-400">Use placeholders:</p>
-              <p class="text-neutral-300 font-mono">{'{steam_id}'} - Player's Steam ID</p>
-              <p class="text-neutral-300 font-mono">{'{player_name}'} - Player's name</p>
-              <p class="text-neutral-500 mt-2">Example: {{ selectedTypeExample }}</p>
+            <div class="si-cmd-hint">
+              <p class="si-cmd-hint__row"><span class="si-cmd-hint__mono">{'{steam_id}'}</span> Player's Steam ID</p>
+              <p class="si-cmd-hint__row"><span class="si-cmd-hint__mono">{'{player_name}'}</span> Player's name</p>
+              <p class="si-cmd-hint__example">Example: {{ selectedTypeExample }}</p>
             </div>
-            <div class="space-y-2">
-              <div v-for="(_cmd, index) in itemForm.delivery_commands" :key="index" class="flex gap-2">
-                <input
+            <div class="si-commands">
+              <div v-for="(_cmd, index) in itemForm.delivery_commands" :key="index" class="si-command-row">
+                <Input
                   v-model="itemForm.delivery_commands[index]"
-                  type="text"
+                  :mono="true"
                   placeholder="inventory.giveto {steam_id} rifle.ak 1"
-                  class="flex-1 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 font-mono placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
                 />
-                <button
+                <IconButton
                   v-if="itemForm.delivery_commands.length > 1"
+                  icon="trash-2"
+                  label="Remove"
+                  variant="danger"
+                  size="sm"
                   @click="removeCommand(index)"
-                  class="p-2 text-neutral-500 hover:text-red-400 rounded-lg transition-colors"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </div>
             </div>
           </div>
 
-          <!-- Additional Settings -->
-          <div class="space-y-4">
-            <h3 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Additional Settings</h3>
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Image URL (optional)</label>
-              <input
-                v-model="itemForm.image_url"
-                type="text"
-                placeholder="https://example.com/image.png"
-                class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              />
-            </div>
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Purchase Limit Per Player (optional)</label>
-              <input
-                v-model.number="itemForm.limit_per_player"
-                type="number"
-                min="0"
-                placeholder="Leave empty for unlimited"
-                class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              />
-            </div>
-            <div class="flex items-center gap-3">
-              <input
-                v-model="itemForm.enabled"
-                type="checkbox"
-                id="item-enabled"
-                class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50 transition-colors"
-              />
-              <label for="item-enabled" class="text-sm text-neutral-300">Enabled and available for purchase</label>
-            </div>
+          <!-- Additional settings section -->
+          <div class="si-section">
+            <div class="si-section__label">Additional settings</div>
+            <Input
+              v-model="itemForm.image_url"
+              label="Image URL"
+              placeholder="https://example.com/image.png"
+              hint="Optional preview image for the store page."
+            />
+            <Input
+              v-model="itemForm.limit_per_player as any"
+              label="Purchase limit per player"
+              type="number"
+              placeholder="Leave empty for unlimited"
+              hint="Optional. Restricts how many times a player can purchase this item."
+            />
+            <Checkbox v-model="itemForm.enabled" label="Enabled and available for purchase" />
           </div>
         </div>
-        <div class="border-t border-neutral-800 px-6 py-4 flex items-center justify-end gap-3">
-          <button
-            @click="closeItemModal"
-            class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-          >
-            Cancel
-          </button>
-          <button
-            @click="saveItem"
-            class="px-6 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
-          >
-            {{ editingItem ? 'Save Changes' : 'Create Item' }}
-          </button>
+        <div class="si-modal__foot">
+          <Button variant="secondary" @click="closeItemModal">Cancel</Button>
+          <Button @click="saveItem">{{ editingItem ? 'Save changes' : 'Create item' }}</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.si-page { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
+
+.page__head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap; row-gap: 12px;
+}
+.page__title {
+  font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 5px;
+}
+.page__sub { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: 3px; }
+.page__actions { display: flex; align-items: center; gap: 8px; }
+
+/* Table */
+.si-table { width: 100%; border-collapse: collapse; }
+.si-table thead th {
+  padding: 10px 16px; text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.si-table tbody tr { border-bottom: 1px solid var(--border-subtle); }
+.si-table tbody tr:last-child { border-bottom: none; }
+.si-table tbody tr:hover { background: var(--surface-hover); }
+.si-table td { padding: 11px 16px; vertical-align: middle; }
+
+.si-cell-primary { display: flex; flex-direction: column; gap: 2px; }
+.si-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.si-sub { font-size: var(--text-xs); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
+.si-mono { font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.si-text-secondary { font-size: var(--text-sm); color: var(--text-secondary); }
+.si-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+
+.si-col-num { width: 80px; text-align: right; }
+.si-col-num.si-mono { text-align: right; }
+.si-col-price { width: 90px; }
+.si-col-actions { width: 80px; }
+.si-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+
+.si-empty-cell { padding: 0 !important; }
+
+.si-spin { animation: si-spin 0.8s linear infinite; }
+@keyframes si-spin { to { transform: rotate(360deg); } }
+
+/* Modal */
+.si-modal-backdrop {
+  position: fixed; inset: 0; z-index: 60;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0,0,0,.6); backdrop-filter: blur(4px); padding: 16px;
+}
+.si-modal {
+  background: var(--surface-base); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl, var(--ring-default)); max-width: 520px; width: 100%;
+  display: flex; flex-direction: column; max-height: 90vh;
+}
+.si-modal--wide { max-width: 680px; }
+
+.si-modal__head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
+  flex: none;
+}
+.si-modal__head--sticky { position: sticky; top: 0; background: var(--surface-base); z-index: 1; }
+.si-modal__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+
+.si-modal__body {
+  padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
+}
+
+.si-modal__foot {
+  display: flex; align-items: center; justify-content: flex-end;
+  gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-subtle);
+  flex: none;
+}
+
+/* Item modal sections */
+.si-section { display: flex; flex-direction: column; gap: 12px; }
+.si-section__label {
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+}
+.si-section__label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+
+/* Item type selector */
+.si-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.si-type-btn {
+  padding: 9px 14px; font-size: var(--text-sm); font-weight: 500; font-family: var(--font-sans);
+  border-radius: var(--radius-md); border: none; cursor: pointer;
+  background: var(--surface-inset); color: var(--text-secondary);
+  box-shadow: var(--ring-default); transition: var(--transition-colors);
+}
+.si-type-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
+.si-type-btn--active {
+  background: var(--accent-soft); color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+/* Command hint */
+.si-cmd-hint {
+  background: var(--surface-inset); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 10px 13px;
+  display: flex; flex-direction: column; gap: 3px;
+}
+.si-cmd-hint__row { font-size: var(--text-xs); color: var(--text-secondary); }
+.si-cmd-hint__mono { font-family: var(--font-mono); color: var(--text-primary); margin-right: 6px; }
+.si-cmd-hint__example { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
+
+.si-commands { display: flex; flex-direction: column; gap: 8px; }
+.si-command-row { display: flex; align-items: center; gap: 8px; }
+
+.si-opt { font-weight: 400; color: var(--text-muted); }
+
+/* Textarea token style */
+.cc-textarea {
+  width: 100%; min-height: 68px; padding: 9px 11px;
+  background: var(--surface-inset); border: none; border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); resize: vertical;
+  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
+  line-height: var(--leading-normal); outline: none;
+  transition: var(--transition-colors);
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+</style>
diff --git a/frontend/src/views/admin/StoreRevenueView.vue b/frontend/src/views/admin/StoreRevenueView.vue
index c3a9196..020e2ec 100644
--- a/frontend/src/views/admin/StoreRevenueView.vue
+++ b/frontend/src/views/admin/StoreRevenueView.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick } from 'vue'
-import { DollarSign, TrendingUp, Clock, AlertCircle, Download, RefreshCw } from 'lucide-vue-next'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import { useApi } from '@/composables/useApi'
 import type { StoreTransaction } from '@/types'
 import { safeCurrency, safeDate } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Select from '@/components/ds/forms/Select.vue'
 
 const api = useApi()
 
@@ -45,15 +50,16 @@ const formatCurrency = (amount: number, currency: string = 'USD'): string => {
   return safeCurrency(amount, symbol)
 }
 
-// Status badge color classes
-const statusBadgeClass = (status: string): string => {
+// Status badge tone map
+type BadgeTone = 'online' | 'warn' | 'info' | 'offline' | 'neutral'
+const statusTone = (status: string): BadgeTone => {
   switch (status) {
-    case 'delivered': return 'bg-green-500/10 text-green-400'
-    case 'paid': return 'bg-yellow-500/10 text-yellow-400'
-    case 'pending': return 'bg-blue-500/10 text-blue-400'
-    case 'failed': return 'bg-red-500/10 text-red-400'
-    case 'refunded': return 'bg-neutral-500/10 text-neutral-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+    case 'delivered': return 'online'
+    case 'paid': return 'warn'
+    case 'pending': return 'info'
+    case 'failed': return 'offline'
+    case 'refunded': return 'neutral'
+    default: return 'neutral'
   }
 }
 
@@ -77,6 +83,10 @@ const loadTransactions = async () => {
   }
 }
 
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
 // Render revenue chart (last 30 days, grouped by day)
 const renderRevenueChart = () => {
   if (!revenueChart.value || transactions.value.length === 0) return
@@ -106,16 +116,24 @@ const renderRevenueChart = () => {
     d.setDate(d.getDate() - i)
     const dateKey = d.toLocaleDateString('en-US')
     dates.push(d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }))
-    revenueData.push(revenueByDate.get(dateKey) || 0)
+    revenueData.push(revenueByDate.get(dateKey) ?? 0)
   }
 
+  const grid   = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
+  const axisLine = cssVar('--border-default') || '#404040'
+  const labelColor = cssVar('--text-tertiary') || '#808080'
+  const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
+  const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
+  const tooltipText = cssVar('--text-primary') || '#e5e5e5'
+  const mono = 'JetBrains Mono, monospace'
+
   revenueChartInstance.setOption({
     backgroundColor: 'transparent',
     tooltip: {
       trigger: 'axis',
-      backgroundColor: '#1a1a1a',
-      borderColor: '#2a2a2a',
-      textStyle: { color: '#e5e5e5' },
+      backgroundColor: tooltipBg,
+      borderColor: tooltipBorder,
+      textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
       formatter: (params: any) => {
         const value = params[0]?.data
         return `${params[0]?.axisValue ?? 'Unknown'}<br/>Revenue: ${safeCurrency(value, '$')}`
@@ -131,15 +149,15 @@ const renderRevenueChart = () => {
     xAxis: {
       type: 'category',
       data: dates,
-      axisLine: { lineStyle: { color: '#404040' } },
-      axisLabel: { color: '#808080', rotate: 45 }
+      axisLine: { lineStyle: { color: axisLine } },
+      axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
     },
     yAxis: {
       type: 'value',
       name: 'Revenue ($)',
-      axisLine: { lineStyle: { color: '#404040' } },
-      splitLine: { lineStyle: { color: '#2a2a2a' } },
-      axisLabel: { color: '#808080', formatter: (value: number) => `$${value}` }
+      axisLine: { lineStyle: { color: axisLine } },
+      splitLine: { lineStyle: { color: grid } },
+      axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10, formatter: (value: number) => `$${value}` }
     },
     series: [
       {
@@ -186,163 +204,277 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
+  <div class="revenue-view">
     <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <DollarSign class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Revenue Dashboard</h1>
-      </div>
-      <div class="flex items-center gap-3">
-        <button
+    <div class="revenue-view__header">
+      <h1 class="revenue-view__title">Revenue dashboard</h1>
+      <div class="revenue-view__controls">
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="refresh-cw"
+          :loading="loading"
           @click="loadTransactions"
-          :disabled="loading"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
         >
-          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': loading }" />
           Refresh
-        </button>
-        <button
-          @click="exportCSV"
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="download"
           :disabled="transactions.length === 0"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="exportCSV"
         >
-          <Download class="w-4 h-4" />
           Export CSV
-        </button>
+        </Button>
       </div>
     </div>
 
     <!-- Loading state -->
-    <div v-if="loading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading transaction data...</div>
+    <div v-if="loading" class="revenue-view__loading">
+      <span class="revenue-view__loading-text">Loading transaction data...</span>
     </div>
 
     <template v-else>
       <!-- Summary Cards -->
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <DollarSign class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Total Revenue</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ formatCurrency(totalRevenue) }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Last 100 transactions</p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <TrendingUp class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Total Transactions</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ totalTransactions }}</p>
-          <p class="text-xs text-neutral-600 mt-1">All time</p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Clock class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Pending Deliveries</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ pendingDeliveries }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Paid, not delivered</p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <AlertCircle class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Refunds</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ refunds }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Total refunded</p>
-        </div>
+      <div class="revenue-view__stats">
+        <StatCard
+          label="Total revenue"
+          :value="formatCurrency(totalRevenue)"
+          icon="dollar-sign"
+          note="Last 100 transactions"
+        />
+        <StatCard
+          label="Total transactions"
+          :value="totalTransactions"
+          icon="trending-up"
+          note="All time"
+        />
+        <StatCard
+          label="Pending deliveries"
+          :value="pendingDeliveries"
+          icon="clock"
+          note="Paid, not delivered"
+        />
+        <StatCard
+          label="Refunds"
+          :value="refunds"
+          icon="alert-circle"
+          note="Total refunded"
+        />
       </div>
 
       <!-- Revenue Chart -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Revenue Over Time (Last 30 Days)</h2>
-        <div ref="revenueChart" class="h-64"></div>
-      </div>
+      <Panel title="Revenue over time (last 30 days)">
+        <div ref="revenueChart" class="revenue-view__chart-area"></div>
+      </Panel>
 
       <!-- Transaction Table -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-        <div class="px-4 py-3 border-b border-neutral-800 flex items-center justify-between">
-          <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Transaction History</h2>
-          <div class="flex items-center gap-2">
-            <label class="text-xs text-neutral-500">Filter:</label>
-            <select
-              v-model="statusFilter"
-              class="px-2 py-1 text-xs bg-neutral-800 border border-neutral-700 rounded text-neutral-300 focus:outline-none focus:border-oxide-500"
-            >
-              <option value="all">All</option>
-              <option value="delivered">Delivered</option>
-              <option value="paid">Paid</option>
-              <option value="pending">Pending</option>
-              <option value="failed">Failed</option>
-              <option value="refunded">Refunded</option>
-            </select>
-          </div>
-        </div>
+      <Panel title="Transaction history" :flush-body="true">
+        <template #actions>
+          <Select
+            :options="[
+              { value: 'all', label: 'All statuses' },
+              { value: 'delivered', label: 'Delivered' },
+              { value: 'paid', label: 'Paid' },
+              { value: 'pending', label: 'Pending' },
+              { value: 'failed', label: 'Failed' },
+              { value: 'refunded', label: 'Refunded' }
+            ]"
+            v-model="statusFilter"
+            size="sm"
+          />
+        </template>
 
-        <table class="w-full">
-          <thead>
-            <tr class="border-b border-neutral-800 text-left">
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Date</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Player</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Item</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Amount</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-              <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Delivered</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-800">
-            <tr v-if="filteredTransactions.length === 0">
-              <td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">
-                <template v-if="statusFilter !== 'all'">No {{ statusFilter }} transactions found.</template>
-                <template v-else>No transactions yet. Sales will appear here.</template>
-              </td>
-            </tr>
-            <tr
-              v-for="txn in filteredTransactions"
-              :key="txn.id"
-              class="hover:bg-neutral-800/50 transition-colors"
-            >
-              <td class="px-4 py-3">
-                <p class="text-sm text-neutral-300">{{ formatDate(txn.created_at) }}</p>
-              </td>
-              <td class="px-4 py-3">
-                <p class="text-sm font-medium text-neutral-100">{{ txn.player_name || 'Unknown' }}</p>
-                <p class="text-xs text-neutral-500 font-mono">{{ txn.steam_id }}</p>
-              </td>
-              <td class="px-4 py-3">
-                <p class="text-sm text-neutral-300">{{ txn.item_id || '—' }}</p>
-              </td>
-              <td class="px-4 py-3">
-                <p class="text-sm font-medium text-neutral-200">{{ formatCurrency(txn.amount, txn.currency) }}</p>
-              </td>
-              <td class="px-4 py-3">
-                <span
-                  class="text-xs font-medium px-2 py-0.5 rounded-full uppercase"
-                  :class="statusBadgeClass(txn.status)"
-                >
-                  {{ txn.status }}
-                </span>
-              </td>
-              <td class="px-4 py-3">
-                <span
-                  class="text-xs font-medium px-2 py-0.5 rounded-full"
-                  :class="txn.delivered ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
-                >
-                  {{ txn.delivered ? 'Yes' : 'No' }}
-                </span>
-                <p v-if="txn.delivered_at" class="text-xs text-neutral-600 mt-1">
-                  {{ formatDate(txn.delivered_at) }}
-                </p>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+        <div class="revenue-view__table-wrap">
+          <table class="revenue-view__table">
+            <thead>
+              <tr class="revenue-view__thead-row">
+                <th class="revenue-view__th revenue-view__th--left">Date</th>
+                <th class="revenue-view__th revenue-view__th--left">Player</th>
+                <th class="revenue-view__th revenue-view__th--left">Item</th>
+                <th class="revenue-view__th revenue-view__th--right">Amount</th>
+                <th class="revenue-view__th revenue-view__th--left">Status</th>
+                <th class="revenue-view__th revenue-view__th--left">Delivered</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="filteredTransactions.length === 0">
+                <td colspan="6" class="revenue-view__td-empty">
+                  <EmptyState
+                    icon="dollar-sign"
+                    :title="statusFilter !== 'all' ? `No ${statusFilter} transactions` : 'No transactions yet'"
+                    :description="statusFilter !== 'all' ? '' : 'Sales will appear here once customers make purchases.'"
+                  />
+                </td>
+              </tr>
+              <tr
+                v-for="txn in filteredTransactions"
+                :key="txn.id"
+                class="revenue-view__row"
+              >
+                <td class="revenue-view__td">
+                  <p class="revenue-view__cell-text">{{ formatDate(txn.created_at) }}</p>
+                </td>
+                <td class="revenue-view__td">
+                  <p class="revenue-view__cell-primary">{{ txn.player_name || 'Unknown' }}</p>
+                  <p class="revenue-view__cell-mono">{{ txn.steam_id }}</p>
+                </td>
+                <td class="revenue-view__td">
+                  <p class="revenue-view__cell-text">{{ txn.item_id || '—' }}</p>
+                </td>
+                <td class="revenue-view__td revenue-view__td--right">
+                  <p class="revenue-view__cell-primary revenue-view__cell-mono">{{ formatCurrency(txn.amount, txn.currency) }}</p>
+                </td>
+                <td class="revenue-view__td">
+                  <Badge :tone="statusTone(txn.status)" uppercase>{{ txn.status }}</Badge>
+                </td>
+                <td class="revenue-view__td">
+                  <Badge :tone="txn.delivered ? 'online' : 'neutral'">
+                    {{ txn.delivered ? 'Yes' : 'No' }}
+                  </Badge>
+                  <p v-if="txn.delivered_at" class="revenue-view__cell-sub">
+                    {{ formatDate(txn.delivered_at) }}
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </Panel>
     </template>
   </div>
 </template>
+
+<style scoped>
+.revenue-view {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.revenue-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.revenue-view__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.revenue-view__controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.revenue-view__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.revenue-view__loading-text {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.revenue-view__stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+@media (min-width: 1024px) {
+  .revenue-view__stats {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.revenue-view__chart-area {
+  height: 256px;
+}
+
+.revenue-view__table-wrap {
+  overflow-x: auto;
+}
+
+.revenue-view__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+.revenue-view__thead-row {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.revenue-view__th {
+  padding: 12px 16px;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.revenue-view__th--left {
+  text-align: left;
+}
+
+.revenue-view__th--right {
+  text-align: right;
+}
+
+.revenue-view__row {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background var(--dur-fast) var(--ease-standard);
+}
+
+.revenue-view__row:hover {
+  background: var(--surface-hover);
+}
+
+.revenue-view__td {
+  padding: 12px 16px;
+  vertical-align: top;
+}
+
+.revenue-view__td--right {
+  text-align: right;
+}
+
+.revenue-view__td-empty {
+  padding: 0;
+}
+
+.revenue-view__cell-text {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.revenue-view__cell-primary {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.revenue-view__cell-mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.revenue-view__cell-sub {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+</style>
diff --git a/frontend/src/views/admin/WipeAnalyticsView.vue b/frontend/src/views/admin/WipeAnalyticsView.vue
index 20ea48c..2ab5678 100644
--- a/frontend/src/views/admin/WipeAnalyticsView.vue
+++ b/frontend/src/views/admin/WipeAnalyticsView.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, nextTick } from 'vue'
-import { BarChart3, TrendingUp, Clock, Target, Download, Zap } from 'lucide-vue-next'
 import * as echarts from 'echarts'
 import type { ECharts } from 'echarts'
 import { useApi } from '@/composables/useApi'
 import type { WipePerformanceMetrics } from '@/types'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
 
 const api = useApi()
 
@@ -42,9 +47,22 @@ const loadAnalytics = async () => {
   }
 }
 
+function cssVar(name: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
 const renderCharts = () => {
   if (!metrics.value) return
 
+  const accent = cssVar('--accent') || '#CE422B'
+  const grid   = cssVar('--border-subtle') || 'rgba(255,255,255,0.06)'
+  const axisLine = cssVar('--border-default') || '#404040'
+  const labelColor = cssVar('--text-tertiary') || '#808080'
+  const tooltipBg = cssVar('--surface-overlay') || '#1a1a1a'
+  const tooltipBorder = cssVar('--border-default') || '#2a2a2a'
+  const tooltipText = cssVar('--text-primary') || '#e5e5e5'
+  const mono = 'JetBrains Mono, monospace'
+
   // Success Rate Timeline
   if (successRateChart.value) {
     if (successRateChartInstance) {
@@ -62,9 +80,9 @@ const renderCharts = () => {
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' },
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
         formatter: (params: any) => {
           const status = params[0].data === 1 ? 'Success' : 'Failed'
           const color = params[0].data === 1 ? '#10b981' : '#ef4444'
@@ -81,17 +99,19 @@ const renderCharts = () => {
       xAxis: {
         type: 'category',
         data: dates,
-        axisLine: { lineStyle: { color: '#404040' } },
-        axisLabel: { color: '#808080', rotate: 45 }
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
       },
       yAxis: {
         type: 'value',
         min: 0,
         max: 1,
-        axisLine: { lineStyle: { color: '#404040' } },
-        splitLine: { lineStyle: { color: '#2a2a2a' } },
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: grid } },
         axisLabel: {
-          color: '#808080',
+          color: labelColor,
+          fontFamily: mono,
+          fontSize: 10,
           formatter: (value: number) => value === 1 ? 'Success' : 'Failed'
         }
       },
@@ -122,9 +142,9 @@ const renderCharts = () => {
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' }
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 }
       },
       grid: {
         left: '3%',
@@ -136,15 +156,15 @@ const renderCharts = () => {
       xAxis: {
         type: 'category',
         data: ['Day 1', 'Day 2', 'Day 3'],
-        axisLine: { lineStyle: { color: '#404040' } },
-        axisLabel: { color: '#808080' }
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
       },
       yAxis: {
         type: 'value',
         name: 'Avg Players',
-        axisLine: { lineStyle: { color: '#404040' } },
-        splitLine: { lineStyle: { color: '#2a2a2a' } },
-        axisLabel: { color: '#808080' }
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: grid } },
+        axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
       },
       series: [
         {
@@ -157,8 +177,8 @@ const renderCharts = () => {
           ],
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: '#CE422B' },
-              { offset: 1, color: '#8B2E1F' }
+              { offset: 0, color: accent },
+              { offset: 1, color: accent + '99' }
             ])
           },
           barWidth: '50%'
@@ -184,9 +204,9 @@ const renderCharts = () => {
       backgroundColor: 'transparent',
       tooltip: {
         trigger: 'axis',
-        backgroundColor: '#1a1a1a',
-        borderColor: '#2a2a2a',
-        textStyle: { color: '#e5e5e5' },
+        backgroundColor: tooltipBg,
+        borderColor: tooltipBorder,
+        textStyle: { color: tooltipText, fontFamily: mono, fontSize: 11 },
         formatter: (params: any) => {
           return `${params[0].axisValue}<br/>Duration: ${params[0].data} minutes`
         }
@@ -201,15 +221,15 @@ const renderCharts = () => {
       xAxis: {
         type: 'category',
         data: dates,
-        axisLine: { lineStyle: { color: '#404040' } },
-        axisLabel: { color: '#808080', rotate: 45 }
+        axisLine: { lineStyle: { color: axisLine } },
+        axisLabel: { color: labelColor, rotate: 45, fontFamily: mono, fontSize: 10 }
       },
       yAxis: {
         type: 'value',
         name: 'Minutes',
-        axisLine: { lineStyle: { color: '#404040' } },
-        splitLine: { lineStyle: { color: '#2a2a2a' } },
-        axisLabel: { color: '#808080' }
+        axisLine: { lineStyle: { color: axisLine } },
+        splitLine: { lineStyle: { color: grid } },
+        axisLabel: { color: labelColor, fontFamily: mono, fontSize: 10 }
       },
       series: [
         {
@@ -264,128 +284,190 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
+  <div class="wipe-analytics-view">
     <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Zap class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Wipe Analytics</h1>
-      </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="downloadCSV"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg hover:bg-neutral-700 transition-colors text-sm text-neutral-300"
-        >
-          <Download class="w-4 h-4" />
+    <div class="wipe-analytics-view__header">
+      <h1 class="wipe-analytics-view__title">Wipe analytics</h1>
+      <div class="wipe-analytics-view__controls">
+        <Button variant="secondary" size="sm" icon="download" @click="downloadCSV">
           Export CSV
-        </button>
-        <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-          <button
-            v-for="opt in (['6', '12', 'all'] as const)"
-            :key="opt"
-            @click="timeRange = opt"
-            class="px-3 py-2 text-sm font-medium transition-colors"
-            :class="timeRange === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-          >
-            {{ opt === 'all' ? 'All Time' : `Last ${opt} Wipes` }}
-          </button>
-        </div>
+        </Button>
+        <Tabs
+          :items="[
+            { value: '6', label: 'Last 6 wipes' },
+            { value: '12', label: 'Last 12 wipes' },
+            { value: 'all', label: 'All time' }
+          ]"
+          v-model="timeRange"
+          variant="pill"
+        />
       </div>
     </div>
 
     <!-- Loading state -->
-    <div v-if="loading" class="flex items-center justify-center py-12">
-      <div class="text-neutral-500">Loading wipe analytics...</div>
+    <div v-if="loading" class="wipe-analytics-view__loading">
+      <span class="wipe-analytics-view__loading-text">Loading wipe analytics...</span>
     </div>
 
     <template v-else-if="metrics">
       <!-- Insight Cards -->
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Target class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Success Rate</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ safeFixed(metrics?.success_rate_percent, 1) }}%</p>
-          <p class="text-xs text-neutral-600 mt-1">{{ metrics.successful_wipes }}/{{ metrics.total_wipes }} wipes</p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <Clock class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Avg Duration</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ formatDuration(metrics.avg_duration_seconds) }}</p>
-          <p class="text-xs text-neutral-600 mt-1">Per wipe</p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <TrendingUp class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Peak Population</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">Day 1</p>
-          <p class="text-xs text-neutral-600 mt-1">{{ safeFixed(metrics?.population_curve?.day_1_avg, 1) }} avg players</p>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <div class="flex items-center gap-2 mb-2">
-            <BarChart3 class="w-4 h-4 text-neutral-500" />
-            <p class="text-sm text-neutral-400">Optimal Timing</p>
-          </div>
-          <p class="text-2xl font-bold text-neutral-100">{{ metrics.optimal_wipe_day }}</p>
-          <p class="text-xs text-neutral-600 mt-1">{{ metrics.optimal_wipe_hour }}:00</p>
-        </div>
+      <div class="wipe-analytics-view__stats">
+        <StatCard
+          label="Success rate"
+          :value="safeFixed(metrics?.success_rate_percent, 1)"
+          unit="%"
+          icon="target"
+          :note="`${metrics.successful_wipes}/${metrics.total_wipes} wipes`"
+        />
+        <StatCard
+          label="Avg duration"
+          :value="formatDuration(metrics.avg_duration_seconds)"
+          icon="clock"
+          note="Per wipe"
+        />
+        <StatCard
+          label="Peak population"
+          value="Day 1"
+          icon="trending-up"
+          :note="`${safeFixed(metrics?.population_curve?.day_1_avg, 1)} avg players`"
+        />
+        <StatCard
+          label="Optimal timing"
+          :value="metrics.optimal_wipe_day"
+          icon="bar-chart-3"
+          :note="`${metrics.optimal_wipe_hour}:00`"
+        />
       </div>
 
       <!-- Actionable Insight Banner -->
-      <div v-if="metrics.total_wipes > 3" class="bg-oxide-500/10 border border-oxide-500/30 rounded-lg p-4">
-        <div class="flex items-start gap-3">
-          <Target class="w-5 h-5 text-oxide-400 mt-0.5" />
-          <div>
-            <p class="text-sm font-medium text-neutral-100 mb-1">Recommendations</p>
-            <ul class="text-sm text-neutral-300 space-y-1">
-              <li>• Your best wipe day is <span class="font-semibold text-oxide-400">{{ metrics.optimal_wipe_day }} at {{ metrics.optimal_wipe_hour }}:00</span> based on post-wipe population peaks.</li>
-              <li v-if="metrics.population_curve.day_1_avg > metrics.population_curve.day_2_avg * 1.2">
-                • Players peak on Day 1 ({{ safeFixed(metrics?.population_curve?.day_1_avg, 0) }} avg). Consider <span class="font-semibold text-oxide-400">weekly wipes</span> to maintain engagement.
-              </li>
-              <li v-if="metrics.avg_duration_seconds > 600">
-                • Average wipe duration is {{ formatDuration(metrics.avg_duration_seconds) }}. Review pre-wipe commands for optimization opportunities.
-              </li>
-              <li v-if="metrics.success_rate_percent < 95 && metrics.failed_wipes > 0">
-                • {{ metrics.failed_wipes }} wipe(s) failed. Enable rollback protection in wipe profiles.
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
+      <Alert
+        v-if="metrics.total_wipes > 3"
+        tone="accent"
+        title="Recommendations"
+      >
+        <ul class="wipe-analytics-view__recs">
+          <li>Your best wipe day is <strong>{{ metrics.optimal_wipe_day }} at {{ metrics.optimal_wipe_hour }}:00</strong> based on post-wipe population peaks.</li>
+          <li v-if="metrics.population_curve.day_1_avg > metrics.population_curve.day_2_avg * 1.2">
+            Players peak on day 1 ({{ safeFixed(metrics?.population_curve?.day_1_avg, 0) }} avg). Consider <strong>weekly wipes</strong> to maintain engagement.
+          </li>
+          <li v-if="metrics.avg_duration_seconds > 600">
+            Average wipe duration is {{ formatDuration(metrics.avg_duration_seconds) }}. Review pre-wipe commands for optimization opportunities.
+          </li>
+          <li v-if="metrics.success_rate_percent < 95 && metrics.failed_wipes > 0">
+            {{ metrics.failed_wipes }} wipe(s) failed. Enable rollback protection in wipe profiles.
+          </li>
+        </ul>
+      </Alert>
 
       <!-- Charts -->
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Wipe Success Timeline</h2>
-          <div ref="successRateChart" class="h-64"></div>
-        </div>
-
-        <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-          <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Population Curve Post-Wipe</h2>
-          <div ref="populationCurveChart" class="h-64"></div>
-        </div>
+      <div class="wipe-analytics-view__charts">
+        <Panel title="Wipe success timeline">
+          <div ref="successRateChart" class="wipe-analytics-view__chart-area"></div>
+        </Panel>
+        <Panel title="Population curve post-wipe">
+          <div ref="populationCurveChart" class="wipe-analytics-view__chart-area"></div>
+        </Panel>
       </div>
 
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Wipe Duration Trend</h2>
-        <div ref="durationTrendChart" class="h-64"></div>
-      </div>
+      <Panel title="Wipe duration trend">
+        <div ref="durationTrendChart" class="wipe-analytics-view__chart-area"></div>
+      </Panel>
 
       <!-- No Data State -->
-      <div v-if="metrics.total_wipes === 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
-        <div class="text-center">
-          <Zap class="w-12 h-12 text-neutral-700 mx-auto mb-3" />
-          <p class="text-neutral-400 mb-1">No wipe data yet</p>
-          <p class="text-sm text-neutral-600">Wipe analytics will appear after your first scheduled or manual wipe.</p>
-        </div>
-      </div>
+      <Panel v-if="metrics.total_wipes === 0">
+        <EmptyState
+          icon="zap"
+          title="No wipe data yet"
+          description="Wipe analytics will appear after your first scheduled or manual wipe."
+        />
+      </Panel>
     </template>
   </div>
 </template>
+
+<style scoped>
+.wipe-analytics-view {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.wipe-analytics-view__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.wipe-analytics-view__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.wipe-analytics-view__controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.wipe-analytics-view__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.wipe-analytics-view__loading-text {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.wipe-analytics-view__stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+@media (min-width: 1024px) {
+  .wipe-analytics-view__stats {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.wipe-analytics-view__charts {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 1024px) {
+  .wipe-analytics-view__charts {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.wipe-analytics-view__chart-area {
+  height: 256px;
+}
+
+.wipe-analytics-view__recs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.wipe-analytics-view__recs li::before {
+  content: '• ';
+}
+</style>
diff --git a/frontend/src/views/admin/WipeProfilesView.vue b/frontend/src/views/admin/WipeProfilesView.vue
index 2dde382..16f1210 100644
--- a/frontend/src/views/admin/WipeProfilesView.vue
+++ b/frontend/src/views/admin/WipeProfilesView.vue
@@ -3,7 +3,13 @@ import { ref, onMounted } from 'vue'
 import { useWipeStore } from '@/stores/wipe'
 import { useToastStore } from '@/stores/toast'
 import type { WipeProfile } from '@/types'
-import { FileText, Plus, ChevronDown, ChevronRight, Edit2, Trash2, X } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Checkbox from '@/components/ds/forms/Checkbox.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const wipeStore = useWipeStore()
 const toast = useToastStore()
@@ -135,288 +141,489 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <FileText class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Wipe Profiles</h1>
+  <div class="profiles">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Operations</div>
+        <h1 class="page__title">Wipe profiles</h1>
       </div>
-      <button
-        @click="openCreateModal"
-        class="flex items-center gap-2 px-4 py-2 bg-oxide-600 hover:bg-oxide-700 text-white text-sm font-medium rounded-lg transition-colors"
+      <Button icon="plus" @click="openCreateModal">New profile</Button>
+    </div>
+
+    <!-- Empty state -->
+    <Panel v-if="wipeStore.profiles.length === 0">
+      <EmptyState
+        icon="file-text"
+        title="No wipe profiles"
+        description="Create a profile to define pre-wipe and post-wipe behavior."
       >
-        <Plus class="w-4 h-4" />
-        New Profile
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" size="sm" @click="openCreateModal">New profile</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Profiles -->
-    <div v-if="wipeStore.profiles.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-      <FileText class="w-10 h-10 text-neutral-600 mx-auto mb-3" />
-      <h3 class="text-lg font-medium text-neutral-300 mb-1">No Wipe Profiles</h3>
-      <p class="text-sm text-neutral-500">Create a profile to define pre-wipe and post-wipe behavior.</p>
-    </div>
-
-    <div v-else class="space-y-3">
-      <div
+    <!-- Profile list -->
+    <div v-else class="profile-list">
+      <Panel
         v-for="profile in wipeStore.profiles"
         :key="profile.id"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden"
+        :flush-body="true"
       >
-        <div class="flex items-center">
+        <template #title-append>
+          <!-- Nothing — title is injected via Panel slot at row level instead -->
+        </template>
+
+        <!-- Accordion row header -->
+        <div class="profile-row">
           <button
+            type="button"
+            class="profile-toggle"
             @click="toggle(profile.id)"
-            class="flex-1 flex items-center justify-between p-4 text-left hover:bg-neutral-800/50 transition-colors"
           >
-            <div>
-              <h3 class="text-sm font-medium text-neutral-100">{{ profile.profile_name }}</h3>
-              <p class="text-xs text-neutral-500 mt-0.5">{{ profile.description || 'No description' }}</p>
+            <div class="profile-meta">
+              <span class="profile-name">{{ profile.profile_name }}</span>
+              <span class="profile-desc">{{ profile.description || 'No description' }}</span>
             </div>
-            <component :is="expandedId === profile.id ? ChevronDown : ChevronRight" class="w-4 h-4 text-neutral-500" />
+            <span class="profile-chev" :class="expandedId === profile.id && 'profile-chev--open'">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </span>
           </button>
-          <div class="flex items-center gap-1 pr-4">
-            <button
-              @click="openEditModal(profile)"
-              class="p-1.5 text-neutral-500 hover:text-oxide-400 rounded transition-colors"
-              title="Edit"
-            >
-              <Edit2 class="w-4 h-4" />
-            </button>
-            <button
-              @click="deleteProfile(profile)"
-              class="p-1.5 text-neutral-500 hover:text-red-400 rounded transition-colors"
-              title="Delete"
-            >
-              <Trash2 class="w-4 h-4" />
-            </button>
+          <div class="profile-actions">
+            <IconButton icon="pencil" size="sm" label="Edit" @click="openEditModal(profile)" />
+            <IconButton icon="trash-2" variant="danger" size="sm" label="Delete" @click="deleteProfile(profile)" />
           </div>
         </div>
 
-        <div v-if="expandedId === profile.id" class="border-t border-neutral-800 p-4">
-          <div class="grid grid-cols-2 gap-6">
+        <!-- Expanded detail -->
+        <div v-if="expandedId === profile.id" class="profile-detail">
+          <div class="detail-grid">
             <!-- Pre-wipe -->
             <div>
-              <h4 class="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-3">Pre-Wipe</h4>
-              <div class="space-y-2 text-sm">
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Backup before wipe</span>
-                  <span :class="profile.pre_wipe_config.backup_before_wipe ? 'text-green-400' : 'text-neutral-600'">
+              <div class="t-eyebrow detail-eyebrow">Pre-wipe</div>
+              <div class="detail-rows">
+                <div class="detail-kv">
+                  <span class="detail-k">Backup before wipe</span>
+                  <Badge :tone="profile.pre_wipe_config.backup_before_wipe ? 'online' : 'neutral'">
                     {{ profile.pre_wipe_config.backup_before_wipe ? 'Yes' : 'No' }}
-                  </span>
+                  </Badge>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Kick players</span>
-                  <span :class="profile.pre_wipe_config.kick_players_before_wipe ? 'text-green-400' : 'text-neutral-600'">
+                <div class="detail-kv">
+                  <span class="detail-k">Kick players</span>
+                  <Badge :tone="profile.pre_wipe_config.kick_players_before_wipe ? 'online' : 'neutral'">
                     {{ profile.pre_wipe_config.kick_players_before_wipe ? 'Yes' : 'No' }}
-                  </span>
+                  </Badge>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Final save</span>
-                  <span :class="profile.pre_wipe_config.run_final_save ? 'text-green-400' : 'text-neutral-600'">
+                <div class="detail-kv">
+                  <span class="detail-k">Final save</span>
+                  <Badge :tone="profile.pre_wipe_config.run_final_save ? 'online' : 'neutral'">
                     {{ profile.pre_wipe_config.run_final_save ? 'Yes' : 'No' }}
-                  </span>
+                  </Badge>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Discord announce</span>
-                  <span :class="profile.pre_wipe_config.discord_pre_announce ? 'text-green-400' : 'text-neutral-600'">
+                <div class="detail-kv">
+                  <span class="detail-k">Discord announce</span>
+                  <Badge :tone="profile.pre_wipe_config.discord_pre_announce ? 'online' : 'neutral'">
                     {{ profile.pre_wipe_config.discord_pre_announce ? 'Yes' : 'No' }}
-                  </span>
+                  </Badge>
                 </div>
               </div>
             </div>
 
             <!-- Post-wipe -->
             <div>
-              <h4 class="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-3">Post-Wipe</h4>
-              <div class="space-y-2 text-sm">
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Verify server started</span>
-                  <span :class="profile.post_wipe_config.verify_server_started ? 'text-green-400' : 'text-neutral-600'">
+              <div class="t-eyebrow detail-eyebrow">Post-wipe</div>
+              <div class="detail-rows">
+                <div class="detail-kv">
+                  <span class="detail-k">Verify server started</span>
+                  <Badge :tone="profile.post_wipe_config.verify_server_started ? 'online' : 'neutral'">
                     {{ profile.post_wipe_config.verify_server_started ? 'Yes' : 'No' }}
-                  </span>
+                  </Badge>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Verify plugins loaded</span>
-                  <span :class="profile.post_wipe_config.verify_plugins_loaded ? 'text-green-400' : 'text-neutral-600'">
+                <div class="detail-kv">
+                  <span class="detail-k">Verify plugins loaded</span>
+                  <Badge :tone="profile.post_wipe_config.verify_plugins_loaded ? 'online' : 'neutral'">
                     {{ profile.post_wipe_config.verify_plugins_loaded ? 'Yes' : 'No' }}
-                  </span>
+                  </Badge>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Rollback on failure</span>
-                  <span :class="profile.post_wipe_config.rollback_on_failure ? 'text-oxide-400' : 'text-neutral-600'">
+                <div class="detail-kv">
+                  <span class="detail-k">Rollback on failure</span>
+                  <Badge :tone="profile.post_wipe_config.rollback_on_failure ? 'accent' : 'neutral'">
                     {{ profile.post_wipe_config.rollback_on_failure ? 'Yes' : 'No' }}
-                  </span>
+                  </Badge>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-neutral-500">Max restart attempts</span>
-                  <span class="text-neutral-300">{{ profile.post_wipe_config.max_restart_attempts }}</span>
+                <div class="detail-kv">
+                  <span class="detail-k">Max restart attempts</span>
+                  <span class="detail-v-mono">{{ profile.post_wipe_config.max_restart_attempts }}</span>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </Panel>
     </div>
   </div>
 
   <!-- Create / Edit Modal -->
-  <div
-    v-if="showModal"
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
-    @click.self="closeModal"
-  >
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-      <!-- Modal header -->
-      <div class="sticky top-0 bg-neutral-900 border-b border-neutral-800 px-6 py-4 flex items-center justify-between">
-        <h2 class="text-xl font-bold text-neutral-100">{{ editingProfile ? 'Edit Profile' : 'New Profile' }}</h2>
-        <button @click="closeModal" class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors">
-          <X class="w-5 h-5" />
-        </button>
-      </div>
+  <Teleport to="body">
+    <div
+      v-if="showModal"
+      class="modal-backdrop"
+      @click.self="closeModal"
+    >
+      <div class="modal">
+        <!-- Modal header -->
+        <div class="modal__head">
+          <h2 class="modal__title">{{ editingProfile ? 'Edit profile' : 'New profile' }}</h2>
+          <IconButton icon="x" label="Close" @click="closeModal" />
+        </div>
 
-      <div class="p-6 space-y-6">
-        <!-- Basic Info -->
-        <div class="space-y-4">
-          <h3 class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Basic Information</h3>
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">Profile Name</label>
-            <input
+        <div class="modal__body">
+          <!-- Basic info -->
+          <div class="form-section">
+            <div class="t-eyebrow form-section__eyebrow">Basic information</div>
+            <Input
               v-model="form.profile_name"
-              type="text"
-              placeholder="Default Wipe Profile"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+              label="Profile name"
+              placeholder="Default wipe profile"
+              :required="true"
             />
+            <div class="cc-field">
+              <span class="cc-field__label">Description (optional)</span>
+              <textarea
+                v-model="form.description"
+                rows="2"
+                placeholder="Standard wipe configuration for monthly force wipes"
+                class="cc-textarea"
+              />
+            </div>
           </div>
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">Description (optional)</label>
-            <textarea
-              v-model="form.description"
-              rows="2"
-              placeholder="Standard wipe configuration for monthly force wipes"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors resize-none"
-            />
-          </div>
-        </div>
 
-        <!-- Pre-Wipe Config -->
-        <div class="space-y-4">
-          <div class="flex items-center justify-between">
-            <h3 class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Pre-Wipe</h3>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.pre_wipe_config.enabled" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Enabled
-            </label>
-          </div>
-          <div class="grid grid-cols-2 gap-4">
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.pre_wipe_config.backup_before_wipe" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Backup before wipe
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.pre_wipe_config.run_final_save" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Run final save
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.pre_wipe_config.kick_players_before_wipe" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Kick players before wipe
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.pre_wipe_config.discord_pre_announce" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Discord pre-announce
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.pre_wipe_config.pushbullet_notify" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Pushbullet notify
-            </label>
-          </div>
-          <div v-if="form.pre_wipe_config.kick_players_before_wipe">
-            <label class="block text-sm font-medium text-neutral-300 mb-2">Kick Message</label>
-            <input
+          <!-- Pre-wipe config -->
+          <div class="form-section">
+            <div class="form-section__row">
+              <div class="t-eyebrow">Pre-wipe</div>
+              <Checkbox
+                v-model="form.pre_wipe_config.enabled"
+                label="Enabled"
+              />
+            </div>
+            <div class="check-grid">
+              <Checkbox
+                v-model="form.pre_wipe_config.backup_before_wipe"
+                label="Backup before wipe"
+              />
+              <Checkbox
+                v-model="form.pre_wipe_config.run_final_save"
+                label="Run final save"
+              />
+              <Checkbox
+                v-model="form.pre_wipe_config.kick_players_before_wipe"
+                label="Kick players before wipe"
+              />
+              <Checkbox
+                v-model="form.pre_wipe_config.discord_pre_announce"
+                label="Discord pre-announce"
+              />
+              <Checkbox
+                v-model="form.pre_wipe_config.pushbullet_notify"
+                label="Pushbullet notify"
+              />
+            </div>
+            <Input
+              v-if="form.pre_wipe_config.kick_players_before_wipe"
               v-model="form.pre_wipe_config.kick_message"
-              type="text"
+              label="Kick message"
               placeholder="Server is wiping, back soon!"
-              class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
             />
           </div>
-        </div>
 
-        <!-- Post-Wipe Config -->
-        <div class="space-y-4">
-          <div class="flex items-center justify-between">
-            <h3 class="text-xs font-medium text-neutral-400 uppercase tracking-wider">Post-Wipe</h3>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.post_wipe_config.enabled" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Enabled
-            </label>
-          </div>
-          <div class="grid grid-cols-2 gap-4">
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.post_wipe_config.verify_server_started" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Verify server started
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.post_wipe_config.verify_correct_map" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Verify correct map
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.post_wipe_config.verify_plugins_loaded" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Verify plugins loaded
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.post_wipe_config.verify_player_slots_open" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Verify player slots open
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.post_wipe_config.rollback_on_failure" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Rollback on failure
-            </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input v-model="form.post_wipe_config.discord_post_announce" type="checkbox" class="w-4 h-4 rounded border-neutral-700 bg-neutral-800 text-oxide-600 focus:ring-2 focus:ring-oxide-500/50" />
-              Discord post-announce
-            </label>
-          </div>
-          <div class="grid grid-cols-2 gap-4">
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Max Restart Attempts</label>
-              <input
-                v-model.number="form.post_wipe_config.max_restart_attempts"
-                type="number"
-                min="1"
-                max="10"
-                class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+          <!-- Post-wipe config -->
+          <div class="form-section">
+            <div class="form-section__row">
+              <div class="t-eyebrow">Post-wipe</div>
+              <Checkbox
+                v-model="form.post_wipe_config.enabled"
+                label="Enabled"
               />
             </div>
-            <div>
-              <label class="block text-sm font-medium text-neutral-300 mb-2">Health Check Timeout (seconds)</label>
-              <input
-                v-model.number="form.post_wipe_config.health_check_timeout_seconds"
-                type="number"
-                min="30"
-                max="600"
-                class="w-full px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+            <div class="check-grid">
+              <Checkbox
+                v-model="form.post_wipe_config.verify_server_started"
+                label="Verify server started"
               />
+              <Checkbox
+                v-model="form.post_wipe_config.verify_correct_map"
+                label="Verify correct map"
+              />
+              <Checkbox
+                v-model="form.post_wipe_config.verify_plugins_loaded"
+                label="Verify plugins loaded"
+              />
+              <Checkbox
+                v-model="form.post_wipe_config.verify_player_slots_open"
+                label="Verify player slots open"
+              />
+              <Checkbox
+                v-model="form.post_wipe_config.rollback_on_failure"
+                label="Rollback on failure"
+              />
+              <Checkbox
+                v-model="form.post_wipe_config.discord_post_announce"
+                label="Discord post-announce"
+              />
+            </div>
+            <div class="number-grid">
+              <div class="cc-field">
+                <span class="cc-field__label">Max restart attempts</span>
+                <span class="cc-input cc-input--mono">
+                  <input
+                    v-model.number="form.post_wipe_config.max_restart_attempts"
+                    type="number"
+                    min="1"
+                    max="10"
+                  />
+                </span>
+              </div>
+              <div class="cc-field">
+                <span class="cc-field__label">Health check timeout (s)</span>
+                <span class="cc-input cc-input--mono">
+                  <input
+                    v-model.number="form.post_wipe_config.health_check_timeout_seconds"
+                    type="number"
+                    min="30"
+                    max="600"
+                  />
+                </span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- Modal footer -->
-      <div class="sticky bottom-0 bg-neutral-900 border-t border-neutral-800 px-6 py-4 flex items-center justify-end gap-3">
-        <button
-          @click="closeModal"
-          class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          Cancel
-        </button>
-        <button
-          @click="saveProfile"
-          :disabled="isSaving"
-          class="px-6 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 rounded-lg transition-colors"
-        >
-          {{ isSaving ? 'Saving...' : (editingProfile ? 'Save Changes' : 'Create Profile') }}
-        </button>
+        <!-- Modal footer -->
+        <div class="modal__foot">
+          <Button variant="secondary" @click="closeModal">Cancel</Button>
+          <Button
+            :loading="isSaving"
+            @click="saveProfile"
+          >
+            {{ editingProfile ? 'Save changes' : 'Create profile' }}
+          </Button>
+        </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
+
+<style scoped>
+.profiles {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Page head */
+.page__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.page__title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin-top: 4px;
+}
+
+/* Profile list */
+.profile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Profile row inside panel */
+.profile-row {
+  display: flex;
+  align-items: center;
+}
+.profile-toggle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+  gap: 12px;
+  transition: var(--transition-colors);
+}
+.profile-toggle:hover { background: var(--surface-hover); }
+.profile-meta { display: flex; flex-direction: column; gap: 2px; }
+.profile-name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.profile-desc {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+.profile-chev {
+  color: var(--text-tertiary);
+  transition: transform var(--dur-base) var(--ease-standard);
+  display: flex;
+}
+.profile-chev--open { transform: rotate(180deg); }
+.profile-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-right: 12px;
+}
+
+/* Expanded detail */
+.profile-detail {
+  border-top: 1px solid var(--border-subtle);
+  padding: 16px;
+}
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+}
+.detail-eyebrow { margin-bottom: 10px; }
+.detail-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.detail-kv {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.detail-k {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+.detail-v-mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+/* Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  padding: 16px;
+}
+.modal {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,.45));
+  width: 100%;
+  max-width: 660px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.modal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex: none;
+}
+.modal__title {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.modal__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.modal__foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--border-subtle);
+  flex: none;
+}
+
+/* Form sections */
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.form-section__eyebrow { margin-bottom: 4px; }
+.form-section__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.check-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.number-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+/* Textarea token-based */
+.cc-textarea {
+  width: 100%;
+  padding: 9px 11px;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  resize: vertical;
+  outline: 0;
+  transition: var(--transition-colors);
+  box-sizing: border-box;
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+@media (max-width: 640px) {
+  .detail-grid { grid-template-columns: 1fr; }
+  .check-grid { grid-template-columns: 1fr; }
+  .number-grid { grid-template-columns: 1fr; }
+}
+</style>
diff --git a/frontend/src/views/admin/WipesView.vue b/frontend/src/views/admin/WipesView.vue
index 8a53cca..2371465 100644
--- a/frontend/src/views/admin/WipesView.vue
+++ b/frontend/src/views/admin/WipesView.vue
@@ -4,9 +4,15 @@ import { useWipeStore } from '@/stores/wipe'
 import { useServerStore } from '@/stores/server'
 import { useToastStore } from '@/stores/toast'
 import { useApi } from '@/composables/useApi'
-import { RefreshCw, Zap, Clock, AlertTriangle, Loader2, Check, X } from 'lucide-vue-next'
 import { RouterLink } from 'vue-router'
 import { safeDate } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const wipeStore = useWipeStore()
 const server = useServerStore()
@@ -65,10 +71,32 @@ async function toggleSchedule(scheduleId: string, currentlyActive: boolean) {
   }
 }
 
+const WIPE_TYPE_OPTIONS = [
+  { value: 'map', label: 'Map' },
+  { value: 'blueprint', label: 'Blueprint' },
+  { value: 'full', label: 'Full' },
+]
+
+function profileOptions() {
+  const opts: { value: string; label: string }[] = [{ value: '', label: 'No profile' }]
+  for (const p of wipeStore.profiles) {
+    opts.push({ value: p.id, label: p.profile_name })
+  }
+  return opts
+}
+
+function wipeTone(status: string): 'online' | 'offline' | 'warn' | 'neutral' {
+  if (status === 'success') return 'online'
+  if (status === 'failed' || status === 'rolled_back') return 'offline'
+  if (status === 'wiping' || status === 'pre_wipe' || status === 'post_wipe') return 'warn'
+  return 'neutral'
+}
+
 onMounted(async () => {
   await wipeStore.fetchProfiles()
-  if (wipeStore.profiles.length > 0 && wipeStore.profiles[0]) {
-    selectedProfileId.value = wipeStore.profiles[0].id
+  const first = wipeStore.profiles[0]
+  if (first) {
+    selectedProfileId.value = first.id
   }
   wipeStore.fetchSchedules()
   wipeStore.fetchHistory()
@@ -76,220 +104,413 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <RefreshCw class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Auto-Wiper</h1>
+  <div class="wipes">
+    <!-- Page head -->
+    <div class="page__head">
+      <div>
+        <div class="t-eyebrow">Operations</div>
+        <h1 class="page__title">Auto-wiper</h1>
       </div>
-      <div class="flex gap-2">
-        <RouterLink
-          to="/wipes/profiles"
-          class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          Profiles
+      <div class="page__actions">
+        <RouterLink to="/wipes/profiles">
+          <Button variant="secondary" size="sm" icon="file-text">Profiles</Button>
         </RouterLink>
-        <RouterLink
-          to="/wipes/calendar"
-          class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          Calendar
+        <RouterLink to="/wipes/calendar">
+          <Button variant="secondary" size="sm" icon="calendar">Calendar</Button>
         </RouterLink>
-        <RouterLink
-          to="/wipes/history"
-          class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          History
+        <RouterLink to="/wipes/history">
+          <Button variant="secondary" size="sm" icon="clock">History</Button>
         </RouterLink>
       </div>
     </div>
 
-    <!-- Manual Trigger -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Manual Wipe</h2>
-      <div v-if="wipeStore.profiles.length === 0" class="mb-4 flex items-center gap-2 text-sm text-yellow-400 bg-yellow-500/10 border border-yellow-500/20 rounded-lg px-4 py-2">
-        <AlertTriangle class="w-4 h-4 shrink-0" />
-        No wipe profiles found. <RouterLink to="/wipes/profiles" class="underline hover:text-yellow-300 ml-1">Create a profile</RouterLink> before triggering a wipe.
-      </div>
-      <div class="flex items-end gap-4">
-        <div>
-          <label class="block text-xs text-neutral-500 mb-2">Wipe Type</label>
-          <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
-            <button
-              v-for="opt in (['map', 'blueprint', 'full'] as const)"
-              :key="opt"
-              @click="triggerType = opt"
-              class="px-4 py-2 text-sm font-medium transition-colors capitalize"
-              :class="triggerType === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
+    <!-- Manual trigger -->
+    <Panel title="Manual wipe" subtitle="Trigger an immediate wipe outside the schedule">
+      <div class="trigger-body">
+        <Alert
+          v-if="wipeStore.profiles.length === 0"
+          tone="warn"
+          title="No wipe profiles"
+        >
+          <template #default>
+            Create a profile before triggering a wipe.
+          </template>
+          <template #actions>
+            <RouterLink to="/wipes/profiles">
+              <Button variant="outline" size="sm" icon="plus">New profile</Button>
+            </RouterLink>
+          </template>
+        </Alert>
+
+        <div class="trigger-row">
+          <!-- Wipe type segment -->
+          <div class="trigger-field">
+            <div class="cc-field__label">Wipe type</div>
+            <div class="type-seg">
+              <button
+                v-for="opt in WIPE_TYPE_OPTIONS"
+                :key="opt.value"
+                type="button"
+                class="type-seg__btn"
+                :class="triggerType === opt.value && 'type-seg__btn--active'"
+                @click="triggerType = opt.value as 'map' | 'blueprint' | 'full'"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Profile select -->
+          <Select
+            label="Profile"
+            :options="profileOptions()"
+            :disabled="wipeStore.profiles.length === 0"
+            :model-value="selectedProfileId"
+            @update:model-value="selectedProfileId = $event ?? ''"
+          />
+
+          <div class="trigger-actions">
+            <Button
+              variant="secondary"
+              size="md"
+              icon="flask-conical"
+              :loading="dryRunLoading"
+              :disabled="wipeStore.profiles.length === 0"
+              @click="triggerDryRun"
             >
-              {{ opt }}
-            </button>
+              Dry run
+            </Button>
+            <Button
+              variant="danger"
+              size="md"
+              icon="zap"
+              :loading="triggerLoading"
+              :disabled="triggerLoading || wipeStore.profiles.length === 0 || server.connection?.connection_status !== 'connected'"
+              @click="triggerWipe"
+            >
+              Trigger wipe
+            </Button>
           </div>
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-2">Profile</label>
-          <select
-            v-model="selectedProfileId"
-            :disabled="wipeStore.profiles.length === 0"
-            class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors disabled:opacity-50"
-          >
-            <option value="">No profile</option>
-            <option v-for="profile in wipeStore.profiles" :key="profile.id" :value="profile.id">
-              {{ profile.profile_name }}
-            </option>
-          </select>
-        </div>
-        <button
-          @click="triggerDryRun"
-          :disabled="dryRunLoading || wipeStore.profiles.length === 0"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 border border-neutral-700 rounded-lg transition-colors"
-        >
-          <Loader2 v-if="dryRunLoading" class="w-4 h-4 animate-spin" />
-          <AlertTriangle v-else class="w-4 h-4" />
-          Dry Run
-        </button>
-        <button
-          @click="triggerWipe"
-          :disabled="triggerLoading || wipeStore.profiles.length === 0 || server.connection?.connection_status !== 'connected'"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-red-600 hover:bg-red-700 disabled:opacity-40 disabled:cursor-not-allowed text-white rounded-lg transition-colors"
-        >
-          <Loader2 v-if="triggerLoading" class="w-4 h-4 animate-spin" />
-          <Zap v-else class="w-4 h-4" />
-          Trigger Wipe
-        </button>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Dry-Run Results -->
-    <div v-if="dryRunResult" class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Dry-Run Results</h2>
-        <div class="flex items-center gap-3">
-          <span class="text-xs text-neutral-500">
-            Estimated: {{ Math.round(dryRunResult.estimated_duration_seconds) }}s
-          </span>
-          <button
-            @click="dryRunResult = null"
-            class="p-1 text-neutral-500 hover:text-neutral-300 rounded transition-colors"
-          >
-            <X class="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <!-- Dry-run results -->
+    <Panel
+      v-if="dryRunResult"
+      title="Dry-run results"
+      :subtitle="`Estimated duration: ${Math.round(dryRunResult.estimated_duration_seconds)}s`"
+    >
+      <template #actions>
+        <Button variant="ghost" size="sm" icon="x" @click="dryRunResult = null">Dismiss</Button>
+      </template>
+      <div class="dry-run-grid">
         <div>
-          <p class="text-xs font-medium text-red-400 mb-2 flex items-center gap-1.5">
-            <X class="w-3.5 h-3.5" />
-            Would Delete ({{ dryRunResult.would_delete.length }})
-          </p>
-          <div v-if="dryRunResult.would_delete.length === 0" class="text-xs text-neutral-600 italic">Nothing to delete</div>
-          <ul v-else class="space-y-1">
+          <div class="dry-run__head dry-run__head--delete">
+            Would delete ({{ dryRunResult.would_delete.length }})
+          </div>
+          <div v-if="dryRunResult.would_delete.length === 0" class="dry-run__empty">
+            Nothing to delete
+          </div>
+          <ul v-else class="dry-run__list">
             <li
               v-for="item in dryRunResult.would_delete"
               :key="item"
-              class="text-xs font-mono text-neutral-400 bg-red-500/5 border border-red-500/10 rounded px-2 py-1"
+              class="dry-run__item dry-run__item--delete"
             >{{ item }}</li>
           </ul>
         </div>
         <div>
-          <p class="text-xs font-medium text-green-400 mb-2 flex items-center gap-1.5">
-            <Check class="w-3.5 h-3.5" />
-            Would Preserve ({{ dryRunResult.would_preserve.length }})
-          </p>
-          <div v-if="dryRunResult.would_preserve.length === 0" class="text-xs text-neutral-600 italic">Nothing preserved</div>
-          <ul v-else class="space-y-1">
+          <div class="dry-run__head dry-run__head--keep">
+            Would preserve ({{ dryRunResult.would_preserve.length }})
+          </div>
+          <div v-if="dryRunResult.would_preserve.length === 0" class="dry-run__empty">
+            Nothing preserved
+          </div>
+          <ul v-else class="dry-run__list">
             <li
               v-for="item in dryRunResult.would_preserve"
               :key="item"
-              class="text-xs font-mono text-neutral-400 bg-green-500/5 border border-green-500/10 rounded px-2 py-1"
+              class="dry-run__item dry-run__item--keep"
             >{{ item }}</li>
           </ul>
         </div>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Upcoming Schedules -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Scheduled Wipes</h2>
-      <div v-if="wipeStore.schedules.length === 0" class="text-sm text-neutral-500 py-4 text-center">
-        No wipe schedules configured. Create a profile and schedule to automate wipes.
-      </div>
-      <div v-else class="space-y-3">
+    <!-- Scheduled wipes -->
+    <Panel title="Scheduled wipes" subtitle="Active cron schedules">
+      <EmptyState
+        v-if="wipeStore.schedules.length === 0"
+        icon="calendar-clock"
+        title="No schedules"
+        description="Create a profile and schedule to automate wipes."
+      />
+      <div v-else class="sched-list">
         <div
           v-for="schedule in wipeStore.schedules"
           :key="schedule.id"
-          class="flex items-center justify-between p-3 bg-neutral-800/50 rounded-lg"
+          class="sched-row"
         >
-          <div class="flex items-center gap-3">
-            <Clock class="w-4 h-4 text-neutral-500" />
-            <div>
-              <p class="text-sm font-medium text-neutral-200">{{ schedule.schedule_name }}</p>
-              <p class="text-xs text-neutral-500">
-                {{ schedule.wipe_type }} wipe &middot; {{ schedule.cron_expression }} ({{ schedule.timezone }})
-              </p>
+          <div class="sched-info">
+            <div class="sched-name">{{ schedule.schedule_name }}</div>
+            <div class="sched-meta">
+              {{ schedule.wipe_type }} wipe
+              &middot;
+              <span class="mono">{{ schedule.cron_expression }}</span>
+              &middot; {{ schedule.timezone }}
             </div>
           </div>
-          <div class="flex items-center gap-3">
-            <span
-              class="text-xs font-medium px-2 py-0.5 rounded-full"
-              :class="schedule.is_active ? 'bg-green-500/10 text-green-400' : 'bg-neutral-700/50 text-neutral-400'"
-            >
+          <div class="sched-controls">
+            <Badge :tone="schedule.is_active ? 'online' : 'neutral'">
               {{ schedule.is_active ? 'Active' : 'Paused' }}
-            </span>
-            <button
-              @click="toggleSchedule(schedule.id, schedule.is_active)"
+            </Badge>
+            <Switch
+              :model-value="schedule.is_active"
               :disabled="scheduleToggling === schedule.id"
-              class="w-9 h-5 rounded-full transition-colors disabled:opacity-40 cursor-pointer"
-              :class="schedule.is_active ? 'bg-oxide-500' : 'bg-neutral-700'"
-              :title="schedule.is_active ? 'Pause schedule' : 'Activate schedule'"
-            >
-              <Loader2 v-if="scheduleToggling === schedule.id" class="w-3.5 h-3.5 text-white animate-spin mx-auto" />
-              <div
-                v-else
-                class="w-4 h-4 bg-white rounded-full shadow transition-transform mt-0.5"
-                :class="schedule.is_active ? 'translate-x-4.5' : 'translate-x-0.5'"
-              />
-            </button>
+              @update:model-value="toggleSchedule(schedule.id, schedule.is_active)"
+            />
           </div>
         </div>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Recent History -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Recent Wipes</h2>
-        <RouterLink to="/wipes/history" class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors">
-          View All
+    <!-- Recent history -->
+    <Panel :flush-body="true" title="Recent wipes">
+      <template #actions>
+        <RouterLink to="/wipes/history">
+          <Button variant="ghost" size="sm">View all</Button>
         </RouterLink>
-      </div>
-      <div v-if="wipeStore.history.length === 0" class="text-sm text-neutral-500 py-4 text-center">
-        No wipe history yet.
-      </div>
-      <div v-else class="space-y-2">
-        <div
-          v-for="wipe in wipeStore.history.slice(0, 5)"
-          :key="wipe.id"
-          class="flex items-center justify-between p-3 bg-neutral-800/50 rounded-lg"
-        >
-          <div>
-            <p class="text-sm text-neutral-200">{{ wipe.wipe_type }} wipe</p>
-            <p class="text-xs text-neutral-500">{{ wipe.trigger_type }} &middot; {{ safeDate(wipe.started_at, 'Pending') }}</p>
-          </div>
-          <span
-            class="text-xs font-medium px-2 py-0.5 rounded-full"
-            :class="{
-              'bg-green-500/10 text-green-400': wipe.status === 'success',
-              'bg-red-500/10 text-red-400': wipe.status === 'failed' || wipe.status === 'rolled_back',
-              'bg-yellow-500/10 text-yellow-400': wipe.status === 'wiping' || wipe.status === 'pre_wipe' || wipe.status === 'post_wipe',
-              'bg-neutral-700/50 text-neutral-400': wipe.status === 'pending',
-            }"
+      </template>
+
+      <EmptyState
+        v-if="wipeStore.history.length === 0"
+        icon="trash-2"
+        title="No wipe history"
+        description="Wipes will appear here once they run."
+      />
+
+      <table v-else class="cc-table">
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Trigger</th>
+            <th>Started</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="wipe in wipeStore.history.slice(0, 5)"
+            :key="wipe.id"
           >
-            {{ wipe.status }}
-          </span>
-        </div>
-      </div>
-    </div>
+            <td class="td-primary">{{ wipe.wipe_type }} wipe</td>
+            <td>{{ wipe.trigger_type }}</td>
+            <td class="td-mono">{{ safeDate(wipe.started_at, 'Pending') }}</td>
+            <td>
+              <Badge :tone="wipeTone(wipe.status)">{{ wipe.status }}</Badge>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.wipes {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* Page head */
+.page__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.page__title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin-top: 4px;
+}
+.page__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.page__actions a { text-decoration: none; }
+
+/* Trigger body */
+.trigger-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.trigger-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.trigger-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.trigger-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* Wipe type segment */
+.type-seg {
+  display: flex;
+  background: var(--surface-inset);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+}
+.type-seg__btn {
+  height: var(--control-h-md);
+  padding: 0 14px;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.type-seg__btn:hover { color: var(--text-primary); background: var(--surface-hover); }
+.type-seg__btn--active {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+/* Dry-run results */
+.dry-run-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+.dry-run__head {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.dry-run__head--delete { color: var(--status-offline); }
+.dry-run__head--keep { color: var(--status-online); }
+.dry-run__empty {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  font-style: italic;
+}
+.dry-run__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.dry-run__item {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+}
+.dry-run__item--delete {
+  background: var(--status-offline-soft);
+  color: var(--text-secondary);
+  box-shadow: inset 0 0 0 1px var(--status-offline-border);
+}
+.dry-run__item--keep {
+  background: var(--status-online-soft);
+  color: var(--text-secondary);
+  box-shadow: inset 0 0 0 1px var(--status-online-border);
+}
+
+/* Schedule list */
+.sched-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.sched-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 2px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.sched-row:last-child { border-bottom: 0; }
+.sched-info { flex: 1; min-width: 0; }
+.sched-name {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.sched-meta {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: 2px;
+}
+.sched-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: none;
+}
+.mono { font-family: var(--font-mono); }
+
+/* Table */
+.cc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.cc-table thead tr {
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-inset);
+}
+.cc-table th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+.cc-table tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.cc-table tbody tr:last-child { border-bottom: 0; }
+.cc-table tbody tr:hover { background: var(--surface-hover); }
+.cc-table td {
+  padding: 11px 16px;
+  color: var(--text-secondary);
+  vertical-align: middle;
+}
+.td-primary { color: var(--text-primary); font-weight: 500; }
+.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+@media (max-width: 768px) {
+  .dry-run-grid { grid-template-columns: 1fr; }
+  .trigger-row { flex-direction: column; align-items: stretch; }
+  .trigger-actions { margin-left: 0; }
+}
+</style>

From 376ed9a98d1403f11423a090857e0347566fe23e Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 02:46:16 -0400
Subject: [PATCH 4/7] feat(redesign): re-skin plugin-config editors + Loot
 Builder to DS (Phase D batch 3)

10 plugin-config views (LootBuilder, RaidableBases, Teleport, Kits, Gather, AutoDoors, FurnaceSplitter, BetterChat, TimedExecute, PluginConfigs landing) + 5 child components (loot sidebar/item-editor/group-editor/item-picker, teleport PermissionGroupEditor) re-skinned onto DS components + tokens. All config logic preserved (path-traversal get/set, apply-to-server, import-from-server, CRUD, multiplier logic, per-store status derivation). Presentation-only. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/loot/LootContainerSidebar.vue  |  168 +-
 .../src/components/loot/LootGroupEditor.vue   |  264 ++-
 .../src/components/loot/LootItemEditor.vue    |  281 ++-
 .../src/components/loot/LootItemPicker.vue    |  244 ++-
 .../teleport/PermissionGroupEditor.vue        |  160 +-
 frontend/src/views/admin/AutoDoorsView.vue    |  640 +++----
 frontend/src/views/admin/BetterChatView.vue   | 1094 ++++++------
 .../src/views/admin/FurnaceSplitterView.vue   |  451 +++--
 .../src/views/admin/GatherManagerView.vue     |  522 +++---
 frontend/src/views/admin/KitsView.vue         |  959 +++++-----
 frontend/src/views/admin/LootBuilderView.vue  |  659 +++++--
 .../src/views/admin/PluginConfigsView.vue     |  220 ++-
 .../src/views/admin/RaidableBasesView.vue     | 1588 ++++++++---------
 .../src/views/admin/TeleportConfigView.vue    |  964 +++++-----
 frontend/src/views/admin/TimedExecuteView.vue |  782 ++++----
 15 files changed, 4990 insertions(+), 4006 deletions(-)

diff --git a/frontend/src/components/loot/LootContainerSidebar.vue b/frontend/src/components/loot/LootContainerSidebar.vue
index 3a81c61..90b303d 100644
--- a/frontend/src/components/loot/LootContainerSidebar.vue
+++ b/frontend/src/components/loot/LootContainerSidebar.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustContainers, containerCategories } from '@/data/rust-containers'
-import { Search, Box, Cylinder, Shield, Users, HelpCircle } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 
 const props = defineProps<{
   lootTable: Record<string, any>
@@ -14,20 +15,21 @@ const emit = defineEmits<{
 
 const searchQuery = ref('')
 
-const categoryIcons: Record<string, any> = {
-  crates: Box,
-  barrels: Cylinder,
-  military: Shield,
-  npcs: Users,
-  other: HelpCircle,
+// Map container categories to DS icon names
+const categoryIcons: Record<string, string> = {
+  crates: 'box',
+  barrels: 'flask-conical',
+  military: 'shield',
+  npcs: 'users',
+  other: 'info',
 }
 
 const categoryLabels: Record<string, string> = {
-  crates: 'CRATES',
-  barrels: 'BARRELS',
-  military: 'MILITARY',
+  crates: 'Crates',
+  barrels: 'Barrels',
+  military: 'Military',
   npcs: 'NPCs',
-  other: 'OTHER',
+  other: 'Other',
 }
 
 const filteredContainers = computed(() => {
@@ -56,48 +58,136 @@ function isConfigured(prefab: string): boolean {
 </script>
 
 <template>
-  <div class="w-64 shrink-0 bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden flex flex-col">
+  <aside class="lcs-root">
     <!-- Search -->
-    <div class="p-3 border-b border-neutral-800">
-      <div class="relative">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          placeholder="Search containers..."
-          class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200 placeholder-neutral-500"
-        />
-      </div>
+    <div class="lcs-search">
+      <DsInput
+        v-model="searchQuery"
+        icon="search"
+        placeholder="Search containers…"
+        size="sm"
+      />
     </div>
 
-    <!-- Container List -->
-    <div class="flex-1 overflow-y-auto py-2">
+    <!-- Container list -->
+    <div class="lcs-list">
       <template v-for="(containers, category) in groupedContainers" :key="category">
-        <div class="px-3 pt-3 pb-1">
-          <div class="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-widest text-neutral-500">
-            <component :is="categoryIcons[category]" class="w-3 h-3" />
-            {{ categoryLabels[category] || category }}
-          </div>
+        <!-- Category heading -->
+        <div class="lcs-cat">
+          <Icon
+            :name="categoryIcons[category] ?? 'box'"
+            :size="12"
+            class="lcs-cat__icon"
+          />
+          <span class="lcs-cat__label">{{ categoryLabels[category] ?? category }}</span>
         </div>
+
+        <!-- Container rows -->
         <button
           v-for="c in containers"
           :key="c.prefab"
+          class="lcs-item"
+          :class="{ 'lcs-item--active': selected === c.prefab }"
           @click="emit('select', c.prefab)"
-          class="w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 transition-colors"
-          :class="selected === c.prefab
-            ? 'bg-oxide-500/10 text-oxide-400'
-            : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
         >
-          <span class="truncate flex-1">{{ c.name }}</span>
-          <span
-            v-if="isConfigured(c.prefab)"
-            class="w-1.5 h-1.5 rounded-full bg-oxide-500 shrink-0"
-          />
+          <span class="lcs-item__name">{{ c.name }}</span>
+          <span v-if="isConfigured(c.prefab)" class="lcs-item__dot" />
         </button>
       </template>
 
-      <div v-if="Object.keys(groupedContainers).length === 0" class="px-3 py-6 text-center text-neutral-500 text-sm">
+      <div v-if="Object.keys(groupedContainers).length === 0" class="lcs-empty">
         No containers match
       </div>
     </div>
-  </div>
+  </aside>
 </template>
+
+<style scoped>
+.lcs-root {
+  width: 240px;
+  flex: none;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.lcs-search {
+  padding: 10px 10px 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.lcs-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+/* Category heading */
+.lcs-cat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px 4px;
+}
+.lcs-cat__icon {
+  color: var(--text-muted);
+  flex: none;
+}
+.lcs-cat__label {
+  font-size: var(--text-2xs, 10px);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  color: var(--text-muted);
+}
+
+/* Container row */
+.lcs-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-align: left;
+  transition: var(--transition-colors);
+  border-radius: 0;
+}
+.lcs-item:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+.lcs-item--active {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+}
+.lcs-item__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lcs-item__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex: none;
+}
+
+.lcs-empty {
+  padding: 20px 12px;
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+</style>
diff --git a/frontend/src/components/loot/LootGroupEditor.vue b/frontend/src/components/loot/LootGroupEditor.vue
index 09a6551..6dfa862 100644
--- a/frontend/src/components/loot/LootGroupEditor.vue
+++ b/frontend/src/components/loot/LootGroupEditor.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustItems } from '@/data/rust-items'
-import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 import type { LootGroupProfile } from '@/types'
 
 const props = defineProps<{
@@ -65,120 +71,260 @@ function updateGroupItemField(groupName: string, shortname: string, field: strin
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Add Group -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex gap-2">
-        <input
+  <div class="lge-root">
+    <!-- Add group panel -->
+    <Panel>
+      <div class="lge-add">
+        <DsInput
           v-model="newGroupName"
-          placeholder="New group name..."
-          class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200"
+          placeholder="New group name…"
           @keydown.enter="addGroup"
         />
-        <button
-          @click="addGroup"
+        <Button
+          icon="plus"
           :disabled="!newGroupName.trim()"
-          class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+          @click="addGroup"
         >
-          <Plus class="w-4 h-4" />
-          Add Group
-        </button>
+          Add group
+        </Button>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Group List -->
-    <div v-if="groupEntries.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm">
-      No loot groups defined. Groups let you create reusable item pools that can be assigned to multiple containers.
-    </div>
+    <!-- Empty state -->
+    <Panel v-if="groupEntries.length === 0">
+      <EmptyState
+        icon="layers"
+        title="No loot groups"
+        description="Groups let you create reusable item pools that can be assigned to multiple containers."
+      />
+    </Panel>
 
+    <!-- Group cards -->
     <div
       v-for="entry in groupEntries"
       :key="entry.name"
-      class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden"
+      class="lge-card"
     >
-      <!-- Group Header -->
+      <!-- Group header -->
       <button
+        class="lge-card__head"
         @click="toggleGroup(entry.name)"
-        class="w-full flex items-center justify-between px-4 py-3 hover:bg-neutral-800/50 transition-colors"
       >
-        <div class="flex items-center gap-3">
-          <component
-            :is="expandedGroup === entry.name ? ChevronDown : ChevronRight"
-            class="w-4 h-4 text-neutral-500"
-          />
-          <span class="text-neutral-200 font-medium">{{ entry.name }}</span>
-          <span class="text-xs text-neutral-500">{{ entry.itemCount }} items</span>
-        </div>
-        <button
+        <Icon
+          :name="expandedGroup === entry.name ? 'chevron-down' : 'chevron-right'"
+          :size="16"
+          class="lge-card__chevron"
+        />
+        <span class="lge-card__name">{{ entry.name }}</span>
+        <Badge tone="neutral" mono>{{ entry.itemCount }}</Badge>
+        <IconButton
+          icon="trash-2"
+          variant="danger"
+          size="sm"
+          label="Delete group"
+          class="lge-card__del"
           @click.stop="deleteGroup(entry.name)"
-          class="text-neutral-600 hover:text-red-400 transition-colors p-1"
-        >
-          <Trash2 class="w-4 h-4" />
-        </button>
+        />
       </button>
 
-      <!-- Group Items -->
-      <div v-if="expandedGroup === entry.name" class="border-t border-neutral-800 p-4">
-        <table v-if="entry.itemCount > 0" class="w-full text-sm">
+      <!-- Expanded items -->
+      <div v-if="expandedGroup === entry.name" class="lge-card__body">
+        <table v-if="entry.itemCount > 0" class="lge-table">
           <thead>
-            <tr class="border-b border-neutral-800">
-              <th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th>
-              <th class="w-10"></th>
+            <tr>
+              <th class="lge-th">Item</th>
+              <th class="lge-th lge-th--num">Min</th>
+              <th class="lge-th lge-th--num">Max</th>
+              <th class="lge-th lge-th--num">Prob %</th>
+              <th class="lge-th lge-th--action"></th>
             </tr>
           </thead>
           <tbody>
             <tr
               v-for="(itemData, shortname) in entry.data.ItemList"
               :key="shortname"
-              class="border-b border-neutral-800/50"
+              class="lge-tr"
             >
-              <td class="py-2 px-2 text-neutral-200">{{ getItemName(shortname as string) }}</td>
-              <td class="py-2 px-2">
+              <td class="lge-td">{{ getItemName(shortname as string) }}</td>
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Min ?? 1"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Min', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Max ?? 1"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Max', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lge-td lge-td--num">
                 <input
                   type="number"
                   :value="(itemData as any).Probability ?? 100"
                   @input="updateGroupItemField(entry.name, shortname as string, 'Probability', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                   max="100"
                 />
               </td>
-              <td class="py-2 px-2">
-                <button
+              <td class="lge-td lge-td--action">
+                <IconButton
+                  icon="trash-2"
+                  variant="danger"
+                  size="sm"
+                  label="Remove item"
                   @click="removeItemFromGroup(entry.name, shortname as string)"
-                  class="text-neutral-600 hover:text-red-400"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </td>
             </tr>
           </tbody>
         </table>
-        <p v-else class="text-neutral-500 text-sm text-center py-4">
+        <p v-else class="lge-card__empty">
           No items in this group yet. Add items from the container editor.
         </p>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.lge-root {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Add group row */
+.lge-add {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+.lge-add > :first-child {
+  flex: 1;
+}
+
+/* Group card */
+.lge-card {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+}
+.lge-card__head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  text-align: left;
+  transition: var(--transition-colors);
+}
+.lge-card__head:hover {
+  background: var(--surface-hover);
+}
+.lge-card__chevron {
+  color: var(--text-muted);
+  flex: none;
+}
+.lge-card__name {
+  flex: 1;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.lge-card__del {
+  margin-left: auto;
+  flex: none;
+}
+
+/* Expanded body */
+.lge-card__body {
+  border-top: 1px solid var(--border-subtle);
+  padding: 12px;
+}
+.lge-card__empty {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  text-align: center;
+  padding: 16px 0 8px;
+}
+
+/* Table */
+.lge-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.lge-th {
+  padding: 6px 10px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+.lge-th--num {
+  text-align: center;
+  width: 80px;
+}
+.lge-th--action {
+  width: 40px;
+}
+.lge-tr {
+  border-bottom: 1px solid var(--border-subtle);
+}
+.lge-tr:last-child {
+  border-bottom: 0;
+}
+.lge-tr:hover {
+  background: var(--surface-hover);
+}
+.lge-td {
+  padding: 7px 10px;
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+.lge-td--num {
+  text-align: center;
+  width: 80px;
+}
+.lge-td--action {
+  width: 40px;
+  padding: 4px 6px;
+}
+
+/* Shared number input (same as LootItemEditor) */
+.cc-num-input {
+  width: 100%;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default);
+  padding: 5px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  outline: none;
+  transition: var(--transition-colors);
+}
+.cc-num-input:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.cc-num-input--center {
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/components/loot/LootItemEditor.vue b/frontend/src/components/loot/LootItemEditor.vue
index 2776b21..d88436e 100644
--- a/frontend/src/components/loot/LootItemEditor.vue
+++ b/frontend/src/components/loot/LootItemEditor.vue
@@ -2,7 +2,12 @@
 import { computed } from 'vue'
 import { rustItems } from '@/data/rust-items'
 import { rustContainers } from '@/data/rust-containers'
-import { Trash2, Plus, Settings2 } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 import type { PrefabLoot } from '@/types'
 
 const props = defineProps<{
@@ -76,157 +81,273 @@ const ungroupedItems = computed(() => {
     ...(data as any),
   }))
 })
+
+// Computed boolean for the Switch v-model
+const isEnabled = computed({
+  get: () => containerData.value?.Enabled ?? true,
+  set: () => toggleEnabled(),
+})
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Container Header -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-3">
-          <h2 class="text-lg font-semibold text-neutral-100">{{ containerName }}</h2>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              :checked="containerData?.Enabled ?? true"
-              @change="toggleEnabled"
-              class="rounded bg-neutral-800 border-neutral-600 text-oxide-500 focus:ring-oxide-500"
-            />
-            <span class="text-sm text-neutral-400">Enabled</span>
-          </label>
-        </div>
-        <div class="flex items-center gap-2">
-          <Settings2 class="w-4 h-4 text-neutral-500" />
-          <span class="text-xs text-neutral-500 font-mono">{{ containerKey.split('/').pop() }}</span>
-        </div>
-      </div>
+  <div class="lie-root">
+    <!-- Container settings panel -->
+    <Panel :title="containerName">
+      <template #actions>
+        <Badge tone="neutral" mono class="lie-prefab">
+          {{ containerKey.split('/').pop() }}
+        </Badge>
+        <Switch v-model="isEnabled" label="Enabled" size="sm" />
+      </template>
 
-      <!-- Item Settings -->
-      <div class="grid grid-cols-4 gap-3" v-if="containerData">
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Items Min</label>
+      <!-- Item settings grid -->
+      <div v-if="containerData" class="lie-settings">
+        <div class="lie-setting">
+          <label class="lie-setting__label">Items min</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.ItemsMin ?? 1"
             @input="updateSettings('ItemsMin', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Items Max</label>
+        <div class="lie-setting">
+          <label class="lie-setting__label">Items max</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.ItemsMax ?? 6"
             @input="updateSettings('ItemsMax', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Min Scrap</label>
+        <div class="lie-setting">
+          <label class="lie-setting__label">Min scrap</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.MinScrap ?? 0"
             @input="updateSettings('MinScrap', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
-        <div>
-          <label class="block text-xs text-neutral-500 mb-1">Max Scrap</label>
+        <div class="lie-setting">
+          <label class="lie-setting__label">Max scrap</label>
           <input
             type="number"
             :value="containerData.ItemSettings?.MaxScrap ?? 0"
             @input="updateSettings('MaxScrap', Number(($event.target as HTMLInputElement).value))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-sm text-neutral-200"
+            class="cc-num-input"
             min="0"
           />
         </div>
       </div>
-    </div>
+      <p v-else class="lie-unconfigured">
+        Container not yet configured. Add an item to initialise its settings.
+      </p>
+    </Panel>
 
-    <!-- Ungrouped Items Table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="text-sm font-semibold text-neutral-300">Ungrouped Items</h3>
-        <button
-          @click="emit('add-item')"
-          class="flex items-center gap-1 px-3 py-1.5 bg-oxide-500/10 text-oxide-400 rounded-lg hover:bg-oxide-500/20 text-sm"
-        >
-          <Plus class="w-3.5 h-3.5" />
-          Add Item
-        </button>
-      </div>
+    <!-- Ungrouped items panel -->
+    <Panel title="Ungrouped items" :flush-body="ungroupedItems.length > 0">
+      <template #actions>
+        <Button size="sm" variant="outline" icon="plus" @click="emit('add-item')">
+          Add item
+        </Button>
+      </template>
 
-      <div v-if="ungroupedItems.length > 0" class="overflow-x-auto">
-        <table class="w-full text-sm">
+      <div v-if="ungroupedItems.length > 0" class="lie-table-wrap">
+        <table class="lie-table">
           <thead>
-            <tr class="border-b border-neutral-800">
-              <th class="text-left py-2 px-2 text-neutral-500 font-medium">Item</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Min</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-20">Max</th>
-              <th class="text-center py-2 px-2 text-neutral-500 font-medium w-24">Prob %</th>
-              <th class="w-10"></th>
+            <tr>
+              <th class="lie-th">Item</th>
+              <th class="lie-th lie-th--num">Min</th>
+              <th class="lie-th lie-th--num">Max</th>
+              <th class="lie-th lie-th--num">Prob %</th>
+              <th class="lie-th lie-th--action"></th>
             </tr>
           </thead>
           <tbody>
             <tr
               v-for="item in ungroupedItems"
               :key="item.shortname"
-              class="border-b border-neutral-800/50 hover:bg-neutral-800/30"
+              class="lie-tr"
             >
-              <td class="py-2 px-2">
-                <div>
-                  <span class="text-neutral-200">{{ item.name }}</span>
-                  <span class="text-neutral-600 text-xs ml-2">{{ item.shortname }}</span>
-                </div>
+              <td class="lie-td">
+                <span class="lie-item-name">{{ item.name }}</span>
+                <span class="lie-item-short">{{ item.shortname }}</span>
               </td>
-              <td class="py-2 px-2">
+              <td class="lie-td lie-td--num">
                 <input
                   type="number"
                   :value="item.Min"
                   @input="updateItemField(item.shortname, 'Min', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lie-td lie-td--num">
                 <input
                   type="number"
                   :value="item.Max"
                   @input="updateItemField(item.shortname, 'Max', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                 />
               </td>
-              <td class="py-2 px-2">
+              <td class="lie-td lie-td--num">
                 <input
                   type="number"
                   :value="item.Probability ?? 100"
                   @input="updateItemField(item.shortname, 'Probability', Number(($event.target as HTMLInputElement).value))"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
+                  class="cc-num-input cc-num-input--center"
                   min="0"
                   max="100"
                 />
               </td>
-              <td class="py-2 px-2">
-                <button
+              <td class="lie-td lie-td--action">
+                <IconButton
+                  icon="trash-2"
+                  variant="danger"
+                  size="sm"
+                  label="Remove item"
                   @click="removeItem(item.shortname)"
-                  class="text-neutral-600 hover:text-red-400 transition-colors"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+                />
               </td>
             </tr>
           </tbody>
         </table>
       </div>
 
-      <div v-else class="text-center py-6 text-neutral-500 text-sm">
-        No items configured for this container.
-        <button @click="emit('add-item')" class="text-oxide-400 hover:underline ml-1">Add one</button>
-      </div>
-    </div>
+      <EmptyState
+        v-else
+        icon="package"
+        title="No items configured"
+        description="Add items to configure what this container can spawn."
+      >
+        <template #action>
+          <Button size="sm" variant="outline" icon="plus" @click="emit('add-item')">
+            Add item
+          </Button>
+        </template>
+      </EmptyState>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.lie-root {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* Badge for prefab key */
+.lie-prefab {
+  font-size: 10px !important;
+}
+
+.lie-unconfigured {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+/* Settings grid */
+.lie-settings {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+.lie-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.lie-setting__label {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+/* Table */
+.lie-table-wrap {
+  overflow-x: auto;
+}
+.lie-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.lie-th {
+  padding: 8px 12px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+}
+.lie-th--num {
+  text-align: center;
+  width: 80px;
+}
+.lie-th--action {
+  width: 40px;
+}
+.lie-tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.lie-tr:last-child {
+  border-bottom: 0;
+}
+.lie-tr:hover {
+  background: var(--surface-hover);
+}
+.lie-td {
+  padding: 8px 12px;
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+.lie-td--num {
+  text-align: center;
+  width: 80px;
+}
+.lie-td--action {
+  width: 40px;
+  padding: 4px 8px;
+}
+.lie-item-name {
+  display: block;
+  color: var(--text-primary);
+}
+.lie-item-short {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+
+/* Shared number input */
+.cc-num-input {
+  width: 100%;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default);
+  padding: 5px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  outline: none;
+  transition: var(--transition-colors);
+}
+.cc-num-input:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.cc-num-input--center {
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/components/loot/LootItemPicker.vue b/frontend/src/components/loot/LootItemPicker.vue
index 9dac373..717a3f9 100644
--- a/frontend/src/components/loot/LootItemPicker.vue
+++ b/frontend/src/components/loot/LootItemPicker.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { rustItems, itemCategories } from '@/data/rust-items'
-import { Search, X } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 
 const emit = defineEmits<{
   select: [shortname: string]
@@ -25,64 +27,200 @@ const filteredItems = computed(() => {
 </script>
 
 <template>
-  <div class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="emit('close')">
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
-      <!-- Header -->
-      <div class="p-4 border-b border-neutral-800 flex items-center justify-between">
-        <h2 class="text-lg font-semibold text-neutral-100">Add Item</h2>
-        <button @click="emit('close')" class="text-neutral-500 hover:text-neutral-300">
-          <X class="w-5 h-5" />
-        </button>
-      </div>
+  <Teleport to="body">
+    <div class="lip-overlay" @click.self="emit('close')">
+      <div class="lip-modal">
+        <!-- Header -->
+        <div class="lip-head">
+          <span class="lip-head__title">Add item</span>
+          <IconButton icon="x" size="sm" label="Close" @click="emit('close')" />
+        </div>
 
-      <!-- Search + Filter -->
-      <div class="p-4 space-y-3 border-b border-neutral-800">
-        <div class="relative">
-          <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-          <input
+        <!-- Search + category filter -->
+        <div class="lip-filters">
+          <DsInput
             v-model="searchQuery"
-            placeholder="Search items..."
-            class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200"
-            autofocus
+            icon="search"
+            placeholder="Search items…"
+            size="sm"
           />
+          <div class="lip-cats">
+            <button
+              class="lip-cat"
+              :class="{ 'lip-cat--active': selectedCategory === 'all' }"
+              @click="selectedCategory = 'all'"
+            >
+              All
+            </button>
+            <button
+              v-for="cat in itemCategories"
+              :key="cat"
+              class="lip-cat"
+              :class="{ 'lip-cat--active': selectedCategory === cat }"
+              @click="selectedCategory = cat"
+            >
+              {{ cat }}
+            </button>
+          </div>
         </div>
-        <div class="flex flex-wrap gap-1">
-          <button
-            @click="selectedCategory = 'all'"
-            class="px-2 py-1 rounded text-xs"
-            :class="selectedCategory === 'all' ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
-          >
-            All
-          </button>
-          <button
-            v-for="cat in itemCategories"
-            :key="cat"
-            @click="selectedCategory = cat"
-            class="px-2 py-1 rounded text-xs capitalize"
-            :class="selectedCategory === cat ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
-          >
-            {{ cat }}
-          </button>
-        </div>
-      </div>
 
-      <!-- Item Grid -->
-      <div class="flex-1 overflow-y-auto p-4">
-        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
-          <button
-            v-for="item in filteredItems"
-            :key="item.shortname"
-            @click="emit('select', item.shortname)"
-            class="text-left px-3 py-2 bg-neutral-800 rounded-lg hover:bg-neutral-700 transition-colors group"
-          >
-            <div class="text-sm text-neutral-200 group-hover:text-oxide-400">{{ item.name }}</div>
-            <div class="text-xs text-neutral-500">{{ item.shortname }}</div>
-          </button>
-        </div>
-        <div v-if="filteredItems.length === 0" class="text-center py-8 text-neutral-500">
-          No items found
+        <!-- Item grid -->
+        <div class="lip-grid-wrap">
+          <div v-if="filteredItems.length > 0" class="lip-grid">
+            <button
+              v-for="item in filteredItems"
+              :key="item.shortname"
+              class="lip-item"
+              @click="emit('select', item.shortname)"
+            >
+              <span class="lip-item__name">{{ item.name }}</span>
+              <span class="lip-item__short">{{ item.shortname }}</span>
+            </button>
+          </div>
+          <div v-else class="lip-empty">
+            <Icon name="search" :size="20" class="lip-empty__icon" />
+            <span>No items found</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
+
+<style scoped>
+.lip-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.lip-modal {
+  background: var(--surface-raised);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 640px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Header */
+.lip-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex: none;
+}
+.lip-head__title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Filters */
+.lip-filters {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: none;
+}
+.lip-cats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.lip-cat {
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default);
+  padding: 3px 10px;
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  text-transform: capitalize;
+  transition: var(--transition-colors);
+}
+.lip-cat:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+.lip-cat--active {
+  background: var(--accent);
+  color: var(--accent-contrast);
+  box-shadow: none;
+}
+.lip-cat--active:hover {
+  background: var(--accent-hover);
+}
+
+/* Grid */
+.lip-grid-wrap {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+.lip-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 6px;
+}
+.lip-item {
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 9px 12px;
+  text-align: left;
+  cursor: pointer;
+  transition: var(--transition-colors);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.lip-item:hover {
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.lip-item__name {
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.lip-item:hover .lip-item__name {
+  color: var(--accent-text);
+}
+.lip-item__short {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* Empty */
+.lip-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 48px 0;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+.lip-empty__icon {
+  color: var(--text-muted);
+}
+</style>
diff --git a/frontend/src/components/teleport/PermissionGroupEditor.vue b/frontend/src/components/teleport/PermissionGroupEditor.vue
index 3554c39..0df8621 100644
--- a/frontend/src/components/teleport/PermissionGroupEditor.vue
+++ b/frontend/src/components/teleport/PermissionGroupEditor.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Plus, Trash2 } from 'lucide-vue-next'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const props = defineProps<{
   configData: Record<string, any>
@@ -47,7 +49,6 @@ function ensurePaths(data: Record<string, any>) {
 function addGroup() {
   const name = newGroupName.value.trim()
   if (!name) return
-  // Check if already exists
   if (groups.value.some(g => g.name === name)) return
 
   const updated = { ...props.configData }
@@ -95,96 +96,95 @@ function updateField(groupName: string, field: string, value: number) {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <div class="flex items-center justify-between">
-      <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">VIP Permission Groups</h3>
+  <div class="pge">
+    <div class="pge__head">
+      <div class="pge__section-label">VIP permission groups</div>
     </div>
 
-    <!-- Add Group -->
-    <div class="flex gap-2">
+    <!-- Add group row -->
+    <div class="pge__add-row">
       <input
         v-model="newGroupName"
-        placeholder="New group name (e.g. vip, vip+, mvp)..."
-        class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200"
+        type="text"
+        class="pge__name-input"
+        placeholder="New group name (e.g. vip, vip+, mvp)…"
         @keydown.enter="addGroup"
       />
-      <button
-        @click="addGroup"
+      <Button
+        size="sm"
+        icon="plus"
         :disabled="!newGroupName.trim()"
-        class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-      >
-        <Plus class="w-4 h-4" />
-        Add Group
-      </button>
+        @click="addGroup"
+      >Add group</Button>
     </div>
 
-    <!-- Empty State -->
-    <div v-if="groups.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center text-neutral-500 text-sm">
-      No VIP groups defined. Add groups to configure per-permission teleport limits, cooldowns, and countdowns.
-    </div>
+    <!-- Empty state -->
+    <EmptyState
+      v-if="groups.length === 0"
+      icon="users"
+      title="No VIP groups defined"
+      description="Add groups to configure per-permission teleport limits, cooldowns, and countdowns."
+    />
 
-    <!-- Groups Table -->
-    <div v-else class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden">
-      <table class="w-full text-sm">
+    <!-- Groups table -->
+    <div v-else class="pge__table-wrap">
+      <table class="pge__table">
         <thead>
-          <tr class="border-b border-neutral-800">
-            <th class="text-left py-3 px-4 text-neutral-500 font-medium">Group Name</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Homes Limit</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Cooldown (s)</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Countdown (s)</th>
-            <th class="text-center py-3 px-4 text-neutral-500 font-medium w-28">Daily Limit</th>
-            <th class="w-12"></th>
+          <tr>
+            <th class="pge__th pge__th--left">Group name</th>
+            <th class="pge__th">Homes limit</th>
+            <th class="pge__th">Cooldown (s)</th>
+            <th class="pge__th">Countdown (s)</th>
+            <th class="pge__th">Daily limit</th>
+            <th class="pge__th pge__th--action" />
           </tr>
         </thead>
         <tbody>
           <tr
             v-for="group in groups"
             :key="group.name"
-            class="border-b border-neutral-800/50"
+            class="pge__tr"
           >
-            <td class="py-3 px-4 text-neutral-200 font-medium">{{ group.name }}</td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--name">{{ group.name }}</td>
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.homesLimit"
+                min="0"
                 @input="updateField(group.name, 'homesLimit', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
-                min="0"
               />
             </td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.cooldown"
+                min="0"
                 @input="updateField(group.name, 'cooldown', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
-                min="0"
               />
             </td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.countdown"
-                @input="updateField(group.name, 'countdown', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
                 min="0"
+                @input="updateField(group.name, 'countdown', Number(($event.target as HTMLInputElement).value))"
               />
             </td>
-            <td class="py-3 px-4">
+            <td class="pge__td pge__td--num">
               <input
                 type="number"
+                class="pge__num-input"
                 :value="group.dailyLimit"
-                @input="updateField(group.name, 'dailyLimit', Number(($event.target as HTMLInputElement).value))"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-center text-neutral-200"
                 min="0"
+                @input="updateField(group.name, 'dailyLimit', Number(($event.target as HTMLInputElement).value))"
               />
             </td>
-            <td class="py-3 px-4">
-              <button
-                @click="removeGroup(group.name)"
-                class="text-neutral-600 hover:text-red-400 transition-colors p-1"
-              >
-                <Trash2 class="w-4 h-4" />
+            <td class="pge__td pge__td--action">
+              <button class="pge__del" type="button" @click="removeGroup(group.name)">
+                <Icon name="trash-2" :size="15" />
               </button>
             </td>
           </tr>
@@ -193,3 +193,63 @@ function updateField(groupName: string, field: string, value: number) {
     </div>
   </div>
 </template>
+
+<style scoped>
+/* ---------- Shell ---------- */
+.pge { display: flex; flex-direction: column; gap: 14px; }
+
+/* ---------- Head ---------- */
+.pge__head { display: flex; align-items: center; justify-content: space-between; }
+.pge__section-label {
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+}
+
+/* ---------- Add row ---------- */
+.pge__add-row { display: flex; gap: 8px; align-items: center; }
+.pge__name-input {
+  flex: 1; height: var(--control-h-sm); padding: 0 10px;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-sans);
+  font-size: var(--text-sm); color: var(--text-primary);
+}
+.pge__name-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.pge__name-input::placeholder { color: var(--text-muted); }
+
+/* ---------- Table ---------- */
+.pge__table-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--ring-default); }
+.pge__table { width: 100%; border-collapse: collapse; }
+.pge__th {
+  padding: 9px 12px; font-size: var(--text-xs); font-weight: 600;
+  color: var(--text-tertiary); text-align: center;
+  background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle);
+}
+.pge__th--left { text-align: left; }
+.pge__th--action { width: 44px; }
+.pge__tr { border-bottom: 1px solid var(--border-subtle); }
+.pge__tr:last-child { border-bottom: 0; }
+.pge__tr:hover { background: var(--surface-hover); }
+.pge__td { padding: 8px 12px; font-size: var(--text-sm); color: var(--text-primary); }
+.pge__td--name { font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.pge__td--num { text-align: center; }
+.pge__td--action { text-align: center; }
+
+/* ---------- Number input (table cell) ---------- */
+.pge__num-input {
+  width: 80px; height: 28px; padding: 0 8px; text-align: center;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-mono);
+  font-size: var(--text-sm); color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.pge__num-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* ---------- Delete button ---------- */
+.pge__del {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--radius-sm); border: none;
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  transition: var(--transition-colors);
+}
+.pge__del:hover { color: var(--danger); background: var(--status-offline-soft); }
+</style>
diff --git a/frontend/src/views/admin/AutoDoorsView.vue b/frontend/src/views/admin/AutoDoorsView.vue
index 678a3cb..bc742b6 100644
--- a/frontend/src/views/admin/AutoDoorsView.vue
+++ b/frontend/src/views/admin/AutoDoorsView.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useAutoDoorsStore } from '@/stores/autodoors'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  DoorOpen,
-  Settings as SettingsIcon,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useAutoDoorsStore()
 
@@ -21,13 +17,13 @@ const importConfigName = ref('')
 
 // Door types from the AutoDoors plugin
 const doorTypes = [
-  { key: 'door.hinged.wood', label: 'Wooden Door', displayName: 'Wooden Door' },
-  { key: 'door.hinged.metal', label: 'Sheet Metal Door', displayName: 'Sheet Metal Door' },
-  { key: 'door.hinged.toptier', label: 'Armored Door', displayName: 'Armored Door' },
-  { key: 'door.double.hinged.wood', label: 'Double Wooden Door', displayName: 'Double Wooden Door' },
-  { key: 'door.double.hinged.metal', label: 'Double Sheet Metal Door', displayName: 'Double Sheet Metal Door' },
-  { key: 'door.double.hinged.toptier', label: 'Double Armored Door', displayName: 'Double Armored Door' },
-  { key: 'floor.ladder.hatch', label: 'Ladder Hatch', displayName: 'Ladder Hatch' },
+  { key: 'door.hinged.wood', label: 'Wooden door', displayName: 'Wooden Door' },
+  { key: 'door.hinged.metal', label: 'Sheet metal door', displayName: 'Sheet Metal Door' },
+  { key: 'door.hinged.toptier', label: 'Armored door', displayName: 'Armored Door' },
+  { key: 'door.double.hinged.wood', label: 'Double wooden door', displayName: 'Double Wooden Door' },
+  { key: 'door.double.hinged.metal', label: 'Double sheet metal door', displayName: 'Double Sheet Metal Door' },
+  { key: 'door.double.hinged.toptier', label: 'Double armored door', displayName: 'Double Armored Door' },
+  { key: 'floor.ladder.hatch', label: 'Ladder hatch', displayName: 'Ladder Hatch' },
 ]
 
 onMounted(async () => {
@@ -154,442 +150,472 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// Helper: coerce getConfigValue result to boolean for Switch
+function getBool(path: string, def: boolean): boolean {
+  return !!getConfigValue(path, def)
+}
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Auto Doors</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="adv">
+    <!-- Page head -->
+    <div class="adv__head">
+      <div class="adv__head-id">
+        <div class="adv__head-chip">
+          <Icon name="door-open" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="adv__title">Auto doors</h1>
+        </div>
       </div>
+      <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config action bar -->
+    <Panel>
+      <div class="adv__bar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="adv__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="adv__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          icon="save"
+          size="sm"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          :loading="store.isSaving"
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          icon="play"
+          size="sm"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          :loading="store.isApplying"
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          icon="download"
+          size="sm"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <Button
+          variant="danger-soft"
+          icon="trash-2"
+          size="sm"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          class="adv__bar-delete"
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="adv__loading">
+      <span class="adv__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <DoorOpen class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No AutoDoors Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="door-open"
+        title="No AutoDoors config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Settings Section -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center gap-2">
-          <SettingsIcon class="w-4 h-4 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Global Settings</h3>
-        </div>
-
-        <!-- Delay Settings -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Default Delay (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Time before door auto-closes</p>
-            <div class="flex items-center gap-3">
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Global settings -->
+      <Panel title="Global settings">
+        <!-- Delay sliders -->
+        <div class="adv__delay-grid">
+          <div class="adv__field">
+            <div class="adv__field-label">Default delay (seconds)</div>
+            <div class="adv__field-hint">Time before door auto-closes</div>
+            <div class="adv__slider-row">
               <input
                 type="range"
                 :value="getConfigValue('DefaultDelay', 5)"
-                @input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="30"
                 step="1"
-                class="flex-1 accent-oxide-500"
+                class="adv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue('DefaultDelay', 5)"
+                min="1"
+                max="30"
+                class="cc-num-input adv__delay-num"
                 @input="setConfigValue('DefaultDelay', Number(($event.target as HTMLInputElement).value))"
-                min="1"
-                max="30"
-                class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
               />
-              <span class="text-xs text-neutral-500">sec</span>
+              <span class="adv__unit">sec</span>
             </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Minimum Delay (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Lowest delay a player can set</p>
-            <div class="flex items-center gap-3">
+          <div class="adv__field">
+            <div class="adv__field-label">Minimum delay (seconds)</div>
+            <div class="adv__field-hint">Lowest delay a player can set</div>
+            <div class="adv__slider-row">
               <input
                 type="range"
                 :value="getConfigValue('MinimumDelay', 5)"
-                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="30"
                 step="1"
-                class="flex-1 accent-oxide-500"
+                class="adv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue('MinimumDelay', 5)"
-                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="30"
-                class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input adv__delay-num"
+                @input="setConfigValue('MinimumDelay', Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500">sec</span>
+              <span class="adv__unit">sec</span>
             </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Maximum Delay (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Highest delay a player can set</p>
-            <div class="flex items-center gap-3">
+          <div class="adv__field">
+            <div class="adv__field-label">Maximum delay (seconds)</div>
+            <div class="adv__field-hint">Highest delay a player can set</div>
+            <div class="adv__slider-row">
               <input
                 type="range"
                 :value="getConfigValue('MaximumDelay', 30)"
-                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="60"
                 step="1"
-                class="flex-1 accent-oxide-500"
+                class="adv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue('MaximumDelay', 30)"
-                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
                 min="1"
                 max="60"
-                class="w-16 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input adv__delay-num"
+                @input="setConfigValue('MaximumDelay', Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500">sec</span>
+              <span class="adv__unit">sec</span>
             </div>
           </div>
         </div>
 
-        <!-- Global Toggles -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div class="flex items-center justify-between">
+        <!-- Global toggles -->
+        <div class="adv__toggles adv__mt">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Default Enabled</label>
-              <p class="text-xs text-neutral-500">Auto-close enabled for new players by default</p>
+              <div class="adv__toggle-label">Default enabled</div>
+              <div class="adv__toggle-sub">Auto-close enabled for new players by default</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.defaultEnabled', !getConfigValue('GlobalSettings.defaultEnabled', true))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.defaultEnabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.defaultEnabled', true) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.defaultEnabled', true)"
+              @update:model-value="v => setConfigValue('GlobalSettings.defaultEnabled', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Allow Unowned Doors</label>
-              <p class="text-xs text-neutral-500">Auto-close doors that the player does not own</p>
+              <div class="adv__toggle-label">Allow unowned doors</div>
+              <div class="adv__toggle-sub">Auto-close doors that the player does not own</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.useUnownedDoor', !getConfigValue('GlobalSettings.useUnownedDoor', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.useUnownedDoor', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.useUnownedDoor', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.useUnownedDoor', false)"
+              @update:model-value="v => setConfigValue('GlobalSettings.useUnownedDoor', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Exclude Door Controller</label>
-              <p class="text-xs text-neutral-500">Skip doors that have a Code Lock or Key Lock</p>
+              <div class="adv__toggle-label">Exclude door controller</div>
+              <div class="adv__toggle-sub">Skip doors that have a code lock or key lock</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.excludeDoorController', !getConfigValue('GlobalSettings.excludeDoorController', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.excludeDoorController', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.excludeDoorController', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.excludeDoorController', false)"
+              @update:model-value="v => setConfigValue('GlobalSettings.excludeDoorController', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Cancel on Player Death</label>
-              <p class="text-xs text-neutral-500">Cancel auto-close if the player dies</p>
+              <div class="adv__toggle-label">Cancel on player death</div>
+              <div class="adv__toggle-sub">Cancel auto-close if the player dies</div>
             </div>
-            <button
-              @click="setConfigValue('GlobalSettings.cancelOnKill', !getConfigValue('GlobalSettings.cancelOnKill', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('GlobalSettings.cancelOnKill', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('GlobalSettings.cancelOnKill', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('GlobalSettings.cancelOnKill', false)"
+              @update:model-value="v => setConfigValue('GlobalSettings.cancelOnKill', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Use Permissions</label>
-              <p class="text-xs text-neutral-500">Require Oxide permission to use auto-close</p>
+              <div class="adv__toggle-label">Use permissions</div>
+              <div class="adv__toggle-sub">Require Oxide permission to use auto-close</div>
             </div>
-            <button
-              @click="setConfigValue('UsePermissions', !getConfigValue('UsePermissions', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('UsePermissions', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('UsePermissions', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('UsePermissions', false)"
+              @update:model-value="v => setConfigValue('UsePermissions', v)"
+            />
           </div>
-
-          <div class="flex items-center justify-between">
+          <div class="adv__toggle-row">
             <div>
-              <label class="text-sm text-neutral-200">Clear Data on Map Wipe</label>
-              <p class="text-xs text-neutral-500">Reset all player preferences on map wipe</p>
+              <div class="adv__toggle-label">Clear data on map wipe</div>
+              <div class="adv__toggle-sub">Reset all player preferences on map wipe</div>
             </div>
-            <button
-              @click="setConfigValue('ClearDataOnWipe', !getConfigValue('ClearDataOnWipe', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('ClearDataOnWipe', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('ClearDataOnWipe', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool('ClearDataOnWipe', false)"
+              @update:model-value="v => setConfigValue('ClearDataOnWipe', v)"
+            />
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Door Types Section -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-        <div class="flex items-center gap-2">
-          <DoorOpen class="w-4 h-4 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Door Types</h3>
-        </div>
-        <p class="text-xs text-neutral-500">Enable or disable auto-close for each door type.</p>
-
-        <div class="space-y-3">
+      <!-- Door types -->
+      <Panel title="Door types" subtitle="Enable or disable auto-close for each door type.">
+        <div class="adv__toggles">
           <div
             v-for="door in doorTypes"
             :key="door.key"
-            class="flex items-center justify-between py-2 border-b border-neutral-800 last:border-0"
+            class="adv__toggle-row"
           >
             <div>
-              <label class="text-sm text-neutral-200">{{ door.label }}</label>
-              <p class="text-xs text-neutral-500 font-mono">{{ door.key }}</p>
+              <div class="adv__toggle-label">{{ door.label }}</div>
+              <div class="adv__toggle-sub adv__mono">{{ door.key }}</div>
             </div>
-            <button
-              @click="setConfigValue(`DoorSettings.${door.key}.enabled`, !getConfigValue(`DoorSettings.${door.key}.enabled`, true))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue(`DoorSettings.${door.key}.enabled`, true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue(`DoorSettings.${door.key}.enabled`, true) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getBool(`DoorSettings.${door.key}.enabled`, true)"
+              @update:model-value="v => setConfigValue(`DoorSettings.${door.key}.enabled`, v)"
+            />
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Permission Groups Section -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <SettingsIcon class="w-4 h-4 text-neutral-400" />
-            <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Permission Group Overrides</h3>
-          </div>
-          <button
-            @click="addPermissionGroup"
-            class="flex items-center gap-1 px-3 py-1 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-3 h-3" />
-            Add Group
-          </button>
-        </div>
-        <p class="text-xs text-neutral-500">Override the default delay for specific Oxide permission groups.</p>
+      <!-- Permission group overrides -->
+      <Panel title="Permission group overrides" subtitle="Override the default delay for specific Oxide permission groups.">
+        <template #actions>
+          <Button size="sm" icon="plus" variant="secondary" @click="addPermissionGroup">Add group</Button>
+        </template>
 
-        <div v-if="getPermissionGroups().length === 0" class="text-sm text-neutral-500 text-center py-4">
+        <div v-if="getPermissionGroups().length === 0" class="adv__perm-empty">
           No permission group overrides configured.
         </div>
 
-        <div v-else class="space-y-3">
+        <div v-else class="adv__perm-list">
           <div
             v-for="(group, index) in getPermissionGroups()"
             :key="index"
-            class="flex items-center gap-3"
+            class="adv__perm-row"
           >
             <input
               :value="group.name"
-              @input="updatePermissionGroupName(group.name, ($event.target as HTMLInputElement).value)"
+              type="text"
+              class="cc-text-input adv__perm-name"
               placeholder="Group name (e.g. vip)"
-              class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              @input="updatePermissionGroupName(group.name, ($event.target as HTMLInputElement).value)"
             />
             <input
               type="number"
               :value="group.delay"
-              @input="updatePermissionGroupDelay(group.name, Number(($event.target as HTMLInputElement).value))"
               min="1"
               max="60"
-              class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-2 text-neutral-200 text-sm text-center"
+              class="cc-num-input adv__perm-delay"
+              @input="updatePermissionGroupDelay(group.name, Number(($event.target as HTMLInputElement).value))"
             />
-            <span class="text-xs text-neutral-500">sec</span>
-            <button
-              @click="removePermissionGroup(group.name)"
-              class="p-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors"
-            >
-              <Trash2 class="w-4 h-4" />
+            <span class="adv__unit">sec</span>
+            <button class="adv__del-btn" title="Remove group" @click="removePermissionGroup(group.name)">
+              <Icon name="trash-2" :size="15" />
             </button>
           </div>
         </div>
-      </div>
-    </div>
+      </Panel>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New AutoDoors Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="adv__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="adv__modal">
+        <h2 class="adv__modal-title">New AutoDoors config</h2>
+        <div class="adv__modal-body">
+          <div class="adv__field">
+            <label class="adv__field-label">Config name</label>
             <input
               v-model="newConfigName"
-              placeholder="e.g. 5 Second Close"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. 5 second close"
               @keydown.enter="handleCreateConfig"
             />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+          <div class="adv__field">
+            <label class="adv__field-label">Description (optional)</label>
             <textarea
               v-model="newConfigDesc"
               rows="2"
+              class="cc-textarea"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="adv__modal-footer">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current AutoDoors config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="adv__modal-backdrop" @click.self="showImportModal = false">
+      <div class="adv__modal">
+        <h2 class="adv__modal-title">Import from server</h2>
+        <p class="adv__modal-desc">Import the current AutoDoors config from your live server. This will create a new config profile.</p>
+        <div class="adv__modal-body">
+          <div class="adv__field">
+            <label class="adv__field-label">Config name</label>
             <input
               v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Imported server config"
               @keydown.enter="handleImport"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+        </div>
+        <div class="adv__modal-footer">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.adv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.adv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.adv__head-id { display: flex; align-items: center; gap: 12px; }
+.adv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.adv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Config action bar */
+.adv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.adv__config-select {
+  appearance: none; height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.adv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.adv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+.adv__bar-delete { margin-left: auto; }
+
+/* Loading */
+.adv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+.adv__spinner {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
+  border-top-color: transparent; animation: adv-spin 0.6s linear infinite;
+}
+@keyframes adv-spin { to { transform: rotate(360deg); } }
+
+/* Delay grid */
+.adv__delay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+@media (max-width: 700px) { .adv__delay-grid { grid-template-columns: 1fr; } }
+.adv__slider-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+.adv__slider { flex: 1; cursor: pointer; }
+.adv__delay-num { width: 60px; flex: none; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.adv__unit { font-size: var(--text-xs); color: var(--text-tertiary); flex: none; }
+.adv__mt { margin-top: 20px; }
+
+/* Fields */
+.adv__field { display: flex; flex-direction: column; gap: 4px; }
+.adv__field-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.adv__field-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+/* Toggle rows */
+.adv__toggles { display: flex; flex-direction: column; }
+.adv__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
+}
+.adv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.adv__toggle-row:first-child { padding-top: 0; }
+.adv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.adv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.adv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* Permission groups */
+.adv__perm-empty { font-size: var(--text-sm); color: var(--text-tertiary); text-align: center; padding: 20px 0; }
+.adv__perm-list { display: flex; flex-direction: column; gap: 8px; }
+.adv__perm-row { display: flex; align-items: center; gap: 8px; }
+.adv__perm-name { flex: 1; }
+.adv__perm-delay { width: 72px; flex: none; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.adv__del-btn {
+  width: 34px; height: 34px; border-radius: var(--radius-sm); border: none; background: transparent;
+  color: var(--danger); display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: var(--transition-colors); flex: none;
+}
+.adv__del-btn:hover { background: var(--status-offline-soft); }
+
+/* Shared token inputs */
+.cc-textarea {
+  width: 100%; background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
+  resize: none; outline: 0; line-height: 1.5;
+}
+.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-text-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-num-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* Modal */
+.adv__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.adv__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.adv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.adv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.adv__modal-body { display: flex; flex-direction: column; gap: 12px; }
+.adv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+</style>
diff --git a/frontend/src/views/admin/BetterChatView.vue b/frontend/src/views/admin/BetterChatView.vue
index b521f8e..85d60d5 100644
--- a/frontend/src/views/admin/BetterChatView.vue
+++ b/frontend/src/views/admin/BetterChatView.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useBetterChatStore } from '@/stores/betterchat'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  MessageSquare,
-  Settings as SettingsIcon,
-  Edit,
-  X,
-} from 'lucide-vue-next'
+
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useBetterChatStore()
 
-const activeTab = ref<'groups' | 'settings'>('groups')
+const activeTab = ref<string>('groups')
 const showCreateModal = ref(false)
 const showImportModal = ref(false)
 const showGroupModal = ref(false)
@@ -24,9 +23,9 @@ const newConfigDesc = ref('')
 const importConfigName = ref('')
 const editingGroupIndex = ref<number | null>(null)
 
-const tabs = [
-  { key: 'groups', label: 'Chat Groups', icon: MessageSquare },
-  { key: 'settings', label: 'Settings', icon: SettingsIcon },
+const tabItems = [
+  { value: 'groups', label: 'Chat groups', icon: 'message-square' },
+  { value: 'settings', label: 'Settings', icon: 'settings' },
 ]
 
 // Default group template matching BetterChat actual format
@@ -198,593 +197,634 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// DS Select model — current config id
+const selectedConfigId = computed<string>({
+  get: () => store.currentConfig?.id ?? '',
+  set: (v: string | undefined) => { handleConfigChange(v ?? '') },
+})
+
+const configSelectOptions = computed(() =>
+  store.configs.map(c => ({
+    value: c.id,
+    label: c.config_name + (c.is_active ? ' (active)' : ''),
+  }))
+)
+
+// Switch computed wrappers (setConfigValue is not reactive-friendly with direct v-model)
+const wordFilterEnabled = computed<boolean>({
+  get: () => getConfigValue('Word Filter.Enabled', false) as boolean,
+  set: (v: boolean) => setConfigValue('Word Filter.Enabled', v),
+})
+const antiFloodEnabled = computed<boolean>({
+  get: () => getConfigValue('Anti Flood.Enabled', true) as boolean,
+  set: (v: boolean) => setConfigValue('Anti Flood.Enabled', v),
+})
+const reverseTitleOrder = computed<boolean>({
+  get: () => getConfigValue('General.Reverse Title Order', false) as boolean,
+  set: (v: boolean) => setConfigValue('General.Reverse Title Order', v),
+})
+const useCustomReplacement = computed<boolean>({
+  get: () => getConfigValue('Word Filter.Use Custom Replacement', false) as boolean,
+  set: (v: boolean) => setConfigValue('Word Filter.Use Custom Replacement', v),
+})
+const enablePlayerTagging = computed<boolean>({
+  get: () => getConfigValue('General.Enable Player Tagging', false) as boolean,
+  set: (v: boolean) => setConfigValue('General.Enable Player Tagging', v),
+})
+
+// Modal input bindings
+const newConfigNameModel = computed<string>({
+  get: () => newConfigName.value,
+  set: (v: string | undefined) => { newConfigName.value = v ?? '' },
+})
+const importConfigNameModel = computed<string>({
+  get: () => importConfigName.value,
+  set: (v: string | undefined) => { importConfigName.value = v ?? '' },
+})
+
+// Group modal field bindings
+const editGroupName = computed<string>({
+  get: () => editGroup.value.GroupName ?? '',
+  set: (v: string | undefined) => { editGroup.value.GroupName = v ?? '' },
+})
+const editGroupTitleText = computed<string>({
+  get: () => editGroup.value.Title?.Text ?? '',
+  set: (v: string | undefined) => { editGroup.value.Title.Text = v ?? '' },
+})
+const editGroupTitleColor = computed<string>({
+  get: () => editGroup.value.Title?.Color ?? '#55aaff',
+  set: (v: string | undefined) => { editGroup.value.Title.Color = v ?? '#55aaff' },
+})
+const editGroupUsernameColor = computed<string>({
+  get: () => editGroup.value.Username?.Color ?? '#55aaff',
+  set: (v: string | undefined) => { editGroup.value.Username.Color = v ?? '#55aaff' },
+})
+const editGroupMessageColor = computed<string>({
+  get: () => editGroup.value.Message?.Color ?? '#ffffff',
+  set: (v: string | undefined) => { editGroup.value.Message.Color = v ?? '#ffffff' },
+})
+const editGroupFormatChat = computed<string>({
+  get: () => editGroup.value.Format?.Chat ?? '',
+  set: (v: string | undefined) => { editGroup.value.Format.Chat = v ?? '' },
+})
+const editGroupFormatConsole = computed<string>({
+  get: () => editGroup.value.Format?.Console ?? '',
+  set: (v: string | undefined) => { editGroup.value.Format.Console = v ?? '' },
+})
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Better Chat</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="bch">
+    <!-- Page head -->
+    <div class="bch__head">
+      <div class="bch__head-id">
+        <div class="bch__head-chip">
+          <Icon name="message-square" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin configuration</div>
+          <h1 class="bch__title">Better Chat</h1>
+        </div>
+      </div>
+      <div class="bch__head-actions">
+        <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
       </div>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
-        <select
+    <!-- Toolbar panel -->
+    <Panel>
+      <div class="bch__toolbar">
+        <!-- Config selector -->
+        <Select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
-          @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
-        >
-          <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
-          </option>
-        </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+          v-model="selectedConfigId"
+          :options="configSelectOptions"
+          size="sm"
+          style="min-width: 200px"
+        />
+        <span v-else class="bch__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
-          :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+        <div class="bch__toolbar-actions">
+          <!-- Save -->
+          <Button
+            size="sm"
+            icon="save"
+            :loading="store.isSaving"
+            :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
+            @click="store.saveCurrentConfig()"
+          >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
-          :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          <!-- Apply to server -->
+          <Button
+            size="sm"
+            variant="outline"
+            icon="play"
+            :loading="store.isApplying"
+            :disabled="!store.currentConfig || store.isApplying"
+            @click="handleApply"
+          >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
-          @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+          <!-- Import from server -->
+          <Button
+            size="sm"
+            variant="secondary"
+            icon="download"
+            @click="showImportModal = true"
+          >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
-          :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          <!-- Delete -->
+          <Button
+            size="sm"
+            variant="danger-soft"
+            icon="trash-2"
+            :disabled="!store.currentConfig"
+            @click="handleDeleteConfig"
+          >Delete</Button>
+        </div>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="bch__loading">
+      <span class="bch__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <MessageSquare class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No BetterChat Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty — no config -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="message-square"
+        title="No BetterChat config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Tab bar -->
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
-      <!-- Chat Groups Tab -->
-      <div v-if="activeTab === 'groups'" class="space-y-4">
-        <div class="flex items-center justify-between">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Chat Groups</h3>
-          <button
-            @click="addGroup"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Group
-          </button>
-        </div>
+      <!-- Chat groups tab -->
+      <Panel v-if="activeTab === 'groups'" title="Chat groups">
+        <template #actions>
+          <Button size="sm" variant="secondary" icon="plus" @click="addGroup">Add group</Button>
+        </template>
 
-        <div v-if="chatGroups.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center">
-          <p class="text-neutral-500">No chat groups configured. Add a group to get started.</p>
-        </div>
+        <!-- Empty groups -->
+        <EmptyState
+          v-if="chatGroups.length === 0"
+          icon="message-square"
+          title="No chat groups configured"
+          description="Add a group to get started."
+        />
 
-        <div v-else class="space-y-3">
+        <!-- Groups list -->
+        <div v-else class="bch__groups">
           <div
             v-for="(group, index) in chatGroups"
             :key="index"
-            class="bg-neutral-900 border border-neutral-800 rounded-xl p-4"
+            class="bch__group"
           >
-            <div class="flex items-start justify-between gap-4">
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-3 mb-2">
-                  <span class="text-sm font-semibold text-neutral-200">{{ group.GroupName || group.groupName || 'Unnamed' }}</span>
-                  <span class="text-xs px-2 py-0.5 bg-neutral-800 text-neutral-400 rounded">Priority: {{ group.Priority ?? 0 }}</span>
-                </div>
-
-                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
-                  <!-- Title -->
-                  <div>
-                    <span class="text-neutral-500">Title:</span>
-                    <div class="flex items-center gap-1 mt-0.5">
-                      <span
-                        class="inline-block w-3 h-3 rounded border border-neutral-600"
-                        :style="{ backgroundColor: group.Title?.Color || group.TitleColor || '#55aaff' }"
-                      />
-                      <span class="text-neutral-300">{{ group.Title?.Text || group.Title || '[Player]' }}</span>
-                    </div>
-                  </div>
-
-                  <!-- Name Color -->
-                  <div>
-                    <span class="text-neutral-500">Name Color:</span>
-                    <div class="flex items-center gap-1 mt-0.5">
-                      <span
-                        class="inline-block w-3 h-3 rounded border border-neutral-600"
-                        :style="{ backgroundColor: group.Username?.Color || group.NameColor || '#55aaff' }"
-                      />
-                      <span class="text-neutral-300">{{ group.Username?.Color || group.NameColor || '#55aaff' }}</span>
-                    </div>
-                  </div>
-
-                  <!-- Message Color -->
-                  <div>
-                    <span class="text-neutral-500">Message Color:</span>
-                    <div class="flex items-center gap-1 mt-0.5">
-                      <span
-                        class="inline-block w-3 h-3 rounded border border-neutral-600"
-                        :style="{ backgroundColor: group.Message?.Color || group.MessageColor || '#ffffff' }"
-                      />
-                      <span class="text-neutral-300">{{ group.Message?.Color || group.MessageColor || '#ffffff' }}</span>
-                    </div>
-                  </div>
-
-                  <!-- Format -->
-                  <div>
-                    <span class="text-neutral-500">Format:</span>
-                    <p class="text-neutral-300 mt-0.5 truncate">{{ group.Format?.Chat || group.Format || '{Title} {Username}: {Message}' }}</p>
-                  </div>
-                </div>
+            <div class="bch__group-main">
+              <div class="bch__group-header">
+                <span class="bch__group-name">{{ group.GroupName || group.groupName || 'Unnamed' }}</span>
+                <Badge tone="neutral" :mono="true">Priority: {{ group.Priority ?? 0 }}</Badge>
               </div>
 
-              <div class="flex items-center gap-2 shrink-0">
-                <button
-                  @click="editGroupAt(index)"
-                  class="p-1.5 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 rounded"
-                >
-                  <Edit class="w-4 h-4" />
-                </button>
-                <button
-                  @click="deleteGroup(index)"
-                  class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
+              <div class="bch__group-meta">
+                <!-- Title -->
+                <div class="bch__meta-item">
+                  <span class="bch__meta-label">Title</span>
+                  <div class="bch__meta-val">
+                    <span
+                      class="bch__color-dot"
+                      :style="{ backgroundColor: group.Title?.Color || group.TitleColor || '#55aaff' }"
+                    />
+                    <span>{{ group.Title?.Text || group.Title || '[Player]' }}</span>
+                  </div>
+                </div>
+
+                <!-- Name color -->
+                <div class="bch__meta-item">
+                  <span class="bch__meta-label">Name color</span>
+                  <div class="bch__meta-val">
+                    <span
+                      class="bch__color-dot"
+                      :style="{ backgroundColor: group.Username?.Color || group.NameColor || '#55aaff' }"
+                    />
+                    <span class="bch__mono">{{ group.Username?.Color || group.NameColor || '#55aaff' }}</span>
+                  </div>
+                </div>
+
+                <!-- Message color -->
+                <div class="bch__meta-item">
+                  <span class="bch__meta-label">Message color</span>
+                  <div class="bch__meta-val">
+                    <span
+                      class="bch__color-dot"
+                      :style="{ backgroundColor: group.Message?.Color || group.MessageColor || '#ffffff' }"
+                    />
+                    <span class="bch__mono">{{ group.Message?.Color || group.MessageColor || '#ffffff' }}</span>
+                  </div>
+                </div>
+
+                <!-- Format -->
+                <div class="bch__meta-item">
+                  <span class="bch__meta-label">Format</span>
+                  <div class="bch__meta-val bch__mono bch__truncate">{{ group.Format?.Chat || group.Format || '{Title} {Username}: {Message}' }}</div>
+                </div>
               </div>
             </div>
+
+            <div class="bch__group-actions">
+              <Button variant="ghost" size="sm" icon="pencil" @click="editGroupAt(index)" />
+              <Button variant="danger-soft" size="sm" icon="trash-2" @click="deleteGroup(index)" />
+            </div>
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Settings Tab -->
-      <div v-else-if="activeTab === 'settings'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">General Settings</h3>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Word Filter Enabled -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Word Filter</label>
-              <p class="text-xs text-neutral-500">Enable profanity/word filtering in chat</p>
+      <!-- Settings tab -->
+      <Panel v-else-if="activeTab === 'settings'" title="General settings">
+        <div class="bch__settings">
+          <!-- Toggle rows -->
+          <div class="bch__toggles">
+            <div class="bch__toggle-row">
+              <div class="bch__toggle-body">
+                <div class="bch__toggle-label">Word filter</div>
+                <div class="bch__toggle-sub">Enable profanity / word filtering in chat</div>
+              </div>
+              <Switch v-model="wordFilterEnabled" />
+            </div>
+            <div class="bch__toggle-row">
+              <div class="bch__toggle-body">
+                <div class="bch__toggle-label">Anti flood</div>
+                <div class="bch__toggle-sub">Prevent message spamming</div>
+              </div>
+              <Switch v-model="antiFloodEnabled" />
+            </div>
+            <div class="bch__toggle-row">
+              <div class="bch__toggle-body">
+                <div class="bch__toggle-label">Reverse title order</div>
+                <div class="bch__toggle-sub">Reverse the display order of chat titles</div>
+              </div>
+              <Switch v-model="reverseTitleOrder" />
+            </div>
+            <div class="bch__toggle-row">
+              <div class="bch__toggle-body">
+                <div class="bch__toggle-label">Use custom replacement</div>
+                <div class="bch__toggle-sub">Use a custom word instead of * for filtered words</div>
+              </div>
+              <Switch v-model="useCustomReplacement" />
+            </div>
+            <div class="bch__toggle-row">
+              <div class="bch__toggle-body">
+                <div class="bch__toggle-label">Enable player tagging</div>
+                <div class="bch__toggle-sub">Allow @mentions to highlight players in chat</div>
+              </div>
+              <Switch v-model="enablePlayerTagging" />
             </div>
-            <button
-              @click="setConfigValue('Word Filter.Enabled', !getConfigValue('Word Filter.Enabled', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Word Filter.Enabled', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Word Filter.Enabled', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
           </div>
 
-          <!-- Anti Flood Enabled -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Anti Flood</label>
-              <p class="text-xs text-neutral-500">Prevent message spamming</p>
-            </div>
-            <button
-              @click="setConfigValue('Anti Flood.Enabled', !getConfigValue('Anti Flood.Enabled', true))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Anti Flood.Enabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Anti Flood.Enabled', true) ? 'translate-x-5' : 'translate-x-0'"
+          <!-- Number / text inputs -->
+          <div class="bch__inputs">
+            <div class="bch__input-field">
+              <Input
+                label="Anti flood seconds"
+                hint="Minimum seconds between messages"
+                type="number"
+                :mono="true"
+                :model-value="String(getConfigValue('Anti Flood.Seconds', 1.5))"
+                @update:model-value="v => setConfigValue('Anti Flood.Seconds', Number(v ?? 1.5))"
               />
-            </button>
-          </div>
-
-          <!-- Reverse Title Order -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Reverse Title Order</label>
-              <p class="text-xs text-neutral-500">Reverse the display order of chat titles</p>
             </div>
-            <button
-              @click="setConfigValue('General.Reverse Title Order', !getConfigValue('General.Reverse Title Order', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('General.Reverse Title Order', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('General.Reverse Title Order', false) ? 'translate-x-5' : 'translate-x-0'"
+            <div class="bch__input-field">
+              <Input
+                label="Minimal tag characters"
+                hint="Minimum characters for player tag matching"
+                type="number"
+                :mono="true"
+                :model-value="String(getConfigValue('General.Minimal Characters', 2))"
+                @update:model-value="v => setConfigValue('General.Minimal Characters', Number(v ?? 2))"
               />
-            </button>
-          </div>
-
-          <!-- Use Custom Replacement -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Use Custom Replacement</label>
-              <p class="text-xs text-neutral-500">Use a custom word instead of * for filtered words</p>
             </div>
-            <button
-              @click="setConfigValue('Word Filter.Use Custom Replacement', !getConfigValue('Word Filter.Use Custom Replacement', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Word Filter.Use Custom Replacement', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Word Filter.Use Custom Replacement', false) ? 'translate-x-5' : 'translate-x-0'"
+            <div class="bch__input-field">
+              <Input
+                label="Filter replacement"
+                hint="Character used to replace filtered words"
+                :mono="true"
+                :model-value="String(getConfigValue('Word Filter.Replacement', '*'))"
+                @update:model-value="v => setConfigValue('Word Filter.Replacement', v ?? '*')"
               />
-            </button>
-          </div>
-
-          <!-- Enable Player Tagging -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Enable Player Tagging</label>
-              <p class="text-xs text-neutral-500">Allow @mentions to highlight players in chat</p>
             </div>
-            <button
-              @click="setConfigValue('General.Enable Player Tagging', !getConfigValue('General.Enable Player Tagging', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('General.Enable Player Tagging', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('General.Enable Player Tagging', false) ? 'translate-x-5' : 'translate-x-0'"
+            <div class="bch__input-field">
+              <Input
+                label="Custom replacement word"
+                hint="Custom word to replace filtered content"
+                :model-value="String(getConfigValue('Word Filter.Custom Replacement', 'Unicorn'))"
+                @update:model-value="v => setConfigValue('Word Filter.Custom Replacement', v ?? 'Unicorn')"
               />
-            </button>
+            </div>
           </div>
         </div>
+      </Panel>
+    </template>
 
-        <!-- Number / Text Inputs -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Anti Flood Seconds</label>
-            <p class="text-xs text-neutral-500 mb-2">Minimum seconds between messages</p>
-            <input
-              type="number"
-              step="0.1"
-              :value="getConfigValue('Anti Flood.Seconds', 1.5)"
-              @input="setConfigValue('Anti Flood.Seconds', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Minimal Tag Characters</label>
-            <p class="text-xs text-neutral-500 mb-2">Minimum characters for player tag matching</p>
-            <input
-              type="number"
-              :value="getConfigValue('General.Minimal Characters', 2)"
-              @input="setConfigValue('General.Minimal Characters', Number(($event.target as HTMLInputElement).value))"
-              min="1"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Filter Replacement</label>
-            <p class="text-xs text-neutral-500 mb-2">Character used to replace filtered words</p>
-            <input
-              type="text"
-              :value="getConfigValue('Word Filter.Replacement', '*')"
-              @input="setConfigValue('Word Filter.Replacement', ($event.target as HTMLInputElement).value)"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
-
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Custom Replacement Word</label>
-            <p class="text-xs text-neutral-500 mb-2">Custom word to replace filtered content</p>
-            <input
-              type="text"
-              :value="getConfigValue('Word Filter.Custom Replacement', 'Unicorn')"
-              @input="setConfigValue('Word Filter.Custom Replacement', ($event.target as HTMLInputElement).value)"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="bch__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="bch__modal">
+        <div class="bch__modal-head">
+          <h2 class="bch__modal-title">New BetterChat config</h2>
         </div>
-      </div>
-    </div>
-
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New BetterChat Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="newConfigName"
-              placeholder="e.g. Default Chat Settings"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleCreateConfig"
-            />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+        <div class="bch__modal-body">
+          <Input
+            v-model="newConfigNameModel"
+            label="Config name"
+            placeholder="e.g. Default Chat Settings"
+            @keydown.enter="handleCreateConfig"
+          />
+          <div class="bch__field">
+            <span class="bch__field-label">Description (optional)</span>
             <textarea
               v-model="newConfigDesc"
               rows="2"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
+              class="cc-textarea"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="bch__modal-foot">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current BetterChat config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleImport"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="bch__modal-backdrop" @click.self="showImportModal = false">
+      <div class="bch__modal">
+        <div class="bch__modal-head">
+          <h2 class="bch__modal-title">Import from server</h2>
+        </div>
+        <div class="bch__modal-body">
+          <p class="bch__modal-desc">Import the current BetterChat config from your live server. This will create a new config profile.</p>
+          <Input
+            v-model="importConfigNameModel"
+            label="Config name"
+            placeholder="e.g. Imported server config"
+            @keydown.enter="handleImport"
+          />
+        </div>
+        <div class="bch__modal-foot">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
 
-    <!-- Group Edit Modal -->
-    <div v-if="showGroupModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showGroupModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-lg max-h-[80vh] overflow-y-auto">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="text-lg font-semibold text-neutral-100">
-            {{ editingGroupIndex !== null ? 'Edit Group' : 'Add Group' }}
-          </h2>
-          <button @click="showGroupModal = false" class="text-neutral-400 hover:text-neutral-200">
-            <X class="w-5 h-5" />
-          </button>
+    <!-- Group edit modal -->
+    <div v-if="showGroupModal" class="bch__modal-backdrop" @click.self="showGroupModal = false">
+      <div class="bch__modal bch__modal--lg">
+        <div class="bch__modal-head">
+          <h2 class="bch__modal-title">{{ editingGroupIndex !== null ? 'Edit group' : 'Add group' }}</h2>
+          <Button variant="ghost" size="sm" icon="x" @click="showGroupModal = false" />
         </div>
+        <div class="bch__modal-body bch__modal-body--scroll">
+          <Input
+            v-model="editGroupName"
+            label="Group name"
+            placeholder="e.g. default, admin, vip"
+            :mono="true"
+          />
 
-        <div class="space-y-4">
-          <!-- Group Name -->
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Group Name</label>
-            <input
-              v-model="editGroup.GroupName"
-              placeholder="e.g. default, admin, vip"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
+          <Input
+            label="Priority"
+            hint="Higher priority groups display first (0 = highest)"
+            type="number"
+            :mono="true"
+            :model-value="String(editGroup.Priority ?? 0)"
+            @update:model-value="v => { editGroup.Priority = Number(v ?? 0) }"
+          />
+
+          <Input
+            v-model="editGroupTitleText"
+            label="Title text"
+            placeholder="e.g. [Admin]"
+          />
+
+          <!-- Colors -->
+          <div class="bch__colors">
+            <div class="bch__color-field">
+              <span class="bch__field-label">Title color</span>
+              <div class="bch__color-row">
+                <input type="color" v-model="editGroup.Title.Color" class="bch__color-picker" />
+                <Input v-model="editGroupTitleColor" :mono="true" size="sm" />
+              </div>
+            </div>
+            <div class="bch__color-field">
+              <span class="bch__field-label">Name color</span>
+              <div class="bch__color-row">
+                <input type="color" v-model="editGroup.Username.Color" class="bch__color-picker" />
+                <Input v-model="editGroupUsernameColor" :mono="true" size="sm" />
+              </div>
+            </div>
+            <div class="bch__color-field">
+              <span class="bch__field-label">Message color</span>
+              <div class="bch__color-row">
+                <input type="color" v-model="editGroup.Message.Color" class="bch__color-picker" />
+                <Input v-model="editGroupMessageColor" :mono="true" size="sm" />
+              </div>
+            </div>
           </div>
 
-          <!-- Priority -->
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Priority</label>
-            <p class="text-xs text-neutral-500 mb-1">Higher priority groups display first (0 = highest)</p>
-            <input
-              v-model.number="editGroup.Priority"
+          <!-- Font sizes -->
+          <div class="bch__sizes">
+            <Input
+              label="Title size"
               type="number"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              :mono="true"
+              :model-value="String(editGroup.Title?.Size ?? 15)"
+              @update:model-value="v => { editGroup.Title.Size = Number(v ?? 15) }"
+            />
+            <Input
+              label="Name size"
+              type="number"
+              :mono="true"
+              :model-value="String(editGroup.Username?.Size ?? 15)"
+              @update:model-value="v => { editGroup.Username.Size = Number(v ?? 15) }"
+            />
+            <Input
+              label="Message size"
+              type="number"
+              :mono="true"
+              :model-value="String(editGroup.Message?.Size ?? 15)"
+              @update:model-value="v => { editGroup.Message.Size = Number(v ?? 15) }"
             />
           </div>
 
-          <!-- Title -->
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Title Text</label>
-            <input
-              v-model="editGroup.Title.Text"
-              placeholder="e.g. [Admin]"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
-
-          <!-- Colors Row -->
-          <div class="grid grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-400 mb-1">Title Color</label>
-              <div class="flex items-center gap-2">
-                <input
-                  type="color"
-                  v-model="editGroup.Title.Color"
-                  class="w-8 h-8 rounded border border-neutral-700 bg-transparent cursor-pointer"
-                />
-                <input
-                  v-model="editGroup.Title.Color"
-                  class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-xs"
-                />
-              </div>
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-400 mb-1">Name Color</label>
-              <div class="flex items-center gap-2">
-                <input
-                  type="color"
-                  v-model="editGroup.Username.Color"
-                  class="w-8 h-8 rounded border border-neutral-700 bg-transparent cursor-pointer"
-                />
-                <input
-                  v-model="editGroup.Username.Color"
-                  class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-xs"
-                />
-              </div>
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-400 mb-1">Message Color</label>
-              <div class="flex items-center gap-2">
-                <input
-                  type="color"
-                  v-model="editGroup.Message.Color"
-                  class="w-8 h-8 rounded border border-neutral-700 bg-transparent cursor-pointer"
-                />
-                <input
-                  v-model="editGroup.Message.Color"
-                  class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-xs"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- Font Sizes -->
-          <div class="grid grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-400 mb-1">Title Size</label>
-              <input
-                v-model.number="editGroup.Title.Size"
-                type="number"
-                min="8"
-                max="30"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-400 mb-1">Name Size</label>
-              <input
-                v-model.number="editGroup.Username.Size"
-                type="number"
-                min="8"
-                max="30"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-400 mb-1">Message Size</label>
-              <input
-                v-model.number="editGroup.Message.Size"
-                type="number"
-                min="8"
-                max="30"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              />
-            </div>
-          </div>
-
-          <!-- Format Strings -->
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Chat Format</label>
-            <p class="text-xs text-neutral-500 mb-1">Variables: {Title} {Username} {Message}</p>
-            <input
-              v-model="editGroup.Format.Chat"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Console Format</label>
-            <input
-              v-model="editGroup.Format.Console"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
+          <Input
+            v-model="editGroupFormatChat"
+            label="Chat format"
+            hint="Variables: {Title} {Username} {Message}"
+            :mono="true"
+          />
+          <Input
+            v-model="editGroupFormatConsole"
+            label="Console format"
+            :mono="true"
+          />
 
           <!-- Hidden toggles -->
-          <div class="flex items-center gap-6">
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input type="checkbox" v-model="editGroup.Title.Hidden" class="rounded bg-neutral-800 border-neutral-600" />
+          <div class="bch__hidden-toggles">
+            <label class="bch__check-label">
+              <input type="checkbox" v-model="editGroup.Title.Hidden" class="bch__check" />
               Hidden
             </label>
-            <label class="flex items-center gap-2 text-sm text-neutral-300 cursor-pointer">
-              <input type="checkbox" v-model="editGroup.Title.HiddenIfNotPrimary" class="rounded bg-neutral-800 border-neutral-600" />
+            <label class="bch__check-label">
+              <input type="checkbox" v-model="editGroup.Title.HiddenIfNotPrimary" class="bch__check" />
               Hidden if not primary
             </label>
           </div>
-
-          <div class="flex justify-end gap-2 pt-2">
-            <button @click="showGroupModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="saveGroup"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 text-sm"
-            >
-              {{ editingGroupIndex !== null ? 'Update' : 'Add' }}
-            </button>
-          </div>
+        </div>
+        <div class="bch__modal-foot">
+          <Button variant="ghost" @click="showGroupModal = false">Cancel</Button>
+          <Button icon="check" @click="saveGroup">{{ editingGroupIndex !== null ? 'Update' : 'Add' }}</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+/* ---- Page shell ---- */
+.bch { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* ---- Page head ---- */
+.bch__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.bch__head-id { display: flex; align-items: center; gap: 12px; }
+.bch__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.bch__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.bch__head-actions { display: flex; align-items: center; gap: 8px; }
+
+/* ---- Toolbar ---- */
+.bch__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.bch__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
+.bch__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+
+/* ---- Loading ---- */
+.bch__loading { display: flex; justify-content: center; padding: 48px 0; }
+.bch__spinner {
+  width: 28px; height: 28px; border-radius: 50%;
+  border: 2px solid var(--accent); border-top-color: transparent;
+  animation: bch-spin 0.6s linear infinite;
+}
+@keyframes bch-spin { to { transform: rotate(360deg); } }
+
+/* ---- Groups list ---- */
+.bch__groups { display: flex; flex-direction: column; gap: 10px; }
+.bch__group {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
+  padding: 14px; border-radius: var(--radius-md);
+  background: var(--surface-raised-2); box-shadow: var(--ring-default);
+}
+.bch__group-main { flex: 1; min-width: 0; }
+.bch__group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.bch__group-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.bch__group-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+@media (max-width: 768px) { .bch__group-meta { grid-template-columns: repeat(2, 1fr); } }
+.bch__meta-item { min-width: 0; }
+.bch__meta-label { font-size: var(--text-2xs); color: var(--text-muted); display: block; margin-bottom: 3px; }
+.bch__meta-val { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
+.bch__group-actions { display: flex; align-items: center; gap: 6px; flex: none; }
+
+/* ---- Misc helpers ---- */
+.bch__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.bch__truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bch__color-dot {
+  width: 12px; height: 12px; border-radius: var(--radius-sm);
+  border: 1px solid var(--border-default); flex: none;
+}
+
+/* ---- Settings ---- */
+.bch__settings { display: flex; flex-direction: column; gap: 24px; }
+.bch__toggles { display: flex; flex-direction: column; }
+.bch__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 14px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.bch__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.bch__toggle-row:first-child { padding-top: 0; }
+.bch__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.bch__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.bch__inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
+@media (max-width: 640px) { .bch__inputs { grid-template-columns: 1fr; } }
+.bch__input-field { display: flex; flex-direction: column; }
+
+/* ---- Modal ---- */
+.bch__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.bch__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; display: flex; flex-direction: column;
+}
+.bch__modal--lg { max-width: 560px; }
+.bch__modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
+}
+.bch__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.bch__modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+.bch__modal-body--scroll { max-height: 70vh; overflow-y: auto; }
+.bch__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.bch__modal-foot {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 14px 20px; border-top: 1px solid var(--border-subtle);
+}
+
+/* ---- Color pickers ---- */
+.bch__colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+@media (max-width: 480px) { .bch__colors { grid-template-columns: 1fr; } }
+.bch__color-field { display: flex; flex-direction: column; gap: 6px; }
+.bch__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+.bch__color-row { display: flex; align-items: center; gap: 8px; }
+.bch__color-picker {
+  width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none;
+  border: 1px solid var(--border-default); background: transparent; cursor: pointer; padding: 2px;
+}
+
+/* ---- Font sizes ---- */
+.bch__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+
+/* ---- Hidden checkboxes ---- */
+.bch__hidden-toggles { display: flex; gap: 24px; }
+.bch__check-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; user-select: none; }
+.bch__check { accent-color: var(--accent); cursor: pointer; }
+
+/* ---- Generic field label ---- */
+.bch__field { display: flex; flex-direction: column; gap: 6px; }
+
+/* ---- Textarea ---- */
+.cc-textarea {
+  background: var(--surface-inset); border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  border: 0; outline: 0; padding: 9px 11px; resize: none; width: 100%;
+  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
+  transition: var(--transition-colors);
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+</style>
diff --git a/frontend/src/views/admin/FurnaceSplitterView.vue b/frontend/src/views/admin/FurnaceSplitterView.vue
index 9b70d76..3d5b291 100644
--- a/frontend/src/views/admin/FurnaceSplitterView.vue
+++ b/frontend/src/views/admin/FurnaceSplitterView.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useFurnaceSplitterStore } from '@/stores/furnacesplitter'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Flame,
-  Settings as SettingsIcon,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useFurnaceSplitterStore()
 
@@ -57,13 +53,13 @@ function setConfigValue(path: string, value: any) {
 
 // Furnace types with display names
 const furnaceTypes = [
-  { key: 'furnace', label: 'Small Furnace', description: 'Standard furnace for smelting ores' },
-  { key: 'furnace.large', label: 'Large Furnace', description: 'Large furnace with more slots' },
+  { key: 'furnace', label: 'Small furnace', description: 'Standard furnace for smelting ores' },
+  { key: 'furnace.large', label: 'Large furnace', description: 'Large furnace with more slots' },
   { key: 'campfire', label: 'Campfire', description: 'Basic campfire for cooking' },
-  { key: 'refinery_small_deployed', label: 'Small Oil Refinery', description: 'Refines crude oil into low grade fuel' },
-  { key: 'skull_fire_pit', label: 'Skull Fire Pit', description: 'Decorative fire pit for cooking' },
-  { key: 'hobobarrel_static', label: 'Hobo Barrel', description: 'Barrel fire for cooking' },
-  { key: 'electricfurnace.deployed', label: 'Electric Furnace', description: 'Electricity-powered furnace' },
+  { key: 'refinery_small_deployed', label: 'Small oil refinery', description: 'Refines crude oil into low grade fuel' },
+  { key: 'skull_fire_pit', label: 'Skull fire pit', description: 'Decorative fire pit for cooking' },
+  { key: 'hobobarrel_static', label: 'Hobo barrel', description: 'Barrel fire for cooking' },
+  { key: 'electricfurnace.deployed', label: 'Electric furnace', description: 'Electricity-powered furnace' },
 ]
 
 // --- Action handlers ---
@@ -111,261 +107,334 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// Helper: coerce getConfigValue result to boolean for Switch
+function getBool(path: string, def: boolean): boolean {
+  return !!getConfigValue(path, def)
+}
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Furnace Splitter Config</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="fsv">
+    <!-- Page head -->
+    <div class="fsv__head">
+      <div class="fsv__head-id">
+        <div class="fsv__head-chip">
+          <Icon name="flame" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="fsv__title">Furnace splitter</h1>
+        </div>
       </div>
+      <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config action bar -->
+    <Panel>
+      <div class="fsv__bar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="fsv__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="fsv__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          icon="save"
+          size="sm"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          :loading="store.isSaving"
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          icon="play"
+          size="sm"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          :loading="store.isApplying"
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          icon="download"
+          size="sm"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <Button
+          variant="danger-soft"
+          icon="trash-2"
+          size="sm"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          class="fsv__bar-delete"
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="fsv__loading">
+      <span class="fsv__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Flame class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No FurnaceSplitter Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="flame"
+        title="No FurnaceSplitter config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Furnace Splitter Settings -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center gap-2">
-          <SettingsIcon class="w-5 h-5 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Splitter Settings</h3>
-        </div>
-
-        <!-- Global enabled -->
-        <div class="flex items-center justify-between">
-          <div>
-            <label class="text-sm text-neutral-200">Enabled</label>
-            <p class="text-xs text-neutral-500">Globally enable or disable furnace splitting</p>
-          </div>
-          <button
-            @click="setConfigValue('Enabled', !getConfigValue('Enabled', true))"
-            class="relative w-11 h-6 rounded-full transition-colors"
-            :class="getConfigValue('Enabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-          >
-            <span
-              class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-              :class="getConfigValue('Enabled', true) ? 'translate-x-5' : 'translate-x-0'"
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Splitter settings -->
+      <Panel title="Splitter settings">
+        <div class="fsv__toggles">
+          <div class="fsv__toggle-row">
+            <div>
+              <div class="fsv__toggle-label">Enabled</div>
+              <div class="fsv__toggle-sub">Globally enable or disable furnace splitting</div>
+            </div>
+            <Switch
+              :model-value="getBool('Enabled', true)"
+              @update:model-value="v => setConfigValue('Enabled', v)"
             />
-          </button>
+          </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Per-Furnace Type Settings -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center gap-2">
-          <Flame class="w-5 h-5 text-neutral-400" />
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Furnace Type Settings</h3>
-        </div>
-
-        <div class="space-y-4">
+      <!-- Per-furnace type settings -->
+      <Panel title="Furnace type settings">
+        <div class="fsv__furnace-list">
           <div
             v-for="furnace in furnaceTypes"
             :key="furnace.key"
-            class="bg-neutral-800/50 border border-neutral-700/50 rounded-lg p-4"
+            class="fsv__furnace-card"
           >
-            <div class="flex items-center justify-between mb-3">
+            <div class="fsv__furnace-head">
               <div>
-                <h4 class="text-sm font-medium text-neutral-200">{{ furnace.label }}</h4>
-                <p class="text-xs text-neutral-500">{{ furnace.description }}</p>
+                <div class="fsv__furnace-name">{{ furnace.label }}</div>
+                <div class="fsv__furnace-desc">{{ furnace.description }}</div>
               </div>
-              <button
-                @click="setConfigValue(`Furnaces.${furnace.key}.Enabled`, !getConfigValue(`Furnaces.${furnace.key}.Enabled`, true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue(`Furnaces.${furnace.key}.Enabled`, true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue(`Furnaces.${furnace.key}.Enabled`, true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getBool(`Furnaces.${furnace.key}.Enabled`, true)"
+                @update:model-value="v => setConfigValue(`Furnaces.${furnace.key}.Enabled`, v)"
+              />
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="block text-xs text-neutral-500 mb-1">Default Split Stacks</label>
+            <div class="fsv__furnace-fields">
+              <div class="fsv__field">
+                <label class="fsv__field-label">Default split stacks</label>
                 <input
                   type="number"
+                  class="cc-num-input"
                   :value="getConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, 0)"
-                  @input="setConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, Number(($event.target as HTMLInputElement).value))"
                   min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-3 py-2 text-neutral-200 text-sm"
                   placeholder="0 = fill all slots"
+                  @input="setConfigValue(`Furnaces.${furnace.key}.DefaultSplitCount`, Number(($event.target as HTMLInputElement).value))"
                 />
               </div>
-              <div>
-                <label class="block text-xs text-neutral-500 mb-1">Fuel Multiplier</label>
+              <div class="fsv__field">
+                <label class="fsv__field-label">Fuel multiplier</label>
                 <input
                   type="number"
                   step="0.1"
+                  class="cc-num-input fsv__mono"
                   :value="getConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, 1.0)"
-                  @input="setConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, Number(($event.target as HTMLInputElement).value))"
                   min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded px-3 py-2 text-neutral-200 text-sm"
+                  @input="setConfigValue(`Furnaces.${furnace.key}.FuelMultiplier`, Number(($event.target as HTMLInputElement).value))"
                 />
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Permission Groups -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-        <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Permission</h3>
-        <p class="text-xs text-neutral-500">
-          The permission <code class="text-neutral-300 bg-neutral-800 px-1 rounded">furnacesplitter.use</code> controls which players can use the furnace splitting feature. Assign this permission via your Oxide permission system.
+      <!-- Permission -->
+      <Panel title="Permission">
+        <p class="fsv__perm-text">
+          The permission <code class="fsv__code">furnacesplitter.use</code> controls which players can use the furnace splitting feature. Assign this permission via your Oxide permission system.
         </p>
-      </div>
-    </div>
+      </Panel>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New FurnaceSplitter Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="fsv__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="fsv__modal">
+        <h2 class="fsv__modal-title">New FurnaceSplitter config</h2>
+        <div class="fsv__modal-body">
+          <div class="fsv__field">
+            <label class="fsv__field-label">Config name</label>
             <input
               v-model="newConfigName"
-              placeholder="e.g. Default Furnace Settings"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Default furnace settings"
               @keydown.enter="handleCreateConfig"
             />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+          <div class="fsv__field">
+            <label class="fsv__field-label">Description (optional)</label>
             <textarea
               v-model="newConfigDesc"
               rows="2"
+              class="cc-textarea"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="fsv__modal-footer">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current FurnaceSplitter config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="fsv__modal-backdrop" @click.self="showImportModal = false">
+      <div class="fsv__modal">
+        <h2 class="fsv__modal-title">Import from server</h2>
+        <p class="fsv__modal-desc">Import the current FurnaceSplitter config from your live server. This will create a new config profile.</p>
+        <div class="fsv__modal-body">
+          <div class="fsv__field">
+            <label class="fsv__field-label">Config name</label>
             <input
               v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Imported server config"
               @keydown.enter="handleImport"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+        </div>
+        <div class="fsv__modal-footer">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.fsv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.fsv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.fsv__head-id { display: flex; align-items: center; gap: 12px; }
+.fsv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.fsv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Config action bar */
+.fsv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.fsv__config-select {
+  appearance: none; height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.fsv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.fsv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+.fsv__bar-delete { margin-left: auto; }
+
+/* Loading */
+.fsv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+.fsv__spinner {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
+  border-top-color: transparent; animation: fsv-spin 0.6s linear infinite;
+}
+@keyframes fsv-spin { to { transform: rotate(360deg); } }
+
+/* Toggles */
+.fsv__toggles { display: flex; flex-direction: column; }
+.fsv__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
+}
+.fsv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.fsv__toggle-row:first-child { padding-top: 0; }
+.fsv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.fsv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+
+/* Furnace cards */
+.fsv__furnace-list { display: flex; flex-direction: column; gap: 12px; }
+.fsv__furnace-card {
+  background: var(--surface-raised-2); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px; display: flex; flex-direction: column; gap: 12px;
+}
+.fsv__furnace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.fsv__furnace-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.fsv__furnace-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.fsv__furnace-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+@media (max-width: 500px) { .fsv__furnace-fields { grid-template-columns: 1fr; } }
+
+/* Fields */
+.fsv__field { display: flex; flex-direction: column; gap: 6px; }
+.fsv__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+
+/* Permission text */
+.fsv__perm-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
+.fsv__code {
+  font-family: var(--font-mono); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
+  background: var(--surface-raised-2); color: var(--text-primary); padding: 1px 6px;
+  border-radius: var(--radius-sm); box-shadow: var(--ring-default);
+}
+.fsv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* Shared token inputs */
+.cc-textarea {
+  width: 100%; background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
+  resize: none; outline: 0; line-height: 1.5;
+}
+.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-text-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-num-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* Modal */
+.fsv__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.fsv__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.fsv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.fsv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.fsv__modal-body { display: flex; flex-direction: column; gap: 12px; }
+.fsv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+</style>
diff --git a/frontend/src/views/admin/GatherManagerView.vue b/frontend/src/views/admin/GatherManagerView.vue
index c6811a1..2047c6d 100644
--- a/frontend/src/views/admin/GatherManagerView.vue
+++ b/frontend/src/views/admin/GatherManagerView.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useGatherStore } from '@/stores/gather'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Pickaxe,
-  Settings as SettingsIcon,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useGatherStore()
 
@@ -20,51 +16,51 @@ const newConfigName = ref('')
 const newConfigDesc = ref('')
 const importConfigName = ref('')
 
-const tabs = [
-  { key: 'resources', label: 'Resource Rates', icon: Pickaxe },
-  { key: 'advanced', label: 'Advanced', icon: SettingsIcon },
+const tabItems = [
+  { value: 'resources', label: 'Resource rates', icon: 'pickaxe' },
+  { value: 'advanced', label: 'Advanced', icon: 'settings' },
 ]
 
 // Resource definitions for the main gather tab
 const gatherResources = [
   { key: 'Wood', label: 'Wood' },
   { key: 'Stones', label: 'Stones' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
-  { key: 'HQM Ore', label: 'HQM Ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
   { key: 'Cloth', label: 'Cloth' },
   { key: 'Leather', label: 'Leather' },
-  { key: 'Animal Fat', label: 'Animal Fat' },
-  { key: 'Bone Fragments', label: 'Bone Fragments' },
+  { key: 'Animal Fat', label: 'Animal fat' },
+  { key: 'Bone Fragments', label: 'Bone fragments' },
 ]
 
 // Advanced resource categories
 const pickupResources = [
   { key: 'Wood', label: 'Wood' },
   { key: 'Stones', label: 'Stones' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
 ]
 
 const quarryResources = [
-  { key: 'HQM Ore', label: 'HQM Ore' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
   { key: 'Stones', label: 'Stones' },
 ]
 
 const excavatorResources = [
-  { key: 'HQM Ore', label: 'HQM Ore' },
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
   { key: 'Stones', label: 'Stones' },
 ]
 
 const surveyResources = [
-  { key: 'Metal Ore', label: 'Metal Ore' },
-  { key: 'Sulfur Ore', label: 'Sulfur Ore' },
+  { key: 'Metal Ore', label: 'Metal ore' },
+  { key: 'Sulfur Ore', label: 'Sulfur ore' },
   { key: 'Stones', label: 'Stones' },
-  { key: 'HQM Ore', label: 'HQM Ore' },
+  { key: 'HQM Ore', label: 'HQM ore' },
 ]
 
 const presets = [
@@ -167,368 +163,428 @@ async function handleImport() {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Gather Rates</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="gv">
+    <!-- Page head -->
+    <div class="gv__head">
+      <div class="gv__head-id">
+        <div class="gv__head-chip">
+          <Icon name="pickaxe" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="gv__title">Gather rates</h1>
+        </div>
       </div>
+      <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config action bar -->
+    <Panel>
+      <div class="gv__bar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="gv__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="gv__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          icon="save"
+          size="sm"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          :loading="store.isSaving"
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          icon="play"
+          size="sm"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          :loading="store.isApplying"
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          icon="download"
+          size="sm"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <Button
+          variant="danger-soft"
+          icon="trash-2"
+          size="sm"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          class="gv__bar-delete"
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="gv__loading">
+      <span class="gv__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Pickaxe class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Gather Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="pickaxe"
+        title="No gather config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
-      <!-- Resource Rates Tab -->
-      <div v-if="activeTab === 'resources'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <div class="flex items-center justify-between">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Gather Resource Modifiers</h3>
-          <div class="flex items-center gap-2">
-            <span class="text-xs text-neutral-500 mr-2">Presets:</span>
+      <!-- Resource rates tab -->
+      <Panel v-if="activeTab === 'resources'" title="Gather resource modifiers">
+        <template #actions>
+          <div class="gv__presets">
+            <span class="gv__presets-label">Presets:</span>
             <button
               v-for="preset in presets"
               :key="preset.value"
+              class="gv__preset-btn"
               @click="applyPreset(preset.value)"
-              class="px-3 py-1 text-xs bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 hover:text-white transition-colors"
-            >
-              {{ preset.label }}
-            </button>
+            >{{ preset.label }}</button>
           </div>
-        </div>
+        </template>
 
-        <div class="space-y-4">
+        <div class="gv__rate-list">
           <div
             v-for="resource in gatherResources"
             :key="resource.key"
-            class="flex items-center gap-4"
+            class="gv__rate-row"
           >
-            <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+            <label class="gv__rate-label">{{ resource.label }}</label>
             <input
               type="range"
               :value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)"
-              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               min="0.1"
               max="100"
               step="0.1"
-              class="flex-1 accent-oxide-500"
+              class="gv__slider"
+              style="accent-color: var(--accent)"
+              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
             />
             <input
               type="number"
               :value="getConfigValue(`GatherResourceModifiers.${resource.key}`, 1)"
-              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               min="0.1"
               max="1000"
               step="0.1"
-              class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+              class="cc-num-input gv__rate-num"
+              @input="setConfigValue(`GatherResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
             />
-            <span class="text-xs text-neutral-500 w-4">x</span>
+            <span class="gv__rate-unit">x</span>
           </div>
         </div>
-      </div>
+      </Panel>
 
-      <!-- Advanced Tab -->
-      <div v-else-if="activeTab === 'advanced'" class="space-y-6">
-        <!-- Pickup Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Pickup Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Modify rates for resources picked up from the ground (small rocks, wood piles).</p>
-          <div class="space-y-4">
+      <!-- Advanced tab -->
+      <template v-else-if="activeTab === 'advanced'">
+        <!-- Pickup -->
+        <Panel title="Pickup resource modifiers" subtitle="Modify rates for resources picked up from the ground (small rocks, wood piles).">
+          <div class="gv__rate-list">
             <div
               v-for="resource in pickupResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`PickupResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`PickupResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Quarry Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Quarry Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Scale resource output from Mining Quarries.</p>
-          <div class="space-y-4">
+        <!-- Quarry -->
+        <Panel title="Quarry resource modifiers" subtitle="Scale resource output from mining quarries.">
+          <div class="gv__rate-list">
             <div
               v-for="resource in quarryResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`QuarryResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`QuarryResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Excavator Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Excavator Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Scale resource output from the Giant Excavator.</p>
-          <div class="space-y-4">
+        <!-- Excavator -->
+        <Panel title="Excavator resource modifiers" subtitle="Scale resource output from the giant excavator.">
+          <div class="gv__rate-list">
             <div
               v-for="resource in excavatorResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`ExcavatorResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`ExcavatorResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Survey Resource Modifiers -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Survey Charge Resource Modifiers</h3>
-          <p class="text-xs text-neutral-500">Modify resource amounts from Survey Charge grenades.</p>
-          <div class="space-y-4">
+        <!-- Survey -->
+        <Panel title="Survey charge resource modifiers" subtitle="Modify resource amounts from survey charge grenades.">
+          <div class="gv__rate-list">
             <div
               v-for="resource in surveyResources"
               :key="resource.key"
-              class="flex items-center gap-4"
+              class="gv__rate-row"
             >
-              <label class="text-sm text-neutral-200 w-32 flex-shrink-0">{{ resource.label }}</label>
+              <label class="gv__rate-label">{{ resource.label }}</label>
               <input
                 type="range"
                 :value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="100"
                 step="0.1"
-                class="flex-1 accent-oxide-500"
+                class="gv__slider"
+                style="accent-color: var(--accent)"
+                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
               <input
                 type="number"
                 :value="getConfigValue(`SurveyResourceModifiers.${resource.key}`, 1)"
-                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
                 min="0.1"
                 max="1000"
                 step="0.1"
-                class="w-20 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1 text-neutral-200 text-sm text-center"
+                class="cc-num-input gv__rate-num"
+                @input="setConfigValue(`SurveyResourceModifiers.${resource.key}`, Number(($event.target as HTMLInputElement).value))"
               />
-              <span class="text-xs text-neutral-500 w-4">x</span>
+              <span class="gv__rate-unit">x</span>
             </div>
           </div>
-        </div>
-      </div>
-    </div>
+        </Panel>
+      </template>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Gather Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="gv__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="gv__modal">
+        <h2 class="gv__modal-title">New gather config</h2>
+        <div class="gv__modal-body">
+          <div class="gv__field">
+            <label class="gv__field-label">Config name</label>
             <input
               v-model="newConfigName"
-              placeholder="e.g. 3x Gather Rates"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. 3x gather rates"
               @keydown.enter="handleCreateConfig"
             />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+          <div class="gv__field">
+            <label class="gv__field-label">Description (optional)</label>
             <textarea
               v-model="newConfigDesc"
               rows="2"
+              class="cc-textarea"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="gv__modal-footer">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current GatherManager config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="gv__modal-backdrop" @click.self="showImportModal = false">
+      <div class="gv__modal">
+        <h2 class="gv__modal-title">Import from server</h2>
+        <p class="gv__modal-desc">Import the current GatherManager config from your live server. This will create a new config profile.</p>
+        <div class="gv__modal-body">
+          <div class="gv__field">
+            <label class="gv__field-label">Config name</label>
             <input
               v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              type="text"
+              class="cc-text-input"
+              placeholder="e.g. Imported server config"
               @keydown.enter="handleImport"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+        </div>
+        <div class="gv__modal-footer">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.gv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.gv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.gv__head-id { display: flex; align-items: center; gap: 12px; }
+.gv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.gv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Config action bar */
+.gv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.gv__config-select {
+  appearance: none; height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.gv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.gv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+.gv__bar-delete { margin-left: auto; }
+
+/* Loading */
+.gv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+.gv__spinner {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
+  border-top-color: transparent; animation: gv-spin 0.6s linear infinite;
+}
+@keyframes gv-spin { to { transform: rotate(360deg); } }
+
+/* Presets */
+.gv__presets { display: flex; align-items: center; gap: 6px; }
+.gv__presets-label { font-size: var(--text-xs); color: var(--text-tertiary); }
+.gv__preset-btn {
+  height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
+  background: var(--surface-raised-2); color: var(--text-secondary);
+  font-size: var(--text-xs); font-weight: 600; cursor: pointer;
+  box-shadow: var(--ring-default); transition: var(--transition-colors);
+}
+.gv__preset-btn:hover { background: var(--surface-active); color: var(--text-primary); }
+
+/* Rate rows */
+.gv__rate-list { display: flex; flex-direction: column; gap: 12px; }
+.gv__rate-row { display: flex; align-items: center; gap: 12px; }
+.gv__rate-label { font-size: var(--text-sm); color: var(--text-primary); width: 120px; flex: none; }
+.gv__slider { flex: 1; cursor: pointer; }
+.gv__rate-num {
+  width: 72px; height: var(--control-h-sm); flex: none;
+  text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+}
+.gv__rate-unit { font-size: var(--text-xs); color: var(--text-tertiary); width: 12px; flex: none; }
+
+/* Shared token inputs */
+.cc-textarea {
+  width: 100%; background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
+  resize: none; outline: 0; line-height: 1.5;
+}
+.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-text-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-text-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-num-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+
+/* Fields */
+.gv__field { display: flex; flex-direction: column; gap: 6px; }
+.gv__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+
+/* Modal */
+.gv__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.gv__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.gv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.gv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.gv__modal-body { display: flex; flex-direction: column; gap: 12px; }
+.gv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+</style>
diff --git a/frontend/src/views/admin/KitsView.vue b/frontend/src/views/admin/KitsView.vue
index 69d3f24..85aee4d 100644
--- a/frontend/src/views/admin/KitsView.vue
+++ b/frontend/src/views/admin/KitsView.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useKitsStore } from '@/stores/kits'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Package,
-  Settings as SettingsIcon,
-  Edit,
-  X,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useKitsStore()
 
@@ -23,10 +20,10 @@ const newConfigDesc = ref('')
 const importConfigName = ref('')
 const editingKitIndex = ref<number | null>(null)
 
-const tabs = [
-  { key: 'kits', label: 'Kits List', icon: Package },
-  { key: 'editor', label: 'Kit Editor', icon: Edit },
-  { key: 'settings', label: 'Settings', icon: SettingsIcon },
+const tabItems = [
+  { value: 'kits', label: 'Kits list', icon: 'package' },
+  { value: 'editor', label: 'Kit editor', icon: 'pencil' },
+  { value: 'settings', label: 'Settings', icon: 'settings' },
 ]
 
 onMounted(async () => {
@@ -203,576 +200,584 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// DS Input requires string v-model; modal fields are already string refs — direct bind.
+// Config selector uses a bare <select> because Select.vue's options prop doesn't support
+// option-level conditional text (" (Active)" suffix).
+
+// Switch helper: convert getConfigValue result to boolean for Switch v-model
+function getBool(path: string, def: boolean): boolean {
+  return !!getConfigValue(path, def)
+}
+
+const containerOptions = [
+  { value: 'main', label: 'Main' },
+  { value: 'wear', label: 'Wear' },
+  { value: 'belt', label: 'Belt' },
+]
+
+const currencyOptions = [
+  { value: 'Scrap', label: 'Scrap' },
+  { value: 'Economics', label: 'Economics' },
+  { value: 'ServerRewards', label: 'ServerRewards' },
+]
+
+// Computed string binding for currency Select (DS model is string | undefined)
+const currencyValue = computed({
+  get: () => String(getConfigValue('Currency used for purchase costs (Scrap, Economics, ServerRewards)', 'Scrap') ?? 'Scrap'),
+  set: (v: string | undefined) => setConfigValue('Currency used for purchase costs (Scrap, Economics, ServerRewards)', v ?? 'Scrap'),
+})
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Kits Config</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="kv">
+    <!-- Page head -->
+    <div class="kv__head">
+      <div class="kv__head-id">
+        <div class="kv__head-chip">
+          <Icon name="package" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="kv__title">Kits</h1>
+        </div>
       </div>
+      <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config action bar -->
+    <Panel>
+      <div class="kv__bar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="kv__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (Active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="kv__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          icon="save"
+          size="sm"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          :loading="store.isSaving"
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          icon="play"
+          size="sm"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          :loading="store.isApplying"
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          icon="download"
+          size="sm"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <Button
+          variant="danger-soft"
+          icon="trash-2"
+          size="sm"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          class="kv__bar-delete"
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="kv__loading">
+      <span class="kv__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Package class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Kits Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="package"
+        title="No kits config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Tab bar -->
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
-      <!-- Kits List Tab -->
-      <div v-if="activeTab === 'kits'" class="space-y-4">
-        <div class="flex items-center justify-between">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Defined Kits</h3>
-          <button
-            @click="addKit"
-            class="flex items-center gap-2 px-3 py-1.5 bg-oxide-500/10 text-oxide-400 rounded-lg hover:bg-oxide-500/20 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Kit
-          </button>
-        </div>
+      <!-- Kits list tab -->
+      <template v-if="activeTab === 'kits'">
+        <Panel>
+          <template #actions>
+            <Button size="sm" icon="plus" variant="secondary" @click="addKit">Add kit</Button>
+          </template>
 
-        <div v-if="kitsList.length === 0" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center">
-          <p class="text-neutral-500">No kits defined yet. Add your first kit or import from server.</p>
-        </div>
+          <EmptyState
+            v-if="kitsList.length === 0"
+            icon="package"
+            title="No kits defined"
+            description="Add your first kit or import from server."
+          />
 
-        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div
-            v-for="(kit, index) in kitsList"
-            :key="index"
-            class="bg-neutral-900 border border-neutral-800 rounded-xl p-4 space-y-3"
-          >
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-neutral-200">{{ kit.Name || 'Unnamed Kit' }}</h4>
-                <p v-if="kit.Description" class="text-xs text-neutral-500 mt-1">{{ kit.Description }}</p>
+          <div v-else class="kv__kit-grid">
+            <div
+              v-for="(kit, index) in kitsList"
+              :key="index"
+              class="kv__kit-card"
+            >
+              <div class="kv__kit-card-head">
+                <div>
+                  <div class="kv__kit-name">{{ kit.Name || 'Unnamed kit' }}</div>
+                  <div v-if="kit.Description" class="kv__kit-desc">{{ kit.Description }}</div>
+                </div>
+                <div class="kv__kit-actions">
+                  <button class="kv__icon-btn" title="Edit kit" @click="editKit(index)">
+                    <Icon name="pencil" :size="15" />
+                  </button>
+                  <button class="kv__icon-btn kv__icon-btn--danger" title="Delete kit" @click="deleteKit(index)">
+                    <Icon name="trash-2" :size="15" />
+                  </button>
+                </div>
               </div>
-              <div class="flex items-center gap-1">
-                <button
-                  @click="editKit(index)"
-                  class="p-1.5 text-neutral-400 hover:text-oxide-400 transition-colors"
-                  title="Edit kit"
-                >
-                  <Edit class="w-4 h-4" />
-                </button>
-                <button
-                  @click="deleteKit(index)"
-                  class="p-1.5 text-neutral-400 hover:text-red-400 transition-colors"
-                  title="Delete kit"
-                >
-                  <Trash2 class="w-4 h-4" />
-                </button>
-              </div>
-            </div>
 
-            <div class="grid grid-cols-2 gap-2 text-xs">
-              <div>
-                <span class="text-neutral-500">Permission:</span>
-                <span class="text-neutral-300 ml-1">{{ kit.Permission || 'None' }}</span>
+              <div class="kv__kit-meta">
+                <div><span class="kv__meta-label">Permission</span><span class="kv__meta-val">{{ kit.Permission || 'None' }}</span></div>
+                <div><span class="kv__meta-label">Cooldown</span><span class="kv__meta-val kv__mono">{{ kit.Cooldown || 0 }}s</span></div>
+                <div><span class="kv__meta-label">Max uses</span><span class="kv__meta-val kv__mono">{{ kit.MaxUses || 0 }}{{ (kit.MaxUses || 0) === 0 ? ' (unlimited)' : '' }}</span></div>
+                <div><span class="kv__meta-label">Items</span><span class="kv__meta-val kv__mono">{{ (kit.Items || []).length }}</span></div>
               </div>
-              <div>
-                <span class="text-neutral-500">Cooldown:</span>
-                <span class="text-neutral-300 ml-1">{{ kit.Cooldown || 0 }}s</span>
-              </div>
-              <div>
-                <span class="text-neutral-500">Max Uses:</span>
-                <span class="text-neutral-300 ml-1">{{ kit.MaxUses || 0 }} {{ (kit.MaxUses || 0) === 0 ? '(unlimited)' : '' }}</span>
-              </div>
-              <div>
-                <span class="text-neutral-500">Items:</span>
-                <span class="text-neutral-300 ml-1">{{ (kit.Items || []).length }}</span>
-              </div>
-            </div>
 
-            <div v-if="kit.IsHidden" class="text-xs text-yellow-500/80">
-              Hidden (requires permission)
+              <div v-if="kit.IsHidden" class="kv__kit-hidden">Hidden — requires permission</div>
             </div>
           </div>
-        </div>
-      </div>
+        </Panel>
+      </template>
 
-      <!-- Kit Editor Tab -->
-      <div v-else-if="activeTab === 'editor'" class="space-y-6">
-        <div v-if="!currentKit" class="bg-neutral-900 border border-neutral-800 rounded-xl p-8 text-center">
-          <p class="text-neutral-500">Select a kit from the Kits List tab to edit it.</p>
-        </div>
+      <!-- Kit editor tab -->
+      <template v-else-if="activeTab === 'editor'">
+        <Panel v-if="!currentKit">
+          <EmptyState
+            icon="pencil"
+            title="No kit selected"
+            description="Select a kit from the Kits list tab to edit it."
+          />
+        </Panel>
 
         <template v-else>
-          <!-- Kit Metadata -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-            <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Kit Details</h3>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="block text-sm text-neutral-200 mb-1">Kit Name</label>
-                <input
-                  type="text"
-                  :value="currentKit.Name"
-                  @input="setKitField('Name', ($event.target as HTMLInputElement).value)"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-                  placeholder="e.g. Starter Kit"
-                />
-              </div>
-              <div>
-                <label class="block text-sm text-neutral-200 mb-1">Permission</label>
-                <input
-                  type="text"
-                  :value="currentKit.Permission"
-                  @input="setKitField('Permission', ($event.target as HTMLInputElement).value)"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-                  placeholder="e.g. kits.vip"
-                />
-              </div>
-            </div>
-
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Description</label>
-              <textarea
-                :value="currentKit.Description"
-                @input="setKitField('Description', ($event.target as HTMLTextAreaElement).value)"
-                rows="2"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
-                placeholder="Kit description..."
+          <!-- Kit details -->
+          <Panel title="Kit details">
+            <div class="kv__form-grid">
+              <Input
+                label="Kit name"
+                :model-value="String(currentKit.Name ?? '')"
+                @update:model-value="v => setKitField('Name', v ?? '')"
+                placeholder="e.g. Starter kit"
+              />
+              <Input
+                label="Permission"
+                :model-value="String(currentKit.Permission ?? '')"
+                @update:model-value="v => setKitField('Permission', v ?? '')"
+                placeholder="e.g. kits.vip"
+                :mono="true"
               />
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div>
-                <label class="block text-sm text-neutral-200 mb-1">Cooldown (seconds)</label>
+            <div class="kv__field kv__mt">
+              <label class="kv__field-label">Description</label>
+              <textarea
+                class="cc-textarea"
+                rows="2"
+                :value="currentKit.Description"
+                placeholder="Kit description…"
+                @input="setKitField('Description', ($event.target as HTMLTextAreaElement).value)"
+              />
+            </div>
+
+            <div class="kv__form-grid3 kv__mt">
+              <div class="kv__field">
+                <label class="kv__field-label">Cooldown (seconds)</label>
                 <input
                   type="number"
+                  class="cc-num-input"
                   :value="currentKit.Cooldown || 0"
-                  @input="setKitField('Cooldown', Number(($event.target as HTMLInputElement).value))"
                   min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                  @input="setKitField('Cooldown', Number(($event.target as HTMLInputElement).value))"
                 />
               </div>
-              <div>
-                <label class="block text-sm text-neutral-200 mb-1">Max Uses (0 = unlimited)</label>
+              <div class="kv__field">
+                <label class="kv__field-label">Max uses (0 = unlimited)</label>
                 <input
                   type="number"
+                  class="cc-num-input"
                   :value="currentKit.MaxUses || 0"
-                  @input="setKitField('MaxUses', Number(($event.target as HTMLInputElement).value))"
                   min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                  @input="setKitField('MaxUses', Number(($event.target as HTMLInputElement).value))"
                 />
               </div>
-              <div class="flex items-center justify-between pt-6">
-                <label class="text-sm text-neutral-200">Hidden (no perm = hidden)</label>
-                <button
-                  @click="setKitField('IsHidden', !currentKit.IsHidden)"
-                  class="relative w-11 h-6 rounded-full transition-colors"
-                  :class="currentKit.IsHidden ? 'bg-oxide-500' : 'bg-neutral-700'"
-                >
-                  <span
-                    class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                    :class="currentKit.IsHidden ? 'translate-x-5' : 'translate-x-0'"
-                  />
-                </button>
+              <div class="kv__toggle-row">
+                <div>
+                  <div class="kv__toggle-label">Hidden</div>
+                  <div class="kv__toggle-sub">No perm = hidden from players</div>
+                </div>
+                <Switch
+                  :model-value="!!currentKit.IsHidden"
+                  @update:model-value="v => setKitField('IsHidden', v)"
+                />
               </div>
             </div>
-          </div>
+          </Panel>
 
-          <!-- Kit Items -->
-          <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-            <div class="flex items-center justify-between">
-              <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Kit Items</h3>
-              <button
-                @click="addKitItem"
-                class="flex items-center gap-2 px-3 py-1.5 bg-oxide-500/10 text-oxide-400 rounded-lg hover:bg-oxide-500/20 text-sm"
-              >
-                <Plus class="w-4 h-4" />
-                Add Item
-              </button>
-            </div>
+          <!-- Kit items -->
+          <Panel title="Kit items">
+            <template #actions>
+              <Button size="sm" icon="plus" variant="secondary" @click="addKitItem">Add item</Button>
+            </template>
 
-            <div v-if="!currentKit.Items || currentKit.Items.length === 0" class="text-center py-4">
-              <p class="text-neutral-500 text-sm">No items in this kit. Click "Add Item" to get started.</p>
-            </div>
+            <EmptyState
+              v-if="!currentKit.Items || currentKit.Items.length === 0"
+              icon="package"
+              title="No items"
+              description="Click &quot;Add item&quot; to get started."
+            />
 
-            <div v-else class="space-y-3">
+            <div v-else class="kv__items">
               <div
                 v-for="(item, itemIdx) in (currentKit.Items as any[])"
                 :key="itemIdx"
-                class="flex items-center gap-3 bg-neutral-800/50 border border-neutral-700/50 rounded-lg p-3"
+                class="kv__item-row"
               >
-                <div class="flex-1 grid grid-cols-2 md:grid-cols-4 gap-3">
-                  <div>
-                    <label class="block text-xs text-neutral-500 mb-1">Short Name</label>
+                <div class="kv__item-fields">
+                  <div class="kv__field">
+                    <label class="kv__field-label">Short name</label>
                     <input
                       type="text"
+                      class="cc-num-input"
                       :value="item.ShortName"
-                      @input="setKitItemField(itemIdx, 'ShortName', ($event.target as HTMLInputElement).value)"
-                      class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1.5 text-neutral-200 text-xs"
                       placeholder="e.g. rifle.ak"
+                      @input="setKitItemField(itemIdx, 'ShortName', ($event.target as HTMLInputElement).value)"
                     />
                   </div>
-                  <div>
-                    <label class="block text-xs text-neutral-500 mb-1">Amount</label>
+                  <div class="kv__field">
+                    <label class="kv__field-label">Amount</label>
                     <input
                       type="number"
+                      class="cc-num-input"
                       :value="item.Amount || 1"
-                      @input="setKitItemField(itemIdx, 'Amount', Number(($event.target as HTMLInputElement).value))"
                       min="1"
-                      class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1.5 text-neutral-200 text-xs"
+                      @input="setKitItemField(itemIdx, 'Amount', Number(($event.target as HTMLInputElement).value))"
                     />
                   </div>
-                  <div>
-                    <label class="block text-xs text-neutral-500 mb-1">Skin ID</label>
+                  <div class="kv__field">
+                    <label class="kv__field-label">Skin ID</label>
                     <input
                       type="number"
+                      class="cc-num-input kv__mono"
                       :value="item.SkinId || 0"
-                      @input="setKitItemField(itemIdx, 'SkinId', Number(($event.target as HTMLInputElement).value))"
                       min="0"
-                      class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1.5 text-neutral-200 text-xs"
+                      @input="setKitItemField(itemIdx, 'SkinId', Number(($event.target as HTMLInputElement).value))"
                     />
                   </div>
-                  <div>
-                    <label class="block text-xs text-neutral-500 mb-1">Container</label>
-                    <select
-                      :value="item.Container || 'main'"
-                      @change="setKitItemField(itemIdx, 'Container', ($event.target as HTMLSelectElement).value)"
-                      class="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1.5 text-neutral-200 text-xs"
-                    >
-                      <option value="main">Main</option>
-                      <option value="wear">Wear</option>
-                      <option value="belt">Belt</option>
-                    </select>
-                  </div>
+                  <Select
+                    label="Container"
+                    :options="containerOptions"
+                    :model-value="String(item.Container ?? 'main')"
+                    @update:model-value="v => setKitItemField(itemIdx, 'Container', v ?? 'main')"
+                  />
                 </div>
-                <button
-                  @click="removeKitItem(itemIdx)"
-                  class="p-1.5 text-neutral-400 hover:text-red-400 transition-colors flex-shrink-0"
-                  title="Remove item"
-                >
-                  <X class="w-4 h-4" />
+                <button class="kv__icon-btn kv__icon-btn--danger kv__item-del" title="Remove item" @click="removeKitItem(itemIdx)">
+                  <Icon name="x" :size="15" />
                 </button>
               </div>
             </div>
-          </div>
+          </Panel>
         </template>
-      </div>
+      </template>
 
-      <!-- Settings Tab -->
-      <div v-else-if="activeTab === 'settings'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Global Kit Settings</h3>
+      <!-- Settings tab -->
+      <Panel v-else-if="activeTab === 'settings'" title="Global kit settings">
+        <div class="kv__settings-grid">
+          <Input
+            label="Kit chat command"
+            hint="The chat command players use to access kits"
+            :model-value="String(getConfigValue('Kit chat command', 'kit') ?? 'kit')"
+            @update:model-value="v => setConfigValue('Kit chat command', v ?? 'kit')"
+            :mono="true"
+          />
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Kit chat command -->
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Kit Chat Command</label>
-            <p class="text-xs text-neutral-500 mb-2">The chat command players use to access kits</p>
-            <input
-              type="text"
-              :value="getConfigValue('Kit chat command', 'kit')"
-              @input="setConfigValue('Kit chat command', ($event.target as HTMLInputElement).value)"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+          <Select
+            label="Currency for purchase costs"
+            hint="Scrap, Economics, or ServerRewards"
+            v-model="currencyValue"
+            :options="currencyOptions"
+          />
+        </div>
+
+        <div class="kv__toggles kv__mt">
+          <div class="kv__toggle-row">
+            <div>
+              <div class="kv__toggle-label">Log kits given</div>
+              <div class="kv__toggle-sub">Log when kits are claimed by players</div>
+            </div>
+            <Switch
+              :model-value="getBool('Log kits given', false)"
+              @update:model-value="v => setConfigValue('Log kits given', v)"
             />
           </div>
-
-          <!-- Currency -->
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Currency for Purchase Costs</label>
-            <p class="text-xs text-neutral-500 mb-2">Scrap, Economics, or ServerRewards</p>
-            <select
-              :value="getConfigValue('Currency used for purchase costs (Scrap, Economics, ServerRewards)', 'Scrap')"
-              @change="setConfigValue('Currency used for purchase costs (Scrap, Economics, ServerRewards)', ($event.target as HTMLSelectElement).value)"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            >
-              <option value="Scrap">Scrap</option>
-              <option value="Economics">Economics</option>
-              <option value="ServerRewards">ServerRewards</option>
-            </select>
+          <div class="kv__toggle-row">
+            <div>
+              <div class="kv__toggle-label">Wipe player data on server wipe</div>
+              <div class="kv__toggle-sub">Reset kit cooldowns and usage when server wipes</div>
+            </div>
+            <Switch
+              :model-value="getBool('Wipe player data when the server is wiped', true)"
+              @update:model-value="v => setConfigValue('Wipe player data when the server is wiped', v)"
+            />
+          </div>
+          <div class="kv__toggle-row">
+            <div>
+              <div class="kv__toggle-label">Use kits UI menu</div>
+              <div class="kv__toggle-sub">Show the in-game kits UI menu to players</div>
+            </div>
+            <Switch
+              :model-value="getBool('Use the Kits UI menu', true)"
+              @update:model-value="v => setConfigValue('Use the Kits UI menu', v)"
+            />
+          </div>
+          <div class="kv__toggle-row">
+            <div>
+              <div class="kv__toggle-label">Allow auto-kit toggle</div>
+              <div class="kv__toggle-sub">Let players toggle auto-kits on spawn</div>
+            </div>
+            <Switch
+              :model-value="getBool('Allow players to toggle auto-kits on spawn', false)"
+              @update:model-value="v => setConfigValue('Allow players to toggle auto-kits on spawn', v)"
+            />
+          </div>
+          <div class="kv__toggle-row">
+            <div>
+              <div class="kv__toggle-label">Show kits without permission</div>
+              <div class="kv__toggle-sub">Show permission-locked kits to players who lack them</div>
+            </div>
+            <Switch
+              :model-value="getBool('Show kits with permissions assigned to players without the permission', false)"
+              @update:model-value="v => setConfigValue('Show kits with permissions assigned to players without the permission', v)"
+            />
+          </div>
+          <div class="kv__toggle-row">
+            <div>
+              <div class="kv__toggle-label">Admins ignore restrictions</div>
+              <div class="kv__toggle-sub">Players with admin perm skip cooldown and usage limits</div>
+            </div>
+            <Switch
+              :model-value="getBool('Players with the admin permission ignore usage restrictions', false)"
+              @update:model-value="v => setConfigValue('Players with the admin permission ignore usage restrictions', v)"
+            />
           </div>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Log kits given -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Log Kits Given</label>
-              <p class="text-xs text-neutral-500">Log when kits are claimed by players</p>
-            </div>
-            <button
-              @click="setConfigValue('Log kits given', !getConfigValue('Log kits given', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Log kits given', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Log kits given', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- Wipe data on wipe -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Wipe Player Data on Server Wipe</label>
-              <p class="text-xs text-neutral-500">Reset kit cooldowns and usage when server wipes</p>
-            </div>
-            <button
-              @click="setConfigValue('Wipe player data when the server is wiped', !getConfigValue('Wipe player data when the server is wiped', true))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Wipe player data when the server is wiped', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Wipe player data when the server is wiped', true) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- Use UI Menu -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Use Kits UI Menu</label>
-              <p class="text-xs text-neutral-500">Show the in-game kits UI menu to players</p>
-            </div>
-            <button
-              @click="setConfigValue('Use the Kits UI menu', !getConfigValue('Use the Kits UI menu', true))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Use the Kits UI menu', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Use the Kits UI menu', true) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- Allow autokits toggle -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Allow Auto-Kit Toggle</label>
-              <p class="text-xs text-neutral-500">Let players toggle auto-kits on spawn</p>
-            </div>
-            <button
-              @click="setConfigValue('Allow players to toggle auto-kits on spawn', !getConfigValue('Allow players to toggle auto-kits on spawn', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Allow players to toggle auto-kits on spawn', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Allow players to toggle auto-kits on spawn', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- Show kits without perm -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Show Kits Without Permission</label>
-              <p class="text-xs text-neutral-500">Show permission-locked kits to players who lack them</p>
-            </div>
-            <button
-              @click="setConfigValue('Show kits with permissions assigned to players without the permission', !getConfigValue('Show kits with permissions assigned to players without the permission', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Show kits with permissions assigned to players without the permission', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Show kits with permissions assigned to players without the permission', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- Admin ignore restrictions -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Admins Ignore Restrictions</label>
-              <p class="text-xs text-neutral-500">Players with admin perm skip cooldown and usage limits</p>
-            </div>
-            <button
-              @click="setConfigValue('Players with the admin permission ignore usage restrictions', !getConfigValue('Players with the admin permission ignore usage restrictions', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Players with the admin permission ignore usage restrictions', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Players with the admin permission ignore usage restrictions', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-        </div>
-
-        <!-- Auto-kits -->
-        <div>
-          <label class="block text-sm text-neutral-200 mb-1">Auto-Kits (ordered by priority)</label>
-          <p class="text-xs text-neutral-500 mb-2">Comma-separated list of kit names given on respawn</p>
-          <input
-            type="text"
-            :value="(getConfigValue('Autokits ordered by priority', []) as string[]).join(', ')"
-            @input="setConfigValue('Autokits ordered by priority', ($event.target as HTMLInputElement).value.split(',').map((s: string) => s.trim()).filter((s: string) => s))"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+        <div class="kv__field kv__mt">
+          <Input
+            label="Auto-kits (ordered by priority)"
+            hint="Comma-separated list of kit names given on respawn"
+            :model-value="(getConfigValue('Autokits ordered by priority', []) as string[]).join(', ')"
+            @update:model-value="v => setConfigValue('Autokits ordered by priority', (v ?? '').split(',').map((s: string) => s.trim()).filter((s: string) => s))"
             placeholder="e.g. StarterKit, VIPKit"
           />
         </div>
-      </div>
-    </div>
+      </Panel>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Kits Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="newConfigName"
-              placeholder="e.g. Default Kits"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleCreateConfig"
-            />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="kv__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="kv__modal">
+        <h2 class="kv__modal-title">New kits config</h2>
+        <div class="kv__modal-body">
+          <Input
+            label="Config name"
+            v-model="newConfigName"
+            placeholder="e.g. Default kits"
+            @keydown.enter="handleCreateConfig"
+          />
+          <div class="kv__field">
+            <label class="kv__field-label">Description (optional)</label>
             <textarea
               v-model="newConfigDesc"
               rows="2"
+              class="cc-textarea"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="kv__modal-footer">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current Kits config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="importConfigName"
-              placeholder="e.g. Imported Server Kits"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleImport"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="kv__modal-backdrop" @click.self="showImportModal = false">
+      <div class="kv__modal">
+        <h2 class="kv__modal-title">Import from server</h2>
+        <p class="kv__modal-desc">Import the current Kits config from your live server. This will create a new config profile.</p>
+        <div class="kv__modal-body">
+          <Input
+            label="Config name"
+            v-model="importConfigName"
+            placeholder="e.g. Imported server kits"
+            @keydown.enter="handleImport"
+          />
+        </div>
+        <div class="kv__modal-footer">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.kv { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.kv__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.kv__head-id { display: flex; align-items: center; gap: 12px; }
+.kv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.kv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Config action bar */
+.kv__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.kv__config-select {
+  appearance: none; height: var(--control-h-md); padding: 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.kv__config-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.kv__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+.kv__bar-delete { margin-left: auto; }
+
+/* Loading */
+.kv__loading { display: flex; align-items: center; justify-content: center; padding: 60px; }
+.kv__spinner {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent);
+  border-top-color: transparent; animation: kv-spin 0.6s linear infinite;
+}
+@keyframes kv-spin { to { transform: rotate(360deg); } }
+
+/* Kit grid */
+.kv__kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+.kv__kit-card {
+  background: var(--surface-raised-2); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 14px; display: flex; flex-direction: column; gap: 10px;
+}
+.kv__kit-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.kv__kit-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.kv__kit-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.kv__kit-actions { display: flex; align-items: center; gap: 2px; flex: none; }
+.kv__kit-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
+.kv__meta-label { font-size: var(--text-xs); color: var(--text-tertiary); }
+.kv__meta-val { font-size: var(--text-xs); color: var(--text-primary); margin-left: 4px; }
+.kv__kit-hidden { font-size: var(--text-xs); color: var(--status-warn); }
+
+/* Icon button */
+.kv__icon-btn {
+  width: 28px; height: 28px; border-radius: var(--radius-sm); border: none; background: transparent;
+  color: var(--text-tertiary); display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: var(--transition-colors);
+}
+.kv__icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
+.kv__icon-btn--danger:hover { background: var(--status-offline-soft); color: var(--danger); }
+
+/* Kit editor */
+.kv__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.kv__form-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
+@media (max-width: 700px) {
+  .kv__form-grid { grid-template-columns: 1fr; }
+  .kv__form-grid3 { grid-template-columns: 1fr; }
+}
+.kv__mt { margin-top: 16px; }
+
+/* Fields */
+.kv__field { display: flex; flex-direction: column; gap: 6px; }
+.kv__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+
+/* Toggle row */
+.kv__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
+}
+.kv__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.kv__toggle-row:first-child { padding-top: 0; }
+.kv__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.kv__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.kv__toggles { display: flex; flex-direction: column; }
+
+/* Settings */
+.kv__settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+@media (max-width: 700px) { .kv__settings-grid { grid-template-columns: 1fr; } }
+
+/* Item rows */
+.kv__items { display: flex; flex-direction: column; gap: 8px; }
+.kv__item-row {
+  display: flex; align-items: flex-end; gap: 8px;
+  background: var(--surface-raised-2); border-radius: var(--radius-md);
+  box-shadow: var(--ring-default); padding: 12px;
+}
+.kv__item-fields { flex: 1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
+@media (max-width: 700px) { .kv__item-fields { grid-template-columns: 1fr 1fr; } }
+.kv__item-del { flex: none; margin-bottom: 0; }
+
+/* Shared token inputs */
+.cc-textarea {
+  width: 100%; background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 9px 11px; font-family: var(--font-sans); font-size: var(--text-sm);
+  resize: none; outline: 0; line-height: 1.5;
+}
+.cc-textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-num-input {
+  width: 100%; height: var(--control-h-md); background: var(--surface-inset); color: var(--text-primary);
+  border: 0; border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  padding: 0 11px; font-family: var(--font-sans); font-size: var(--text-sm); outline: 0;
+}
+.cc-num-input:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.kv__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* Modal */
+.kv__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.kv__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.kv__modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
+.kv__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.kv__modal-body { display: flex; flex-direction: column; gap: 12px; }
+.kv__modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
+</style>
diff --git a/frontend/src/views/admin/LootBuilderView.vue b/frontend/src/views/admin/LootBuilderView.vue
index 0ec95c9..ea8818b 100644
--- a/frontend/src/views/admin/LootBuilderView.vue
+++ b/frontend/src/views/admin/LootBuilderView.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useLootStore } from '@/stores/loot'
 import { useToastStore } from '@/stores/toast'
 import LootContainerSidebar from '@/components/loot/LootContainerSidebar.vue'
 import LootItemEditor from '@/components/loot/LootItemEditor.vue'
 import LootGroupEditor from '@/components/loot/LootGroupEditor.vue'
 import LootItemPicker from '@/components/loot/LootItemPicker.vue'
-import { Save, Upload, Download, Play, Copy, Trash2, Plus, Layers } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import DsSelect from '@/components/ds/forms/Select.vue'
+import DsInput from '@/components/ds/forms/Input.vue'
 
 const loot = useLootStore()
 const toast = useToastStore()
@@ -24,6 +31,20 @@ const activeTab = ref<'items' | 'groups'>('items')
 
 const multipliers = [1, 2, 5, 10]
 
+const tabItems = [
+  { value: 'items', label: 'Container items' },
+  { value: 'groups', label: 'Loot groups', icon: 'layers' },
+]
+
+// Profile selector options for DS Select
+const profileOptions = computed(() =>
+  loot.profiles.map(p => ({
+    value: p.id,
+    label: p.profile_name + (p.is_active ? ' (active)' : ''),
+  }))
+)
+const currentProfileId = computed(() => loot.currentProfile?.id ?? '')
+
 onMounted(async () => {
   await loot.fetchProfiles()
   if (loot.profiles.length > 0 && loot.profiles[0]) {
@@ -130,145 +151,139 @@ function handleAddItem(shortname: string) {
 </script>
 
 <template>
-  <div class="p-6 space-y-4">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-neutral-100">Loot Builder</h1>
-      <div class="flex items-center gap-2">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Profile
-        </button>
+  <div class="lb-root">
+    <!-- Page header -->
+    <div class="lb-header">
+      <div class="lb-header__left">
+        <h1 class="lb-title">Loot builder</h1>
+        <Badge v-if="loot.isDirty" tone="warn">Unsaved changes</Badge>
       </div>
+      <Button size="sm" variant="secondary" icon="plus" @click="showCreateModal = true">
+        New profile
+      </Button>
     </div>
 
-    <!-- Profile Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Profile Selector -->
-        <select
-          v-if="loot.profiles.length > 0"
-          :value="loot.currentProfile?.id || ''"
-          @change="handleProfileChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
-        >
-          <option v-for="p in loot.profiles" :key="p.id" :value="p.id">
-            {{ p.profile_name }}
-            <template v-if="p.is_active"> (Active)</template>
-          </option>
-        </select>
-        <span v-else class="text-neutral-500 text-sm">No profiles yet</span>
-
-        <!-- Save -->
-        <button
-          @click="loot.saveCurrentProfile()"
-          :disabled="!loot.currentProfile || !loot.isDirty || loot.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ loot.isSaving ? 'Saving...' : 'Save' }}
-        </button>
-
-        <!-- Apply Dropdown -->
-        <div class="relative">
-          <button
-            @click="showApplyDropdown = !showApplyDropdown"
-            :disabled="!loot.currentProfile || loot.isApplying"
-            class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-          >
-            <Play class="w-4 h-4" />
-            {{ loot.isApplying ? 'Applying...' : 'Apply to Server' }}
-          </button>
-          <div
-            v-if="showApplyDropdown"
-            class="absolute top-full mt-1 right-0 bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-10 py-1 min-w-[140px]"
-          >
-            <button
-              v-for="m in multipliers"
-              :key="m"
-              @click="handleApply(m)"
-              class="w-full text-left px-4 py-2 text-sm text-neutral-300 hover:bg-neutral-700"
-            >
-              {{ m }}x Multiplier
-            </button>
-          </div>
+    <!-- Profile toolbar -->
+    <Panel>
+      <div class="lb-toolbar">
+        <!-- Profile selector -->
+        <div class="lb-toolbar__profile">
+          <DsSelect
+            v-if="loot.profiles.length > 0"
+            :options="profileOptions"
+            :model-value="currentProfileId"
+            @update:model-value="(v: string | undefined) => { if (v) handleProfileChange(v) }"
+          />
+          <span v-else class="lb-toolbar__empty">No profiles yet</span>
         </div>
 
-        <!-- Duplicate -->
-        <button
-          @click="handleDuplicate"
-          :disabled="!loot.currentProfile"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm"
-        >
-          <Copy class="w-4 h-4" />
-          Duplicate
-        </button>
+        <div class="lb-toolbar__actions">
+          <!-- Save -->
+          <Button
+            size="sm"
+            variant="primary"
+            icon="save"
+            :disabled="!loot.currentProfile || !loot.isDirty || loot.isSaving"
+            :loading="loot.isSaving"
+            @click="loot.saveCurrentProfile()"
+          >
+            {{ loot.isSaving ? 'Saving…' : 'Save' }}
+          </Button>
 
-        <!-- Import -->
-        <button
-          @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Upload class="w-4 h-4" />
-          Import
-        </button>
+          <!-- Apply to server with multiplier dropdown -->
+          <div class="lb-apply-wrap">
+            <Button
+              size="sm"
+              variant="outline"
+              icon="play"
+              :disabled="!loot.currentProfile || loot.isApplying"
+              :loading="loot.isApplying"
+              @click="showApplyDropdown = !showApplyDropdown"
+            >
+              {{ loot.isApplying ? 'Applying…' : 'Apply to server' }}
+            </Button>
+            <div v-if="showApplyDropdown" class="lb-dropdown">
+              <button
+                v-for="m in multipliers"
+                :key="m"
+                class="lb-dropdown__item"
+                @click="handleApply(m)"
+              >
+                {{ m }}x multiplier
+              </button>
+            </div>
+          </div>
 
-        <!-- Export -->
-        <button
-          @click="handleExport"
-          :disabled="!loot.currentProfile"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 disabled:opacity-50 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Export
-        </button>
+          <!-- Duplicate -->
+          <Button
+            size="sm"
+            variant="ghost"
+            icon="copy"
+            :disabled="!loot.currentProfile"
+            @click="handleDuplicate"
+          >
+            Duplicate
+          </Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteProfile"
-          :disabled="!loot.currentProfile"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          <!-- Import -->
+          <Button
+            size="sm"
+            variant="ghost"
+            icon="upload"
+            @click="showImportModal = true"
+          >
+            Import
+          </Button>
+
+          <!-- Export -->
+          <Button
+            size="sm"
+            variant="ghost"
+            icon="download"
+            :disabled="!loot.currentProfile"
+            @click="handleExport"
+          >
+            Export
+          </Button>
+
+          <!-- Delete -->
+          <Button
+            size="sm"
+            variant="danger-soft"
+            icon="trash-2"
+            :disabled="!loot.currentProfile"
+            @click="handleDeleteProfile"
+          >
+            Delete
+          </Button>
+        </div>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="loot.isLoading" class="lb-loading">
+      <Icon name="loader" :size="28" class="lb-spin" />
     </div>
 
-    <!-- Main Content -->
-    <div v-if="loot.currentProfile" class="flex gap-4" style="height: calc(100vh - 250px)">
-      <!-- Sidebar -->
+    <!-- Main editor layout -->
+    <div v-else-if="loot.currentProfile" class="lb-workspace">
+      <!-- Container sidebar -->
       <LootContainerSidebar
         :loot-table="loot.currentProfile.loot_table"
         :selected="loot.selectedContainer"
         @select="loot.selectedContainer = $event"
       />
 
-      <!-- Editor Area -->
-      <div class="flex-1 flex flex-col min-w-0">
-        <!-- Tabs -->
-        <div class="flex border-b border-neutral-800 mb-4">
-          <button
-            @click="activeTab = 'items'"
-            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-            :class="activeTab === 'items' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-          >
-            Container Items
-          </button>
-          <button
-            @click="activeTab = 'groups'"
-            class="px-4 py-2 text-sm font-medium border-b-2 transition-colors flex items-center gap-2"
-            :class="activeTab === 'groups' ? 'border-oxide-500 text-oxide-400' : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-          >
-            <Layers class="w-4 h-4" />
-            Loot Groups
-          </button>
-        </div>
+      <!-- Editor area -->
+      <div class="lb-editor">
+        <Tabs
+          v-model="activeTab"
+          :items="tabItems"
+          variant="line"
+          class="lb-tabs"
+        />
 
-        <div class="flex-1 overflow-y-auto">
+        <div class="lb-editor__body">
           <LootItemEditor
             v-if="activeTab === 'items' && loot.selectedContainer"
             :container-key="loot.selectedContainer"
@@ -276,8 +291,12 @@ function handleAddItem(shortname: string) {
             @dirty="loot.markDirty()"
             @add-item="showItemPicker = true"
           />
-          <div v-else-if="activeTab === 'items'" class="flex items-center justify-center h-full text-neutral-500">
-            Select a container from the sidebar
+          <div v-else-if="activeTab === 'items'" class="lb-editor__placeholder">
+            <EmptyState
+              icon="box"
+              title="No container selected"
+              description="Select a container from the sidebar to configure its loot."
+            />
           </div>
 
           <LootGroupEditor
@@ -289,98 +308,103 @@ function handleAddItem(shortname: string) {
       </div>
     </div>
 
-    <!-- Empty State -->
-    <div v-else-if="!loot.isLoading" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Layers class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Loot Profile Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new profile or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
-      >
-        Create First Profile
-      </button>
+    <!-- Empty state — no profile -->
+    <div v-else class="lb-empty-wrap">
+      <Panel>
+        <EmptyState
+          icon="layers"
+          title="No loot profile selected"
+          description="Create a new profile or select one above."
+        >
+          <template #action>
+            <Button icon="plus" @click="showCreateModal = true">Create first profile</Button>
+          </template>
+        </EmptyState>
+      </Panel>
     </div>
 
-    <!-- Loading -->
-    <div v-if="loot.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- Create Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Loot Profile</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Profile Name</label>
-            <input
+    <!-- Create profile modal -->
+    <Teleport to="body">
+      <div v-if="showCreateModal" class="lb-overlay" @click.self="showCreateModal = false">
+        <div class="lb-modal">
+          <div class="lb-modal__head">
+            <span class="lb-modal__title">New loot profile</span>
+            <button class="lb-modal__close" @click="showCreateModal = false" aria-label="Close">
+              <Icon name="x" :size="16" />
+            </button>
+          </div>
+          <div class="lb-modal__body">
+            <DsInput
               v-model="newProfileName"
+              label="Profile name"
               placeholder="e.g. Vanilla 2x"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               @keydown.enter="handleCreateProfile"
             />
+            <div class="lb-field">
+              <label class="lb-field__label">Description <span class="lb-field__opt">(optional)</span></label>
+              <textarea
+                v-model="newProfileDesc"
+                rows="2"
+                placeholder="What is this profile for?"
+                class="cc-textarea"
+              />
+            </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
-            <textarea
-              v-model="newProfileDesc"
-              rows="2"
-              placeholder="What is this profile for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateProfile"
+          <div class="lb-modal__foot">
+            <Button variant="ghost" size="sm" @click="showCreateModal = false">Cancel</Button>
+            <Button
+              size="sm"
               :disabled="!newProfileName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+              @click="handleCreateProfile"
             >
               Create
-            </button>
+            </Button>
           </div>
         </div>
       </div>
-    </div>
+    </Teleport>
 
-    <!-- Import Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-lg">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import Loot Profile</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Profile Name</label>
-            <input
+    <!-- Import modal -->
+    <Teleport to="body">
+      <div v-if="showImportModal" class="lb-overlay" @click.self="showImportModal = false">
+        <div class="lb-modal lb-modal--wide">
+          <div class="lb-modal__head">
+            <span class="lb-modal__title">Import loot profile</span>
+            <button class="lb-modal__close" @click="showImportModal = false" aria-label="Close">
+              <Icon name="x" :size="16" />
+            </button>
+          </div>
+          <div class="lb-modal__body">
+            <DsInput
               v-model="importName"
+              label="Profile name"
               placeholder="Name for imported profile"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
             />
+            <div class="lb-field">
+              <label class="lb-field__label">BetterLoot JSON</label>
+              <textarea
+                v-model="importJson"
+                rows="10"
+                placeholder="Paste LootTables.json content here…"
+                class="cc-textarea cc-textarea--mono"
+              />
+            </div>
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">BetterLoot JSON</label>
-            <textarea
-              v-model="importJson"
-              rows="10"
-              placeholder="Paste LootTables.json content here..."
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm font-mono resize-none"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
+          <div class="lb-modal__foot">
+            <Button variant="ghost" size="sm" @click="showImportModal = false">Cancel</Button>
+            <Button
+              size="sm"
               :disabled="!importName.trim() || !importJson.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
+              @click="handleImport"
             >
               Import
-            </button>
+            </Button>
           </div>
         </div>
       </div>
-    </div>
+    </Teleport>
 
-    <!-- Item Picker Modal -->
+    <!-- Item picker modal -->
     <LootItemPicker
       v-if="showItemPicker"
       @select="handleAddItem"
@@ -388,6 +412,255 @@ function handleAddItem(shortname: string) {
     />
 
     <!-- Click-away for apply dropdown -->
-    <div v-if="showApplyDropdown" class="fixed inset-0 z-0" @click="showApplyDropdown = false" />
+    <div v-if="showApplyDropdown" class="lb-clickaway" @click="showApplyDropdown = false" />
   </div>
 </template>
+
+<style scoped>
+.lb-root {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  min-height: 0;
+}
+
+/* Header */
+.lb-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.lb-header__left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.lb-title {
+  font-size: var(--text-lg);
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+/* Toolbar inside Panel */
+.lb-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.lb-toolbar__profile {
+  min-width: 200px;
+  flex: none;
+}
+.lb-toolbar__empty {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+.lb-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+/* Apply dropdown */
+.lb-apply-wrap {
+  position: relative;
+}
+.lb-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 40;
+  background: var(--surface-raised);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: 4px;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+}
+.lb-dropdown__item {
+  background: transparent;
+  border: 0;
+  padding: 8px 12px;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--radius-sm);
+  transition: var(--transition-colors);
+}
+.lb-dropdown__item:hover {
+  background: var(--surface-hover);
+}
+
+/* Loading */
+.lb-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0;
+  color: var(--accent);
+}
+.lb-spin {
+  animation: lb-spin 0.7s linear infinite;
+}
+@keyframes lb-spin { to { transform: rotate(360deg); } }
+
+/* Workspace (sidebar + editor) */
+.lb-workspace {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+  min-height: 0;
+  height: calc(100vh - 260px);
+}
+
+/* Editor column */
+.lb-editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.lb-tabs {
+  margin-bottom: 4px;
+}
+.lb-editor__body {
+  flex: 1;
+  overflow-y: auto;
+  padding-top: 12px;
+}
+.lb-editor__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* Empty state wrapper */
+.lb-empty-wrap {}
+
+/* Click-away backdrop */
+.lb-clickaway {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+}
+
+/* Modal overlay */
+.lb-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+.lb-modal {
+  background: var(--surface-raised);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.lb-modal--wide {
+  max-width: 560px;
+}
+.lb-modal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.lb-modal__title {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.lb-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: var(--transition-colors);
+}
+.lb-modal__close:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+.lb-modal__body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.lb-modal__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px 16px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* Field (textarea wrapper) */
+.lb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.lb-field__label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+.lb-field__opt {
+  font-weight: 400;
+  color: var(--text-muted);
+  margin-left: 3px;
+}
+
+/* Bare textarea with token styling */
+.cc-textarea {
+  width: 100%;
+  background: var(--surface-inset);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  padding: 9px 11px;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  resize: none;
+  outline: none;
+  transition: var(--transition-colors);
+  line-height: var(--leading-relaxed);
+}
+.cc-textarea::placeholder {
+  color: var(--text-muted);
+}
+.cc-textarea:focus-within,
+.cc-textarea:focus {
+  box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm);
+}
+.cc-textarea--mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+</style>
diff --git a/frontend/src/views/admin/PluginConfigsView.vue b/frontend/src/views/admin/PluginConfigsView.vue
index 99ab898..919e08e 100644
--- a/frontend/src/views/admin/PluginConfigsView.vue
+++ b/frontend/src/views/admin/PluginConfigsView.vue
@@ -11,19 +11,13 @@ import { useFurnaceSplitterStore } from '@/stores/furnacesplitter'
 import { useBetterChatStore } from '@/stores/betterchat'
 import { useTimedExecuteStore } from '@/stores/timedexecute'
 import { useRaidableBasesStore } from '@/stores/raidablebases'
-import {
-  Crosshair,
-  Navigation2,
-  Pickaxe,
-  DoorOpen,
-  Gift,
-  Flame,
-  MessageSquare,
-  Clock,
-  Swords,
-  Search,
-  ArrowRight,
-} from 'lucide-vue-next'
+
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const router = useRouter()
 const auth = useAuthStore()
@@ -45,7 +39,7 @@ interface PluginDef {
   key: string
   name: string
   description: string
-  icon: any
+  icon: string
   path: string
   permission: string
   getConfigs: () => any[]
@@ -53,15 +47,15 @@ interface PluginDef {
 }
 
 const plugins: PluginDef[] = [
-  { key: 'loot', name: 'Loot Tables', description: 'Configure loot container drop tables and item probabilities', icon: Crosshair, path: '/loot-builder', permission: 'loot.view', getConfigs: () => lootStore.profiles, fetchFn: () => lootStore.fetchProfiles() },
-  { key: 'teleport', name: 'Teleport', description: 'Home locations, TPR cooldowns, and VIP teleport settings', icon: Navigation2, path: '/teleport-config', permission: 'teleport.view', getConfigs: () => teleportStore.configs, fetchFn: () => teleportStore.fetchConfigs() },
-  { key: 'gather', name: 'Gather Rates', description: 'Resource gathering multipliers and pickup rates', icon: Pickaxe, path: '/gather-manager', permission: 'gather.view', getConfigs: () => gatherStore.configs, fetchFn: () => gatherStore.fetchConfigs() },
-  { key: 'autodoors', name: 'Auto Doors', description: 'Automatic door closing delays and permissions', icon: DoorOpen, path: '/autodoors', permission: 'autodoors.view', getConfigs: () => autoDoorsStore.configs, fetchFn: () => autoDoorsStore.fetchConfigs() },
-  { key: 'kits', name: 'Kits', description: 'Player kits with items, cooldowns, and permissions', icon: Gift, path: '/kits', permission: 'kits.view', getConfigs: () => kitsStore.configs, fetchFn: () => kitsStore.fetchConfigs() },
-  { key: 'furnacesplitter', name: 'Furnace Splitter', description: 'Automatic furnace ore splitting and smelting config', icon: Flame, path: '/furnace-splitter', permission: 'furnacesplitter.view', getConfigs: () => furnaceSplitterStore.configs, fetchFn: () => furnaceSplitterStore.fetchConfigs() },
-  { key: 'betterchat', name: 'Better Chat', description: 'Chat formatting, group colors, and title prefixes', icon: MessageSquare, path: '/better-chat', permission: 'betterchat.view', getConfigs: () => betterChatStore.configs, fetchFn: () => betterChatStore.fetchConfigs() },
-  { key: 'timedexecute', name: 'Timed Execute', description: 'Scheduled, real-time, and event-driven command execution', icon: Clock, path: '/timed-execute', permission: 'timedexecute.view', getConfigs: () => timedExecuteStore.configs, fetchFn: () => timedExecuteStore.fetchConfigs() },
-  { key: 'raidablebases', name: 'Raidable Bases', description: 'PVE raid events, difficulty, NPCs, and loot settings', icon: Swords, path: '/raidable-bases', permission: 'raidablebases.view', getConfigs: () => raidableBasesStore.configs, fetchFn: () => raidableBasesStore.fetchConfigs() },
+  { key: 'loot', name: 'Loot tables', description: 'Configure loot container drop tables and item probabilities', icon: 'crosshair', path: '/loot-builder', permission: 'loot.view', getConfigs: () => lootStore.profiles, fetchFn: () => lootStore.fetchProfiles() },
+  { key: 'teleport', name: 'Teleport', description: 'Home locations, TPR cooldowns, and VIP teleport settings', icon: 'navigation', path: '/teleport-config', permission: 'teleport.view', getConfigs: () => teleportStore.configs, fetchFn: () => teleportStore.fetchConfigs() },
+  { key: 'gather', name: 'Gather rates', description: 'Resource gathering multipliers and pickup rates', icon: 'pickaxe', path: '/gather-manager', permission: 'gather.view', getConfigs: () => gatherStore.configs, fetchFn: () => gatherStore.fetchConfigs() },
+  { key: 'autodoors', name: 'Auto doors', description: 'Automatic door closing delays and permissions', icon: 'door-open', path: '/autodoors', permission: 'autodoors.view', getConfigs: () => autoDoorsStore.configs, fetchFn: () => autoDoorsStore.fetchConfigs() },
+  { key: 'kits', name: 'Kits', description: 'Player kits with items, cooldowns, and permissions', icon: 'gift', path: '/kits', permission: 'kits.view', getConfigs: () => kitsStore.configs, fetchFn: () => kitsStore.fetchConfigs() },
+  { key: 'furnacesplitter', name: 'Furnace splitter', description: 'Automatic furnace ore splitting and smelting config', icon: 'flame', path: '/furnace-splitter', permission: 'furnacesplitter.view', getConfigs: () => furnaceSplitterStore.configs, fetchFn: () => furnaceSplitterStore.fetchConfigs() },
+  { key: 'betterchat', name: 'Better Chat', description: 'Chat formatting, group colors, and title prefixes', icon: 'message-square', path: '/better-chat', permission: 'betterchat.view', getConfigs: () => betterChatStore.configs, fetchFn: () => betterChatStore.fetchConfigs() },
+  { key: 'timedexecute', name: 'Timed Execute', description: 'Scheduled, real-time, and event-driven command execution', icon: 'clock', path: '/timed-execute', permission: 'timedexecute.view', getConfigs: () => timedExecuteStore.configs, fetchFn: () => timedExecuteStore.fetchConfigs() },
+  { key: 'raidablebases', name: 'Raidable Bases', description: 'PVE raid events, difficulty, NPCs, and loot settings', icon: 'swords', path: '/raidable-bases', permission: 'raidablebases.view', getConfigs: () => raidableBasesStore.configs, fetchFn: () => raidableBasesStore.fetchConfigs() },
 ]
 
 const visiblePlugins = computed(() =>
@@ -76,12 +70,12 @@ const filteredPlugins = computed(() => {
   )
 })
 
-function getStatus(plugin: PluginDef): { label: string; color: string } {
+function getStatus(plugin: PluginDef): { label: string; tone: 'online' | 'info' | 'neutral' } {
   const configs = plugin.getConfigs()
-  if (!configs || configs.length === 0) return { label: 'Not Configured', color: 'neutral' }
+  if (!configs || configs.length === 0) return { label: 'Not configured', tone: 'neutral' }
   const hasActive = configs.some((c: any) => c.is_active)
-  if (hasActive) return { label: 'Active', color: 'green' }
-  return { label: 'Configured', color: 'blue' }
+  if (hasActive) return { label: 'Active', tone: 'online' }
+  return { label: 'Configured', tone: 'info' }
 }
 
 function getConfigCount(plugin: PluginDef): string {
@@ -90,6 +84,12 @@ function getConfigCount(plugin: PluginDef): string {
   return `${configs.length} profile${configs.length !== 1 ? 's' : ''}`
 }
 
+// Search model — DS Input uses string v-model
+const searchModel = computed<string>({
+  get: () => searchQuery.value,
+  set: (v: string | undefined) => { searchQuery.value = v ?? '' },
+})
+
 onMounted(async () => {
   const fetches = visiblePlugins.value.map(p => p.fetchFn().catch(() => {}))
   await Promise.all(fetches)
@@ -98,88 +98,142 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-6 max-w-7xl mx-auto">
-    <!-- Header -->
-    <div class="mb-6">
-      <h1 class="text-2xl font-bold text-white">Plugin Configs</h1>
-      <p class="text-neutral-400 mt-1">Configure and manage your server plugins</p>
+  <div class="pc">
+    <!-- Page head -->
+    <div class="pc__head">
+      <div class="pc__head-id">
+        <div class="pc__head-chip">
+          <Icon name="puzzle" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin management</div>
+          <h1 class="pc__title">Plugin configs</h1>
+        </div>
+      </div>
     </div>
 
     <!-- Search -->
-    <div class="relative mb-6">
-      <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-      <input
-        v-model="searchQuery"
-        type="text"
-        placeholder="Search plugins..."
-        class="w-full pl-10 pr-4 py-2 bg-neutral-900 border border-neutral-800 rounded-lg text-sm text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-oxide-500 transition-colors"
-      />
-    </div>
+    <Input
+      v-model="searchModel"
+      icon="search"
+      placeholder="Search plugins…"
+    />
 
-    <!-- Loading -->
-    <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Loading skeleton -->
+    <div v-if="loading" class="pc__grid">
       <div
         v-for="i in visiblePlugins.length"
         :key="i"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 animate-pulse"
+        class="pc__skeleton"
       >
-        <div class="flex items-center gap-3 mb-3">
-          <div class="w-10 h-10 bg-neutral-800 rounded-lg" />
-          <div class="flex-1">
-            <div class="h-4 w-24 bg-neutral-800 rounded" />
-            <div class="h-3 w-16 bg-neutral-800 rounded mt-2" />
-          </div>
+        <div class="pc__skel-icon" />
+        <div class="pc__skel-lines">
+          <div class="pc__skel-line pc__skel-line--name" />
+          <div class="pc__skel-line pc__skel-line--sub" />
         </div>
-        <div class="h-3 w-full bg-neutral-800 rounded mt-3" />
-        <div class="h-3 w-2/3 bg-neutral-800 rounded mt-2" />
       </div>
     </div>
 
-    <!-- Cards -->
-    <div v-else-if="filteredPlugins.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Cards grid -->
+    <div v-else-if="filteredPlugins.length" class="pc__grid">
       <div
         v-for="plugin in filteredPlugins"
         :key="plugin.key"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 hover:border-neutral-700 transition-colors group"
+        class="pc__card"
       >
-        <div class="flex items-start justify-between mb-3">
-          <div class="flex items-center gap-3">
-            <div class="w-10 h-10 bg-neutral-800 rounded-lg flex items-center justify-center group-hover:bg-oxide-500/10 transition-colors">
-              <component :is="plugin.icon" class="w-5 h-5 text-neutral-400 group-hover:text-oxide-400 transition-colors" />
+        <!-- Card head -->
+        <div class="pc__card-head">
+          <div class="pc__card-id">
+            <div class="pc__card-icon">
+              <Icon :name="plugin.icon" :size="18" :stroke-width="2" />
             </div>
             <div>
-              <h3 class="text-sm font-semibold text-white">{{ plugin.name }}</h3>
-              <span class="text-xs text-neutral-500">{{ getConfigCount(plugin) }}</span>
+              <div class="pc__card-name">{{ plugin.name }}</div>
+              <div class="pc__card-count">{{ getConfigCount(plugin) }}</div>
             </div>
           </div>
-          <!-- Status badge -->
-          <span
-            class="text-[10px] font-medium px-2 py-0.5 rounded-full"
-            :class="{
-              'bg-green-500/10 text-green-400': getStatus(plugin).color === 'green',
-              'bg-blue-500/10 text-blue-400': getStatus(plugin).color === 'blue',
-              'bg-neutral-800 text-neutral-500': getStatus(plugin).color === 'neutral',
-            }"
-          >
-            {{ getStatus(plugin).label }}
-          </span>
+          <Badge :tone="getStatus(plugin).tone">{{ getStatus(plugin).label }}</Badge>
         </div>
 
-        <p class="text-xs text-neutral-400 mb-4 line-clamp-2">{{ plugin.description }}</p>
+        <!-- Description -->
+        <p class="pc__card-desc">{{ plugin.description }}</p>
 
-        <button
+        <!-- Configure button -->
+        <Button
+          variant="secondary"
+          size="sm"
+          icon-right="chevron-right"
+          :block="true"
           @click="router.push(plugin.path)"
-          class="w-full flex items-center justify-center gap-2 px-3 py-2 bg-neutral-800 hover:bg-oxide-500/10 text-neutral-300 hover:text-oxide-400 text-xs font-medium rounded-lg transition-colors"
-        >
-          Configure
-          <ArrowRight class="w-3 h-3" />
-        </button>
+        >Configure</Button>
       </div>
     </div>
 
-    <!-- Empty state -->
-    <div v-else class="text-center py-12">
-      <p class="text-neutral-500">No plugins match your search.</p>
-    </div>
+    <!-- Empty state (search miss) -->
+    <Panel v-else>
+      <EmptyState
+        icon="search"
+        title="No plugins match"
+        description="Try a different search term."
+      />
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+/* ---- Page shell ---- */
+.pc { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* ---- Page head ---- */
+.pc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.pc__head-id { display: flex; align-items: center; gap: 12px; }
+.pc__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pc__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* ---- Grid ---- */
+.pc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+@media (max-width: 900px)  { .pc__grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 540px)  { .pc__grid { grid-template-columns: 1fr; } }
+
+/* ---- Card ---- */
+.pc__card {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
+  transition: var(--transition-colors);
+}
+.pc__card:hover { background: var(--surface-raised); }
+
+.pc__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.pc__card-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.pc__card-icon {
+  width: 36px; height: 36px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text-tertiary); background: var(--surface-raised-2);
+  box-shadow: var(--ring-default); transition: var(--transition-colors);
+}
+.pc__card:hover .pc__card-icon { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
+.pc__card-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.pc__card-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
+.pc__card-desc { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; flex: 1; }
+
+/* ---- Skeleton ---- */
+.pc__skeleton {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  padding: 16px; display: flex; align-items: flex-start; gap: 12px;
+  animation: pc-pulse 1.4s ease-in-out infinite;
+}
+@keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
+.pc__skel-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-raised-2); flex: none; }
+.pc__skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
+.pc__skel-line { height: 10px; border-radius: var(--radius-sm); background: var(--surface-raised-2); }
+.pc__skel-line--name { width: 60%; }
+.pc__skel-line--sub { width: 40%; }
+</style>
diff --git a/frontend/src/views/admin/RaidableBasesView.vue b/frontend/src/views/admin/RaidableBasesView.vue
index afb43fa..7b12a36 100644
--- a/frontend/src/views/admin/RaidableBasesView.vue
+++ b/frontend/src/views/admin/RaidableBasesView.vue
@@ -1,18 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRaidableBasesStore } from '@/stores/raidablebases'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Swords,
-  Settings as SettingsIcon,
-  Shield,
-  Users,
-  Gift,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useRaidableBasesStore()
 
@@ -24,13 +18,14 @@ const newConfigName = ref('')
 const newConfigDesc = ref('')
 const importConfigName = ref('')
 
-const tabs = [
-  { key: 'general', label: 'General', icon: SettingsIcon },
-  { key: 'difficulty', label: 'Difficulty', icon: Shield },
-  { key: 'npc', label: 'NPC Settings', icon: Users },
-  { key: 'loot', label: 'Loot & Rewards', icon: Gift },
+const tabItems = [
+  { value: 'general', label: 'General', icon: 'settings' },
+  { value: 'difficulty', label: 'Difficulty', icon: 'shield' },
+  { value: 'npc', label: 'NPC settings', icon: 'users' },
+  { value: 'loot', label: 'Loot & rewards', icon: 'gift' },
 ]
 
+const difficultyItems = ['Easy', 'Medium', 'Hard', 'Expert', 'Nightmare'].map(d => ({ value: d, label: d }))
 const difficulties = ['Easy', 'Medium', 'Hard', 'Expert', 'Nightmare']
 
 onMounted(async () => {
@@ -117,1027 +112,938 @@ async function handleImport() {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Raidable Bases</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="rb">
+    <!-- Page head -->
+    <div class="rb__head">
+      <div class="rb__head-id">
+        <div class="rb__head-chip">
+          <Icon name="swords" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="rb__title">Raidable bases</h1>
+        </div>
+      </div>
+      <div class="rb__head-actions">
+        <Button variant="secondary" size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
       </div>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config selector + action bar -->
+    <Panel>
+      <div class="rb__toolbar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="rb__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="rb__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          variant="primary"
+          size="sm"
+          icon="save"
+          :loading="store.isSaving"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          size="sm"
+          icon="play"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="download"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <div class="rb__toolbar-spacer" />
+
+        <Button
+          variant="danger-soft"
+          size="sm"
+          icon="trash-2"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
+    <!-- Loading state -->
+    <Panel v-if="store.isLoading">
+      <div class="rb__loading">
+        <span class="rb__spinner" />
+        <span class="rb__loading-label">Loading config…</span>
+      </div>
+    </Panel>
 
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Swords class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Raidable Bases Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="swords"
+        title="No raidable bases config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Tab bar -->
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
       <!-- ======================= GENERAL TAB ======================= -->
-      <div v-if="activeTab === 'general'" class="space-y-6">
-        <!-- Maintained Events Section -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Maintained Events</h3>
-          <p class="text-xs text-neutral-500 -mt-4">Maintained events keep a set number of raid bases on the map at all times. When one is cleared, a new one spawns.</p>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Always Maintain Max Events -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Always Maintain Max Events</label>
-                <p class="text-xs text-neutral-500">Keep spawning bases to maintain the max count</p>
+      <template v-if="activeTab === 'general'">
+        <!-- Maintained Events -->
+        <Panel title="Maintained events" subtitle="Keep a set number of raid bases on the map at all times. When one is cleared, a new one spawns.">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Always maintain max events</div>
+                <div class="rb__toggle-sub">Keep spawning bases to maintain the max count</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Maintained Events.Always Maintain Max Events', !getConfigValue('Settings.Maintained Events.Always Maintain Max Events', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Maintained Events.Always Maintain Max Events', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Maintained Events.Always Maintain Max Events', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Maintained Events.Always Maintain Max Events', false)"
+                @update:model-value="setConfigValue('Settings.Maintained Events.Always Maintain Max Events', $event)"
+              />
             </div>
-
-            <!-- Maintained Include PVE Day -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Include PVE Day</label>
-                <p class="text-xs text-neutral-500">Spawn PVE bases during daytime</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Include PVE day</div>
+                <div class="rb__toggle-sub">Spawn PVE bases during daytime</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Maintained Events.Include PVE Day', !getConfigValue('Settings.Maintained Events.Include PVE Day', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Maintained Events.Include PVE Day', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Maintained Events.Include PVE Day', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Maintained Events.Include PVE Day', true)"
+                @update:model-value="setConfigValue('Settings.Maintained Events.Include PVE Day', $event)"
+              />
             </div>
-
-            <!-- Maintained Include PVP Day -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Include PVP Day</label>
-                <p class="text-xs text-neutral-500">Spawn PVP bases during daytime</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Include PVP day</div>
+                <div class="rb__toggle-sub">Spawn PVP bases during daytime</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Maintained Events.Include PVP Day', !getConfigValue('Settings.Maintained Events.Include PVP Day', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Maintained Events.Include PVP Day', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Maintained Events.Include PVP Day', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Maintained Events.Include PVP Day', true)"
+                @update:model-value="setConfigValue('Settings.Maintained Events.Include PVP Day', $event)"
+              />
             </div>
-
-            <!-- Maintained Include PVE Night -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Include PVE Night</label>
-                <p class="text-xs text-neutral-500">Spawn PVE bases during nighttime</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Include PVE night</div>
+                <div class="rb__toggle-sub">Spawn PVE bases during nighttime</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Maintained Events.Include PVE Night', !getConfigValue('Settings.Maintained Events.Include PVE Night', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Maintained Events.Include PVE Night', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Maintained Events.Include PVE Night', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Maintained Events.Include PVE Night', true)"
+                @update:model-value="setConfigValue('Settings.Maintained Events.Include PVE Night', $event)"
+              />
             </div>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Max Maintained Events</label>
-              <p class="text-xs text-neutral-500 mb-2">Maximum number of raid bases on map at once</p>
+          <div class="rb__grid3 rb__mt">
+            <label class="rb__field">
+              <span class="rb__field-label">Max maintained events</span>
+              <span class="rb__field-hint">Maximum number of raid bases on map at once</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Maintained Events.Max Maintained Events', 1)"
+                min="0"
                 @input="setConfigValue('Settings.Maintained Events.Max Maintained Events', Number(($event.target as HTMLInputElement).value))"
-                min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Min Players Online</label>
-              <p class="text-xs text-neutral-500 mb-2">Minimum players required before bases spawn</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Min players online</span>
+              <span class="rb__field-hint">Minimum players required before bases spawn</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Maintained Events.Minimum Required Players Online', 0)"
-                @input="setConfigValue('Settings.Maintained Events.Minimum Required Players Online', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Settings.Maintained Events.Minimum Required Players Online', Number(($event.target as HTMLInputElement).value))"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Chance PVP (%)</label>
-              <p class="text-xs text-neutral-500 mb-2">Chance to randomly spawn PVP bases (0-100)</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Chance PVP (%)</span>
+              <span class="rb__field-hint">Chance to randomly spawn PVP bases (0–100)</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Maintained Events.Chance To Randomly Spawn PVP Bases', 0)"
-                @input="setConfigValue('Settings.Maintained Events.Chance To Randomly Spawn PVP Bases', Number(($event.target as HTMLInputElement).value))"
                 min="0"
                 max="100"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Settings.Maintained Events.Chance To Randomly Spawn PVP Bases', Number(($event.target as HTMLInputElement).value))"
+              />
+            </label>
+          </div>
+        </Panel>
+
+        <!-- Scheduled Events -->
+        <Panel title="Scheduled events" subtitle="Spawn raid bases at random intervals. Configure timing and limits below.">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Enabled</div>
+                <div class="rb__toggle-sub">Enable scheduled event spawns</div>
+              </div>
+              <Switch
+                :model-value="getConfigValue('Settings.Scheduled Events.Enabled', false)"
+                @update:model-value="setConfigValue('Settings.Scheduled Events.Enabled', $event)"
+              />
+            </div>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Include PVP day</div>
+                <div class="rb__toggle-sub">Spawn PVP scheduled bases during day</div>
+              </div>
+              <Switch
+                :model-value="getConfigValue('Settings.Scheduled Events.Include PVP Day', true)"
+                @update:model-value="setConfigValue('Settings.Scheduled Events.Include PVP Day', $event)"
               />
             </div>
           </div>
-        </div>
 
-        <!-- Scheduled Events Section -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Scheduled Events</h3>
-          <p class="text-xs text-neutral-500 -mt-4">Scheduled events spawn raid bases at random intervals. Configure timing and limits below.</p>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Enabled -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Enabled</label>
-                <p class="text-xs text-neutral-500">Enable scheduled event spawns</p>
-              </div>
-              <button
-                @click="setConfigValue('Settings.Scheduled Events.Enabled', !getConfigValue('Settings.Scheduled Events.Enabled', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Scheduled Events.Enabled', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Scheduled Events.Enabled', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-
-            <!-- Include PVP Day -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Include PVP Day</label>
-                <p class="text-xs text-neutral-500">Spawn PVP scheduled bases during day</p>
-              </div>
-              <button
-                @click="setConfigValue('Settings.Scheduled Events.Include PVP Day', !getConfigValue('Settings.Scheduled Events.Include PVP Day', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Scheduled Events.Include PVP Day', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Scheduled Events.Include PVP Day', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Every Min Seconds</label>
-              <p class="text-xs text-neutral-500 mb-2">Minimum time between spawns</p>
+          <div class="rb__grid4 rb__mt">
+            <label class="rb__field">
+              <span class="rb__field-label">Every min seconds</span>
+              <span class="rb__field-hint">Minimum time between spawns</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Scheduled Events.Every Min Seconds', 3600)"
+                min="0"
                 @input="setConfigValue('Settings.Scheduled Events.Every Min Seconds', Number(($event.target as HTMLInputElement).value))"
-                min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Every Max Seconds</label>
-              <p class="text-xs text-neutral-500 mb-2">Maximum time between spawns</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Every max seconds</span>
+              <span class="rb__field-hint">Maximum time between spawns</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Scheduled Events.Every Max Seconds', 7200)"
+                min="0"
                 @input="setConfigValue('Settings.Scheduled Events.Every Max Seconds', Number(($event.target as HTMLInputElement).value))"
-                min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Max Scheduled Events</label>
-              <p class="text-xs text-neutral-500 mb-2">Maximum concurrent scheduled bases</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Max scheduled events</span>
+              <span class="rb__field-hint">Maximum concurrent scheduled bases</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Scheduled Events.Max Scheduled Events', 1)"
-                @input="setConfigValue('Settings.Scheduled Events.Max Scheduled Events', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Settings.Scheduled Events.Max Scheduled Events', Number(($event.target as HTMLInputElement).value))"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Min Players Online</label>
-              <p class="text-xs text-neutral-500 mb-2">Required players for scheduled events</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Min players online</span>
+              <span class="rb__field-hint">Required players for scheduled events</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Scheduled Events.Minimum Required Players Online', 0)"
-                @input="setConfigValue('Settings.Scheduled Events.Minimum Required Players Online', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Settings.Scheduled Events.Minimum Required Players Online', Number(($event.target as HTMLInputElement).value))"
               />
-            </div>
+            </label>
           </div>
-        </div>
+        </Panel>
 
         <!-- General Settings -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">General Settings</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Expansion Mode -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Expansion Mode</label>
-                <p class="text-xs text-neutral-500">Use Expansion Mode for spawning calculations</p>
+        <Panel title="General settings">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Expansion mode</div>
+                <div class="rb__toggle-sub">Use expansion mode for spawning calculations</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Expansion Mode', !getConfigValue('Settings.Expansion Mode', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Expansion Mode', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Expansion Mode', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Expansion Mode', false)"
+                @update:model-value="setConfigValue('Settings.Expansion Mode', $event)"
+              />
             </div>
-
-            <!-- Show XZ Coordinates -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Show X Z Coordinates</label>
-                <p class="text-xs text-neutral-500">Show base coordinates in chat announcements</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Show X Z coordinates</div>
+                <div class="rb__toggle-sub">Show base coordinates in chat announcements</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Show X Z Coordinates', !getConfigValue('Settings.Show X Z Coordinates', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Show X Z Coordinates', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Show X Z Coordinates', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Show X Z Coordinates', false)"
+                @update:model-value="setConfigValue('Settings.Show X Z Coordinates', $event)"
+              />
             </div>
-
-            <!-- Remove Admins From Raiders List -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Remove Admins From Raiders List</label>
-                <p class="text-xs text-neutral-500">Exclude admins from the raiders tracking list</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Remove admins from raiders list</div>
+                <div class="rb__toggle-sub">Exclude admins from the raiders tracking list</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Remove Admins From Raiders List', !getConfigValue('Settings.Remove Admins From Raiders List', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Remove Admins From Raiders List', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Remove Admins From Raiders List', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Remove Admins From Raiders List', false)"
+                @update:model-value="setConfigValue('Settings.Remove Admins From Raiders List', $event)"
+              />
             </div>
-
-            <!-- Block Wizardry Plugin -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Block Wizardry Plugin At Events</label>
-                <p class="text-xs text-neutral-500">Prevent Wizardry plugin use during raid events</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Block Wizardry plugin at events</div>
+                <div class="rb__toggle-sub">Prevent Wizardry plugin use during raid events</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Block Wizardry Plugin At Events', !getConfigValue('Settings.Block Wizardry Plugin At Events', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Block Wizardry Plugin At Events', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Block Wizardry Plugin At Events', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Amount Of Entities To Undo Per Batch</label>
-              <p class="text-xs text-neutral-500 mb-2">Entities cleaned per batch during despawn</p>
-              <input
-                type="number"
-                :value="getConfigValue('Settings.Amount Of Entities To Undo Per Batch', 5)"
-                @input="setConfigValue('Settings.Amount Of Entities To Undo Per Batch', Number(($event.target as HTMLInputElement).value))"
-                min="1"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              <Switch
+                :model-value="getConfigValue('Settings.Block Wizardry Plugin At Events', false)"
+                @update:model-value="setConfigValue('Settings.Block Wizardry Plugin At Events', $event)"
               />
             </div>
           </div>
-        </div>
+
+          <div class="rb__grid3 rb__mt">
+            <label class="rb__field">
+              <span class="rb__field-label">Entities to undo per batch</span>
+              <span class="rb__field-hint">Entities cleaned per batch during despawn</span>
+              <input
+                type="number"
+                class="cc-number"
+                :value="getConfigValue('Settings.Amount Of Entities To Undo Per Batch', 5)"
+                min="1"
+                @input="setConfigValue('Settings.Amount Of Entities To Undo Per Batch', Number(($event.target as HTMLInputElement).value))"
+              />
+            </label>
+          </div>
+        </Panel>
 
         <!-- GUI Announcements -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">GUI Announcements</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Enabled</label>
-                <p class="text-xs text-neutral-500">Show GUI announcement banners for events</p>
+        <Panel title="GUI announcements">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Enabled</div>
+                <div class="rb__toggle-sub">Show GUI announcement banners for events</div>
               </div>
-              <button
-                @click="setConfigValue('GUIAnnouncements.Enabled', !getConfigValue('GUIAnnouncements.Enabled', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('GUIAnnouncements.Enabled', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('GUIAnnouncements.Enabled', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('GUIAnnouncements.Enabled', false)"
+                @update:model-value="setConfigValue('GUIAnnouncements.Enabled', $event)"
+              />
             </div>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Banner Tint Color</label>
-              <p class="text-xs text-neutral-500 mb-2">Color of the announcement banner</p>
+          <div class="rb__grid3 rb__mt">
+            <label class="rb__field">
+              <span class="rb__field-label">Banner tint color</span>
+              <span class="rb__field-hint">Color of the announcement banner</span>
               <input
                 type="text"
+                class="cc-number"
                 :value="getConfigValue('GUIAnnouncements.Banner Tint Color', 'Grey')"
                 @input="setConfigValue('GUIAnnouncements.Banner Tint Color', ($event.target as HTMLInputElement).value)"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Text Color</label>
-              <p class="text-xs text-neutral-500 mb-2">Color of the announcement text</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Text color</span>
+              <span class="rb__field-hint">Color of the announcement text</span>
               <input
                 type="text"
+                class="cc-number"
                 :value="getConfigValue('GUIAnnouncements.Text Color', 'White')"
                 @input="setConfigValue('GUIAnnouncements.Text Color', ($event.target as HTMLInputElement).value)"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Maximum Distance</label>
-              <p class="text-xs text-neutral-500 mb-2">Max distance to show announcements</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Maximum distance</span>
+              <span class="rb__field-hint">Max distance to show announcements</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('GUIAnnouncements.Maximum Distance', 300)"
-                @input="setConfigValue('GUIAnnouncements.Maximum Distance', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('GUIAnnouncements.Maximum Distance', Number(($event.target as HTMLInputElement).value))"
               />
-            </div>
+            </label>
           </div>
-        </div>
-      </div>
+        </Panel>
+      </template>
 
       <!-- ======================= DIFFICULTY TAB ======================= -->
-      <div v-else-if="activeTab === 'difficulty'" class="space-y-6">
-        <!-- Difficulty Sub-tabs -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-          <div class="flex gap-2 flex-wrap">
-            <button
-              v-for="diff in difficulties"
-              :key="diff"
-              @click="activeDifficulty = diff"
-              class="px-4 py-2 text-sm rounded-lg transition-colors"
-              :class="activeDifficulty === diff
-                ? 'bg-oxide-500 text-white'
-                : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200 hover:bg-neutral-700'"
+      <template v-else-if="activeTab === 'difficulty'">
+        <!-- Difficulty sub-tabs -->
+        <Panel>
+          <Tabs v-model="activeDifficulty" :items="difficultyItems" />
+        </Panel>
+
+        <!-- Difficulty settings -->
+        <Panel :title="activeDifficulty + ' difficulty settings'">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Enabled</div>
+                <div class="rb__toggle-sub">Allow {{ activeDifficulty.toLowerCase() }} difficulty bases to spawn</div>
+              </div>
+              <Switch
+                :model-value="getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.Enabled`, true)"
+                @update:model-value="setConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.Enabled`, $event)"
+              />
+            </div>
+          </div>
+
+          <!-- Spawn days -->
+          <div class="rb__section-head rb__mt">Spawn days</div>
+          <div class="rb__days">
+            <div
+              v-for="day in ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"
+              :key="day"
+              class="rb__day"
             >
-              {{ diff }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Difficulty Settings -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">{{ activeDifficulty }} Difficulty Settings</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Enabled -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Enabled</label>
-                <p class="text-xs text-neutral-500">Allow {{ activeDifficulty.toLowerCase() }} difficulty bases to spawn</p>
-              </div>
-              <button
-                @click="setConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.Enabled`, !getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.Enabled`, true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.Enabled`, true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.Enabled`, true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.${day}`, true)"
+                size="sm"
+                @update:model-value="setConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.${day}`, $event)"
+              />
+              <span class="rb__day-label">{{ day.slice(0, 3) }}</span>
             </div>
           </div>
 
-          <!-- Spawn Day Toggles -->
-          <div>
-            <h4 class="text-xs font-medium text-neutral-400 uppercase mb-3">Spawn Days</h4>
-            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
-              <div
-                v-for="day in ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"
-                :key="day"
-                class="flex items-center gap-2"
-              >
-                <button
-                  @click="setConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.${day}`, !getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.${day}`, true))"
-                  class="relative w-9 h-5 rounded-full transition-colors flex-shrink-0"
-                  :class="getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.${day}`, true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-                >
-                  <span
-                    class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full transition-transform"
-                    :class="getConfigValue(`Settings.Raid Management.${activeDifficulty} Raids Can Spawn On.${day}`, true) ? 'translate-x-4' : 'translate-x-0'"
-                  />
-                </button>
-                <span class="text-xs text-neutral-300">{{ day.slice(0, 3) }}</span>
+          <!-- Map marker colors -->
+          <div class="rb__section-head rb__mt">Map marker colors</div>
+          <div class="rb__grid2 rb__mt-sm">
+            <label class="rb__field">
+              <span class="rb__field-label">Border color</span>
+              <span class="rb__field-hint">Map marker border color for {{ activeDifficulty.toLowerCase() }} bases</span>
+              <input
+                type="text"
+                class="cc-number"
+                :value="getConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Border`, '')"
+                placeholder="e.g. 00FF00"
+                @input="setConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Border`, ($event.target as HTMLInputElement).value)"
+              />
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Inner color</span>
+              <span class="rb__field-hint">Map marker fill color for {{ activeDifficulty.toLowerCase() }} bases</span>
+              <input
+                type="text"
+                class="cc-number"
+                :value="getConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Inner`, '')"
+                placeholder="e.g. 00CC00"
+                @input="setConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Inner`, ($event.target as HTMLInputElement).value)"
+              />
+            </label>
+          </div>
+        </Panel>
+
+        <!-- Ranked ladder -->
+        <Panel title="Ranked ladder">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Enabled</div>
+                <div class="rb__toggle-sub">Track and display a ranked leaderboard</div>
               </div>
+              <Switch
+                :model-value="getConfigValue('Ranked Ladder.Enabled', true)"
+                @update:model-value="setConfigValue('Ranked Ladder.Enabled', $event)"
+              />
             </div>
           </div>
 
-          <!-- Difficulty Colors -->
-          <div>
-            <h4 class="text-xs font-medium text-neutral-400 uppercase mb-3">Map Marker Colors</h4>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="block text-sm text-neutral-200 mb-1">Border Color</label>
-                <p class="text-xs text-neutral-500 mb-2">Map marker border color for {{ activeDifficulty.toLowerCase() }} bases</p>
-                <input
-                  type="text"
-                  :value="getConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Border`, '')"
-                  @input="setConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Border`, ($event.target as HTMLInputElement).value)"
-                  placeholder="e.g. 00FF00"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-                />
-              </div>
-              <div>
-                <label class="block text-sm text-neutral-200 mb-1">Inner Color</label>
-                <p class="text-xs text-neutral-500 mb-2">Map marker fill color for {{ activeDifficulty.toLowerCase() }} bases</p>
-                <input
-                  type="text"
-                  :value="getConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Inner`, '')"
-                  @input="setConfigValue(`Settings.Raid Management.${activeDifficulty} Difficulty Colors.Inner`, ($event.target as HTMLInputElement).value)"
-                  placeholder="e.g. 00CC00"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-                />
-              </div>
-            </div>
+          <div class="rb__grid3 rb__mt">
+            <label class="rb__field">
+              <span class="rb__field-label">Award top X players on wipe</span>
+              <span class="rb__field-hint">Number of top players to award on server wipe</span>
+              <input
+                type="number"
+                class="cc-number"
+                :value="getConfigValue('Ranked Ladder.Award Top X Players On Wipe', 3)"
+                min="0"
+                @input="setConfigValue('Ranked Ladder.Award Top X Players On Wipe', Number(($event.target as HTMLInputElement).value))"
+              />
+            </label>
           </div>
-        </div>
-
-        <!-- Ranked Ladder -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Ranked Ladder</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Enabled</label>
-                <p class="text-xs text-neutral-500">Track and display a ranked leaderboard</p>
-              </div>
-              <button
-                @click="setConfigValue('Ranked Ladder.Enabled', !getConfigValue('Ranked Ladder.Enabled', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Ranked Ladder.Enabled', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Ranked Ladder.Enabled', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
-
-          <div class="max-w-sm">
-            <label class="block text-sm text-neutral-200 mb-1">Award Top X Players On Wipe</label>
-            <p class="text-xs text-neutral-500 mb-2">Number of top players to award on server wipe</p>
-            <input
-              type="number"
-              :value="getConfigValue('Ranked Ladder.Award Top X Players On Wipe', 3)"
-              @input="setConfigValue('Ranked Ladder.Award Top X Players On Wipe', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-            />
-          </div>
-        </div>
-      </div>
+        </Panel>
+      </template>
 
       <!-- ======================= NPC SETTINGS TAB ======================= -->
-      <div v-else-if="activeTab === 'npc'" class="space-y-6">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">NPC Configuration</h3>
-          <p class="text-xs text-neutral-500 -mt-4">Configure NPC guardians for raid bases. Per-profile NPC settings override these globals when set in profile files.</p>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Eject Mounts -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Eject Mounts</label>
-                <p class="text-xs text-neutral-500">Eject players from mounts when entering raid zone</p>
+      <template v-else-if="activeTab === 'npc'">
+        <Panel title="NPC configuration" subtitle="Configure NPC guardians for raid bases. Per-profile NPC settings override these globals when set in profile files.">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Eject mounts</div>
+                <div class="rb__toggle-sub">Eject players from mounts when entering raid zone</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Raid Management.Eject Mounts', !getConfigValue('Settings.Raid Management.Eject Mounts', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Raid Management.Eject Mounts', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Raid Management.Eject Mounts', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Raid Management.Eject Mounts', true)"
+                @update:model-value="setConfigValue('Settings.Raid Management.Eject Mounts', $event)"
+              />
             </div>
-
-            <!-- Despawn Minutes Inactive Reset -->
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Reset Despawn Timer on Damage</label>
-                <p class="text-xs text-neutral-500">Reset inactive despawn timer when base takes damage</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Reset despawn timer on damage</div>
+                <div class="rb__toggle-sub">Reset inactive despawn timer when base takes damage</div>
               </div>
-              <button
-                @click="setConfigValue('Settings.Raid Management.Despawn Minutes Inactive Reset', !getConfigValue('Settings.Raid Management.Despawn Minutes Inactive Reset', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Settings.Raid Management.Despawn Minutes Inactive Reset', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Settings.Raid Management.Despawn Minutes Inactive Reset', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Settings.Raid Management.Despawn Minutes Inactive Reset', false)"
+                @update:model-value="setConfigValue('Settings.Raid Management.Despawn Minutes Inactive Reset', $event)"
+              />
             </div>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Despawn Minutes Inactive</label>
-              <p class="text-xs text-neutral-500 mb-2">Minutes before an untouched base despawns</p>
+          <div class="rb__grid3 rb__mt">
+            <label class="rb__field">
+              <span class="rb__field-label">Despawn minutes inactive</span>
+              <span class="rb__field-hint">Minutes before an untouched base despawns</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Raid Management.Despawn Minutes Inactive', 45)"
+                min="0"
                 @input="setConfigValue('Settings.Raid Management.Despawn Minutes Inactive', Number(($event.target as HTMLInputElement).value))"
-                min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Max Amount Allowed To Enter</label>
-              <p class="text-xs text-neutral-500 mb-2">Max players allowed inside a raid base at once</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Max allowed to enter</span>
+              <span class="rb__field-hint">Max players allowed inside a raid base at once</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Raid Management.Max Amount Allowed To Enter', 0)"
+                min="0"
                 @input="setConfigValue('Settings.Raid Management.Max Amount Allowed To Enter', Number(($event.target as HTMLInputElement).value))"
-                min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Max Amount Allowed To Enter Maintained</label>
-              <p class="text-xs text-neutral-500 mb-2">Max players for maintained event bases (0 = unlimited)</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Max allowed (maintained)</span>
+              <span class="rb__field-hint">Max players for maintained event bases (0 = unlimited)</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Raid Management.Max Amount Allowed To Enter Maintained', 0)"
+                min="0"
                 @input="setConfigValue('Settings.Raid Management.Max Amount Allowed To Enter Maintained', Number(($event.target as HTMLInputElement).value))"
-                min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
+            </label>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Weapons Section -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Weapons & Defenses</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Turret Health</label>
-              <p class="text-xs text-neutral-500 mb-2">Health of auto turrets in bases</p>
+        <!-- Weapons & Defenses -->
+        <Panel title="Weapons & defenses">
+          <div class="rb__grid3">
+            <label class="rb__field">
+              <span class="rb__field-label">Turret health</span>
+              <span class="rb__field-hint">Health of auto turrets in bases</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Weapons.Turret Health', 1000)"
+                min="0"
                 @input="setConfigValue('Weapons.Turret Health', Number(($event.target as HTMLInputElement).value))"
-                min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">SamSite Range</label>
-              <p class="text-xs text-neutral-500 mb-2">Range of SAM site defenses (meters)</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">SAM site range</span>
+              <span class="rb__field-hint">Range of SAM site defenses (meters)</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Weapons.SamSite Range', 150)"
-                @input="setConfigValue('Weapons.SamSite Range', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Weapons.SamSite Range', Number(($event.target as HTMLInputElement).value))"
               />
-            </div>
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Turret Starting Ammo</label>
-              <p class="text-xs text-neutral-500 mb-2">Ammo loaded in auto turrets at spawn</p>
+            </label>
+            <label class="rb__field">
+              <span class="rb__field-label">Turret starting ammo</span>
+              <span class="rb__field-hint">Ammo loaded in auto turrets at spawn</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Weapons.Starting Ammo', 256)"
-                @input="setConfigValue('Weapons.Starting Ammo', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Weapons.Starting Ammo', Number(($event.target as HTMLInputElement).value))"
+              />
+            </label>
+          </div>
+        </Panel>
+
+        <!-- TruePVE integration -->
+        <Panel title="TruePVE integration">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Server wide PVP</div>
+                <div class="rb__toggle-sub">Enable server-wide PVP during raid events</div>
+              </div>
+              <Switch
+                :model-value="getConfigValue('TruePVE.Server Wide PVP', false)"
+                @update:model-value="setConfigValue('TruePVE.Server Wide PVP', $event)"
+              />
+            </div>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Allow PVP at events</div>
+                <div class="rb__toggle-sub">Allow PVP in the raid base area</div>
+              </div>
+              <Switch
+                :model-value="getConfigValue('TruePVE.Allow PVP At Events', true)"
+                @update:model-value="setConfigValue('TruePVE.Allow PVP At Events', $event)"
               />
             </div>
           </div>
-        </div>
-
-        <!-- TruePVE Section -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">TruePVE Integration</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Server Wide PVP</label>
-                <p class="text-xs text-neutral-500">Enable server-wide PVP during raid events</p>
-              </div>
-              <button
-                @click="setConfigValue('TruePVE.Server Wide PVP', !getConfigValue('TruePVE.Server Wide PVP', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('TruePVE.Server Wide PVP', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('TruePVE.Server Wide PVP', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Allow PVP At Events</label>
-                <p class="text-xs text-neutral-500">Allow PVP in the raid base area</p>
-              </div>
-              <button
-                @click="setConfigValue('TruePVE.Allow PVP At Events', !getConfigValue('TruePVE.Allow PVP At Events', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('TruePVE.Allow PVP At Events', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('TruePVE.Allow PVP At Events', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
+        </Panel>
+      </template>
 
       <!-- ======================= LOOT & REWARDS TAB ======================= -->
-      <div v-else-if="activeTab === 'loot'" class="space-y-6">
-        <!-- Treasure / Loot Settings -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Loot Settings</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Use Random Skins</label>
-                <p class="text-xs text-neutral-500">Randomize skins on loot items</p>
+      <template v-else-if="activeTab === 'loot'">
+        <!-- Loot settings -->
+        <Panel title="Loot settings">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Use random skins</div>
+                <div class="rb__toggle-sub">Randomize skins on loot items</div>
               </div>
-              <button
-                @click="setConfigValue('Treasure.Use Random Skins', !getConfigValue('Treasure.Use Random Skins', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Treasure.Use Random Skins', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Treasure.Use Random Skins', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Treasure.Use Random Skins', false)"
+                @update:model-value="setConfigValue('Treasure.Use Random Skins', $event)"
+              />
             </div>
-
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Include Workshop Skins</label>
-                <p class="text-xs text-neutral-500">Include workshop skins in randomization</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Include workshop skins</div>
+                <div class="rb__toggle-sub">Include workshop skins in randomization</div>
               </div>
-              <button
-                @click="setConfigValue('Skins.Include Workshop Skins', !getConfigValue('Skins.Include Workshop Skins', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Skins.Include Workshop Skins', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Skins.Include Workshop Skins', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Skins.Include Workshop Skins', true)"
+                @update:model-value="setConfigValue('Skins.Include Workshop Skins', $event)"
+              />
             </div>
-
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Randomize NPC Item Skins</label>
-                <p class="text-xs text-neutral-500">Randomize skins on NPC equipment</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Randomize NPC item skins</div>
+                <div class="rb__toggle-sub">Randomize skins on NPC equipment</div>
               </div>
-              <button
-                @click="setConfigValue('Skins.Randomize Npc Item Skins', !getConfigValue('Skins.Randomize Npc Item Skins', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Skins.Randomize Npc Item Skins', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Skins.Randomize Npc Item Skins', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Skins.Randomize Npc Item Skins', true)"
+                @update:model-value="setConfigValue('Skins.Randomize Npc Item Skins', $event)"
+              />
             </div>
-
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Use Day Of Week Loot</label>
-                <p class="text-xs text-neutral-500">Vary loot tables based on day of week</p>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Use day of week loot</div>
+                <div class="rb__toggle-sub">Vary loot tables based on day of week</div>
               </div>
-              <button
-                @click="setConfigValue('Treasure.Use Day Of Week Loot', !getConfigValue('Treasure.Use Day Of Week Loot', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('Treasure.Use Day Of Week Loot', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('Treasure.Use Day Of Week Loot', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
+              <Switch
+                :model-value="getConfigValue('Treasure.Use Day Of Week Loot', false)"
+                @update:model-value="setConfigValue('Treasure.Use Day Of Week Loot', $event)"
+              />
             </div>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Amount Of Items To Spawn</label>
-              <p class="text-xs text-neutral-500 mb-2">Number of loot items per container</p>
+          <div class="rb__grid3 rb__mt">
+            <label class="rb__field">
+              <span class="rb__field-label">Items to spawn</span>
+              <span class="rb__field-hint">Number of loot items per container</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Treasure.Amount Of Items To Spawn', 6)"
-                @input="setConfigValue('Treasure.Amount Of Items To Spawn', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Treasure.Amount Of Items To Spawn', Number(($event.target as HTMLInputElement).value))"
               />
-            </div>
+            </label>
           </div>
-        </div>
+        </Panel>
 
-        <!-- Buyable Events -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Buyable Events</h3>
-          <p class="text-xs text-neutral-500 -mt-4">Allow players to purchase raid events using Economics or ServerRewards currency.</p>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div>
-              <label class="block text-sm text-neutral-200 mb-1">Max Buyable Events</label>
-              <p class="text-xs text-neutral-500 mb-2">Maximum concurrent purchased events (0 = disabled)</p>
+        <!-- Buyable events -->
+        <Panel title="Buyable events" subtitle="Allow players to purchase raid events using Economics or ServerRewards currency.">
+          <div class="rb__grid3">
+            <label class="rb__field">
+              <span class="rb__field-label">Max buyable events</span>
+              <span class="rb__field-hint">Maximum concurrent purchased events (0 = disabled)</span>
               <input
                 type="number"
+                class="cc-number"
                 :value="getConfigValue('Settings.Buyable Events.Max Buyable Events', 0)"
-                @input="setConfigValue('Settings.Buyable Events.Max Buyable Events', Number(($event.target as HTMLInputElement).value))"
                 min="0"
-                class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+                @input="setConfigValue('Settings.Buyable Events.Max Buyable Events', Number(($event.target as HTMLInputElement).value))"
+              />
+            </label>
+          </div>
+
+          <div class="rb__section-head rb__mt">Economics buy costs</div>
+          <div class="rb__grid5 rb__mt-sm">
+            <label v-for="diff in difficulties" :key="'eco-' + diff" class="rb__field">
+              <span class="rb__field-label">{{ diff }}</span>
+              <input
+                type="number"
+                class="cc-number"
+                :value="getConfigValue(`Economics Buy Raid Costs.${diff}`, 0)"
+                min="0"
+                @input="setConfigValue(`Economics Buy Raid Costs.${diff}`, Number(($event.target as HTMLInputElement).value))"
+              />
+            </label>
+          </div>
+
+          <div class="rb__section-head rb__mt">ServerRewards buy costs</div>
+          <div class="rb__grid5 rb__mt-sm">
+            <label v-for="diff in difficulties" :key="'sr-' + diff" class="rb__field">
+              <span class="rb__field-label">{{ diff }}</span>
+              <input
+                type="number"
+                class="cc-number"
+                :value="getConfigValue(`ServerRewards Buy Raid Costs.${diff}`, 0)"
+                min="0"
+                @input="setConfigValue(`ServerRewards Buy Raid Costs.${diff}`, Number(($event.target as HTMLInputElement).value))"
+              />
+            </label>
+          </div>
+        </Panel>
+
+        <!-- UI settings -->
+        <Panel title="UI settings">
+          <div class="rb__grid2">
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Buyable UI enabled</div>
+                <div class="rb__toggle-sub">Show in-game UI for purchasing raid events</div>
+              </div>
+              <Switch
+                :model-value="getConfigValue('UI.Buyable UI.Enabled', false)"
+                @update:model-value="setConfigValue('UI.Buyable UI.Enabled', $event)"
+              />
+            </div>
+            <div class="rb__toggle-row">
+              <div class="rb__toggle-body">
+                <div class="rb__toggle-label">Lockouts UI enabled</div>
+                <div class="rb__toggle-sub">Show lockout timer UI for players</div>
+              </div>
+              <Switch
+                :model-value="getConfigValue('UI.Lockouts.Enabled', false)"
+                @update:model-value="setConfigValue('UI.Lockouts.Enabled', $event)"
               />
             </div>
           </div>
+        </Panel>
+      </template>
+    </template>
 
-          <div>
-            <h4 class="text-xs font-medium text-neutral-400 uppercase mb-3">Economics Buy Costs</h4>
-            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-              <div v-for="diff in difficulties" :key="diff">
-                <label class="block text-sm text-neutral-200 mb-1">{{ diff }}</label>
-                <input
-                  type="number"
-                  :value="getConfigValue(`Economics Buy Raid Costs.${diff}`, 0)"
-                  @input="setConfigValue(`Economics Buy Raid Costs.${diff}`, Number(($event.target as HTMLInputElement).value))"
-                  min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h4 class="text-xs font-medium text-neutral-400 uppercase mb-3">ServerRewards Buy Costs</h4>
-            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-              <div v-for="diff in difficulties" :key="diff">
-                <label class="block text-sm text-neutral-200 mb-1">{{ diff }}</label>
-                <input
-                  type="number"
-                  :value="getConfigValue(`ServerRewards Buy Raid Costs.${diff}`, 0)"
-                  @input="setConfigValue(`ServerRewards Buy Raid Costs.${diff}`, Number(($event.target as HTMLInputElement).value))"
-                  min="0"
-                  class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- UI Settings -->
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-          <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">UI Settings</h3>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Buyable UI Enabled</label>
-                <p class="text-xs text-neutral-500">Show in-game UI for purchasing raid events</p>
-              </div>
-              <button
-                @click="setConfigValue('UI.Buyable UI.Enabled', !getConfigValue('UI.Buyable UI.Enabled', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('UI.Buyable UI.Enabled', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('UI.Buyable UI.Enabled', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-
-            <div class="flex items-center justify-between">
-              <div>
-                <label class="text-sm text-neutral-200">Lockouts UI Enabled</label>
-                <p class="text-xs text-neutral-500">Show lockout timer UI for players</p>
-              </div>
-              <button
-                @click="setConfigValue('UI.Lockouts.Enabled', !getConfigValue('UI.Lockouts.Enabled', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('UI.Lockouts.Enabled', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('UI.Lockouts.Enabled', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Raidable Bases Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="newConfigName"
-              placeholder="e.g. Default RaidableBases Settings"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleCreateConfig"
-            />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
-            <textarea
-              v-model="newConfigDesc"
-              rows="2"
-              placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
+    <!-- Create config modal -->
+    <Teleport to="body">
+      <div v-if="showCreateModal" class="rb__overlay" @click.self="showCreateModal = false">
+        <div class="rb__modal">
+          <div class="rb__modal-head">
+            <span class="rb__modal-title">New raidable bases config</span>
+            <button class="rb__modal-close" type="button" @click="showCreateModal = false">
+              <Icon name="x" :size="16" />
             </button>
           </div>
+          <div class="rb__modal-body">
+            <label class="rb__field">
+              <span class="rb__field-label">Config name</span>
+              <input
+                v-model="newConfigName"
+                type="text"
+                class="cc-number"
+                placeholder="e.g. Default RaidableBases settings"
+                @keydown.enter="handleCreateConfig"
+              />
+            </label>
+            <label class="rb__field rb__mt-sm">
+              <span class="rb__field-label">Description (optional)</span>
+              <textarea
+                v-model="newConfigDesc"
+                rows="2"
+                class="cc-textarea"
+                placeholder="What is this config for?"
+              />
+            </label>
+          </div>
+          <div class="rb__modal-foot">
+            <Button variant="ghost" type="button" @click="showCreateModal = false">Cancel</Button>
+            <Button icon="plus" :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
+          </div>
         </div>
       </div>
-    </div>
+    </Teleport>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current RaidableBases config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleImport"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
+    <!-- Import from server modal -->
+    <Teleport to="body">
+      <div v-if="showImportModal" class="rb__overlay" @click.self="showImportModal = false">
+        <div class="rb__modal">
+          <div class="rb__modal-head">
+            <span class="rb__modal-title">Import from server</span>
+            <button class="rb__modal-close" type="button" @click="showImportModal = false">
+              <Icon name="x" :size="16" />
             </button>
           </div>
+          <div class="rb__modal-body">
+            <p class="rb__modal-desc">Import the current RaidableBases config from your live server. This will create a new config profile.</p>
+            <label class="rb__field rb__mt-sm">
+              <span class="rb__field-label">Config name</span>
+              <input
+                v-model="importConfigName"
+                type="text"
+                class="cc-number"
+                placeholder="e.g. Imported server config"
+                @keydown.enter="handleImport"
+              />
+            </label>
+          </div>
+          <div class="rb__modal-foot">
+            <Button variant="ghost" type="button" @click="showImportModal = false">Cancel</Button>
+            <Button icon="download" :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
+          </div>
         </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
+
+<style scoped>
+/* ---------- Shell ---------- */
+.rb { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* ---------- Page head ---------- */
+.rb__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.rb__head-id { display: flex; align-items: center; gap: 12px; }
+.rb__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.rb__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.rb__head-actions { display: flex; align-items: center; gap: 8px; }
+
+/* ---------- Toolbar ---------- */
+.rb__toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.rb__toolbar-spacer { flex: 1; }
+.rb__config-select {
+  appearance: none; height: var(--control-h-sm); padding: 0 32px 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-sm); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.rb__config-select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.rb__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+
+/* ---------- Loading ---------- */
+.rb__loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; }
+.rb__spinner {
+  width: 20px; height: 20px; border-radius: 50%;
+  border: 2px solid var(--border-default); border-top-color: var(--accent);
+  animation: rb-spin 0.7s linear infinite;
+}
+@keyframes rb-spin { to { transform: rotate(360deg); } }
+.rb__loading-label { font-size: var(--text-sm); color: var(--text-tertiary); }
+
+/* ---------- Layout grids ---------- */
+.rb__grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
+.rb__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.rb__grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
+.rb__grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
+
+@media (max-width: 768px) {
+  .rb__grid2 { grid-template-columns: 1fr; }
+  .rb__grid3 { grid-template-columns: repeat(2, 1fr); }
+  .rb__grid4 { grid-template-columns: repeat(2, 1fr); }
+  .rb__grid5 { grid-template-columns: repeat(3, 1fr); }
+}
+
+/* ---------- Toggle row ---------- */
+.rb__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 13px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.rb__grid2 .rb__toggle-row:nth-child(odd) { padding-right: 16px; }
+.rb__grid2 .rb__toggle-row:nth-child(even) { padding-left: 16px; }
+.rb__toggle-row:last-child, .rb__toggle-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
+.rb__toggle-row:first-child { padding-top: 0; }
+.rb__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.rb__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.rb__toggle-body { min-width: 0; }
+
+/* ---------- Field ---------- */
+.rb__field { display: flex; flex-direction: column; gap: 4px; }
+.rb__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+.rb__field-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+/* ---------- Section head (inline section label) ---------- */
+.rb__section-head {
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+}
+
+/* ---------- Spawn days ---------- */
+.rb__days { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
+.rb__day { display: flex; align-items: center; gap: 7px; }
+.rb__day-label { font-size: var(--text-xs); color: var(--text-secondary); }
+
+/* ---------- Spacing helpers ---------- */
+.rb__mt { margin-top: 16px; }
+.rb__mt-sm { margin-top: 10px; }
+
+/* ---------- Number / text input (bare token-styled) ---------- */
+.cc-number {
+  width: 100%; height: var(--control-h-sm); padding: 0 10px;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-mono);
+  font-size: var(--text-sm); color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.cc-number:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-number::placeholder { color: var(--text-muted); font-family: var(--font-sans); }
+
+/* ---------- Textarea ---------- */
+.cc-textarea {
+  width: 100%; padding: 8px 10px; min-height: 64px; resize: none;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-sans);
+  font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5;
+}
+.cc-textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-textarea::placeholder { color: var(--text-muted); }
+
+/* ---------- Modal ---------- */
+.rb__overlay {
+  position: fixed; inset: 0; background: color-mix(in srgb, var(--surface-canvas) 50%, transparent);
+  z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.rb__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg);
+  box-shadow: var(--elevation-3); width: 100%; max-width: 440px;
+  display: flex; flex-direction: column;
+}
+.rb__modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
+}
+.rb__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.rb__modal-close {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--radius-sm); border: none;
+  background: transparent; color: var(--text-tertiary); cursor: pointer;
+}
+.rb__modal-close:hover { background: var(--surface-hover); color: var(--text-primary); }
+.rb__modal-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
+.rb__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.rb__modal-foot {
+  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
+  padding: 12px 16px; border-top: 1px solid var(--border-subtle);
+}
+</style>
diff --git a/frontend/src/views/admin/TeleportConfigView.vue b/frontend/src/views/admin/TeleportConfigView.vue
index c58d5f3..2692897 100644
--- a/frontend/src/views/admin/TeleportConfigView.vue
+++ b/frontend/src/views/admin/TeleportConfigView.vue
@@ -2,17 +2,12 @@
 import { ref, onMounted } from 'vue'
 import { useTeleportStore } from '@/stores/teleport'
 import PermissionGroupEditor from '@/components/teleport/PermissionGroupEditor.vue'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Navigation2,
-  Home,
-  Users,
-  Settings as SettingsIcon,
-} from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useTeleportStore()
 
@@ -23,11 +18,11 @@ const newConfigName = ref('')
 const newConfigDesc = ref('')
 const importConfigName = ref('')
 
-const tabs = [
-  { key: 'general', label: 'General', icon: SettingsIcon },
-  { key: 'homes', label: 'Homes', icon: Home },
-  { key: 'tpr', label: 'TPR', icon: Navigation2 },
-  { key: 'vip', label: 'VIP Groups', icon: Users },
+const tabItems = [
+  { value: 'general', label: 'General', icon: 'settings' },
+  { value: 'homes', label: 'Homes', icon: 'door-open' },
+  { value: 'tpr', label: 'TPR', icon: 'navigation' },
+  { value: 'vip', label: 'VIP groups', icon: 'users' },
 ]
 
 onMounted(async () => {
@@ -120,572 +115,569 @@ function handlePermissionGroupUpdate(updatedData: Record<string, any>) {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Teleport Config</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="tp">
+    <!-- Page head -->
+    <div class="tp__head">
+      <div class="tp__head-id">
+        <div class="tp__head-chip">
+          <Icon name="navigation" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin config</div>
+          <h1 class="tp__title">Teleport config</h1>
+        </div>
+      </div>
+      <div class="tp__head-actions">
+        <Button variant="secondary" size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
       </div>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
+    <!-- Config selector + action bar -->
+    <Panel>
+      <div class="tp__toolbar">
         <select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
+          :value="store.currentConfig?.id ?? ''"
+          class="tp__config-select"
           @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
         >
           <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
+            {{ c.config_name }}{{ c.is_active ? ' (active)' : '' }}
           </option>
         </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+        <span v-else class="tp__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
+        <Button
+          variant="primary"
+          size="sm"
+          icon="save"
+          :loading="store.isSaving"
           :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+          @click="store.saveCurrentConfig()"
+        >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
+        <Button
+          variant="outline"
+          size="sm"
+          icon="play"
           :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          @click="handleApply"
+        >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
+        <Button
+          variant="secondary"
+          size="sm"
+          icon="download"
           @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+        >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
+        <div class="tp__toolbar-spacer" />
+
+        <Button
+          variant="danger-soft"
+          size="sm"
+          icon="trash-2"
           :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          @click="handleDeleteConfig"
+        >Delete</Button>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
+    <!-- Loading state -->
+    <Panel v-if="store.isLoading">
+      <div class="tp__loading">
+        <span class="tp__spinner" />
+        <span class="tp__loading-label">Loading config…</span>
+      </div>
+    </Panel>
 
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Navigation2 class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No Teleport Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty state -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="navigation"
+        title="No teleport config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Tab bar -->
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
-      <!-- General Tab -->
-      <div v-if="activeTab === 'general'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">General Settings</h3>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- UseEconomics -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Use Economics</label>
-              <p class="text-xs text-neutral-500">Charge players for teleports via Economics plugin</p>
+      <!-- ======================= GENERAL TAB ======================= -->
+      <Panel v-if="activeTab === 'general'" title="General settings">
+        <div class="tp__grid2">
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Use Economics</div>
+              <div class="tp__toggle-sub">Charge players for teleports via Economics plugin</div>
             </div>
-            <button
-              @click="setConfigValue('Settings.UseEconomics', !getConfigValue('Settings.UseEconomics', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Settings.UseEconomics', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Settings.UseEconomics', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getConfigValue('Settings.UseEconomics', false)"
+              @update:model-value="setConfigValue('Settings.UseEconomics', $event)"
+            />
           </div>
-
-          <!-- UseServerRewards -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Use Server Rewards</label>
-              <p class="text-xs text-neutral-500">Charge players via ServerRewards plugin</p>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Use ServerRewards</div>
+              <div class="tp__toggle-sub">Charge players via ServerRewards plugin</div>
             </div>
-            <button
-              @click="setConfigValue('Settings.UseServerRewards', !getConfigValue('Settings.UseServerRewards', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Settings.UseServerRewards', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Settings.UseServerRewards', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getConfigValue('Settings.UseServerRewards', false)"
+              @update:model-value="setConfigValue('Settings.UseServerRewards', $event)"
+            />
           </div>
-
-          <!-- CheckBoundaries -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Cave/Water boundary checks</label>
-              <p class="text-xs text-neutral-500">Prevent teleporting into caves or underwater</p>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Cave/water boundary checks</div>
+              <div class="tp__toggle-sub">Prevent teleporting into caves or underwater</div>
             </div>
-            <button
-              @click="setConfigValue('Settings.CheckBoundaries', !getConfigValue('Settings.CheckBoundaries', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Settings.CheckBoundaries', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Settings.CheckBoundaries', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getConfigValue('Settings.CheckBoundaries', false)"
+              @update:model-value="setConfigValue('Settings.CheckBoundaries', $event)"
+            />
           </div>
-
-          <!-- InterruptTPOnHostile -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Cancel TP if hostile timer</label>
-              <p class="text-xs text-neutral-500">Cancel pending teleport if player becomes hostile</p>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Cancel TP if hostile timer</div>
+              <div class="tp__toggle-sub">Cancel pending teleport if player becomes hostile</div>
             </div>
-            <button
-              @click="setConfigValue('Settings.InterruptTPOnHostile', !getConfigValue('Settings.InterruptTPOnHostile', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Settings.InterruptTPOnHostile', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Settings.InterruptTPOnHostile', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getConfigValue('Settings.InterruptTPOnHostile', false)"
+              @update:model-value="setConfigValue('Settings.InterruptTPOnHostile', $event)"
+            />
           </div>
-
-          <!-- WipeHomesOnUpgrade -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Wipe homes on map update</label>
-              <p class="text-xs text-neutral-500">Clear all home locations when the map changes</p>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Wipe homes on map update</div>
+              <div class="tp__toggle-sub">Clear all home locations when the map changes</div>
             </div>
-            <button
-              @click="setConfigValue('Settings.WipeHomesOnUpgrade', !getConfigValue('Settings.WipeHomesOnUpgrade', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Settings.WipeHomesOnUpgrade', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Settings.WipeHomesOnUpgrade', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getConfigValue('Settings.WipeHomesOnUpgrade', false)"
+              @update:model-value="setConfigValue('Settings.WipeHomesOnUpgrade', $event)"
+            />
           </div>
-
-          <!-- PlayersOnlyCannotTeleport -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Players Only Cannot Teleport</label>
-              <p class="text-xs text-neutral-500">Restrict teleport to specific player groups only</p>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Players only cannot teleport</div>
+              <div class="tp__toggle-sub">Restrict teleport to specific player groups only</div>
             </div>
-            <button
-              @click="setConfigValue('Settings.PlayersOnlyCannotTeleport', !getConfigValue('Settings.PlayersOnlyCannotTeleport', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Settings.PlayersOnlyCannotTeleport', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Settings.PlayersOnlyCannotTeleport', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
+            <Switch
+              :model-value="getConfigValue('Settings.PlayersOnlyCannotTeleport', false)"
+              @update:model-value="setConfigValue('Settings.PlayersOnlyCannotTeleport', $event)"
+            />
           </div>
         </div>
 
-        <!-- Global Cooldown (number) -->
-        <div class="max-w-sm">
-          <label class="block text-sm text-neutral-200 mb-1">Global cooldown (seconds)</label>
-          <p class="text-xs text-neutral-500 mb-2">Minimum time between any teleport commands</p>
-          <input
-            type="number"
-            :value="getConfigValue('Settings.GlobalTeleportCooldown', 0)"
-            @input="setConfigValue('Settings.GlobalTeleportCooldown', Number(($event.target as HTMLInputElement).value))"
-            min="0"
-            class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-          />
-        </div>
-      </div>
-
-      <!-- Homes Tab -->
-      <div v-else-if="activeTab === 'homes'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Home Teleport Settings</h3>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- UsableOutOfBuildingBlocked -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Can use outside building privilege</label>
-              <p class="text-xs text-neutral-500">Allow home teleport even without building privilege</p>
-            </div>
-            <button
-              @click="setConfigValue('Home.UsableOutOfBuildingBlocked', !getConfigValue('Home.UsableOutOfBuildingBlocked', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Home.UsableOutOfBuildingBlocked', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Home.UsableOutOfBuildingBlocked', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- ForceOnTopOfFoundation -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Force home on foundation</label>
-              <p class="text-xs text-neutral-500">Homes can only be set on a foundation block</p>
-            </div>
-            <button
-              @click="setConfigValue('Home.ForceOnTopOfFoundation', !getConfigValue('Home.ForceOnTopOfFoundation', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Home.ForceOnTopOfFoundation', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Home.ForceOnTopOfFoundation', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- CheckFoundationForOwner -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Verify foundation ownership</label>
-              <p class="text-xs text-neutral-500">Only allow homes on foundations the player owns</p>
-            </div>
-            <button
-              @click="setConfigValue('Home.CheckFoundationForOwner', !getConfigValue('Home.CheckFoundationForOwner', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Home.CheckFoundationForOwner', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Home.CheckFoundationForOwner', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- AllowAboveFoundation -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Allow Above Foundation</label>
-              <p class="text-xs text-neutral-500">Allow setting homes above foundation level</p>
-            </div>
-            <button
-              @click="setConfigValue('Home.AllowAboveFoundation', !getConfigValue('Home.AllowAboveFoundation', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Home.AllowAboveFoundation', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Home.AllowAboveFoundation', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- CupOwnerAllowOnBuildingBlocked -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Cupboard Owner Allow on Building Blocked</label>
-              <p class="text-xs text-neutral-500">Allow TC owners to teleport even when building blocked</p>
-            </div>
-            <button
-              @click="setConfigValue('Home.CupOwnerAllowOnBuildingBlocked', !getConfigValue('Home.CupOwnerAllowOnBuildingBlocked', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('Home.CupOwnerAllowOnBuildingBlocked', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('Home.CupOwnerAllowOnBuildingBlocked', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-        </div>
-
-        <!-- Number Inputs -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Homes Limit</label>
-            <p class="text-xs text-neutral-500 mb-2">Default max homes per player</p>
+        <div class="tp__grid3 tp__mt">
+          <label class="tp__field">
+            <span class="tp__field-label">Global cooldown (seconds)</span>
+            <span class="tp__field-hint">Minimum time between any teleport commands</span>
             <input
               type="number"
+              class="cc-number"
+              :value="getConfigValue('Settings.GlobalTeleportCooldown', 0)"
+              min="0"
+              @input="setConfigValue('Settings.GlobalTeleportCooldown', Number(($event.target as HTMLInputElement).value))"
+            />
+          </label>
+        </div>
+      </Panel>
+
+      <!-- ======================= HOMES TAB ======================= -->
+      <Panel v-else-if="activeTab === 'homes'" title="Home teleport settings">
+        <div class="tp__grid2">
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Can use outside building privilege</div>
+              <div class="tp__toggle-sub">Allow home teleport even without building privilege</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('Home.UsableOutOfBuildingBlocked', false)"
+              @update:model-value="setConfigValue('Home.UsableOutOfBuildingBlocked', $event)"
+            />
+          </div>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Force home on foundation</div>
+              <div class="tp__toggle-sub">Homes can only be set on a foundation block</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('Home.ForceOnTopOfFoundation', false)"
+              @update:model-value="setConfigValue('Home.ForceOnTopOfFoundation', $event)"
+            />
+          </div>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Verify foundation ownership</div>
+              <div class="tp__toggle-sub">Only allow homes on foundations the player owns</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('Home.CheckFoundationForOwner', false)"
+              @update:model-value="setConfigValue('Home.CheckFoundationForOwner', $event)"
+            />
+          </div>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Allow above foundation</div>
+              <div class="tp__toggle-sub">Allow setting homes above foundation level</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('Home.AllowAboveFoundation', false)"
+              @update:model-value="setConfigValue('Home.AllowAboveFoundation', $event)"
+            />
+          </div>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Cupboard owner allow on building blocked</div>
+              <div class="tp__toggle-sub">Allow TC owners to teleport even when building blocked</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('Home.CupOwnerAllowOnBuildingBlocked', false)"
+              @update:model-value="setConfigValue('Home.CupOwnerAllowOnBuildingBlocked', $event)"
+            />
+          </div>
+        </div>
+
+        <div class="tp__grid4 tp__mt">
+          <label class="tp__field">
+            <span class="tp__field-label">Homes limit</span>
+            <span class="tp__field-hint">Default max homes per player</span>
+            <input
+              type="number"
+              class="cc-number"
               :value="getConfigValue('Home.HomesLimit', 3)"
+              min="0"
               @input="setConfigValue('Home.HomesLimit', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
             />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Daily Limit</label>
-            <p class="text-xs text-neutral-500 mb-2">Max home teleports per day</p>
+          </label>
+          <label class="tp__field">
+            <span class="tp__field-label">Daily limit</span>
+            <span class="tp__field-hint">Max home teleports per day</span>
             <input
               type="number"
+              class="cc-number"
               :value="getConfigValue('Home.DefaultDailyLimit', 5)"
+              min="0"
               @input="setConfigValue('Home.DefaultDailyLimit', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
             />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Cooldown (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Time between home teleports</p>
+          </label>
+          <label class="tp__field">
+            <span class="tp__field-label">Cooldown (seconds)</span>
+            <span class="tp__field-hint">Time between home teleports</span>
             <input
               type="number"
+              class="cc-number"
               :value="getConfigValue('Home.DefaultCooldown', 600)"
+              min="0"
               @input="setConfigValue('Home.DefaultCooldown', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
             />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Countdown (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Countdown before teleport</p>
+          </label>
+          <label class="tp__field">
+            <span class="tp__field-label">Countdown (seconds)</span>
+            <span class="tp__field-hint">Countdown before teleport</span>
             <input
               type="number"
+              class="cc-number"
               :value="getConfigValue('Home.DefaultCountdown', 5)"
+              min="0"
               @input="setConfigValue('Home.DefaultCountdown', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+            />
+          </label>
+        </div>
+      </Panel>
+
+      <!-- ======================= TPR TAB ======================= -->
+      <Panel v-else-if="activeTab === 'tpr'" title="Teleport request settings">
+        <div class="tp__grid2">
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Block TP accept on ceiling</div>
+              <div class="tp__toggle-sub">Prevent accepting a TP while on a ceiling tile</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('TPR.BlockTPAOnCeiling', false)"
+              @update:model-value="setConfigValue('TPR.BlockTPAOnCeiling', $event)"
+            />
+          </div>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Offset teleport target position</div>
+              <div class="tp__toggle-sub">Slightly offset the teleport landing position</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('TPR.OffsetTPRTarget', false)"
+              @update:model-value="setConfigValue('TPR.OffsetTPRTarget', $event)"
+            />
+          </div>
+          <div class="tp__toggle-row">
+            <div class="tp__toggle-body">
+              <div class="tp__toggle-label">Auto accept enabled</div>
+              <div class="tp__toggle-sub">Automatically accept incoming TP requests</div>
+            </div>
+            <Switch
+              :model-value="getConfigValue('TPR.AutoAcceptEnabled', false)"
+              @update:model-value="setConfigValue('TPR.AutoAcceptEnabled', $event)"
             />
           </div>
         </div>
-      </div>
 
-      <!-- TPR Tab -->
-      <div v-else-if="activeTab === 'tpr'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-6">
-        <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Teleport Request Settings</h3>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- BlockTPAOnCeiling -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Block TP accept on ceiling</label>
-              <p class="text-xs text-neutral-500">Prevent accepting a TP while on a ceiling tile</p>
-            </div>
-            <button
-              @click="setConfigValue('TPR.BlockTPAOnCeiling', !getConfigValue('TPR.BlockTPAOnCeiling', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('TPR.BlockTPAOnCeiling', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('TPR.BlockTPAOnCeiling', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- OffsetTPRTarget -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Offset teleport target position</label>
-              <p class="text-xs text-neutral-500">Slightly offset the teleport landing position</p>
-            </div>
-            <button
-              @click="setConfigValue('TPR.OffsetTPRTarget', !getConfigValue('TPR.OffsetTPRTarget', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('TPR.OffsetTPRTarget', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('TPR.OffsetTPRTarget', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <!-- AutoAcceptEnabled -->
-          <div class="flex items-center justify-between">
-            <div>
-              <label class="text-sm text-neutral-200">Auto Accept Enabled</label>
-              <p class="text-xs text-neutral-500">Automatically accept incoming TP requests</p>
-            </div>
-            <button
-              @click="setConfigValue('TPR.AutoAcceptEnabled', !getConfigValue('TPR.AutoAcceptEnabled', false))"
-              class="relative w-11 h-6 rounded-full transition-colors"
-              :class="getConfigValue('TPR.AutoAcceptEnabled', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                :class="getConfigValue('TPR.AutoAcceptEnabled', false) ? 'translate-x-5' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-        </div>
-
-        <!-- Number Inputs -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Cooldown (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Cooldown between TPR requests</p>
+        <div class="tp__grid4 tp__mt">
+          <label class="tp__field">
+            <span class="tp__field-label">Cooldown (seconds)</span>
+            <span class="tp__field-hint">Cooldown between TPR requests</span>
             <input
               type="number"
+              class="cc-number"
               :value="getConfigValue('TPR.Cooldown', 600)"
+              min="0"
               @input="setConfigValue('TPR.Cooldown', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
             />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Countdown (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">Countdown before teleport</p>
+          </label>
+          <label class="tp__field">
+            <span class="tp__field-label">Countdown (seconds)</span>
+            <span class="tp__field-hint">Countdown before teleport</span>
             <input
               type="number"
+              class="cc-number"
               :value="getConfigValue('TPR.Countdown', 5)"
+              min="0"
               @input="setConfigValue('TPR.Countdown', Number(($event.target as HTMLInputElement).value))"
-              min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
             />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Daily Limit</label>
-            <p class="text-xs text-neutral-500 mb-2">Max TPR per day</p>
+          </label>
+          <label class="tp__field">
+            <span class="tp__field-label">Daily limit</span>
+            <span class="tp__field-hint">Max TPR per day</span>
             <input
               type="number"
+              class="cc-number"
               :value="getConfigValue('TPR.DailyLimit', 5)"
-              @input="setConfigValue('TPR.DailyLimit', Number(($event.target as HTMLInputElement).value))"
               min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              @input="setConfigValue('TPR.DailyLimit', Number(($event.target as HTMLInputElement).value))"
             />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-200 mb-1">Request Duration (seconds)</label>
-            <p class="text-xs text-neutral-500 mb-2">How long a TPR request lasts</p>
+          </label>
+          <label class="tp__field">
+            <span class="tp__field-label">Request duration (seconds)</span>
+            <span class="tp__field-hint">How long a TPR request lasts</span>
             <input
               type="number"
+              class="cc-number"
               :value="getConfigValue('TPR.RequestDuration', 30)"
-              @input="setConfigValue('TPR.RequestDuration', Number(($event.target as HTMLInputElement).value))"
               min="0"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
+              @input="setConfigValue('TPR.RequestDuration', Number(($event.target as HTMLInputElement).value))"
             />
-          </div>
+          </label>
         </div>
-      </div>
+      </Panel>
 
-      <!-- VIP Groups Tab -->
-      <div v-else-if="activeTab === 'vip'" class="bg-neutral-900 border border-neutral-800 rounded-xl p-6">
+      <!-- ======================= VIP GROUPS TAB ======================= -->
+      <Panel v-else-if="activeTab === 'vip'">
         <PermissionGroupEditor
           :config-data="store.currentConfig.config_data"
           @update:config-data="handlePermissionGroupUpdate"
         />
-      </div>
-    </div>
+      </Panel>
+    </template>
 
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New Teleport Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="newConfigName"
-              placeholder="e.g. Default TP Settings"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleCreateConfig"
-            />
-          </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
-            <textarea
-              v-model="newConfigDesc"
-              rows="2"
-              placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
+    <!-- Create config modal -->
+    <Teleport to="body">
+      <div v-if="showCreateModal" class="tp__overlay" @click.self="showCreateModal = false">
+        <div class="tp__modal">
+          <div class="tp__modal-head">
+            <span class="tp__modal-title">New teleport config</span>
+            <button class="tp__modal-close" type="button" @click="showCreateModal = false">
+              <Icon name="x" :size="16" />
             </button>
           </div>
+          <div class="tp__modal-body">
+            <label class="tp__field">
+              <span class="tp__field-label">Config name</span>
+              <input
+                v-model="newConfigName"
+                type="text"
+                class="cc-number"
+                placeholder="e.g. Default TP settings"
+                @keydown.enter="handleCreateConfig"
+              />
+            </label>
+            <label class="tp__field tp__mt-sm">
+              <span class="tp__field-label">Description (optional)</span>
+              <textarea
+                v-model="newConfigDesc"
+                rows="2"
+                class="cc-textarea"
+                placeholder="What is this config for?"
+              />
+            </label>
+          </div>
+          <div class="tp__modal-foot">
+            <Button variant="ghost" type="button" @click="showCreateModal = false">Cancel</Button>
+            <Button icon="plus" :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
+          </div>
         </div>
       </div>
-    </div>
+    </Teleport>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current NTeleportation config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleImport"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
+    <!-- Import from server modal -->
+    <Teleport to="body">
+      <div v-if="showImportModal" class="tp__overlay" @click.self="showImportModal = false">
+        <div class="tp__modal">
+          <div class="tp__modal-head">
+            <span class="tp__modal-title">Import from server</span>
+            <button class="tp__modal-close" type="button" @click="showImportModal = false">
+              <Icon name="x" :size="16" />
             </button>
           </div>
+          <div class="tp__modal-body">
+            <p class="tp__modal-desc">Import the current NTeleportation config from your live server. This will create a new config profile.</p>
+            <label class="tp__field tp__mt-sm">
+              <span class="tp__field-label">Config name</span>
+              <input
+                v-model="importConfigName"
+                type="text"
+                class="cc-number"
+                placeholder="e.g. Imported server config"
+                @keydown.enter="handleImport"
+              />
+            </label>
+          </div>
+          <div class="tp__modal-foot">
+            <Button variant="ghost" type="button" @click="showImportModal = false">Cancel</Button>
+            <Button icon="download" :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
+          </div>
         </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
+
+<style scoped>
+/* ---------- Shell ---------- */
+.tp { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* ---------- Page head ---------- */
+.tp__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.tp__head-id { display: flex; align-items: center; gap: 12px; }
+.tp__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.tp__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.tp__head-actions { display: flex; align-items: center; gap: 8px; }
+
+/* ---------- Toolbar ---------- */
+.tp__toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.tp__toolbar-spacer { flex: 1; }
+.tp__config-select {
+  appearance: none; height: var(--control-h-sm); padding: 0 32px 0 11px;
+  background: var(--surface-inset); color: var(--text-primary); border: 0;
+  border-radius: var(--radius-sm); box-shadow: var(--ring-default);
+  font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer;
+  min-width: 200px;
+}
+.tp__config-select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.tp__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+
+/* ---------- Loading ---------- */
+.tp__loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; }
+.tp__spinner {
+  width: 20px; height: 20px; border-radius: 50%;
+  border: 2px solid var(--border-default); border-top-color: var(--accent);
+  animation: tp-spin 0.7s linear infinite;
+}
+@keyframes tp-spin { to { transform: rotate(360deg); } }
+.tp__loading-label { font-size: var(--text-sm); color: var(--text-tertiary); }
+
+/* ---------- Layout grids ---------- */
+.tp__grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
+.tp__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.tp__grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
+
+@media (max-width: 768px) {
+  .tp__grid2 { grid-template-columns: 1fr; }
+  .tp__grid3 { grid-template-columns: repeat(2, 1fr); }
+  .tp__grid4 { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* ---------- Toggle row ---------- */
+.tp__toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px; padding: 13px 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.tp__grid2 .tp__toggle-row:nth-child(odd) { padding-right: 16px; }
+.tp__grid2 .tp__toggle-row:nth-child(even) { padding-left: 16px; }
+.tp__toggle-row:last-child, .tp__toggle-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
+.tp__toggle-row:first-child { padding-top: 0; }
+.tp__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.tp__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.tp__toggle-body { min-width: 0; }
+
+/* ---------- Field ---------- */
+.tp__field { display: flex; flex-direction: column; gap: 4px; }
+.tp__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+.tp__field-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
+
+/* ---------- Spacing helpers ---------- */
+.tp__mt { margin-top: 16px; }
+.tp__mt-sm { margin-top: 10px; }
+
+/* ---------- Number / text input (bare token-styled) ---------- */
+.cc-number {
+  width: 100%; height: var(--control-h-sm); padding: 0 10px;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-mono);
+  font-size: var(--text-sm); color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.cc-number:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-number::placeholder { color: var(--text-muted); font-family: var(--font-sans); }
+
+/* ---------- Textarea ---------- */
+.cc-textarea {
+  width: 100%; padding: 8px 10px; min-height: 64px; resize: none;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); font-family: var(--font-sans);
+  font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5;
+}
+.cc-textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-textarea::placeholder { color: var(--text-muted); }
+
+/* ---------- Modal ---------- */
+.tp__overlay {
+  position: fixed; inset: 0; background: color-mix(in srgb, var(--surface-canvas) 50%, transparent);
+  z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.tp__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg);
+  box-shadow: var(--elevation-3); width: 100%; max-width: 440px;
+  display: flex; flex-direction: column;
+}
+.tp__modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
+}
+.tp__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.tp__modal-close {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--radius-sm); border: none;
+  background: transparent; color: var(--text-tertiary); cursor: pointer;
+}
+.tp__modal-close:hover { background: var(--surface-hover); color: var(--text-primary); }
+.tp__modal-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
+.tp__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.tp__modal-foot {
+  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
+  padding: 12px 16px; border-top: 1px solid var(--border-subtle);
+}
+</style>
diff --git a/frontend/src/views/admin/TimedExecuteView.vue b/frontend/src/views/admin/TimedExecuteView.vue
index c54bc39..eaa484b 100644
--- a/frontend/src/views/admin/TimedExecuteView.vue
+++ b/frontend/src/views/admin/TimedExecuteView.vue
@@ -1,32 +1,30 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useTimedExecuteStore } from '@/stores/timedexecute'
-import {
-  Save,
-  Play,
-  Download,
-  Plus,
-  Trash2,
-  Clock,
-  Settings as SettingsIcon,
-  UserPlus,
-  UserMinus,
-} from 'lucide-vue-next'
+
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Tabs from '@/components/ds/navigation/Tabs.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Switch from '@/components/ds/forms/Switch.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const store = useTimedExecuteStore()
 
-const activeTab = ref<'timed' | 'realtime' | 'connect' | 'disconnect'>('timed')
+const activeTab = ref<string>('timed')
 const showCreateModal = ref(false)
 const showImportModal = ref(false)
 const newConfigName = ref('')
 const newConfigDesc = ref('')
 const importConfigName = ref('')
 
-const tabs = [
-  { key: 'timed', label: 'Timed Commands', icon: Clock },
-  { key: 'realtime', label: 'Real-Time', icon: SettingsIcon },
-  { key: 'connect', label: 'On Connect', icon: UserPlus },
-  { key: 'disconnect', label: 'On Disconnect', icon: UserMinus },
+const tabItems = [
+  { value: 'timed', label: 'Timed commands', icon: 'clock' },
+  { value: 'realtime', label: 'Real-time', icon: 'settings' },
+  { value: 'connect', label: 'On connect', icon: 'user' },
+  { value: 'disconnect', label: 'On disconnect', icon: 'user' },
 ]
 
 onMounted(async () => {
@@ -228,428 +226,438 @@ async function handleImport() {
     importConfigName.value = ''
   }
 }
+
+// DS Select model
+const selectedConfigId = computed<string>({
+  get: () => store.currentConfig?.id ?? '',
+  set: (v: string | undefined) => { handleConfigChange(v ?? '') },
+})
+const configSelectOptions = computed(() =>
+  store.configs.map(c => ({
+    value: c.id,
+    label: c.config_name + (c.is_active ? ' (active)' : ''),
+  }))
+)
+
+// Switch wrappers
+const enableTimerRepeat = computed<boolean>({
+  get: () => getConfigValue('EnableTimerRepeat', true) as boolean,
+  set: (v: boolean) => setConfigValue('EnableTimerRepeat', v),
+})
+const enableRealTimeTimer = computed<boolean>({
+  get: () => getConfigValue('EnableRealTime-Timer', false) as boolean,
+  set: (v: boolean) => setConfigValue('EnableRealTime-Timer', v),
+})
+
+// Modal bindings
+const newConfigNameModel = computed<string>({
+  get: () => newConfigName.value,
+  set: (v: string | undefined) => { newConfigName.value = v ?? '' },
+})
+const importConfigNameModel = computed<string>({
+  get: () => importConfigName.value,
+  set: (v: string | undefined) => { importConfigName.value = v ?? '' },
+})
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-white">Timed Execute</h1>
-      <div class="flex items-center gap-3">
-        <button
-          @click="showCreateModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Plus class="w-4 h-4" />
-          New Config
-        </button>
+  <div class="te">
+    <!-- Page head -->
+    <div class="te__head">
+      <div class="te__head-id">
+        <div class="te__head-chip">
+          <Icon name="clock" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Plugin configuration</div>
+          <h1 class="te__title">Timed Execute</h1>
+        </div>
+      </div>
+      <div class="te__head-actions">
+        <Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
       </div>
     </div>
 
-    <!-- Config Selector + Action Bar -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-4">
-      <div class="flex items-center gap-3 flex-wrap">
-        <!-- Config Selector -->
-        <select
+    <!-- Toolbar panel -->
+    <Panel>
+      <div class="te__toolbar">
+        <Select
           v-if="store.configs.length > 0"
-          :value="store.currentConfig?.id || ''"
-          @change="handleConfigChange(($event.target as HTMLSelectElement).value)"
-          class="bg-neutral-800 border border-neutral-700 text-neutral-200 rounded-lg px-3 py-2 text-sm min-w-[200px]"
-        >
-          <option v-for="c in store.configs" :key="c.id" :value="c.id">
-            {{ c.config_name }}
-            <template v-if="c.is_active"> (Active)</template>
-          </option>
-        </select>
-        <span v-else class="text-neutral-500 text-sm">No configs yet</span>
+          v-model="selectedConfigId"
+          :options="configSelectOptions"
+          size="sm"
+          style="min-width: 200px"
+        />
+        <span v-else class="te__no-configs">No configs yet</span>
 
-        <!-- Save -->
-        <button
-          @click="store.saveCurrentConfig()"
-          :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
-          class="flex items-center gap-2 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Save class="w-4 h-4" />
-          {{ store.isSaving ? 'Saving...' : 'Save' }}
-        </button>
+        <div class="te__toolbar-actions">
+          <Button
+            size="sm"
+            icon="save"
+            :loading="store.isSaving"
+            :disabled="!store.currentConfig || !store.isDirty || store.isSaving"
+            @click="store.saveCurrentConfig()"
+          >{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
 
-        <!-- Apply to Server -->
-        <button
-          @click="handleApply"
-          :disabled="!store.currentConfig || store.isApplying"
-          class="flex items-center gap-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-        >
-          <Play class="w-4 h-4" />
-          {{ store.isApplying ? 'Applying...' : 'Apply to Server' }}
-        </button>
+          <Button
+            size="sm"
+            variant="outline"
+            icon="play"
+            :loading="store.isApplying"
+            :disabled="!store.currentConfig || store.isApplying"
+            @click="handleApply"
+          >{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
 
-        <!-- Import from Server -->
-        <button
-          @click="showImportModal = true"
-          class="flex items-center gap-2 px-3 py-2 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-        >
-          <Download class="w-4 h-4" />
-          Import from Server
-        </button>
+          <Button
+            size="sm"
+            variant="secondary"
+            icon="download"
+            @click="showImportModal = true"
+          >Import from server</Button>
 
-        <!-- Delete -->
-        <button
-          @click="handleDeleteConfig"
-          :disabled="!store.currentConfig"
-          class="flex items-center gap-2 px-3 py-2 bg-red-500/10 text-red-400 rounded-lg hover:bg-red-500/20 disabled:opacity-50 text-sm ml-auto"
-        >
-          <Trash2 class="w-4 h-4" />
-          Delete
-        </button>
+          <Button
+            size="sm"
+            variant="danger-soft"
+            icon="trash-2"
+            :disabled="!store.currentConfig"
+            @click="handleDeleteConfig"
+          >Delete</Button>
+        </div>
       </div>
+    </Panel>
+
+    <!-- Loading -->
+    <div v-if="store.isLoading" class="te__loading">
+      <span class="te__spinner" />
     </div>
 
-    <!-- Loading State -->
-    <div v-if="store.isLoading" class="flex items-center justify-center py-20">
-      <div class="animate-spin w-8 h-8 border-2 border-oxide-500 border-t-transparent rounded-full" />
-    </div>
-
-    <!-- No Config Selected -->
-    <div v-else-if="!store.currentConfig" class="bg-neutral-900 border border-neutral-800 rounded-xl p-12 text-center">
-      <Clock class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-      <h2 class="text-lg font-semibold text-neutral-300 mb-2">No TimedExecute Config Selected</h2>
-      <p class="text-neutral-500 mb-4">Create a new config, import from server, or select one from the dropdown above.</p>
-      <button
-        @click="showCreateModal = true"
-        class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600"
+    <!-- Empty — no config -->
+    <Panel v-else-if="!store.currentConfig">
+      <EmptyState
+        icon="clock"
+        title="No TimedExecute config selected"
+        description="Create a new config, import from server, or select one from the dropdown above."
       >
-        Create First Config
-      </button>
-    </div>
+        <template #action>
+          <Button icon="plus" @click="showCreateModal = true">Create first config</Button>
+        </template>
+      </EmptyState>
+    </Panel>
 
-    <!-- Config Editor -->
-    <div v-else class="space-y-6">
-      <!-- Tab Bar -->
-      <div class="flex border-b border-neutral-800">
-        <button
-          v-for="tab in tabs"
-          :key="tab.key"
-          @click="activeTab = tab.key as typeof activeTab"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-oxide-500 text-oxide-400'
-            : 'border-transparent text-neutral-500 hover:text-neutral-300'"
-        >
-          <component :is="tab.icon" class="w-4 h-4" />
-          {{ tab.label }}
-        </button>
-      </div>
+    <!-- Config editor -->
+    <template v-else>
+      <!-- Tab bar -->
+      <Tabs v-model="activeTab" :items="tabItems" variant="line" />
 
-      <!-- Timed Commands Tab -->
-      <div v-if="activeTab === 'timed'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div class="flex items-center justify-between">
-            <div>
-              <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Timer Repeat</h3>
-              <p class="text-xs text-neutral-500 mt-1">Commands executed repeatedly at set intervals (seconds)</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <!-- Enable toggle -->
-              <span class="text-xs text-neutral-400 mr-2">Enabled</span>
-              <button
-                @click="setConfigValue('EnableTimerRepeat', !getConfigValue('EnableTimerRepeat', true))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('EnableTimerRepeat', true) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('EnableTimerRepeat', true) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
+      <!-- Timed commands tab -->
+      <Panel v-if="activeTab === 'timed'" title="Timer repeat" subtitle="Commands executed repeatedly at set intervals (seconds)">
+        <template #actions>
+          <Switch v-model="enableTimerRepeat" label="Enabled" size="sm" />
+        </template>
 
-          <!-- Preset Buttons -->
-          <div class="flex items-center gap-2 flex-wrap">
-            <span class="text-xs text-neutral-500">Quick add:</span>
-            <button
-              @click="addPresetTimer('server.save', 300)"
-              class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
-            >
-              server.save (5m)
-            </button>
-            <button
-              @click="addPresetTimer('say Server restart warning!', 3600)"
-              class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
-            >
-              Restart warning (1h)
-            </button>
-            <button
-              @click="addPresetTimer('oxide.reload *', 7200)"
-              class="px-2 py-1 text-xs bg-neutral-800 text-neutral-300 rounded hover:bg-neutral-700"
-            >
-              Reload plugins (2h)
-            </button>
-          </div>
+        <!-- Preset quick-add -->
+        <div class="te__presets">
+          <span class="te__presets-label">Quick add:</span>
+          <button class="te__preset" @click="addPresetTimer('server.save', 300)">server.save (5 min)</button>
+          <button class="te__preset" @click="addPresetTimer('say Server restart warning!', 3600)">Restart warning (1 h)</button>
+          <button class="te__preset" @click="addPresetTimer('oxide.reload *', 7200)">Reload plugins (2 h)</button>
+        </div>
 
-          <!-- Entries -->
-          <div v-if="timerRepeatEntries.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No timed commands configured. Add a command or use a preset above.
-          </div>
+        <EmptyState
+          v-if="timerRepeatEntries.length === 0"
+          icon="clock"
+          description="No timed commands configured. Add a command or use a preset above."
+        />
 
-          <div v-else class="space-y-2">
-            <div
-              v-for="(entry, index) in timerRepeatEntries"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
+        <div v-else class="te__entries">
+          <div
+            v-for="(entry, index) in timerRepeatEntries"
+            :key="index"
+            class="te__entry"
+          >
+            <div class="te__entry-cmd">
               <input
                 :value="entry.command"
                 @change="updateTimerRepeatCommand(entry.command, ($event.target as HTMLInputElement).value)"
                 placeholder="console command"
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
+                class="cc-input-raw te__input-grow"
               />
-              <div class="flex items-center gap-1">
-                <input
-                  :value="entry.interval"
-                  @input="updateTimerRepeatInterval(entry.command, Number(($event.target as HTMLInputElement).value))"
-                  type="number"
-                  min="1"
-                  class="w-24 bg-neutral-800 border border-neutral-700 rounded-lg px-2 py-1.5 text-neutral-200 text-sm text-right"
-                />
-                <span class="text-xs text-neutral-500">sec</span>
-              </div>
-              <button
-                @click="removeTimerRepeat(entry.command)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
             </div>
-          </div>
-
-          <button
-            @click="addTimerRepeat"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Command
-          </button>
-        </div>
-      </div>
-
-      <!-- Real-Time Tab -->
-      <div v-else-if="activeTab === 'realtime'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div class="flex items-center justify-between">
-            <div>
-              <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Real-Time Timer</h3>
-              <p class="text-xs text-neutral-500 mt-1">Commands executed at specific times of day (HH:MM:SS)</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="text-xs text-neutral-400 mr-2">Enabled</span>
-              <button
-                @click="setConfigValue('EnableRealTime-Timer', !getConfigValue('EnableRealTime-Timer', false))"
-                class="relative w-11 h-6 rounded-full transition-colors"
-                :class="getConfigValue('EnableRealTime-Timer', false) ? 'bg-oxide-500' : 'bg-neutral-700'"
-              >
-                <span
-                  class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform"
-                  :class="getConfigValue('EnableRealTime-Timer', false) ? 'translate-x-5' : 'translate-x-0'"
-                />
-              </button>
-            </div>
-          </div>
-
-          <div v-if="realTimeEntries.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No real-time commands configured. Add a time-based command below.
-          </div>
-
-          <div v-else class="space-y-2">
-            <div
-              v-for="(entry, index) in realTimeEntries"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
+            <div class="te__entry-interval">
               <input
-                :value="entry.time"
-                @change="updateRealTimeTime(entry.time, ($event.target as HTMLInputElement).value)"
-                placeholder="HH:MM:SS"
-                class="w-32 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
+                :value="entry.interval"
+                @input="updateTimerRepeatInterval(entry.command, Number(($event.target as HTMLInputElement).value))"
+                type="number"
+                min="1"
+                class="cc-input-raw cc-input-raw--mono te__input-interval"
               />
-              <input
-                :value="entry.command"
-                @change="updateRealTimeCommand(entry.time, ($event.target as HTMLInputElement).value)"
-                placeholder="console command"
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
-              />
-              <button
-                @click="removeRealTimeEntry(entry.time)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
+              <span class="te__unit">sec</span>
             </div>
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeTimerRepeat(entry.command)" />
           </div>
-
-          <button
-            @click="addRealTimeEntry"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Time Entry
-          </button>
         </div>
-      </div>
 
-      <!-- On Connect Tab -->
-      <div v-else-if="activeTab === 'connect'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div>
-            <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">On Player Connect</h3>
-            <p class="text-xs text-neutral-500 mt-1">Commands executed when a player joins the server</p>
-          </div>
-
-          <div v-if="connectCommands.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No connect commands configured. Add a command below.
-          </div>
-
-          <div v-else class="space-y-2">
-            <div
-              v-for="(cmd, index) in connectCommands"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
-              <input
-                :value="cmd"
-                @change="updateConnectCommand(index, ($event.target as HTMLInputElement).value)"
-                placeholder='e.g. say Welcome {player.name}!'
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
-              />
-              <button
-                @click="removeConnectCommand(index)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          <button
-            @click="addConnectCommand"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
-          >
-            <Plus class="w-4 h-4" />
-            Add Command
-          </button>
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addTimerRepeat">Add command</Button>
         </div>
-      </div>
+      </Panel>
 
-      <!-- On Disconnect Tab -->
-      <div v-else-if="activeTab === 'disconnect'" class="space-y-4">
-        <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 space-y-4">
-          <div>
-            <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">On Player Disconnect</h3>
-            <p class="text-xs text-neutral-500 mt-1">Commands executed when a player leaves the server</p>
-          </div>
+      <!-- Real-time tab -->
+      <Panel v-else-if="activeTab === 'realtime'" title="Real-time timer" subtitle="Commands executed at specific times of day (HH:MM:SS)">
+        <template #actions>
+          <Switch v-model="enableRealTimeTimer" label="Enabled" size="sm" />
+        </template>
 
-          <div v-if="disconnectCommands.length === 0" class="py-4 text-center text-neutral-500 text-sm">
-            No disconnect commands configured. Add a command below.
-          </div>
+        <EmptyState
+          v-if="realTimeEntries.length === 0"
+          icon="clock"
+          description="No real-time commands configured. Add a time-based command below."
+        />
 
-          <div v-else class="space-y-2">
-            <div
-              v-for="(cmd, index) in disconnectCommands"
-              :key="index"
-              class="flex items-center gap-3 bg-neutral-800/50 rounded-lg p-3"
-            >
-              <input
-                :value="cmd"
-                @change="updateDisconnectCommand(index, ($event.target as HTMLInputElement).value)"
-                placeholder='e.g. say {player.name} has left'
-                class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-1.5 text-neutral-200 text-sm"
-              />
-              <button
-                @click="removeDisconnectCommand(index)"
-                class="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded"
-              >
-                <Trash2 class="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          <button
-            @click="addDisconnectCommand"
-            class="flex items-center gap-2 px-3 py-1.5 bg-neutral-800 text-neutral-300 rounded-lg hover:bg-neutral-700 text-sm"
+        <div v-else class="te__entries">
+          <div
+            v-for="(entry, index) in realTimeEntries"
+            :key="index"
+            class="te__entry"
           >
-            <Plus class="w-4 h-4" />
-            Add Command
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Create Config Modal -->
-    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showCreateModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">New TimedExecute Config</h2>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
             <input
-              v-model="newConfigName"
-              placeholder="e.g. Default Timer Settings"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleCreateConfig"
+              :value="entry.time"
+              @change="updateRealTimeTime(entry.time, ($event.target as HTMLInputElement).value)"
+              placeholder="HH:MM:SS"
+              class="cc-input-raw cc-input-raw--mono te__input-time"
             />
+            <input
+              :value="entry.command"
+              @change="updateRealTimeCommand(entry.time, ($event.target as HTMLInputElement).value)"
+              placeholder="console command"
+              class="cc-input-raw te__input-grow"
+            />
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeRealTimeEntry(entry.time)" />
           </div>
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Description (optional)</label>
+        </div>
+
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addRealTimeEntry">Add time entry</Button>
+        </div>
+      </Panel>
+
+      <!-- On connect tab -->
+      <Panel v-else-if="activeTab === 'connect'" title="On player connect" subtitle="Commands executed when a player joins the server">
+        <EmptyState
+          v-if="connectCommands.length === 0"
+          icon="user"
+          description="No connect commands configured. Add a command below."
+        />
+
+        <div v-else class="te__entries">
+          <div
+            v-for="(cmd, index) in connectCommands"
+            :key="index"
+            class="te__entry"
+          >
+            <input
+              :value="cmd"
+              @change="updateConnectCommand(index, ($event.target as HTMLInputElement).value)"
+              placeholder="e.g. say Welcome {player.name}!"
+              class="cc-input-raw te__input-grow"
+            />
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeConnectCommand(index)" />
+          </div>
+        </div>
+
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addConnectCommand">Add command</Button>
+        </div>
+      </Panel>
+
+      <!-- On disconnect tab -->
+      <Panel v-else-if="activeTab === 'disconnect'" title="On player disconnect" subtitle="Commands executed when a player leaves the server">
+        <EmptyState
+          v-if="disconnectCommands.length === 0"
+          icon="user"
+          description="No disconnect commands configured. Add a command below."
+        />
+
+        <div v-else class="te__entries">
+          <div
+            v-for="(cmd, index) in disconnectCommands"
+            :key="index"
+            class="te__entry"
+          >
+            <input
+              :value="cmd"
+              @change="updateDisconnectCommand(index, ($event.target as HTMLInputElement).value)"
+              placeholder="e.g. say {player.name} has left"
+              class="cc-input-raw te__input-grow"
+            />
+            <Button variant="danger-soft" size="sm" icon="trash-2" @click="removeDisconnectCommand(index)" />
+          </div>
+        </div>
+
+        <div class="te__add-row">
+          <Button variant="secondary" size="sm" icon="plus" @click="addDisconnectCommand">Add command</Button>
+        </div>
+      </Panel>
+    </template>
+
+    <!-- Create config modal -->
+    <div v-if="showCreateModal" class="te__modal-backdrop" @click.self="showCreateModal = false">
+      <div class="te__modal">
+        <div class="te__modal-head">
+          <h2 class="te__modal-title">New TimedExecute config</h2>
+        </div>
+        <div class="te__modal-body">
+          <Input
+            v-model="newConfigNameModel"
+            label="Config name"
+            placeholder="e.g. Default Timer Settings"
+            @keydown.enter="handleCreateConfig"
+          />
+          <div class="te__field">
+            <span class="te__field-label">Description (optional)</span>
             <textarea
               v-model="newConfigDesc"
               rows="2"
               placeholder="What is this config for?"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm resize-none"
+              class="cc-textarea"
             />
           </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showCreateModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleCreateConfig"
-              :disabled="!newConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Create
-            </button>
-          </div>
+        </div>
+        <div class="te__modal-foot">
+          <Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
+          <Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
         </div>
       </div>
     </div>
 
-    <!-- Import from Server Modal -->
-    <div v-if="showImportModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="showImportModal = false">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl p-6 w-full max-w-md">
-        <h2 class="text-lg font-semibold text-neutral-100 mb-4">Import from Server</h2>
-        <p class="text-sm text-neutral-400 mb-4">
-          Import the current TimedExecute config from your live server. This will create a new config profile.
-        </p>
-        <div class="space-y-4">
-          <div>
-            <label class="block text-sm text-neutral-400 mb-1">Config Name</label>
-            <input
-              v-model="importConfigName"
-              placeholder="e.g. Imported Server Config"
-              class="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-neutral-200 text-sm"
-              @keydown.enter="handleImport"
-            />
-          </div>
-          <div class="flex justify-end gap-2">
-            <button @click="showImportModal = false" class="px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200">Cancel</button>
-            <button
-              @click="handleImport"
-              :disabled="!importConfigName.trim()"
-              class="px-4 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-            >
-              Import
-            </button>
-          </div>
+    <!-- Import from server modal -->
+    <div v-if="showImportModal" class="te__modal-backdrop" @click.self="showImportModal = false">
+      <div class="te__modal">
+        <div class="te__modal-head">
+          <h2 class="te__modal-title">Import from server</h2>
+        </div>
+        <div class="te__modal-body">
+          <p class="te__modal-desc">Import the current TimedExecute config from your live server. This will create a new config profile.</p>
+          <Input
+            v-model="importConfigNameModel"
+            label="Config name"
+            placeholder="e.g. Imported server config"
+            @keydown.enter="handleImport"
+          />
+        </div>
+        <div class="te__modal-foot">
+          <Button variant="ghost" @click="showImportModal = false">Cancel</Button>
+          <Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+/* ---- Page shell ---- */
+.te { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* ---- Page head ---- */
+.te__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+.te__head-id { display: flex; align-items: center; gap: 12px; }
+.te__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.te__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.te__head-actions { display: flex; align-items: center; gap: 8px; }
+
+/* ---- Toolbar ---- */
+.te__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.te__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
+.te__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
+
+/* ---- Loading ---- */
+.te__loading { display: flex; justify-content: center; padding: 48px 0; }
+.te__spinner {
+  width: 28px; height: 28px; border-radius: 50%;
+  border: 2px solid var(--accent); border-top-color: transparent;
+  animation: te-spin 0.6s linear infinite;
+}
+@keyframes te-spin { to { transform: rotate(360deg); } }
+
+/* ---- Presets ---- */
+.te__presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
+.te__presets-label { font-size: var(--text-xs); color: var(--text-muted); }
+.te__preset {
+  height: var(--control-h-sm); padding: 0 10px; border: 0; cursor: pointer;
+  border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font-sans);
+  font-weight: 500; color: var(--text-secondary);
+  background: var(--surface-raised-2); box-shadow: var(--ring-default);
+  transition: var(--transition-colors);
+}
+.te__preset:hover { background: var(--surface-active); color: var(--text-primary); }
+
+/* ---- Entry rows ---- */
+.te__entries { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.te__entry {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px; border-radius: var(--radius-md);
+  background: var(--surface-raised-2); box-shadow: var(--ring-default);
+}
+.te__entry-cmd { flex: 1; min-width: 0; }
+.te__entry-interval { display: flex; align-items: center; gap: 6px; }
+.te__unit { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
+
+/* ---- Inline raw inputs (entries) ---- */
+.cc-input-raw {
+  height: var(--control-h-sm); padding: 0 9px;
+  background: var(--surface-inset); border: 0; border-radius: var(--radius-sm);
+  box-shadow: var(--ring-default); outline: 0;
+  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
+  transition: var(--transition-colors);
+}
+.cc-input-raw::placeholder { color: var(--text-muted); }
+.cc-input-raw:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+.cc-input-raw--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.te__input-grow { width: 100%; }
+.te__input-interval { width: 72px; text-align: right; }
+.te__input-time { width: 90px; }
+
+/* ---- Add row ---- */
+.te__add-row { padding-top: 2px; }
+
+/* ---- Modal ---- */
+.te__modal-backdrop {
+  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+}
+.te__modal {
+  background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
+  width: 100%; max-width: 440px; display: flex; flex-direction: column;
+}
+.te__modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
+}
+.te__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
+.te__modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
+.te__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
+.te__modal-foot {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 14px 20px; border-top: 1px solid var(--border-subtle);
+}
+.te__field { display: flex; flex-direction: column; gap: 6px; }
+.te__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+
+/* ---- Textarea ---- */
+.cc-textarea {
+  background: var(--surface-inset); border-radius: var(--radius-md); box-shadow: var(--ring-default);
+  border: 0; outline: 0; padding: 9px 11px; resize: none; width: 100%;
+  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
+  transition: var(--transition-colors);
+}
+.cc-textarea::placeholder { color: var(--text-muted); }
+.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
+</style>

From 29615cb4f3ac967313757a0b354c5b6eede1243a Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 02:55:02 -0400
Subject: [PATCH 5/7] =?UTF-8?q?feat(redesign):=20re-skin=20admin-ops/platf?=
 =?UTF-8?q?orm-admin/public=20views=20to=20DS=20(Phase=20D=20batch=204=20?=
 =?UTF-8?q?=E2=80=94=20panel=20re-skin=20complete)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Final re-skin batch: admin ops (Console/FileManager[VueFinder preserved]/WipeCalendar/WipeHistory/Changelog/Migration), platform-admin (Dashboard/Licenses/Servers/Subscriptions/Users), public product pages (ServerInfo/StatusPage/StoreView) + PublicLayout, WarpEditor, ErrorBoundary. All logic/store/router/WebSocket/handlers preserved. Marketing views (Landing/Pricing/FAQ/HowItWorks/Roadmap/EarlyAccess + MarketingLayout) intentionally deferred to the dedicated marketing-site redesign. Build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/ErrorBoundary.vue     |  74 +-
 .../src/components/layout/PublicLayout.vue    |  29 +-
 .../src/components/teleport/WarpEditor.vue    | 138 +++-
 frontend/src/views/admin/ChangelogView.vue    | 177 ++--
 frontend/src/views/admin/ConsoleView.vue      | 201 +++--
 frontend/src/views/admin/FileManagerView.vue  |  56 +-
 frontend/src/views/admin/MigrationView.vue    | 316 ++++++--
 frontend/src/views/admin/WipeCalendarView.vue | 208 +++--
 frontend/src/views/admin/WipeHistoryView.vue  | 199 +++--
 .../views/platform-admin/AdminDashboard.vue   | 137 ++--
 .../views/platform-admin/AdminLicenses.vue    | 355 ++++----
 .../src/views/platform-admin/AdminServers.vue | 208 +++--
 .../platform-admin/AdminSubscriptions.vue     | 192 +++--
 .../src/views/platform-admin/AdminUsers.vue   | 221 ++---
 frontend/src/views/public/ServerInfoView.vue  | 301 +++++--
 frontend/src/views/public/StatusPageView.vue  | 577 ++++++++-----
 frontend/src/views/public/StoreView.vue       | 755 +++++++++++++-----
 17 files changed, 2843 insertions(+), 1301 deletions(-)

diff --git a/frontend/src/components/ErrorBoundary.vue b/frontend/src/components/ErrorBoundary.vue
index e92d806..3f0920d 100644
--- a/frontend/src/components/ErrorBoundary.vue
+++ b/frontend/src/components/ErrorBoundary.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onErrorCaptured } from 'vue'
-import { AlertTriangle } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import Button from '@/components/ds/core/Button.vue'
 
 const hasError = ref(false)
 const errorMessage = ref('')
@@ -20,18 +21,67 @@ function retry() {
 </script>
 
 <template>
-  <div v-if="hasError" class="min-h-screen bg-neutral-950 flex items-center justify-center p-6">
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 max-w-md w-full text-center">
-      <AlertTriangle class="w-12 h-12 text-red-500 mx-auto mb-4" />
-      <h1 class="text-xl font-bold text-neutral-100 mb-2">Something went wrong</h1>
-      <p class="text-sm text-neutral-400 mb-6">{{ errorMessage }}</p>
-      <button
-        @click="retry"
-        class="px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
-      >
-        Retry
-      </button>
+  <div v-if="hasError" class="eb-screen">
+    <div class="eb-card">
+      <div class="eb-icon-wrap">
+        <Icon name="triangle-alert" :size="24" :stroke-width="1.75" />
+      </div>
+      <h1 class="eb-title">Something went wrong</h1>
+      <p class="eb-msg">{{ errorMessage }}</p>
+      <Button icon="refresh-cw" @click="retry">Retry</Button>
     </div>
   </div>
   <slot v-else />
 </template>
+
+<style scoped>
+.eb-screen {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+}
+
+.eb-card {
+  background: var(--surface-base);
+  box-shadow: var(--ring-default), var(--shadow-md);
+  border-radius: var(--radius-xl);
+  padding: var(--space-8);
+  max-width: 380px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  text-align: center;
+}
+
+.eb-icon-wrap {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--status-offline-soft);
+  box-shadow: inset 0 0 0 1px var(--status-offline-border);
+  color: var(--status-offline);
+  flex: none;
+}
+
+.eb-title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+.eb-msg {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  line-height: 1.55;
+  max-width: 300px;
+}
+</style>
diff --git a/frontend/src/components/layout/PublicLayout.vue b/frontend/src/components/layout/PublicLayout.vue
index f7c0698..46033c3 100644
--- a/frontend/src/components/layout/PublicLayout.vue
+++ b/frontend/src/components/layout/PublicLayout.vue
@@ -1,16 +1,33 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import Logo from '@/components/ds/brand/Logo.vue'
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950">
+  <div class="pub-shell">
     <RouterView />
 
-    <footer class="py-6 text-center text-neutral-600 text-sm border-t border-neutral-800">
-      <div class="flex items-center justify-center gap-2">
-        <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
-        <span>Powered by <span class="text-oxide-500 font-semibold">Corrosion</span></span>
-      </div>
+    <footer class="pub-footer">
+      <Logo :size="18" :wordmark="true" />
     </footer>
   </div>
 </template>
+
+<style scoped>
+.pub-shell {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  flex-direction: column;
+}
+
+.pub-footer {
+  margin-top: auto;
+  padding: var(--space-6) var(--space-6);
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+}
+</style>
diff --git a/frontend/src/components/teleport/WarpEditor.vue b/frontend/src/components/teleport/WarpEditor.vue
index 1da6e27..0ce523d 100644
--- a/frontend/src/components/teleport/WarpEditor.vue
+++ b/frontend/src/components/teleport/WarpEditor.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Plus, Trash2 } from 'lucide-vue-next'
+import Icon from '@/components/ds/core/Icon.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Input from '@/components/ds/forms/Input.vue'
 
 const props = defineProps<{
   warps: Record<string, { x: number; y: number; z: number }>
@@ -28,49 +30,139 @@ function removeWarp(name: string) {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <h3 class="text-sm font-semibold text-neutral-300 uppercase tracking-wider">Warps</h3>
+  <div class="warp-editor">
+    <div class="warp-editor__label">Warps</div>
 
-    <!-- Add Warp -->
-    <div class="flex gap-2">
-      <input
+    <!-- Add warp row -->
+    <div class="warp-editor__add">
+      <Input
         v-model="newWarpName"
         placeholder="Warp name..."
-        class="flex-1 bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-200"
+        :mono="true"
+        style="flex: 1"
         @keydown.enter="addWarp"
       />
-      <button
-        @click="addWarp"
+      <Button
+        size="sm"
+        icon="plus"
         :disabled="!newWarpName.trim()"
-        class="flex items-center gap-1 px-3 py-2 bg-oxide-500 text-white rounded-lg hover:bg-oxide-600 disabled:opacity-50 text-sm"
-      >
-        <Plus class="w-4 h-4" />
-        Add
-      </button>
+        @click="addWarp"
+      >Add</Button>
     </div>
 
-    <!-- Warp List -->
-    <div v-if="Object.keys(warps).length === 0" class="text-neutral-500 text-sm text-center py-4">
+    <!-- Empty state -->
+    <div v-if="Object.keys(warps).length === 0" class="warp-editor__empty">
       No warps defined. Add warps here and set coordinates in-game.
     </div>
 
+    <!-- Warp list -->
     <div
       v-for="(coords, name) in warps"
       :key="name"
-      class="flex items-center justify-between bg-neutral-800/50 border border-neutral-700/50 rounded-lg px-4 py-3"
+      class="warp-row"
     >
-      <div>
-        <span class="text-neutral-200 font-medium">{{ name }}</span>
-        <span class="text-neutral-500 text-xs ml-3">
-          {{ coords.x.toFixed(1) }}, {{ coords.y.toFixed(1) }}, {{ coords.z.toFixed(1) }}
+      <div class="warp-row__id">
+        <span class="warp-row__name">{{ name }}</span>
+        <span class="warp-row__coords">
+          {{ (coords as { x: number; y: number; z: number }).x.toFixed(1) }},
+          {{ (coords as { x: number; y: number; z: number }).y.toFixed(1) }},
+          {{ (coords as { x: number; y: number; z: number }).z.toFixed(1) }}
         </span>
       </div>
       <button
+        class="warp-row__remove"
+        type="button"
+        :aria-label="`Remove warp ${name}`"
         @click="removeWarp(name as string)"
-        class="text-neutral-600 hover:text-red-400 transition-colors p-1"
       >
-        <Trash2 class="w-4 h-4" />
+        <Icon name="trash-2" :size="14" :stroke-width="2" />
       </button>
     </div>
   </div>
 </template>
+
+<style scoped>
+.warp-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.warp-editor__label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.warp-editor__add {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-2);
+}
+
+.warp-editor__empty {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  text-align: center;
+  padding: var(--space-4) 0;
+}
+
+.warp-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2-5) var(--space-3);
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  border-radius: var(--radius-md);
+}
+
+.warp-row__id {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.warp-row__name {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.warp-row__coords {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.warp-row__remove {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-muted);
+  transition: background var(--dur-fast) var(--ease-standard),
+              color var(--dur-fast) var(--ease-standard);
+}
+
+.warp-row__remove:hover {
+  background: var(--status-offline-soft);
+  color: var(--status-offline);
+}
+
+.warp-row__remove:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+</style>
diff --git a/frontend/src/views/admin/ChangelogView.vue b/frontend/src/views/admin/ChangelogView.vue
index 4cb8731..b49aebf 100644
--- a/frontend/src/views/admin/ChangelogView.vue
+++ b/frontend/src/views/admin/ChangelogView.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
-import { FileText, Tag, Loader2 } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 interface ChangelogEntry {
   id: string
@@ -38,13 +42,13 @@ function loadMore() {
   fetchChangelog()
 }
 
-function getCategoryColor(category: string): string {
+function categoryTone(category: string): 'online' | 'offline' | 'info' | 'warn' | 'neutral' {
   switch (category) {
-    case 'feature': return 'bg-green-500/10 text-green-400'
-    case 'bugfix': return 'bg-red-500/10 text-red-400'
-    case 'module': return 'bg-blue-500/10 text-blue-400'
-    case 'security': return 'bg-yellow-500/10 text-yellow-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
+    case 'feature': return 'online'
+    case 'bugfix': return 'offline'
+    case 'module': return 'info'
+    case 'security': return 'warn'
+    default: return 'neutral'
   }
 }
 
@@ -54,60 +58,127 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <FileText class="w-5 h-5 text-oxide-500" />
-      <h1 class="text-2xl font-bold text-neutral-100">Changelog</h1>
+  <div class="cl">
+    <!-- Page head -->
+    <div class="cl__head">
+      <div class="cl__head-id">
+        <div class="cl__head-chip">
+          <Icon name="file-text" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Platform</div>
+          <h1 class="cl__title">Changelog</h1>
+        </div>
+      </div>
     </div>
 
-    <!-- Changelog Feed -->
-    <div class="space-y-4">
-      <div
+    <!-- Loading state — first load -->
+    <div v-if="isLoading && entries.length === 0" class="cl__loading">
+      <Icon name="loader" :size="22" class="cl__spin" />
+      <span>Loading changelog…</span>
+    </div>
+
+    <!-- Empty state -->
+    <Panel v-else-if="!isLoading && entries.length === 0" title="Changelog">
+      <EmptyState
+        icon="file-text"
+        title="No entries yet"
+        description="Platform changelog entries will appear here."
+      />
+    </Panel>
+
+    <!-- Entry feed -->
+    <template v-else>
+      <Panel
         v-for="entry in entries"
         :key="entry.id"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
+        :title="entry.title"
       >
-        <div class="flex items-start justify-between mb-3">
-          <div class="flex items-center gap-3">
-            <div class="flex items-center gap-2 px-2 py-1 bg-oxide-500/10 border border-oxide-500/20 rounded-lg">
-              <Tag class="w-3 h-3 text-oxide-400" />
-              <span class="text-xs font-mono text-oxide-400">{{ entry.version }}</span>
-            </div>
-            <span
-              class="text-xs font-medium px-2 py-0.5 rounded-full capitalize"
-              :class="getCategoryColor(entry.category)"
-            >
-              {{ entry.category }}
-            </span>
-          </div>
-          <span class="text-xs text-neutral-500">{{ new Date(entry.published_at).toLocaleDateString() }}</span>
-        </div>
-        <h3 class="text-lg font-bold text-neutral-100 mb-2">{{ entry.title }}</h3>
-        <div class="text-sm text-neutral-300 whitespace-pre-line leading-relaxed">
-          {{ entry.body }}
-        </div>
+        <template #actions>
+          <Badge tone="accent" :mono="true">{{ entry.version }}</Badge>
+          <Badge :tone="categoryTone(entry.category)">{{ entry.category }}</Badge>
+          <span class="cl__date">{{ new Date(entry.published_at).toLocaleDateString() }}</span>
+        </template>
+        <div class="cl__body">{{ entry.body }}</div>
+      </Panel>
+
+      <!-- Load more spinner -->
+      <div v-if="isLoading" class="cl__loading">
+        <Icon name="loader" :size="20" class="cl__spin" />
+        <span>Loading more…</span>
       </div>
 
-      <!-- Loading State -->
-      <div v-if="isLoading" class="flex justify-center py-6">
-        <Loader2 class="w-6 h-6 text-oxide-500 animate-spin" />
+      <!-- Load more button -->
+      <div v-else-if="hasMore" class="cl__more">
+        <Button variant="secondary" @click="loadMore">Load more</Button>
       </div>
 
-      <!-- Load More -->
-      <div v-else-if="hasMore" class="flex justify-center">
-        <button
-          @click="loadMore"
-          class="px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          Load More
-        </button>
-      </div>
-
-      <!-- End of List -->
-      <div v-else class="text-center py-6 text-sm text-neutral-500">
-        No more changelog entries
-      </div>
-    </div>
+      <!-- End of list -->
+      <div v-else class="cl__end">No more changelog entries</div>
+    </template>
   </div>
 </template>
+
+<style scoped>
+.cl {
+  max-width: 820px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* Page head */
+.cl__head { display: flex; align-items: center; }
+.cl__head-id { display: flex; align-items: center; gap: 12px; }
+.cl__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.cl__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Entry body */
+.cl__body {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  white-space: pre-line;
+  line-height: 1.65;
+}
+
+/* Date label in actions slot */
+.cl__date {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Loading / footer states */
+.cl__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  padding: 28px 0;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+@keyframes cl-spin { to { transform: rotate(360deg); } }
+.cl__spin { animation: cl-spin 0.7s linear infinite; }
+
+.cl__more {
+  display: flex;
+  justify-content: center;
+  padding: 4px 0;
+}
+.cl__end {
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  padding: 20px 0;
+}
+</style>
diff --git a/frontend/src/views/admin/ConsoleView.vue b/frontend/src/views/admin/ConsoleView.vue
index e7639be..ff8e715 100644
--- a/frontend/src/views/admin/ConsoleView.vue
+++ b/frontend/src/views/admin/ConsoleView.vue
@@ -2,18 +2,23 @@
 import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 import { useServerStore } from '@/stores/server'
 import { useWebSocket, type WebSocketMessage } from '@/composables/useWebSocket'
-import { Send, Terminal, Trash2 } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import ConsoleLine from '@/components/ds/data/ConsoleLine.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Input from '@/components/ds/forms/Input.vue'
 
 const server = useServerStore()
 const ws = useWebSocket()
 
-interface ConsoleLine {
+interface LogLine {
   timestamp: string
   text: string
   type: 'info' | 'warning' | 'error' | 'command' | 'system'
 }
 
-const lines = ref<ConsoleLine[]>([])
+const lines = ref<LogLine[]>([])
 const commandInput = ref('')
 const consoleEl = ref<HTMLElement | null>(null)
 const sending = ref(false)
@@ -22,7 +27,7 @@ function now(): string {
   return new Date().toLocaleTimeString('en-US', { hour12: false })
 }
 
-function addLine(text: string, type: ConsoleLine['type'] = 'info') {
+function addLine(text: string, type: LogLine['type'] = 'info') {
   lines.value.push({ timestamp: now(), text, type })
   scrollToBottom()
 }
@@ -60,13 +65,12 @@ function clearConsole() {
   lines.value = []
 }
 
-function lineColor(type: ConsoleLine['type']): string {
+function lineLevel(type: LogLine['type']): 'cmd' | 'warn' | 'error' | 'info' {
   switch (type) {
-    case 'command': return 'text-oxide-400'
-    case 'warning': return 'text-yellow-400'
-    case 'error': return 'text-red-400'
-    case 'system': return 'text-neutral-500'
-    default: return 'text-neutral-300'
+    case 'command': return 'cmd'
+    case 'warning': return 'warn'
+    case 'error': return 'error'
+    default: return 'info'
   }
 }
 
@@ -83,10 +87,10 @@ function handleWebSocketMessage(message: WebSocketMessage) {
 let unsubscribe: (() => void) | null = null
 
 onMounted(() => {
-  addLine('Corrosion Console initialized.', 'system')
+  addLine('Corrosion console initialized.', 'system')
   addLine('Type a command and press Enter to send it to the server.', 'system')
   if (server.connection?.connection_status !== 'connected') {
-    addLine('WARNING: Server is not connected. Commands will fail.', 'warning')
+    addLine('Warning: server is not connected. Commands will fail.', 'warning')
   }
   unsubscribe = ws.subscribe(handleWebSocketMessage)
 })
@@ -100,70 +104,127 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="p-6 h-full flex flex-col">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-4">
-      <div class="flex items-center gap-3">
-        <Terminal class="w-5 h-5 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Server Console</h1>
-      </div>
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-2 text-sm">
-          <span
-            class="h-2 w-2 rounded-full"
-            :class="server.connection?.connection_status === 'connected' ? 'bg-green-500' : 'bg-red-500'"
-          />
-          <span class="text-neutral-400">
-            {{ server.connection?.connection_status === 'connected' ? 'Connected' : 'Disconnected' }}
-          </span>
+  <div class="cv">
+    <!-- Page head -->
+    <div class="cv__head">
+      <div class="cv__head-id">
+        <div class="cv__head-chip">
+          <Icon name="terminal" :size="20" :stroke-width="2" />
         </div>
-        <button
-          @click="clearConsole"
-          class="flex items-center gap-1.5 px-3 py-1.5 text-sm text-neutral-400 hover:text-neutral-200 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
+        <div>
+          <div class="t-eyebrow">Server management</div>
+          <h1 class="cv__title">Console</h1>
+        </div>
+      </div>
+      <div class="cv__head-actions">
+        <Badge
+          :tone="server.connection?.connection_status === 'connected' ? 'online' : 'offline'"
+          :dot="true"
+          :pulse="server.connection?.connection_status === 'connected'"
         >
-          <Trash2 class="w-3.5 h-3.5" />
-          Clear
-        </button>
+          {{ server.connection?.connection_status === 'connected' ? 'Connected' : 'Disconnected' }}
+        </Badge>
+        <Button variant="ghost" size="sm" icon="trash-2" @click="clearConsole">Clear</Button>
       </div>
     </div>
 
-    <!-- Console output -->
-    <div
-      ref="consoleEl"
-      class="flex-1 bg-black/80 border border-neutral-800 rounded-t-lg p-4 overflow-y-auto font-mono text-sm leading-relaxed min-h-0"
-    >
-      <div v-if="lines.length === 0" class="text-neutral-600 italic">
-        No output yet. Send a command to get started.
+    <!-- Console panel -->
+    <Panel :flush-body="true" title="Output">
+      <div ref="consoleEl" class="cv__output">
+        <div v-if="lines.length === 0" class="cv__empty">
+          No output yet. Send a command to get started.
+        </div>
+        <ConsoleLine
+          v-for="(line, i) in lines"
+          :key="i"
+          :time="line.timestamp"
+          :level="lineLevel(line.type)"
+        >{{ line.text }}</ConsoleLine>
       </div>
-      <div
-        v-for="(line, i) in lines"
-        :key="i"
-        class="flex gap-3"
-      >
-        <span class="text-neutral-600 shrink-0 select-none">{{ line.timestamp }}</span>
-        <span :class="lineColor(line.type)" class="whitespace-pre-wrap break-all">{{ line.text }}</span>
+      <div class="cv__bar">
+        <span class="cv__bar-prompt">$</span>
+        <Input
+          v-model="commandInput"
+          :mono="true"
+          size="sm"
+          placeholder="say Hello everyone…"
+          :disabled="sending"
+          style="flex: 1"
+          @keydown.enter="handleSend"
+        />
+        <Button
+          size="sm"
+          variant="secondary"
+          icon="corner-down-left"
+          :loading="sending"
+          :disabled="!commandInput.trim() || sending"
+          @click="handleSend"
+        >Send</Button>
       </div>
-    </div>
-
-    <!-- Command input -->
-    <div class="flex bg-neutral-900 border border-t-0 border-neutral-800 rounded-b-lg overflow-hidden">
-      <span class="flex items-center px-3 text-oxide-500 font-mono text-sm select-none">$</span>
-      <input
-        v-model="commandInput"
-        @keydown.enter="handleSend"
-        type="text"
-        placeholder="say Hello everyone..."
-        :disabled="sending"
-        class="flex-1 bg-transparent py-3 text-neutral-100 placeholder-neutral-600 font-mono text-sm focus:outline-none disabled:opacity-50"
-      />
-      <button
-        @click="handleSend"
-        :disabled="!commandInput.trim() || sending"
-        class="flex items-center gap-2 px-4 text-sm font-medium text-oxide-400 hover:text-oxide-300 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-      >
-        <Send class="w-4 h-4" />
-        Send
-      </button>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.cv {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Page head */
+.cv__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.cv__head-id { display: flex; align-items: center; gap: 12px; }
+.cv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.cv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.cv__head-actions { display: flex; align-items: center; gap: 9px; }
+
+/* Output area */
+.cv__output {
+  min-height: 420px;
+  max-height: 600px;
+  overflow-y: auto;
+  padding: 8px 0;
+  background: var(--surface-inset);
+}
+.cv__empty {
+  padding: 16px 14px;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* Command bar */
+.cv__bar {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--surface-base);
+}
+.cv__bar-prompt {
+  font-family: var(--font-mono);
+  color: var(--accent-text);
+  font-weight: 700;
+  font-size: var(--text-sm);
+  flex: none;
+}
+</style>
diff --git a/frontend/src/views/admin/FileManagerView.vue b/frontend/src/views/admin/FileManagerView.vue
index 70b48f3..098d3b2 100644
--- a/frontend/src/views/admin/FileManagerView.vue
+++ b/frontend/src/views/admin/FileManagerView.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { VueFinder, RemoteDriver } from 'vuefinder'
 import { useAuthStore } from '@/stores/auth'
+import Icon from '@/components/ds/core/Icon.vue'
 
 const auth = useAuthStore()
 
@@ -26,18 +27,22 @@ const finderConfig = {
 </script>
 
 <template>
-  <div class="space-y-6 p-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <h1 class="text-2xl font-bold text-white">File Manager</h1>
-        <p class="text-sm text-gray-400 mt-1">Browse and edit your server files</p>
+  <div class="fm">
+    <!-- Page head -->
+    <div class="fm__head">
+      <div class="fm__head-id">
+        <div class="fm__head-chip">
+          <Icon name="folder-open" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Server management</div>
+          <h1 class="fm__title">File manager</h1>
+        </div>
       </div>
     </div>
 
-    <div
-      class="bg-neutral-900 rounded-lg border border-neutral-800 overflow-hidden"
-      style="min-height: 640px;"
-    >
+    <!-- VueFinder wrapper — only the outer chrome is re-skinned; internals untouched -->
+    <div class="fm__finder">
       <VueFinder
         id="corrosion-filemanager"
         :driver="driver"
@@ -47,3 +52,36 @@ const finderConfig = {
     </div>
   </div>
 </template>
+
+<style scoped>
+.fm {
+  max-width: 1480px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Page head */
+.fm__head { display: flex; align-items: center; gap: 12px; }
+.fm__head-id { display: flex; align-items: center; gap: 12px; }
+.fm__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.fm__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Finder container — surface panel chrome, VueFinder renders inside */
+.fm__finder {
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+  min-height: 640px;
+}
+</style>
diff --git a/frontend/src/views/admin/MigrationView.vue b/frontend/src/views/admin/MigrationView.vue
index 6b5f1dd..9317521 100644
--- a/frontend/src/views/admin/MigrationView.vue
+++ b/frontend/src/views/admin/MigrationView.vue
@@ -2,8 +2,13 @@
 import { ref, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useAuthStore } from '@/stores/auth'
-import { Download, Upload, FileText, Loader2 } from 'lucide-vue-next'
 import { safeFileSize, safeDate } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 interface ExportRecord {
   id: string
@@ -20,6 +25,8 @@ const isExporting = ref(false)
 const isImporting = ref(false)
 const exportType = ref<'full' | 'config_only' | 'store_only'>('full')
 const uploadFile = ref<File | null>(null)
+const importError = ref<string | null>(null)
+const importSuccess = ref(false)
 
 async function fetchExports() {
   exports.value = await api.get<ExportRecord[]>('/migration/exports')
@@ -49,6 +56,8 @@ async function importData() {
   if (!confirm('Import data? This will overwrite existing configuration.')) return
 
   isImporting.value = true
+  importError.value = null
+  importSuccess.value = false
   try {
     const formData = new FormData()
     formData.append('file', uploadFile.value)
@@ -63,18 +72,20 @@ async function importData() {
       throw new Error('Import failed')
     }
 
-    alert('Import successful')
+    importSuccess.value = true
     uploadFile.value = null
   } catch (err) {
-    alert(err instanceof Error ? err.message : 'Import failed')
+    importError.value = err instanceof Error ? err.message : 'Import failed'
   } finally {
     isImporting.value = false
   }
 }
 
-function formatBytes(bytes: number): string {
-  return safeFileSize(bytes)
-}
+const EXPORT_TYPE_OPTIONS = [
+  { value: 'full' as const, label: 'Full' },
+  { value: 'config_only' as const, label: 'Config only' },
+  { value: 'store_only' as const, label: 'Store only' },
+]
 
 onMounted(() => {
   fetchExports()
@@ -82,110 +93,251 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <FileText class="w-5 h-5 text-oxide-500" />
-      <h1 class="text-2xl font-bold text-neutral-100">Migration</h1>
+  <div class="mv">
+    <!-- Page head -->
+    <div class="mv__head">
+      <div class="mv__head-id">
+        <div class="mv__head-chip">
+          <Icon name="upload" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Platform</div>
+          <h1 class="mv__title">Migration</h1>
+        </div>
+      </div>
     </div>
 
-    <!-- Export Section -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Export Data</h2>
-      <div class="flex items-end gap-4">
-        <div>
-          <label class="block text-xs text-neutral-500 mb-2">Export Type</label>
-          <div class="flex bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
+    <!-- Export section -->
+    <Panel title="Export data" subtitle="Create a portable backup of your configuration">
+      <div class="mv__export-row">
+        <div class="mv__export-field">
+          <div class="mv__field-label">Export type</div>
+          <div class="mv__seg">
             <button
-              v-for="opt in (['full', 'config_only', 'store_only'] as const)"
-              :key="opt"
-              @click="exportType = opt"
-              class="px-4 py-2 text-sm font-medium transition-colors capitalize"
-              :class="exportType === opt ? 'bg-oxide-500/15 text-oxide-400' : 'text-neutral-400 hover:text-neutral-200'"
-            >
-              {{ opt.replace('_', ' ') }}
-            </button>
+              v-for="opt in EXPORT_TYPE_OPTIONS"
+              :key="opt.value"
+              type="button"
+              class="mv__seg-btn"
+              :class="exportType === opt.value && 'mv__seg-btn--active'"
+              @click="exportType = opt.value"
+            >{{ opt.label }}</button>
           </div>
         </div>
-        <button
-          @click="createExport"
+        <Button
+          icon="download"
+          :loading="isExporting"
           :disabled="isExporting"
-          class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
-        >
-          <Loader2 v-if="isExporting" class="w-4 h-4 animate-spin" />
-          <Download v-else class="w-4 h-4" />
-          Export
-        </button>
+          @click="createExport"
+        >Export</Button>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Export History -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <div class="p-5 border-b border-neutral-800">
-        <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider">Export History</h2>
-      </div>
-      <div v-if="exports.length === 0" class="p-8 text-center text-neutral-500">
-        No exports yet.
-      </div>
-      <table v-else class="w-full">
-        <thead class="bg-neutral-800/50 border-b border-neutral-800">
+    <!-- Export history -->
+    <Panel :flush-body="true" title="Export history">
+      <EmptyState
+        v-if="exports.length === 0"
+        icon="file-text"
+        title="No exports yet"
+        description="Create an export above to see it listed here."
+      />
+      <table v-else class="cc-table">
+        <thead>
           <tr>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Type</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Created</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Size</th>
-            <th class="px-4 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actions</th>
+            <th>Type</th>
+            <th>Created</th>
+            <th>Size</th>
+            <th>Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-for="exp in exports" :key="exp.id" class="hover:bg-neutral-800/30">
-            <td class="px-4 py-3 text-sm text-neutral-200 capitalize">{{ exp.export_type.replace('_', ' ') }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ safeDate(exp.created_at) }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatBytes(exp.file_size_bytes) }}</td>
-            <td class="px-4 py-3">
+        <tbody>
+          <tr v-for="exp in exports" :key="exp.id">
+            <td>
+              <Badge tone="neutral">{{ exp.export_type.replace('_', ' ') }}</Badge>
+            </td>
+            <td class="td-mono">{{ safeDate(exp.created_at) }}</td>
+            <td class="td-mono">{{ safeFileSize(exp.file_size_bytes) }}</td>
+            <td>
               <a
                 v-if="exp.download_url"
                 :href="exp.download_url"
-                class="text-oxide-400 hover:text-oxide-300 text-sm transition-colors"
+                class="mv__dl-link"
               >
+                <Icon name="download" :size="13" />
                 Download
               </a>
-              <span v-else class="text-sm text-neutral-600">Preparing...</span>
+              <span v-else class="mv__preparing">Preparing…</span>
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
 
-    <!-- Import Section -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-4">Import Data</h2>
-      <div class="space-y-4">
-        <div class="border-2 border-dashed border-neutral-700 rounded-lg p-6 text-center">
-          <Upload class="w-8 h-8 text-neutral-500 mx-auto mb-2" />
+    <!-- Import section -->
+    <Panel title="Import data" subtitle="Restore from a JSON or ZIP export file">
+      <div class="mv__import-body">
+        <Alert v-if="importSuccess" tone="online">Import completed successfully.</Alert>
+        <Alert v-if="importError" tone="danger">{{ importError }}</Alert>
+
+        <label for="file-upload" class="mv__dropzone">
+          <Icon name="upload" :size="28" class="mv__dropzone-icon" />
+          <span class="mv__dropzone-label">
+            {{ uploadFile ? uploadFile.name : 'Click to select file' }}
+          </span>
+          <span class="mv__dropzone-hint">JSON or ZIP exports</span>
           <input
+            id="file-upload"
             type="file"
             accept=".json,.zip"
+            class="mv__file-input"
             @change="handleFileSelect"
-            class="hidden"
-            id="file-upload"
           />
-          <label for="file-upload" class="cursor-pointer">
-            <span class="text-sm text-oxide-400 hover:text-oxide-300 transition-colors">
-              {{ uploadFile ? uploadFile.name : 'Click to select file' }}
-            </span>
-          </label>
-          <p class="text-xs text-neutral-500 mt-1">JSON or ZIP exports</p>
-        </div>
-        <button
-          @click="importData"
+        </label>
+
+        <Button
+          :block="true"
+          icon="upload"
+          :loading="isImporting"
           :disabled="!uploadFile || isImporting"
-          class="w-full flex items-center justify-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
-        >
-          <Loader2 v-if="isImporting" class="w-4 h-4 animate-spin" />
-          <Upload v-else class="w-4 h-4" />
-          Import
-        </button>
+          @click="importData"
+        >Import</Button>
       </div>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.mv {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Page head */
+.mv__head { display: flex; align-items: center; }
+.mv__head-id { display: flex; align-items: center; gap: 12px; }
+.mv__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.mv__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Export row */
+.mv__export-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.mv__export-field { display: flex; flex-direction: column; gap: 6px; }
+.mv__field-label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+/* Segment control (mirrors WipesView pattern) */
+.mv__seg {
+  display: flex;
+  background: var(--surface-inset);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+}
+.mv__seg-btn {
+  height: var(--control-h-md);
+  padding: 0 14px;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.mv__seg-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
+.mv__seg-btn--active {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+
+/* Table */
+.cc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.cc-table thead tr {
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-inset);
+}
+.cc-table th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+.cc-table tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.cc-table tbody tr:last-child { border-bottom: 0; }
+.cc-table tbody tr:hover { background: var(--surface-hover); }
+.cc-table td {
+  padding: 11px 16px;
+  color: var(--text-secondary);
+  vertical-align: middle;
+}
+.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* Download link */
+.mv__dl-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--accent-text);
+  text-decoration: none;
+  transition: var(--transition-colors);
+}
+.mv__dl-link:hover { color: var(--accent); }
+.mv__preparing { font-size: var(--text-sm); color: var(--text-muted); }
+
+/* Import body */
+.mv__import-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* Dropzone */
+.mv__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 32px 24px;
+  border: 1.5px dashed var(--border-default);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  position: relative;
+}
+.mv__dropzone:hover { border-color: var(--accent-border); background: var(--accent-soft); }
+.mv__dropzone-icon { color: var(--text-tertiary); }
+.mv__dropzone:hover .mv__dropzone-icon { color: var(--accent-text); }
+.mv__dropzone-label { font-size: var(--text-sm); font-weight: 500; color: var(--accent-text); }
+.mv__dropzone-hint { font-size: var(--text-xs); color: var(--text-muted); }
+.mv__file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+</style>
diff --git a/frontend/src/views/admin/WipeCalendarView.vue b/frontend/src/views/admin/WipeCalendarView.vue
index f27a853..480661b 100644
--- a/frontend/src/views/admin/WipeCalendarView.vue
+++ b/frontend/src/views/admin/WipeCalendarView.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useWipeStore } from '@/stores/wipe'
-import { Calendar, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const wipeStore = useWipeStore()
 
@@ -53,6 +57,8 @@ function nextMonth() {
   currentMonth.value = d
 }
 
+const activeSchedules = computed(() => wipeStore.schedules.filter(s => s.is_active))
+
 onMounted(() => {
   wipeStore.fetchHistory()
   wipeStore.fetchSchedules()
@@ -60,79 +66,177 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <Calendar class="w-5 h-5 text-oxide-500" />
-      <h1 class="text-2xl font-bold text-neutral-100">Wipe Calendar</h1>
+  <div class="wc">
+    <!-- Page head -->
+    <div class="wc__head">
+      <div class="wc__head-id">
+        <div class="wc__head-chip">
+          <Icon name="calendar" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Auto-wiper</div>
+          <h1 class="wc__title">Wipe calendar</h1>
+        </div>
+      </div>
     </div>
 
-    <!-- Month navigation -->
-    <div class="flex items-center justify-between">
-      <button @click="prevMonth" class="p-2 text-neutral-400 hover:text-neutral-200 transition-colors">
-        <ChevronLeft class="w-5 h-5" />
-      </button>
-      <h2 class="text-lg font-semibold text-neutral-200">{{ monthLabel }}</h2>
-      <button @click="nextMonth" class="p-2 text-neutral-400 hover:text-neutral-200 transition-colors">
-        <ChevronRight class="w-5 h-5" />
-      </button>
-    </div>
+    <!-- Calendar panel -->
+    <Panel :flush-body="true" title="Wipe calendar">
+      <template #actions>
+        <Button variant="ghost" size="sm" icon="chevron-left" @click="prevMonth" />
+        <span class="wc__month-label">{{ monthLabel }}</span>
+        <Button variant="ghost" size="sm" icon="chevron-right" @click="nextMonth" />
+      </template>
 
-    <!-- Calendar grid -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <!-- Day headers -->
-      <div class="grid grid-cols-7 border-b border-neutral-800">
+      <!-- Day-of-week headers -->
+      <div class="wc__dow-row">
         <div
           v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"
           :key="day"
-          class="py-2 text-center text-xs font-medium text-neutral-500 uppercase"
-        >
-          {{ day }}
-        </div>
+          class="wc__dow"
+        >{{ day }}</div>
       </div>
+
       <!-- Day cells -->
-      <div class="grid grid-cols-7">
+      <div class="wc__grid">
         <div
           v-for="(day, i) in calendarDays"
           :key="i"
-          class="min-h-20 p-2 border-b border-r border-neutral-800 last:border-r-0"
-          :class="{ 'bg-neutral-800/30': !day.inMonth }"
+          class="wc__cell"
+          :class="{ 'wc__cell--out': !day.inMonth }"
         >
           <template v-if="day.inMonth">
-            <p class="text-sm" :class="day.hasWipe ? 'text-oxide-400 font-bold' : 'text-neutral-400'">
-              {{ day.date }}
-            </p>
-            <div v-if="day.hasWipe" class="mt-1">
-              <span class="text-xs bg-oxide-500/15 text-oxide-400 px-1.5 py-0.5 rounded">
-                {{ day.wipeType }}
-              </span>
-            </div>
+            <span class="wc__date" :class="{ 'wc__date--wipe': day.hasWipe }">{{ day.date }}</span>
+            <Badge
+              v-if="day.hasWipe"
+              tone="warn"
+              size="md"
+              class="wc__wipe-badge"
+            >{{ day.wipeType }}</Badge>
           </template>
         </div>
       </div>
-    </div>
+    </Panel>
 
-    <!-- Upcoming schedules -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-      <h2 class="text-sm font-medium text-neutral-400 uppercase tracking-wider mb-3">Active Schedules</h2>
-      <div v-if="wipeStore.schedules.length === 0" class="text-sm text-neutral-500 text-center py-4">
-        No active schedules.
-      </div>
-      <div v-else class="space-y-2">
+    <!-- Active schedules panel -->
+    <Panel title="Active schedules" subtitle="Cron schedules currently enabled">
+      <EmptyState
+        v-if="activeSchedules.length === 0"
+        icon="calendar-clock"
+        title="No active schedules"
+        description="Activate a schedule in the auto-wiper to see it here."
+      />
+      <div v-else class="wc__sched-list">
         <div
-          v-for="schedule in wipeStore.schedules.filter(s => s.is_active)"
+          v-for="schedule in activeSchedules"
           :key="schedule.id"
-          class="flex items-center justify-between p-3 bg-neutral-800/50 rounded-lg"
+          class="wc__sched-row"
         >
-          <div>
-            <p class="text-sm text-neutral-200">{{ schedule.schedule_name }}</p>
-            <p class="text-xs text-neutral-500 font-mono">{{ schedule.cron_expression }}</p>
+          <div class="wc__sched-info">
+            <div class="wc__sched-name">{{ schedule.schedule_name }}</div>
+            <div class="wc__sched-meta">
+              <span class="wc__mono">{{ schedule.cron_expression }}</span>
+              &middot; {{ schedule.timezone }}
+            </div>
+          </div>
+          <div class="wc__sched-next">
+            Next:
+            <span class="wc__mono">
+              {{ schedule.next_scheduled_run ? new Date(schedule.next_scheduled_run).toLocaleDateString() : 'TBD' }}
+            </span>
           </div>
-          <p class="text-xs text-neutral-400">
-            Next: {{ schedule.next_scheduled_run ? new Date(schedule.next_scheduled_run).toLocaleDateString() : 'TBD' }}
-          </p>
         </div>
       </div>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.wc {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Page head */
+.wc__head { display: flex; align-items: center; }
+.wc__head-id { display: flex; align-items: center; gap: 12px; }
+.wc__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.wc__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.wc__month-label {
+  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
+  padding: 0 4px; white-space: nowrap;
+}
+
+/* Calendar grid */
+.wc__dow-row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-inset);
+}
+.wc__dow {
+  padding: 8px 0;
+  text-align: center;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+}
+
+.wc__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.wc__cell {
+  min-height: 80px;
+  padding: 8px;
+  border-bottom: 1px solid var(--border-subtle);
+  border-right: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.wc__cell:nth-child(7n) { border-right: 0; }
+.wc__cell--out { background: var(--surface-inset); }
+
+.wc__date {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+.wc__date--wipe { color: var(--accent-text); font-weight: 700; }
+.wc__wipe-badge { align-self: flex-start; }
+
+/* Active schedules list */
+.wc__sched-list { display: flex; flex-direction: column; }
+.wc__sched-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 2px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.wc__sched-row:last-child { border-bottom: 0; }
+.wc__sched-info { flex: 1; min-width: 0; }
+.wc__sched-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.wc__sched-meta { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.wc__sched-next { font-size: var(--text-xs); color: var(--text-tertiary); flex: none; }
+.wc__mono { font-family: var(--font-mono); }
+
+@media (max-width: 600px) {
+  .wc__cell { min-height: 52px; padding: 4px; }
+}
+</style>
diff --git a/frontend/src/views/admin/WipeHistoryView.vue b/frontend/src/views/admin/WipeHistoryView.vue
index 722b493..012ab34 100644
--- a/frontend/src/views/admin/WipeHistoryView.vue
+++ b/frontend/src/views/admin/WipeHistoryView.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useWipeStore } from '@/stores/wipe'
-import { History, RefreshCw } from 'lucide-vue-next'
 import { safeDate } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const wipeStore = useWipeStore()
 
-function statusBadgeClass(status: string): string {
-  switch (status) {
-    case 'success': return 'bg-green-500/10 text-green-400'
-    case 'failed':
-    case 'rolled_back': return 'bg-red-500/10 text-red-400'
-    case 'wiping':
-    case 'pre_wipe':
-    case 'post_wipe': return 'bg-yellow-500/10 text-yellow-400'
-    default: return 'bg-neutral-700/50 text-neutral-400'
-  }
+function wipeTone(status: string): 'online' | 'offline' | 'warn' | 'neutral' {
+  if (status === 'success') return 'online'
+  if (status === 'failed' || status === 'rolled_back') return 'offline'
+  if (status === 'wiping' || status === 'pre_wipe' || status === 'post_wipe') return 'warn'
+  return 'neutral'
 }
 
 function duration(start: string | null, end: string | null): string {
-  if (!start || !end) return '\u2014'
+  if (!start || !end) return '—'
   const ms = new Date(end).getTime() - new Date(start).getTime()
   const s = Math.floor(ms / 1000)
   const m = Math.floor(s / 60)
@@ -33,68 +32,154 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <History class="w-5 h-5 text-oxide-500" />
+  <div class="wh">
+    <!-- Page head -->
+    <div class="wh__head">
+      <div class="wh__head-id">
+        <div class="wh__head-chip">
+          <Icon name="clock" :size="20" :stroke-width="2" />
+        </div>
         <div>
-          <h1 class="text-2xl font-bold text-neutral-100">Wipe History</h1>
-          <p class="text-sm text-neutral-500 mt-0.5">{{ wipeStore.history.length }} wipes recorded</p>
+          <div class="t-eyebrow">Auto-wiper</div>
+          <h1 class="wh__title">Wipe history</h1>
         </div>
       </div>
-      <button
-        @click="wipeStore.fetchHistory()"
+      <Button
+        variant="secondary"
+        size="sm"
+        icon="refresh-cw"
+        :loading="wipeStore.isLoading"
         :disabled="wipeStore.isLoading"
-        class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-50 rounded-lg transition-colors"
-      >
-        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': wipeStore.isLoading }" />
-        Refresh
-      </button>
+        @click="wipeStore.fetchHistory()"
+      >Refresh</Button>
+    </div>
+
+    <!-- Summary line -->
+    <div v-if="!wipeStore.isLoading" class="wh__summary">
+      {{ wipeStore.history.length }} wipe{{ wipeStore.history.length === 1 ? '' : 's' }} recorded
     </div>
 
     <!-- History table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <Panel :flush-body="true" title="All wipes">
+      <EmptyState
+        v-if="wipeStore.history.length === 0 && !wipeStore.isLoading"
+        icon="trash-2"
+        title="No wipe history"
+        description="Wipes will appear here once they run."
+      />
+
+      <div v-else-if="wipeStore.isLoading" class="wh__loading">
+        <Icon name="loader" :size="20" class="wh__spin" />
+        <span>Loading history…</span>
+      </div>
+
+      <table v-else class="cc-table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Type</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Trigger</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Started</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Duration</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Map</th>
+          <tr>
+            <th>Type</th>
+            <th>Trigger</th>
+            <th>Status</th>
+            <th>Started</th>
+            <th>Duration</th>
+            <th>Map</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="wipeStore.history.length === 0">
-            <td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="wipeStore.isLoading">Loading history...</template>
-              <template v-else>No wipe history yet.</template>
-            </td>
-          </tr>
+        <tbody>
           <tr
             v-for="wipe in wipeStore.history"
             :key="wipe.id"
-            class="hover:bg-neutral-800/50 transition-colors"
           >
-            <td class="px-4 py-3 text-sm font-medium text-neutral-100 capitalize">{{ wipe.wipe_type }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400 capitalize">{{ wipe.trigger_type.replace('_', ' ') }}</td>
-            <td class="px-4 py-3">
-              <span class="text-xs font-medium px-2 py-0.5 rounded-full" :class="statusBadgeClass(wipe.status)">
-                {{ wipe.status.replace('_', ' ') }}
-              </span>
+            <td class="td-primary">{{ wipe.wipe_type }}</td>
+            <td>{{ wipe.trigger_type.replace('_', ' ') }}</td>
+            <td>
+              <Badge :tone="wipeTone(wipe.status)">{{ wipe.status.replace('_', ' ') }}</Badge>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">
-              {{ safeDate(wipe.started_at, '\u2014') }}
-            </td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">
-              {{ duration(wipe.started_at, wipe.completed_at) }}
-            </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ wipe.map_used || '\u2014' }}</td>
+            <td class="td-mono">{{ safeDate(wipe.started_at, '—') }}</td>
+            <td class="td-mono">{{ duration(wipe.started_at, wipe.completed_at) }}</td>
+            <td>{{ wipe.map_used || '—' }}</td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.wh {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Page head */
+.wh__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.wh__head-id { display: flex; align-items: center; gap: 12px; }
+.wh__head-chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.wh__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.wh__summary {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: -4px;
+}
+
+/* Loading state */
+.wh__loading {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 36px 16px;
+  justify-content: center;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+@keyframes wh-spin { to { transform: rotate(360deg); } }
+.wh__spin { animation: wh-spin 0.7s linear infinite; }
+
+/* Table */
+.cc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.cc-table thead tr {
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-inset);
+}
+.cc-table th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+.cc-table tbody tr {
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-colors);
+}
+.cc-table tbody tr:last-child { border-bottom: 0; }
+.cc-table tbody tr:hover { background: var(--surface-hover); }
+.cc-table td {
+  padding: 11px 16px;
+  color: var(--text-secondary);
+  vertical-align: middle;
+}
+.td-primary { color: var(--text-primary); font-weight: 500; text-transform: capitalize; }
+.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+</style>
diff --git a/frontend/src/views/platform-admin/AdminDashboard.vue b/frontend/src/views/platform-admin/AdminDashboard.vue
index f61f141..661aeec 100644
--- a/frontend/src/views/platform-admin/AdminDashboard.vue
+++ b/frontend/src/views/platform-admin/AdminDashboard.vue
@@ -2,8 +2,10 @@
 import { ref, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
 import { useRouter } from 'vue-router'
-import { Key, KeyRound, Users, DollarSign, Server, UserPlus, ArrowRight, ScrollText, CreditCard, MonitorCog } from 'lucide-vue-next'
 import { safeCurrency, safeLocaleString } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Icon from '@/components/ds/core/Icon.vue'
 
 const api = useApi()
 const router = useRouter()
@@ -21,26 +23,26 @@ const stats = ref<PlatformStats | null>(null)
 const isLoading = ref(false)
 
 const kpiCards = [
-  { key: 'total_licenses' as const, label: 'Total Licenses', icon: Key, format: 'number' },
-  { key: 'active_licenses' as const, label: 'Active Licenses', icon: KeyRound, format: 'number' },
-  { key: 'total_users' as const, label: 'Total Users', icon: Users, format: 'number' },
-  { key: 'module_mrr' as const, label: 'Module MRR', icon: DollarSign, format: 'currency' },
-  { key: 'servers_online' as const, label: 'Servers Online', icon: Server, format: 'number' },
-  { key: 'new_signups_this_week' as const, label: 'New Signups This Week', icon: UserPlus, format: 'number' },
+  { key: 'total_licenses' as const, label: 'Total licenses', icon: 'key', format: 'number' },
+  { key: 'active_licenses' as const, label: 'Active licenses', icon: 'key', format: 'number' },
+  { key: 'total_users' as const, label: 'Total users', icon: 'users', format: 'number' },
+  { key: 'module_mrr' as const, label: 'Module MRR', icon: 'dollar-sign', format: 'currency' },
+  { key: 'servers_online' as const, label: 'Servers online', icon: 'server', format: 'number' },
+  { key: 'new_signups_this_week' as const, label: 'New signups this week', icon: 'users', format: 'number' },
 ]
 
 const quickLinks = [
-  { label: 'Licenses', description: 'Manage license keys and activations', icon: Key, route: '/admin/licenses' },
-  { label: 'Subscriptions', description: 'View module subscriptions and MRR', icon: CreditCard, route: '/admin/subscriptions' },
-  { label: 'Users', description: 'Manage platform users and permissions', icon: Users, route: '/admin/users' },
-  { label: 'Servers', description: 'Monitor connected game servers', icon: MonitorCog, route: '/admin/servers' },
+  { label: 'Licenses', description: 'Manage license keys and activations', icon: 'key', route: '/admin/licenses' },
+  { label: 'Subscriptions', description: 'View module subscriptions and MRR', icon: 'credit-card', route: '/admin/subscriptions' },
+  { label: 'Users', description: 'Manage platform users and permissions', icon: 'users', route: '/admin/users' },
+  { label: 'Servers', description: 'Monitor connected game servers', icon: 'server-cog', route: '/admin/servers' },
 ]
 
 function formatValue(value: number | undefined, format: string): string {
   if (format === 'currency') {
-    return safeCurrency(value, '$', '\u2014')
+    return safeCurrency(value, '$', '—')
   }
-  return safeLocaleString(value, '\u2014')
+  return safeLocaleString(value, '—')
 }
 
 async function fetchStats() {
@@ -60,58 +62,91 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-8 bg-neutral-950 min-h-screen">
-    <!-- Header -->
-    <div>
-      <div class="flex items-center gap-3 mb-1">
-        <ScrollText class="w-6 h-6 text-oxide-500" />
-        <h1 class="text-2xl font-bold text-neutral-100">Platform Admin</h1>
+  <div class="pa-dash">
+    <!-- Page head -->
+    <div class="pa-dash__head">
+      <div class="pa-dash__head-id">
+        <div class="pa-dash__chip">
+          <Icon name="layout-dashboard" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Platform admin</div>
+          <h1 class="pa-dash__title">Dashboard</h1>
+        </div>
       </div>
-      <p class="text-sm text-neutral-400 ml-9">Overview of all platform activity and key metrics.</p>
     </div>
 
-    <!-- KPI Cards -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div
+    <!-- KPI row -->
+    <div class="pa-dash__kpis">
+      <StatCard
         v-for="card in kpiCards"
         :key="card.key"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
-      >
-        <div class="flex items-center gap-3 mb-3">
-          <div class="p-2 rounded-lg bg-oxide-500/10">
-            <component :is="card.icon" class="w-4 h-4 text-oxide-400" />
-          </div>
-          <p class="text-sm text-neutral-400">{{ card.label }}</p>
-        </div>
-        <!-- Loading state -->
-        <div v-if="isLoading" class="h-8 w-24 bg-neutral-800 rounded animate-pulse" />
-        <!-- Value -->
-        <p v-else class="text-3xl font-bold text-neutral-100">
-          {{ stats ? formatValue(stats[card.key], card.format) : '\u2014' }}
-        </p>
-      </div>
+        :icon="card.icon"
+        :label="card.label"
+        :value="isLoading ? '—' : (stats ? formatValue(stats[card.key], card.format) : '—')"
+      />
     </div>
 
-    <!-- Quick Links -->
-    <div>
-      <h2 class="text-lg font-semibold text-neutral-200 mb-4">Quick Links</h2>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <!-- Quick links -->
+    <Panel title="Quick links">
+      <div class="pa-dash__links">
         <button
           v-for="link in quickLinks"
           :key="link.route"
+          class="pa-dash__link"
           @click="router.push(link.route)"
-          class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 text-left hover:border-oxide-500/40 hover:bg-neutral-800/50 transition-all group"
         >
-          <div class="flex items-center justify-between mb-2">
-            <div class="p-2 rounded-lg bg-oxide-500/10">
-              <component :is="link.icon" class="w-4 h-4 text-oxide-400" />
-            </div>
-            <ArrowRight class="w-4 h-4 text-neutral-600 group-hover:text-oxide-400 transition-colors" />
+          <div class="pa-dash__link-icon">
+            <Icon :name="link.icon" :size="16" :stroke-width="2" />
           </div>
-          <p class="text-sm font-semibold text-neutral-100 mt-3">{{ link.label }}</p>
-          <p class="text-xs text-neutral-500 mt-1">{{ link.description }}</p>
+          <div class="pa-dash__link-body">
+            <div class="pa-dash__link-label">{{ link.label }}</div>
+            <div class="pa-dash__link-desc">{{ link.description }}</div>
+          </div>
+          <Icon name="chevron-right" :size="15" class="pa-dash__link-arrow" />
         </button>
       </div>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.pa-dash { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+.pa-dash__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.pa-dash__head-id { display: flex; align-items: center; gap: 12px; }
+.pa-dash__chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pa-dash__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+.pa-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
+
+.pa-dash__links { display: flex; flex-direction: column; gap: 2px; }
+.pa-dash__link {
+  display: flex; align-items: center; gap: 12px; padding: 12px 8px;
+  border-radius: var(--radius-md); background: transparent; border: 0;
+  cursor: pointer; text-align: left; transition: var(--transition-colors);
+  width: 100%;
+}
+.pa-dash__link:hover { background: var(--surface-hover); }
+.pa-dash__link-icon {
+  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent-text); background: var(--accent-soft);
+}
+.pa-dash__link-body { flex: 1; min-width: 0; }
+.pa-dash__link-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.pa-dash__link-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
+.pa-dash__link-arrow { color: var(--text-muted); flex: none; }
+
+@media (max-width: 768px) {
+  .pa-dash__kpis { grid-template-columns: repeat(2, 1fr); }
+}
+</style>
diff --git a/frontend/src/views/platform-admin/AdminLicenses.vue b/frontend/src/views/platform-admin/AdminLicenses.vue
index 58724ab..995884d 100644
--- a/frontend/src/views/platform-admin/AdminLicenses.vue
+++ b/frontend/src/views/platform-admin/AdminLicenses.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useApi } from '@/composables/useApi'
-import { Key, Search, Download, Plus, X, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const api = useApi()
 
@@ -60,11 +67,11 @@ const statusOptions = [
   { value: 'revoked', label: 'Revoked' },
 ]
 
-const statusBadgeClass: Record<string, string> = {
-  active: 'bg-green-500/10 text-green-400',
-  suspended: 'bg-yellow-500/10 text-yellow-400',
-  expired: 'bg-neutral-700/50 text-neutral-400',
-  revoked: 'bg-red-500/10 text-red-400',
+const statusTone: Record<string, 'online' | 'warn' | 'neutral' | 'offline'> = {
+  active: 'online',
+  suspended: 'warn',
+  expired: 'neutral',
+  revoked: 'offline',
 }
 
 function formatDate(iso: string | null | undefined): string {
@@ -175,214 +182,234 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
-    <!-- Header -->
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-3">
-        <Key class="w-5 h-5 text-oxide-500" />
+  <div class="pal">
+    <!-- Page head -->
+    <div class="pal__head">
+      <div class="pal__head-id">
+        <div class="pal__chip">
+          <Icon name="key" :size="20" :stroke-width="2" />
+        </div>
         <div>
-          <h1 class="text-2xl font-bold text-neutral-100">License Management</h1>
-          <p class="text-sm text-neutral-400 mt-0.5">{{ total }} licenses total</p>
+          <div class="t-eyebrow">Platform admin</div>
+          <h1 class="pal__title">License management</h1>
         </div>
       </div>
-      <div class="flex items-center gap-3">
-        <button
-          @click="exportCsv"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors"
-        >
-          <Download class="w-4 h-4" />
-          Export CSV
-        </button>
-        <button
-          @click="showGenerateForm = !showGenerateForm"
-          class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors"
-        >
-          <Plus class="w-4 h-4" />
-          Generate License
-        </button>
+      <div class="pal__head-actions">
+        <Button variant="secondary" icon="download" @click="exportCsv">Export CSV</Button>
+        <Button icon="plus" @click="showGenerateForm = !showGenerateForm">Generate license</Button>
       </div>
     </div>
 
-    <!-- Generate License Form -->
-    <div
-      v-if="showGenerateForm"
-      class="bg-neutral-900 border border-oxide-500/30 rounded-lg p-4"
-    >
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="text-sm font-semibold text-neutral-200">Generate New License</h3>
-        <button @click="showGenerateForm = false" class="text-neutral-500 hover:text-neutral-300">
-          <X class="w-4 h-4" />
-        </button>
-      </div>
-      <div class="flex items-center gap-3">
-        <input
+    <!-- Generate license form -->
+    <Panel v-if="showGenerateForm" title="Generate new license">
+      <template #actions>
+        <IconButton icon="x" label="Close" @click="showGenerateForm = false" />
+      </template>
+      <div class="pal__gen-form">
+        <Input
           v-model="generateEmail"
           type="email"
-          placeholder="Owner email address..."
-          class="flex-1 px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
+          placeholder="Owner email address"
+          icon="mail"
+          style="flex: 1"
           @keydown.enter="generateLicense"
         />
-        <button
-          @click="generateLicense"
+        <Button
+          icon="key"
+          :loading="isGenerating"
           :disabled="isGenerating || !generateEmail.trim()"
-          class="px-4 py-2 text-sm font-medium text-white bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
-        >
-          {{ isGenerating ? 'Generating...' : 'Generate' }}
-        </button>
+          @click="generateLicense"
+        >{{ isGenerating ? 'Generating...' : 'Generate' }}</Button>
       </div>
-    </div>
+    </Panel>
 
     <!-- Filters -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search by key, email, or server name..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <select
+    <div class="pal__filters">
+      <Input
+        v-model="searchQuery"
+        placeholder="Search by key, email, or server name"
+        icon="search"
+        style="flex: 1; max-width: 360px"
+      />
+      <Select
         v-model="statusFilter"
-        class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-      >
-        <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </select>
+        :options="statusOptions"
+      />
     </div>
 
     <!-- Table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <Panel :flush-body="true" :subtitle="total + ' licenses total'">
+      <table class="pal__table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">License Key</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Server Name</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Created</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Expires</th>
+          <tr class="pal__thead-row">
+            <th class="pal__th">License key</th>
+            <th class="pal__th">Owner email</th>
+            <th class="pal__th">Server name</th>
+            <th class="pal__th">Status</th>
+            <th class="pal__th">Created</th>
+            <th class="pal__th">Expires</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="licenses.length === 0 && !isLoading">
-            <td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="searchQuery || statusFilter !== 'all'">No licenses matching your filters.</template>
-              <template v-else>No licenses found.</template>
-            </td>
-          </tr>
+        <tbody>
           <tr v-if="isLoading">
-            <td colspan="6" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading licenses...</td>
+            <td colspan="6" class="pal__td-empty">Loading licenses...</td>
+          </tr>
+          <tr v-else-if="licenses.length === 0">
+            <td colspan="6" class="pal__td-es">
+              <EmptyState
+                icon="key"
+                :title="(searchQuery || statusFilter !== 'all') ? 'No matching licenses' : 'No licenses found'"
+                :description="(searchQuery || statusFilter !== 'all') ? 'Try adjusting your search or filter.' : 'Generate a license to get started.'"
+              />
+            </td>
           </tr>
           <tr
             v-for="license in licenses"
             :key="license.id"
+            class="pal__tr"
+            :class="{ 'pal__tr--selected': selectedLicenseId === license.id }"
             @click="selectLicense(license.id)"
-            class="hover:bg-neutral-800/50 transition-colors cursor-pointer"
-            :class="{ 'bg-neutral-800/30': selectedLicenseId === license.id }"
           >
-            <td class="px-4 py-3 text-sm text-neutral-100 font-mono">{{ license.license_key }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ license.owner_email }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ license.server_name }}</td>
-            <td class="px-4 py-3">
-              <span
-                class="inline-flex text-xs font-medium px-2 py-0.5 rounded-full capitalize"
-                :class="statusBadgeClass[license.status] || 'bg-neutral-700/50 text-neutral-400'"
-              >
-                {{ license.status }}
-              </span>
+            <td class="pal__td pal__td--mono">{{ license.license_key }}</td>
+            <td class="pal__td pal__td--secondary">{{ license.owner_email }}</td>
+            <td class="pal__td pal__td--secondary">{{ license.server_name ?? '—' }}</td>
+            <td class="pal__td">
+              <Badge :tone="statusTone[license.status] ?? 'neutral'">{{ license.status }}</Badge>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(license.created_at) }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(license.expires_at) }}</td>
+            <td class="pal__td pal__td--secondary">{{ formatDate(license.created_at) }}</td>
+            <td class="pal__td pal__td--secondary">{{ formatDate(license.expires_at) }}</td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
 
-    <!-- Detail Panel -->
-    <div
-      v-if="selectedLicenseId"
-      class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
-    >
-      <div v-if="isDetailLoading" class="space-y-3">
-        <div class="h-5 w-40 bg-neutral-800 rounded animate-pulse" />
-        <div class="h-4 w-64 bg-neutral-800 rounded animate-pulse" />
-        <div class="h-4 w-48 bg-neutral-800 rounded animate-pulse" />
+    <!-- Detail panel -->
+    <Panel v-if="selectedLicenseId" title="License details">
+      <template #actions>
+        <IconButton icon="x" label="Close" @click="selectedLicenseId = null; selectedDetail = null" />
+      </template>
+      <div v-if="isDetailLoading" class="pal__detail-skeleton">
+        <div class="pal__skel" />
+        <div class="pal__skel pal__skel--wide" />
+        <div class="pal__skel" />
       </div>
       <div v-else-if="selectedDetail">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-neutral-100">License Details</h3>
-          <button @click="selectedLicenseId = null; selectedDetail = null" class="text-neutral-500 hover:text-neutral-300">
-            <X class="w-4 h-4" />
-          </button>
-        </div>
-        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
-          <div>
-            <span class="text-neutral-500">License Key</span>
-            <p class="text-neutral-200 mt-0.5 font-mono text-xs">{{ selectedDetail.license_key }}</p>
+        <div class="pal__detail-grid">
+          <div class="pal__field">
+            <div class="pal__field-label">License key</div>
+            <div class="pal__field-val pal__field-val--mono">{{ selectedDetail.license_key }}</div>
           </div>
-          <div>
-            <span class="text-neutral-500">Owner</span>
-            <p class="text-neutral-200 mt-0.5">{{ selectedDetail.owner_email }}</p>
+          <div class="pal__field">
+            <div class="pal__field-label">Owner</div>
+            <div class="pal__field-val">{{ selectedDetail.owner_email }}</div>
           </div>
-          <div>
-            <span class="text-neutral-500">Team Members</span>
-            <p class="text-neutral-200 mt-0.5">{{ selectedDetail.team_count }}</p>
+          <div class="pal__field">
+            <div class="pal__field-label">Team members</div>
+            <div class="pal__field-val pal__field-val--mono">{{ selectedDetail.team_count }}</div>
           </div>
-          <div>
-            <span class="text-neutral-500">Wipe Count</span>
-            <p class="text-neutral-200 mt-0.5">{{ selectedDetail.wipe_count }}</p>
+          <div class="pal__field">
+            <div class="pal__field-label">Wipe count</div>
+            <div class="pal__field-val pal__field-val--mono">{{ selectedDetail.wipe_count }}</div>
           </div>
         </div>
-        <div v-if="selectedDetail.server_connection" class="mt-4 pt-4 border-t border-neutral-800">
-          <h4 class="text-sm font-medium text-neutral-300 mb-3">Server Connection</h4>
-          <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
-            <div>
-              <span class="text-neutral-500">Connection Type</span>
-              <p class="text-neutral-200 mt-0.5 capitalize">{{ selectedDetail.server_connection.connection_type }}</p>
+        <div v-if="selectedDetail.server_connection" class="pal__conn">
+          <div class="pal__conn-head">Server connection</div>
+          <div class="pal__detail-grid">
+            <div class="pal__field">
+              <div class="pal__field-label">Connection type</div>
+              <div class="pal__field-val pal__field-val--mono">{{ selectedDetail.server_connection.connection_type }}</div>
             </div>
-            <div>
-              <span class="text-neutral-500">Server IP</span>
-              <p class="text-neutral-200 mt-0.5 font-mono">{{ selectedDetail.server_connection.server_ip }}</p>
+            <div class="pal__field">
+              <div class="pal__field-label">Server IP</div>
+              <div class="pal__field-val pal__field-val--mono">{{ selectedDetail.server_connection.server_ip }}</div>
             </div>
-            <div>
-              <span class="text-neutral-500">Game Port</span>
-              <p class="text-neutral-200 mt-0.5 font-mono">{{ selectedDetail.server_connection.game_port }}</p>
+            <div class="pal__field">
+              <div class="pal__field-label">Game port</div>
+              <div class="pal__field-val pal__field-val--mono">{{ selectedDetail.server_connection.game_port }}</div>
             </div>
-            <div>
-              <span class="text-neutral-500">Status</span>
-              <p class="text-neutral-200 mt-0.5 capitalize">{{ selectedDetail.server_connection.status }}</p>
+            <div class="pal__field">
+              <div class="pal__field-label">Status</div>
+              <div class="pal__field-val">{{ selectedDetail.server_connection.status }}</div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </Panel>
 
     <!-- Pagination -->
-    <div class="flex items-center justify-between">
-      <p class="text-sm text-neutral-500">
-        Page {{ page }} of {{ totalPages }}
-      </p>
-      <div class="flex items-center gap-2">
-        <button
-          @click="prevPage"
-          :disabled="page <= 1"
-          class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
-        >
-          <ChevronLeft class="w-4 h-4" />
-          Prev
-        </button>
-        <button
-          @click="nextPage"
-          :disabled="page >= totalPages"
-          class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
-        >
-          Next
-          <ChevronRight class="w-4 h-4" />
-        </button>
+    <div class="pal__pager">
+      <span class="pal__pager-info">Page {{ page }} of {{ totalPages }}</span>
+      <div class="pal__pager-btns">
+        <Button variant="secondary" size="sm" icon="chevron-left" :disabled="page <= 1" @click="prevPage">Prev</Button>
+        <Button variant="secondary" size="sm" icon-right="chevron-right" :disabled="page >= totalPages" @click="nextPage">Next</Button>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.pal { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.pal__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; row-gap: 10px; }
+.pal__head-id { display: flex; align-items: center; gap: 12px; }
+.pal__chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pal__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+.pal__head-actions { display: flex; align-items: center; gap: 8px; }
+
+/* Generate form */
+.pal__gen-form { display: flex; align-items: flex-end; gap: 10px; }
+
+/* Filters */
+.pal__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+
+/* Table */
+.pal__table { width: 100%; border-collapse: collapse; }
+.pal__thead-row { border-bottom: 1px solid var(--border-subtle); }
+.pal__th {
+  padding: 10px 16px; text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  white-space: nowrap;
+}
+.pal__tr { border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: var(--transition-colors); }
+.pal__tr:last-child { border-bottom: 0; }
+.pal__tr:hover { background: var(--surface-hover); }
+.pal__tr--selected { background: var(--accent-soft); }
+.pal__td { padding: 11px 16px; font-size: var(--text-sm); color: var(--text-primary); }
+.pal__td--secondary { color: var(--text-secondary); }
+.pal__td--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
+.pal__td-empty { padding: 12px 16px; text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); }
+.pal__td-es { padding: 0; }
+
+/* Detail panel */
+.pal__detail-skeleton { display: flex; flex-direction: column; gap: 10px; }
+.pal__skel { height: 16px; width: 160px; background: var(--surface-raised-2); border-radius: var(--radius-sm); animation: pal-pulse 1.4s ease-in-out infinite; }
+.pal__skel--wide { width: 260px; }
+@keyframes pal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+.pal__detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
+.pal__field-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: 4px; }
+.pal__field-val { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.pal__field-val--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
+
+.pal__conn { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
+.pal__conn-head { font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: 14px; }
+
+/* Pagination */
+.pal__pager { display: flex; align-items: center; justify-content: space-between; }
+.pal__pager-info { font-size: var(--text-sm); color: var(--text-tertiary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.pal__pager-btns { display: flex; align-items: center; gap: 8px; }
+
+@media (max-width: 900px) {
+  .pal__detail-grid { grid-template-columns: repeat(2, 1fr); }
+}
+</style>
diff --git a/frontend/src/views/platform-admin/AdminServers.vue b/frontend/src/views/platform-admin/AdminServers.vue
index d2445fa..259d92e 100644
--- a/frontend/src/views/platform-admin/AdminServers.vue
+++ b/frontend/src/views/platform-admin/AdminServers.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useApi } from '@/composables/useApi'
-import { Server, Search } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import StatusDot from '@/components/ds/core/StatusDot.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const api = useApi()
 
@@ -29,24 +35,18 @@ const statusOptions = [
   { value: 'offline', label: 'Offline' },
 ]
 
-const connectionBadgeClass: Record<string, string> = {
-  plugin: 'bg-blue-500/10 text-blue-400',
-  companion: 'bg-purple-500/10 text-purple-400',
-  amp: 'bg-cyan-500/10 text-cyan-400',
-  pterodactyl: 'bg-green-500/10 text-green-400',
-  bare_metal: 'bg-orange-500/10 text-orange-400',
+const connTypeTone: Record<string, 'info' | 'accent' | 'neutral' | 'online' | 'warn'> = {
+  plugin: 'info',
+  companion: 'accent',
+  amp: 'neutral',
+  pterodactyl: 'online',
+  bare_metal: 'warn',
 }
 
-const statusDotClass: Record<string, string> = {
-  connected: 'bg-green-500',
-  degraded: 'bg-yellow-500',
-  offline: 'bg-red-500',
-}
-
-const statusTextClass: Record<string, string> = {
-  connected: 'text-green-400',
-  degraded: 'text-yellow-400',
-  offline: 'text-red-400',
+const statusTone: Record<string, 'online' | 'warn' | 'offline'> = {
+  connected: 'online',
+  degraded: 'warn',
+  offline: 'offline',
 }
 
 const filteredServers = computed(() => {
@@ -108,94 +108,138 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <Server class="w-5 h-5 text-oxide-500" />
-      <div>
-        <h1 class="text-2xl font-bold text-neutral-100">Server Overview</h1>
-        <p class="text-sm text-neutral-400 mt-0.5">
-          {{ filteredServers.length }} server{{ filteredServers.length !== 1 ? 's' : '' }}
-          <template v-if="statusFilter !== 'all'"> ({{ statusFilter }})</template>
-        </p>
+  <div class="pas">
+    <!-- Page head -->
+    <div class="pas__head">
+      <div class="pas__head-id">
+        <div class="pas__chip">
+          <Icon name="server" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Platform admin</div>
+          <h1 class="pas__title">Server overview</h1>
+        </div>
       </div>
     </div>
 
     <!-- Filters -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search by server name, email, or IP..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
-      <select
+    <div class="pas__filters">
+      <Input
+        v-model="searchQuery"
+        placeholder="Search by server name, email, or IP"
+        icon="search"
+        style="flex: 1; max-width: 360px"
+      />
+      <Select
         v-model="statusFilter"
-        class="px-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-      >
-        <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </select>
+        :options="statusOptions"
+      />
     </div>
 
     <!-- Table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <Panel :flush-body="true" :subtitle="filteredServers.length + ' server' + (filteredServers.length !== 1 ? 's' : '') + (statusFilter !== 'all' ? ' · ' + statusFilter : '')">
+      <table class="pas__table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Server Name</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Connection Type</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Status</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Server IP</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Game Port</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Last Heartbeat</th>
+          <tr class="pas__thead-row">
+            <th class="pas__th">Server name</th>
+            <th class="pas__th">Owner email</th>
+            <th class="pas__th">Connection type</th>
+            <th class="pas__th">Status</th>
+            <th class="pas__th">Server IP</th>
+            <th class="pas__th">Game port</th>
+            <th class="pas__th">Last heartbeat</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="filteredServers.length === 0 && !isLoading">
-            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="searchQuery">No servers matching "{{ searchQuery }}"</template>
-              <template v-else-if="statusFilter !== 'all'">No {{ statusFilter }} servers found.</template>
-              <template v-else>No servers found.</template>
-            </td>
-          </tr>
+        <tbody>
           <tr v-if="isLoading">
-            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading servers...</td>
+            <td colspan="7" class="pas__td-empty">Loading servers...</td>
+          </tr>
+          <tr v-else-if="filteredServers.length === 0">
+            <td colspan="7" class="pas__td-es">
+              <EmptyState
+                icon="server"
+                :title="searchQuery ? 'No matching servers' : (statusFilter !== 'all' ? 'No ' + statusFilter + ' servers' : 'No servers found')"
+                :description="searchQuery ? 'Try a different search term.' : 'Servers will appear here once connected.'"
+              />
+            </td>
           </tr>
           <tr
             v-for="srv in filteredServers"
             :key="srv.license_id"
-            class="hover:bg-neutral-800/50 transition-colors"
+            class="pas__tr"
           >
-            <td class="px-4 py-3 text-sm font-medium text-neutral-100">{{ srv.server_name || 'Unnamed' }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ srv.owner_email }}</td>
-            <td class="px-4 py-3">
-              <span
-                class="inline-flex text-xs font-medium px-2 py-0.5 rounded-full capitalize"
-                :class="connectionBadgeClass[srv.connection_type] || 'bg-neutral-700/50 text-neutral-400'"
-              >
+            <td class="pas__td pas__td--primary">{{ srv.server_name ?? 'Unnamed' }}</td>
+            <td class="pas__td pas__td--secondary">{{ srv.owner_email }}</td>
+            <td class="pas__td">
+              <Badge :tone="connTypeTone[srv.connection_type] ?? 'neutral'">
                 {{ srv.connection_type.replace('_', ' ') }}
-              </span>
+              </Badge>
             </td>
-            <td class="px-4 py-3">
-              <div class="flex items-center gap-2">
-                <span class="h-2 w-2 rounded-full" :class="statusDotClass[srv.connection_status] || 'bg-neutral-500'" />
-                <span class="text-sm capitalize" :class="statusTextClass[srv.connection_status] || 'text-neutral-400'">
-                  {{ srv.connection_status }}
-                </span>
+            <td class="pas__td">
+              <div class="pas__status">
+                <StatusDot :tone="statusTone[srv.connection_status] ?? 'neutral'" :pulse="srv.connection_status === 'connected'" />
+                <span class="pas__status-label" :data-tone="srv.connection_status">{{ srv.connection_status }}</span>
               </div>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ srv.server_ip || '—' }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ srv.game_port || '—' }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ srv.plugin_last_seen ? relativeTime(srv.plugin_last_seen) : srv.companion_last_seen ? relativeTime(srv.companion_last_seen) : 'Never' }}</td>
+            <td class="pas__td pas__td--mono">{{ srv.server_ip ?? '—' }}</td>
+            <td class="pas__td pas__td--mono">{{ srv.game_port ?? '—' }}</td>
+            <td class="pas__td pas__td--secondary">
+              {{ srv.plugin_last_seen
+                  ? relativeTime(srv.plugin_last_seen)
+                  : srv.companion_last_seen
+                    ? relativeTime(srv.companion_last_seen)
+                    : 'Never' }}
+            </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.pas { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.pas__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.pas__head-id { display: flex; align-items: center; gap: 12px; }
+.pas__chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pas__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Filters */
+.pas__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+
+/* Table */
+.pas__table { width: 100%; border-collapse: collapse; }
+.pas__thead-row { border-bottom: 1px solid var(--border-subtle); }
+.pas__th {
+  padding: 10px 16px; text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  white-space: nowrap;
+}
+.pas__tr { border-bottom: 1px solid var(--border-subtle); transition: var(--transition-colors); }
+.pas__tr:last-child { border-bottom: 0; }
+.pas__tr:hover { background: var(--surface-hover); }
+.pas__td { padding: 11px 16px; font-size: var(--text-sm); color: var(--text-primary); }
+.pas__td--primary { font-weight: 500; }
+.pas__td--secondary { color: var(--text-secondary); }
+.pas__td--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--text-secondary); }
+.pas__td-empty { padding: 12px 16px; text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); }
+.pas__td-es { padding: 0; }
+
+/* Status cell */
+.pas__status { display: flex; align-items: center; gap: 7px; }
+.pas__status-label { font-size: var(--text-sm); color: var(--text-secondary); }
+.pas__status-label[data-tone="connected"] { color: var(--status-online); }
+.pas__status-label[data-tone="degraded"] { color: var(--status-warn); }
+.pas__status-label[data-tone="offline"] { color: var(--status-offline); }
+</style>
diff --git a/frontend/src/views/platform-admin/AdminSubscriptions.vue b/frontend/src/views/platform-admin/AdminSubscriptions.vue
index 2e26732..0010030 100644
--- a/frontend/src/views/platform-admin/AdminSubscriptions.vue
+++ b/frontend/src/views/platform-admin/AdminSubscriptions.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useApi } from '@/composables/useApi'
-import { CreditCard, Package, DollarSign, Users } from 'lucide-vue-next'
 import { safeCurrency, safeLocaleString } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const api = useApi()
 
@@ -58,89 +62,147 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <CreditCard class="w-5 h-5 text-oxide-500" />
-      <div>
-        <h1 class="text-2xl font-bold text-neutral-100">Subscriptions</h1>
-        <p class="text-sm text-neutral-400 mt-0.5">Module subscription overview and subscriber details.</p>
+  <div class="pasub">
+    <!-- Page head -->
+    <div class="pasub__head">
+      <div class="pasub__head-id">
+        <div class="pasub__chip">
+          <Icon name="credit-card" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Platform admin</div>
+          <h1 class="pasub__title">Subscriptions</h1>
+        </div>
       </div>
     </div>
 
-    <!-- Summary Cards -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-      <!-- Total Subscribers -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <div class="flex items-center gap-3 mb-3">
-          <div class="p-2 rounded-lg bg-oxide-500/10">
-            <Users class="w-4 h-4 text-oxide-400" />
-          </div>
-          <p class="text-sm text-neutral-400">Total Subscribers</p>
-        </div>
-        <div v-if="isLoading" class="h-8 w-16 bg-neutral-800 rounded animate-pulse" />
-        <p v-else class="text-3xl font-bold text-neutral-100">{{ safeLocaleString(totalSubscribers) }}</p>
-      </div>
-
-      <!-- Total MRR -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
-        <div class="flex items-center gap-3 mb-3">
-          <div class="p-2 rounded-lg bg-green-500/10">
-            <DollarSign class="w-4 h-4 text-green-400" />
-          </div>
-          <p class="text-sm text-neutral-400">Total MRR</p>
-        </div>
-        <div v-if="isLoading" class="h-8 w-24 bg-neutral-800 rounded animate-pulse" />
-        <p v-else class="text-3xl font-bold text-neutral-100">{{ safeCurrency(totalMrr, '$') }}</p>
-      </div>
-
-      <!-- Per-Module Cards -->
-      <div
+    <!-- KPI row -->
+    <div class="pasub__kpis">
+      <StatCard
+        icon="users"
+        label="Total subscribers"
+        :value="isLoading ? '—' : safeLocaleString(totalSubscribers)"
+      />
+      <StatCard
+        icon="dollar-sign"
+        label="Total MRR"
+        :value="isLoading ? '—' : safeCurrency(totalMrr, '$')"
+      />
+      <StatCard
         v-for="mod in moduleBreakdown"
         :key="mod.name"
-        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
-      >
-        <div class="flex items-center gap-3 mb-3">
-          <div class="p-2 rounded-lg bg-oxide-500/10">
-            <Package class="w-4 h-4 text-oxide-400" />
-          </div>
-          <p class="text-sm text-neutral-400 truncate">{{ mod.name }}</p>
-        </div>
-        <p class="text-3xl font-bold text-neutral-100">{{ mod.count }}</p>
-        <p class="text-xs text-neutral-500 mt-1">subscribers</p>
-      </div>
+        icon="package"
+        :label="mod.name"
+        :value="String(mod.count)"
+        note="subscribers"
+      />
     </div>
 
+    <!-- Module breakdown summary -->
+    <Panel v-if="moduleBreakdown.length > 0" title="Module breakdown" subtitle="Subscribers per module">
+      <div class="pasub__mods">
+        <div
+          v-for="mod in moduleBreakdown"
+          :key="mod.name"
+          class="pasub__mod-row"
+        >
+          <div class="pasub__mod-icon">
+            <Icon name="package" :size="14" :stroke-width="2" />
+          </div>
+          <span class="pasub__mod-name">{{ mod.name }}</span>
+          <Badge tone="neutral" :mono="true">{{ mod.count }}</Badge>
+        </div>
+      </div>
+    </Panel>
+
     <!-- Table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <Panel :flush-body="true" title="All subscriptions" :subtitle="subscriptions.length + ' total'">
+      <table class="pasub__table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Module Name</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">License ID</th>
+          <tr class="pasub__thead-row">
+            <th class="pasub__th">Owner email</th>
+            <th class="pasub__th">Module name</th>
+            <th class="pasub__th">License ID</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="subscriptions.length === 0 && !isLoading">
-            <td colspan="3" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              No subscriptions found.
-            </td>
-          </tr>
+        <tbody>
           <tr v-if="isLoading">
-            <td colspan="3" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading subscriptions...</td>
+            <td colspan="3" class="pasub__td-empty">Loading subscriptions...</td>
+          </tr>
+          <tr v-else-if="subscriptions.length === 0">
+            <td colspan="3" class="pasub__td-es">
+              <EmptyState
+                icon="credit-card"
+                title="No subscriptions found"
+                description="Module subscriptions will appear here once customers subscribe."
+              />
+            </td>
           </tr>
           <tr
             v-for="(sub, idx) in subscriptions"
             :key="`${sub.license_id}-${sub.module_name}-${idx}`"
-            class="hover:bg-neutral-800/50 transition-colors"
+            class="pasub__tr"
           >
-            <td class="px-4 py-3 text-sm text-neutral-100">{{ sub.owner_email }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ sub.module_name }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ sub.license_id }}</td>
+            <td class="pasub__td">{{ sub.owner_email }}</td>
+            <td class="pasub__td pasub__td--secondary">{{ sub.module_name }}</td>
+            <td class="pasub__td pasub__td--mono">{{ sub.license_id }}</td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
   </div>
 </template>
+
+<style scoped>
+.pasub { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.pasub__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.pasub__head-id { display: flex; align-items: center; gap: 12px; }
+.pasub__chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pasub__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* KPI row */
+.pasub__kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 13px; }
+
+/* Module breakdown */
+.pasub__mods { display: flex; flex-direction: column; gap: 2px; }
+.pasub__mod-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 6px; border-radius: var(--radius-md);
+  transition: var(--transition-colors);
+}
+.pasub__mod-row:hover { background: var(--surface-hover); }
+.pasub__mod-icon {
+  width: 26px; height: 26px; flex: none; border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent-text); background: var(--accent-soft);
+}
+.pasub__mod-name { flex: 1; font-size: var(--text-sm); color: var(--text-primary); }
+
+/* Table */
+.pasub__table { width: 100%; border-collapse: collapse; }
+.pasub__thead-row { border-bottom: 1px solid var(--border-subtle); }
+.pasub__th {
+  padding: 10px 16px; text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  white-space: nowrap;
+}
+.pasub__tr { border-bottom: 1px solid var(--border-subtle); transition: var(--transition-colors); }
+.pasub__tr:last-child { border-bottom: 0; }
+.pasub__tr:hover { background: var(--surface-hover); }
+.pasub__td { padding: 11px 16px; font-size: var(--text-sm); color: var(--text-primary); }
+.pasub__td--secondary { color: var(--text-secondary); }
+.pasub__td--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--text-secondary); }
+.pasub__td-empty { padding: 12px 16px; text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); }
+.pasub__td-es { padding: 0; }
+</style>
diff --git a/frontend/src/views/platform-admin/AdminUsers.vue b/frontend/src/views/platform-admin/AdminUsers.vue
index 4e40975..96d9f0b 100644
--- a/frontend/src/views/platform-admin/AdminUsers.vue
+++ b/frontend/src/views/platform-admin/AdminUsers.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import { useApi } from '@/composables/useApi'
-import { Users, Search, ShieldCheck, ShieldOff, UserX, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import Button from '@/components/ds/core/Button.vue'
+import IconButton from '@/components/ds/core/IconButton.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
 
 const api = useApi()
 
@@ -114,126 +120,155 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
-    <!-- Header -->
-    <div class="flex items-center gap-3">
-      <Users class="w-5 h-5 text-oxide-500" />
-      <div>
-        <h1 class="text-2xl font-bold text-neutral-100">User Management</h1>
-        <p class="text-sm text-neutral-400 mt-0.5">{{ total }} registered users</p>
+  <div class="pau">
+    <!-- Page head -->
+    <div class="pau__head">
+      <div class="pau__head-id">
+        <div class="pau__chip">
+          <Icon name="users" :size="20" :stroke-width="2" />
+        </div>
+        <div>
+          <div class="t-eyebrow">Platform admin</div>
+          <h1 class="pau__title">User management</h1>
+        </div>
       </div>
     </div>
 
     <!-- Search -->
-    <div class="flex items-center gap-4">
-      <div class="relative flex-1 max-w-sm">
-        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Search by email or username..."
-          class="w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-        />
-      </div>
+    <div class="pau__filters">
+      <Input
+        v-model="searchQuery"
+        placeholder="Search by email or username"
+        icon="search"
+        style="flex: 1; max-width: 360px"
+      />
     </div>
 
     <!-- Table -->
-    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
-      <table class="w-full">
+    <Panel :flush-body="true" :subtitle="total + ' registered users'">
+      <table class="pau__table">
         <thead>
-          <tr class="border-b border-neutral-800 text-left">
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Email</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Username</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Super Admin</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Licenses</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Created</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Last Login</th>
-            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider text-right">Actions</th>
+          <tr class="pau__thead-row">
+            <th class="pau__th">Email</th>
+            <th class="pau__th">Username</th>
+            <th class="pau__th">Super admin</th>
+            <th class="pau__th">Licenses</th>
+            <th class="pau__th">Created</th>
+            <th class="pau__th">Last login</th>
+            <th class="pau__th pau__th--right">Actions</th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-neutral-800">
-          <tr v-if="users.length === 0 && !isLoading">
-            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">
-              <template v-if="searchQuery">No users matching "{{ searchQuery }}"</template>
-              <template v-else>No users found.</template>
-            </td>
-          </tr>
+        <tbody>
           <tr v-if="isLoading">
-            <td colspan="7" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading users...</td>
+            <td colspan="7" class="pau__td-empty">Loading users...</td>
+          </tr>
+          <tr v-else-if="users.length === 0">
+            <td colspan="7" class="pau__td-es">
+              <EmptyState
+                icon="users"
+                :title="searchQuery ? 'No matching users' : 'No users found'"
+                :description="searchQuery ? 'Try a different search term.' : 'Registered users will appear here.'"
+              />
+            </td>
           </tr>
           <tr
             v-for="user in users"
             :key="user.id"
-            class="hover:bg-neutral-800/50 transition-colors"
-            :class="{ 'opacity-50': false }"
+            class="pau__tr"
+            :class="{ 'pau__tr--disabled': false }"
           >
-            <td class="px-4 py-3 text-sm text-neutral-100">{{ user.email }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ user.username }}</td>
-            <td class="px-4 py-3">
-              <span
-                v-if="user.is_super_admin"
-                class="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-0.5 rounded-full bg-oxide-500/10 text-oxide-400"
-              >
-                <ShieldCheck class="w-3 h-3" />
-                Super Admin
-              </span>
-              <span v-else class="text-xs text-neutral-600">&mdash;</span>
+            <td class="pau__td">{{ user.email }}</td>
+            <td class="pau__td pau__td--secondary">{{ user.username }}</td>
+            <td class="pau__td">
+              <Badge v-if="user.is_super_admin" tone="accent" icon="shield">Super admin</Badge>
+              <span v-else class="pau__empty-cell">—</span>
             </td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ user.license_count }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatDate(user.created_at) }}</td>
-            <td class="px-4 py-3 text-sm text-neutral-400">{{ formatLastLogin(user.last_login_at) }}</td>
-            <td class="px-4 py-3 text-right">
-              <div class="flex items-center justify-end gap-1">
-                <button
+            <td class="pau__td pau__td--mono">{{ user.license_count }}</td>
+            <td class="pau__td pau__td--secondary">{{ formatDate(user.created_at) }}</td>
+            <td class="pau__td pau__td--secondary">{{ formatLastLogin(user.last_login_at) }}</td>
+            <td class="pau__td pau__td--actions">
+              <div class="pau__actions">
+                <IconButton
+                  :icon="user.is_super_admin ? 'shield' : 'shield'"
+                  :variant="user.is_super_admin ? 'accent' : 'ghost'"
+                  size="sm"
+                  :label="user.is_super_admin ? 'Remove super admin' : 'Grant super admin'"
+                  :disabled="false"
                   @click="toggleSuperAdmin(user)"
+                />
+                <IconButton
+                  icon="ban"
+                  variant="ghost"
+                  size="sm"
+                  label="Disable account"
                   :disabled="false"
-                  class="p-1.5 rounded transition-colors"
-                  :class="user.is_super_admin
-                    ? 'text-oxide-400 hover:text-oxide-300 hover:bg-oxide-500/10'
-                    : 'text-neutral-500 hover:text-neutral-300 hover:bg-neutral-700'"
-                  :title="user.is_super_admin ? 'Remove Super Admin' : 'Grant Super Admin'"
-                >
-                  <ShieldCheck v-if="!user.is_super_admin" class="w-4 h-4" />
-                  <ShieldOff v-else class="w-4 h-4" />
-                </button>
-                <button
                   @click="disableAccount(user)"
-                  :disabled="false"
-                  class="p-1.5 text-neutral-500 hover:text-red-400 hover:bg-red-500/10 disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors"
-                  title="Disable Account"
-                >
-                  <UserX class="w-4 h-4" />
-                </button>
+                />
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-    </div>
+    </Panel>
 
     <!-- Pagination -->
-    <div class="flex items-center justify-between">
-      <p class="text-sm text-neutral-500">
-        Page {{ page }} of {{ totalPages }}
-      </p>
-      <div class="flex items-center gap-2">
-        <button
-          @click="prevPage"
-          :disabled="page <= 1"
-          class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
-        >
-          <ChevronLeft class="w-4 h-4" />
-          Prev
-        </button>
-        <button
-          @click="nextPage"
-          :disabled="page >= totalPages"
-          class="flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 disabled:opacity-40 disabled:cursor-not-allowed rounded-lg transition-colors"
-        >
-          Next
-          <ChevronRight class="w-4 h-4" />
-        </button>
+    <div class="pau__pager">
+      <span class="pau__pager-info">Page {{ page }} of {{ totalPages }}</span>
+      <div class="pau__pager-btns">
+        <Button variant="secondary" size="sm" icon="chevron-left" :disabled="page <= 1" @click="prevPage">Prev</Button>
+        <Button variant="secondary" size="sm" icon-right="chevron-right" :disabled="page >= totalPages" @click="nextPage">Next</Button>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.pau { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+
+/* Page head */
+.pau__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.pau__head-id { display: flex; align-items: center; gap: 12px; }
+.pau__chip {
+  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.pau__title {
+  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
+  color: var(--text-primary); margin-top: 3px;
+}
+
+/* Filters */
+.pau__filters { display: flex; align-items: center; gap: 10px; }
+
+/* Table */
+.pau__table { width: 100%; border-collapse: collapse; }
+.pau__thead-row { border-bottom: 1px solid var(--border-subtle); }
+.pau__th {
+  padding: 10px 16px; text-align: left;
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary);
+  text-transform: uppercase; letter-spacing: var(--tracking-wider);
+  white-space: nowrap;
+}
+.pau__th--right { text-align: right; }
+.pau__tr { border-bottom: 1px solid var(--border-subtle); transition: var(--transition-colors); }
+.pau__tr:last-child { border-bottom: 0; }
+.pau__tr:hover { background: var(--surface-hover); }
+.pau__td { padding: 11px 16px; font-size: var(--text-sm); color: var(--text-primary); }
+.pau__td--secondary { color: var(--text-secondary); }
+.pau__td--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--text-secondary); }
+.pau__td--actions { text-align: right; }
+.pau__td-empty { padding: 12px 16px; text-align: center; font-size: var(--text-sm); color: var(--text-tertiary); }
+.pau__td-es { padding: 0; }
+
+.pau__empty-cell { font-size: var(--text-sm); color: var(--text-muted); }
+
+/* Actions */
+.pau__actions { display: inline-flex; align-items: center; gap: 2px; }
+
+/* Pagination */
+.pau__pager { display: flex; align-items: center; justify-content: space-between; }
+.pau__pager-info { font-size: var(--text-sm); color: var(--text-tertiary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.pau__pager-btns { display: flex; align-items: center; gap: 8px; }
+</style>
diff --git a/frontend/src/views/public/ServerInfoView.vue b/frontend/src/views/public/ServerInfoView.vue
index 5de6712..efb94c7 100644
--- a/frontend/src/views/public/ServerInfoView.vue
+++ b/frontend/src/views/public/ServerInfoView.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { Server, Users, Calendar, MessageCircle, Loader2, ExternalLink } from 'lucide-vue-next'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Logo from '@/components/ds/brand/Logo.vue'
 
 interface ServerInfo {
   server_name: string
@@ -51,99 +58,225 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950">
-    <!-- Loading State -->
-    <div v-if="isLoading" class="flex items-center justify-center min-h-screen">
-      <Loader2 class="w-8 h-8 text-oxide-500 animate-spin" />
+  <div class="si-page">
+    <!-- Loading -->
+    <div v-if="isLoading" class="si-state">
+      <Icon name="loader" :size="28" class="si-spin" />
     </div>
 
-    <!-- Error State -->
-    <div v-else-if="error" class="flex items-center justify-center min-h-screen p-6">
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 max-w-md text-center">
-        <Server class="w-12 h-12 text-neutral-600 mx-auto mb-4" />
-        <h1 class="text-xl font-bold text-neutral-100 mb-2">Server Not Found</h1>
-        <p class="text-sm text-neutral-400">{{ error }}</p>
-      </div>
+    <!-- Error -->
+    <div v-else-if="error" class="si-state">
+      <EmptyState
+        icon="server"
+        title="Server not found"
+        :description="error"
+      />
     </div>
 
-    <!-- Server Info -->
-    <div v-else-if="serverInfo" class="max-w-4xl mx-auto p-6 space-y-6">
-      <!-- Header Image -->
-      <div v-if="serverInfo.header_image" class="rounded-lg overflow-hidden">
-        <img :src="serverInfo.header_image" :alt="serverInfo.server_name" class="w-full h-64 object-cover" />
-      </div>
+    <!-- Content -->
+    <template v-else-if="serverInfo">
+      <!-- Sticky nav bar -->
+      <header class="si-bar">
+        <div class="si-bar__inner">
+          <Logo :size="22" :wordmark="true" />
+        </div>
+      </header>
 
-      <!-- Server Name & Stats -->
-      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
-        <div class="flex items-start justify-between mb-4">
-          <div>
-            <h1 class="text-3xl font-bold text-neutral-100 mb-2">{{ serverInfo.server_name }}</h1>
-            <div class="flex items-center gap-2 text-neutral-400">
-              <Users class="w-4 h-4" />
-              <span class="text-sm">{{ serverInfo.player_count }}/{{ serverInfo.max_players }} players online</span>
+      <main class="si-main">
+        <!-- Hero image -->
+        <div v-if="serverInfo.header_image" class="si-hero">
+          <img
+            :src="serverInfo.header_image"
+            :alt="serverInfo.server_name"
+            class="si-hero__img"
+          />
+        </div>
+
+        <!-- Identity + connect -->
+        <Panel>
+          <div class="si-identity">
+            <div class="si-identity__left">
+              <h1 class="si-title">{{ serverInfo.server_name }}</h1>
+              <p v-if="serverInfo.description" class="si-desc">
+                {{ serverInfo.description }}
+              </p>
             </div>
+            <Button icon="external-link" size="md" @click="copyConnectUrl">
+              Connect
+            </Button>
           </div>
-          <button
-            @click="copyConnectUrl"
-            class="flex items-center gap-2 px-4 py-2 bg-oxide-500 hover:bg-oxide-600 text-white font-medium rounded-lg transition-colors"
-          >
-            <ExternalLink class="w-4 h-4" />
-            Connect
-          </button>
+        </Panel>
+
+        <!-- KPIs -->
+        <div class="si-kpis">
+          <StatCard
+            icon="users"
+            label="Players online"
+            :value="String(serverInfo.player_count)"
+            :unit="'/' + serverInfo.max_players"
+          />
+          <StatCard
+            v-if="serverInfo.wipe_schedule"
+            icon="calendar"
+            label="Wipe schedule"
+            :value="serverInfo.wipe_schedule"
+          />
         </div>
 
-        <p v-if="serverInfo.description" class="text-neutral-300 leading-relaxed">
-          {{ serverInfo.description }}
-        </p>
-      </div>
+        <!-- MOTD -->
+        <Panel v-if="serverInfo.motd" title="Message of the day">
+          <p class="si-motd">{{ serverInfo.motd }}</p>
+        </Panel>
 
-      <!-- MOTD -->
-      <div v-if="serverInfo.motd" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
-        <h2 class="text-lg font-bold text-neutral-100 mb-3">Message of the Day</h2>
-        <p class="text-neutral-300 whitespace-pre-line">{{ serverInfo.motd }}</p>
-      </div>
-
-      <!-- Wipe Schedule -->
-      <div v-if="serverInfo.wipe_schedule" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
-        <div class="flex items-center gap-2 mb-3">
-          <Calendar class="w-5 h-5 text-oxide-500" />
-          <h2 class="text-lg font-bold text-neutral-100">Wipe Schedule</h2>
-        </div>
-        <p class="text-neutral-300">{{ serverInfo.wipe_schedule }}</p>
-      </div>
-
-      <!-- Mods -->
-      <div v-if="serverInfo.mods.length > 0" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
-        <h2 class="text-lg font-bold text-neutral-100 mb-3">Active Mods</h2>
-        <div class="flex flex-wrap gap-2">
-          <span
-            v-for="mod in serverInfo.mods"
-            :key="mod"
-            class="px-3 py-1 bg-neutral-800 border border-neutral-700 rounded-full text-sm text-neutral-300"
-          >
-            {{ mod }}
-          </span>
-        </div>
-      </div>
-
-      <!-- Discord -->
-      <div v-if="serverInfo.discord_invite" class="bg-neutral-900 border border-neutral-800 rounded-lg p-6">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <MessageCircle class="w-5 h-5 text-oxide-500" />
-            <h2 class="text-lg font-bold text-neutral-100">Join our Discord</h2>
+        <!-- Active mods -->
+        <Panel v-if="serverInfo.mods.length > 0" title="Active mods">
+          <div class="si-mods">
+            <Badge
+              v-for="mod in serverInfo.mods"
+              :key="mod"
+              tone="neutral"
+              size="lg"
+            >{{ mod }}</Badge>
           </div>
-          <a
-            :href="serverInfo.discord_invite"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center gap-2 px-4 py-2 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 font-medium rounded-lg transition-colors"
-          >
-            <ExternalLink class="w-4 h-4" />
-            Join
-          </a>
-        </div>
-      </div>
-    </div>
+        </Panel>
+
+        <!-- Discord -->
+        <Panel v-if="serverInfo.discord_invite" title="Community">
+          <Alert tone="info" title="Join our Discord">
+            <template #actions>
+              <a
+                :href="serverInfo.discord_invite"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button size="sm" variant="secondary" icon="external-link">Join Discord</Button>
+              </a>
+            </template>
+          </Alert>
+        </Panel>
+      </main>
+    </template>
   </div>
 </template>
+
+<style scoped>
+.si-page {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+}
+
+/* Loading / error centering */
+.si-state {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Spinner */
+.si-spin {
+  color: var(--accent);
+  animation: si-rotate 0.7s linear infinite;
+}
+
+@keyframes si-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .si-spin { animation: none; }
+}
+
+/* Sticky brand bar */
+.si-bar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--surface-base);
+  box-shadow: 0 1px 0 var(--border-subtle);
+}
+
+.si-bar__inner {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: var(--space-4) var(--space-6);
+  display: flex;
+  align-items: center;
+}
+
+/* Main content */
+.si-main {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* Hero image */
+.si-hero {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.si-hero__img {
+  width: 100%;
+  height: 240px;
+  object-fit: cover;
+  display: block;
+}
+
+/* Identity block inside panel */
+.si-identity {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.si-identity__left {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.si-title {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  line-height: 1.1;
+}
+
+.si-desc {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  max-width: 560px;
+}
+
+/* KPI row */
+.si-kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-3);
+}
+
+/* MOTD */
+.si-motd {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: 1.65;
+  white-space: pre-line;
+}
+
+/* Mods */
+.si-mods {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+</style>
diff --git a/frontend/src/views/public/StatusPageView.vue b/frontend/src/views/public/StatusPageView.vue
index cb93612..fbcee05 100644
--- a/frontend/src/views/public/StatusPageView.vue
+++ b/frontend/src/views/public/StatusPageView.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue'
-import { Server, Users, Activity, TrendingUp, Search } from 'lucide-vue-next'
 import { useApi } from '@/composables/useApi'
 import { safeFixed } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import StatCard from '@/components/ds/data/StatCard.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import StatusDot from '@/components/ds/core/StatusDot.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Logo from '@/components/ds/brand/Logo.vue'
 
 interface ServerStatus {
   server_name: string
@@ -72,32 +80,16 @@ async function fetchStatus() {
   }
 }
 
-function getStatusColor(status: string) {
-  switch (status) {
-    case 'online':
-      return 'bg-green-500'
-    case 'degraded':
-      return 'bg-yellow-500'
-    default:
-      return 'bg-red-500'
-  }
+function getStatusTone(status: string): 'online' | 'offline' | 'warn' {
+  if (status === 'online') return 'online'
+  if (status === 'degraded') return 'warn'
+  return 'offline'
 }
 
-function getStatusText(status: string) {
-  switch (status) {
-    case 'online':
-      return 'Online'
-    case 'degraded':
-      return 'Degraded'
-    default:
-      return 'Offline'
-  }
-}
-
-function getUptimeBadgeColor(uptime: number) {
-  if (uptime >= 99) return 'bg-green-500/10 text-green-400'
-  if (uptime >= 95) return 'bg-yellow-500/10 text-yellow-400'
-  return 'bg-red-500/10 text-red-400'
+function getUptimeTone(uptime: number): 'online' | 'warn' | 'offline' {
+  if (uptime >= 99) return 'online'
+  if (uptime >= 95) return 'warn'
+  return 'offline'
 }
 
 function formatTimeUntil(isoDate: string | null): string {
@@ -135,207 +127,376 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-neutral-950">
-    <!-- Header -->
-    <header class="bg-neutral-900 border-b border-neutral-800">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-          <div>
-            <h1 class="text-3xl font-bold text-neutral-100 flex items-center gap-3">
-              <Activity class="w-8 h-8 text-oxide-500" />
-              Corrosion Status
-            </h1>
-            <p class="text-neutral-400 mt-1">
-              Real-time status for all Corrosion-powered Rust servers
-            </p>
-          </div>
-
-          <!-- Search -->
-          <div class="relative w-full md:w-80">
-            <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-            <input
-              v-model="searchQuery"
-              type="text"
-              placeholder="Search servers..."
-              class="w-full pl-10 pr-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
+  <div class="sp-page">
+    <!-- Brand bar -->
+    <header class="sp-bar">
+      <div class="sp-bar__inner">
+        <div class="sp-bar__brand">
+          <Logo :size="22" :wordmark="true" />
+          <div class="sp-bar__sub">Real-time status for all Corrosion-powered servers</div>
         </div>
-
-        <!-- Platform Health Stats -->
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6" v-if="!loading">
-          <div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
-            <div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
-              <Server class="w-3.5 h-3.5" />
-              Total Servers
-            </div>
-            <p class="text-2xl font-bold text-neutral-100">
-              {{ platformHealth.total_servers }}
-            </p>
-          </div>
-
-          <div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
-            <div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
-              <Activity class="w-3.5 h-3.5" />
-              Online Now
-            </div>
-            <p class="text-2xl font-bold text-green-400">
-              {{ platformHealth.online_servers }}
-            </p>
-          </div>
-
-          <div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
-            <div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
-              <Users class="w-3.5 h-3.5" />
-              Total Players
-            </div>
-            <p class="text-2xl font-bold text-oxide-400">
-              {{ platformHealth.total_players }}
-            </p>
-          </div>
-
-          <div class="bg-neutral-800 rounded-lg p-4 border border-neutral-700">
-            <div class="flex items-center gap-2 text-neutral-400 text-xs mb-1">
-              <TrendingUp class="w-3.5 h-3.5" />
-              Platform Uptime
-            </div>
-            <p class="text-2xl font-bold text-neutral-100">
-              {{ safeFixed(platformHealth.uptime_percent, 1) }}%
-            </p>
-          </div>
+        <div class="sp-bar__search">
+          <Input
+            v-model="searchQuery"
+            icon="search"
+            placeholder="Search servers..."
+            size="sm"
+          />
         </div>
       </div>
     </header>
 
-    <!-- Server Grid -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <!-- Loading State -->
-      <div v-if="loading" class="text-center py-12">
-        <div class="inline-block w-8 h-8 border-4 border-oxide-500/20 border-t-oxide-500 rounded-full animate-spin"></div>
-        <p class="text-neutral-400 mt-4">Loading server status...</p>
+    <!-- Platform KPIs -->
+    <div v-if="!loading" class="sp-kpis">
+      <StatCard icon="server"       label="Total servers"   :value="String(platformHealth.total_servers)" />
+      <StatCard icon="activity"     label="Online now"       :value="String(platformHealth.online_servers)" />
+      <StatCard icon="users"        label="Total players"    :value="String(platformHealth.total_players)" />
+      <StatCard icon="trending-up"  label="Platform uptime"  :value="safeFixed(platformHealth.uptime_percent, 1)" unit="%" />
+    </div>
+
+    <!-- Body -->
+    <main class="sp-main">
+      <!-- Loading -->
+      <div v-if="loading" class="sp-state">
+        <Icon name="loader" :size="28" class="sp-spin" />
+        <span class="sp-state__label">Loading server status...</span>
       </div>
 
-      <!-- Error State -->
-      <div v-else-if="error" class="bg-red-500/10 border border-red-500/20 rounded-lg p-6 text-center">
-        <p class="text-red-400">{{ error }}</p>
-      </div>
+      <!-- Error -->
+      <Alert v-else-if="error" tone="danger" :title="error ?? ''" />
 
-      <!-- Empty State -->
-      <div v-else-if="filteredServers.length === 0" class="text-center py-12">
-        <Server class="w-16 h-16 text-neutral-600 mx-auto mb-4" />
-        <p class="text-neutral-400 text-lg">
-          {{ searchQuery ? 'No servers match your search' : 'No servers available yet' }}
-        </p>
-      </div>
+      <!-- Empty -->
+      <EmptyState
+        v-else-if="filteredServers.length === 0"
+        icon="server"
+        :title="searchQuery ? 'No servers match your search' : 'No servers available yet'"
+      />
 
-      <!-- Server Cards -->
-      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div
+      <!-- Server grid -->
+      <div v-else class="sp-grid">
+        <Panel
           v-for="server in filteredServers"
           :key="server.subdomain"
-          class="bg-neutral-900 border border-neutral-800 rounded-lg p-5 hover:border-oxide-500/50 transition-colors"
+          class="sp-card"
         >
-          <!-- Server Header -->
-          <div class="flex items-start justify-between mb-4">
-            <div class="flex-1 min-w-0">
-              <h3 class="text-lg font-semibold text-neutral-100 truncate">
-                {{ server.server_name }}
-              </h3>
-              <a
-                :href="`https://${server.subdomain}.corrosionmgmt.com`"
-                target="_blank"
-                class="text-xs text-oxide-400 hover:text-oxide-300 truncate block"
-              >
-                {{ server.subdomain }}.corrosionmgmt.com
-              </a>
+          <div class="sp-card__body">
+            <!-- Server name + link -->
+            <div class="sp-card__head">
+              <div class="sp-card__name-block">
+                <h3 class="sp-card__name">{{ server.server_name }}</h3>
+                <a
+                  :href="`https://${server.subdomain}.corrosionmgmt.com`"
+                  target="_blank"
+                  class="sp-card__link"
+                >
+                  <Icon name="external-link" :size="11" />
+                  {{ server.subdomain }}.corrosionmgmt.com
+                </a>
+              </div>
+              <StatusDot :tone="getStatusTone(server.status)" :size="10" :pulse="server.status === 'online'" />
             </div>
 
-            <!-- Status Indicator -->
-            <div class="flex items-center gap-2 ml-3">
-              <div
-                :class="getStatusColor(server.status)"
-                class="w-2.5 h-2.5 rounded-full animate-pulse"
-              ></div>
-              <span class="text-xs font-medium text-neutral-300">
-                {{ getStatusText(server.status) }}
-              </span>
+            <!-- Description -->
+            <p v-if="server.description" class="sp-card__desc">{{ server.description }}</p>
+
+            <!-- Player bar -->
+            <div class="sp-players">
+              <div class="sp-players__label">
+                <Icon name="users" :size="12" />
+                <span>{{ server.player_count }} / {{ server.max_players }} players</span>
+              </div>
+              <div class="sp-players__track">
+                <div
+                  class="sp-players__fill"
+                  :style="{ width: `${(server.player_count / server.max_players) * 100}%` }"
+                />
+              </div>
+            </div>
+
+            <!-- Map -->
+            <div v-if="server.map_name" class="sp-card__meta">
+              <Icon name="map" :size="12" />
+              <span>{{ server.map_name }}</span>
+            </div>
+
+            <!-- Wipe schedule -->
+            <div v-if="server.wipe_schedule" class="sp-wipe">
+              <div class="sp-wipe__label">Wipe schedule</div>
+              <div class="sp-wipe__val">{{ server.wipe_schedule }}</div>
+              <div v-if="server.next_wipe" class="sp-wipe__next">
+                Next: {{ formatTimeUntil(server.next_wipe) }}
+              </div>
+            </div>
+
+            <!-- Uptime badges -->
+            <div class="sp-uptime">
+              <Badge :tone="getUptimeTone(server.uptime_24h_percent)" :mono="true" size="lg">
+                {{ safeFixed(server.uptime_24h_percent, 1) }}% <span class="sp-uptime__period">24h</span>
+              </Badge>
+              <Badge :tone="getUptimeTone(server.uptime_7d_percent)" :mono="true" size="lg">
+                {{ safeFixed(server.uptime_7d_percent, 1) }}% <span class="sp-uptime__period">7d</span>
+              </Badge>
+              <Badge :tone="getUptimeTone(server.uptime_30d_percent)" :mono="true" size="lg">
+                {{ safeFixed(server.uptime_30d_percent, 1) }}% <span class="sp-uptime__period">30d</span>
+              </Badge>
             </div>
           </div>
-
-          <!-- Description -->
-          <p v-if="server.description" class="text-sm text-neutral-400 mb-4 line-clamp-2">
-            {{ server.description }}
-          </p>
-
-          <!-- Player Count -->
-          <div class="flex items-center gap-2 mb-4">
-            <Users class="w-4 h-4 text-neutral-500" />
-            <span class="text-sm text-neutral-300">
-              {{ server.player_count }} / {{ server.max_players }} players
-            </span>
-            <div class="flex-1 bg-neutral-800 rounded-full h-1.5 overflow-hidden">
-              <div
-                class="h-full bg-oxide-500 transition-all duration-300"
-                :style="{ width: `${(server.player_count / server.max_players) * 100}%` }"
-              ></div>
-            </div>
-          </div>
-
-          <!-- Map Info -->
-          <div v-if="server.map_name" class="text-xs text-neutral-500 mb-3">
-            Map: {{ server.map_name }}
-          </div>
-
-          <!-- Wipe Schedule -->
-          <div v-if="server.wipe_schedule" class="bg-neutral-800 rounded-lg p-3 mb-3">
-            <div class="text-xs text-neutral-500 mb-1">Wipe Schedule</div>
-            <div class="text-sm text-neutral-300">{{ server.wipe_schedule }}</div>
-            <div v-if="server.next_wipe" class="text-xs text-oxide-400 mt-1">
-              Next wipe: {{ formatTimeUntil(server.next_wipe) }}
-            </div>
-          </div>
-
-          <!-- Uptime Badges -->
-          <div class="flex gap-2">
-            <div :class="getUptimeBadgeColor(server.uptime_24h_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
-              <div class="text-xs font-medium">{{ safeFixed(server.uptime_24h_percent, 1) }}%</div>
-              <div class="text-[10px] opacity-75">24h</div>
-            </div>
-            <div :class="getUptimeBadgeColor(server.uptime_7d_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
-              <div class="text-xs font-medium">{{ safeFixed(server.uptime_7d_percent, 1) }}%</div>
-              <div class="text-[10px] opacity-75">7d</div>
-            </div>
-            <div :class="getUptimeBadgeColor(server.uptime_30d_percent)" class="flex-1 rounded-lg px-2 py-1.5 text-center">
-              <div class="text-xs font-medium">{{ safeFixed(server.uptime_30d_percent, 1) }}%</div>
-              <div class="text-[10px] opacity-75">30d</div>
-            </div>
-          </div>
-        </div>
+        </Panel>
       </div>
 
-      <!-- Auto-refresh indicator -->
-      <div class="text-center mt-8 text-xs text-neutral-600">
-        Auto-refreshing every 10 seconds
-      </div>
+      <!-- Auto-refresh note -->
+      <div class="sp-refresh-note">Auto-refreshing every 10 seconds</div>
     </main>
-
-    <!-- Footer -->
-    <footer class="bg-neutral-900 border-t border-neutral-800 mt-16">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
-        <p class="text-neutral-400 text-sm mb-2">
-          Powered by
-          <a
-            href="https://panel.corrosionmgmt.com"
-            class="text-oxide-400 hover:text-oxide-300 font-medium"
-            target="_blank"
-          >
-            Corrosion
-          </a>
-        </p>
-        <p class="text-neutral-600 text-xs">
-          The complete server management platform for Rust game servers
-        </p>
-      </div>
-    </footer>
   </div>
 </template>
+
+<style scoped>
+.sp-page {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Brand bar */
+.sp-bar {
+  background: var(--surface-base);
+  box-shadow: 0 1px 0 var(--border-subtle);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.sp-bar__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--space-5) var(--space-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5);
+  flex-wrap: wrap;
+}
+
+.sp-bar__brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.sp-bar__sub {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.sp-bar__search {
+  width: 260px;
+  flex: none;
+}
+
+/* Platform KPIs */
+.sp-kpis {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  padding: var(--space-5) var(--space-6) 0;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-3);
+}
+
+/* Main content area */
+.sp-main {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  padding: var(--space-5) var(--space-6) var(--space-8);
+  flex: 1;
+}
+
+/* Loading state */
+.sp-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-16) 0;
+}
+
+.sp-spin {
+  color: var(--accent);
+  animation: sp-rotate 0.7s linear infinite;
+}
+
+@keyframes sp-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sp-spin { animation: none; }
+}
+
+.sp-state__label {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+/* Server grid */
+.sp-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+  margin-top: var(--space-5);
+}
+
+/* Server card body */
+.sp-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.sp-card__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.sp-card__name-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.sp-card__name {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sp-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-text);
+  transition: color var(--dur-fast) var(--ease-standard);
+}
+
+.sp-card__link:hover {
+  color: var(--accent);
+}
+
+.sp-card__desc {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.sp-card__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* Player progress bar */
+.sp-players {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.sp-players__label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+
+.sp-players__track {
+  height: 4px;
+  background: var(--surface-raised-2);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+
+.sp-players__fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: var(--radius-pill);
+  transition: width 0.4s var(--ease-standard);
+}
+
+/* Wipe schedule block */
+.sp-wipe {
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-2-5) var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sp-wipe__label {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.sp-wipe__val {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+
+.sp-wipe__next {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-text);
+  margin-top: 2px;
+}
+
+/* Uptime badges row */
+.sp-uptime {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.sp-uptime__period {
+  opacity: 0.65;
+  font-weight: 400;
+  margin-left: 4px;
+}
+
+/* Auto-refresh note */
+.sp-refresh-note {
+  text-align: center;
+  margin-top: var(--space-8);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* Responsive */
+@media (max-width: 1100px) {
+  .sp-grid { grid-template-columns: repeat(2, 1fr); }
+  .sp-kpis { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 640px) {
+  .sp-grid { grid-template-columns: 1fr; }
+  .sp-kpis { grid-template-columns: repeat(2, 1fr); }
+  .sp-bar__search { width: 100%; }
+}
+</style>
diff --git a/frontend/src/views/public/StoreView.vue b/frontend/src/views/public/StoreView.vue
index 8988a67..465b644 100644
--- a/frontend/src/views/public/StoreView.vue
+++ b/frontend/src/views/public/StoreView.vue
@@ -2,8 +2,16 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import type { PublicStoreInfo, PublicStoreItem, StorePurchaseRequest, StorePurchaseResponse } from '@/types'
-import { ShoppingCart, Package, Filter, X, AlertCircle, ExternalLink, Check } from 'lucide-vue-next'
 import { safeCurrency } from '@/utils/formatters'
+import Panel from '@/components/ds/data/Panel.vue'
+import Badge from '@/components/ds/core/Badge.vue'
+import Button from '@/components/ds/core/Button.vue'
+import Icon from '@/components/ds/core/Icon.vue'
+import Alert from '@/components/ds/feedback/Alert.vue'
+import EmptyState from '@/components/ds/feedback/EmptyState.vue'
+import Input from '@/components/ds/forms/Input.vue'
+import Select from '@/components/ds/forms/Select.vue'
+import Logo from '@/components/ds/brand/Logo.vue'
 
 const route = useRoute()
 const subdomain = computed(() => route.params.subdomain as string)
@@ -29,7 +37,7 @@ const categories = computed(() => {
   })
   return Array.from(cats).map(name => ({
     value: name,
-    label: name === 'all' ? 'All Items' : name
+    label: name === 'all' ? 'All items' : name
   }))
 })
 
@@ -142,14 +150,14 @@ function formatPrice(price: number): string {
   return safeCurrency(price, '$')
 }
 
-function itemTypeBadgeClass(itemType: string): string {
-  const colors: Record<string, string> = {
-    kit: 'bg-blue-500/15 text-blue-400',
-    rank: 'bg-purple-500/15 text-purple-400',
-    currency: 'bg-green-500/15 text-green-400',
-    custom_command: 'bg-orange-500/15 text-orange-400',
+function itemTypeTone(itemType: string): 'info' | 'wiping' | 'online' | 'warn' | 'neutral' {
+  const tones: Record<string, 'info' | 'wiping' | 'online' | 'warn' | 'neutral'> = {
+    kit: 'info',
+    rank: 'wiping',
+    currency: 'online',
+    custom_command: 'warn',
   }
-  return colors[itemType] || 'bg-neutral-700/50 text-neutral-400'
+  return tones[itemType] ?? 'neutral'
 }
 
 onMounted(() => {
@@ -158,264 +166,631 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-gradient-to-b from-neutral-950 to-neutral-900">
-    <!-- Header -->
-    <div class="bg-neutral-950/80 backdrop-blur-sm border-b border-neutral-800 sticky top-0 z-10">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="flex items-center gap-3 mb-2">
-          <ShoppingCart class="w-6 h-6 text-oxide-500" />
-          <h1 class="text-3xl font-bold text-neutral-100">
-            {{ storeInfo?.store_name || 'Server Store' }}
-          </h1>
+  <div class="sv-page">
+    <!-- Sticky store header -->
+    <header class="sv-bar">
+      <div class="sv-bar__inner">
+        <div class="sv-bar__brand">
+          <Logo :size="20" :wordmark="true" />
+          <div class="sv-bar__divider" />
+          <div class="sv-bar__store">
+            <Icon name="shopping-cart" :size="16" />
+            <span class="sv-bar__name">{{ storeInfo?.store_name ?? 'Server store' }}</span>
+          </div>
         </div>
-        <p v-if="storeInfo?.description" class="text-neutral-400 max-w-3xl">
-          {{ storeInfo.description }}
-        </p>
       </div>
+    </header>
+
+    <!-- Store description -->
+    <div v-if="storeInfo?.description" class="sv-desc-wrap">
+      <p class="sv-desc">{{ storeInfo.description }}</p>
     </div>
 
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <!-- Loading state -->
-      <div v-if="isLoading" class="flex items-center justify-center py-20">
-        <div class="text-center">
-          <div class="inline-block w-8 h-8 border-4 border-oxide-500 border-t-transparent rounded-full animate-spin mb-4"></div>
-          <p class="text-neutral-400">Loading store...</p>
-        </div>
+    <div class="sv-body">
+      <!-- Loading -->
+      <div v-if="isLoading" class="sv-state">
+        <Icon name="loader" :size="28" class="sv-spin" />
+        <span class="sv-state__label">Loading store...</span>
       </div>
 
-      <!-- Error state -->
-      <div v-else-if="storeError" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
-        <AlertCircle class="w-16 h-16 text-red-400 mx-auto mb-4" />
-        <h2 class="text-2xl font-bold text-neutral-100 mb-2">Store Unavailable</h2>
-        <p class="text-neutral-400 mb-6">{{ storeError }}</p>
-        <button
-          @click="loadStore"
-          class="px-6 py-3 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg transition-colors"
+      <!-- Error -->
+      <div v-else-if="storeError" class="sv-error">
+        <EmptyState
+          icon="shopping-bag"
+          title="Store unavailable"
+          :description="storeError"
         >
-          Retry
-        </button>
+          <template #action>
+            <Button icon="refresh-cw" variant="secondary" @click="loadStore">Retry</Button>
+          </template>
+        </EmptyState>
       </div>
 
       <!-- Store content -->
-      <div v-else-if="storeInfo">
+      <template v-else-if="storeInfo">
         <!-- Category filter -->
-        <div v-if="categories.length > 1" class="mb-6 flex items-center gap-3">
-          <Filter class="w-4 h-4 text-neutral-500" />
-          <select
+        <div v-if="categories.length > 1" class="sv-filter">
+          <Icon name="list" :size="14" class="sv-filter__icon" />
+          <Select
             v-model="selectedCategory"
-            class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-          >
-            <option v-for="cat in categories" :key="cat.value" :value="cat.value">
-              {{ cat.label }}
-            </option>
-          </select>
+            size="sm"
+            :options="categories"
+          />
         </div>
 
         <!-- Items grid -->
-        <div v-if="filteredItems.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div v-if="filteredItems.length > 0" class="sv-grid">
           <div
             v-for="item in filteredItems"
             :key="item.id"
-            class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden hover:border-oxide-500/50 transition-all group shadow-lg hover:shadow-oxide-500/10"
+            class="sv-item"
           >
             <!-- Item image -->
-            <div class="relative h-48 bg-gradient-to-br from-neutral-800 to-neutral-900 overflow-hidden">
+            <div class="sv-item__img-wrap">
               <img
                 v-if="item.image_url"
                 :src="item.image_url"
                 :alt="item.name"
-                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                class="sv-item__img"
               />
-              <div v-else class="w-full h-full flex items-center justify-center">
-                <Package class="w-16 h-16 text-neutral-700" />
+              <div v-else class="sv-item__img-ph">
+                <Icon name="package" :size="32" :stroke-width="1.5" />
               </div>
-              <div v-if="item.category_name" class="absolute top-3 right-3">
-                <span class="text-xs font-medium px-2.5 py-1 rounded-full bg-neutral-950/80 backdrop-blur-sm text-neutral-300 border border-neutral-700">
-                  {{ item.category_name }}
-                </span>
+              <div v-if="item.category_name" class="sv-item__cat">
+                <Badge tone="neutral">{{ item.category_name }}</Badge>
               </div>
             </div>
 
             <!-- Item details -->
-            <div class="p-5 space-y-4">
-              <div>
-                <div class="flex items-start justify-between gap-2 mb-2">
-                  <h3 class="text-lg font-bold text-neutral-100 group-hover:text-oxide-400 transition-colors">
-                    {{ item.name }}
-                  </h3>
-                  <span class="text-xl font-bold text-oxide-400 shrink-0">
-                    {{ formatPrice(item.price) }}
-                  </span>
-                </div>
-                <p v-if="item.description" class="text-sm text-neutral-400 line-clamp-2 leading-relaxed">
-                  {{ item.description }}
-                </p>
+            <div class="sv-item__body">
+              <div class="sv-item__top">
+                <h3 class="sv-item__name">{{ item.name }}</h3>
+                <span class="sv-item__price">{{ formatPrice(item.price) }}</span>
               </div>
+              <p v-if="item.description" class="sv-item__desc">{{ item.description }}</p>
 
-              <!-- Item type badge -->
-              <div class="flex items-center gap-2">
-                <span class="text-xs font-medium px-2 py-1 rounded" :class="itemTypeBadgeClass(item.item_type)">
+              <!-- Type badge + limit -->
+              <div class="sv-item__meta">
+                <Badge :tone="itemTypeTone(item.item_type)">
                   {{ item.item_type.replace('_', ' ') }}
+                </Badge>
+                <span v-if="item.limit_per_player" class="sv-item__limit">
+                  Limit {{ item.limit_per_player }} per player
                 </span>
               </div>
 
-              <!-- Purchase limit indicator -->
-              <div v-if="item.limit_per_player" class="text-xs text-neutral-500">
-                Limited to {{ item.limit_per_player }} per player
-              </div>
-
-              <!-- Buy button -->
-              <button
+              <Button
+                :block="true"
+                icon="shopping-cart"
                 @click="openPurchaseModal(item)"
-                class="w-full py-3 text-sm font-semibold text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors shadow-lg shadow-oxide-500/20"
-              >
-                Buy Now
-              </button>
+              >Buy now</Button>
             </div>
           </div>
         </div>
 
-        <!-- Empty state -->
-        <div v-else class="bg-neutral-900 border border-neutral-800 rounded-lg p-16 text-center">
-          <Package class="w-16 h-16 text-neutral-600 mx-auto mb-4" />
-          <h3 class="text-xl font-medium text-neutral-300 mb-2">No Items Available</h3>
-          <p class="text-sm text-neutral-500">
-            {{ selectedCategory === 'all' ? 'This store has no items at the moment.' : 'No items in this category.' }}
-          </p>
-        </div>
-      </div>
+        <!-- Empty category -->
+        <EmptyState
+          v-else
+          icon="package"
+          title="No items available"
+          :description="selectedCategory === 'all' ? 'This store has no items at the moment.' : 'No items in this category.'"
+        />
+      </template>
     </div>
 
-    <!-- Purchase Modal -->
+    <!-- Purchase modal -->
     <div
       v-if="showPurchaseModal && selectedItem"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
+      class="sv-modal-scrim"
       @click.self="closePurchaseModal"
     >
-      <div class="bg-neutral-900 border border-neutral-800 rounded-xl max-w-lg w-full shadow-2xl">
-        <!-- Modal Header -->
-        <div class="border-b border-neutral-800 px-6 py-5 flex items-start justify-between">
-          <div class="flex-1">
-            <h2 class="text-2xl font-bold text-neutral-100 mb-1">Complete Purchase</h2>
-            <p class="text-sm text-neutral-400">You'll be redirected to PayPal to complete payment</p>
+      <div class="sv-modal">
+        <!-- Modal header -->
+        <div class="sv-modal__head">
+          <div>
+            <div class="sv-modal__title">Complete purchase</div>
+            <div class="sv-modal__sub">You'll be redirected to PayPal to complete payment</div>
           </div>
           <button
+            class="sv-modal__close"
+            type="button"
+            aria-label="Close"
             @click="closePurchaseModal"
-            class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors"
           >
-            <X class="w-5 h-5" />
+            <Icon name="x" :size="16" />
           </button>
         </div>
 
-        <!-- Modal Body -->
-        <div class="p-6 space-y-5">
+        <!-- Modal body -->
+        <div class="sv-modal__body">
           <!-- Item preview -->
-          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 flex items-start gap-4">
-            <div class="w-20 h-20 bg-neutral-800 rounded-lg overflow-hidden shrink-0">
+          <div class="sv-modal__item">
+            <div class="sv-modal__thumb">
               <img
                 v-if="selectedItem.image_url"
                 :src="selectedItem.image_url"
                 :alt="selectedItem.name"
-                class="w-full h-full object-cover"
+                class="sv-modal__thumb-img"
               />
-              <div v-else class="w-full h-full flex items-center justify-center">
-                <Package class="w-8 h-8 text-neutral-600" />
+              <div v-else class="sv-modal__thumb-ph">
+                <Icon name="package" :size="20" :stroke-width="1.5" />
               </div>
             </div>
-            <div class="flex-1 min-w-0">
-              <h3 class="text-lg font-semibold text-neutral-100 mb-1">{{ selectedItem.name }}</h3>
-              <p v-if="selectedItem.description" class="text-sm text-neutral-400 line-clamp-2 mb-2">
-                {{ selectedItem.description }}
-              </p>
-              <p class="text-2xl font-bold text-oxide-400">{{ formatPrice(selectedItem.price) }}</p>
+            <div class="sv-modal__item-info">
+              <div class="sv-modal__item-name">{{ selectedItem.name }}</div>
+              <p v-if="selectedItem.description" class="sv-modal__item-desc">{{ selectedItem.description }}</p>
+              <div class="sv-modal__item-price">{{ formatPrice(selectedItem.price) }}</div>
             </div>
           </div>
 
-          <!-- Steam ID input -->
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">
-              Steam ID <span class="text-red-400">*</span>
-            </label>
-            <input
-              v-model="steamId"
-              type="text"
-              placeholder="76561198012345678"
-              maxlength="17"
-              class="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-              :class="{ 'border-red-500': purchaseError && !validateSteamId() }"
-            />
-            <p class="text-xs text-neutral-500 mt-1.5">
-              Required for item delivery. Must be your 17-digit Steam ID.
-            </p>
-          </div>
+          <!-- Steam ID -->
+          <Input
+            v-model="steamId"
+            label="Steam ID"
+            :required="true"
+            :mono="true"
+            placeholder="76561198012345678"
+            :error="purchaseError && !validateSteamId() ? 'Must be your 17-digit Steam ID' : undefined"
+            hint="Required for item delivery."
+          />
 
-          <!-- Player name input -->
-          <div>
-            <label class="block text-sm font-medium text-neutral-300 mb-2">
-              Player Name (Optional)
-            </label>
-            <input
-              v-model="playerName"
-              type="text"
-              placeholder="Your in-game name"
-              class="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
-            />
-          </div>
+          <!-- Player name -->
+          <Input
+            v-model="playerName"
+            label="Player name (optional)"
+            placeholder="Your in-game name"
+          />
 
-          <!-- Error message -->
-          <div v-if="purchaseError" class="flex items-start gap-2 bg-red-500/10 border border-red-500/20 rounded-lg p-3">
-            <AlertCircle class="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
-            <p class="text-sm text-red-400">{{ purchaseError }}</p>
-          </div>
+          <!-- Purchase error -->
+          <Alert v-if="purchaseError" tone="danger" :title="purchaseError" />
 
           <!-- Legal disclaimer -->
-          <div class="bg-neutral-800/30 border border-neutral-700 rounded-lg p-4">
-            <p class="text-xs text-neutral-500 leading-relaxed space-y-1.5">
-              <span class="flex items-start gap-1.5">
-                <Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
-                <span>Items will be delivered automatically to your in-game character after payment</span>
-              </span>
-              <span class="flex items-start gap-1.5">
-                <Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
+          <Panel variant="raised">
+            <div class="sv-modal__terms">
+              <div class="sv-modal__term">
+                <Icon name="check" :size="13" class="sv-modal__term-icon" />
+                <span>Items delivered automatically to your character after payment</span>
+              </div>
+              <div class="sv-modal__term">
+                <Icon name="check" :size="13" class="sv-modal__term-icon" />
                 <span>All purchases are final and non-refundable</span>
-              </span>
-              <span class="flex items-start gap-1.5">
-                <Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
+              </div>
+              <div class="sv-modal__term">
+                <Icon name="check" :size="13" class="sv-modal__term-icon" />
                 <span>You must be logged into the server to receive items</span>
-              </span>
-            </p>
-          </div>
+              </div>
+            </div>
+          </Panel>
         </div>
 
-        <!-- Modal Footer -->
-        <div class="border-t border-neutral-800 px-6 py-5 flex items-center justify-between gap-4">
-          <button
-            @click="closePurchaseModal"
+        <!-- Modal footer -->
+        <div class="sv-modal__foot">
+          <Button
+            variant="secondary"
             :disabled="isPurchasing"
-            class="px-6 py-3 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Cancel
-          </button>
-          <button
-            @click="confirmPurchase"
+            @click="closePurchaseModal"
+          >Cancel</Button>
+          <Button
+            icon="external-link"
             :disabled="isPurchasing || !steamId.trim()"
-            class="flex items-center gap-2 px-8 py-3 text-sm font-semibold text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-oxide-500/20"
-          >
-            <ExternalLink v-if="!isPurchasing" class="w-4 h-4" />
-            <span>{{ isPurchasing ? 'Processing...' : 'Proceed to PayPal' }}</span>
-          </button>
+            :loading="isPurchasing"
+            @click="confirmPurchase"
+          >{{ isPurchasing ? 'Processing...' : 'Proceed to PayPal' }}</Button>
         </div>
       </div>
     </div>
-
-    <!-- Footer -->
-    <footer class="mt-16 py-8 border-t border-neutral-800">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex items-center justify-center gap-2 text-neutral-600 text-sm">
-          <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
-          <span>Powered by <span class="text-oxide-500 font-semibold">Corrosion</span></span>
-        </div>
-      </div>
-    </footer>
   </div>
 </template>
+
+<style scoped>
+.sv-page {
+  min-height: 100vh;
+  background: var(--surface-canvas);
+}
+
+/* Store bar */
+.sv-bar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: var(--surface-base);
+  box-shadow: 0 1px 0 var(--border-subtle);
+}
+
+.sv-bar__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--space-4) var(--space-6);
+}
+
+.sv-bar__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.sv-bar__divider {
+  width: 1px;
+  height: 20px;
+  background: var(--border-default);
+  flex: none;
+}
+
+.sv-bar__store {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+}
+
+.sv-bar__name {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Description strip */
+.sv-desc-wrap {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--space-4) var(--space-6) 0;
+}
+
+.sv-desc {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+  line-height: 1.6;
+  max-width: 640px;
+}
+
+/* Body */
+.sv-body {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--space-5) var(--space-6) var(--space-8);
+}
+
+/* Loading state */
+.sv-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-16) 0;
+}
+
+.sv-spin {
+  color: var(--accent);
+  animation: sv-rotate 0.7s linear infinite;
+}
+
+@keyframes sv-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sv-spin { animation: none; }
+}
+
+.sv-state__label {
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+/* Error */
+.sv-error {
+  background: var(--surface-base);
+  box-shadow: var(--ring-default);
+  border-radius: var(--radius-xl);
+}
+
+/* Category filter */
+.sv-filter {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-5);
+}
+
+.sv-filter__icon {
+  color: var(--text-muted);
+  flex: none;
+}
+
+/* Items grid */
+.sv-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: var(--space-5);
+}
+
+/* Item card */
+.sv-item {
+  background: var(--surface-base);
+  box-shadow: var(--ring-default), var(--shadow-sm);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow var(--dur-fast) var(--ease-standard),
+              transform var(--dur-fast) var(--ease-standard);
+}
+
+.sv-item:hover {
+  box-shadow: var(--ring-strong), var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.sv-item__img-wrap {
+  position: relative;
+  height: 180px;
+  background: var(--surface-raised);
+  overflow: hidden;
+  flex: none;
+}
+
+.sv-item__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.3s var(--ease-standard);
+}
+
+.sv-item:hover .sv-item__img {
+  transform: scale(1.04);
+}
+
+.sv-item__img-ph {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.sv-item__cat {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+}
+
+.sv-item__body {
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  flex: 1;
+}
+
+.sv-item__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.sv-item__name {
+  font-size: var(--text-base);
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.3;
+  flex: 1;
+  min-width: 0;
+}
+
+.sv-item__price {
+  font-family: var(--font-mono);
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--accent-text);
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.sv-item__desc {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.sv-item__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.sv-item__limit {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+/* Modal scrim */
+.sv-modal-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--scrim);
+  backdrop-filter: blur(4px);
+  padding: var(--space-4);
+}
+
+/* Modal */
+.sv-modal {
+  background: var(--surface-overlay);
+  box-shadow: var(--shadow-pop);
+  border-radius: var(--radius-xl);
+  max-width: 520px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - var(--space-8));
+  overflow-y: auto;
+}
+
+.sv-modal__head {
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+  flex: none;
+}
+
+.sv-modal__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+}
+
+.sv-modal__sub {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: var(--space-1);
+}
+
+.sv-modal__close {
+  width: 30px;
+  height: 30px;
+  flex: none;
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--dur-fast) var(--ease-standard),
+              color var(--dur-fast) var(--ease-standard);
+}
+
+.sv-modal__close:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.sv-modal__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.sv-modal__body {
+  padding: var(--space-5) var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+/* Item preview in modal */
+.sv-modal__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  background: var(--surface-raised);
+  box-shadow: var(--ring-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+}
+
+.sv-modal__thumb {
+  width: 76px;
+  height: 76px;
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-2);
+  overflow: hidden;
+  flex: none;
+}
+
+.sv-modal__thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.sv-modal__thumb-ph {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.sv-modal__item-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.sv-modal__item-name {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.sv-modal__item-desc {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.sv-modal__item-price {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  color: var(--accent-text);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Terms list */
+.sv-modal__terms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.sv-modal__term {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+}
+
+.sv-modal__term-icon {
+  color: var(--accent-text);
+  flex: none;
+  margin-top: 1px;
+}
+
+/* Modal footer */
+.sv-modal__foot {
+  padding: var(--space-4) var(--space-6);
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  flex: none;
+}
+</style>

From f440fd77511d75991bd43b8d0ca573c777a551e5 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 03:02:29 -0400
Subject: [PATCH 6/7] fix(redesign): load design tokens directly in style.css
 (whole panel rendered unstyled)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The nested ./styles/corrosion.css barrel (8 @import token files) was placed after `@import "tailwindcss"`. Once Tailwind v4 expands in place, those nested @imports no longer precede all statements, so PostCSS DROPPED them (the 8 'should be written before any other statement' warnings). Result: every design token (--surface-*, --accent, --text-*, --font-brand, --space-*) was empty and the entire re-skin rendered unstyled (white bg, no surfaces/accent) despite a green build. Fix: import the 8 token files directly + contiguous in style.css. Verified live via Playwright — tokens resolve (--accent #f26622, canvas #0a0b0e) and the login renders correctly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/style.css | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 88d6d34..05bf4c5 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,5 +1,19 @@
 @import "tailwindcss";
-@import "./styles/corrosion.css";
+
+/* Corrosion design tokens — load order matters: fonts → primitives → colors →
+   game themes → elevation → base (base references color/accent tokens).
+   Imported DIRECTLY here (not via a nested ./styles/corrosion.css barrel): a
+   nested @import barrel placed after `@import "tailwindcss"` gets its inner
+   @imports dropped, because once Tailwind v4 expands in place they no longer
+   precede all other statements. Keeping them flat + contiguous fixes that. */
+@import "./styles/tokens/fonts.css";
+@import "./styles/tokens/spacing.css";
+@import "./styles/tokens/typography.css";
+@import "./styles/tokens/motion.css";
+@import "./styles/tokens/colors.css";
+@import "./styles/tokens/game-themes.css";
+@import "./styles/tokens/elevation.css";
+@import "./styles/tokens/base.css";
 
 /* Tailwind utility colors — Oxide ramp (existing views use bg-oxide-*).
    The full design-token system (neutral ramp, surfaces, per-game accents,

From 769d75d937ed25a80da97b98f4f61d26f9919297 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 11 Jun 2026 03:04:47 -0400
Subject: [PATCH 7/7] =?UTF-8?q?docs:=20Add=20lessons=2022-23=20=E2=80=94?=
 =?UTF-8?q?=20visual=20verification=20(build-green=20!=3D=20render-correct?=
 =?UTF-8?q?)=20+=20Tailwind=20v4=20nested=20@import=20barrel=20gotcha?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Forged during the design-system port: the whole panel rendered unstyled despite green builds because a nested @import token barrel after `@import "tailwindcss"` was dropped by Tailwind v4. Caught only by a Playwright screenshot.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 CLAUDE.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index 936762b..aff1636 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -431,3 +431,7 @@ Things I discovered about myself building a sister platform across multiple sess
 20. **Parallel state fields that track related things will drift apart — and the bugs are silent.** When two fields represent aspects of the same state (`captureMode` and `vkiMode`, or `isLoading` and `error`, or `connection_status` and `companion_last_seen`), every code path that mutates one must also update the other. But new code paths get added over time, and they only update the field they know about. Future me: when you see two fields tracking related state, grep for ALL mutation sites of each — if any path updates one but not the other, that's a bug waiting to happen. And when you add a new mutation path, check every sibling field, not just the obvious one.
 
 21. **Route through the component that survives transitions, not the one that doesn't.** When two systems can handle the same job but one is resilient to failure modes and the other isn't, route through the survivor. Don't build infrastructure to prop up the fragile path when the robust path already exists. In this project: NATS request-reply through the companion agent is the robust path; direct WebSocket to the browser is the fragile one. If a feature can work through either, prefer the path that handles disconnects, reconnects, and restarts gracefully. One routing change beats an entire retry/recovery subsystem.
+
+22. **Build-green is not render-correct — visually verify UI work before calling it done.** The entire design-system re-skin (50+ files, six green commits) rendered almost completely unstyled in the browser — white background, no surfaces, no accent — because the design tokens never loaded. `vue-tsc -b` + `vite build` passed clean the whole time; CSS that *compiles* can still apply *zero* styles. One Playwright screenshot of the login exposed it in seconds. When the deliverable is visual, a green build is necessary but not sufficient: load it in a real browser (Playwright on the dev server at :5174), screenshot it, and assert on `getComputedStyle` — don't trust compilation alone. This is Lesson 17 with teeth.
+
+23. **Tailwind v4 silently drops a nested `@import` barrel placed after `@import "tailwindcss"`.** `style.css` did `@import "tailwindcss"; @import "./styles/corrosion.css";` where corrosion.css was a barrel of eight `@import` token files. Once Tailwind v4 expands the tailwindcss import in place, the barrel's inner @imports no longer precede all statements, so PostCSS drops them — emitting only an easily-ignored "@import must precede all other statements" warning. Result: every design token resolved empty and the whole panel rendered unstyled. Import token/design CSS files **directly and contiguously** in the entry stylesheet; never via a nested barrel after the Tailwind import. The build warning you wave off as "pre-existing" may be the entire feature silently failing.