diff --git a/services/web-ui/public/settings.html b/services/web-ui/public/settings.html
index 0404467..1c20cb0 100644
--- a/services/web-ui/public/settings.html
+++ b/services/web-ui/public/settings.html
@@ -1,298 +1,314 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wild Dragon - Settings</title>
-    <link rel="stylesheet" href="/css/common.css">
-    <style>
-        .settings-container {
-            max-width: 720px;
-            margin: 0 auto;
-            padding: var(--spacing-lg);
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-xl);
-        }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Settings — Wild Dragon</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/common.css">
+  <style>
+    .settings-content {
+      max-width: 680px;
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-6);
+    }
 
-        .settings-section {
-            background-color: var(--color-bg-tertiary);
-            border: 1px solid var(--color-border);
-            border-radius: var(--radius-lg);
-            overflow: hidden;
-        }
+    .settings-card {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: var(--r-lg);
+      overflow: hidden;
+    }
 
-        .settings-section-header {
-            display: flex;
-            align-items: center;
-            gap: var(--spacing-md);
-            padding: var(--spacing-lg);
-            border-bottom: 1px solid var(--color-border);
-            background-color: var(--color-bg-secondary);
-        }
+    .settings-card-header {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-3);
+      padding: var(--sp-4) var(--sp-5);
+      border-bottom: 1px solid var(--border);
+      background: var(--bg-panel);
+    }
 
-        .settings-section-icon {
-            font-size: 1.4rem;
-        }
+    .settings-card-header-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: var(--r-md);
+      background: var(--accent-subtle);
+      border: 1px solid var(--accent-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--accent);
+      flex-shrink: 0;
+    }
 
-        .settings-section-title {
-            font-size: 1.1rem;
-            font-weight: 700;
-            color: var(--color-text-primary);
-            margin: 0;
-        }
+    .settings-card-header-icon svg { width: 16px; height: 16px; }
 
-        .settings-section-subtitle {
-            font-size: 0.85rem;
-            color: var(--color-text-tertiary);
-            margin: 0;
-        }
+    .settings-card-header-text { flex: 1; }
 
-        .settings-body {
-            padding: var(--spacing-lg);
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-md);
-        }
+    .settings-card-title {
+      font-size: var(--text-base);
+      font-weight: 500;
+      color: var(--text-primary);
+    }
 
-        .settings-row {
-            display: flex;
-            gap: var(--spacing-md);
-            align-items: flex-end;
-        }
+    .settings-card-subtitle {
+      font-size: var(--text-xs);
+      color: var(--text-tertiary);
+      margin-top: 2px;
+    }
 
-        .settings-row .form-group {
-            flex: 1;
-            margin-bottom: 0;
-        }
+    .settings-card-body {
+      padding: var(--sp-5);
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-4);
+    }
 
-        .settings-actions {
-            display: flex;
-            gap: var(--spacing-sm);
-            align-items: center;
-            padding-top: var(--spacing-md);
-            border-top: 1px solid var(--color-border);
-        }
+    .settings-card-footer {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-3);
+      padding: var(--sp-4) var(--sp-5);
+      border-top: 1px solid var(--border);
+      background: var(--bg-base);
+    }
 
-        .status-msg {
-            font-size: 0.9rem;
-            padding: var(--spacing-sm) var(--spacing-md);
-            border-radius: var(--radius-md);
-            display: none;
-            align-items: center;
-            gap: var(--spacing-sm);
-        }
+    .token-saved-badge {
+      display: none;
+      align-items: center;
+      gap: var(--sp-1);
+      font-size: var(--text-xs);
+      color: var(--status-green);
+      background: oklch(68% 0.18 148 / 0.1);
+      border: 1px solid oklch(68% 0.18 148 / 0.25);
+      border-radius: var(--r-full);
+      padding: 2px 10px;
+    }
 
-        .status-msg.success {
-            display: flex;
-            background-color: rgba(16, 185, 129, 0.15);
-            color: var(--color-success);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-        }
+    .token-saved-badge.visible { display: inline-flex; }
 
-        .status-msg.error {
-            display: flex;
-            background-color: rgba(239, 68, 68, 0.15);
-            color: var(--color-danger);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-        }
+    .inline-status {
+      font-size: var(--text-sm);
+      padding: var(--sp-3) var(--sp-4);
+      border-radius: var(--r-md);
+      display: none;
+    }
 
-        .status-msg.loading {
-            display: flex;
-            background-color: rgba(59, 130, 246, 0.15);
-            color: var(--color-info);
-            border: 1px solid rgba(59, 130, 246, 0.3);
-        }
+    .inline-status.success {
+      display: block;
+      color: var(--status-green);
+      background: oklch(68% 0.18 148 / 0.08);
+      border: 1px solid oklch(68% 0.18 148 / 0.2);
+    }
 
-        .token-hint {
-            font-size: 0.82rem;
-            color: var(--color-text-tertiary);
-            margin-top: var(--spacing-xs);
-        }
+    .inline-status.error {
+      display: block;
+      color: var(--status-red);
+      background: oklch(62% 0.22 25 / 0.08);
+      border: 1px solid oklch(62% 0.22 25 / 0.2);
+    }
 
-        .token-set-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            font-size: 0.8rem;
-            color: var(--color-success);
-            background-color: rgba(16, 185, 129, 0.12);
-            border: 1px solid rgba(16, 185, 129, 0.25);
-            border-radius: 12px;
-            padding: 2px 8px;
-            margin-top: var(--spacing-xs);
-        }
-    </style>
+    .inline-status.loading {
+      display: block;
+      color: var(--text-secondary);
+      background: var(--bg-raised);
+      border: 1px solid var(--border);
+    }
+  </style>
 </head>
 <body>
-    <div class="app-container">
-        <!-- Header -->
-        <header class="header">
-            <div class="header-logo">
-                <div class="header-logo-icon">D</div>
-                <span>WILD DRAGON</span>
+<div class="shell">
+  <!-- Sidebar -->
+  <nav class="sidebar" aria-label="Main navigation">
+    <div class="sidebar-brand">
+      <div class="sidebar-brand-mark">
+        <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12"><path d="M8 1L2 5v6l6 4 6-4V5L8 1zm0 2.2L12 6v4l-4 2.7L4 10V6l4-2.8z"/></svg>
+      </div>
+      <span class="sidebar-brand-name">Wild Dragon</span>
+    </div>
+    <nav class="sidebar-nav">
+      <a href="index.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
+        Library
+      </a>
+      <a href="upload.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 11V3M5 6l3-3 3 3"/><path d="M2 13h12"/></svg>
+        Ingest
+      </a>
+      <a href="recorders.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="4" width="10" height="8" rx="1"/><path d="M11 7l4-2v6l-4-2"/></svg>
+        Recorders
+      </a>
+      <a href="capture.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5"/></svg>
+        Capture
+      </a>
+      <a href="jobs.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M2 8h8M2 12h5"/></svg>
+        Jobs
+      </a>
+      <div class="sidebar-section-label">Admin</div>
+      <a href="settings.html" class="nav-item active">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="2.5"/><path d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.2 3.2l1 1M11.8 11.8l1 1M3.2 12.8l1-1M11.8 4.2l1-1"/></svg>
+        Settings
+      </a>
+      <a href="users.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6"/></svg>
+        Users
+      </a>
+      <a href="tokens.html" class="nav-item">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="10" height="8" rx="1"/><path d="M6 6V4a2 2 0 0 1 4 0v2"/></svg>
+        Tokens
+      </a>
+    </nav>
+    <div class="sidebar-footer">
+      <div class="sidebar-user">
+        <div class="sidebar-user-avatar" id="userAvatar">?</div>
+        <div class="sidebar-user-info">
+          <div class="sidebar-user-name" id="userName">—</div>
+          <div class="sidebar-user-role" id="userRole"></div>
+        </div>
+        <button class="btn btn-ghost" id="logoutBtn" style="padding:0;width:28px;height:28px;flex-shrink:0;" title="Sign out">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3M11 11l3-3-3-3M6 8h8"/></svg>
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Main -->
+  <div class="main">
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="page-title">Settings</span>
+      </div>
+    </header>
+
+    <div class="page-content">
+      <div class="settings-content">
+
+        <!-- AMPP FramelightX -->
+        <div class="settings-card">
+          <div class="settings-card-header">
+            <div class="settings-card-header-icon">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="2"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M3.1 12.9l1.4-1.4M11.5 4.5l1.4-1.4"/></svg>
             </div>
-            <nav class="header-nav">
-                <div class="nav-item" data-page="assets">Assets</div>
-                <div class="nav-item" data-page="capture">Capture</div>
-                <div class="nav-item" data-page="upload">Upload</div>
-                <div class="nav-item" data-page="recorders">Recorders</div>
-                <div class="nav-item active" data-page="settings">Settings</div>
-            </nav>
-        </header>
-
-        <!-- Main Content -->
-        <div class="main-content">
-            <div class="content-area">
-                <div class="content-main">
-                    <div class="settings-container">
-
-                        <h1 style="margin-bottom: 0;">Settings</h1>
-
-                        <!-- AMPP Integration Section -->
-                        <div class="settings-section">
-                            <div class="settings-section-header">
-                                <div class="settings-section-icon">📡</div>
-                                <div>
-                                    <h3 class="settings-section-title">AMPP FramelightX</h3>
-                                    <p class="settings-section-subtitle">Dragon-Wind will pre-create folder paths in AMPP automatically on each upload.</p>
-                                </div>
-                            </div>
-                            <div class="settings-body">
-
-                                <div class="form-group">
-                                    <label class="form-label" for="amppBaseUrl">AMPP Base URL</label>
-                                    <input
-                                        type="url"
-                                        id="amppBaseUrl"
-                                        class="form-input"
-                                        placeholder="https://ampp.yourdomain.net"
-                                    >
-                                </div>
-
-                                <div class="form-group">
-                                    <label class="form-label" for="amppToken">API Token</label>
-                                    <input
-                                        type="password"
-                                        id="amppToken"
-                                        class="form-input"
-                                        placeholder="Paste token — leave blank to keep existing"
-                                    >
-                                    <div id="tokenSetBadge" class="token-set-badge" style="display: none;">✓ Token saved</div>
-                                    <div class="token-hint">Token is stored securely and never returned to the UI.</div>
-                                </div>
-
-                                <div id="amppStatus" class="status-msg"></div>
-
-                                <div class="settings-actions">
-                                    <button class="btn btn-primary" onclick="saveAmpp()">Save</button>
-                                    <button class="btn btn-secondary" onclick="testAmpp()">Test Connection</button>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
+            <div class="settings-card-header-text">
+              <div class="settings-card-title">AMPP FramelightX</div>
+              <div class="settings-card-subtitle">Wild Dragon will pre-create folder paths in AMPP automatically on each upload.</div>
             </div>
+          </div>
+          <div class="settings-card-body">
+            <div class="form-group">
+              <label class="form-label" for="amppBaseUrl">AMPP Base URL</label>
+              <input type="url" id="amppBaseUrl" placeholder="https://ampp.yourdomain.net">
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="amppToken">API Token</label>
+              <input type="password" id="amppToken" placeholder="Paste token — leave blank to keep existing">
+              <div class="form-hint">Token is stored securely and never returned to the UI.</div>
+              <span class="token-saved-badge" id="tokenSavedBadge">
+                <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" width="10" height="10"><path d="M2 6l3 3 5-5"/></svg>
+                Token saved
+              </span>
+            </div>
+            <div class="inline-status" id="amppStatus"></div>
+          </div>
+          <div class="settings-card-footer">
+            <button class="btn btn-primary btn-sm" onclick="saveAmpp()">Save settings</button>
+            <button class="btn btn-ghost btn-sm" onclick="testAmpp()">Test connection</button>
+          </div>
         </div>
 
-        <!-- Status Bar -->
-        <footer class="status-bar">
-            <div class="status-item">
-                <span class="status-indicator" id="statusIndicator"></span>
-                <span id="statusText">Settings</span>
-            </div>
-        </footer>
+      </div>
     </div>
+  </div>
+</div>
 
-    <script>
-        const API = '/api/v1';
+<div class="toast-container" id="toastContainer" aria-live="polite"></div>
 
-        // ── Navigation ──────────────────────────────────────────────
-        document.querySelectorAll('[data-page]').forEach(el => {
-            el.addEventListener('click', () => {
-                const page = el.dataset.page;
-                if (page === 'assets')    window.location.href = '/index.html';
-                if (page === 'capture')   window.location.href = '/capture.html';
-                if (page === 'upload')    window.location.href = '/upload.html';
-                if (page === 'recorders') window.location.href = '/recorders.html';
-            });
-        });
+<script>
+  const API = '/api/v1';
 
-        // ── Init ─────────────────────────────────────────────────────
-        document.addEventListener('DOMContentLoaded', loadAmppSettings);
+  document.addEventListener('DOMContentLoaded', loadAmppSettings);
 
-        async function loadAmppSettings() {
-            try {
-                const res = await fetch(`${API}/settings/ampp`);
-                if (!res.ok) return;
-                const data = await res.json();
-                if (data.ampp_base_url) {
-                    document.getElementById('amppBaseUrl').value = data.ampp_base_url;
-                }
-                if (data.ampp_token_exists) {
-                    document.getElementById('tokenSetBadge').style.display = 'inline-flex';
-                }
-            } catch (err) {
-                console.error('Failed to load AMPP settings:', err);
-            }
-        }
+  async function loadAmppSettings() {
+    try {
+      const res = await fetch(`${API}/settings/ampp`, { credentials: 'include' });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.ampp_base_url) document.getElementById('amppBaseUrl').value = data.ampp_base_url;
+      if (data.ampp_token_exists) document.getElementById('tokenSavedBadge').classList.add('visible');
+    } catch (err) {
+      console.error('Failed to load AMPP settings:', err);
+    }
+  }
 
-        // ── Save ──────────────────────────────────────────────────────
-        async function saveAmpp() {
-            const baseUrl = document.getElementById('amppBaseUrl').value.trim();
-            const token   = document.getElementById('amppToken').value.trim();
+  async function saveAmpp() {
+    const baseUrl = document.getElementById('amppBaseUrl').value.trim();
+    const token = document.getElementById('amppToken').value.trim();
+    if (!baseUrl) { showStatus('amppStatus', 'error', 'Base URL is required.'); return; }
+    showStatus('amppStatus', 'loading', 'Saving…');
+    try {
+      const body = { ampp_base_url: baseUrl };
+      if (token) body.ampp_token = token;
+      const res = await fetch(`${API}/settings/ampp`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(body),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Save failed');
+      if (token) {
+        document.getElementById('amppToken').value = '';
+        document.getElementById('tokenSavedBadge').classList.add('visible');
+      }
+      showStatus('amppStatus', 'success', '✓ Settings saved.');
+    } catch (err) {
+      showStatus('amppStatus', 'error', err.message);
+    }
+  }
 
-            if (!baseUrl) {
-                showStatus('amppStatus', 'error', 'Base URL is required.');
-                return;
-            }
+  async function testAmpp() {
+    showStatus('amppStatus', 'loading', 'Testing connection…');
+    try {
+      const res = await fetch(`${API}/settings/ampp/test`, { method: 'POST', credentials: 'include' });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Test failed');
+      showStatus('amppStatus', 'success', '✓ ' + data.message);
+    } catch (err) {
+      showStatus('amppStatus', 'error', err.message);
+    }
+  }
 
-            showStatus('amppStatus', 'loading', 'Saving…');
-
-            try {
-                const body = { ampp_base_url: baseUrl };
-                if (token) body.ampp_token = token;
-
-                const res = await fetch(`${API}/settings/ampp`, {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(body),
-                });
-
-                const data = await res.json();
-                if (!res.ok) throw new Error(data.error || 'Save failed');
-
-                if (token) {
-                    document.getElementById('amppToken').value = '';
-                    document.getElementById('tokenSetBadge').style.display = 'inline-flex';
-                }
-
-                showStatus('amppStatus', 'success', '✓ Settings saved.');
-            } catch (err) {
-                showStatus('amppStatus', 'error', err.message);
-            }
-        }
-
-        // ── Test ──────────────────────────────────────────────────────
-        async function testAmpp() {
-            showStatus('amppStatus', 'loading', 'Testing connection…');
-            try {
-                const res = await fetch(`${API}/settings/ampp/test`, { method: 'POST' });
-                const data = await res.json();
-                if (!res.ok) throw new Error(data.error || 'Test failed');
-                showStatus('amppStatus', 'success', '✓ ' + data.message);
-            } catch (err) {
-                showStatus('amppStatus', 'error', err.message);
-            }
-        }
-
-        // ── Helpers ───────────────────────────────────────────────────
-        function showStatus(id, type, msg) {
-            const el = document.getElementById(id);
-            el.className = 'status-msg ' + type;
-            el.textContent = msg;
-        }
-    </script>
+  function showStatus(id, type, msg) {
+    const el = document.getElementById(id);
+    el.className = 'inline-status ' + type;
+    el.textContent = msg;
+  }
+</script>
+<script>
+(async () => {
+  try {
+    const r = await fetch('/api/v1/auth/me', { credentials: 'include' });
+    if (r.ok) {
+      const u = await r.json();
+      const name = u.display_name || u.username || 'User';
+      document.getElementById('userName').textContent = name;
+      document.getElementById('userAvatar').textContent = name[0].toUpperCase();
+      const roleEl = document.getElementById('userRole');
+      if (roleEl) roleEl.textContent = u.role || '';
+    }
+  } catch (_) {}
+  document.getElementById('logoutBtn').onclick = async () => {
+    try { await fetch('/api/v1/auth/logout', { method: 'POST', credentials: 'include' }); } catch (_) {}
+    location.href = 'login.html';
+  };
+})();
+</script>
 </body>
 </html>
