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] 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>