diff --git a/app/app.vue b/app/app.vue
index f8eacfa7..33fb6efa 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -3,3 +3,8 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
+
+<script setup lang="ts">
+// Light/dark/system theme on <html>, for every layout (auth pages included)
+useThemeAttribute();
+</script>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 1a30b290..07016375 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,22 +1,94 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+/* Self-hosted fonts (the CSP only allows same-origin fonts) */
+@import '@fontsource/ibm-plex-sans/400.css';
+@import '@fontsource/ibm-plex-sans/500.css';
+@import '@fontsource/ibm-plex-sans/600.css';
+@import '@fontsource/ibm-plex-mono/400.css';
+@import '@fontsource/ibm-plex-mono/500.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * Theme tokens as RGB channels (see tailwind.config.ts).
+ * Light by default, dark when the system prefers it, and an explicit
+ * data-theme on <html> (user choice) wins over the system.
+ */
 @layer base {
+  :root {
+    color-scheme: light;
+    --bg: 243 244 246;
+    --surface: 255 255 255;
+    --raised: 247 248 250;
+    --hover: 236 238 241;
+    --line: 220 223 228;
+    --line-strong: 195 200 208;
+    --ink: 26 28 32;
+    --ink-2: 79 85 94;
+    --ink-3: 107 113 123;
+    --seed: 29 133 86;
+    --leech: 168 107 12;
+    --free: 91 71 214;
+    --danger: 194 58 51;
+    --contrast: 26 28 32;
+    --contrast-inv: 255 255 255;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+      color-scheme: dark;
+      --bg: 23 24 27;
+      --surface: 31 33 37;
+      --raised: 40 42 47;
+      --hover: 46 48 54;
+      --line: 51 54 60;
+      --line-strong: 70 74 82;
+      --ink: 236 234 229;
+      --ink-2: 167 166 161;
+      --ink-3: 132 133 127;
+      --seed: 76 183 130;
+      --leech: 226 162 62;
+      --free: 155 138 247;
+      --danger: 230 98 91;
+      --contrast: 245 244 240;
+      --contrast-inv: 23 24 27;
+    }
+  }
+
+  :root[data-theme='dark'] {
+    color-scheme: dark;
+    --bg: 23 24 27;
+    --surface: 31 33 37;
+    --raised: 40 42 47;
+    --hover: 46 48 54;
+    --line: 51 54 60;
+    --line-strong: 70 74 82;
+    --ink: 236 234 229;
+    --ink-2: 167 166 161;
+    --ink-3: 132 133 127;
+    --seed: 76 183 130;
+    --leech: 226 162 62;
+    --free: 155 138 247;
+    --danger: 230 98 91;
+    --contrast: 245 244 240;
+    --contrast-inv: 23 24 27;
+  }
+
   html {
     @apply antialiased;
+    font-feature-settings: 'ss02';
   }
 
   body {
-    @apply bg-bg-primary text-text-primary font-sans selection:bg-white selection:text-black;
-    background-image: radial-gradient(
-      circle at 2px 2px,
-      #1a1a1a 1px,
-      transparent 0
-    );
-    background-size: 40px 40px;
+    @apply bg-bg-primary text-text-primary font-sans text-sm leading-6;
+  }
+
+  ::selection {
+    @apply bg-free/25 text-text-primary;
+  }
+
+  :focus-visible {
+    @apply outline-none ring-2 ring-free/60 ring-offset-1 ring-offset-bg-primary;
   }
 
   /* Custom scrollbar */
@@ -25,7 +97,7 @@
   }
 
   ::-webkit-scrollbar-track {
-    @apply bg-bg-secondary;
+    @apply bg-transparent;
   }
 
   ::-webkit-scrollbar-thumb {
@@ -35,80 +107,98 @@
   ::-webkit-scrollbar-thumb:hover {
     @apply bg-border-hover;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }
 
 @layer components {
-  /* Card component */
+  /* Panels: flat surface, one radius, no glow */
   .card {
-    @apply bg-bg-secondary/80 backdrop-blur-sm border border-border rounded-md transition-all duration-200 hover:border-border-hover;
+    @apply bg-bg-secondary border border-border rounded-md;
   }
 
   .card-header {
-    @apply px-3 py-2 border-b border-border flex items-center justify-between;
+    @apply px-4 py-2.5 border-b border-border flex items-center justify-between gap-3;
   }
 
   .card-body {
-    @apply p-3;
+    @apply p-4;
   }
 
-  /* Button styles */
+  /* Buttons */
   .btn {
-    @apply px-3 py-1.5 rounded text-sm font-medium transition-all duration-200 active:scale-[0.98] disabled:opacity-50 disabled:pointer-events-none;
+    @apply inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none;
   }
 
   .btn-primary {
-    @apply bg-white text-black hover:bg-gray-200 shadow-[0_0_15px_rgba(255,255,255,0.1)];
+    @apply bg-white text-black hover:bg-white/85;
   }
 
   .btn-secondary {
     @apply bg-bg-tertiary text-text-primary border border-border hover:bg-bg-hover hover:border-border-hover;
   }
 
-  /* Input styles */
+  .btn-ghost {
+    @apply text-text-secondary hover:text-text-primary hover:bg-bg-hover;
+  }
+
+  /* Inputs */
   .input {
-    @apply bg-bg-tertiary/50 border border-border rounded px-3 py-1.5 text-sm text-text-primary placeholder-text-muted focus:outline-none focus:border-white/30 focus:bg-bg-tertiary transition-all;
+    @apply bg-bg-tertiary border border-border rounded px-3 py-1.5 text-sm text-text-primary placeholder-text-muted transition-colors hover:border-border-hover focus:outline-none focus:border-free/60 focus:ring-2 focus:ring-free/20;
   }
 
-  /* Table styles */
+  /* Tables */
   .data-table {
-    @apply w-full text-xs border-separate border-spacing-0;
+    @apply w-full text-sm border-separate border-spacing-0;
   }
 
   .data-table th {
-    @apply text-left text-text-muted font-semibold px-3 py-2 border-b border-border bg-bg-secondary/50 uppercase tracking-wider;
+    @apply text-left text-xs font-medium text-text-muted px-3 py-2 border-b border-border;
   }
 
   .data-table td {
-    @apply px-3 py-2 border-b border-border/50;
+    @apply px-3 py-2 border-b border-border/60;
   }
 
   .data-table tr:last-child td {
     @apply border-b-0;
   }
 
-  .data-table tr:hover td {
-    @apply bg-white/[0.02];
+  .data-table tbody tr:hover td {
+    @apply bg-bg-hover/60;
   }
 
-  /* Stat badge */
+  /* Swarm counters */
   .stat-badge {
-    @apply inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-[10px] font-mono font-bold uppercase;
+    @apply inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-mono tabular-nums;
   }
 
   .stat-seeders {
-    @apply text-success bg-success/5 border border-success/20;
+    @apply text-seed bg-seed/10;
   }
 
   .stat-leechers {
-    @apply text-warning bg-warning/5 border border-warning/20;
+    @apply text-leech bg-leech/10;
   }
 
   .btn-search {
-    @apply p-1.5 text-text-muted hover:text-white transition-colors;
+    @apply p-1.5 text-text-muted hover:text-text-primary transition-colors;
   }
 }
 
 @layer utilities {
+  /* Numbers that should line up: sizes, ratios, counts */
+  .num {
+    @apply font-mono tabular-nums;
+  }
+
   .truncate-hash {
     @apply font-mono text-2xs;
     max-width: 120px;
diff --git a/app/components/EditTorrentModal.vue b/app/components/EditTorrentModal.vue
index c4bc4ace..06277c88 100644
--- a/app/components/EditTorrentModal.vue
+++ b/app/components/EditTorrentModal.vue
@@ -2,7 +2,7 @@
   <Teleport to="body">
     <div
       v-if="isOpen"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-scrim/60 backdrop-blur-sm"
       @click.self="close"
     >
       <div
diff --git a/app/components/ThemeSwitcher.vue b/app/components/ThemeSwitcher.vue
new file mode 100644
index 00000000..8ab24484
--- /dev/null
+++ b/app/components/ThemeSwitcher.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="inline-flex items-center rounded border border-border p-0.5" role="group" :aria-label="t('shell.theme.label')">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      type="button"
+      class="p-1 rounded-sm transition-colors"
+      :class="preference === option.value ? 'bg-bg-hover text-text-primary' : 'text-text-muted hover:text-text-primary'"
+      :aria-pressed="preference === option.value"
+      :title="t(option.label)"
+      @click="setTheme(option.value)"
+    >
+      <Icon :name="option.icon" class="text-sm block" aria-hidden="true" />
+      <span class="sr-only">{{ t(option.label) }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ThemePreference } from '~/composables/useTheme';
+
+const { t } = useI18n();
+const { preference, setTheme } = useTheme();
+
+const options: { value: ThemePreference; icon: string; label: string }[] = [
+  { value: 'light', icon: 'ph:sun', label: 'shell.theme.light' },
+  { value: 'system', icon: 'ph:desktop', label: 'shell.theme.system' },
+  { value: 'dark', icon: 'ph:moon', label: 'shell.theme.dark' },
+];
+</script>
diff --git a/app/components/UploadTorrentModal.vue b/app/components/UploadTorrentModal.vue
index 5d328186..0d4a9513 100644
--- a/app/components/UploadTorrentModal.vue
+++ b/app/components/UploadTorrentModal.vue
@@ -2,7 +2,7 @@
   <Teleport to="body">
     <div
       v-if="isOpen"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-scrim/60 backdrop-blur-sm"
       @click.self="close"
     >
       <div
diff --git a/app/components/admin/Announcements.vue b/app/components/admin/Announcements.vue
index 66bd22c7..eaa510a8 100644
--- a/app/components/admin/Announcements.vue
+++ b/app/components/admin/Announcements.vue
@@ -116,7 +116,7 @@
         class="w-full text-[10px] font-bold uppercase tracking-widest py-2.5 rounded transition-all disabled:opacity-50 flex items-center justify-center gap-2"
         :class="
           saved
-            ? 'bg-success text-white'
+            ? 'bg-success text-paper'
             : 'bg-text-primary text-bg-primary hover:opacity-90'
         "
       >
diff --git a/app/components/admin/Branding.vue b/app/components/admin/Branding.vue
index ad1d3c98..7cd2a847 100644
--- a/app/components/admin/Branding.vue
+++ b/app/components/admin/Branding.vue
@@ -330,7 +330,7 @@
         class="w-full text-[10px] font-bold uppercase tracking-widest py-2.5 rounded transition-all disabled:opacity-50 flex items-center justify-center gap-2"
         :class="
           saved
-            ? 'bg-success text-white'
+            ? 'bg-success text-paper'
             : 'bg-text-primary text-bg-primary hover:opacity-90'
         "
       >
@@ -455,7 +455,7 @@
         class="w-full text-[10px] font-bold uppercase tracking-widest py-2.5 rounded transition-all disabled:opacity-50 flex items-center justify-center gap-2"
         :class="
           savedText
-            ? 'bg-success text-white'
+            ? 'bg-success text-paper'
             : 'bg-text-primary text-bg-primary hover:opacity-90'
         "
       >
@@ -577,7 +577,7 @@
         class="w-full text-[10px] font-bold uppercase tracking-widest py-2.5 rounded transition-all disabled:opacity-50 flex items-center justify-center gap-2"
         :class="
           savedHomepage
-            ? 'bg-success text-white'
+            ? 'bg-success text-paper'
             : 'bg-text-primary text-bg-primary hover:opacity-90'
         "
       >
diff --git a/app/components/admin/HnR.vue b/app/components/admin/HnR.vue
index fb06a99e..c3199734 100644
--- a/app/components/admin/HnR.vue
+++ b/app/components/admin/HnR.vue
@@ -11,7 +11,7 @@
           </h3>
           <span
             v-if="hnrCount > 0"
-            class="px-2 py-0.5 text-[10px] font-bold bg-error text-white rounded-full"
+            class="px-2 py-0.5 text-[10px] font-bold bg-error text-paper rounded-full"
           >
             {{ hnrCount }} HnR
           </span>
diff --git a/app/components/admin/HomepageContent.vue b/app/components/admin/HomepageContent.vue
index 5f1e377b..4bc1a138 100644
--- a/app/components/admin/HomepageContent.vue
+++ b/app/components/admin/HomepageContent.vue
@@ -103,7 +103,7 @@
         class="w-full text-[10px] font-bold uppercase tracking-widest py-2.5 rounded transition-all disabled:opacity-50 flex items-center justify-center gap-2"
         :class="
           saved
-            ? 'bg-success text-white'
+            ? 'bg-success text-paper'
             : 'bg-text-primary text-bg-primary hover:opacity-90'
         "
       >
diff --git a/app/components/admin/Panic.vue b/app/components/admin/Panic.vue
index 71560ec3..eaadc9dc 100644
--- a/app/components/admin/Panic.vue
+++ b/app/components/admin/Panic.vue
@@ -21,7 +21,7 @@
         <button
           @click="showConfirmModal = true"
           :disabled="loading"
-          class="w-full bg-error text-white text-sm font-bold uppercase tracking-widest py-3 rounded hover:bg-error/90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
+          class="w-full bg-error text-paper text-sm font-bold uppercase tracking-widest py-3 rounded hover:bg-error/90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
         >
           <Icon name="ph:lock-simple" />
           {{ t('admin.panic.encryptButton') }}
@@ -48,7 +48,7 @@
         <button
           @click="showRestoreModal = true"
           :disabled="loading"
-          class="w-full bg-success text-white text-sm font-bold uppercase tracking-widest py-3 rounded hover:bg-success/90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
+          class="w-full bg-success text-paper text-sm font-bold uppercase tracking-widest py-3 rounded hover:bg-success/90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
         >
           <Icon name="ph:lock-open" />
           {{ t('admin.panic.restoreButton') }}
@@ -60,7 +60,7 @@
     <Teleport to="body">
       <div
         v-if="showConfirmModal"
-        class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
+        class="fixed inset-0 bg-scrim/80 flex items-center justify-center z-50 p-4"
         @click.self="showConfirmModal = false"
       >
         <div
@@ -114,7 +114,7 @@
             <button
               @click="triggerPanic"
               :disabled="loading || !panicPassword"
-              class="flex-1 bg-error text-white text-sm font-bold py-2.5 rounded hover:bg-error/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+              class="flex-1 bg-error text-paper text-sm font-bold py-2.5 rounded hover:bg-error/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
             >
               <Icon
                 v-if="loading"
@@ -132,7 +132,7 @@
     <Teleport to="body">
       <div
         v-if="showRestoreModal"
-        class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4"
+        class="fixed inset-0 bg-scrim/80 flex items-center justify-center z-50 p-4"
         @click.self="showRestoreModal = false"
       >
         <div
@@ -180,7 +180,7 @@
             <button
               @click="restoreDatabase"
               :disabled="loading || !panicPassword"
-              class="flex-1 bg-success text-white text-sm font-bold py-2.5 rounded hover:bg-success/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+              class="flex-1 bg-success text-paper text-sm font-bold py-2.5 rounded hover:bg-success/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
             >
               <Icon
                 v-if="loading"
diff --git a/app/components/admin/Registration.vue b/app/components/admin/Registration.vue
index 0a3f0e2d..e68ea0cc 100644
--- a/app/components/admin/Registration.vue
+++ b/app/components/admin/Registration.vue
@@ -148,7 +148,7 @@
         class="w-full text-[10px] font-bold uppercase tracking-widest py-2.5 rounded transition-all disabled:opacity-50 flex items-center justify-center gap-2"
         :class="
           saved
-            ? 'bg-success text-white'
+            ? 'bg-success text-paper'
             : 'bg-text-primary text-bg-primary hover:opacity-90'
         "
       >
diff --git a/app/components/admin/Reports.vue b/app/components/admin/Reports.vue
index 1335bca3..c7f3c6fc 100644
--- a/app/components/admin/Reports.vue
+++ b/app/components/admin/Reports.vue
@@ -11,7 +11,7 @@
           </h3>
           <span
             v-if="pendingCount > 0"
-            class="px-2 py-0.5 text-[10px] font-bold bg-error text-white rounded-full"
+            class="px-2 py-0.5 text-[10px] font-bold bg-error text-paper rounded-full"
           >
             {{ pendingCount }}
           </span>
diff --git a/app/components/admin/TorznabRateLimiting.vue b/app/components/admin/TorznabRateLimiting.vue
index c7c42e8b..54641a14 100644
--- a/app/components/admin/TorznabRateLimiting.vue
+++ b/app/components/admin/TorznabRateLimiting.vue
@@ -132,7 +132,7 @@
         class="flex items-center justify-between border-t border-border pt-4"
       >
         <p class="text-xs text-text-muted">
-          <Icon name="ph:info" class="inline mr-1" />
+          <Icon name="ph:info" class="inline-block align-[-2px] mr-1" />
           {{ t('admin.torznabRateLimit.immediateNote') }}
         </p>
         <button
diff --git a/app/components/admin/TorznabUsers.vue b/app/components/admin/TorznabUsers.vue
index 2fea5126..b2726228 100644
--- a/app/components/admin/TorznabUsers.vue
+++ b/app/components/admin/TorznabUsers.vue
@@ -206,7 +206,7 @@
         v-if="selectedUser"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
       >
-        <div class="fixed inset-0 bg-black/80" @click="selectedUser = null" />
+        <div class="fixed inset-0 bg-scrim/80" @click="selectedUser = null" />
         <div
           class="relative bg-bg-primary border border-border rounded-lg w-full max-w-3xl max-h-[80vh] overflow-hidden"
         >
@@ -240,7 +240,7 @@
         v-if="confirmAction"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
       >
-        <div class="fixed inset-0 bg-black/80" @click="confirmAction = null" />
+        <div class="fixed inset-0 bg-scrim/80" @click="confirmAction = null" />
         <div
           class="relative bg-bg-primary border border-border rounded-lg w-full max-w-md p-6"
         >
diff --git a/app/components/shell/AppSidebar.vue b/app/components/shell/AppSidebar.vue
new file mode 100644
index 00000000..f415faa4
--- /dev/null
+++ b/app/components/shell/AppSidebar.vue
@@ -0,0 +1,149 @@
+<template>
+  <!-- Mobile backdrop -->
+  <div
+    v-if="open"
+    class="fixed inset-0 z-40 bg-scrim/50 lg:hidden"
+    aria-hidden="true"
+    @click="emit('close')"
+  />
+
+  <aside
+    id="app-sidebar"
+    class="fixed inset-y-0 left-0 z-50 w-60 flex flex-col bg-bg-secondary border-r border-border transition-transform lg:translate-x-0 lg:z-30"
+    :class="open ? 'translate-x-0' : '-translate-x-full invisible lg:visible'"
+    :aria-label="t('shell.menu.label')"
+  >
+    <!-- Brand -->
+    <div class="h-14 shrink-0 flex items-center gap-2.5 px-4 border-b border-border">
+      <NuxtLink to="/" class="flex items-center gap-2.5 min-w-0" @click="emit('close')">
+        <span
+          class="w-7 h-7 shrink-0 rounded flex items-center justify-center overflow-hidden"
+          :class="branding?.siteLogoImage ? 'bg-paper' : 'bg-white'"
+        >
+          <img
+            v-if="branding?.siteLogoImage"
+            :src="branding.siteLogoImage"
+            alt=""
+            class="w-full h-full object-contain"
+          />
+          <Icon v-else :name="branding?.siteLogo || 'ph:broadcast-bold'" class="text-black text-base" />
+        </span>
+        <span
+          class="text-sm truncate"
+          :class="(branding?.siteNameBold ?? true) ? 'font-semibold' : 'font-medium'"
+          :style="{ color: branding?.siteNameColor || '' }"
+          v-html="branding?.siteName"
+        />
+      </NuxtLink>
+      <button
+        type="button"
+        class="ml-auto p-1.5 rounded btn-ghost lg:hidden"
+        :aria-label="t('shell.menu.close')"
+        @click="emit('close')"
+      >
+        <Icon name="ph:x" class="block" />
+      </button>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="flex-1 overflow-y-auto px-2 py-3 space-y-5">
+      <div v-for="group in visibleGroups" :key="group.label">
+        <p class="px-2 mb-1 text-xs text-text-muted">{{ t(group.label) }}</p>
+        <ul class="space-y-px">
+          <li v-for="item in group.items" :key="item.to">
+            <NuxtLink
+              :to="item.to"
+              class="group flex items-center gap-2.5 px-2 py-1.5 rounded text-sm text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors"
+              :class="isActive(item) && 'bg-bg-hover text-text-primary font-medium'"
+              :aria-current="isActive(item) ? 'page' : undefined"
+              @click="emit('close')"
+            >
+              <Icon
+                :name="item.icon"
+                class="text-base shrink-0"
+                :class="isActive(item) ? 'text-text-primary' : 'text-text-muted group-hover:text-text-secondary'"
+              />
+              <span class="truncate">{{ t(item.label) }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <div class="shrink-0 px-4 py-3 border-t border-border text-xs text-text-muted num">
+      v{{ appVersion }}
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+interface NavItem {
+  to: string;
+  label: string;
+  icon: string;
+  exact?: boolean;
+}
+interface NavGroup {
+  label: string;
+  items: NavItem[];
+  staff?: 'mod' | 'admin';
+}
+
+defineProps<{
+  open: boolean;
+  branding: {
+    siteName?: string;
+    siteLogo?: string;
+    siteLogoImage?: string | null;
+    siteNameColor?: string | null;
+    siteNameBold?: boolean;
+  } | null;
+}>();
+const emit = defineEmits<{ close: [] }>();
+
+const { t } = useI18n();
+const route = useRoute();
+const { user } = useUserSession();
+const appVersion = useRuntimeConfig().public.appVersion;
+
+const groups = computed<NavGroup[]>(() => [
+  {
+    label: 'shell.groups.browse',
+    items: [
+      { to: '/', label: 'shell.nav.home', icon: 'ph:house', exact: true },
+      { to: '/torrents', label: 'shell.nav.torrents', icon: 'ph:files' },
+      { to: '/bounties', label: 'shell.nav.bounties', icon: 'ph:target' },
+    ],
+  },
+  {
+    label: 'shell.groups.community',
+    items: [{ to: '/forum', label: 'shell.nav.forum', icon: 'ph:chats-circle' }],
+  },
+  {
+    label: 'shell.groups.account',
+    items: [
+      { to: '/shop', label: 'shell.nav.shop', icon: 'ph:coins' },
+      { to: '/invites', label: 'shell.nav.invites', icon: 'ph:envelope-simple' },
+      ...(user.value ? [{ to: `/users/${user.value.id}`, label: 'shell.nav.profile', icon: 'ph:user' }] : []),
+    ],
+  },
+  {
+    label: 'shell.groups.staff',
+    staff: 'mod',
+    items: [
+      { to: '/mod', label: 'shell.nav.mod', icon: 'ph:shield' },
+      ...(user.value?.isAdmin ? [{ to: '/admin', label: 'shell.nav.admin', icon: 'ph:gear-six' }] : []),
+    ],
+  },
+]);
+
+const visibleGroups = computed(() =>
+  groups.value.filter(
+    (g) => !g.staff || user.value?.isAdmin || user.value?.isModerator
+  )
+);
+
+function isActive(item: NavItem): boolean {
+  return item.exact ? route.path === item.to : route.path === item.to || route.path.startsWith(`${item.to}/`);
+}
+</script>
diff --git a/app/components/shell/CommandPalette.vue b/app/components/shell/CommandPalette.vue
new file mode 100644
index 00000000..7dff34ce
--- /dev/null
+++ b/app/components/shell/CommandPalette.vue
@@ -0,0 +1,224 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="opacity-0"
+      leave-active-class="transition duration-75 ease-in"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-[60] bg-scrim/50 flex items-start justify-center px-4 pt-[12vh]"
+        @mousedown.self="close"
+      >
+        <div
+          class="w-full max-w-xl card shadow-2xl shadow-scrim/20 overflow-hidden"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="t('shell.search.trigger')"
+        >
+          <div class="flex items-center gap-3 px-4 border-b border-border">
+            <Icon name="ph:magnifying-glass" class="text-text-muted shrink-0" aria-hidden="true" />
+            <input
+              ref="input"
+              v-model="query"
+              type="text"
+              class="flex-1 bg-transparent py-3.5 text-[15px] text-text-primary placeholder-text-muted focus:outline-none focus-visible:ring-0"
+              :placeholder="t('shell.search.placeholder')"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-controls="palette-results"
+              :aria-activedescendant="items[active] ? `palette-item-${active}` : undefined"
+              @keydown.down.prevent="move(1)"
+              @keydown.up.prevent="move(-1)"
+              @keydown.enter.prevent="choose(items[active])"
+              @keydown.esc.prevent="close"
+            />
+            <kbd class="hidden sm:block text-2xs num text-text-muted border border-border rounded px-1.5 py-0.5">Esc</kbd>
+          </div>
+
+          <ul id="palette-results" class="max-h-[50vh] overflow-y-auto py-2" role="listbox">
+            <template v-for="(section, s) in sections" :key="s">
+              <li v-if="section.items.length" class="px-4 pt-2 pb-1 text-xs text-text-muted" role="presentation">
+                {{ section.title }}
+              </li>
+              <li
+                v-for="item in section.items"
+                :id="`palette-item-${item.index}`"
+                :key="item.key"
+                role="option"
+                :aria-selected="item.index === active"
+                class="mx-2 px-2 py-2 rounded flex items-center gap-3 cursor-pointer text-sm"
+                :class="item.index === active ? 'bg-bg-hover text-text-primary' : 'text-text-secondary'"
+                @mousemove="active = item.index"
+                @click="choose(item)"
+              >
+                <Icon :name="item.icon" class="shrink-0 text-text-muted" aria-hidden="true" />
+                <span class="truncate flex-1">{{ item.label }}</span>
+                <span v-if="item.meta" class="num text-xs text-text-muted shrink-0">{{ item.meta }}</span>
+              </li>
+            </template>
+            <li v-if="query.trim() && loading" class="px-4 py-3 text-sm text-text-muted">{{ t('shell.search.loading') }}</li>
+            <li v-else-if="query.trim() && !torrents.length && !pageItems.length" class="px-4 py-3 text-sm text-text-muted">
+              {{ t('shell.search.empty', { q: query.trim() }) }}
+            </li>
+          </ul>
+
+          <div class="hidden sm:flex items-center gap-2 px-4 py-2 border-t border-border text-xs text-text-muted">
+            <kbd class="num border border-border rounded px-1">↑</kbd><kbd class="num border border-border rounded px-1">↓</kbd>
+            {{ t('shell.search.hint') }}
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { refDebounced } from '@vueuse/core';
+
+interface PaletteItem {
+  key: string;
+  label: string;
+  icon: string;
+  meta?: string;
+  to: string;
+  index: number;
+}
+interface TorrentHit {
+  infoHash: string;
+  name: string;
+  size: number;
+  stats?: { seeders: number; leechers: number };
+}
+
+const open = defineModel<boolean>('open', { required: true });
+const { t } = useI18n();
+const router = useRouter();
+const { user } = useUserSession();
+
+const input = ref<HTMLInputElement | null>(null);
+const query = ref('');
+const debounced = refDebounced(query, 200);
+const active = ref(0);
+const loading = ref(false);
+const torrents = ref<TorrentHit[]>([]);
+
+const pages = computed(() => [
+  { key: 'home', label: t('shell.nav.home'), icon: 'ph:house', to: '/' },
+  { key: 'torrents', label: t('shell.nav.torrents'), icon: 'ph:files', to: '/torrents' },
+  { key: 'bounties', label: t('shell.nav.bounties'), icon: 'ph:target', to: '/bounties' },
+  { key: 'forum', label: t('shell.nav.forum'), icon: 'ph:chats-circle', to: '/forum' },
+  { key: 'shop', label: t('shell.nav.shop'), icon: 'ph:coins', to: '/shop' },
+  { key: 'invites', label: t('shell.nav.invites'), icon: 'ph:envelope-simple', to: '/invites' },
+  ...(user.value?.isAdmin || user.value?.isModerator
+    ? [{ key: 'mod', label: t('shell.nav.mod'), icon: 'ph:shield', to: '/mod' }]
+    : []),
+  ...(user.value?.isAdmin
+    ? [{ key: 'admin', label: t('shell.nav.admin'), icon: 'ph:gear-six', to: '/admin' }]
+    : []),
+]);
+
+const pageItems = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  return q ? pages.value.filter((p) => p.label.toLowerCase().includes(q)) : pages.value;
+});
+
+const sections = computed(() => {
+  let index = 0;
+  const torrentItems: PaletteItem[] = torrents.value.map((tr) => ({
+    key: tr.infoHash,
+    label: tr.name,
+    icon: 'ph:file',
+    meta: tr.stats ? `↑${tr.stats.seeders} ↓${tr.stats.leechers}` : undefined,
+    to: `/torrents/${tr.infoHash}`,
+    index: index++,
+  }));
+  const seeAll: PaletteItem[] = query.value.trim()
+    ? [{
+        key: 'see-all',
+        label: t('shell.search.seeAll', { q: query.value.trim() }),
+        icon: 'ph:magnifying-glass',
+        to: `/torrents?search=${encodeURIComponent(query.value.trim())}`,
+        index: index++,
+      }]
+    : [];
+  const navItems: PaletteItem[] = pageItems.value.map((p) => ({ ...p, index: index++ }));
+  return [
+    { title: t('shell.search.torrents'), items: [...torrentItems, ...seeAll] },
+    { title: t('shell.search.pages'), items: navItems },
+  ];
+});
+
+const items = computed(() => sections.value.flatMap((s) => s.items));
+
+// Bumped on every new search and on reset, so late answers are dropped
+let requestId = 0;
+
+watch(debounced, async (q) => {
+  active.value = 0;
+  const id = ++requestId;
+  const term = q.trim();
+  if (term.length < 2) {
+    torrents.value = [];
+    loading.value = false;
+    return;
+  }
+  loading.value = true;
+  const res = await $fetch<{ data: TorrentHit[] }>('/api/torrents', {
+    query: { search: term, limit: 6 },
+  }).catch(() => ({ data: [] as TorrentHit[] }));
+  if (id !== requestId || term !== query.value.trim()) return;
+  torrents.value = res.data;
+  loading.value = false;
+});
+
+function move(delta: number) {
+  const count = items.value.length;
+  if (count) active.value = (active.value + delta + count) % count;
+}
+
+function choose(item: PaletteItem | undefined) {
+  if (!item) return;
+  close();
+  router.push(item.to);
+}
+
+function close() {
+  open.value = false;
+}
+
+// Focus moves into the palette on open and back to where it was on close
+let returnFocus: HTMLElement | null = null;
+
+watch(open, async (isOpen) => {
+  requestId++;
+  loading.value = false;
+  if (isOpen) {
+    returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    query.value = '';
+    torrents.value = [];
+    active.value = 0;
+    await nextTick();
+    input.value?.focus();
+  } else {
+    returnFocus?.focus();
+    returnFocus = null;
+  }
+});
+
+// ⌘K / Ctrl+K anywhere, and "/" outside text fields
+function onKeydown(event: KeyboardEvent) {
+  const target = event.target as HTMLElement | null;
+  const typing = target && (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+    event.preventDefault();
+    open.value = !open.value;
+  } else if (event.key === '/' && !typing && !open.value) {
+    event.preventDefault();
+    open.value = true;
+  }
+}
+onMounted(() => document.addEventListener('keydown', onKeydown));
+onUnmounted(() => document.removeEventListener('keydown', onKeydown));
+</script>
diff --git a/app/components/shell/TransferMeter.vue b/app/components/shell/TransferMeter.vue
new file mode 100644
index 00000000..17a06740
--- /dev/null
+++ b/app/components/shell/TransferMeter.vue
@@ -0,0 +1,64 @@
+<template>
+  <!--
+    The one expressive element of the shell: upload vs download as a split
+    bar in the seed/leech colors, with the ratio. Turns violet while a global
+    freeleech is on (downloads do not count).
+  -->
+  <div class="flex items-center gap-3" :aria-label="t('shell.meter.label')" role="group">
+    <div class="hidden md:flex flex-col gap-1 w-40">
+      <div class="flex justify-between text-2xs num leading-none">
+        <span class="text-seed" :title="t('shell.meter.uploaded')">
+          <Icon name="ph:arrow-up" class="inline-block align-[-1px]" aria-hidden="true" /> {{ formatSize(uploaded) }}
+        </span>
+        <span :class="freeleech ? 'text-free' : 'text-leech'" :title="t('shell.meter.downloaded')">
+          {{ formatSize(downloaded) }} <Icon name="ph:arrow-down" class="inline-block align-[-1px]" aria-hidden="true" />
+        </span>
+      </div>
+      <div class="h-1 rounded-full overflow-hidden flex bg-bg-hover" aria-hidden="true">
+        <template v-if="uploaded + downloaded > 0">
+          <span class="bg-seed" :style="{ width: `${upShare}%` }" />
+          <span :class="freeleech ? 'bg-free' : 'bg-leech'" class="flex-1" />
+        </template>
+      </div>
+    </div>
+    <div class="flex items-baseline gap-1.5 leading-none" :title="t('shell.meter.ratio')">
+      <span class="text-2xs text-text-muted">{{ t('shell.meter.ratio') }}</span>
+      <span class="num text-sm font-medium" :class="ratioClass">{{ ratioLabel }}</span>
+    </div>
+    <button
+      type="button"
+      class="p-1 rounded btn-ghost"
+      :title="t('shell.meter.refresh')"
+      :aria-label="t('shell.meter.refresh')"
+      @click="emit('refresh')"
+    >
+      <Icon name="ph:arrows-clockwise" class="block text-sm" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ uploaded: number; downloaded: number; freeleech: boolean }>();
+const emit = defineEmits<{ refresh: [] }>();
+const { t } = useI18n();
+
+const upShare = computed(() => {
+  const total = props.uploaded + props.downloaded;
+  return total > 0 ? Math.round((props.uploaded / total) * 100) : 50;
+});
+
+const ratio = computed(() =>
+  props.downloaded === 0 ? (props.uploaded > 0 ? Infinity : 0) : props.uploaded / props.downloaded
+);
+
+const ratioLabel = computed(() =>
+  ratio.value === Infinity ? '∞' : ratio.value.toFixed(2)
+);
+
+const ratioClass = computed(() => {
+  if (props.uploaded === 0 && props.downloaded === 0) return 'text-text-secondary';
+  if (ratio.value < 0.5) return 'text-danger';
+  if (ratio.value < 1) return 'text-leech';
+  return 'text-seed';
+});
+</script>
diff --git a/app/components/shell/UserMenu.vue b/app/components/shell/UserMenu.vue
new file mode 100644
index 00000000..00733fed
--- /dev/null
+++ b/app/components/shell/UserMenu.vue
@@ -0,0 +1,170 @@
+<template>
+  <div ref="root" class="relative">
+    <button
+      type="button"
+      class="flex items-center gap-2 pl-1 pr-2 py-1 rounded btn-ghost"
+      :aria-expanded="open"
+      aria-haspopup="menu"
+      :aria-label="t('shell.user.open')"
+      @click="toggle"
+    >
+      <span class="w-7 h-7 rounded-full bg-bg-tertiary border border-border overflow-hidden flex items-center justify-center">
+        <img v-if="avatarUrl" :src="avatarUrl" alt="" class="w-full h-full object-cover" />
+        <Icon v-else name="ph:user" class="text-text-muted" />
+      </span>
+      <span class="hidden sm:block text-sm font-medium text-text-primary max-w-[10rem] truncate">{{ user?.username }}</span>
+      <Icon name="ph:caret-down" class="text-xs text-text-muted" aria-hidden="true" />
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="opacity-0 -translate-y-1"
+      leave-active-class="transition duration-75 ease-in"
+      leave-to-class="opacity-0 -translate-y-1"
+    >
+      <div
+        v-if="open"
+        class="absolute right-0 top-full mt-2 w-72 card shadow-lg shadow-scrim/10 overflow-hidden z-50"
+        role="menu"
+      >
+        <div class="px-4 py-3 border-b border-border">
+          <p class="text-sm font-medium truncate">{{ user?.username }}</p>
+          <p v-if="user?.isAdmin || user?.isModerator" class="text-xs text-text-muted">
+            {{ user?.isAdmin ? t('common.admin') : t('common.moderator') }}
+          </p>
+        </div>
+
+        <!-- Passkey: needed for torrent clients, copy it in one click -->
+        <div class="px-4 py-3 border-b border-border">
+          <p class="text-xs text-text-muted mb-1">{{ t('shell.user.passkey') }}</p>
+          <div class="flex items-center gap-2">
+            <code class="num text-xs text-text-secondary truncate flex-1">{{ passkey ?? '…' }}</code>
+            <button
+              type="button"
+              class="p-1 rounded btn-ghost shrink-0"
+              :disabled="!passkey"
+              :title="copied ? t('shell.user.copied') : t('shell.user.copy')"
+              :aria-label="t('shell.user.copy')"
+              @click="copyPasskey"
+            >
+              <Icon :name="copied ? 'ph:check' : 'ph:copy'" class="block text-sm" />
+            </button>
+          </div>
+        </div>
+
+        <div class="py-1 border-b border-border">
+          <NuxtLink
+            to="/shop"
+            class="flex items-center justify-between px-4 py-2 text-sm text-text-secondary hover:text-text-primary hover:bg-bg-hover"
+            role="menuitem"
+            @click="open = false"
+          >
+            <span class="flex items-center gap-2"><Icon name="ph:coins" class="text-text-muted" />{{ t('shell.nav.shop') }}</span>
+            <span v-if="points !== null" class="num text-xs text-free">{{ t('shell.user.points', { n: Math.floor(points).toLocaleString(locale) }) }}</span>
+          </NuxtLink>
+          <NuxtLink
+            v-if="user"
+            :to="`/users/${user.id}`"
+            class="flex items-center gap-2 px-4 py-2 text-sm text-text-secondary hover:text-text-primary hover:bg-bg-hover"
+            role="menuitem"
+            @click="open = false"
+          >
+            <Icon name="ph:user" class="text-text-muted" />{{ t('shell.nav.profile') }}
+          </NuxtLink>
+        </div>
+
+        <div class="px-4 py-3 border-b border-border space-y-2.5">
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-text-muted">{{ t('shell.user.theme') }}</span>
+            <ThemeSwitcher />
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-text-muted">{{ t('shell.user.language') }}</span>
+            <LanguageSwitcher />
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-danger hover:bg-danger/10"
+          role="menuitem"
+          @click="emit('logout')"
+        >
+          <Icon name="ph:sign-out" />{{ t('shell.user.signOut') }}
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{ logout: [] }>();
+const { t, locale } = useI18n();
+const { user } = useUserSession();
+
+const root = ref<HTMLElement | null>(null);
+const open = ref(false);
+const passkey = ref<string | null>(null);
+const points = ref<number | null>(null);
+const avatarUrl = ref<string | null>(null);
+const copied = ref(false);
+
+// Passkey and balance are not in the client session: load them on demand.
+// The balance changes while seeding, so it is refreshed on every opening.
+async function loadAccount() {
+  const me = await $fetch<{ enabled: boolean; points: number; avatarUrl: string | null }>('/api/bonus/me').catch(() => null);
+  if (me) {
+    points.value = me.enabled ? me.points : null;
+    avatarUrl.value = me.avatarUrl;
+  }
+}
+
+function toggle() {
+  open.value = !open.value;
+  if (!open.value) return;
+  if (!passkey.value) {
+    $fetch<{ passkey: string }>('/api/auth/passkey')
+      .then((res) => (passkey.value = res.passkey))
+      .catch(() => {});
+  }
+  loadAccount();
+}
+
+async function copyPasskey() {
+  if (!passkey.value) return;
+  try {
+    await navigator.clipboard.writeText(passkey.value);
+  } catch {
+    // Clipboard unavailable (insecure context) or denied: keep the button as is
+    return;
+  }
+  copied.value = true;
+  setTimeout(() => (copied.value = false), 1500);
+}
+
+function onClickOutside(event: MouseEvent) {
+  if (root.value && !root.value.contains(event.target as Node)) open.value = false;
+}
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') open.value = false;
+}
+
+onMounted(() => {
+  loadAccount();
+  document.addEventListener('click', onClickOutside);
+  document.addEventListener('keydown', onKeydown);
+});
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside);
+  document.removeEventListener('keydown', onKeydown);
+});
+
+// Another account signed in: drop what belonged to the previous one
+watch(() => user.value?.id, (id) => {
+  passkey.value = null;
+  points.value = null;
+  avatarUrl.value = null;
+  if (id) loadAccount();
+  else open.value = false;
+});
+</script>
diff --git a/app/composables/useTheme.ts b/app/composables/useTheme.ts
new file mode 100644
index 00000000..8885ca48
--- /dev/null
+++ b/app/composables/useTheme.ts
@@ -0,0 +1,47 @@
+/**
+ * Color theme: follows the system by default, or a user choice kept in a
+ * cookie. Applied as data-theme on <html> during SSR, so there is no flash.
+ */
+export type ThemePreference = 'system' | 'light' | 'dark';
+
+const THEME_COOKIE = 'trackarr_theme';
+
+const THEMES: readonly string[] = ['system', 'light', 'dark'];
+
+export function isThemePreference(value: unknown): value is ThemePreference {
+  return typeof value === 'string' && THEMES.includes(value);
+}
+
+export function useTheme() {
+  const cookie = useCookie<string>(THEME_COOKIE, {
+    default: () => 'system',
+    maxAge: 60 * 60 * 24 * 365,
+    sameSite: 'lax',
+    path: '/',
+  });
+  // A stale or edited cookie falls back to the system theme
+  const preference = computed<ThemePreference>({
+    get: () => (isThemePreference(cookie.value) ? cookie.value : 'system'),
+    set: (value) => (cookie.value = value),
+  });
+
+  function setTheme(value: ThemePreference) {
+    preference.value = value;
+  }
+
+  return { preference, setTheme };
+}
+
+/**
+ * Call once from the root layout/app to bind the preference to <html>
+ */
+export function useThemeAttribute() {
+  const { preference } = useTheme();
+  useHead({
+    htmlAttrs: {
+      'data-theme': computed(() =>
+        preference.value === 'system' ? undefined : preference.value
+      ),
+    },
+  });
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index d88c5564..d39b9e5d 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,346 +1,104 @@
 <template>
-  <div
-    class="min-h-screen flex flex-col bg-bg-primary text-text-primary selection:bg-white selection:text-black"
-  >
-    <!-- Header -->
-    <header
-      class="sticky top-0 z-50 border-b border-border bg-bg-primary/80 backdrop-blur-md"
+  <div class="min-h-screen bg-bg-primary text-text-primary">
+    <a
+      href="#main"
+      class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[70] btn btn-primary"
     >
-      <div
-        class="max-w-[1400px] mx-auto px-4 h-14 flex items-center justify-between"
-      >
-        <NuxtLink to="/" class="flex items-center gap-2.5 group">
-          <div
-            class="w-7 h-7 bg-white rounded-sm flex items-center justify-center transition-transform group-hover:rotate-12 overflow-hidden"
-          >
-            <img
-              v-if="branding?.siteLogoImage"
-              :src="branding.siteLogoImage"
-              alt="Logo"
-              class="w-full h-full object-contain"
-            />
-            <Icon
-              v-else
-              :name="branding?.siteLogo || 'ph:broadcast-bold'"
-              class="text-black text-lg"
-            />
-          </div>
-          <div class="flex flex-col leading-none">
+      {{ t('shell.skip') }}
+    </a>
+
+    <ShellAppSidebar :open="sidebarOpen" :branding="branding ?? null" @close="sidebarOpen = false" />
+
+    <div class="lg:pl-60 min-h-screen flex flex-col">
+      <!-- Top bar -->
+      <header class="sticky top-0 z-20 h-14 shrink-0 flex items-center gap-3 px-4 sm:px-6 border-b border-border bg-bg-primary/90 backdrop-blur">
+        <button
+          type="button"
+          class="p-1.5 -ml-1.5 rounded btn-ghost lg:hidden"
+          :aria-label="t('shell.menu.open')"
+          aria-controls="app-sidebar"
+          :aria-expanded="sidebarOpen"
+          @click="sidebarOpen = true"
+        >
+          <Icon name="ph:list" class="block text-lg" />
+        </button>
+
+        <!-- Search opens the command palette (⌘K or /) -->
+        <button
+          type="button"
+          class="flex-1 max-w-md flex items-center gap-2.5 h-9 px-3 rounded border border-border bg-bg-secondary text-sm text-text-muted hover:border-border-hover transition-colors"
+          @click="paletteOpen = true"
+        >
+          <Icon name="ph:magnifying-glass" aria-hidden="true" />
+          <span class="truncate">
+            <span class="sm:hidden">{{ t('shell.search.trigger') }}</span>
+            <span class="hidden sm:inline">{{ t('shell.search.placeholder') }}</span>
+          </span>
+          <kbd class="hidden md:block ml-auto text-2xs num border border-border rounded px-1.5 py-0.5">{{ shortcut }}</kbd>
+        </button>
+
+        <div class="ml-auto flex items-center gap-2 sm:gap-4">
+          <ClientOnly>
             <span
-              class="text-sm tracking-tighter transition-colors"
-              :class="{
-                'font-bold': branding?.siteNameBold ?? true,
-                'font-medium': !(branding?.siteNameBold ?? true),
-              }"
-              :style="{ color: branding?.siteNameColor || '' }"
-              v-html="branding?.siteName"
-            ></span>
-            <span class="text-[10px] text-text-muted font-mono"
-              v-html="branding?.siteSubtitle"
-            ></span>
-          </div>
-        </NuxtLink>
-
-        <nav class="flex items-center gap-1">
-          <NuxtLink
-            v-for="link in visibleNavLinks"
-            :key="link.to"
-            :to="link.to"
-            class="px-3 py-1.5 text-xs font-medium rounded transition-all hover:bg-white/5"
-            active-class="bg-white/10 text-white"
-          >
-            <div class="flex items-center gap-2">
-              <Icon :name="link.icon" class="text-base" />
-              <span>{{ t(link.labelKey) }}</span>
-            </div>
-          </NuxtLink>
-        </nav>
-
-        <div class="flex items-center gap-3">
-          <!-- User Stats -->
-          <div
-            v-if="user"
-            class="hidden sm:flex items-center gap-4 px-3 py-1 border-l border-border ml-2"
-          >
-            <div class="flex flex-col items-end leading-tight">
-              <div class="flex items-center gap-1.5">
-                <Icon
-                  name="ph:arrow-up-bold"
-                  class="text-[10px] text-success"
-                />
-                <span class="text-[11px] font-mono text-text-secondary">{{
-                  formatSize(user.uploaded)
-                }}</span>
-              </div>
-              <div class="flex items-center gap-1.5">
-                <Icon
-                  name="ph:arrow-down-bold"
-                  class="text-[10px] text-error"
-                />
-                <span class="text-[11px] font-mono text-text-secondary">{{
-                  formatSize(user.downloaded)
-                }}</span>
-              </div>
-            </div>
-            <div class="flex flex-col items-center leading-tight">
-              <span
-                class="text-[9px] text-text-muted uppercase font-bold tracking-tighter"
-                >{{ t('common.ratio') }}</span
-              >
-              <span :class="['text-xs font-mono font-bold', ratioColor]">
-                {{ calculateRatio(user.uploaded, user.downloaded) }}
-              </span>
-            </div>
-            <button
-              @click="refreshStats"
-              class="p-1 rounded hover:bg-white/5 text-text-muted hover:text-text-secondary transition-colors"
-              :title="t('layout.refreshStats')"
+              v-if="freeleech"
+              class="inline-flex items-center gap-1.5 h-7 px-2.5 rounded-full bg-free/15 text-free text-xs font-medium"
+              :title="freeleechLabel"
             >
-              <Icon name="ph:arrows-clockwise" class="text-xs" />
-            </button>
-          </div>
-
-          <!-- Language -->
-          <LanguageSwitcher class="hidden md:inline-flex ml-2" />
-
-          <!-- User Menu -->
-          <div class="relative" ref="userMenuRef">
-            <button
-              @click="toggleUserMenu"
-              class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-white/5 transition-colors"
-            >
-              <div
-                class="w-7 h-7 rounded-full bg-bg-tertiary border border-border flex items-center justify-center overflow-hidden"
-              >
-                <Icon
-                  name="ph:user-circle-light"
-                  class="text-xl text-text-secondary"
-                />
-              </div>
-              <span class="text-sm font-medium">{{ user?.username }}</span>
-              <Icon name="ph:caret-down" class="text-xs text-text-muted" />
-            </button>
+              <Icon name="ph:gift" aria-hidden="true" />
+              <span class="hidden sm:inline">{{ freeleechLabel }}</span>
+            </span>
+          </ClientOnly>
 
-            <!-- Dropdown -->
-            <Transition
-              enter-active-class="transition duration-100 ease-out"
-              enter-from-class="transform scale-95 opacity-0"
-              enter-to-class="transform scale-100 opacity-100"
-              leave-active-class="transition duration-75 ease-in"
-              leave-from-class="transform scale-100 opacity-100"
-              leave-to-class="transform scale-95 opacity-0"
-            >
-              <div
-                v-if="showUserMenu"
-                class="absolute right-0 top-full mt-1 w-56 bg-bg-secondary border border-border rounded-lg shadow-xl overflow-hidden z-50"
-              >
-                <div class="px-4 py-3 border-b border-border">
-                  <p class="text-sm font-medium">
-                    {{ user?.username }}
-                  </p>
-                  <div
-                    v-if="user?.isAdmin || user?.isModerator"
-                    class="mt-1 flex gap-1"
-                  >
-                    <span
-                      v-if="user?.isAdmin"
-                      class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 bg-white/10 rounded text-text-secondary"
-                    >
-                      {{ t('common.admin') }}
-                    </span>
-                    <span
-                      v-if="user?.isModerator"
-                      class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 bg-white/10 rounded text-text-secondary"
-                    >
-                      {{ t('common.moderator') }}
-                    </span>
-                  </div>
-                </div>
-                <div class="py-1">
-                  <div class="px-4 py-2">
-                    <p
-                      class="text-[10px] uppercase tracking-wider text-text-muted mb-1"
-                    >
-                      {{ t('layout.passkey') }}
-                    </p>
-                    <code
-                      class="text-xs font-mono text-text-secondary break-all"
-                      >{{ passkey ?? '…' }}</code
-                    >
-                  </div>
-                  <NuxtLink
-                    to="/shop"
-                    class="flex items-center justify-between px-4 py-2 text-xs text-text-secondary hover:text-white hover:bg-bg-tertiary/50 transition-colors"
-                    @click="showUserMenu = false"
-                  >
-                    <span class="flex items-center gap-2">
-                      <Icon name="ph:coins" />
-                      {{ t('bonus.menu.shop') }}
-                    </span>
-                    <span v-if="bonusPoints !== null" class="font-mono text-accent">
-                      {{ t('bonus.points', { n: Math.floor(bonusPoints).toLocaleString(locale) }) }}
-                    </span>
-                  </NuxtLink>
-                </div>
-                <div class="border-t border-border py-2 px-4">
-                  <div class="grid grid-cols-2 gap-2">
-                    <div>
-                      <p
-                        class="text-[10px] uppercase tracking-wider text-text-muted mb-0.5"
-                      >
-                        {{ t('common.uploaded') }}
-                      </p>
-                      <p class="text-xs font-mono text-success">
-                        {{ formatSize(user?.uploaded || 0) }}
-                      </p>
-                    </div>
-                    <div>
-                      <p
-                        class="text-[10px] uppercase tracking-wider text-text-muted mb-0.5"
-                      >
-                        {{ t('common.downloaded') }}
-                      </p>
-                      <p class="text-xs font-mono text-error">
-                        {{ formatSize(user?.downloaded || 0) }}
-                      </p>
-                    </div>
-                    <div class="col-span-2">
-                      <p
-                        class="text-[10px] uppercase tracking-wider text-text-muted mb-0.5"
-                      >
-                        {{ t('common.ratio') }}
-                      </p>
-                      <p class="text-xs font-mono" :class="ratioColor">
-                        {{ calculateRatio(user?.uploaded, user?.downloaded) }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div class="border-t border-border py-1">
-                  <button
-                    @click="handleLogout"
-                    class="w-full px-4 py-2 text-left text-sm text-red-400 hover:bg-white/5 transition-colors flex items-center gap-2"
-                  >
-                    <Icon name="ph:sign-out" />
-                    {{ t('layout.signOut') }}
-                  </button>
-                </div>
-              </div>
-            </Transition>
-          </div>
+          <ShellTransferMeter
+            v-if="user"
+            class="hidden sm:flex"
+            :uploaded="user.uploaded"
+            :downloaded="user.downloaded"
+            :freeleech="Boolean(freeleech)"
+            @refresh="refreshStats"
+          />
+
+          <ShellUserMenu @logout="handleLogout" />
         </div>
-      </div>
-    </header>
+      </header>
 
-    <!-- Announcement Banner -->
-    <ClientOnly>
-      <Transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="opacity-0 -translate-y-2"
-        enter-to-class="opacity-100 translate-y-0"
-        leave-active-class="transition duration-150 ease-in"
-        leave-from-class="opacity-100 translate-y-0"
-        leave-to-class="opacity-0 -translate-y-2"
-      >
+      <!-- Announcement -->
+      <ClientOnly>
         <div
-          v-if="
-            announcementReady &&
-            announcement?.enabled &&
-            announcement?.message &&
-            !announcementDismissed
-          "
-          :class="[
-            'border-b',
-            announcementStyles[announcement.type || 'info'].bg,
-            announcementStyles[announcement.type || 'info'].border,
-          ]"
+          v-if="announcementReady && announcement?.enabled && announcement?.message && !announcementDismissed"
+          class="border-b"
+          :class="announcementStyle.box"
+          role="status"
         >
-          <div
-            class="max-w-[1400px] mx-auto px-4 py-2.5 flex items-center gap-3"
-          >
-            <Icon
-              :name="announcementStyles[announcement.type || 'info'].icon"
-              :class="[
-                'text-lg flex-shrink-0',
-                announcementStyles[announcement.type || 'info'].text,
-              ]"
-            />
-            <p
-              :class="[
-                'text-sm flex-1',
-                announcementStyles[announcement.type || 'info'].text,
-              ]"
-            >
-              {{ announcement.message }}
-            </p>
+          <div class="px-4 sm:px-6 py-2.5 flex items-center gap-3">
+            <Icon :name="announcementStyle.icon" class="text-lg shrink-0" :class="announcementStyle.text" aria-hidden="true" />
+            <p class="text-sm flex-1 text-text-primary">{{ announcement.message }}</p>
             <button
-              @click="dismissAnnouncement"
-              class="p-1 rounded hover:bg-white/10 transition-colors flex-shrink-0"
+              type="button"
+              class="p-1 rounded btn-ghost shrink-0"
               :title="t('layout.dismiss')"
+              :aria-label="t('layout.dismiss')"
+              @click="dismissAnnouncement"
             >
-              <Icon
-                name="ph:x"
-                :class="[
-                  'text-sm',
-                  announcementStyles[announcement.type || 'info'].text,
-                ]"
-              />
+              <Icon name="ph:x" class="block text-sm" />
             </button>
           </div>
         </div>
-      </Transition>
-    </ClientOnly>
-
-    <!-- Global freeleech -->
-    <ClientOnly>
-      <div v-if="freeleech?.active" class="border-b border-success/30 bg-success/10">
-        <div class="max-w-[1400px] mx-auto px-4 py-2.5 flex items-center gap-3">
-          <Icon name="ph:gift" class="text-lg flex-shrink-0 text-success" />
-          <p class="text-sm flex-1 text-success">
-            {{
-              freeleech.until
-                ? t('freeleech.bannerUntil', {
-                    date: new Date(freeleech.until).toLocaleString(locale, {
-                      dateStyle: 'medium',
-                      timeStyle: 'short',
-                    }),
-                  })
-                : t('freeleech.banner')
-            }}
-          </p>
-        </div>
-      </div>
-    </ClientOnly>
+      </ClientOnly>
 
-    <!-- Main Content -->
-    <main class="flex-grow max-w-[1400px] w-full mx-auto px-4 py-6">
-      <slot />
-    </main>
+      <main id="main" class="flex-1 w-full max-w-[1240px] px-4 sm:px-6 py-6 lg:py-8">
+        <slot />
+      </main>
 
-    <!-- Footer -->
-    <footer class="border-t border-border mt-auto py-6 bg-bg-secondary/30">
-      <div
-        class="max-w-[1400px] mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4"
-      >
-        <div
-          class="flex items-center gap-4 text-[10px] text-text-muted font-mono uppercase tracking-widest"
-        >
+      <footer class="border-t border-border px-4 sm:px-6 py-5 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-text-muted">
+        <div class="flex items-center gap-3">
           <span
             class="[&>p]:inline [&>p]:m-0"
-            v-html="
-              branding?.footerText ||
-              `© ${new Date().getFullYear()} ${(branding?.siteName || 'Trackarr')}`
-            "
-          ></span>
-          <template v-if="footerTagline">
-            <span class="w-1 h-1 bg-border rounded-full"></span>
-            <span>{{ footerTagline }}</span>
-          </template>
-          <span class="w-1 h-1 bg-border rounded-full md:hidden"></span>
-          <!-- Header switcher is hidden on small screens -->
-          <LanguageSwitcher class="md:hidden" />
+            v-html="branding?.footerText || `© ${new Date().getFullYear()} ${branding?.siteName || 'Trackarr'}`"
+          />
+          <span v-if="footerTagline" class="text-text-muted/80">{{ footerTagline }}</span>
         </div>
-        <div class="flex gap-6">
+        <div class="flex items-center gap-4">
           <a
             v-for="link in footerLinks"
             :key="link.url"
@@ -349,26 +107,39 @@
             rel="noopener noreferrer"
             :title="link.label"
             :aria-label="link.label"
-            class="text-text-muted hover:text-white transition-colors"
-            ><Icon :name="link.icon" class="text-xl"
-          /></a>
+            class="text-text-muted hover:text-text-primary transition-colors"
+          >
+            <Icon :name="link.icon" class="block text-lg" />
+          </a>
         </div>
-      </div>
-    </footer>
+      </footer>
+    </div>
+
+    <ShellCommandPalette v-model:open="paletteOpen" />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { FooterLink } from '~~/shared/utils/footerLinks';
+
 const { t, locale } = useI18n();
 const { user, clear, fetch } = useUserSession();
+const router = useRouter();
+const route = useRoute();
 
-// Passkey is not part of the client session: fetch it on demand
-const passkey = ref<string | null>(null);
-const bonusPoints = ref<number | null>(null);
+const sidebarOpen = ref(false);
+const paletteOpen = ref(false);
+watch(() => route.fullPath, () => (sidebarOpen.value = false));
 
-// Global freeleech banner. Reloaded when the user changes (sign in/out) and
-// every 5 minutes; the end date is checked locally so it disappears on time.
+const shortcut = ref('Ctrl K');
+onMounted(() => {
+  if (/Mac|iPhone|iPad/.test(navigator.platform)) shortcut.value = '⌘K';
+});
+
+// ---------------------------------------------------------------------------
+// Global freeleech. Reloaded when the user changes (sign in/out) and every
+// 5 minutes; the end date is checked locally so it disappears on time.
+// ---------------------------------------------------------------------------
 type FreeleechBanner = { active: boolean; until: string | null };
 const freeleechState = ref<FreeleechBanner | null>(null);
 const freeleechNow = ref(Date.now());
@@ -381,6 +152,14 @@ const freeleech = computed(() => {
   );
   return active ? state : null;
 });
+const freeleechLabel = computed(() => {
+  if (!freeleech.value?.until) return t('shell.freeleech.pill');
+  const time = new Date(freeleech.value.until).toLocaleString(locale.value, {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  });
+  return t('shell.freeleech.until', { time });
+});
 async function loadFreeleech() {
   if (!user.value) {
     freeleechState.value = null;
@@ -401,12 +180,10 @@ onUnmounted(() => {
   clearInterval(freeleechPoll);
   clearInterval(freeleechTick);
 });
-const router = useRouter();
-
-const showUserMenu = ref(false);
-const userMenuRef = ref<HTMLElement | null>(null);
 
-// Fetch site branding
+// ---------------------------------------------------------------------------
+// Branding, title and favicon
+// ---------------------------------------------------------------------------
 const { data: branding } = await useFetch<{
   siteName: string;
   siteLogo: string;
@@ -434,7 +211,6 @@ const footerTagline = computed(() => {
     : tagline;
 });
 
-// Set dynamic favicon and title template
 useHead({
   titleTemplate: computed(() => {
     const suffix =
@@ -459,7 +235,9 @@ useHead({
   ],
 });
 
-// Fetch announcement
+// ---------------------------------------------------------------------------
+// Announcement (dismissed per message, for the browser session)
+// ---------------------------------------------------------------------------
 const { data: announcement } = await useFetch<{
   enabled: boolean;
   message?: string;
@@ -469,152 +247,49 @@ const { data: announcement } = await useFetch<{
 const announcementDismissed = ref(false);
 const announcementReady = ref(false);
 
-// Simple hash function for announcement message
+const announcementStyles = {
+  info: { box: 'bg-bg-secondary border-border', text: 'text-text-secondary', icon: 'ph:info' },
+  warning: { box: 'bg-leech/10 border-leech/30', text: 'text-leech', icon: 'ph:warning' },
+  error: { box: 'bg-danger/10 border-danger/30', text: 'text-danger', icon: 'ph:warning-circle' },
+};
+const announcementStyle = computed(
+  () => announcementStyles[announcement.value?.type || 'info']
+);
+
 function hashString(str: string): string {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
+    hash = (hash << 5) - hash + str.charCodeAt(i);
     hash = hash & hash;
   }
   return Math.abs(hash).toString(36);
 }
 
-const announcementStyles = {
-  info: {
-    bg: 'bg-blue-500/10',
-    border: 'border-blue-500/30',
-    text: 'text-blue-400',
-    icon: 'ph:info',
-  },
-  warning: {
-    bg: 'bg-yellow-500/10',
-    border: 'border-yellow-500/30',
-    text: 'text-yellow-400',
-    icon: 'ph:warning',
-  },
-  error: {
-    bg: 'bg-red-500/10',
-    border: 'border-red-500/30',
-    text: 'text-red-400',
-    icon: 'ph:warning-circle',
-  },
-};
-
 function dismissAnnouncement() {
   announcementDismissed.value = true;
-  if (import.meta.client && announcement.value?.message) {
-    const messageHash = hashString(announcement.value.message);
-    sessionStorage.setItem(`announcement_dismissed_${messageHash}`, 'true');
+  if (announcement.value?.message) {
+    sessionStorage.setItem(`announcement_dismissed_${hashString(announcement.value.message)}`, 'true');
   }
 }
 
 onMounted(() => {
-  if (import.meta.client && announcement.value?.message) {
-    const messageHash = hashString(announcement.value.message);
+  if (announcement.value?.message) {
     announcementDismissed.value =
-      sessionStorage.getItem(`announcement_dismissed_${messageHash}`) ===
-      'true';
+      sessionStorage.getItem(`announcement_dismissed_${hashString(announcement.value.message)}`) === 'true';
   }
-  // Use nextTick to ensure transition is applied after DOM is ready
-  nextTick(() => {
-    announcementReady.value = true;
-  });
+  nextTick(() => (announcementReady.value = true));
 });
 
-// Refresh user stats from database
+// ---------------------------------------------------------------------------
+// Account
+// ---------------------------------------------------------------------------
 async function refreshStats() {
   await $fetch('/api/auth/status');
   await fetch();
 }
 
-const navLinks = [
-  { to: '/', labelKey: 'nav.dashboard', icon: 'ph:squares-four', adminOnly: false },
-  {
-    to: '/search',
-    labelKey: 'nav.search',
-    icon: 'ph:magnifying-glass',
-    adminOnly: false,
-  },
-  { to: '/torrents', labelKey: 'nav.torrents', icon: 'ph:files', adminOnly: false },
-  {
-    to: '/forum',
-    labelKey: 'nav.forum',
-    icon: 'ph:chat-centered-text',
-    adminOnly: false,
-  },
-  { to: '/shop', labelKey: 'bonus.nav.shop', icon: 'ph:storefront', adminOnly: false },
-  { to: '/bounties', labelKey: 'bonus.nav.bounties', icon: 'ph:target', adminOnly: false },
-  { to: '/admin', labelKey: 'nav.admin', icon: 'ph:shield-check', adminOnly: true },
-  { to: '/mod', labelKey: 'nav.mod', icon: 'ph:shield', modOnly: true },
-];
-
-const visibleNavLinks = computed(() =>
-  navLinks.filter((link) => {
-    if (link.adminOnly && !user.value?.isAdmin) return false;
-    if (link.modOnly && !user.value?.isAdmin && !user.value?.isModerator)
-      return false;
-    return true;
-  })
-);
-
-function toggleUserMenu() {
-  showUserMenu.value = !showUserMenu.value;
-  if (showUserMenu.value && !passkey.value) {
-    $fetch<{ passkey: string }>('/api/auth/passkey')
-      .then((res) => (passkey.value = res.passkey))
-      .catch(() => {});
-  }
-  // Balance changes while seeding: refresh each time the menu opens
-  if (showUserMenu.value) {
-    $fetch<{ enabled: boolean; points: number }>('/api/bonus/me')
-      .then((res) => (bonusPoints.value = res.enabled ? res.points : null))
-      .catch(() => {});
-  }
-}
-
-// Close on outside click
-function handleClickOutside(event: MouseEvent) {
-  if (userMenuRef.value && !userMenuRef.value.contains(event.target as Node)) {
-    showUserMenu.value = false;
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-
 async function handleLogout() {
-  showUserMenu.value = false;
-  passkey.value = null;
   await clear();
   router.push('/auth/login');
 }
-
-function formatSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
-}
-
-function calculateRatio(up = 0, down = 0) {
-  if (down === 0) return up > 0 ? '∞' : '0.00';
-  return (up / down).toFixed(2);
-}
-
-const ratioColor = computed(() => {
-  const up = user.value?.uploaded ?? 0;
-  const down = user.value?.downloaded ?? 0;
-  if (down === 0) return up > 0 ? 'text-success' : 'text-text-secondary';
-
-  const ratio = up / down;
-  if (ratio < 0.5) return 'text-error';
-  if (ratio < 1.0) return 'text-warning';
-  return 'text-success';
-});
 </script>
diff --git a/app/pages/auth/register.vue b/app/pages/auth/register.vue
index 254981c9..5031dab9 100644
--- a/app/pages/auth/register.vue
+++ b/app/pages/auth/register.vue
@@ -73,7 +73,7 @@
           class="mb-6 p-3 bg-amber-500/10 border border-amber-500/20 rounded"
         >
           <p class="text-amber-400 text-sm">
-            <Icon name="ph:warning" class="inline mr-1" />
+            <Icon name="ph:warning" class="inline-block align-[-2px] mr-1" />
             {{ t('auth.register.firstAccountWarning') }}
           </p>
         </div>
@@ -81,7 +81,7 @@
         <!-- ZKE Warning -->
         <div class="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded">
           <p class="text-red-400 text-sm">
-            <Icon name="ph:shield-warning" class="inline mr-1" />
+            <Icon name="ph:shield-warning" class="inline-block align-[-2px] mr-1" />
             <strong>{{ t('auth.register.zkeTitle') }}</strong>
             {{ t('auth.register.zkeText') }}
           </p>
@@ -175,7 +175,7 @@
               class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded"
             >
               <p class="text-red-400 text-sm">
-                <Icon name="ph:shield-warning" class="inline mr-1" />
+                <Icon name="ph:shield-warning" class="inline-block align-[-2px] mr-1" />
                 {{ t('auth.register.panicWarning') }}
               </p>
             </div>
diff --git a/app/pages/forum/index.vue b/app/pages/forum/index.vue
index 2c16ab62..6440bfcf 100644
--- a/app/pages/forum/index.vue
+++ b/app/pages/forum/index.vue
@@ -85,7 +85,7 @@
     <!-- Create Category Modal -->
     <div
       v-if="showCreateCategory"
-      class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+      class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-scrim/80 backdrop-blur-sm"
     >
       <div
         class="bg-bg-secondary border border-border rounded-lg w-full max-w-md p-6 space-y-4"
@@ -148,7 +148,7 @@
     <!-- Edit Category Modal -->
     <div
       v-if="showEditCategory"
-      class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+      class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-scrim/80 backdrop-blur-sm"
     >
       <div
         class="bg-bg-secondary border border-border rounded-lg w-full max-w-md p-6 space-y-4"
@@ -209,7 +209,7 @@
     <!-- Delete Confirmation Modal -->
     <div
       v-if="showDeleteConfirm"
-      class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
+      class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-scrim/80 backdrop-blur-sm"
     >
       <div
         class="bg-bg-secondary border border-border rounded-lg w-full max-w-md p-6 space-y-4"
diff --git a/app/pages/torrents/[hash].vue b/app/pages/torrents/[hash].vue
index 5c164f8c..4576c3ef 100644
--- a/app/pages/torrents/[hash].vue
+++ b/app/pages/torrents/[hash].vue
@@ -248,7 +248,7 @@
     <Teleport to="body">
       <div
         v-if="showDeleteConfirm"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-scrim/60 backdrop-blur-sm"
         @click.self="showDeleteConfirm = false"
       >
         <div
diff --git a/i18n/locales/en/app.json b/i18n/locales/en/app.json
index ef328618..9673f5d4 100644
--- a/i18n/locales/en/app.json
+++ b/i18n/locales/en/app.json
@@ -950,5 +950,68 @@
       "stop": "Stop freeleech",
       "confirmStop": "Stop the global freeleech now?"
     }
+  },
+  "shell": {
+    "skip": "Skip to content",
+    "groups": {
+      "browse": "Browse",
+      "community": "Community",
+      "account": "My account",
+      "staff": "Staff"
+    },
+    "nav": {
+      "home": "Home",
+      "torrents": "Torrents",
+      "bounties": "Bounties",
+      "forum": "Forum",
+      "shop": "Bonus shop",
+      "invites": "Invitations",
+      "profile": "My profile",
+      "mod": "Moderation",
+      "admin": "Administration"
+    },
+    "menu": {
+      "open": "Open navigation",
+      "close": "Close navigation",
+      "label": "Main navigation"
+    },
+    "search": {
+      "trigger": "Search",
+      "placeholder": "Search torrents, IMDb ID or info hash",
+      "pages": "Pages",
+      "torrents": "Torrents",
+      "seeAll": "Show all results for “{q}”",
+      "empty": "No torrent matches “{q}”",
+      "loading": "Searching…",
+      "close": "Close search",
+      "hint": "to navigate, Enter to open"
+    },
+    "meter": {
+      "uploaded": "Uploaded",
+      "downloaded": "Downloaded",
+      "ratio": "Ratio",
+      "refresh": "Refresh my stats",
+      "label": "Your transfer"
+    },
+    "freeleech": {
+      "pill": "Freeleech",
+      "until": "Freeleech until {time}"
+    },
+    "user": {
+      "open": "Account menu",
+      "passkey": "Passkey",
+      "copy": "Copy passkey",
+      "copied": "Copied",
+      "points": "{n} points",
+      "signOut": "Sign out",
+      "theme": "Theme",
+      "language": "Language"
+    },
+    "theme": {
+      "label": "Theme",
+      "light": "Light",
+      "system": "System",
+      "dark": "Dark"
+    }
   }
 }
diff --git a/i18n/locales/fr/app.json b/i18n/locales/fr/app.json
index cbd7840a..2e72f0aa 100644
--- a/i18n/locales/fr/app.json
+++ b/i18n/locales/fr/app.json
@@ -950,5 +950,68 @@
       "stop": "Arrêter le freeleech",
       "confirmStop": "Arrêter le freeleech global maintenant ?"
     }
+  },
+  "shell": {
+    "skip": "Aller au contenu",
+    "groups": {
+      "browse": "Parcourir",
+      "community": "Communauté",
+      "account": "Mon compte",
+      "staff": "Équipe"
+    },
+    "nav": {
+      "home": "Accueil",
+      "torrents": "Torrents",
+      "bounties": "Bounties",
+      "forum": "Forum",
+      "shop": "Boutique bonus",
+      "invites": "Invitations",
+      "profile": "Mon profil",
+      "mod": "Modération",
+      "admin": "Administration"
+    },
+    "menu": {
+      "open": "Ouvrir la navigation",
+      "close": "Fermer la navigation",
+      "label": "Navigation principale"
+    },
+    "search": {
+      "trigger": "Rechercher",
+      "placeholder": "Rechercher un torrent, un ID IMDb ou un info hash",
+      "pages": "Pages",
+      "torrents": "Torrents",
+      "seeAll": "Voir tous les résultats pour « {q} »",
+      "empty": "Aucun torrent ne correspond à « {q} »",
+      "loading": "Recherche…",
+      "close": "Fermer la recherche",
+      "hint": "pour naviguer, Entrée pour ouvrir"
+    },
+    "meter": {
+      "uploaded": "Envoyé",
+      "downloaded": "Reçu",
+      "ratio": "Ratio",
+      "refresh": "Actualiser mes stats",
+      "label": "Vos transferts"
+    },
+    "freeleech": {
+      "pill": "Freeleech",
+      "until": "Freeleech jusqu'à {time}"
+    },
+    "user": {
+      "open": "Menu du compte",
+      "passkey": "Passkey",
+      "copy": "Copier la passkey",
+      "copied": "Copiée",
+      "points": "{n} points",
+      "signOut": "Se déconnecter",
+      "theme": "Thème",
+      "language": "Langue"
+    },
+    "theme": {
+      "label": "Thème",
+      "light": "Clair",
+      "system": "Système",
+      "dark": "Sombre"
+    }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index be6978eb..f9f75296 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.6.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@fontsource/ibm-plex-mono": "^5.3.0",
+        "@fontsource/ibm-plex-sans": "^5.3.0",
         "@nuxtjs/i18n": "^10.6.0",
         "@nuxtjs/tailwindcss": "6.14.0",
         "@pinia/nuxt": "0.11.3",
@@ -1669,6 +1671,24 @@
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
+    "node_modules/@fontsource/ibm-plex-mono": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.3.0.tgz",
+      "integrity": "sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/ibm-plex-sans": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.3.0.tgz",
+      "integrity": "sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
diff --git a/package.json b/package.json
index eb135b86..e28f3358 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "publish:public": "./scripts/publish-public.sh"
   },
   "dependencies": {
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "@fontsource/ibm-plex-sans": "^5.3.0",
     "@nuxtjs/i18n": "^10.6.0",
     "@nuxtjs/tailwindcss": "6.14.0",
     "@pinia/nuxt": "0.11.3",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ac52b439..83a993d0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,9 @@
 import type { Config } from 'tailwindcss'
 
+// Colors are CSS variables (RGB channels) defined in app/assets/css/main.css,
+// so the light and dark themes swap them without touching components.
+const token = (name: string) => `rgb(var(--${name}) / <alpha-value>)`
+
 export default {
   content: [
     './app/**/*.{vue,ts}',
@@ -10,36 +14,51 @@ export default {
   theme: {
     extend: {
       colors: {
-        // Monochrome palette
         bg: {
-          primary: '#0a0a0a',
-          secondary: '#141414',
-          tertiary: '#1a1a1a',
-          hover: '#252525'
+          primary: token('bg'),
+          secondary: token('surface'),
+          tertiary: token('raised'),
+          hover: token('hover')
         },
         text: {
-          primary: '#fafafa',
-          secondary: '#a1a1a1',
-          muted: '#666666'
+          primary: token('ink'),
+          secondary: token('ink-2'),
+          muted: token('ink-3')
         },
         border: {
-          DEFAULT: '#2a2a2a',
-          hover: '#3a3a3a'
+          DEFAULT: token('line'),
+          hover: token('line-strong')
         },
+        // Meaningful colors: upload/seed, download/leech, freeleech (the one accent)
+        seed: token('seed'),
+        leech: token('leech'),
+        free: token('free'),
         accent: {
-          DEFAULT: '#ffffff',
-          muted: '#888888'
+          DEFAULT: token('free'),
+          muted: token('ink-3')
         },
-        success: '#22c55e',
-        warning: '#eab308',
-        error: '#ef4444'
+        success: token('seed'),
+        warning: token('leech'),
+        error: token('danger'),
+        danger: token('danger'),
+        // "white"/"black" are contrast inks: they flip with the theme, so the
+        // existing white-on-black controls stay legible in light mode too
+        white: token('contrast'),
+        black: token('contrast-inv'),
+        // Fixed colors that must not flip: overlays and shadows stay dark,
+        // text on colored fills and uploaded logos sit on real white
+        scrim: 'rgb(0 0 0 / <alpha-value>)',
+        paper: 'rgb(255 255 255 / <alpha-value>)'
       },
       fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Fira Code', 'monospace']
+        sans: ['"IBM Plex Sans"', 'system-ui', 'sans-serif'],
+        mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace']
       },
       fontSize: {
-        '2xs': ['0.65rem', { lineHeight: '0.85rem' }]
+        '2xs': ['0.6875rem', { lineHeight: '1rem' }]
+      },
+      borderRadius: {
+        DEFAULT: '0.3125rem'
       }
     }
   },
diff --git a/tests/theme.test.ts b/tests/theme.test.ts
new file mode 100644
index 00000000..ccd7656c
--- /dev/null
+++ b/tests/theme.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { isThemePreference } from '../app/composables/useTheme';
+
+describe('isThemePreference', () => {
+  it('accepts the three known values', () => {
+    expect(['system', 'light', 'dark'].every(isThemePreference)).toBe(true);
+  });
+
+  it('rejects anything else', () => {
+    for (const value of ['blue', '', 'Dark', undefined, null, 1]) {
+      expect(isThemePreference(value)).toBe(false);
+    }
+  });
+});