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