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/CategorySidebar.vue b/app/components/CategorySidebar.vue
deleted file mode 100644
index 6def2981..00000000
--- a/app/components/CategorySidebar.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-  <aside class="w-56 shrink-0 hidden lg:block">
-    <div class="sticky top-20">
-      <div class="flex items-center gap-2 px-3 py-2 mb-2">
-        <Icon name="ph:folders-bold" class="text-text-muted" />
-        <h3 class="text-xs font-bold uppercase tracking-wider">
-          {{ t('sidebar.categories') }}
-        </h3>
-      </div>
-
-      <nav class="space-y-0.5">
-        <!-- All Torrents -->
-        <button
-          class="w-full text-left px-3 py-2 rounded-md text-xs font-medium transition-colors flex items-center gap-2"
-          :class="[
-            !selectedId
-              ? 'bg-white/10 text-white'
-              : 'text-text-secondary hover:bg-white/5 hover:text-white',
-          ]"
-          @click="$emit('select', '')"
-        >
-          <Icon name="ph:list-bold" class="text-sm" />
-          <span>{{ t('sidebar.allTorrents') }}</span>
-        </button>
-
-        <!-- Categories -->
-        <div v-for="category in categories" :key="category.id">
-          <button
-            class="w-full text-left px-3 py-2 rounded-md text-xs font-medium transition-colors flex items-center justify-between group"
-            :class="[
-              selectedId === category.id
-                ? 'bg-white/10 text-white'
-                : 'text-text-secondary hover:bg-white/5 hover:text-white',
-            ]"
-            @click="handleCategoryClick(category)"
-          >
-            <span class="flex items-center gap-2">
-              <Icon :name="getCategoryIcon(category.slug)" class="text-sm" />
-              <span>{{ category.name }}</span>
-            </span>
-            <Icon
-              v-if="category.subcategories?.length"
-              name="ph:caret-right-bold"
-              class="text-[10px] text-text-muted transition-transform"
-              :class="{ 'rotate-90': expandedIds.has(category.id) }"
-            />
-          </button>
-
-          <!-- Subcategories -->
-          <Transition
-            enter-active-class="transition-all duration-200 ease-out"
-            enter-from-class="opacity-0 max-h-0"
-            enter-to-class="opacity-100 max-h-96"
-            leave-active-class="transition-all duration-150 ease-in"
-            leave-from-class="opacity-100 max-h-96"
-            leave-to-class="opacity-0 max-h-0"
-          >
-            <div
-              v-if="expandedIds.has(category.id) && category.subcategories?.length"
-              class="overflow-hidden ml-4 border-l border-border/50 pl-2 mt-0.5 space-y-0.5"
-            >
-              <button
-                v-for="sub in category.subcategories"
-                :key="sub.id"
-                class="w-full text-left px-3 py-1.5 rounded-md text-[11px] font-medium transition-colors flex items-center gap-2"
-                :class="[
-                  selectedId === sub.id
-                    ? 'bg-white/10 text-white'
-                    : 'text-text-muted hover:bg-white/5 hover:text-text-secondary',
-                ]"
-                @click="$emit('select', sub.id)"
-              >
-                <span>{{ sub.name }}</span>
-              </button>
-            </div>
-          </Transition>
-        </div>
-      </nav>
-    </div>
-  </aside>
-</template>
-
-<script setup lang="ts">
-interface Category {
-  id: string;
-  name: string;
-  slug: string;
-  parentId: string | null;
-  subcategories?: Category[];
-}
-
-const props = defineProps<{
-  categories: Category[];
-  selectedId: string;
-}>();
-
-const emit = defineEmits<{
-  select: [id: string];
-}>();
-
-const { t } = useI18n();
-const expandedIds = ref<Set<string>>(new Set());
-
-// Auto-expand parent if a subcategory is selected
-watch(
-  () => props.selectedId,
-  (newId) => {
-    if (!newId) return;
-    for (const cat of props.categories) {
-      if (cat.subcategories?.some((sub) => sub.id === newId)) {
-        expandedIds.value.add(cat.id);
-        break;
-      }
-    }
-  },
-  { immediate: true }
-);
-
-function handleCategoryClick(category: Category) {
-  if (category.subcategories?.length) {
-    // Toggle expand/collapse
-    if (expandedIds.value.has(category.id)) {
-      expandedIds.value.delete(category.id);
-    } else {
-      expandedIds.value.add(category.id);
-    }
-  }
-  // Always emit select for the category
-  emit('select', category.id);
-}
-
-function getCategoryIcon(slug: string): string {
-  const icons: Record<string, string> = {
-    movies: 'ph:film-slate-bold',
-    tv: 'ph:television-bold',
-    music: 'ph:music-notes-bold',
-    games: 'ph:game-controller-bold',
-    software: 'ph:app-window-bold',
-    ebooks: 'ph:book-open-bold',
-    anime: 'ph:shooting-star-bold',
-    xxx: 'ph:prohibit-bold',
-    other: 'ph:package-bold',
-  };
-  return icons[slug] || 'ph:folder-bold';
-}
-</script>
diff --git a/app/components/EditTorrentModal.vue b/app/components/EditTorrentModal.vue
index c4bc4ace..b0d8dbaa 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
@@ -15,7 +15,7 @@
           <div class="flex items-center gap-2">
             <Icon name="ph:pencil-simple-bold" class="text-text-muted" />
             <h3
-              class="text-xs font-bold uppercase tracking-widest text-text-primary"
+              class="text-xs font-bold text-text-primary"
             >
               {{ t('edit.title') }}
             </h3>
@@ -34,7 +34,7 @@
           <!-- Torrent Name -->
           <div class="space-y-2">
             <label
-              class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1"
+              class="text-xs font-medium text-text-muted ml-1"
               >{{ t('edit.torrentName') }}</label
             >
             <input
@@ -50,12 +50,12 @@
           <!-- Category Select -->
           <div class="space-y-2">
             <label
-              class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1"
+              class="text-xs font-medium text-text-muted ml-1"
               >{{ t('common.category') }}</label
             >
             <select
               v-model="selectedCategoryId"
-              class="input w-full !py-2 text-xs font-bold uppercase tracking-wider"
+              class="input w-full !py-2 text-xs font-bold"
             >
               <option value="">{{ t('edit.noCategory') }}</option>
               <option
@@ -72,12 +72,12 @@
           <div class="space-y-2">
             <div class="flex items-center justify-between ml-1">
               <label
-                class="text-[10px] font-bold uppercase tracking-widest text-text-muted"
+                class="text-xs font-medium text-text-muted"
                 >{{ t('markdown.descriptionLabel') }}</label
               >
               <button
                 type="button"
-                class="text-[10px] font-bold uppercase tracking-widest transition-colors"
+                class="text-xs font-medium transition-colors"
                 :class="
                   isPreview ? 'text-white' : 'text-text-muted hover:text-white'
                 "
@@ -169,7 +169,7 @@
                 class="prose prose-invert prose-xs max-w-none description-preview"
                 v-html="renderedDescription"
               ></div>
-              <div v-else class="text-text-muted italic text-[10px]">
+              <div v-else class="text-text-muted italic text-xs">
                 {{ t('markdown.nothingToPreview') }}
               </div>
             </div>
@@ -190,14 +190,14 @@
           <!-- Actions -->
           <div class="flex gap-2">
             <button
-              class="btn btn-secondary flex-1 text-[10px] font-bold uppercase tracking-widest"
+              class="btn btn-secondary flex-1 text-xs font-medium"
               :disabled="isSaving"
               @click="close"
             >
               {{ t('common.cancel') }}
             </button>
             <button
-              class="btn btn-primary flex-1 text-[10px] font-bold uppercase tracking-widest flex items-center justify-center gap-2"
+              class="btn btn-primary flex-1 text-xs font-medium flex items-center justify-center gap-2"
               :disabled="isSaving"
               @click="save"
             >
@@ -302,7 +302,7 @@ function getFlattenedCategories(
 
     if (category.subcategories) {
       result = result.concat(
-        getFlattenedCategories(category.subcategories, prefix + '╚=> ')
+        getFlattenedCategories(category.subcategories, prefix + category.name + ' / ')
       );
     }
   }
diff --git a/app/components/MediaIdsFields.vue b/app/components/MediaIdsFields.vue
index 5427da00..8e3d99d6 100644
--- a/app/components/MediaIdsFields.vue
+++ b/app/components/MediaIdsFields.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-2">
     <label
-      class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1"
+      class="text-xs font-medium text-text-muted ml-1"
       >{{ t('mediaIds.label') }} ({{ t('common.optional') }})</label
     >
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
@@ -29,7 +29,7 @@
         aria-label="TheTVDB ID"
       />
     </div>
-    <p class="text-[10px] text-text-muted ml-1">
+    <p class="text-xs text-text-muted ml-1">
       {{ t('mediaIds.help') }}
     </p>
   </div>
diff --git a/app/components/ReportModal.vue b/app/components/ReportModal.vue
index bc320495..88bfc7bd 100644
--- a/app/components/ReportModal.vue
+++ b/app/components/ReportModal.vue
@@ -11,7 +11,7 @@
             <div class="flex items-center gap-2">
               <Icon name="ph:flag-bold" class="text-error" />
               <h3
-                class="text-xs font-bold uppercase tracking-wider text-text-primary"
+                class="text-sm font-medium text-text-primary"
               >
                 {{
                   t('report.title', {
@@ -32,7 +32,7 @@
         <div class="card-body space-y-4">
           <div>
             <label
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-2 block"
+              class="text-xs font-bold text-text-muted mb-2 block"
             >
               {{ t('common.reason') }}
             </label>
@@ -58,7 +58,7 @@
           </div>
           <div>
             <label
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-2 block"
+              class="text-xs font-bold text-text-muted mb-2 block"
             >
               {{ t('report.details') }} ({{ t('common.optional') }})
             </label>
diff --git a/app/components/SearchBar.vue b/app/components/SearchBar.vue
deleted file mode 100644
index e686662f..00000000
--- a/app/components/SearchBar.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div class="relative group w-full">
-    <div
-      class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"
-    >
-      <Icon
-        v-if="!loading"
-        name="ph:magnifying-glass"
-        class="h-5 w-5 text-text-muted group-focus-within:text-white transition-colors"
-      />
-      <Icon
-        v-else
-        name="ph:circle-notch"
-        class="animate-spin h-5 w-5 text-text-muted"
-      />
-    </div>
-    <input
-      ref="inputRef"
-      :value="modelValue"
-      type="text"
-      :placeholder="placeholder"
-      class="w-full bg-bg-secondary/50 border border-border text-text-primary placeholder-text-muted focus:outline-none focus:border-white/20 focus:bg-bg-secondary transition-all shadow-2xl"
-      :class="[
-        size === 'lg'
-          ? 'rounded-xl pl-12 pr-24 py-4 text-lg'
-          : 'rounded-md pl-10 pr-16 py-2 text-sm',
-      ]"
-      @input="onInput"
-      @keyup.enter="$emit('search')"
-    />
-    <div class="absolute inset-y-0 right-0 pr-2 flex items-center gap-2">
-      <div
-        v-if="!modelValue"
-        class="hidden sm:flex items-center gap-1 px-2 py-1 border border-border rounded-md text-[10px] text-text-muted font-mono bg-bg-primary/50 mr-2"
-      >
-        <span>/</span>
-      </div>
-      <button
-        v-if="modelValue"
-        class="text-text-muted hover:text-white transition-colors p-2"
-        :title="t('searchBar.clear')"
-        @click="clear"
-      >
-        <Icon name="ph:x" :class="size === 'lg' ? 'h-4 w-4' : 'h-3.5 w-3.5'" />
-      </button>
-      <button
-        class="btn-search"
-        :class="size === 'lg' ? 'btn-lg' : 'btn-sm'"
-        :title="t('common.search')"
-        @click="$emit('search')"
-      >
-        <Icon
-          name="ph:arrow-right-bold"
-          :class="size === 'lg' ? 'h-4 w-4' : 'h-3 w-3'"
-        />
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.btn-search {
-  @apply rounded-lg text-gray-200 transition-all active:scale-95 shadow-lg;
-}
-.btn-lg {
-  @apply p-2.5;
-}
-.btn-sm {
-  @apply p-1.5;
-}
-</style>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-
-const props = defineProps<{
-  modelValue: string;
-  placeholder?: string;
-  loading?: boolean;
-  size?: 'sm' | 'lg';
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'search'): void;
-}>();
-
-const { t } = useI18n();
-const size = props.size ?? 'sm';
-const placeholder = computed(
-  () => props.placeholder ?? t('searchBar.placeholder')
-);
-
-const inputRef = ref<HTMLInputElement | null>(null);
-
-function onInput(event: Event) {
-  const value = (event.target as HTMLInputElement).value;
-  emit('update:modelValue', value);
-}
-
-function clear() {
-  emit('update:modelValue', '');
-  emit('search');
-  inputRef.value?.focus();
-}
-
-// Keyboard shortcut '/' to focus
-function handleGlobalKeydown(e: KeyboardEvent) {
-  if (
-    e.key === '/' &&
-    document.activeElement?.tagName !== 'INPUT' &&
-    document.activeElement?.tagName !== 'TEXTAREA'
-  ) {
-    e.preventDefault();
-    inputRef.value?.focus();
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleGlobalKeydown);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleGlobalKeydown);
-});
-</script>
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/TorrentTable.vue b/app/components/TorrentTable.vue
index c53535b7..26884fcb 100644
--- a/app/components/TorrentTable.vue
+++ b/app/components/TorrentTable.vue
@@ -2,106 +2,54 @@
   <table class="data-table">
     <thead>
       <tr>
-        <th class="w-1/2">{{ t('common.name') }}</th>
-        <th v-if="!compact">{{ t('common.category') }}</th>
-        <th v-if="!compact">{{ t('torrents.table.hash') }}</th>
-        <th class="text-center w-16">
-          <div class="flex items-center justify-center gap-1" :title="t('common.seeders')">
-            <Icon name="ph:arrow-up-bold" class="text-success" />
-            <span>{{ t('torrents.table.seedersShort') }}</span>
-          </div>
+        <th>{{ t('common.name') }}</th>
+        <th class="text-right hidden sm:table-cell">{{ t('common.size') }}</th>
+        <th class="text-right" :title="t('common.seeders')">
+          <span class="text-seed" aria-hidden="true">↑</span><span class="sr-only">{{ t('common.seeders') }}</span>
         </th>
-        <th class="text-center w-16">
-          <div class="flex items-center justify-center gap-1" :title="t('common.leechers')">
-            <Icon name="ph:arrow-down-bold" class="text-warning" />
-            <span>{{ t('torrents.table.leechersShort') }}</span>
-          </div>
+        <th class="text-right" :title="t('common.leechers')">
+          <span class="text-leech" aria-hidden="true">↓</span><span class="sr-only">{{ t('common.leechers') }}</span>
         </th>
-        <th v-if="!compact" class="text-center w-16">
-          <div class="flex items-center justify-center gap-1" :title="t('common.completed')">
-            <Icon name="ph:check-bold" class="text-text-secondary" />
-            <span>{{ t('torrents.table.completedShort') }}</span>
-          </div>
+        <th class="text-right hidden md:table-cell" :title="t('common.completed')">
+          <Icon name="ph:check" class="inline-block align-[-2px]" aria-hidden="true" /><span class="sr-only">{{ t('common.completed') }}</span>
         </th>
-        <th v-if="!compact">{{ t('common.size') }}</th>
-        <th class="text-right w-16">{{ t('torrents.table.age') }}</th>
-        <th v-if="admin" class="w-12"></th>
+        <th class="text-right hidden md:table-cell">{{ t('torrents.table.age') }}</th>
+        <th v-if="canDelete" class="w-10"><span class="sr-only">{{ t('common.delete') }}</span></th>
       </tr>
     </thead>
     <tbody>
-      <tr v-if="torrents.length === 0">
-        <td
-          :colspan="(compact ? 4 : 8) + (admin ? 1 : 0)"
-          class="text-center text-text-muted py-8"
-        >
-          {{ t('torrents.table.empty') }}
-        </td>
-      </tr>
-      <tr
-        v-for="torrent in torrents"
-        :key="torrent.id"
-        class="cursor-pointer"
-        @click="navigateTo(`/torrents/${torrent.infoHash}`)"
-      >
-        <td>
-          <div class="flex items-center gap-2">
-            <Icon
-              name="ph:file-zip"
-              class="text-text-muted text-base shrink-0"
-            />
+      <tr v-for="torrent in torrents" :key="torrent.id" class="group">
+        <td class="max-w-0 w-full">
+          <div class="flex items-center gap-2 min-w-0">
+            <NuxtLink
+              :to="`/torrents/${torrent.infoHash}`"
+              class="truncate text-text-primary hover:underline underline-offset-2"
+            >{{ torrent.name }}</NuxtLink>
             <span
-              class="text-text-primary hover:text-white transition-colors font-medium truncate max-w-[300px] lg:max-w-[500px]"
-              >{{ torrent.name }}</span
-            >
+              v-if="torrent.isApproved === false"
+              class="shrink-0 text-2xs px-1.5 rounded bg-leech/15 text-leech"
+            >{{ t('torrents.table.pending') }}</span>
           </div>
+          <p class="text-xs text-text-muted truncate">
+            <span v-if="torrent.category">{{ categoryPath(torrent.category) }}</span>
+            <span v-if="torrent.category && torrent.tags?.length">, </span>
+            <span v-if="torrent.tags?.length">{{ torrent.tags.map((tag) => tag.name).join(', ') }}</span>
+          </p>
         </td>
-        <td v-if="!compact">
-          <span
-            v-if="torrent.category"
-            class="text-[10px] bg-bg-tertiary border border-border px-1.5 py-0.5 rounded-sm text-text-secondary uppercase font-bold tracking-wider"
-          >
-            {{ getCategoryDisplayName(torrent.category) }}
-          </span>
-          <span v-else class="text-xs text-text-muted">—</span>
-        </td>
-        <td v-if="!compact">
-          <code
-            class="truncate-hash text-text-muted bg-bg-tertiary/50 px-1 rounded"
-            :title="torrent.infoHash"
-          >
-            {{ torrent.infoHash.slice(0, 8) }}...{{
-              torrent.infoHash.slice(-4)
-            }}
-          </code>
-        </td>
-        <td class="text-center">
-          <span class="stat-badge stat-seeders">
-            <Icon name="ph:arrow-up-bold" class="text-[8px]" />
-            {{ torrent.stats.seeders }}
-          </span>
-        </td>
-        <td class="text-center">
-          <span class="stat-badge stat-leechers">
-            <Icon name="ph:arrow-down-bold" class="text-[8px]" />
-            {{ torrent.stats.leechers }}
-          </span>
-        </td>
-        <td v-if="!compact" class="text-center text-text-secondary font-mono">
-          {{ torrent.stats.completed }}
-        </td>
-        <td v-if="!compact" class="text-text-secondary font-mono text-[10px]">
-          {{ formatSize(torrent.size) }}
-        </td>
-        <td class="text-right text-text-muted text-[10px] font-mono">
-          {{ formatAge(torrent.createdAt) }}
-        </td>
-        <td v-if="admin" class="text-center">
+        <td class="num text-right text-text-secondary whitespace-nowrap hidden sm:table-cell">{{ formatSize(torrent.size) }}</td>
+        <td class="num text-right" :class="torrent.stats.seeders > 0 ? 'text-seed' : 'text-text-muted'">{{ torrent.stats.seeders }}</td>
+        <td class="num text-right" :class="torrent.stats.leechers > 0 ? 'text-leech' : 'text-text-muted'">{{ torrent.stats.leechers }}</td>
+        <td class="num text-right text-text-secondary hidden md:table-cell">{{ torrent.stats.completed }}</td>
+        <td class="num text-right text-text-muted whitespace-nowrap hidden md:table-cell">{{ formatAge(torrent.createdAt) }}</td>
+        <td v-if="canDelete" class="text-right">
           <button
-            class="text-text-muted hover:text-error transition-colors p-1.5 rounded hover:bg-error/10"
+            type="button"
+            class="p-1 rounded text-text-muted hover:text-danger hover:bg-danger/10 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
             :title="t('torrents.table.deleteTorrent')"
-            @click.stop="deleteTorrent(torrent)"
+            :aria-label="t('torrents.table.deleteTorrent')"
+            @click="deleteTorrent(torrent)"
           >
-            <Icon name="ph:trash" class="text-base" />
+            <Icon name="ph:trash" class="block" />
           </button>
         </td>
       </tr>
@@ -110,60 +58,47 @@
 </template>
 
 <script setup lang="ts">
-const { t } = useI18n();
+interface CategoryRef {
+  id: string;
+  name: string;
+  parentId?: string | null;
+}
 
-interface TorrentWithStats {
+export interface TorrentRow {
   id: string;
   infoHash: string;
   name: string;
   size: number;
   createdAt: string;
-  category?: {
-    id: string;
-    name: string;
-    slug: string;
-  };
-  stats: {
-    seeders: number;
-    leechers: number;
-    completed: number;
-  };
+  isApproved?: boolean;
+  category?: CategoryRef | null;
+  tags?: { id: string; name: string }[];
+  stats: { seeders: number; leechers: number; completed: number };
 }
 
-const { data: categories } = await useFetch('/api/categories');
-
 const props = defineProps<{
-  torrents: TorrentWithStats[];
-  compact?: boolean;
-  admin?: boolean;
+  torrents: TorrentRow[];
+  categories?: { id: string; name: string }[];
+  canDelete?: boolean;
 }>();
 
-const emit = defineEmits<{
-  deleted: [infoHash: string];
-}>();
-
-function getCategoryDisplayName(category) {
-  let displayName = category.name;
-
-  const parent = categories.value.find(
-    (cat) => cat.id === category.parentId
-  );
-
-  if (parent) {
-    displayName = `${parent.name}/${displayName}`;
-  }
+const emit = defineEmits<{ deleted: [infoHash: string] }>();
+const { t } = useI18n();
 
-  return displayName;
+/** "Movies / UHD" when the category has a parent */
+function categoryPath(category: CategoryRef): string {
+  const parent = category.parentId
+    ? props.categories?.find((c) => c.id === category.parentId)
+    : undefined;
+  return parent ? `${parent.name} / ${category.name}` : category.name;
 }
 
-async function deleteTorrent(torrent: TorrentWithStats) {
+async function deleteTorrent(torrent: TorrentRow) {
   if (!confirm(t('torrents.table.confirmDelete', { name: torrent.name }))) return;
-
   try {
-    await fetch(`/api/torrents/${torrent.infoHash}`, { method: 'DELETE' });
+    await $fetch(`/api/torrents/${torrent.infoHash}`, { method: 'DELETE' });
     emit('deleted', torrent.infoHash);
-  } catch (err) {
-    console.error('Delete failed:', err);
+  } catch {
     alert(t('torrents.table.deleteFailed'));
   }
 }
diff --git a/app/components/UploadTorrentModal.vue b/app/components/UploadTorrentModal.vue
index 5d328186..fd2e6861 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
@@ -15,7 +15,7 @@
           <div class="flex items-center gap-2">
             <Icon name="ph:upload-simple-bold" class="text-text-muted" />
             <h3
-              class="text-xs font-bold uppercase tracking-widest text-text-primary"
+              class="text-xs font-bold text-text-primary"
             >
               {{ t('upload.title') }}
             </h3>
@@ -57,11 +57,11 @@
                   />
                 </div>
                 <p
-                  class="text-xs font-bold uppercase tracking-wider text-text-secondary"
+                  class="text-xs font-bold text-text-secondary"
                 >
                   {{ t('upload.dropFile') }}
                 </p>
-                <p class="text-[10px] text-text-muted mt-1 font-mono">
+                <p class="text-xs text-text-muted mt-1 font-mono">
                   {{ t('upload.orBrowse') }}
                 </p>
               </div>
@@ -79,7 +79,7 @@
                 >
                   {{ selectedFile.name }}
                 </p>
-                <p class="text-[10px] text-text-muted mt-1 font-mono uppercase">
+                <p class="text-xs text-text-muted mt-1 font-mono">
                   {{ formatSize(selectedFile.size) }}
                 </p>
               </div>
@@ -88,7 +88,7 @@
             <!-- Personal announce URL (#42) -->
             <div class="space-y-2">
               <label
-                class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1"
+                class="text-xs font-medium text-text-muted ml-1"
                 >{{ t('upload.announceUrlLabel') }}</label
               >
               <div class="flex gap-2">
@@ -110,7 +110,7 @@
                   <Icon :name="announceCopied ? 'ph:check-bold' : 'ph:copy-bold'" />
                 </button>
               </div>
-              <p class="text-[10px] text-text-muted ml-1">
+              <p class="text-xs text-text-muted ml-1">
                 {{ t('upload.announceHint') }}
               </p>
             </div>
@@ -118,7 +118,7 @@
             <!-- Custom name (#42) -->
             <div class="space-y-2">
               <label
-                class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1"
+                class="text-xs font-medium text-text-muted ml-1"
                 >{{ t('upload.displayName') }}</label
               >
               <input
@@ -133,12 +133,12 @@
             <!-- Category Select -->
             <div class="space-y-2">
               <label
-                class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1"
+                class="text-xs font-medium text-text-muted ml-1"
                 >{{ t('common.category') }}</label
               >
               <select
                 v-model="selectedCategoryId"
-                class="input w-full !py-2 text-xs font-bold uppercase tracking-wider"
+                class="input w-full !py-2 text-xs font-bold"
               >
                 <option value="">{{ t('upload.selectCategory') }}</option>
                 <option v-for="cat in getFlattenedCategories(categories)" :key="cat.id" :value="cat.id">
@@ -153,12 +153,12 @@
             <div class="space-y-2">
               <div class="flex items-center justify-between ml-1">
                 <label
-                  class="text-[10px] font-bold uppercase tracking-widest text-text-muted"
+                  class="text-xs font-medium text-text-muted"
                   >{{ t('markdown.descriptionLabel') }}</label
                 >
                 <button
                   type="button"
-                  class="text-[10px] font-bold uppercase tracking-widest transition-colors"
+                  class="text-xs font-medium transition-colors"
                   :class="
                     isPreview
                       ? 'text-white'
@@ -252,14 +252,14 @@
                   class="prose prose-invert prose-xs max-w-none description-preview"
                   v-html="renderedDescription"
                 ></div>
-                <div v-else class="text-text-muted italic text-[10px]">
+                <div v-else class="text-text-muted italic text-xs">
                   {{ t('markdown.nothingToPreview') }}
                 </div>
               </div>
             </div>
 
             <button
-              class="btn btn-primary w-full !py-2.5 flex items-center justify-center gap-2 uppercase tracking-widest font-bold text-xs"
+              class="btn btn-primary w-full !py-2.5 flex items-center justify-center gap-2 font-bold text-xs"
               :disabled="!selectedFile || isUploading"
               @click="upload"
             >
@@ -286,11 +286,11 @@
               />
               <div>
                 <p
-                  class="text-xs font-bold text-success uppercase tracking-wider"
+                  class="text-xs font-bold text-success"
                 >
                   {{ result.message }}
                 </p>
-                <p class="text-[10px] text-text-muted mt-1 font-mono">
+                <p class="text-xs text-text-muted mt-1 font-mono">
                   {{ t('upload.successHint') }}
                 </p>
               </div>
@@ -301,7 +301,7 @@
             >
               <div class="flex justify-between items-center">
                 <span
-                  class="text-[10px] font-bold text-text-muted uppercase tracking-widest"
+                  class="text-xs font-medium text-text-muted"
                   >{{ t('common.name') }}</span
                 >
                 <span
@@ -311,17 +311,17 @@
               </div>
               <div class="flex justify-between items-center">
                 <span
-                  class="text-[10px] font-bold text-text-muted uppercase tracking-widest"
+                  class="text-xs font-medium text-text-muted"
                   >{{ t('torrents.table.hash') }}</span
                 >
                 <code
-                  class="text-[10px] text-text-secondary font-mono bg-bg-primary px-1.5 py-0.5 rounded border border-border"
+                  class="text-xs text-text-secondary font-mono bg-bg-primary px-1.5 py-0.5 rounded border border-border"
                   >{{ result.data.infoHash.slice(0, 12) }}...</code
                 >
               </div>
               <div class="flex justify-between items-center">
                 <span
-                  class="text-[10px] font-bold text-text-muted uppercase tracking-widest"
+                  class="text-xs font-medium text-text-muted"
                   >{{ t('common.size') }}</span
                 >
                 <span class="text-xs font-mono text-text-primary">{{
@@ -332,13 +332,13 @@
 
             <div class="flex gap-2">
               <button
-                class="btn btn-secondary flex-1 text-[10px] font-bold uppercase tracking-widest"
+                class="btn btn-secondary flex-1 text-xs font-medium"
                 @click="close"
               >
                 {{ t('common.close') }}
               </button>
               <button
-                class="btn btn-primary flex-1 text-[10px] font-bold uppercase tracking-widest"
+                class="btn btn-primary flex-1 text-xs font-medium"
                 @click="navigateTo(`/torrents/${result.data.infoHash}`)"
               >
                 {{ t('upload.viewDetails') }}
@@ -437,7 +437,7 @@ function getFlattenedCategories(
 
     if (category.subcategories) {
       result = result.concat(
-        getFlattenedCategories(category.subcategories, prefix + '╚=> ')
+        getFlattenedCategories(category.subcategories, prefix + category.name + ' / ')
       );
     }
   }
diff --git a/app/components/UserAvatar.vue b/app/components/UserAvatar.vue
new file mode 100644
index 00000000..12ced453
--- /dev/null
+++ b/app/components/UserAvatar.vue
@@ -0,0 +1,20 @@
+<template>
+  <span
+    class="shrink-0 rounded-full overflow-hidden bg-bg-tertiary border border-border flex items-center justify-center text-text-secondary font-medium select-none"
+    :class="size === 'sm' ? 'w-7 h-7 text-xs' : 'w-9 h-9 text-sm'"
+    aria-hidden="true"
+  >
+    <img v-if="url" :src="url" alt="" class="w-full h-full object-cover" />
+    <template v-else>{{ initial }}</template>
+  </span>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  name?: string | null;
+  url?: string | null;
+  size?: 'sm' | 'md';
+}>();
+
+const initial = computed(() => (props.name?.trim()[0] ?? '?').toUpperCase());
+</script>
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..7f3ed15a
--- /dev/null
+++ b/app/components/shell/AppSidebar.vue
@@ -0,0 +1,157 @@
+<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>
+              <span
+                v-if="item.badge === 'messages' && unread > 0"
+                class="ml-auto num text-2xs min-w-[1.25rem] h-5 px-1.5 rounded-full bg-white text-black flex items-center justify-center"
+                :aria-label="t('messages.unreadCount', { n: unread }, unread)"
+              >{{ unread > 99 ? '99+' : unread }}</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;
+  badge?: 'messages';
+}
+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 { count: unread } = useUnreadMessages();
+
+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: '/messages', label: 'messages.nav', icon: 'ph:chat-circle-text', badge: 'messages' },
+      { 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..32357ae8
--- /dev/null
+++ b/app/components/shell/CommandPalette.vue
@@ -0,0 +1,225 @@
+<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: 'messages', label: t('messages.nav'), icon: 'ph:chat-circle-text', to: '/messages' },
+  { 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/composables/useUnreadMessages.ts b/app/composables/useUnreadMessages.ts
new file mode 100644
index 00000000..3d50e6db
--- /dev/null
+++ b/app/composables/useUnreadMessages.ts
@@ -0,0 +1,14 @@
+/**
+ * Number of conversations with unread messages, shared by the sidebar badge
+ * and the messages page (which refreshes it after reading).
+ */
+export function useUnreadMessages() {
+  const count = useState<number>('unread-messages', () => 0);
+
+  async function refresh() {
+    const res = await $fetch<{ count: number }>('/api/messages/unread').catch(() => null);
+    if (res) count.value = res.count;
+  }
+
+  return { count, refresh };
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index d88c5564..130dc2ad 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>
+              <Icon name="ph:gift" aria-hidden="true" />
+              <span class="hidden sm:inline">{{ freeleechLabel }}</span>
+            </span>
+          </ClientOnly>
 
-          <!-- 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>
-
-            <!-- 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="transfer?.uploaded ?? user.uploaded"
+            :downloaded="transfer?.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>
+      </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>
+      <main id="main" class="flex-1 w-full max-w-[1240px] px-4 sm:px-6 py-6 lg:py-8">
+        <slot />
+      </main>
 
-    <!-- Main Content -->
-    <main class="flex-grow max-w-[1400px] w-full mx-auto px-4 py-6">
-      <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,73 @@ 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
+// ---------------------------------------------------------------------------
+// Live upload/download for the meter: the sealed session only holds the
+// values from sign-in, so read them from the database
+const transfer = ref<{ uploaded: number; downloaded: number } | null>(null);
 async function refreshStats() {
-  await $fetch('/api/auth/status');
+  const status = await $fetch<{ user: { uploaded: number; downloaded: number } | null }>(
+    '/api/auth/status'
+  ).catch(() => null);
+  transfer.value = status?.user
+    ? { uploaded: status.user.uploaded, downloaded: status.user.downloaded }
+    : null;
   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;
-  }
-}
-
+let transferPoll: ReturnType<typeof setInterval> | undefined;
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
+  refreshStats();
+  transferPoll = setInterval(refreshStats, 5 * 60 * 1000);
 });
+onUnmounted(() => clearInterval(transferPoll));
 
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
+// Unread private messages (sidebar badge): every minute and on navigation
+const { refresh: refreshUnread } = useUnreadMessages();
+let unreadPoll: ReturnType<typeof setInterval> | undefined;
+onMounted(() => {
+  refreshUnread();
+  unreadPoll = setInterval(refreshUnread, 60 * 1000);
 });
+onUnmounted(() => clearInterval(unreadPoll));
+watch(() => route.path, () => import.meta.client && refreshUnread());
 
 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/bounties/[id].vue b/app/pages/bounties/[id].vue
index 6de3f0b7..0f57f3d9 100644
--- a/app/pages/bounties/[id].vue
+++ b/app/pages/bounties/[id].vue
@@ -1,14 +1,14 @@
 <template>
   <div v-if="bounty" class="space-y-6">
-    <NuxtLink to="/bounties" class="text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-white inline-flex items-center gap-1">
+    <NuxtLink to="/bounties" class="text-xs font-bold text-text-muted hover:text-white inline-flex items-center gap-1">
       <Icon name="ph:arrow-left-bold" />
       {{ t('bonus.bounties.detail.back') }}
     </NuxtLink>
 
     <div class="flex flex-wrap items-start justify-between gap-4">
       <div class="min-w-0">
-        <h2 class="text-xl font-bold text-text-primary tracking-tight break-words">{{ bounty.title }}</h2>
-        <p class="text-[10px] text-text-muted font-mono mt-1">
+        <h2 class="text-2xl font-semibold tracking-tight text-text-primary break-words">{{ bounty.title }}</h2>
+        <p class="text-sm text-text-muted mt-1">
           {{ t('bonus.bounties.requestedBy', { user: bounty.requester?.username ?? '?' }) }}
           <span v-if="bounty.category"> · {{ bounty.category.name }}</span>
           · {{ new Date(bounty.createdAt).toLocaleString(locale) }}
@@ -18,15 +18,15 @@
           :href="imdbUrl(bounty.imdbId)"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center gap-1 mt-2 text-[10px] font-bold border border-border px-2 py-1 rounded-sm text-text-secondary uppercase tracking-wider hover:text-white"
+          class="inline-flex items-center gap-1 mt-2 text-xs font-bold border border-border px-2 py-1 rounded-sm text-text-secondary hover:text-white"
         >
           IMDb <Icon name="ph:arrow-square-out-bold" />
         </a>
       </div>
       <div class="text-right">
-        <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest">{{ t('bonus.bounties.reward') }}</p>
-        <p class="text-2xl font-bold text-accent font-mono">{{ points(bounty.totalPoints) }}</p>
-        <p class="text-[10px] uppercase tracking-wider text-text-muted">{{ t(`bonus.bounties.status.${bounty.status}`) }}</p>
+        <p class="text-xs font-bold text-text-muted">{{ t('bonus.bounties.reward') }}</p>
+        <p class="text-2xl font-semibold num text-text-primary">{{ points(bounty.totalPoints) }}</p>
+        <p class="text-xs text-text-muted">{{ t(`bonus.bounties.status.${bounty.status}`) }}</p>
       </div>
     </div>
 
@@ -44,13 +44,13 @@
         <!-- Proposed / filled torrent -->
         <div v-if="bounty.filledTorrent" class="card">
           <div class="card-body space-y-3">
-            <p class="text-[10px] font-bold uppercase tracking-widest text-text-muted">
+            <p class="text-xs font-bold text-text-muted">
               {{ bounty.status === 'filled' ? t('bonus.bounties.detail.filledBy', { user: bounty.filledBy?.username ?? '?' }) : t('bonus.bounties.detail.proposed') }}
             </p>
             <NuxtLink :to="`/torrents/${bounty.filledTorrent.infoHash}`" class="text-sm font-bold text-text-primary hover:underline break-all">
               {{ bounty.filledTorrent.name }}
             </NuxtLink>
-            <p v-if="bounty.status === 'claimed'" class="text-[10px] text-text-muted font-mono">
+            <p v-if="bounty.status === 'claimed'" class="text-xs text-text-muted">
               {{ t('bonus.bounties.detail.uploader', { user: bounty.filledBy?.username ?? '?' }) }}
             </p>
             <div v-if="bounty.status === 'claimed' && canReview" class="flex gap-2">
@@ -67,8 +67,8 @@
         <!-- Fill -->
         <div v-if="bounty.status === 'open'" class="card">
           <div class="card-body space-y-2">
-            <p class="text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ t('bonus.bounties.detail.fill') }}</p>
-            <p class="text-[10px] text-text-muted">{{ t('bonus.bounties.detail.fillHint') }}</p>
+            <p class="text-xs font-bold text-text-muted">{{ t('bonus.bounties.detail.fill') }}</p>
+            <p class="text-xs text-text-muted">{{ t('bonus.bounties.detail.fillHint') }}</p>
             <div class="flex gap-2">
               <input v-model="fillHash" type="text" maxlength="40" class="input w-full !py-2 text-xs font-mono" :placeholder="t('bonus.bounties.detail.fillPlaceholder')" />
               <button class="btn btn-primary !py-2 text-xs shrink-0" :disabled="busy || !/^[a-fA-F0-9]{40}$/.test(fillHash.trim())" @click="fill">
@@ -83,7 +83,7 @@
         <!-- Contribute -->
         <div v-if="bounty.status === 'open'" class="card">
           <div class="card-body space-y-2">
-            <p class="text-[10px] font-bold uppercase tracking-widest text-text-muted">{{ t('bonus.bounties.detail.contribute') }}</p>
+            <p class="text-xs font-bold text-text-muted">{{ t('bonus.bounties.detail.contribute') }}</p>
             <div class="flex gap-2">
               <input v-model.number="contribution" type="number" min="1" class="input w-full !py-2 text-xs font-mono" :placeholder="t('bonus.bounties.detail.contributePlaceholder')" />
               <button class="btn btn-secondary !py-2 text-xs shrink-0" :disabled="busy || !(contribution > 0)" @click="contribute">
@@ -95,12 +95,12 @@
 
         <div class="card">
           <div class="card-header">
-            <h3 class="text-xs font-bold uppercase tracking-wider text-text-primary">{{ t('bonus.bounties.detail.contributors') }}</h3>
+            <h3 class="text-sm font-medium text-text-primary">{{ t('bonus.bounties.detail.contributors') }}</h3>
           </div>
           <ul class="card-body space-y-2 text-xs">
             <li v-for="c in bounty.contributions" :key="c.id" class="flex justify-between gap-2">
               <span class="truncate">{{ c.user?.username ?? '?' }}</span>
-              <span class="font-mono text-text-muted">{{ points(c.amount) }}</span>
+              <span class="num text-text-muted">{{ points(c.amount) }}</span>
             </li>
           </ul>
         </div>
diff --git a/app/pages/bounties/index.vue b/app/pages/bounties/index.vue
index c06a3f73..4bb9433b 100644
--- a/app/pages/bounties/index.vue
+++ b/app/pages/bounties/index.vue
@@ -2,10 +2,10 @@
   <div class="space-y-6">
     <div class="flex flex-wrap items-end justify-between gap-4">
       <div>
-        <h2 class="text-xl font-bold text-text-primary tracking-tight uppercase">
+        <h2 class="text-2xl font-semibold tracking-tight text-text-primary">
           {{ t('bonus.bounties.title') }}
         </h2>
-        <p class="text-xs text-text-muted font-mono mt-0.5">
+        <p class="text-sm text-text-muted mt-0.5">
           {{ t('bonus.bounties.subtitle') }}
         </p>
       </div>
@@ -19,7 +19,7 @@
     <div v-if="showForm" class="card">
       <div class="card-body space-y-3">
         <div class="space-y-1">
-          <label class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1">
+          <label class="text-xs font-bold text-text-muted ml-1">
             {{ t('bonus.bounties.form.title') }}
           </label>
           <input
@@ -31,7 +31,7 @@
           />
         </div>
         <div class="space-y-1">
-          <label class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1">
+          <label class="text-xs font-bold text-text-muted ml-1">
             {{ t('bonus.bounties.form.description') }}
           </label>
           <textarea
@@ -44,13 +44,13 @@
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
           <div class="space-y-1">
-            <label class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1">
+            <label class="text-xs font-bold text-text-muted ml-1">
               {{ t('bonus.bounties.form.imdb') }}
             </label>
             <input v-model="form.imdbId" type="text" class="input w-full !py-2 text-xs font-mono" placeholder="tt0133093" />
           </div>
           <div class="space-y-1">
-            <label class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1">
+            <label class="text-xs font-bold text-text-muted ml-1">
               {{ t('bonus.bounties.form.category') }}
             </label>
             <select v-model="form.categoryId" class="input w-full !py-2 text-xs">
@@ -59,13 +59,13 @@
             </select>
           </div>
           <div class="space-y-1">
-            <label class="text-[10px] font-bold uppercase tracking-widest text-text-muted ml-1">
+            <label class="text-xs font-bold text-text-muted ml-1">
               {{ t('bonus.bounties.form.points') }}
             </label>
             <input v-model.number="form.points" type="number" :min="minPoints" class="input w-full !py-2 text-xs font-mono" />
           </div>
         </div>
-        <p class="text-[10px] text-text-muted">
+        <p class="text-xs text-text-muted">
           {{ t('bonus.bounties.form.pointsHint', { min: minPoints }) }}
         </p>
         <p v-if="formError" class="text-xs text-error">{{ formError }}</p>
@@ -85,7 +85,7 @@
       <button
         v-for="s in statuses"
         :key="s"
-        class="text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded border transition-colors"
+        class="text-xs font-bold px-3 py-1.5 rounded border transition-colors"
         :class="status === s ? 'border-white/30 text-white bg-bg-secondary' : 'border-border text-text-muted hover:text-white'"
         @click="status = s"
       >
@@ -110,18 +110,18 @@
             class="flex items-center justify-between gap-4 py-3 hover:bg-bg-tertiary/30 px-2 -mx-2 rounded transition-colors"
           >
             <div class="min-w-0">
-              <p class="text-sm font-bold text-text-primary truncate">{{ b.title }}</p>
-              <p class="text-[10px] text-text-muted font-mono mt-0.5">
+              <p class="text-sm font-medium text-text-primary truncate">{{ b.title }}</p>
+              <p class="text-sm text-text-muted mt-0.5">
                 {{ t('bonus.bounties.requestedBy', { user: b.requester?.username ?? '?' }) }}
                 <span v-if="b.category"> · {{ b.category.name }}</span>
                 · {{ new Date(b.createdAt).toLocaleDateString(locale) }}
               </p>
             </div>
             <div class="text-right shrink-0">
-              <p class="text-sm font-bold font-mono text-accent">
+              <p class="text-sm font-medium num text-text-primary">
                 {{ t('bonus.points', { n: Math.floor(b.totalPoints).toLocaleString(locale) }) }}
               </p>
-              <p class="text-[10px] uppercase tracking-wider text-text-muted">
+              <p class="text-xs text-text-muted">
                 {{ t(`bonus.bounties.status.${b.status}`) }}
               </p>
             </div>
diff --git a/app/pages/forum/category/[id].vue b/app/pages/forum/category/[id].vue
index 98f55e7d..1a3078ac 100644
--- a/app/pages/forum/category/[id].vue
+++ b/app/pages/forum/category/[id].vue
@@ -15,7 +15,7 @@
       <div class="flex justify-between items-end">
         <div>
           <div
-            class="flex items-center gap-2 text-text-muted text-xs font-mono uppercase tracking-widest mb-2"
+            class="flex items-center gap-2 text-text-muted text-xs mb-2"
           >
             <NuxtLink to="/forum" class="hover:text-white transition-colors"
               >{{ t('forum.title') }}</NuxtLink
@@ -29,7 +29,7 @@
         <div>
           <NuxtLink
             :to="`/forum/new-topic?categoryId=${category.id}`"
-            class="px-4 py-2 bg-white text-black text-xs font-bold uppercase tracking-wider rounded hover:bg-white/90 transition-colors flex items-center gap-2"
+            class="px-4 py-2 bg-white text-black text-xs font-bold rounded hover:bg-white/90 transition-colors flex items-center gap-2"
           >
             <Icon name="ph:plus-bold" />
             {{ t('forum.category.newTopic') }}
@@ -41,7 +41,7 @@
         class="bg-bg-secondary border border-border rounded-lg overflow-hidden"
       >
         <div
-          class="grid grid-cols-12 px-6 py-3 border-b border-border bg-bg-tertiary/50 text-[10px] uppercase tracking-widest font-bold text-text-muted"
+          class="grid grid-cols-12 px-6 py-3 border-b border-border bg-bg-tertiary/50 text-xs font-bold text-text-muted"
         >
           <div class="col-span-7">{{ t('forum.category.topic') }}</div>
           <div class="col-span-2 text-center">{{ t('forum.category.replies') }}</div>
@@ -104,7 +104,7 @@
               </div>
             </div>
           </div>
-          <div class="col-span-2 text-center font-mono text-sm">
+          <div class="col-span-2 text-center num text-sm">
             {{ topic.replyCount }}
           </div>
           <div class="col-span-3 text-right">
diff --git a/app/pages/forum/index.vue b/app/pages/forum/index.vue
index 2c16ab62..13dad654 100644
--- a/app/pages/forum/index.vue
+++ b/app/pages/forum/index.vue
@@ -2,7 +2,7 @@
   <div class="space-y-6">
     <div class="flex justify-between items-end">
       <div>
-        <h1 class="text-2xl font-bold tracking-tight">{{ t('forum.title') }}</h1>
+        <h1 class="text-2xl font-semibold tracking-tight">{{ t('forum.title') }}</h1>
         <p class="text-text-muted text-sm">
           {{ t('forum.index.subtitle') }}
         </p>
@@ -10,7 +10,7 @@
       <div v-if="user?.isAdmin">
         <button
           @click="showCreateCategory = true"
-          class="px-4 py-2 bg-white text-black text-xs font-bold uppercase tracking-wider rounded hover:bg-white/90 transition-colors flex items-center gap-2"
+          class="btn btn-primary"
         >
           <Icon name="ph:plus-bold" />
           {{ t('forum.index.newCategory') }}
@@ -26,57 +26,43 @@
       ></div>
     </div>
 
-    <div v-else class="space-y-4">
+    <div v-else class="card divide-y divide-border">
       <div
         v-for="category in categories"
         :key="category.id"
-        class="bg-bg-secondary border border-border rounded-lg overflow-hidden group hover:border-white/20 transition-colors"
+        class="group flex items-center gap-4 px-4 py-4 hover:bg-bg-hover/50 transition-colors"
       >
-        <NuxtLink :to="`/forum/category/${category.id}`" class="block p-6">
-          <div class="flex justify-between items-start">
-            <div>
-              <h2
-                class="text-lg font-bold group-hover:text-white transition-colors"
-              >
-                {{ category.name }}
-              </h2>
-              <p class="text-text-muted text-sm mt-1">
-                {{ category.description }}
-              </p>
-            </div>
-            <div class="text-right">
-              <div
-                class="text-xs font-mono text-text-muted uppercase tracking-widest"
-              >
-                {{ t('forum.index.lastActivity') }}
-              </div>
-              <div v-if="category.topics?.[0]" class="text-sm mt-1">
-                {{ formatDate(category.topics[0].updatedAt) }}
-              </div>
-              <div v-else class="text-sm mt-1 text-text-muted italic">
-                {{ t('forum.index.noTopics') }}
-              </div>
-            </div>
+        <NuxtLink :to="`/forum/category/${category.id}`" class="flex-1 min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-6">
+          <div class="flex-1 min-w-0">
+            <h2 class="text-base font-medium text-text-primary">{{ category.name }}</h2>
+            <p v-if="category.description" class="text-sm text-text-muted truncate">{{ category.description }}</p>
+          </div>
+          <div class="sm:w-64 sm:text-right min-w-0">
+            <template v-if="category.topics?.[0]">
+              <p class="text-sm text-text-secondary truncate">{{ category.topics[0].title }}</p>
+              <p class="text-xs text-text-muted">{{ formatAge(category.topics[0].updatedAt) }}</p>
+            </template>
+            <p v-else class="text-sm text-text-muted">{{ t('forum.index.noTopics') }}</p>
           </div>
         </NuxtLink>
-        <!-- Admin Actions -->
-        <div
-          v-if="user?.isAdmin"
-          class="flex justify-end gap-2 px-6 pb-4 -mt-2"
-        >
+        <div v-if="user?.isAdmin" class="flex gap-1 shrink-0">
           <button
-            @click.prevent="openEditModal(category)"
-            class="p-2 text-text-muted hover:text-white hover:bg-white/10 rounded transition-colors"
+            type="button"
+            class="p-1.5 rounded btn-ghost"
             :title="t('forum.index.editCategory')"
+            :aria-label="t('forum.index.editCategory')"
+            @click="openEditModal(category)"
           >
-            <Icon name="ph:pencil-bold" class="text-sm" />
+            <Icon name="ph:pencil-simple" class="block text-sm" />
           </button>
           <button
-            @click.prevent="confirmDelete(category)"
-            class="p-2 text-text-muted hover:text-red-400 hover:bg-red-400/10 rounded transition-colors"
+            type="button"
+            class="p-1.5 rounded text-text-muted hover:text-danger hover:bg-danger/10"
             :title="t('forum.index.deleteCategory')"
+            :aria-label="t('forum.index.deleteCategory')"
+            @click="confirmDelete(category)"
           >
-            <Icon name="ph:trash-bold" class="text-sm" />
+            <Icon name="ph:trash" class="block text-sm" />
           </button>
         </div>
       </div>
@@ -85,7 +71,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"
@@ -94,7 +80,7 @@
         <div class="space-y-4">
           <div>
             <label
-              class="block text-[10px] uppercase tracking-widest text-text-muted mb-1.5 font-bold"
+              class="block text-xs text-text-muted mb-1.5 font-bold"
               >{{ t('common.name') }}</label
             >
             <input
@@ -106,7 +92,7 @@
           </div>
           <div>
             <label
-              class="block text-[10px] uppercase tracking-widest text-text-muted mb-1.5 font-bold"
+              class="block text-xs text-text-muted mb-1.5 font-bold"
               >{{ t('common.description') }}</label
             >
             <textarea
@@ -117,7 +103,7 @@
           </div>
           <div>
             <label
-              class="block text-[10px] uppercase tracking-widest text-text-muted mb-1.5 font-bold"
+              class="block text-xs text-text-muted mb-1.5 font-bold"
               >{{ t('forum.index.order') }}</label
             >
             <input
@@ -130,14 +116,14 @@
         <div class="flex gap-3 pt-2">
           <button
             @click="showCreateCategory = false"
-            class="flex-1 px-4 py-2 bg-bg-tertiary text-white text-xs font-bold uppercase tracking-wider rounded hover:bg-white/5 transition-colors"
+            class="flex-1 px-4 py-2 bg-bg-tertiary text-white text-xs font-bold rounded hover:bg-white/5 transition-colors"
           >
             {{ t('common.cancel') }}
           </button>
           <button
             @click="handleCreateCategory"
             :disabled="creating"
-            class="flex-1 px-4 py-2 bg-white text-black text-xs font-bold uppercase tracking-wider rounded hover:bg-white/90 transition-colors disabled:opacity-50"
+            class="flex-1 px-4 py-2 bg-white text-black text-xs font-bold rounded hover:bg-white/90 transition-colors disabled:opacity-50"
           >
             {{ creating ? t('common.creating') : t('common.create') }}
           </button>
@@ -148,7 +134,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"
@@ -157,7 +143,7 @@
         <div class="space-y-4">
           <div>
             <label
-              class="block text-[10px] uppercase tracking-widest text-text-muted mb-1.5 font-bold"
+              class="block text-xs text-text-muted mb-1.5 font-bold"
               >{{ t('common.name') }}</label
             >
             <input
@@ -168,7 +154,7 @@
           </div>
           <div>
             <label
-              class="block text-[10px] uppercase tracking-widest text-text-muted mb-1.5 font-bold"
+              class="block text-xs text-text-muted mb-1.5 font-bold"
               >{{ t('common.description') }}</label
             >
             <textarea
@@ -178,7 +164,7 @@
           </div>
           <div>
             <label
-              class="block text-[10px] uppercase tracking-widest text-text-muted mb-1.5 font-bold"
+              class="block text-xs text-text-muted mb-1.5 font-bold"
               >{{ t('forum.index.order') }}</label
             >
             <input
@@ -191,14 +177,14 @@
         <div class="flex gap-3 pt-2">
           <button
             @click="showEditCategory = false"
-            class="flex-1 px-4 py-2 bg-bg-tertiary text-white text-xs font-bold uppercase tracking-wider rounded hover:bg-white/5 transition-colors"
+            class="flex-1 px-4 py-2 bg-bg-tertiary text-white text-xs font-bold rounded hover:bg-white/5 transition-colors"
           >
             {{ t('common.cancel') }}
           </button>
           <button
             @click="handleUpdateCategory"
             :disabled="updating"
-            class="flex-1 px-4 py-2 bg-white text-black text-xs font-bold uppercase tracking-wider rounded hover:bg-white/90 transition-colors disabled:opacity-50"
+            class="flex-1 px-4 py-2 bg-white text-black text-xs font-bold rounded hover:bg-white/90 transition-colors disabled:opacity-50"
           >
             {{ updating ? t('common.saving') : t('common.save') }}
           </button>
@@ -209,7 +195,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"
@@ -223,14 +209,14 @@
         <div class="flex gap-3 pt-2">
           <button
             @click="showDeleteConfirm = false"
-            class="flex-1 px-4 py-2 bg-bg-tertiary text-white text-xs font-bold uppercase tracking-wider rounded hover:bg-white/5 transition-colors"
+            class="flex-1 px-4 py-2 bg-bg-tertiary text-white text-xs font-bold rounded hover:bg-white/5 transition-colors"
           >
             {{ t('common.cancel') }}
           </button>
           <button
             @click="handleDeleteCategory"
             :disabled="deleting"
-            class="flex-1 px-4 py-2 bg-red-500 text-white text-xs font-bold uppercase tracking-wider rounded hover:bg-red-600 transition-colors disabled:opacity-50"
+            class="flex-1 px-4 py-2 bg-red-500 text-white text-xs font-bold rounded hover:bg-red-600 transition-colors disabled:opacity-50"
           >
             {{ deleting ? t('common.deleting') : t('common.delete') }}
           </button>
diff --git a/app/pages/forum/new-topic.vue b/app/pages/forum/new-topic.vue
index dec1d5b7..99e485b0 100644
--- a/app/pages/forum/new-topic.vue
+++ b/app/pages/forum/new-topic.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="max-w-3xl mx-auto space-y-6">
     <div
-      class="flex items-center gap-2 text-text-muted text-xs font-mono uppercase tracking-widest"
+      class="flex items-center gap-2 text-text-muted text-xs"
     >
       <NuxtLink to="/forum" class="hover:text-white transition-colors"
         >{{ t('forum.title') }}</NuxtLink
@@ -15,7 +15,7 @@
     <div class="bg-bg-secondary border border-border rounded-lg p-8 space-y-6">
       <div class="space-y-2">
         <label
-          class="block text-[10px] uppercase tracking-widest text-text-muted font-bold"
+          class="block text-xs text-text-muted font-bold"
           >{{ t('common.category') }}</label
         >
         <select
@@ -31,7 +31,7 @@
 
       <div class="space-y-2">
         <label
-          class="block text-[10px] uppercase tracking-widest text-text-muted font-bold"
+          class="block text-xs text-text-muted font-bold"
           >{{ t('forum.newTopic.topicTitle') }}</label
         >
         <input
@@ -44,7 +44,7 @@
 
       <div class="space-y-2">
         <label
-          class="block text-[10px] uppercase tracking-widest text-text-muted font-bold"
+          class="block text-xs text-text-muted font-bold"
           >{{ t('forum.newTopic.content') }}</label
         >
         <textarea
@@ -57,14 +57,14 @@
       <div class="flex justify-end gap-4 pt-4">
         <button
           @click="router.back()"
-          class="px-6 py-2 bg-bg-tertiary text-white text-xs font-bold uppercase tracking-wider rounded hover:bg-white/5 transition-colors"
+          class="px-6 py-2 bg-bg-tertiary text-white text-xs font-bold rounded hover:bg-white/5 transition-colors"
         >
           {{ t('common.cancel') }}
         </button>
         <button
           @click="handleSubmit"
           :disabled="!isFormValid || submitting"
-          class="px-8 py-2 bg-white text-black text-xs font-bold uppercase tracking-wider rounded hover:bg-white/90 transition-colors disabled:opacity-50"
+          class="px-8 py-2 bg-white text-black text-xs font-bold rounded hover:bg-white/90 transition-colors disabled:opacity-50"
         >
           {{ submitting ? t('common.creating') : t('forum.newTopic.submit') }}
         </button>
diff --git a/app/pages/forum/topic/[id].vue b/app/pages/forum/topic/[id].vue
index 16aae30a..3ec1e247 100644
--- a/app/pages/forum/topic/[id].vue
+++ b/app/pages/forum/topic/[id].vue
@@ -15,7 +15,7 @@
       <div class="flex justify-between items-start">
         <div>
           <div
-            class="flex items-center gap-2 text-text-muted text-xs font-mono uppercase tracking-widest mb-2"
+            class="flex items-center gap-2 text-text-muted text-xs mb-2"
           >
             <NuxtLink to="/forum" class="hover:text-white transition-colors"
               >{{ t('forum.title') }}</NuxtLink
@@ -46,7 +46,7 @@
         <div v-if="user?.isAdmin || user?.isModerator" class="flex gap-2">
           <button
             @click="handleTogglePin"
-            class="px-3 py-1.5 bg-bg-secondary border border-border text-[10px] font-bold uppercase tracking-wider rounded hover:bg-white/5 transition-colors flex items-center gap-2"
+            class="px-3 py-1.5 bg-bg-secondary border border-border text-xs font-bold rounded hover:bg-white/5 transition-colors flex items-center gap-2"
           >
             <Icon
               :name="topic.isPinned ? 'ph:push-pin-slash' : 'ph:push-pin'"
@@ -55,14 +55,14 @@
           </button>
           <button
             @click="handleToggleLock"
-            class="px-3 py-1.5 bg-bg-secondary border border-border text-[10px] font-bold uppercase tracking-wider rounded hover:bg-white/5 transition-colors flex items-center gap-2"
+            class="px-3 py-1.5 bg-bg-secondary border border-border text-xs font-bold rounded hover:bg-white/5 transition-colors flex items-center gap-2"
           >
             <Icon :name="topic.isLocked ? 'ph:lock-open' : 'ph:lock'" />
             {{ topic.isLocked ? t('forum.topic.unlock') : t('forum.topic.lock') }}
           </button>
           <button
             @click="handleDeleteTopic"
-            class="px-3 py-1.5 bg-red-500/10 border border-red-500/20 text-red-500 text-[10px] font-bold uppercase tracking-wider rounded hover:bg-red-500/20 transition-colors flex items-center gap-2"
+            class="px-3 py-1.5 bg-red-500/10 border border-red-500/20 text-red-500 text-xs font-bold rounded hover:bg-red-500/20 transition-colors flex items-center gap-2"
           >
             <Icon name="ph:trash" />
             {{ t('common.delete') }}
@@ -81,24 +81,20 @@
           <div
             class="w-full md:w-48 bg-bg-tertiary/30 p-6 border-b md:border-b-0 md:border-r border-border flex flex-row md:flex-col items-center md:items-start gap-4"
           >
-            <div
-              class="w-12 h-12 rounded bg-bg-primary border border-border flex items-center justify-center"
-            >
-              <Icon name="ph:user" class="text-2xl text-text-muted" />
-            </div>
-            <div class="flex-1">
-              <div class="font-bold text-sm truncate">
+            <UserAvatar :name="post.author.username" :url="post.author.avatarUrl" />
+            <div class="flex-1 min-w-0">
+              <NuxtLink :to="`/users/${post.author.id}`" class="block font-medium text-sm truncate hover:underline underline-offset-2">
                 {{ post.author.username }}
-              </div>
+              </NuxtLink>
               <div class="flex flex-wrap gap-1 mt-1">
                 <span
                   v-if="post.author.isAdmin"
-                  class="text-[8px] uppercase tracking-tighter px-1 bg-white/10 rounded text-text-secondary"
+                  class="text-2xs px-1.5 rounded border border-border text-text-secondary"
                   >{{ t('common.admin') }}</span
                 >
                 <span
                   v-if="post.author.isModerator"
-                  class="text-[8px] uppercase tracking-tighter px-1 bg-white/10 rounded text-text-secondary"
+                  class="text-2xs px-1.5 rounded border border-border text-text-secondary"
                   >{{ t('forum.topic.modBadge') }}</span
                 >
               </div>
@@ -108,7 +104,7 @@
           <!-- Post Content -->
           <div class="flex-1 p-6 flex flex-col relative group">
             <div
-              class="text-xs text-text-muted font-mono uppercase tracking-widest mb-4 flex justify-between items-center"
+              class="text-xs text-text-muted mb-3 flex justify-between items-center"
             >
               <span>{{ t('forum.topic.postedOn', { date: formatDate(post.createdAt) }) }}</span>
               <button
@@ -147,7 +143,7 @@
             <button
               @click="handlePostReply"
               :disabled="!replyContent.trim() || posting"
-              class="px-6 py-2 bg-white text-black text-xs font-bold uppercase tracking-wider rounded hover:bg-white/90 transition-colors disabled:opacity-50"
+              class="px-6 py-2 bg-white text-black text-xs font-bold rounded hover:bg-white/90 transition-colors disabled:opacity-50"
             >
               {{ posting ? t('forum.topic.posting') : t('forum.topic.postReply') }}
             </button>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 6e46d91d..b9c4096d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,275 +1,225 @@
 <template>
-  <div class="max-w-5xl mx-auto py-12">
-    <!-- Hero Section -->
-    <div class="text-center mb-16">
-      <div
-        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-bg-secondary border border-border mb-6"
-      >
-        <span class="relative flex h-2 w-2">
-          <span
-            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"
-          ></span>
-          <span
-            class="relative inline-flex rounded-full h-2 w-2 bg-success"
-          ></span>
-        </span>
-        <span
-          class="text-[10px] font-bold uppercase tracking-widest text-text-muted"
-          >{{
-            content?.statusBadgeText ?? t('home.statusBadge')
-          }}</span
-        >
+  <div class="space-y-6">
+    <!-- Greeting -->
+    <div class="flex flex-wrap items-end justify-between gap-4">
+      <div>
+        <h1 class="text-2xl font-semibold tracking-tight">{{ greeting }}</h1>
+        <p v-if="memberSince" class="text-sm text-text-muted mt-0.5">
+          {{ t('dashboard.memberSince', { date: memberSince }) }}
+        </p>
       </div>
-      <h1
-        class="text-4xl md:text-6xl font-black text-text-primary tracking-tighter mb-4 hero-title"
-        v-html="
-          content?.heroTitle ||
-          'TRACKARR'
-        "
-      ></h1>
-      <div
-        class="text-sm text-text-muted font-mono max-w-xl mx-auto mb-10 hero-subtitle"
-        v-html="
-          content?.heroSubtitle ||
-          t('home.heroSubtitle')
-        "
-      ></div>
-
-      <!-- Search Bar -->
-      <div class="max-w-2xl mx-auto">
-        <SearchBar
-          v-model="search"
-          :placeholder="t('home.searchPlaceholder')"
-          size="lg"
-          @search="handleSearch"
-        />
-        <div class="flex flex-wrap justify-center gap-4 mt-6">
-          <div
-            class="flex items-center gap-2 text-[10px] font-bold text-text-muted uppercase tracking-widest"
-          >
-            <Icon name="ph:package" />
-            <span>{{ t('home.torrentCount', stats?.live?.torrents ?? 0) }}</span>
-          </div>
-          <div
-            class="flex items-center gap-2 text-[10px] font-bold text-text-muted uppercase tracking-widest"
-          >
-            <Icon name="ph:users-three" />
-            <span>{{ t('home.peerCount', stats?.cached?.peers ?? 0) }}</span>
-          </div>
-          <div
-            class="flex items-center gap-2 text-[10px] font-bold text-text-muted uppercase tracking-widest"
-          >
-            <Icon name="ph:lightning" />
-            <span>{{ t('home.lowLatency') }}</span>
-          </div>
-        </div>
+      <div class="flex gap-2">
+        <NuxtLink to="/torrents" class="btn btn-secondary">
+          <Icon name="ph:files" aria-hidden="true" />{{ t('dashboard.browse') }}
+        </NuxtLink>
+        <button type="button" class="btn btn-primary" @click="showUpload = true">
+          <Icon name="ph:upload-simple" aria-hidden="true" />{{ t('dashboard.upload') }}
+        </button>
       </div>
     </div>
 
-    <!-- Recent Activity -->
-    <div class="space-y-4">
-      <div class="flex items-center justify-between px-1">
-        <div class="flex items-center gap-2">
-          <Icon name="ph:clock-counter-clockwise" class="text-text-muted" />
-          <h3 class="text-xs font-bold uppercase tracking-wider">
-            {{ t('home.recentlyIndexed') }}
-          </h3>
-        </div>
-        <NuxtLink
-          to="/torrents"
-          class="text-[10px] font-bold uppercase text-text-muted hover:text-white transition-colors flex items-center gap-1"
-        >
-          {{ t('home.browseAll') }} <Icon name="ph:arrow-right" />
-        </NuxtLink>
+    <!-- Account strip: the numbers a member checks every visit -->
+    <section class="card grid grid-cols-2 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-border" :aria-label="t('dashboard.account')">
+      <div class="p-4 col-span-2 md:col-span-1">
+        <p class="text-xs text-text-muted">{{ t('shell.meter.ratio') }}</p>
+        <p class="num text-3xl font-medium mt-1" :class="ratioClass">{{ ratioLabel }}</p>
+        <p class="num text-xs mt-1 space-x-3">
+          <span class="text-seed">↑ {{ formatSize(account.uploaded) }}</span>
+          <span class="text-leech">↓ {{ formatSize(account.downloaded) }}</span>
+        </p>
       </div>
-      <div class="card overflow-hidden">
-        <div class="overflow-x-auto">
-          <TorrentTable :torrents="recentTorrents" :compact="true" />
-        </div>
+      <div class="p-4">
+        <p class="text-xs text-text-muted">{{ t('dashboard.seeding') }}</p>
+        <p class="num text-3xl font-medium mt-1">{{ account.seeding }}</p>
+        <p class="text-xs text-text-muted mt-1">
+          {{ t('dashboard.leeching', { n: account.leeching }, account.leeching) }}
+        </p>
       </div>
-    </div>
-
-    <!-- Info Section -->
-    <div
-      class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24 border-t border-border pt-12"
-    >
-      <div
-        v-for="(feature, index) in features"
-        :key="index"
-        class="feature-box"
+      <NuxtLink
+        v-if="account.points !== null"
+        to="/shop"
+        class="p-4 hover:bg-bg-hover/60 transition-colors"
       >
-        <h4
-          class="feature-title text-xs font-bold uppercase tracking-widest text-text-primary mb-3"
-          v-html="feature.title"
-        />
-        <div
-          class="feature-description text-xs text-text-muted leading-relaxed font-mono"
-          v-html="feature.description"
-        />
+        <p class="text-xs text-text-muted">{{ t('dashboard.points') }}</p>
+        <p class="num text-3xl font-medium mt-1">{{ Math.floor(account.points).toLocaleString(locale) }}</p>
+        <p class="text-xs text-text-muted mt-1">{{ t('dashboard.spendPoints') }}</p>
+      </NuxtLink>
+      <NuxtLink
+        :to="user ? `/users/${user.id}` : '/'"
+        class="p-4 hover:bg-bg-hover/60 transition-colors"
+      >
+        <p class="text-xs text-text-muted">{{ t('dashboard.hnr') }}</p>
+        <p class="num text-3xl font-medium mt-1" :class="account.hnr > 0 ? 'text-danger' : ''">{{ account.hnr }}</p>
+        <p class="text-xs mt-1" :class="account.hnr > 0 ? 'text-danger' : 'text-text-muted'">
+          {{ account.hnr > 0 ? t('dashboard.hnrWarning') : t('dashboard.hnrNone') }}
+        </p>
+      </NuxtLink>
+    </section>
+
+    <!-- Note from the staff (Admin > Branding > Welcome message) -->
+    <section v-if="data?.welcomeMessage" class="card p-4 flex gap-3">
+      <Icon name="ph:megaphone-simple" class="text-lg text-text-muted shrink-0 mt-0.5" aria-hidden="true" />
+      <div class="prose-sm text-sm text-text-secondary [&_a]:underline" v-html="data.welcomeMessage" />
+    </section>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <!-- New torrents -->
+      <section class="card lg:col-span-2 overflow-hidden">
+        <div class="card-header">
+          <h2 class="text-sm font-medium">{{ t('dashboard.latest') }}</h2>
+          <NuxtLink to="/torrents" class="text-xs text-text-muted hover:text-text-primary">{{ t('dashboard.seeAll') }}</NuxtLink>
+        </div>
+        <table v-if="data?.latest.length" class="data-table">
+          <thead>
+            <tr>
+              <th>{{ t('dashboard.columns.name') }}</th>
+              <th class="text-right hidden sm:table-cell">{{ t('dashboard.columns.size') }}</th>
+              <th class="text-right" :title="t('dashboard.columns.seeders')">
+                <span class="text-seed" aria-hidden="true">↑</span><span class="sr-only">{{ t('dashboard.columns.seeders') }}</span>
+              </th>
+              <th class="text-right" :title="t('dashboard.columns.leechers')">
+                <span class="text-leech" aria-hidden="true">↓</span><span class="sr-only">{{ t('dashboard.columns.leechers') }}</span>
+              </th>
+              <th class="text-right hidden md:table-cell">{{ t('dashboard.columns.age') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="torrent in data.latest" :key="torrent.infoHash">
+              <td class="max-w-0 w-full">
+                <NuxtLink :to="`/torrents/${torrent.infoHash}`" class="block truncate text-text-primary hover:underline underline-offset-2">
+                  {{ torrent.name }}
+                </NuxtLink>
+                <span v-if="torrent.category" class="text-xs text-text-muted">{{ torrent.category }}</span>
+              </td>
+              <td class="num text-right text-text-secondary whitespace-nowrap hidden sm:table-cell">{{ formatSize(torrent.size) }}</td>
+              <td class="num text-right text-seed">{{ torrent.seeders }}</td>
+              <td class="num text-right text-leech">{{ torrent.leechers }}</td>
+              <td class="num text-right text-text-muted whitespace-nowrap hidden md:table-cell">{{ formatAge(torrent.createdAt) }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-else class="card-body text-sm text-text-muted">
+          {{ t('dashboard.noTorrents') }}
+          <button type="button" class="text-text-primary underline underline-offset-2" @click="showUpload = true">{{ t('dashboard.uploadFirst') }}</button>
+        </div>
+      </section>
+
+      <div class="space-y-6">
+        <!-- Open bounties -->
+        <section v-if="account.points !== null" class="card">
+          <div class="card-header">
+            <h2 class="text-sm font-medium">{{ t('dashboard.bounties') }}</h2>
+            <NuxtLink to="/bounties" class="text-xs text-text-muted hover:text-text-primary">{{ t('dashboard.seeAll') }}</NuxtLink>
+          </div>
+          <ul v-if="data?.bounties.length" class="divide-y divide-border">
+            <li v-for="bounty in data.bounties" :key="bounty.id">
+              <NuxtLink :to="`/bounties/${bounty.id}`" class="flex items-center justify-between gap-3 px-4 py-2.5 hover:bg-bg-hover/60">
+                <span class="text-sm truncate">{{ bounty.title }}</span>
+                <span class="num text-xs text-text-secondary shrink-0">{{ t('bonus.points', { n: Math.floor(bounty.totalPoints).toLocaleString(locale) }) }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+          <p v-else class="card-body text-sm text-text-muted">
+            {{ t('dashboard.noBounties') }}
+            <NuxtLink to="/bounties" class="text-text-primary underline underline-offset-2">{{ t('dashboard.requestTorrent') }}</NuxtLink>
+          </p>
+        </section>
+
+        <!-- Forum -->
+        <section class="card">
+          <div class="card-header">
+            <h2 class="text-sm font-medium">{{ t('dashboard.forum') }}</h2>
+            <NuxtLink to="/forum" class="text-xs text-text-muted hover:text-text-primary">{{ t('dashboard.seeAll') }}</NuxtLink>
+          </div>
+          <ul v-if="data?.topics.length" class="divide-y divide-border">
+            <li v-for="topic in data.topics" :key="topic.id">
+              <NuxtLink :to="`/forum/topic/${topic.id}`" class="block px-4 py-2.5 hover:bg-bg-hover/60">
+                <span class="block text-sm truncate">{{ topic.title }}</span>
+                <span class="block text-xs text-text-muted truncate">
+                  {{ [topic.category, topic.author, formatAge(String(topic.updatedAt))].filter(Boolean).join(', ') }}
+                </span>
+              </NuxtLink>
+            </li>
+          </ul>
+          <p v-else class="card-body text-sm text-text-muted">
+            {{ t('dashboard.noTopics') }}
+            <NuxtLink to="/forum" class="text-text-primary underline underline-offset-2">{{ t('dashboard.startTopic') }}</NuxtLink>
+          </p>
+        </section>
       </div>
     </div>
+
+    <UploadTorrentModal :is-open="showUpload" @close="showUpload = false" @uploaded="refresh()" />
   </div>
 </template>
 
 <script setup lang="ts">
-interface TrackerStats {
-  status: string;
-  cached: {
-    torrents: number;
-    peers: number;
-    seeders: number;
-    updatedAt: number;
+interface Dashboard {
+  account: {
+    uploaded: number;
+    downloaded: number;
+    memberSince: string | null;
+    points: number | null;
+    seeding: number;
+    leeching: number;
+    hnr: number;
   };
-  live: {
-    torrents: number;
-    peers: number;
-  };
-  protocols: {
-    http: boolean;
-    udp: boolean;
-    ws: boolean;
-  };
-}
-
-interface TorrentWithStats {
-  id: string;
-  infoHash: string;
-  name: string;
-  size: number;
-  createdAt: string;
-  stats: {
+  welcomeMessage: string | null;
+  latest: {
+    infoHash: string;
+    name: string;
+    size: number;
+    createdAt: string;
+    category: string | null;
     seeders: number;
     leechers: number;
-    completed: number;
-  };
+  }[];
+  bounties: { id: string; title: string; totalPoints: number }[];
+  topics: { id: string; title: string; updatedAt: string; author: string | null; category: string | null }[];
 }
 
-interface HomepageContent {
-  heroTitle: string;
-  heroSubtitle: string;
-  statusBadgeText: string;
-  features: { title: string; description: string }[];
-}
+const { t, locale } = useI18n();
+const { user } = useUserSession();
+const { data, refresh } = await useFetch<Dashboard>('/api/dashboard');
 
-const { t } = useI18n();
-const search = ref('');
-const router = useRouter();
+useHead({ title: () => t('shell.nav.home') });
 
-function handleSearch() {
-  if (!search.value.trim()) return;
-  router.push({
-    path: '/search',
-    query: { q: search.value.trim() },
-  });
-}
+const showUpload = ref(false);
 
-// Fetch homepage content
-const { data: content } = await useFetch<HomepageContent>(
-  '/api/homepage-content'
+const account = computed(
+  () =>
+    data.value?.account ?? {
+      uploaded: 0, downloaded: 0, memberSince: null, points: null, seeding: 0, leeching: 0, hnr: 0,
+    }
 );
 
-// Features with defaults
-const features = computed(() => {
-  return (
-    content.value?.features ?? [
-      {
-        title: t('home.features.performance.title'),
-        description: t('home.features.performance.description'),
-      },
-      {
-        title: t('home.features.protocols.title'),
-        description: t('home.features.protocols.description'),
-      },
-      {
-        title: t('home.features.openSource.title'),
-        description: t('home.features.openSource.description'),
-      },
-    ]
-  );
+// Time of day comes from the browser clock, after hydration (the server may
+// be in another timezone)
+const hour = ref<number | null>(null);
+onMounted(() => (hour.value = new Date().getHours()));
+const greeting = computed(() => {
+  const h = hour.value;
+  const key =
+    h === null ? 'neutral' : h < 5 || h >= 18 ? 'evening' : h < 12 ? 'morning' : 'afternoon';
+  return t(`dashboard.greeting.${key}`, { name: user.value?.username ?? '' });
 });
 
-// Fetch tracker stats for the hero section
-const { data: stats } = await useFetch<TrackerStats>('/api/admin/stats');
-
-// Fetch recent torrents
-const { data: torrentsData } = await useFetch<{ data: TorrentWithStats[] }>(
-  '/api/torrents',
-  {
-    query: { limit: 10 },
-  }
+const memberSince = computed(() =>
+  account.value.memberSince
+    ? new Date(account.value.memberSince).toLocaleDateString(locale.value, { month: 'long', year: 'numeric' })
+    : null
 );
 
-const recentTorrents = computed(() => torrentsData.value?.data ?? []);
+const ratio = computed(() => {
+  const { uploaded, downloaded } = account.value;
+  return downloaded === 0 ? (uploaded > 0 ? Infinity : 0) : uploaded / downloaded;
+});
+const ratioLabel = computed(() => (ratio.value === Infinity ? '∞' : ratio.value.toFixed(2)));
+const ratioClass = computed(() => {
+  const { uploaded, downloaded } = account.value;
+  if (uploaded === 0 && 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>
-
-<style>
-/* Hero title styles - allow rich text formatting */
-.hero-title p {
-  margin: 0;
-  display: inline;
-}
-
-.hero-title strong {
-  font-weight: 900;
-}
-
-.hero-title em {
-  font-style: italic;
-}
-
-/* Hero subtitle styles */
-.hero-subtitle p {
-  margin: 0;
-}
-
-.hero-subtitle strong {
-  font-weight: 700;
-}
-
-.hero-subtitle a {
-  color: var(--text-primary);
-  text-decoration: underline;
-}
-
-/* Feature box styles - allow rich text formatting */
-.feature-title p {
-  margin: 0;
-  display: inline;
-}
-
-.feature-title strong {
-  font-weight: 900;
-}
-
-.feature-description p {
-  margin: 0 0 0.5rem 0;
-}
-
-.feature-description p:last-child {
-  margin-bottom: 0;
-}
-
-.feature-description strong {
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.feature-description em {
-  font-style: italic;
-}
-
-.feature-description a {
-  color: var(--text-primary);
-  text-decoration: underline;
-}
-
-.feature-description ul,
-.feature-description ol {
-  margin: 0.5rem 0;
-  padding-left: 1.25rem;
-}
-
-.feature-description li {
-  margin: 0.25rem 0;
-}
-</style>
diff --git a/app/pages/invites.vue b/app/pages/invites.vue
index fa052fa7..3fda47b3 100644
--- a/app/pages/invites.vue
+++ b/app/pages/invites.vue
@@ -3,22 +3,22 @@
     <div class="flex items-end justify-between mb-6">
       <div>
         <h2
-          class="text-xl font-bold text-text-primary tracking-tight uppercase"
+          class="text-2xl font-semibold tracking-tight text-text-primary"
         >
           {{ t('invites.title') }}
         </h2>
-        <p class="text-xs text-text-muted font-mono mt-0.5">
+        <p class="text-sm text-text-muted mt-0.5">
           {{ t('invites.subtitle') }}
         </p>
       </div>
       <div class="flex items-center gap-4">
         <div class="text-right">
           <p
-            class="text-[10px] font-bold text-text-muted uppercase tracking-widest"
+            class="text-xs font-bold text-text-muted"
           >
             {{ t('invites.remaining') }}
           </p>
-          <p class="text-2xl font-bold text-accent">
+          <p class="text-2xl font-semibold num text-text-primary">
             {{ inviteData?.remaining || 0 }}
           </p>
         </div>
@@ -43,7 +43,7 @@
         <div class="flex items-center gap-2">
           <Icon name="ph:envelope-simple-bold" class="text-text-muted" />
           <h3
-            class="text-xs font-bold uppercase tracking-wider text-text-primary"
+            class="text-sm font-medium text-text-primary"
           >
             {{ t('invites.yourInvites') }}
           </h3>
@@ -69,13 +69,13 @@
                   {{ invite.code }}
                 </code>
                 <span
-                  class="px-2 py-0.5 text-[10px] font-bold uppercase rounded"
+                  class="px-2 py-0.5 text-xs font-bold rounded"
                   :class="getStatusClass(invite)"
                 >
                   {{ getStatusLabel(invite) }}
                 </span>
               </div>
-              <div class="flex items-center gap-4 text-[10px] text-text-muted">
+              <div class="flex items-center gap-4 text-xs text-text-muted">
                 <span> {{ t('invites.createdAt', { date: formatDate(invite.createdAt) }) }} </span>
                 <span v-if="invite.usedByUser">
                   {{ t('invites.usedBy') }}
@@ -110,11 +110,11 @@
             class="w-12 h-12 text-text-muted/30 mx-auto mb-4"
           />
           <p
-            class="text-xs font-bold text-text-muted uppercase tracking-widest mb-2"
+            class="text-xs font-bold text-text-muted mb-2"
           >
             {{ t('invites.empty') }}
           </p>
-          <p class="text-[10px] text-text-muted">
+          <p class="text-xs text-text-muted">
             {{ t('invites.emptyHint') }}
           </p>
         </div>
diff --git a/app/pages/messages.vue b/app/pages/messages.vue
new file mode 100644
index 00000000..1d58ba2c
--- /dev/null
+++ b/app/pages/messages.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="card overflow-hidden grid md:grid-cols-[19rem_1fr] h-[calc(100dvh-10rem)] min-h-[28rem]">
+    <!-- Conversations -->
+    <aside
+      class="flex flex-col min-h-0 border-r border-border"
+      :class="activeId || composing ? 'hidden md:flex' : 'flex'"
+      :aria-label="t('messages.title')"
+    >
+      <div class="h-14 shrink-0 flex items-center justify-between gap-2 px-4 border-b border-border">
+        <h1 class="text-base font-semibold">{{ t('messages.title') }}</h1>
+        <NuxtLink :to="{ query: { new: '1' } }" class="btn btn-secondary !px-2.5" :title="t('messages.new')">
+          <Icon name="ph:note-pencil" aria-hidden="true" />
+          <span class="sr-only sm:not-sr-only">{{ t('messages.new') }}</span>
+        </NuxtLink>
+      </div>
+
+      <ul v-if="conversations?.length" class="flex-1 overflow-y-auto divide-y divide-border">
+        <li v-for="c in conversations" :key="c.id">
+          <NuxtLink
+            :to="{ query: { c: c.id } }"
+            class="flex gap-3 px-4 py-3 hover:bg-bg-hover/60 transition-colors"
+            :class="c.id === activeId && 'bg-bg-hover'"
+            :aria-current="c.id === activeId ? 'page' : undefined"
+          >
+            <UserAvatar :name="c.other?.username" :url="c.other?.avatarUrl" />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-baseline justify-between gap-2">
+                <span class="truncate text-sm" :class="c.unread ? 'font-semibold text-text-primary' : 'text-text-primary'">
+                  {{ c.other?.username ?? t('messages.deletedUser') }}
+                </span>
+                <span class="num text-2xs text-text-muted shrink-0">{{ formatAge(String(c.lastMessageAt)) }}</span>
+              </div>
+              <p class="text-xs truncate" :class="c.unread ? 'text-text-secondary' : 'text-text-muted'">
+                <span v-if="c.lastFromMe">{{ t('messages.you') }}</span>{{ c.preview }}
+              </p>
+            </div>
+            <span v-if="c.unread" class="mt-1.5 w-2 h-2 rounded-full bg-white shrink-0" aria-hidden="true" />
+          </NuxtLink>
+        </li>
+      </ul>
+      <div v-else class="flex-1 p-6 text-sm text-text-muted">
+        <p>{{ t('messages.empty') }}</p>
+        <p class="mt-1">{{ t('messages.emptyHint') }}</p>
+      </div>
+    </aside>
+
+    <!-- New conversation -->
+    <section v-if="composing" class="flex flex-col min-h-0">
+      <div class="h-14 shrink-0 flex items-center gap-2 px-4 border-b border-border">
+        <NuxtLink to="/messages" class="md:hidden p-1.5 -ml-1.5 rounded btn-ghost" :aria-label="t('messages.back')">
+          <Icon name="ph:arrow-left" class="block" />
+        </NuxtLink>
+        <h2 class="text-base font-semibold">{{ t('messages.new') }}</h2>
+      </div>
+      <form class="flex-1 flex flex-col gap-3 p-4" @submit.prevent="startConversation">
+        <label class="block">
+          <span class="text-xs text-text-muted">{{ t('messages.to') }}</span>
+          <input v-model="draftTo" type="text" class="input w-full mt-1" :placeholder="t('messages.toPlaceholder')" autocomplete="off" required />
+        </label>
+        <textarea
+          v-model="draft"
+          class="input w-full flex-1 min-h-[8rem] resize-none"
+          :placeholder="t('messages.bodyPlaceholder')"
+          maxlength="5000"
+          @keydown.enter.exact.prevent="startConversation"
+        />
+        <p v-if="error" class="text-sm text-danger" role="alert">{{ error }}</p>
+        <div class="flex items-center justify-between gap-3">
+          <span class="hidden sm:block text-xs text-text-muted">{{ t('messages.sendHint') }}</span>
+          <button type="submit" class="btn btn-primary ml-auto" :disabled="sending || !draft.trim() || !draftTo.trim()">
+            <Icon name="ph:paper-plane-right" aria-hidden="true" />{{ sending ? t('messages.sending') : t('messages.send') }}
+          </button>
+        </div>
+      </form>
+    </section>
+
+    <!-- Thread -->
+    <section v-else-if="activeId && thread" class="flex flex-col min-h-0">
+      <div class="h-14 shrink-0 flex items-center gap-3 px-4 border-b border-border">
+        <NuxtLink to="/messages" class="md:hidden p-1.5 -ml-1.5 rounded btn-ghost" :aria-label="t('messages.back')">
+          <Icon name="ph:arrow-left" class="block" />
+        </NuxtLink>
+        <UserAvatar :name="thread.other?.username" :url="thread.other?.avatarUrl" size="sm" />
+        <NuxtLink
+          v-if="thread.other"
+          :to="`/users/${thread.other.id}`"
+          class="text-sm font-medium hover:underline underline-offset-2 truncate"
+          :title="t('messages.profile')"
+        >{{ thread.other.username }}</NuxtLink>
+        <span v-else class="text-sm text-text-muted">{{ t('messages.deletedUser') }}</span>
+        <div class="ml-auto flex items-center gap-1">
+          <button
+            v-if="thread.other"
+            type="button"
+            class="p-1.5 rounded btn-ghost"
+            :title="thread.iBlocked ? t('messages.unblock') : t('messages.block')"
+            :aria-label="thread.iBlocked ? t('messages.unblock') : t('messages.block')"
+            @click="toggleBlock"
+          >
+            <Icon :name="thread.iBlocked ? 'ph:user-check' : 'ph:prohibit'" class="block" />
+          </button>
+          <button
+            type="button"
+            class="p-1.5 rounded btn-ghost"
+            :title="t('messages.hide')"
+            :aria-label="t('messages.hide')"
+            @click="hideConversation"
+          >
+            <Icon name="ph:eye-slash" class="block" />
+          </button>
+        </div>
+      </div>
+
+      <div ref="scroller" class="flex-1 overflow-y-auto px-4 py-4 space-y-1" aria-live="polite">
+        <div v-if="thread.hasMore" class="text-center pb-3">
+          <button type="button" class="btn btn-ghost text-xs" @click="loadEarlier">{{ t('messages.loadEarlier') }}</button>
+        </div>
+        <template v-for="(m, i) in thread.messages" :key="m.id">
+          <p
+            v-if="i === 0 || dayKey(m.createdAt) !== dayKey(thread.messages[i - 1]!.createdAt)"
+            class="text-center text-2xs text-text-muted py-2"
+          >{{ formatDay(m.createdAt) }}</p>
+          <div class="flex" :class="m.mine ? 'justify-end' : 'justify-start'">
+            <div
+              class="max-w-[min(34rem,85%)] rounded-lg px-3 py-2 text-sm"
+              :class="m.mine ? 'bg-bg-hover text-text-primary' : 'bg-bg-primary border border-border text-text-primary'"
+            >
+              <!-- Plain text: interpolated, never rendered as HTML -->
+              <p class="whitespace-pre-wrap break-words">{{ m.body }}</p>
+              <p class="num text-2xs text-text-muted mt-1 text-right">{{ formatTime(m.createdAt) }}</p>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div class="shrink-0 border-t border-border p-3">
+        <p v-if="thread.iBlocked" class="text-sm text-text-muted px-1 py-2">{{ t('messages.youBlocked') }}</p>
+        <p v-else-if="thread.blockedMe" class="text-sm text-text-muted px-1 py-2">{{ t('messages.blockedYou') }}</p>
+        <form v-else class="flex items-end gap-2" @submit.prevent="reply">
+          <textarea
+            v-model="draft"
+            rows="1"
+            class="input flex-1 resize-none max-h-40"
+            :placeholder="t('messages.bodyPlaceholder')"
+            maxlength="5000"
+            :aria-label="t('messages.bodyPlaceholder')"
+            @input="autoGrow"
+            @keydown.enter.exact.prevent="reply"
+          />
+          <button type="submit" class="btn btn-primary" :disabled="sending || !draft.trim()" :aria-label="t('messages.send')">
+            <Icon name="ph:paper-plane-right" aria-hidden="true" />
+          </button>
+        </form>
+        <p v-if="error" class="text-sm text-danger mt-2" role="alert">{{ error }}</p>
+      </div>
+    </section>
+
+    <!-- Nothing selected -->
+    <section v-else class="hidden md:flex items-center justify-center p-6 text-sm text-text-muted">
+      {{ t('messages.select') }}
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ConversationRow {
+  id: string;
+  lastMessageAt: string;
+  other: { id: string; username: string; avatarUrl: string | null } | null;
+  preview: string;
+  lastFromMe: boolean;
+  unread: boolean;
+}
+interface Message {
+  id: string;
+  senderId: string;
+  body: string;
+  createdAt: string;
+  mine: boolean;
+}
+interface Thread {
+  id: string;
+  other: { id: string; username: string; avatarUrl: string | null } | null;
+  iBlocked: boolean;
+  blockedMe: boolean;
+  hasMore: boolean;
+  messages: Message[];
+}
+
+const { t, locale } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { refresh: refreshUnread } = useUnreadMessages();
+useHead({ title: () => t('messages.title') });
+
+const activeId = computed(() => (typeof route.query.c === 'string' ? route.query.c : null));
+const composing = computed(() => route.query.new === '1' || typeof route.query.to === 'string');
+
+const { data: conversations, refresh: refreshList } = await useFetch<ConversationRow[]>('/api/messages', {
+  default: () => [],
+});
+
+const thread = ref<Thread | null>(null);
+const scroller = ref<HTMLElement | null>(null);
+const draft = ref('');
+const draftTo = ref(typeof route.query.to === 'string' ? route.query.to : '');
+const sending = ref(false);
+const error = ref<string | null>(null);
+
+function errorText(err: unknown): string {
+  return (err as { data?: { message?: string } }).data?.message ?? 'Error';
+}
+
+async function scrollToBottom() {
+  await nextTick();
+  scroller.value?.scrollTo({ top: scroller.value.scrollHeight });
+}
+
+async function loadThread(scroll = true) {
+  if (!activeId.value) {
+    thread.value = null;
+    return;
+  }
+  const atBottom =
+    !scroller.value ||
+    scroller.value.scrollHeight - scroller.value.scrollTop - scroller.value.clientHeight < 80;
+  const data = await $fetch<Thread>(`/api/messages/${activeId.value}`).catch(() => null);
+  if (!data) {
+    router.replace('/messages');
+    return;
+  }
+  // Keep earlier pages already loaded
+  const known = thread.value?.id === data.id ? thread.value.messages : [];
+  const newest = new Set(data.messages.map((m) => m.id));
+  thread.value = { ...data, messages: [...known.filter((m) => !newest.has(m.id)), ...data.messages] };
+  refreshUnread();
+  if (scroll || atBottom) scrollToBottom();
+}
+
+async function loadEarlier() {
+  if (!thread.value?.messages.length) return;
+  const before = thread.value.messages[0]!.createdAt;
+  const page = await $fetch<Thread>(`/api/messages/${thread.value.id}`, { query: { before } });
+  const height = scroller.value?.scrollHeight ?? 0;
+  thread.value = { ...thread.value, hasMore: page.hasMore, messages: [...page.messages, ...thread.value.messages] };
+  await nextTick();
+  // Keep the reading position when older messages are prepended
+  if (scroller.value) scroller.value.scrollTop += scroller.value.scrollHeight - height;
+}
+
+watch(activeId, () => {
+  draft.value = '';
+  error.value = null;
+  thread.value = null;
+  loadThread();
+}, { immediate: true });
+
+watch(() => route.query.to, (to) => {
+  if (typeof to === 'string') draftTo.value = to;
+});
+
+async function reply() {
+  if (!thread.value || !draft.value.trim() || sending.value) return;
+  sending.value = true;
+  error.value = null;
+  try {
+    await $fetch(`/api/messages/${thread.value.id}`, { method: 'POST', body: { body: draft.value } });
+    draft.value = '';
+    await Promise.all([loadThread(), refreshList()]);
+  } catch (err) {
+    error.value = errorText(err);
+  } finally {
+    sending.value = false;
+  }
+}
+
+async function startConversation() {
+  if (!draft.value.trim() || !draftTo.value.trim() || sending.value) return;
+  sending.value = true;
+  error.value = null;
+  try {
+    const res = await $fetch<{ conversationId: string }>('/api/messages', {
+      method: 'POST',
+      body: { to: draftTo.value.trim(), body: draft.value },
+    });
+    draft.value = '';
+    await refreshList();
+    router.push({ query: { c: res.conversationId } });
+  } catch (err) {
+    error.value = errorText(err);
+  } finally {
+    sending.value = false;
+  }
+}
+
+async function toggleBlock() {
+  if (!thread.value?.other) return;
+  const blocked = !thread.value.iBlocked;
+  if (blocked && !confirm(t('messages.confirmBlock', { name: thread.value.other.username }))) return;
+  error.value = null;
+  try {
+    await $fetch('/api/messages/block', { method: 'POST', body: { userId: thread.value.other.id, blocked } });
+    thread.value.iBlocked = blocked;
+  } catch (err) {
+    error.value = errorText(err);
+  }
+}
+
+async function hideConversation() {
+  if (!thread.value || !confirm(t('messages.confirmHide'))) return;
+  error.value = null;
+  try {
+    await $fetch(`/api/messages/${thread.value.id}`, { method: 'DELETE' });
+  } catch (err) {
+    error.value = errorText(err);
+    return;
+  }
+  await refreshList();
+  router.replace('/messages');
+}
+
+function autoGrow(event: Event) {
+  const el = event.target as HTMLTextAreaElement;
+  el.style.height = 'auto';
+  el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+}
+
+const dayKey = (iso: string) => new Date(iso).toDateString();
+const formatDay = (iso: string) =>
+  new Date(iso).toLocaleDateString(locale.value, { weekday: 'long', day: 'numeric', month: 'long' });
+const formatTime = (iso: string) =>
+  new Date(iso).toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
+
+// New messages while the page is open
+let poll: ReturnType<typeof setInterval> | undefined;
+onMounted(() => {
+  poll = setInterval(() => {
+    if (document.visibilityState !== 'visible') return;
+    refreshList();
+    if (activeId.value) loadThread(false);
+  }, 15_000);
+});
+onUnmounted(() => clearInterval(poll));
+</script>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index a014dd6c..88d9deeb 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -1,248 +1,18 @@
 <template>
-  <div class="flex gap-6">
-    <!-- Category Sidebar -->
-    <CategorySidebar
-      :categories="categories ?? []"
-      :selected-id="selectedCategory"
-      @select="handleCategorySelect"
-    />
-
-    <!-- Main Content -->
-    <div class="flex-1 min-w-0 py-8">
-      <!-- Search Header -->
-      <div class="mb-12 text-center lg:text-left">
-        <h1
-          class="text-3xl font-black text-text-primary tracking-tighter uppercase mb-4"
-        >
-          {{ t('search.titlePrefix') }} <span class="text-text-muted">{{ t('search.titleAccent') }}</span>
-        </h1>
-        <div class="max-w-2xl lg:mx-0 mx-auto">
-          <SearchBar
-            v-model="searchQuery"
-            :placeholder="t('search.placeholder')"
-            size="lg"
-            :loading="pending"
-            @search="handleSearch"
-          />
-        </div>
-      </div>
-
-      <!-- Results Section -->
-      <div v-if="searchQuery || selectedCategory" class="space-y-6">
-        <div class="flex items-center justify-between px-1">
-          <div class="flex items-center gap-2">
-            <Icon name="ph:list-bullets-bold" class="text-text-muted" />
-            <h3 class="text-xs font-bold uppercase tracking-wider">
-              {{ t('search.results') }}
-              <span v-if="pagination.total > 0" class="text-text-muted ml-1">
-                ({{ pagination.total }})
-              </span>
-            </h3>
-          </div>
-
-          <div class="flex items-center gap-4">
-            <div
-              class="text-[10px] font-mono text-text-muted uppercase tracking-widest"
-            >
-              {{ t('search.sortBy') }} <span class="text-text-primary">{{ t('search.newest') }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="card overflow-hidden">
-          <div class="overflow-x-auto">
-            <TorrentTable
-              v-if="torrents.length > 0"
-              :torrents="torrents"
-              :compact="false"
-            />
-            <div v-else-if="!pending" class="p-20 text-center">
-              <div
-                class="w-16 h-16 bg-bg-tertiary rounded-full flex items-center justify-center mx-auto mb-4 border border-border"
-              >
-                <Icon
-                  name="ph:magnifying-glass-x"
-                  class="text-3xl text-text-muted"
-                />
-              </div>
-              <h3
-                class="text-sm font-bold text-text-primary uppercase tracking-wider"
-              >
-                {{ t('search.noResults') }}
-              </h3>
-              <p
-                class="text-xs text-text-muted mt-1 font-mono max-w-xs mx-auto"
-              >
-                {{ t('search.noResultsHint') }}
-              </p>
-            </div>
-            <div v-else class="p-20 text-center">
-              <Icon
-                name="ph:circle-notch"
-                class="animate-spin h-8 w-8 text-text-muted mx-auto mb-4"
-              />
-              <p
-                class="text-xs text-text-muted font-mono uppercase tracking-widest"
-              >
-                {{ t('search.searching') }}
-              </p>
-            </div>
-          </div>
-
-          <!-- Pagination -->
-          <div
-            v-if="pagination.pages > 1"
-            class="px-4 py-3 border-t border-border flex items-center justify-between bg-bg-secondary/50"
-          >
-            <p
-              class="text-[10px] font-mono text-text-muted uppercase tracking-widest"
-            >
-              {{ t('common.pageOf', { page: pagination.page, pages: pagination.pages }) }}
-            </p>
-            <div class="flex gap-1">
-              <button
-                class="btn btn-secondary !py-1 !px-2 text-[10px] uppercase font-bold"
-                :disabled="pagination.page <= 1"
-                @click="goToPage(pagination.page - 1)"
-              >
-                <Icon name="ph:caret-left-bold" />
-              </button>
-              <button
-                class="btn btn-secondary !py-1 !px-2 text-[10px] uppercase font-bold"
-                :disabled="pagination.page >= pagination.pages"
-                @click="goToPage(pagination.page + 1)"
-              >
-                <Icon name="ph:caret-right-bold" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Empty State / Trending -->
-      <div v-else class="mt-12">
-        <div class="flex items-center gap-2 mb-6 px-1">
-          <Icon name="ph:trend-up-bold" class="text-text-muted" />
-          <h3 class="text-xs font-bold uppercase tracking-wider">
-            {{ t('search.trending') }}
-          </h3>
-        </div>
-        <div class="card overflow-hidden">
-          <TorrentTable :torrents="trendingTorrents" :compact="true" />
-        </div>
-      </div>
-    </div>
-  </div>
+  <div />
 </template>
 
 <script setup lang="ts">
-interface TorrentWithStats {
-  id: string;
-  infoHash: string;
-  name: string;
-  size: number;
-  createdAt: string;
-  category?: {
-    id: string;
-    name: string;
-    slug: string;
-  };
-  stats: {
-    seeders: number;
-    leechers: number;
-    completed: number;
-  };
-}
-
-const { t } = useI18n();
+// Search now lives on the torrent list (and the ⌘K palette); keep old links working
 const route = useRoute();
-const router = useRouter();
-
-const searchQuery = ref((route.query.q as string) || '');
-const selectedCategory = ref((route.query.c as string) || '');
-const page = ref(parseInt((route.query.p as string) || '1', 10));
-
-// Fetch categories
-const { data: categories } = await useFetch<any[]>('/api/categories');
-
-// Fetch torrents
-const {
-  data: torrentsData,
-  pending,
-  refresh,
-} = await useFetch<{
-  data: TorrentWithStats[];
-  pagination: {
-    page: number;
-    limit: number;
-    total: number;
-    pages: number;
-  };
-}>('/api/torrents', {
-  query: computed(() => ({
-    search: searchQuery.value,
-    categoryId: selectedCategory.value,
-    page: page.value,
-    limit: 20,
-  })),
-  watch: [searchQuery, selectedCategory, page],
-});
-
-// Fetch trending (just recent for now)
-const { data: trendingData } = await useFetch<{ data: TorrentWithStats[] }>(
-  '/api/torrents',
+await navigateTo(
   {
-    query: { limit: 10 },
-  }
-);
-
-const torrents = computed(() => torrentsData.value?.data ?? []);
-const pagination = computed(
-  () => torrentsData.value?.pagination ?? { page: 1, pages: 1, total: 0 }
-);
-const trendingTorrents = computed(() => trendingData.value?.data ?? []);
-
-const searchBarRef = ref(null);
-
-function handleSearch() {
-  page.value = 1;
-  updateUrl();
-}
-
-function handleCategorySelect(id: string) {
-  selectedCategory.value = id;
-  page.value = 1;
-  updateUrl();
-}
-
-function goToPage(p: number) {
-  page.value = p;
-  updateUrl();
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-}
-
-function updateUrl() {
-  router.replace({
+    path: '/torrents',
     query: {
-      q: searchQuery.value || undefined,
-      c: selectedCategory.value || undefined,
-      p: page.value > 1 ? page.value : undefined,
+      search: typeof route.query.q === 'string' ? route.query.q : undefined,
+      categoryId: typeof route.query.c === 'string' ? route.query.c : undefined,
     },
-  });
-}
-
-// Sync with URL on load and back/forward
-watch(
-  () => route.query,
-  (newQuery) => {
-    searchQuery.value = (newQuery.q as string) || '';
-    selectedCategory.value = (newQuery.c as string) || '';
-    page.value = parseInt((newQuery.p as string) || '1', 10);
   },
-  { deep: true }
+  { replace: true, redirectCode: 301 }
 );
-
-useHead({
-  title: () => t('search.pageTitle'),
-});
 </script>
diff --git a/app/pages/shop.vue b/app/pages/shop.vue
index 276b1ec1..769037cc 100644
--- a/app/pages/shop.vue
+++ b/app/pages/shop.vue
@@ -2,25 +2,25 @@
   <div class="space-y-6">
     <div class="flex flex-wrap items-end justify-between gap-4">
       <div>
-        <h2 class="text-xl font-bold text-text-primary tracking-tight uppercase">
+        <h2 class="text-2xl font-semibold tracking-tight text-text-primary">
           {{ t('bonus.shop.title') }}
         </h2>
-        <p class="text-xs text-text-muted font-mono mt-0.5">
+        <p class="text-sm text-text-muted mt-0.5">
           {{ t('bonus.shop.subtitle') }}
         </p>
       </div>
       <div class="flex items-center gap-6">
         <div class="text-right">
-          <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest">
+          <p class="text-xs font-bold text-text-muted">
             {{ t('bonus.shop.seedingNow') }}
           </p>
           <p class="text-2xl font-bold text-text-primary">{{ me?.seedingNow ?? 0 }}</p>
         </div>
         <div class="text-right">
-          <p class="text-[10px] font-bold text-text-muted uppercase tracking-widest">
+          <p class="text-xs font-bold text-text-muted">
             {{ t('bonus.shop.balance') }}
           </p>
-          <p class="text-2xl font-bold text-accent">{{ formatPoints(me?.points ?? 0) }}</p>
+          <p class="text-2xl font-semibold num text-text-primary">{{ formatPoints(me?.points ?? 0) }}</p>
         </div>
       </div>
     </div>
@@ -44,7 +44,7 @@
           <div class="card-header">
             <div class="flex items-center gap-2">
               <Icon name="ph:storefront-bold" class="text-text-muted" />
-              <h3 class="text-xs font-bold uppercase tracking-wider text-text-primary">
+              <h3 class="text-sm font-medium text-text-primary">
                 {{ t('bonus.shop.items') }}
               </h3>
             </div>
@@ -58,16 +58,16 @@
               >
                 <div>
                   <p class="text-sm font-bold text-text-primary">{{ item.name }}</p>
-                  <p class="text-[11px] text-accent font-mono mt-0.5">{{ itemEffect(item) }}</p>
+                  <p class="text-xs text-text-secondary num mt-0.5">{{ itemEffect(item) }}</p>
                   <p v-if="item.description" class="text-xs text-text-muted mt-2">
                     {{ item.description }}
                   </p>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-sm font-bold font-mono">{{ formatPoints(item.price) }}</span>
+                  <span class="text-sm font-medium num">{{ formatPoints(item.price) }}</span>
                   <span
                     v-if="item.type === 'gif_avatar' && me.canUseGifAvatar"
-                    class="text-[10px] font-bold uppercase tracking-wider text-success"
+                    class="text-xs font-bold text-success"
                   >
                     {{ t('bonus.shop.owned') }}
                   </span>
@@ -94,7 +94,7 @@
             <div class="card-header">
               <div class="flex items-center gap-2">
                 <Icon name="ph:coins-bold" class="text-text-muted" />
-                <h3 class="text-xs font-bold uppercase tracking-wider text-text-primary">
+                <h3 class="text-sm font-medium text-text-primary">
                   {{ t('bonus.shop.howToEarn') }}
                 </h3>
               </div>
@@ -102,7 +102,7 @@
             <ul class="card-body space-y-2 text-xs text-text-secondary">
               <li v-if="me.rules.pointsPerSeedDay > 0">
                 {{ t('bonus.shop.earnSeed', { points: me.rules.pointsPerSeedDay, max: me.rules.maxSeedingTorrents }) }}
-                <span class="block text-[10px] text-text-muted">{{ t('bonus.shop.earnSeedNote') }}</span>
+                <span class="block text-xs text-text-muted">{{ t('bonus.shop.earnSeedNote') }}</span>
               </li>
               <li v-if="me.rules.pointsPerUpload > 0">
                 {{ t('bonus.shop.earnUpload', { points: me.rules.pointsPerUpload }) }}
@@ -120,7 +120,7 @@
             <div class="card-header">
               <div class="flex items-center gap-2">
                 <Icon name="ph:user-circle-bold" class="text-text-muted" />
-                <h3 class="text-xs font-bold uppercase tracking-wider text-text-primary">
+                <h3 class="text-sm font-medium text-text-primary">
                   {{ t('bonus.avatar.title') }}
                 </h3>
               </div>
@@ -144,7 +144,7 @@
                     {{ t('bonus.avatar.remove') }}
                   </button>
                 </div>
-                <p class="text-[10px] text-text-muted">
+                <p class="text-xs text-text-muted">
                   {{ me.canUseGifAvatar ? t('bonus.avatar.hintGif') : t('bonus.avatar.hint') }}
                 </p>
                 <input
@@ -165,7 +165,7 @@
         <div class="card-header">
           <div class="flex items-center gap-2">
             <Icon name="ph:clock-counter-clockwise-bold" class="text-text-muted" />
-            <h3 class="text-xs font-bold uppercase tracking-wider text-text-primary">
+            <h3 class="text-sm font-medium text-text-primary">
               {{ t('bonus.shop.history') }}
             </h3>
           </div>
@@ -174,12 +174,12 @@
           <table v-if="me.transactions.length" class="w-full text-xs">
             <tbody>
               <tr v-for="tx in me.transactions" :key="tx.id" class="border-b border-border last:border-0">
-                <td class="py-2 text-text-muted font-mono whitespace-nowrap pr-4">{{ formatDateTime(tx.createdAt) }}</td>
+                <td class="py-2 text-text-muted num whitespace-nowrap pr-4">{{ formatDateTime(tx.createdAt) }}</td>
                 <td class="py-2 pr-4">
                   <span class="font-bold">{{ txLabel(tx.type) }}</span>
                   <span v-if="tx.description" class="text-text-muted"> · {{ tx.description }}</span>
                 </td>
-                <td class="py-2 text-right font-mono font-bold" :class="tx.amount >= 0 ? 'text-success' : 'text-error'">
+                <td class="py-2 text-right num font-medium" :class="tx.amount >= 0 ? 'text-success' : 'text-error'">
                   {{ tx.amount >= 0 ? '+' : '' }}{{ formatPoints(tx.amount) }}
                 </td>
               </tr>
diff --git a/app/pages/torrents/[hash].vue b/app/pages/torrents/[hash].vue
index 5c164f8c..0c8390df 100644
--- a/app/pages/torrents/[hash].vue
+++ b/app/pages/torrents/[hash].vue
@@ -1,300 +1,209 @@
 <template>
-  <div v-if="torrent">
-    <NuxtLink
-      to="/torrents"
-      class="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-white mb-6 transition-colors"
-    >
-      <Icon name="ph:arrow-left-bold" />
-      {{ t('torrents.detail.backToIndex') }}
+  <div v-if="torrent" class="space-y-6">
+    <NuxtLink to="/torrents" class="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-text-primary">
+      <Icon name="ph:arrow-left" aria-hidden="true" />{{ t('torrents.detail.backToIndex') }}
     </NuxtLink>
 
-    <!-- Torrent Header -->
-    <div class="card mb-6 overflow-hidden">
-      <div class="card-body !p-6">
-        <div
-          class="flex flex-col md:flex-row md:items-center justify-between gap-4"
-        >
-          <div>
-            <div class="flex items-center gap-2 mb-1">
-              <span
-                class="text-[10px] font-bold bg-bg-tertiary border border-border px-1.5 py-0.5 rounded-sm text-text-muted uppercase tracking-wider"
-                >{{ t('torrents.detail.object') }}</span
-              >
-              <span class="text-[10px] font-mono text-text-muted">{{
-                torrent.id
-              }}</span>
-            </div>
-            <h2 class="text-2xl font-bold text-text-primary tracking-tight">
-              {{ torrent.name }}
-            </h2>
-            <!-- Category Badge + external database links (#47) -->
-            <div
-              v-if="torrent.category || externalLinks.length"
-              class="mt-2 flex flex-wrap items-center gap-2"
-            >
-              <span
-                v-if="torrent.category"
-                class="text-[10px] font-bold bg-bg-tertiary border border-border px-2 py-1 rounded-sm text-text-secondary uppercase tracking-wider"
-              >
-                {{ torrent.category.name }}
-              </span>
-              <a
-                v-for="link in externalLinks"
-                :key="link.label"
-                :href="link.href"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-[10px] font-bold border border-border px-2 py-1 rounded-sm text-text-secondary uppercase tracking-wider hover:text-white hover:border-white/30 transition-colors inline-flex items-center gap-1"
-              >
-                {{ link.label }}
-                <Icon name="ph:arrow-square-out-bold" />
-              </a>
-            </div>
-          </div>
-          <div class="flex items-center gap-2 flex-wrap">
-            <!-- Edit Button (owner/mod/admin only) -->
-            <button
-              v-if="canEdit"
-              class="btn btn-secondary flex items-center gap-2 !py-2 text-xs font-bold uppercase tracking-wider"
-              @click="showEditModal = true"
-            >
-              <Icon name="ph:pencil-simple-bold" />
-              <span>{{ t('common.edit') }}</span>
-            </button>
-            <!-- Delete Button (owner/mod/admin only) -->
-            <button
-              v-if="canDelete"
-              class="btn btn-secondary flex items-center gap-2 !py-2 text-xs font-bold uppercase tracking-wider text-error hover:bg-error/10"
-              @click="confirmDelete"
-            >
-              <Icon name="ph:trash-bold" />
-              <span>{{ t('common.delete') }}</span>
-            </button>
-            <button
-              class="btn btn-secondary flex items-center gap-2 !py-2 text-xs font-bold uppercase tracking-wider"
-              @click="copyHash"
-            >
-              <Icon name="ph:copy-bold" />
-              <span>{{ t('torrents.detail.copyHash') }}</span>
-            </button>
-            <a
-              :href="`/api/torrents/${torrent.infoHash}/download`"
-              class="btn btn-primary flex items-center gap-2 !py-2 text-xs font-bold uppercase tracking-wider"
-              download
-            >
-              <Icon name="ph:download-simple-bold" />
-              <span>{{ t('torrents.detail.download') }}</span>
-            </a>
-          </div>
-        </div>
-
-        <div class="mt-6 pt-6 border-t border-border/50 flex flex-wrap gap-6">
-          <div class="flex flex-col">
-            <span
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1"
-              >{{ t('torrents.detail.infoHash') }}</span
-            >
-            <code
-              class="text-xs font-mono text-text-secondary bg-bg-tertiary/50 px-2 py-1 rounded border border-border/50"
-            >
-              {{ torrent.infoHash }}
-            </code>
-          </div>
-          <div class="flex flex-col">
-            <span
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-1"
-              >{{ t('torrents.detail.createdAt') }}</span
-            >
-            <div class="flex items-center gap-2">
-              <span class="text-xs font-mono text-text-secondary">{{
-                formatDate(torrent.createdAt)
-              }}</span>
-              <span
-                class="text-[10px] bg-bg-tertiary border border-border px-1.5 py-0.5 rounded-sm text-text-muted font-bold"
-              >
-                {{ formatAge(torrent.createdAt) }}
-              </span>
-            </div>
-          </div>
+    <!-- Header -->
+    <header class="flex flex-col lg:flex-row lg:items-start justify-between gap-4">
+      <div class="min-w-0">
+        <h1 class="text-xl sm:text-2xl font-semibold tracking-tight break-words">{{ torrent.name }}</h1>
+        <p class="mt-1.5 text-sm text-text-muted">
+          <span v-if="torrent.category">{{ torrent.category.name }}</span>
+          <span v-if="torrent.category"> · </span>
+          <span class="num">{{ formatSize(torrent.size) }}</span>
+          <span> · </span>
+          <span :title="formatDate(torrent.createdAt)">{{ formatAge(torrent.createdAt) }}</span>
+          <template v-if="torrent.uploader">
+            <span> · </span>
+            <i18n-t keypath="torrents.detail.uploadedBy" tag="span" scope="global">
+              <template #user>
+                <NuxtLink :to="`/users/${torrent.uploader.id}`" class="text-text-secondary hover:underline underline-offset-2">{{ torrent.uploader.username }}</NuxtLink>
+              </template>
+            </i18n-t>
+          </template>
+        </p>
+        <div v-if="torrent.tags.length || externalLinks.length" class="mt-3 flex flex-wrap items-center gap-1.5">
+          <span v-for="tag in torrent.tags" :key="tag.id" class="text-xs px-2 py-0.5 rounded-full bg-bg-tertiary border border-border text-text-secondary">
+            {{ tag.name }}
+          </span>
+          <a
+            v-for="link in externalLinks"
+            :key="link.label"
+            :href="link.href"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-xs px-2 py-0.5 rounded-full border border-border text-text-secondary hover:text-text-primary hover:border-border-hover inline-flex items-center gap-1"
+          >{{ link.label }}<Icon name="ph:arrow-square-out" aria-hidden="true" /></a>
         </div>
       </div>
-    </div>
 
-    <!-- Stats Grid -->
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-      <StatsCard
-        :title="t('common.seeders')"
-        :value="torrent.stats.seeders"
-        icon="ph:arrow-up-bold"
-        variant="success"
-      />
-      <StatsCard
-        :title="t('common.leechers')"
-        :value="torrent.stats.leechers"
-        icon="ph:arrow-down-bold"
-        variant="warning"
-      />
-      <StatsCard
-        :title="t('common.completed')"
-        :value="torrent.stats.completed"
-        icon="ph:check-circle-bold"
-      />
-      <StatsCard
-        :title="t('torrents.detail.totalSize')"
-        :value="formatSize(torrent.size)"
-        icon="ph:database-bold"
-      />
-    </div>
+      <div class="flex flex-wrap items-center gap-2 shrink-0">
+        <a :href="`/api/torrents/${torrent.infoHash}/download`" class="btn btn-primary" download>
+          <Icon name="ph:download-simple" aria-hidden="true" />{{ t('torrents.detail.download') }}
+        </a>
+        <button v-if="canEdit" type="button" class="btn btn-secondary" @click="showEditModal = true">
+          <Icon name="ph:pencil-simple" aria-hidden="true" />{{ t('common.edit') }}
+        </button>
+        <button type="button" class="btn btn-ghost !px-2" :title="t('torrents.detail.report')" :aria-label="t('torrents.detail.report')" @click="showReport = true">
+          <Icon name="ph:flag" class="block" />
+        </button>
+        <button
+          v-if="canEdit"
+          type="button"
+          class="btn btn-ghost !px-2 hover:!text-danger"
+          :title="t('common.delete')"
+          :aria-label="t('common.delete')"
+          @click="confirmDelete"
+        >
+          <Icon name="ph:trash" class="block" />
+        </button>
+      </div>
+    </header>
 
-    <!-- Description -->
-    <div v-if="torrent.description" class="card mb-6">
-      <div class="card-header">
-        <div class="flex items-center gap-2">
-          <Icon name="ph:article-bold" class="text-text-muted" />
-          <h3
-            class="text-xs font-bold uppercase tracking-wider text-text-primary"
-          >
-            {{ t('common.description') }}
-          </h3>
-        </div>
+    <!-- Swarm -->
+    <section class="card grid grid-cols-3 divide-x divide-border" :aria-label="t('torrents.detail.swarm')">
+      <div class="p-4">
+        <p class="text-xs text-text-muted">{{ t('common.seeders') }}</p>
+        <p class="num text-2xl font-medium mt-1" :class="torrent.stats.seeders ? 'text-seed' : 'text-text-muted'">{{ torrent.stats.seeders }}</p>
       </div>
-      <div class="card-body !p-6">
-        <ClientOnly>
-          <div
-            class="prose prose-invert prose-xs max-w-none description-content"
-            v-html="renderedDescription"
-          ></div>
-        </ClientOnly>
+      <div class="p-4">
+        <p class="text-xs text-text-muted">{{ t('common.leechers') }}</p>
+        <p class="num text-2xl font-medium mt-1" :class="torrent.stats.leechers ? 'text-leech' : 'text-text-muted'">{{ torrent.stats.leechers }}</p>
       </div>
-    </div>
-
-    <!-- Peer List -->
-    <div class="card">
-      <div class="card-header">
-        <div class="flex items-center gap-2">
-          <Icon name="ph:users-bold" class="text-text-muted" />
-          <h3
-            class="text-xs font-bold uppercase tracking-wider text-text-primary"
-          >
-            {{ t('torrents.detail.activeSwarm', { count: torrent.peers.length }) }}
-          </h3>
-        </div>
+      <div class="p-4">
+        <p class="text-xs text-text-muted">{{ t('common.completed') }}</p>
+        <p class="num text-2xl font-medium mt-1">{{ torrent.stats.completed }}</p>
       </div>
-      <div class="overflow-x-auto">
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>{{ t('torrents.detail.endpoint') }}</th>
-              <th>{{ t('torrents.detail.type') }}</th>
-              <th>{{ t('common.uploaded') }}</th>
-              <th>{{ t('common.downloaded') }}</th>
-              <th class="text-right">{{ t('torrents.detail.lastSeen') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="torrent.peers.length === 0">
-              <td
-                colspan="5"
-                class="text-center text-text-muted py-12 font-mono text-xs uppercase tracking-widest"
-              >
-                {{ t('torrents.detail.noPeers') }}
-              </td>
-            </tr>
-            <tr v-for="peer in torrent.peers" :key="peer.id">
-              <td class="font-mono text-xs">
-                <span class="text-text-muted"
-                  >{{ peer.id.slice(0, 12) }}...</span
-                >
-                <span class="text-text-muted">:{{ peer.port }}</span>
-              </td>
-              <td>
-                <span
-                  class="stat-badge"
-                  :class="peer.isSeeder ? 'stat-seeders' : 'stat-leechers'"
+      <div class="col-span-3 !border-l-0 h-1 flex bg-bg-hover" aria-hidden="true">
+        <template v-if="torrent.stats.seeders + torrent.stats.leechers > 0">
+          <span class="bg-seed" :style="{ width: `${seedShare}%` }" />
+          <span class="bg-leech flex-1" />
+        </template>
+      </div>
+    </section>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div class="lg:col-span-2 space-y-6 min-w-0">
+        <!-- Description -->
+        <section v-if="torrent.description" class="card">
+          <h2 class="card-header text-sm font-medium">{{ t('common.description') }}</h2>
+          <div class="card-body">
+            <ClientOnly>
+              <div class="description-content text-sm leading-6 text-text-secondary" v-html="renderedDescription" />
+            </ClientOnly>
+          </div>
+        </section>
+
+        <!-- Comments -->
+        <section class="card">
+          <h2 class="card-header text-sm font-medium">
+            {{ t('torrents.detail.comments', { n: torrent.comments.length }, torrent.comments.length) }}
+          </h2>
+          <ul v-if="torrent.comments.length" class="divide-y divide-border">
+            <li v-for="comment in torrent.comments" :key="comment.id" class="px-4 py-3 group">
+              <div class="flex items-baseline gap-2">
+                <NuxtLink v-if="comment.author" :to="`/users/${comment.author.id}`" class="text-sm font-medium hover:underline underline-offset-2">{{ comment.author.username }}</NuxtLink>
+                <span class="text-xs text-text-muted" :title="formatDate(comment.createdAt)">{{ formatAge(comment.createdAt) }}</span>
+                <button
+                  v-if="canDeleteComment(comment)"
+                  type="button"
+                  class="ml-auto p-1 rounded text-text-muted hover:text-danger opacity-0 group-hover:opacity-100 focus:opacity-100"
+                  :title="t('common.delete')"
+                  :aria-label="t('common.delete')"
+                  @click="deleteComment(comment.id)"
                 >
-                  <Icon
-                    :name="
-                      peer.isSeeder ? 'ph:arrow-up-bold' : 'ph:arrow-down-bold'
-                    "
-                    class="text-[8px]"
-                  />
-                  {{ peer.isSeeder ? t('torrents.detail.seeder') : t('torrents.detail.leecher') }}
-                </span>
-              </td>
-              <td class="text-text-secondary font-mono text-[10px]">
-                {{ formatSize(peer.uploaded) }}
-              </td>
-              <td class="text-text-secondary font-mono text-[10px]">
-                {{ formatSize(peer.downloaded) }}
-              </td>
-              <td class="text-text-muted font-mono text-[10px] text-right">
-                {{ formatAge(peer.lastSeen) }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  <Icon name="ph:trash" class="block text-sm" />
+                </button>
+              </div>
+              <p class="mt-1 text-sm text-text-secondary whitespace-pre-wrap break-words">{{ comment.content }}</p>
+            </li>
+          </ul>
+          <form class="p-4 border-t border-border first:border-t-0" @submit.prevent="postComment">
+            <label class="sr-only" for="comment-body">{{ t('torrents.detail.commentPlaceholder') }}</label>
+            <textarea
+              id="comment-body"
+              v-model="newComment"
+              rows="3"
+              maxlength="5000"
+              class="input w-full resize-y"
+              :placeholder="t('torrents.detail.commentPlaceholder')"
+            />
+            <div class="mt-2 flex items-center justify-between gap-3">
+              <p v-if="commentError" class="text-sm text-danger" role="alert">{{ commentError }}</p>
+              <button type="submit" class="btn btn-secondary ml-auto" :disabled="posting || !newComment.trim()">
+                {{ t('torrents.detail.postComment') }}
+              </button>
+            </div>
+          </form>
+        </section>
       </div>
+
+      <aside class="space-y-6">
+        <!-- Details -->
+        <section class="card">
+          <h2 class="card-header text-sm font-medium">{{ t('torrents.detail.details') }}</h2>
+          <dl class="card-body space-y-3 text-sm">
+            <div>
+              <dt class="text-xs text-text-muted">{{ t('torrents.detail.infoHash') }}</dt>
+              <dd class="flex items-center gap-2 mt-0.5">
+                <code class="num text-xs text-text-secondary break-all">{{ torrent.infoHash }}</code>
+                <button type="button" class="p-1 rounded btn-ghost shrink-0" :title="copied ? t('shell.user.copied') : t('torrents.detail.copyHash')" :aria-label="t('torrents.detail.copyHash')" @click="copyHash">
+                  <Icon :name="copied ? 'ph:check' : 'ph:copy'" class="block text-sm" />
+                </button>
+              </dd>
+            </div>
+            <div>
+              <dt class="text-xs text-text-muted">{{ t('torrents.detail.createdAt') }}</dt>
+              <dd class="mt-0.5 text-text-secondary">{{ formatDate(torrent.createdAt) }}</dd>
+            </div>
+            <div>
+              <dt class="text-xs text-text-muted">{{ t('torrents.detail.totalSize') }}</dt>
+              <dd class="mt-0.5 num text-text-secondary">{{ formatSize(torrent.size) }}</dd>
+            </div>
+          </dl>
+        </section>
+
+        <!-- Peers -->
+        <details class="card group/peers">
+          <summary class="card-header cursor-pointer list-none text-sm font-medium">
+            <span>{{ t('torrents.detail.activeSwarm', { count: torrent.peers.length }) }}</span>
+            <Icon name="ph:caret-down" class="text-text-muted transition-transform group-open/peers:rotate-180" aria-hidden="true" />
+          </summary>
+          <p v-if="!torrent.peers.length" class="card-body text-sm text-text-muted">{{ t('torrents.detail.noPeers') }}</p>
+          <ul v-else class="divide-y divide-border max-h-80 overflow-y-auto">
+            <li v-for="peer in torrent.peers" :key="peer.id" class="px-4 py-2 flex items-center gap-3 text-xs">
+              <span class="w-1.5 h-1.5 rounded-full shrink-0" :class="peer.isSeeder ? 'bg-seed' : 'bg-leech'" aria-hidden="true" />
+              <span class="num text-text-muted truncate">{{ peer.id.slice(0, 10) }}…</span>
+              <span class="ml-auto text-text-muted">{{ peer.isSeeder ? t('torrents.detail.seeder') : t('torrents.detail.leecher') }}</span>
+              <span class="num text-text-muted w-14 text-right">{{ formatAge(peer.lastSeen) }}</span>
+            </li>
+          </ul>
+        </details>
+      </aside>
     </div>
 
-    <!-- Edit Modal -->
-    <EditTorrentModal
-      :is-open="showEditModal"
-      :torrent="editableTorrent"
-      @close="showEditModal = false"
-      @saved="handleSaved"
-    />
+    <EditTorrentModal :is-open="showEditModal" :torrent="editableTorrent" @close="showEditModal = false" @saved="refresh" />
+    <ReportModal :is-open="showReport" target-type="torrent" :target-id="torrent.id" @close="showReport = false" @submitted="showReport = false" />
 
-    <!-- Delete Confirmation Dialog -->
+    <!-- Delete confirmation -->
     <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 p-4"
         @click.self="showDeleteConfirm = false"
       >
-        <div
-          class="bg-bg-secondary border border-border rounded shadow-2xl w-full max-w-sm mx-4 overflow-hidden"
-        >
-          <div
-            class="flex items-center gap-2 px-4 py-3 border-b border-border bg-bg-tertiary/50"
-          >
-            <Icon name="ph:warning-circle-bold" class="text-error" />
-            <h3
-              class="text-xs font-bold uppercase tracking-widest text-text-primary"
-            >
-              {{ t('torrents.detail.confirmDeleteTitle') }}
-            </h3>
-          </div>
-          <div class="p-6">
-            <p class="text-sm text-text-secondary mb-4">
-              {{ t('torrents.detail.confirmDeleteText') }}
-            </p>
-            <p
-              class="text-xs font-mono text-text-muted bg-bg-tertiary p-2 rounded border border-border mb-6 truncate"
-            >
-              {{ torrent.name }}
-            </p>
-            <div v-if="deleteError" class="mb-4 text-xs text-error">
-              {{ deleteError }}
-            </div>
-            <div class="flex gap-2">
-              <button
-                class="btn btn-secondary flex-1 text-[10px] font-bold uppercase tracking-widest"
-                :disabled="isDeleting"
-                @click="showDeleteConfirm = false"
-              >
-                {{ t('common.cancel') }}
-              </button>
-              <button
-                class="btn btn-primary flex-1 text-[10px] font-bold uppercase tracking-widest bg-error hover:bg-error/80 flex items-center justify-center gap-2"
-                :disabled="isDeleting"
-                @click="deleteTorrent"
-              >
-                <Icon
-                  v-if="isDeleting"
-                  name="ph:circle-notch"
-                  class="animate-spin"
-                />
-                <span>{{ isDeleting ? t('common.deleting') : t('common.delete') }}</span>
+        <div class="card w-full max-w-sm shadow-2xl" role="alertdialog" aria-modal="true" :aria-label="t('torrents.detail.confirmDeleteTitle')">
+          <div class="card-body space-y-3">
+            <h2 class="text-base font-semibold">{{ t('torrents.detail.confirmDeleteTitle') }}</h2>
+            <p class="text-sm text-text-secondary">{{ t('torrents.detail.confirmDeleteText') }}</p>
+            <p class="num text-xs text-text-muted truncate">{{ torrent.name }}</p>
+            <p v-if="deleteError" class="text-sm text-danger" role="alert">{{ deleteError }}</p>
+            <div class="flex justify-end gap-2 pt-1">
+              <button type="button" class="btn btn-secondary" :disabled="isDeleting" @click="showDeleteConfirm = false">{{ t('common.cancel') }}</button>
+              <button type="button" class="btn bg-danger text-paper hover:bg-danger/85" :disabled="isDeleting" @click="deleteTorrent">
+                <Icon v-if="isDeleting" name="ph:circle-notch" class="animate-spin" aria-hidden="true" />
+                {{ isDeleting ? t('common.deleting') : t('common.delete') }}
               </button>
             </div>
           </div>
@@ -305,7 +214,6 @@
 </template>
 
 <script setup lang="ts">
-
 interface Peer {
   id: string;
   port: number;
@@ -314,14 +222,19 @@ interface Peer {
   downloaded: number;
   lastSeen: string;
 }
-
 interface Category {
   id: string;
   name: string;
   slug: string;
   newznabId?: number | null;
 }
-
+interface Comment {
+  id: string;
+  content: string;
+  createdAt: string;
+  authorId: string;
+  author: { id: string; username: string } | null;
+}
 interface TorrentDetail {
   id: string;
   infoHash: string;
@@ -329,17 +242,16 @@ interface TorrentDetail {
   size: number;
   description: string | null;
   uploaderId: string | null;
+  uploader: { id: string; username: string } | null;
   categoryId: string | null;
   category: Category | null;
   imdbId: string | null;
   tmdbId: number | null;
   tvdbId: number | null;
   createdAt: string;
-  stats: {
-    seeders: number;
-    leechers: number;
-    completed: number;
-  };
+  tags: { id: string; name: string }[];
+  comments: Comment[];
+  stats: { seeders: number; leechers: number; completed: number };
   peers: Peer[];
 }
 
@@ -347,35 +259,29 @@ const { t } = useI18n();
 const route = useRoute();
 const hash = route.params.hash as string;
 
-const {
-  data: torrent,
-  error,
-  refresh,
-} = await useFetch<TorrentDetail>(`/api/torrents/${hash}`);
+const { data: torrent, error, refresh } = await useFetch<TorrentDetail>(`/api/torrents/${hash}`);
+if (error.value || !torrent.value) {
+  throw createError({ statusCode: 404, message: t('torrents.detail.notFound') });
+}
+useHead({ title: () => torrent.value?.name ?? '' });
 
-// Get current user session
-const { loggedIn, user } = useUserSession();
+const { user } = useUserSession();
+const isStaff = computed(() => Boolean(user.value?.isAdmin || user.value?.isModerator));
+const canEdit = computed(() => Boolean(user.value && (torrent.value?.uploaderId === user.value.id || isStaff.value)));
+const canDeleteComment = (comment: Comment) => Boolean(user.value && (comment.authorId === user.value.id || isStaff.value));
 
-// Edit/delete state
 const showEditModal = ref(false);
+const showReport = ref(false);
 const showDeleteConfirm = ref(false);
 const isDeleting = ref(false);
 const deleteError = ref<string | null>(null);
+const copied = ref(false);
 
-// Compute permissions
-const canEdit = computed(() => {
-  if (!loggedIn.value || !user.value) return false;
-  const isOwner = torrent.value?.uploaderId === user.value.id;
-  return isOwner || user.value.isAdmin || user.value.isModerator;
-});
-
-const canDelete = computed(() => {
-  if (!loggedIn.value || !user.value) return false;
-  const isOwner = torrent.value?.uploaderId === user.value.id;
-  return isOwner || user.value.isAdmin || user.value.isModerator;
+const seedShare = computed(() => {
+  const { seeders, leechers } = torrent.value!.stats;
+  return seeders + leechers > 0 ? Math.round((seeders / (seeders + leechers)) * 100) : 0;
 });
 
-// Editable data for modal
 const editableTorrent = computed(() => ({
   infoHash: torrent.value?.infoHash || '',
   name: torrent.value?.name || '',
@@ -401,18 +307,47 @@ const externalLinks = computed(() => {
   return links;
 });
 
-const renderedDescription = computed(() => {
-  return renderMarkdown(torrent.value?.description);
-});
+const renderedDescription = computed(() => renderMarkdown(torrent.value?.description));
 
-if (error.value || !torrent.value) {
-  throw createError({ statusCode: 404, message: t('torrents.detail.notFound') });
+async function copyHash() {
+  await navigator.clipboard.writeText(torrent.value!.infoHash).catch(() => {});
+  copied.value = true;
+  setTimeout(() => (copied.value = false), 1500);
 }
 
-async function copyHash() {
-  await navigator.clipboard.writeText(torrent.value!.infoHash);
+// Comments
+const newComment = ref('');
+const posting = ref(false);
+const commentError = ref<string | null>(null);
+
+async function postComment() {
+  if (!newComment.value.trim()) return;
+  posting.value = true;
+  commentError.value = null;
+  try {
+    await $fetch(`/api/torrents/${hash}/comments`, { method: 'POST', body: { content: newComment.value.trim() } });
+    newComment.value = '';
+    await refresh();
+  } catch (err) {
+    commentError.value = (err as { data?: { message?: string } }).data?.message ?? t('torrents.detail.commentFailed');
+  } finally {
+    posting.value = false;
+  }
 }
 
+async function deleteComment(id: string) {
+  if (!confirm(t('torrents.detail.confirmDeleteComment'))) return;
+  commentError.value = null;
+  try {
+    await $fetch(`/api/torrents/comments/${id}`, { method: 'DELETE' });
+  } catch (err) {
+    commentError.value = (err as { data?: { message?: string } }).data?.message ?? t('torrents.detail.commentDeleteFailed');
+  }
+  // Refresh either way: a 404 usually means someone else already deleted it
+  await refresh();
+}
+
+// Delete torrent
 function confirmDelete() {
   deleteError.value = null;
   showDeleteConfirm.value = true;
@@ -421,28 +356,15 @@ function confirmDelete() {
 async function deleteTorrent() {
   isDeleting.value = true;
   deleteError.value = null;
-
   try {
-    await $fetch(`/api/torrents/${torrent.value!.infoHash}`, {
-      method: 'DELETE',
-    });
-    // Navigate back to torrents list
+    await $fetch(`/api/torrents/${torrent.value!.infoHash}`, { method: 'DELETE' });
     navigateTo('/torrents');
-  } catch (err: unknown) {
-    const fetchError = err as { data?: { message?: string }; message?: string };
-    deleteError.value =
-      fetchError.data?.message ||
-      fetchError.message ||
-      t('torrents.detail.deleteFailed');
+  } catch (err) {
+    deleteError.value = (err as { data?: { message?: string } }).data?.message ?? t('torrents.detail.deleteFailed');
   } finally {
     isDeleting.value = false;
   }
 }
-
-async function handleSaved() {
-  // Refresh torrent data
-  await refresh();
-}
 </script>
 
 <style scoped>
@@ -450,30 +372,38 @@ async function handleSaved() {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgb(var(--line));
 }
-
-.description-content :deep(p) {
-  margin-bottom: 1rem;
+.description-content :deep(p),
+.description-content :deep(ul),
+.description-content :deep(ol),
+.description-content :deep(blockquote),
+.description-content :deep(pre) {
+  margin-bottom: 0.75rem;
 }
-
-.description-content :deep(p:last-child) {
+.description-content :deep(:last-child) {
   margin-bottom: 0;
 }
-
 .description-content :deep(a) {
-  color: #fff;
+  color: rgb(var(--ink));
   text-decoration: underline;
   text-underline-offset: 2px;
 }
-
+.description-content :deep(strong) {
+  color: rgb(var(--ink));
+  font-weight: 600;
+}
 .description-content :deep(ul),
 .description-content :deep(ol) {
-  margin-bottom: 1rem;
-  padding-left: 1.5rem;
+  padding-left: 1.25rem;
+  list-style: revert;
 }
-
-.description-content :deep(li) {
-  margin-bottom: 0.25rem;
+.description-content :deep(code) {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.85em;
+}
+.description-content :deep(blockquote) {
+  border-left: 2px solid rgb(var(--line-strong));
+  padding-left: 0.75rem;
 }
 </style>
diff --git a/app/pages/torrents/index.vue b/app/pages/torrents/index.vue
index bbf0370a..96f4f736 100644
--- a/app/pages/torrents/index.vue
+++ b/app/pages/torrents/index.vue
@@ -1,139 +1,128 @@
 <template>
-  <div class="flex gap-6">
-    <!-- Category Sidebar -->
-    <CategorySidebar
-      :categories="categories ?? []"
-      :selected-id="selectedCategory"
-      @select="handleCategorySelect"
-    />
-
-    <!-- Main Content -->
-    <div class="flex-1 min-w-0">
-      <!-- Page Header -->
-      <div
-        class="mb-6 flex flex-col md:flex-row md:items-end justify-between gap-4"
-      >
-        <div>
-          <h2
-            class="text-xl font-bold text-text-primary tracking-tight uppercase"
-          >
-            {{ t('torrents.list.title') }}
-          </h2>
-          <p class="text-xs text-text-muted font-mono mt-0.5">
-            {{ t('torrents.list.indexedCount', { count: pagination.total }, pagination.total) }}
-          </p>
-        </div>
+  <div class="space-y-5">
+    <div class="flex flex-wrap items-end justify-between gap-4">
+      <div>
+        <h1 class="text-2xl font-semibold tracking-tight">{{ t('torrents.list.title') }}</h1>
+        <p class="text-sm text-text-muted mt-0.5">
+          {{ t('torrents.list.indexedCount', { count: pagination.total }, pagination.total) }}
+        </p>
+      </div>
+      <button type="button" class="btn btn-primary" @click="showUploadModal = true">
+        <Icon name="ph:upload-simple" aria-hidden="true" />{{ t('torrents.list.upload') }}
+      </button>
+    </div>
 
-        <!-- Actions -->
-        <div class="flex flex-wrap items-center gap-2">
-          <SearchBar
+    <!-- Filters -->
+    <div class="space-y-3">
+      <div class="flex flex-wrap items-center gap-3">
+        <label class="relative flex-1 min-w-[14rem] max-w-lg">
+          <span class="sr-only">{{ t('torrents.list.searchPlaceholder') }}</span>
+          <Icon name="ph:magnifying-glass" class="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" aria-hidden="true" />
+          <input
             v-model="search"
+            type="search"
+            class="input w-full !pl-9"
             :placeholder="t('torrents.list.searchPlaceholder')"
-            class="w-full md:w-64"
-            :loading="pending"
-            @search="doSearch"
           />
-          <button
-            class="btn btn-primary flex items-center gap-2 !py-1.5"
-            @click="showUploadModal = true"
-          >
-            <Icon name="ph:plus-bold" />
-            <span>{{ t('torrents.list.upload') }}</span>
-          </button>
-        </div>
+        </label>
+        <label class="flex items-center gap-2 text-sm text-text-muted">
+          {{ t('torrents.list.sort') }}
+          <select v-model="sort" class="input !py-1.5">
+            <option value="uploaded:desc">{{ t('torrents.list.sortNewest') }}</option>
+            <option value="uploaded:asc">{{ t('torrents.list.sortOldest') }}</option>
+            <option value="size:desc">{{ t('torrents.list.sortLargest') }}</option>
+            <option value="size:asc">{{ t('torrents.list.sortSmallest') }}</option>
+            <option value="name:asc">{{ t('torrents.list.sortName') }}</option>
+          </select>
+        </label>
       </div>
 
-      <!-- Torrents Table -->
-      <div class="card overflow-hidden">
-        <div class="overflow-x-auto">
-          <TorrentTable
-            v-if="torrents.length > 0"
-            :torrents="torrents"
-            admin
-            @deleted="() => refresh()"
-          />
-          <div v-else class="p-16 text-center">
-            <div
-              class="w-16 h-16 bg-bg-tertiary rounded-full flex items-center justify-center mx-auto mb-4 border border-border"
-            >
-              <Icon name="ph:magnifying-glass" class="text-3xl text-text-muted" />
-            </div>
-            <h3
-              class="text-sm font-bold text-text-primary uppercase tracking-wider"
-            >
-              {{ t('torrents.list.noResults') }}
-            </h3>
-            <p class="text-xs text-text-muted mt-1 font-mono">
-              {{ t('torrents.list.noResultsHint') }}
-            </p>
-            <button
-              v-if="search || selectedCategory"
-              class="btn btn-secondary mt-6 text-xs uppercase tracking-widest font-bold"
-              @click="clearFilters"
-            >
-              {{ t('torrents.list.resetFilters') }}
-            </button>
-          </div>
-        </div>
+      <!-- Categories -->
+      <div class="flex gap-1.5 overflow-x-auto pb-1" role="tablist" :aria-label="t('sidebar.categories')">
+        <button
+          v-for="cat in [{ id: '', name: t('sidebar.allTorrents') }, ...topCategories]"
+          :key="cat.id"
+          type="button"
+          role="tab"
+          :aria-selected="activeTop === cat.id"
+          class="shrink-0 px-3 py-1 rounded-full text-sm border transition-colors"
+          :class="activeTop === cat.id
+            ? 'bg-white text-black border-transparent'
+            : 'border-border text-text-secondary hover:text-text-primary hover:border-border-hover'"
+          @click="selectCategory(cat.id)"
+        >{{ cat.name }}</button>
+      </div>
+      <div v-if="subcategories.length" class="flex gap-1.5 overflow-x-auto pb-1">
+        <button
+          v-for="sub in subcategories"
+          :key="sub.id"
+          type="button"
+          class="shrink-0 px-2.5 py-0.5 rounded-full text-xs border transition-colors"
+          :class="categoryId === sub.id
+            ? 'border-text-primary text-text-primary'
+            : 'border-border text-text-muted hover:text-text-primary'"
+          @click="selectCategory(categoryId === sub.id ? activeTop : sub.id)"
+        >{{ sub.name }}</button>
+      </div>
+    </div>
 
-        <!-- Pagination -->
-        <div
-          v-if="pagination.pages > 1"
-          class="px-4 py-3 border-t border-border flex items-center justify-between bg-bg-secondary/50"
-        >
-          <p
-            class="text-[10px] font-mono text-text-muted uppercase tracking-widest"
-          >
-            {{ t('common.pageOf', { page: pagination.page, pages: pagination.pages }) }}
-          </p>
-          <div class="flex gap-1">
-            <button
-              class="btn btn-secondary !py-1 !px-2 text-[10px] uppercase font-bold"
-              :disabled="pagination.page <= 1"
-              @click="goToPage(pagination.page - 1)"
-            >
-              <Icon name="ph:caret-left-bold" />
-            </button>
-            <button
-              class="btn btn-secondary !py-1 !px-2 text-[10px] uppercase font-bold"
-              :disabled="pagination.page >= pagination.pages"
-              @click="goToPage(pagination.page + 1)"
-            >
-              <Icon name="ph:caret-right-bold" />
-            </button>
-          </div>
+    <!-- Results -->
+    <div class="card overflow-hidden" :aria-busy="pending">
+      <div v-if="torrents.length" class="overflow-x-auto">
+        <TorrentTable
+          :torrents="torrents"
+          :categories="flatCategories"
+          :can-delete="isStaff"
+          @deleted="() => refresh()"
+        />
+      </div>
+      <div v-else class="p-10 text-center">
+        <p class="text-sm text-text-primary">
+          {{ search || categoryId ? t('torrents.list.noMatch') : t('torrents.list.noResults') }}
+        </p>
+        <div class="mt-4 flex justify-center gap-2">
+          <button v-if="search || categoryId" type="button" class="btn btn-secondary" @click="clearFilters">
+            {{ t('torrents.list.resetFilters') }}
+          </button>
+          <button v-else type="button" class="btn btn-primary" @click="showUploadModal = true">
+            {{ t('torrents.list.upload') }}
+          </button>
         </div>
       </div>
+
+      <nav
+        v-if="pagination.pages > 1"
+        class="px-4 py-2.5 border-t border-border flex items-center justify-between"
+        :aria-label="t('common.pageOf', { page: pagination.page, pages: pagination.pages })"
+      >
+        <p class="text-xs text-text-muted num">
+          {{ t('common.pageOf', { page: pagination.page, pages: pagination.pages }) }}
+        </p>
+        <div class="flex gap-1">
+          <button type="button" class="btn btn-secondary !px-2" :disabled="pagination.page <= 1" :aria-label="t('torrents.list.previous')" @click="page--">
+            <Icon name="ph:caret-left" class="block" />
+          </button>
+          <button type="button" class="btn btn-secondary !px-2" :disabled="pagination.page >= pagination.pages" :aria-label="t('torrents.list.next')" @click="page++">
+            <Icon name="ph:caret-right" class="block" />
+          </button>
+        </div>
+      </nav>
     </div>
 
-    <!-- Upload Modal -->
-    <UploadTorrentModal
-      :is-open="showUploadModal"
-      @close="showUploadModal = false"
-      @uploaded="onUploaded"
-    />
+    <UploadTorrentModal :is-open="showUploadModal" @close="showUploadModal = false" @uploaded="() => refresh()" />
   </div>
 </template>
 
 <script setup lang="ts">
-interface TorrentWithStats {
+import { refDebounced } from '@vueuse/core';
+import type { TorrentRow } from '~/components/TorrentTable.vue';
+
+interface Category {
   id: string;
-  infoHash: string;
   name: string;
-  size: number;
-  createdAt: string;
-  category?: {
-    id: string;
-    name: string;
-    slug: string;
-  };
-  stats: {
-    seeders: number;
-    leechers: number;
-    completed: number;
-  };
+  parentId: string | null;
+  subcategories?: Category[];
 }
-
 interface Pagination {
   page: number;
   limit: number;
@@ -144,62 +133,85 @@ interface Pagination {
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
+const { user } = useUserSession();
+useHead({ title: () => t('torrents.list.title') });
 
-const search = ref((route.query.search as string) || '');
-const page = ref(parseInt((route.query.page as string) || '1', 10));
-const selectedCategory = ref((route.query.categoryId as string) || '');
-
+const isStaff = computed(() => Boolean(user.value?.isAdmin || user.value?.isModerator));
 const showUploadModal = ref(false);
 
-const { data: categories } = await useFetch('/api/categories');
-
-const { data, refresh, pending } = await useFetch<{
-  data: TorrentWithStats[];
-  pagination: Pagination;
-}>('/api/torrents', {
-  query: computed(() => ({
-    page: page.value,
-    limit: 25,
-    search: search.value || undefined,
-    categoryId: selectedCategory.value || undefined,
-  })),
-});
-
-function onUploaded() {
-  refresh();
-}
-
-const torrents = computed(() => data.value?.data ?? []);
-const pagination = computed(
-  () => data.value?.pagination ?? { page: 1, limit: 25, total: 0, pages: 0 }
+// Filters live in the URL so results can be shared and survive reloads
+const search = ref(typeof route.query.search === 'string' ? route.query.search : '');
+const searchDebounced = refDebounced(search, 300);
+const categoryId = ref(typeof route.query.categoryId === 'string' ? route.query.categoryId : '');
+const SORT_OPTIONS: readonly string[] = ['uploaded:desc', 'uploaded:asc', 'size:desc', 'size:asc', 'name:asc'];
+const sort = ref(
+  typeof route.query.sort === 'string' && SORT_OPTIONS.includes(route.query.sort)
+    ? route.query.sort
+    : 'uploaded:desc'
 );
+const page = ref(Number(route.query.page) > 1 ? Number(route.query.page) : 1);
 
-function doSearch() {
-  page.value = 1;
-  router.push({
+watch([searchDebounced, categoryId, sort], () => (page.value = 1));
+watch([searchDebounced, categoryId, sort, page], () => {
+  router.replace({
     query: {
-      search: search.value || undefined,
-      categoryId: selectedCategory.value || undefined,
-      page: undefined,
+      search: searchDebounced.value || undefined,
+      categoryId: categoryId.value || undefined,
+      sort: sort.value !== 'uploaded:desc' ? sort.value : undefined,
+      page: page.value > 1 ? page.value : undefined,
     },
   });
-  refresh();
-}
+});
 
-function handleCategorySelect(id: string) {
-  selectedCategory.value = id;
-  doSearch();
+const { data: categories } = await useFetch<Category[]>('/api/categories', { default: () => [] });
+
+const { data, refresh, pending } = await useFetch<{ data: TorrentRow[]; pagination: Pagination }>(
+  '/api/torrents',
+  {
+    query: computed(() => {
+      const [sortBy, order] = sort.value.split(':');
+      return {
+        page: page.value,
+        limit: 25,
+        search: searchDebounced.value || undefined,
+        categoryId: categoryId.value || undefined,
+        sortBy,
+        order,
+      };
+    }),
+  }
+);
+
+const torrents = computed(() => data.value?.data ?? []);
+const pagination = computed(() => data.value?.pagination ?? { page: 1, limit: 25, total: 0, pages: 0 });
+
+const topCategories = computed(() => categories.value ?? []);
+const flatCategories = computed(() =>
+  topCategories.value.flatMap((c) => [c, ...(c.subcategories ?? [])])
+);
+const activeTop = computed(() => {
+  if (!categoryId.value) return '';
+  const parent = topCategories.value.find(
+    (c) => c.id === categoryId.value || c.subcategories?.some((s) => s.id === categoryId.value)
+  );
+  return parent?.id ?? '';
+});
+const subcategories = computed(
+  () => topCategories.value.find((c) => c.id === activeTop.value)?.subcategories ?? []
+);
+
+function selectCategory(id: string) {
+  categoryId.value = id;
 }
 
 function clearFilters() {
   search.value = '';
-  selectedCategory.value = '';
-  doSearch();
+  categoryId.value = '';
 }
 
-function goToPage(p: number) {
-  page.value = p;
-  router.push({ query: { ...route.query, page: p > 1 ? p : undefined } });
-  refresh();
-}
+// The command palette sends ?search=; follow it when already on this page
+watch(() => route.query.search, (q) => {
+  const value = typeof q === 'string' ? q : '';
+  if (value !== searchDebounced.value) search.value = value;
+});
 </script>
diff --git a/app/pages/users/[id].vue b/app/pages/users/[id].vue
index 8e65cd34..1ce1345b 100644
--- a/app/pages/users/[id].vue
+++ b/app/pages/users/[id].vue
@@ -1,12 +1,5 @@
 <template>
-  <div class="max-w-4xl mx-auto">
-    <NuxtLink
-      to="/torrents"
-      class="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-text-muted hover:text-white mb-6 transition-colors"
-    >
-      <Icon name="ph:arrow-left-bold" />
-      {{ t('users.profile.backToTorrents') }}
-    </NuxtLink>
+  <div class="max-w-5xl">
 
     <div v-if="pending" class="flex justify-center py-12">
       <Icon
@@ -50,22 +43,29 @@
                 </h1>
                 <span
                   v-if="user.isAdmin"
-                  class="text-[10px] font-bold bg-red-500/20 border border-red-500/30 text-red-400 px-1.5 py-0.5 rounded-sm uppercase tracking-wider"
+                  class="text-xs font-bold border border-border text-text-secondary px-1.5 py-0.5 rounded-sm"
                 >
                   {{ t('common.admin') }}
                 </span>
                 <span
                   v-else-if="user.isModerator"
-                  class="text-[10px] font-bold bg-blue-500/20 border border-blue-500/30 text-blue-400 px-1.5 py-0.5 rounded-sm uppercase tracking-wider"
+                  class="text-xs font-bold border border-border text-text-secondary px-1.5 py-0.5 rounded-sm"
                 >
                   {{ t('users.profile.modBadge') }}
                 </span>
+                <NuxtLink
+                  v-if="me && me.id !== user.id"
+                  :to="{ path: '/messages', query: { to: user.username } }"
+                  class="btn btn-secondary ml-auto"
+                >
+                  <Icon name="ph:chat-circle-text" aria-hidden="true" />{{ t('messages.sendMessage') }}
+                </NuxtLink>
               </div>
 
               <div class="flex flex-wrap gap-6 text-sm">
                 <div>
                   <span
-                    class="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-0.5"
+                    class="text-xs font-bold text-text-muted block mb-0.5"
                     >{{ t('users.profile.memberSince') }}</span
                   >
                   <span class="text-text-secondary">{{
@@ -74,7 +74,7 @@
                 </div>
                 <div>
                   <span
-                    class="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-0.5"
+                    class="text-xs font-bold text-text-muted block mb-0.5"
                     >{{ t('users.profile.lastSeen') }}</span
                   >
                   <span class="text-text-secondary">{{
@@ -92,7 +92,7 @@
         <div class="card">
           <div class="card-body text-center">
             <span
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-1"
+              class="text-xs font-bold text-text-muted block mb-1"
               >{{ t('common.ratio') }}</span
             >
             <span class="text-2xl font-bold" :class="ratioClass">{{
@@ -103,7 +103,7 @@
         <div class="card">
           <div class="card-body text-center">
             <span
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-1"
+              class="text-xs font-bold text-text-muted block mb-1"
               >{{ t('common.uploaded') }}</span
             >
             <span class="text-2xl font-bold text-green-400">{{
@@ -114,7 +114,7 @@
         <div class="card">
           <div class="card-body text-center">
             <span
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-1"
+              class="text-xs font-bold text-text-muted block mb-1"
               >{{ t('common.downloaded') }}</span
             >
             <span class="text-2xl font-bold text-yellow-400">{{
@@ -125,7 +125,7 @@
         <div class="card">
           <div class="card-body text-center">
             <span
-              class="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-1"
+              class="text-xs font-bold text-text-muted block mb-1"
               >{{ t('users.profile.uploads') }}</span
             >
             <span class="text-2xl font-bold text-text-primary">{{
@@ -156,7 +156,7 @@
           <table v-else class="w-full">
             <thead>
               <tr
-                class="text-left text-[10px] font-bold text-text-muted uppercase tracking-widest border-b border-border"
+                class="text-left text-xs font-bold text-text-muted border-b border-border"
               >
                 <th class="px-4 py-3">{{ t('common.name') }}</th>
                 <th class="px-4 py-3 text-right">{{ t('common.size') }}</th>
@@ -177,7 +177,7 @@
                   >
                     {{ torrent.name }}
                   </NuxtLink>
-                  <div class="text-[10px] text-text-muted">
+                  <div class="text-xs text-text-muted">
                     {{ torrent.category?.name || t('users.profile.uncategorized') }}
                   </div>
                 </td>
@@ -262,6 +262,7 @@ interface UploadsResponse {
 }
 
 const { t } = useI18n();
+const { user: me } = useUserSession();
 const route = useRoute();
 const userId = computed(() => route.params.id as string);
 
diff --git a/i18n/locales/en/app.json b/i18n/locales/en/app.json
index ef328618..a7fd81ba 100644
--- a/i18n/locales/en/app.json
+++ b/i18n/locales/en/app.json
@@ -233,19 +233,29 @@
       "empty": "No torrents found",
       "deleteTorrent": "Delete torrent",
       "confirmDelete": "Delete \"{name}\"?",
-      "deleteFailed": "Failed to delete torrent"
+      "deleteFailed": "Failed to delete torrent",
+      "pending": "Pending"
     },
     "list": {
-      "title": "Torrent Index",
-      "indexedCount": "no object indexed in database | one object indexed in database | {count} objects indexed in database",
+      "title": "Torrents",
+      "indexedCount": "No torrent | 1 torrent | {count} torrents",
       "searchPlaceholder": "Search by name or hash...",
       "upload": "Upload",
       "noResults": "No results found",
       "noResultsHint": "The search query did not match any indexed torrents.",
-      "resetFilters": "Reset Filters"
+      "resetFilters": "Reset Filters",
+      "sort": "Sort",
+      "sortNewest": "Newest",
+      "sortOldest": "Oldest",
+      "sortLargest": "Largest",
+      "sortSmallest": "Smallest",
+      "sortName": "Name",
+      "noMatch": "No torrent matches these filters.",
+      "previous": "Previous page",
+      "next": "Next page"
     },
     "detail": {
-      "backToIndex": "Back to index",
+      "backToIndex": "All torrents",
       "object": "Object",
       "copyHash": "Copy Hash",
       "download": "Download",
@@ -262,7 +272,17 @@
       "confirmDeleteTitle": "Confirm Delete",
       "confirmDeleteText": "Are you sure you want to delete this torrent? This action cannot be undone.",
       "notFound": "Torrent not found",
-      "deleteFailed": "Failed to delete torrent"
+      "deleteFailed": "Failed to delete torrent",
+      "uploadedBy": "uploaded by {user}",
+      "report": "Report this torrent",
+      "swarm": "Swarm",
+      "comments": "No comments | 1 comment | {n} comments",
+      "commentPlaceholder": "Add a comment…",
+      "postComment": "Post comment",
+      "commentFailed": "Could not post the comment.",
+      "confirmDeleteComment": "Delete this comment?",
+      "details": "Details",
+      "commentDeleteFailed": "Could not delete the comment."
     }
   },
   "search": {
@@ -360,7 +380,6 @@
   },
   "users": {
     "profile": {
-      "backToTorrents": "Back to torrents",
       "notFound": "User not found",
       "modBadge": "Mod",
       "memberSince": "Member since",
@@ -950,5 +969,104 @@
       "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"
+    }
+  },
+  "dashboard": {
+    "greeting": {
+      "morning": "Good morning, {name}",
+      "afternoon": "Good afternoon, {name}",
+      "evening": "Good evening, {name}",
+      "neutral": "Hello, {name}"
+    },
+    "memberSince": "Member since {date}",
+    "browse": "Browse torrents",
+    "upload": "Upload a torrent",
+    "account": "Your account",
+    "seeding": "Seeding",
+    "leeching": "not leeching | leeching 1 torrent | leeching {n} torrents",
+    "points": "Bonus points",
+    "spendPoints": "Spend them in the shop",
+    "hnr": "Hit & run",
+    "hnrNone": "Nothing to catch up on",
+    "hnrWarning": "Keep seeding to clear them",
+    "latest": "New torrents",
+    "seeAll": "See all",
+    "columns": {
+      "name": "Name",
+      "size": "Size",
+      "seeders": "Seeders",
+      "leechers": "Leechers",
+      "age": "Added"
+    },
+    "noTorrents": "No torrents yet.",
+    "uploadFirst": "Upload the first one",
+    "bounties": "Open bounties",
+    "noBounties": "No open bounty.",
+    "requestTorrent": "Request a torrent",
+    "forum": "Latest on the forum",
+    "noTopics": "No topic yet.",
+    "startTopic": "Start one"
   }
 }
diff --git a/i18n/locales/en/messages.json b/i18n/locales/en/messages.json
new file mode 100644
index 00000000..6e973430
--- /dev/null
+++ b/i18n/locales/en/messages.json
@@ -0,0 +1,30 @@
+{
+  "messages": {
+    "title": "Messages",
+    "new": "New message",
+    "empty": "No conversation yet.",
+    "emptyHint": "Start one from a member's profile or with New message.",
+    "you": "You: ",
+    "select": "Select a conversation or start a new one.",
+    "to": "To",
+    "toPlaceholder": "Member username",
+    "bodyPlaceholder": "Write a message…",
+    "send": "Send",
+    "sending": "Sending…",
+    "sendHint": "Enter to send, Shift+Enter for a new line",
+    "loadEarlier": "Load earlier messages",
+    "back": "Back to conversations",
+    "profile": "View profile",
+    "block": "Block this member",
+    "unblock": "Unblock this member",
+    "hide": "Hide conversation",
+    "confirmBlock": "Block {name}? They will no longer be able to send you messages.",
+    "confirmHide": "Hide this conversation? It comes back if a new message arrives.",
+    "youBlocked": "You blocked this member. Unblock them to reply.",
+    "blockedYou": "This member does not accept your messages.",
+    "deletedUser": "Deleted member",
+    "nav": "Messages",
+    "sendMessage": "Send a message",
+    "unreadCount": "no unread conversation | 1 unread conversation | {n} unread conversations"
+  }
+}
diff --git a/i18n/locales/fr/app.json b/i18n/locales/fr/app.json
index cbd7840a..4d48a47d 100644
--- a/i18n/locales/fr/app.json
+++ b/i18n/locales/fr/app.json
@@ -233,19 +233,29 @@
       "empty": "Aucun torrent trouvé",
       "deleteTorrent": "Supprimer le torrent",
       "confirmDelete": "Supprimer « {name} » ?",
-      "deleteFailed": "Échec de la suppression du torrent"
+      "deleteFailed": "Échec de la suppression du torrent",
+      "pending": "En attente"
     },
     "list": {
-      "title": "Index des torrents",
-      "indexedCount": "aucun objet indexé dans la base | un objet indexé dans la base | {count} objets indexés dans la base",
+      "title": "Torrents",
+      "indexedCount": "Aucun torrent | 1 torrent | {count} torrents",
       "searchPlaceholder": "Rechercher par nom ou hash...",
       "upload": "Uploader",
       "noResults": "Aucun résultat",
       "noResultsHint": "La recherche ne correspond à aucun torrent indexé.",
-      "resetFilters": "Réinitialiser les filtres"
+      "resetFilters": "Réinitialiser les filtres",
+      "sort": "Trier",
+      "sortNewest": "Plus récents",
+      "sortOldest": "Plus anciens",
+      "sortLargest": "Plus gros",
+      "sortSmallest": "Plus petits",
+      "sortName": "Nom",
+      "noMatch": "Aucun torrent ne correspond à ces filtres.",
+      "previous": "Page précédente",
+      "next": "Page suivante"
     },
     "detail": {
-      "backToIndex": "Retour à l'index",
+      "backToIndex": "Tous les torrents",
       "object": "Objet",
       "copyHash": "Copier le hash",
       "download": "Télécharger",
@@ -262,7 +272,17 @@
       "confirmDeleteTitle": "Confirmer la suppression",
       "confirmDeleteText": "Voulez-vous vraiment supprimer ce torrent ? Cette action est irréversible.",
       "notFound": "Torrent introuvable",
-      "deleteFailed": "Échec de la suppression du torrent"
+      "deleteFailed": "Échec de la suppression du torrent",
+      "uploadedBy": "uploadé par {user}",
+      "report": "Signaler ce torrent",
+      "swarm": "Swarm",
+      "comments": "Aucun commentaire | 1 commentaire | {n} commentaires",
+      "commentPlaceholder": "Ajouter un commentaire…",
+      "postComment": "Publier",
+      "commentFailed": "Impossible de publier le commentaire.",
+      "confirmDeleteComment": "Supprimer ce commentaire ?",
+      "details": "Détails",
+      "commentDeleteFailed": "Impossible de supprimer le commentaire."
     }
   },
   "search": {
@@ -360,7 +380,6 @@
   },
   "users": {
     "profile": {
-      "backToTorrents": "Retour aux torrents",
       "notFound": "Utilisateur introuvable",
       "modBadge": "Modo",
       "memberSince": "Membre depuis",
@@ -950,5 +969,104 @@
       "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"
+    }
+  },
+  "dashboard": {
+    "greeting": {
+      "morning": "Bonjour, {name}",
+      "afternoon": "Bon après-midi, {name}",
+      "evening": "Bonsoir, {name}",
+      "neutral": "Bonjour, {name}"
+    },
+    "memberSince": "Membre depuis {date}",
+    "browse": "Parcourir les torrents",
+    "upload": "Uploader un torrent",
+    "account": "Votre compte",
+    "seeding": "En seed",
+    "leeching": "aucun en leech | 1 torrent en leech | {n} torrents en leech",
+    "points": "Points bonus",
+    "spendPoints": "À dépenser dans la boutique",
+    "hnr": "Hit & run",
+    "hnrNone": "Rien à rattraper",
+    "hnrWarning": "Continuez à seeder pour les effacer",
+    "latest": "Nouveaux torrents",
+    "seeAll": "Tout voir",
+    "columns": {
+      "name": "Nom",
+      "size": "Taille",
+      "seeders": "Seeders",
+      "leechers": "Leechers",
+      "age": "Ajouté"
+    },
+    "noTorrents": "Aucun torrent pour l'instant.",
+    "uploadFirst": "Uploadez le premier",
+    "bounties": "Bounties ouverts",
+    "noBounties": "Aucun bounty ouvert.",
+    "requestTorrent": "Demander un torrent",
+    "forum": "Derniers sujets du forum",
+    "noTopics": "Aucun sujet pour l'instant.",
+    "startTopic": "Lancer la discussion"
   }
 }
diff --git a/i18n/locales/fr/messages.json b/i18n/locales/fr/messages.json
new file mode 100644
index 00000000..f91996c2
--- /dev/null
+++ b/i18n/locales/fr/messages.json
@@ -0,0 +1,30 @@
+{
+  "messages": {
+    "title": "Messages",
+    "new": "Nouveau message",
+    "empty": "Aucune conversation pour l'instant.",
+    "emptyHint": "Lancez-en une depuis le profil d'un membre ou avec Nouveau message.",
+    "you": "Vous : ",
+    "select": "Choisissez une conversation ou commencez-en une nouvelle.",
+    "to": "À",
+    "toPlaceholder": "Nom d'utilisateur du membre",
+    "bodyPlaceholder": "Écrire un message…",
+    "send": "Envoyer",
+    "sending": "Envoi…",
+    "sendHint": "Entrée pour envoyer, Maj+Entrée pour aller à la ligne",
+    "loadEarlier": "Charger les messages précédents",
+    "back": "Retour aux conversations",
+    "profile": "Voir le profil",
+    "block": "Bloquer ce membre",
+    "unblock": "Débloquer ce membre",
+    "hide": "Masquer la conversation",
+    "confirmBlock": "Bloquer {name} ? Ce membre ne pourra plus vous envoyer de messages.",
+    "confirmHide": "Masquer cette conversation ? Elle réapparaîtra si un nouveau message arrive.",
+    "youBlocked": "Vous avez bloqué ce membre. Débloquez-le pour répondre.",
+    "blockedYou": "Ce membre n'accepte pas vos messages.",
+    "deletedUser": "Membre supprimé",
+    "nav": "Messages",
+    "sendMessage": "Envoyer un message",
+    "unreadCount": "aucune conversation non lue | 1 conversation non lue | {n} conversations non lues"
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4ab69552..7a9cb340 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,8 +19,8 @@ export default defineNuxtConfig({
     strategy: 'no_prefix',
     defaultLocale: 'en',
     locales: [
-      { code: 'en', language: 'en-US', name: 'English', files: ['en/app.json', 'en/shop.json'] },
-      { code: 'fr', language: 'fr-FR', name: 'Français', files: ['fr/app.json', 'fr/shop.json'] },
+      { code: 'en', language: 'en-US', name: 'English', files: ['en/app.json', 'en/shop.json', 'en/messages.json'] },
+      { code: 'fr', language: 'fr-FR', name: 'Français', files: ['fr/app.json', 'fr/shop.json', 'fr/messages.json'] },
     ],
     // English unless the user picks another language (stored in a cookie by
     // app/plugins/locale-cookie.ts); the browser language is not used
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/server/api/dashboard.get.ts b/server/api/dashboard.get.ts
new file mode 100644
index 00000000..39bba35f
--- /dev/null
+++ b/server/api/dashboard.get.ts
@@ -0,0 +1,82 @@
+import { and, desc, eq } from 'drizzle-orm';
+import { db, schema } from '../db';
+import { getStatsMany, type TorrentStats } from '../redis/cache';
+import { getUserActivity } from '../redis/userActivity';
+import { getUserHnrCount } from '../utils/hnr';
+import { sanitizeRichText } from '../utils/sanitize';
+import { getBonusSettings, getWelcomeMessage } from '../utils/settings';
+
+/**
+ * GET /api/dashboard
+ * Everything the member home page shows, in one request
+ */
+export default defineEventHandler(async (event) => {
+  const { user } = await requireAuthSession(event);
+
+  const [account, activity, hnr, bonus, welcome, latest, bounties, topics] =
+    await Promise.all([
+      db.query.users.findFirst({
+        where: eq(schema.users.id, user.id),
+        columns: { bonusPoints: true, uploaded: true, downloaded: true, createdAt: true },
+      }),
+      getUserActivity(user.id).catch(() => ({ seeding: 0, leeching: 0 })),
+      getUserHnrCount(user.id),
+      getBonusSettings(),
+      getWelcomeMessage(),
+      db.query.torrents.findMany({
+        where: and(eq(schema.torrents.isActive, true), eq(schema.torrents.isApproved, true)),
+        columns: { infoHash: true, name: true, size: true, createdAt: true },
+        with: { category: { columns: { name: true } } },
+        orderBy: [desc(schema.torrents.createdAt)],
+        limit: 8,
+      }),
+      db.query.bounties.findMany({
+        where: eq(schema.bounties.status, 'open'),
+        columns: { id: true, title: true, totalPoints: true },
+        orderBy: [desc(schema.bounties.totalPoints)],
+        limit: 5,
+      }),
+      db.query.forumTopics.findMany({
+        columns: { id: true, title: true, updatedAt: true },
+        with: {
+          author: { columns: { username: true } },
+          category: { columns: { name: true } },
+        },
+        orderBy: [desc(schema.forumTopics.updatedAt)],
+        limit: 5,
+      }),
+    ]);
+
+  // Without Redis the page still renders, with empty swarm counts
+  const stats = await getStatsMany(latest.map((t) => t.infoHash)).catch(
+    () => new Map<string, TorrentStats>()
+  );
+
+  return {
+    account: {
+      uploaded: account?.uploaded ?? 0,
+      downloaded: account?.downloaded ?? 0,
+      memberSince: account?.createdAt ?? null,
+      points: bonus.enabled ? (account?.bonusPoints ?? 0) : null,
+      seeding: activity.seeding,
+      leeching: activity.leeching,
+      hnr,
+    },
+    // Admin-written note (Admin > Branding), rendered as rich text
+    welcomeMessage: welcome.trim() ? sanitizeRichText(welcome) : null,
+    latest: latest.map((t) => ({
+      ...t,
+      category: t.category?.name ?? null,
+      seeders: stats.get(t.infoHash)?.seeders ?? 0,
+      leechers: stats.get(t.infoHash)?.leechers ?? 0,
+    })),
+    bounties: bonus.enabled ? bounties : [],
+    topics: topics.map((t) => ({
+      id: t.id,
+      title: t.title,
+      updatedAt: t.updatedAt,
+      author: t.author?.username ?? null,
+      category: t.category?.name ?? null,
+    })),
+  };
+});
diff --git a/server/api/forum/topics/[id].get.ts b/server/api/forum/topics/[id].get.ts
index 76d21ca6..899c0f02 100644
--- a/server/api/forum/topics/[id].get.ts
+++ b/server/api/forum/topics/[id].get.ts
@@ -22,6 +22,7 @@ export default defineEventHandler(async (event) => {
         columns: {
           id: true,
           username: true,
+          avatarUrl: true,
           isAdmin: true,
           isModerator: true,
         },
@@ -35,6 +36,7 @@ export default defineEventHandler(async (event) => {
             columns: {
               id: true,
               username: true,
+          avatarUrl: true,
               isAdmin: true,
               isModerator: true,
             },
diff --git a/server/api/messages/[id].delete.ts b/server/api/messages/[id].delete.ts
new file mode 100644
index 00000000..d5f914dd
--- /dev/null
+++ b/server/api/messages/[id].delete.ts
@@ -0,0 +1,21 @@
+import { and, eq } from 'drizzle-orm';
+import { db, schema } from '../../db';
+import { requireConversation } from '../../utils/messages';
+
+/**
+ * DELETE /api/messages/:id
+ * Hide a conversation for me only; it comes back if a new message arrives
+ */
+export default defineEventHandler(async (event) => {
+  const { user, conversationId } = await requireConversation(event);
+  await db
+    .update(schema.conversationMembers)
+    .set({ hiddenAt: new Date() })
+    .where(
+      and(
+        eq(schema.conversationMembers.conversationId, conversationId),
+        eq(schema.conversationMembers.userId, user.id)
+      )
+    );
+  return { success: true };
+});
diff --git a/server/api/messages/[id].get.ts b/server/api/messages/[id].get.ts
new file mode 100644
index 00000000..a092b3ea
--- /dev/null
+++ b/server/api/messages/[id].get.ts
@@ -0,0 +1,67 @@
+import { and, desc, eq, lt } from 'drizzle-orm';
+import { z } from 'zod';
+import { db, schema } from '../../db';
+import { getBlockState, requireConversation } from '../../utils/messages';
+import { validateQuery } from '../../utils/schemas';
+
+const querySchema = z.object({
+  before: z.iso.datetime().optional(),
+  limit: z.coerce.number().int().min(1).max(100).default(50),
+});
+
+/**
+ * GET /api/messages/:id
+ * Messages of a conversation (oldest first, paginated backwards with
+ * ?before=), and marks it read
+ */
+export default defineEventHandler(async (event) => {
+  const { user, conversationId, otherUserId } = await requireConversation(event);
+  const query = validateQuery(event, querySchema);
+  const pm = schema.privateMessages;
+
+  const conditions = [eq(pm.conversationId, conversationId)];
+  if (query.before) conditions.push(lt(pm.createdAt, new Date(query.before)));
+
+  const [rows, other, block] = await Promise.all([
+    db
+      .select({ id: pm.id, senderId: pm.senderId, body: pm.body, createdAt: pm.createdAt })
+      .from(pm)
+      .where(and(...conditions))
+      .orderBy(desc(pm.createdAt))
+      .limit(query.limit + 1),
+    otherUserId
+      ? db.query.users.findFirst({
+          where: eq(schema.users.id, otherUserId),
+          columns: { id: true, username: true, avatarUrl: true },
+        })
+      : null,
+    otherUserId ? getBlockState(user.id, otherUserId) : { iBlocked: false, blockedMe: false },
+  ]);
+
+  // Opening the latest page marks the conversation read up to the newest
+  // message shown (a message arriving right after stays unread)
+  if (!query.before && rows[0]) {
+    await db
+      .update(schema.conversationMembers)
+      .set({ lastReadAt: rows[0].createdAt })
+      .where(
+        and(
+          eq(schema.conversationMembers.conversationId, conversationId),
+          eq(schema.conversationMembers.userId, user.id)
+        )
+      );
+  }
+
+  const hasMore = rows.length > query.limit;
+  return {
+    id: conversationId,
+    other: other ?? null,
+    iBlocked: block.iBlocked,
+    blockedMe: block.blockedMe,
+    hasMore,
+    messages: rows.slice(0, query.limit).reverse().map((m) => ({
+      ...m,
+      mine: m.senderId === user.id,
+    })),
+  };
+});
diff --git a/server/api/messages/[id].post.ts b/server/api/messages/[id].post.ts
new file mode 100644
index 00000000..a5f1d052
--- /dev/null
+++ b/server/api/messages/[id].post.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod';
+import { parseBodyOrThrow, requireConversation, sendPrivateMessage } from '../../utils/messages';
+import { rateLimit, RATE_LIMITS } from '../../utils/rateLimit';
+import { validateBody } from '../../utils/schemas';
+
+const replySchema = z.object({ body: z.string().max(10000) });
+
+/**
+ * POST /api/messages/:id
+ * Reply in a conversation
+ */
+export default defineEventHandler(async (event) => {
+  const { user, otherUserId } = await requireConversation(event);
+  await rateLimit(event, RATE_LIMITS.mutation);
+  const { body } = await validateBody(event, replySchema);
+
+  if (!otherUserId) {
+    throw createError({ statusCode: 410, message: 'This member no longer exists' });
+  }
+
+  await sendPrivateMessage(user.id, otherUserId, parseBodyOrThrow(body));
+  return { success: true };
+});
diff --git a/server/api/messages/block.post.ts b/server/api/messages/block.post.ts
new file mode 100644
index 00000000..0ce2b65f
--- /dev/null
+++ b/server/api/messages/block.post.ts
@@ -0,0 +1,37 @@
+import { and, eq } from 'drizzle-orm';
+import { z } from 'zod';
+import { db, schema } from '../../db';
+import { uuidSchema, validateBody } from '../../utils/schemas';
+
+const blockSchema = z.object({ userId: uuidSchema, blocked: z.boolean() });
+
+/**
+ * POST /api/messages/block
+ * Block or unblock a member: a blocked member cannot send me messages
+ */
+export default defineEventHandler(async (event) => {
+  const { user } = await requireAuthSession(event);
+  const { userId, blocked } = await validateBody(event, blockSchema);
+
+  if (userId === user.id) {
+    throw createError({ statusCode: 400, message: 'You cannot block yourself' });
+  }
+
+  if (blocked) {
+    const target = await db.query.users.findFirst({
+      where: eq(schema.users.id, userId),
+      columns: { id: true },
+    });
+    if (!target) throw createError({ statusCode: 404, message: 'User not found' });
+
+    await db
+      .insert(schema.userBlocks)
+      .values({ blockerId: user.id, blockedId: userId })
+      .onConflictDoNothing();
+  } else {
+    await db
+      .delete(schema.userBlocks)
+      .where(and(eq(schema.userBlocks.blockerId, user.id), eq(schema.userBlocks.blockedId, userId)));
+  }
+  return { success: true, blocked };
+});
diff --git a/server/api/messages/index.get.ts b/server/api/messages/index.get.ts
new file mode 100644
index 00000000..3122ef7e
--- /dev/null
+++ b/server/api/messages/index.get.ts
@@ -0,0 +1,73 @@
+import { and, desc, eq, gt, inArray, isNull, ne, or } from 'drizzle-orm';
+import { db, schema } from '../../db';
+import { isConversationUnread, isConversationVisible } from '../../utils/messageRules';
+
+/**
+ * GET /api/messages
+ * My conversations, most recent first, with the other member and a preview
+ */
+export default defineEventHandler(async (event) => {
+  const { user } = await requireAuthSession(event);
+  const { conversations: c, conversationMembers: cm, privateMessages: pm, users } = schema;
+
+  const memberships = await db
+    .select({
+      id: c.id,
+      lastMessageAt: c.lastMessageAt,
+      lastReadAt: cm.lastReadAt,
+      hiddenAt: cm.hiddenAt,
+    })
+    .from(cm)
+    .innerJoin(c, eq(c.id, cm.conversationId))
+    // Same rule as isConversationVisible, in SQL so hidden rows do not use up the limit
+    .where(and(eq(cm.userId, user.id), or(isNull(cm.hiddenAt), gt(c.lastMessageAt, cm.hiddenAt))))
+    .orderBy(desc(c.lastMessageAt))
+    .limit(100);
+
+  const visible = memberships.filter(isConversationVisible);
+  if (visible.length === 0) return [];
+  const ids = visible.map((m) => m.id);
+
+  const [others, lastMessages] = await Promise.all([
+    db
+      .select({
+        conversationId: cm.conversationId,
+        id: users.id,
+        username: users.username,
+        avatarUrl: users.avatarUrl,
+      })
+      .from(cm)
+      .innerJoin(users, eq(users.id, cm.userId))
+      .where(and(inArray(cm.conversationId, ids), ne(cm.userId, user.id))),
+    db
+      .selectDistinctOn([pm.conversationId], {
+        conversationId: pm.conversationId,
+        senderId: pm.senderId,
+        body: pm.body,
+      })
+      .from(pm)
+      .where(inArray(pm.conversationId, ids))
+      .orderBy(pm.conversationId, desc(pm.createdAt)),
+  ]);
+
+  const otherBy = new Map(others.map((o) => [o.conversationId, o]));
+  const lastBy = new Map(lastMessages.map((m) => [m.conversationId, m]));
+
+  return visible.map((m) => {
+    const last = lastBy.get(m.id);
+    const other = otherBy.get(m.id);
+    return {
+      id: m.id,
+      lastMessageAt: m.lastMessageAt,
+      other: other ? { id: other.id, username: other.username, avatarUrl: other.avatarUrl } : null,
+      preview: last ? last.body.slice(0, 140) : '',
+      lastFromMe: last?.senderId === user.id,
+      unread: isConversationUnread({
+        userId: user.id,
+        lastSenderId: last?.senderId ?? null,
+        lastMessageAt: m.lastMessageAt,
+        lastReadAt: m.lastReadAt,
+      }),
+    };
+  });
+});
diff --git a/server/api/messages/index.post.ts b/server/api/messages/index.post.ts
new file mode 100644
index 00000000..2fa6e398
--- /dev/null
+++ b/server/api/messages/index.post.ts
@@ -0,0 +1,34 @@
+import { eq, sql } from 'drizzle-orm';
+import { z } from 'zod';
+import { db, schema } from '../../db';
+import { parseBodyOrThrow, sendPrivateMessage } from '../../utils/messages';
+import { rateLimit, RATE_LIMITS } from '../../utils/rateLimit';
+import { validateBody } from '../../utils/schemas';
+
+const sendSchema = z.object({
+  to: z.string().trim().min(1).max(50),
+  body: z.string().max(10000),
+});
+
+/**
+ * POST /api/messages
+ * Send a message to a member (by username); starts the conversation on first contact
+ */
+export default defineEventHandler(async (event) => {
+  const { user } = await requireAuthSession(event);
+  await rateLimit(event, RATE_LIMITS.mutation);
+  const { to, body } = await validateBody(event, sendSchema);
+  const text = parseBodyOrThrow(body);
+
+  const [recipient] = await db
+    .select({ id: schema.users.id })
+    .from(schema.users)
+    .where(eq(sql`lower(${schema.users.username})`, to.toLowerCase()))
+    .limit(1);
+  if (!recipient) {
+    throw createError({ statusCode: 404, message: 'No member with this username' });
+  }
+
+  const conversationId = await sendPrivateMessage(user.id, recipient.id, text);
+  return { conversationId };
+});
diff --git a/server/api/messages/unread.get.ts b/server/api/messages/unread.get.ts
new file mode 100644
index 00000000..ef6044cf
--- /dev/null
+++ b/server/api/messages/unread.get.ts
@@ -0,0 +1,27 @@
+import { sql } from 'drizzle-orm';
+import { db } from '../../db';
+
+/**
+ * GET /api/messages/unread
+ * Number of conversations with a message I have not read (sidebar badge)
+ */
+export default defineEventHandler(async (event) => {
+  const { user } = await requireAuthSession(event);
+
+  const [row] = await db.execute<{ count: number }>(sql`
+    select count(*)::int as count
+    from conversation_members cm
+    join conversations c on c.id = cm.conversation_id
+    where cm.user_id = ${user.id}
+      and (cm.hidden_at is null or cm.hidden_at < c.last_message_at)
+      and (cm.last_read_at is null or cm.last_read_at < c.last_message_at)
+      and (
+        select pm.sender_id from private_messages pm
+        where pm.conversation_id = c.id
+        order by pm.created_at desc
+        limit 1
+      ) <> ${user.id}
+  `);
+
+  return { count: Number(row?.count ?? 0) };
+});
diff --git a/server/api/torrents/[hash].get.ts b/server/api/torrents/[hash].get.ts
index c3417c3a..178697c6 100644
--- a/server/api/torrents/[hash].get.ts
+++ b/server/api/torrents/[hash].get.ts
@@ -17,6 +17,7 @@ export default defineEventHandler(async (event) => {
     columns: { torrentData: false },
     with: {
       category: true,
+      uploader: { columns: { id: true, username: true } },
       torrentTags: {
         with: {
           tag: true,
diff --git a/server/api/torrents/[hash]/comments.post.ts b/server/api/torrents/[hash]/comments.post.ts
index 041f545c..cfe575e4 100644
--- a/server/api/torrents/[hash]/comments.post.ts
+++ b/server/api/torrents/[hash]/comments.post.ts
@@ -2,6 +2,7 @@ import { eq } from 'drizzle-orm';
 import { db } from '../../../db';
 import { torrents, torrentComments } from '../../../db/schema';
 import { requireAuthSession } from '../../../utils/adminAuth';
+import { rateLimit, RATE_LIMITS } from '../../../utils/rateLimit';
 import {
   validateParam,
   validateBody,
@@ -11,6 +12,7 @@ import {
 
 export default defineEventHandler(async (event) => {
   const session = await requireAuthSession(event);
+  await rateLimit(event, RATE_LIMITS.mutation);
 
   // Validate hash parameter
   const hash = validateParam(event, 'hash', infoHashSchema);
@@ -23,7 +25,15 @@ export default defineEventHandler(async (event) => {
     where: eq(torrents.infoHash, hash.toLowerCase()),
   });
 
-  if (!torrent) {
+  // Pending torrents are only visible to their uploader and staff
+  const canSee =
+    torrent &&
+    (torrent.isApproved ||
+      torrent.uploaderId === session.user.id ||
+      session.user.isAdmin ||
+      session.user.isModerator);
+
+  if (!torrent || !canSee) {
     throw createError({
       statusCode: 404,
       message: 'Torrent not found',
diff --git a/server/api/torrents/index.get.ts b/server/api/torrents/index.get.ts
index 32b2fed4..0eb04fdd 100644
--- a/server/api/torrents/index.get.ts
+++ b/server/api/torrents/index.get.ts
@@ -1,6 +1,6 @@
 import { db, schema } from '../../db';
 import { getStatsMany } from '../../redis/cache';
-import { desc, eq, ilike, sql, and, or } from 'drizzle-orm';
+import { asc, desc, eq, ilike, sql, and, or } from 'drizzle-orm';
 import { validateQuery, torrentQuerySchema } from '../../utils/schemas';
 import { escapeLike } from '../../utils/validation';
 
@@ -48,7 +48,7 @@ export default defineEventHandler(async (event) => {
     // add category and subcategories filter
     const subcategories = await db.query.categories.findMany({
       where: eq(schema.categories.parentId, query.categoryId),
-      select: { id: true },
+      columns: { id: true },
     });
     conditions.push(
       or(
@@ -60,6 +60,15 @@ export default defineEventHandler(async (event) => {
 
   const whereClause = conditions.length > 0 ? and(...conditions) : undefined;
 
+  // Seeders/leechers live in Redis and cannot be sorted in SQL
+  const sortColumn =
+    query.sortBy === 'name'
+      ? schema.torrents.name
+      : query.sortBy === 'size'
+        ? schema.torrents.size
+        : schema.torrents.createdAt;
+  const orderBy = query.order === 'asc' ? asc(sortColumn) : desc(sortColumn);
+
   // Get torrents with optional search
   const torrents = await db.query.torrents.findMany({
     where: whereClause,
@@ -67,8 +76,10 @@ export default defineEventHandler(async (event) => {
     columns: { torrentData: false },
     with: {
       category: true,
+      torrentTags: { with: { tag: { columns: { id: true, name: true } } } },
     },
-    orderBy: [desc(schema.torrents.createdAt)],
+    // id breaks ties so offset pagination never repeats or skips a row
+    orderBy: [orderBy, asc(schema.torrents.id)],
     limit: query.limit,
     offset,
   });
@@ -88,8 +99,10 @@ export default defineEventHandler(async (event) => {
   const enriched = await Promise.all(
     torrents.map(async (torrent) => {
       const stats = statsByHash.get(torrent.infoHash)!;
+      const { torrentTags, ...rest } = torrent;
       return {
-        ...torrent,
+        ...rest,
+        tags: torrentTags.map((tt) => tt.tag),
         stats: {
           seeders: stats.seeders,
           leechers: stats.leechers,
diff --git a/server/db/migrations/0014_private_messages.sql b/server/db/migrations/0014_private_messages.sql
new file mode 100644
index 00000000..7a5f424c
--- /dev/null
+++ b/server/db/migrations/0014_private_messages.sql
@@ -0,0 +1,29 @@
+-- Private messages between members
+CREATE TABLE IF NOT EXISTS "conversations" (
+  "id" text PRIMARY KEY,
+  "pair_key" text NOT NULL UNIQUE,
+  "created_at" timestamp DEFAULT now() NOT NULL,
+  "last_message_at" timestamp DEFAULT now() NOT NULL
+);
+CREATE TABLE IF NOT EXISTS "conversation_members" (
+  "conversation_id" text NOT NULL REFERENCES "conversations"("id") ON DELETE CASCADE,
+  "user_id" text NOT NULL REFERENCES "users"("id") ON DELETE CASCADE,
+  "last_read_at" timestamp,
+  "hidden_at" timestamp
+);
+CREATE UNIQUE INDEX IF NOT EXISTS "conversation_members_pk" ON "conversation_members" ("conversation_id", "user_id");
+CREATE INDEX IF NOT EXISTS "conversation_members_user_idx" ON "conversation_members" ("user_id");
+CREATE TABLE IF NOT EXISTS "private_messages" (
+  "id" text PRIMARY KEY,
+  "conversation_id" text NOT NULL REFERENCES "conversations"("id") ON DELETE CASCADE,
+  "sender_id" text NOT NULL REFERENCES "users"("id") ON DELETE CASCADE,
+  "body" text NOT NULL,
+  "created_at" timestamp DEFAULT now() NOT NULL
+);
+CREATE INDEX IF NOT EXISTS "private_messages_conv_idx" ON "private_messages" ("conversation_id", "created_at");
+CREATE TABLE IF NOT EXISTS "user_blocks" (
+  "blocker_id" text NOT NULL REFERENCES "users"("id") ON DELETE CASCADE,
+  "blocked_id" text NOT NULL REFERENCES "users"("id") ON DELETE CASCADE,
+  "created_at" timestamp DEFAULT now() NOT NULL
+);
+CREATE UNIQUE INDEX IF NOT EXISTS "user_blocks_pk" ON "user_blocks" ("blocker_id", "blocked_id");
diff --git a/server/db/schema.ts b/server/db/schema.ts
index b403043e..0e8c6f5a 100644
--- a/server/db/schema.ts
+++ b/server/db/schema.ts
@@ -666,6 +666,70 @@ export type ShopItem = typeof shopItems.$inferSelect;
 export type Bounty = typeof bounties.$inferSelect;
 export type BountyContribution = typeof bountyContributions.$inferSelect;
 
+// ============================================================================
+// Private messages
+// ============================================================================
+
+/** One conversation per pair of users (pairKey = sorted ids) */
+export const conversations = pgTable('conversations', {
+  id: text('id').primaryKey(),
+  pairKey: text('pair_key').notNull().unique(),
+  createdAt: timestamp('created_at').defaultNow().notNull(),
+  lastMessageAt: timestamp('last_message_at').defaultNow().notNull(),
+});
+
+export const conversationMembers = pgTable(
+  'conversation_members',
+  {
+    conversationId: text('conversation_id')
+      .notNull()
+      .references(() => conversations.id, { onDelete: 'cascade' }),
+    userId: text('user_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'cascade' }),
+    lastReadAt: timestamp('last_read_at'),
+    // Hidden for this member until a newer message arrives
+    hiddenAt: timestamp('hidden_at'),
+  },
+  (table) => [
+    uniqueIndex('conversation_members_pk').on(table.conversationId, table.userId),
+    index('conversation_members_user_idx').on(table.userId),
+  ]
+);
+
+export const privateMessages = pgTable(
+  'private_messages',
+  {
+    id: text('id').primaryKey(),
+    conversationId: text('conversation_id')
+      .notNull()
+      .references(() => conversations.id, { onDelete: 'cascade' }),
+    senderId: text('sender_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'cascade' }),
+    body: text('body').notNull(),
+    createdAt: timestamp('created_at').defaultNow().notNull(),
+  },
+  (table) => [index('private_messages_conv_idx').on(table.conversationId, table.createdAt)]
+);
+
+export const userBlocks = pgTable(
+  'user_blocks',
+  {
+    blockerId: text('blocker_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'cascade' }),
+    blockedId: text('blocked_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'cascade' }),
+    createdAt: timestamp('created_at').defaultNow().notNull(),
+  },
+  (table) => [uniqueIndex('user_blocks_pk').on(table.blockerId, table.blockedId)]
+);
+
+export type Conversation = typeof conversations.$inferSelect;
+export type PrivateMessage = typeof privateMessages.$inferSelect;
+
 export type Invitation = typeof invitations.$inferSelect;
 export type NewInvitation = typeof invitations.$inferInsert;
 
diff --git a/server/redis/userActivity.ts b/server/redis/userActivity.ts
new file mode 100644
index 00000000..7355eae6
--- /dev/null
+++ b/server/redis/userActivity.ts
@@ -0,0 +1,53 @@
+/**
+ * Per-user swarm activity: which torrents a user is currently seeding or
+ * leeching, as sorted sets scored by last announce time. Entries older than
+ * the peer TTL are ignored and pruned.
+ */
+
+import { redis } from './client';
+import { PEER_TTL } from './peerCount';
+
+const SEEDING_KEY = (userId: string) => `user:${userId}:seeding`;
+const LEECHING_KEY = (userId: string) => `user:${userId}:leeching`;
+
+export async function recordUserPeer(
+  userId: string,
+  infoHash: string,
+  seeding: boolean
+): Promise<void> {
+  const now = Date.now();
+  const [current, other] = seeding
+    ? [SEEDING_KEY(userId), LEECHING_KEY(userId)]
+    : [LEECHING_KEY(userId), SEEDING_KEY(userId)];
+  await redis
+    .multi()
+    .zadd(current, now, infoHash)
+    .zrem(other, infoHash)
+    .expire(current, PEER_TTL)
+    .exec();
+}
+
+export async function removeUserPeer(userId: string, infoHash: string): Promise<void> {
+  await redis
+    .multi()
+    .zrem(SEEDING_KEY(userId), infoHash)
+    .zrem(LEECHING_KEY(userId), infoHash)
+    .exec();
+}
+
+export async function getUserActivity(
+  userId: string
+): Promise<{ seeding: number; leeching: number }> {
+  const cutoff = Date.now() - PEER_TTL * 1000;
+  const result = await redis
+    .multi()
+    .zremrangebyscore(SEEDING_KEY(userId), 0, cutoff)
+    .zremrangebyscore(LEECHING_KEY(userId), 0, cutoff)
+    .zcard(SEEDING_KEY(userId))
+    .zcard(LEECHING_KEY(userId))
+    .exec();
+  return {
+    seeding: Number(result?.[2]?.[1] ?? 0),
+    leeching: Number(result?.[3]?.[1] ?? 0),
+  };
+}
diff --git a/server/tracker/handlers.ts b/server/tracker/handlers.ts
index 635774a3..8bb38698 100644
--- a/server/tracker/handlers.ts
+++ b/server/tracker/handlers.ts
@@ -14,9 +14,14 @@ import { createHnrEntry, updateSeedTime } from '../utils/hnr';
 import { createHash } from 'crypto';
 import { computeCredit, getMaxRateBytes } from './credit';
 import { computeSeedingBonus } from './bonusAccrual';
+import { recordUserPeer, removeUserPeer } from '../redis/userActivity';
 import { getTrackerTorrent, getTrackerUser, markSnatched } from './lookups';
 import { getFreeleechState } from '../utils/settings';
 
+function logActivityError(err: unknown) {
+  console.error('[Activity] User peer tracking failed:', err);
+}
+
 function hashOwner(passkey: string): string {
   return createHash('sha256').update(`peer-owner:${passkey}`).digest('hex').slice(0, 16);
 }
@@ -183,6 +188,8 @@ export async function handleAnnounce(params: {
   if (event === 'stopped') {
     // Remove peer from swarm
     await removePeer(infoHash, peerId);
+    // Dashboard counter only: never fail the announce over it
+    if (user) await removeUserPeer(user.id, infoHash).catch(logActivityError);
     return;
   }
 
@@ -196,6 +203,7 @@ export async function handleAnnounce(params: {
     left: params.left,
     isSeeder: seeding,
   });
+  if (user) await recordUserPeer(user.id, infoHash, seeding).catch(logActivityError);
 
   // Track completed downloads
   if (event === 'completed') {
diff --git a/server/utils/messageRules.ts b/server/utils/messageRules.ts
new file mode 100644
index 00000000..d3947f32
--- /dev/null
+++ b/server/utils/messageRules.ts
@@ -0,0 +1,43 @@
+/**
+ * Private message rules, free of DB access (unit tested).
+ */
+
+export const MAX_MESSAGE_LENGTH = 5000;
+
+/** One conversation per pair of users, whatever the order */
+export function pairKey(a: string, b: string): string {
+  return a < b ? `${a}:${b}` : `${b}:${a}`;
+}
+
+/**
+ * Trim, normalize line endings and collapse long runs of blank lines.
+ * Returns null when the message is empty or too long.
+ */
+export function normalizeMessageBody(raw: unknown): string | null {
+  if (typeof raw !== 'string') return null;
+  const body = raw
+    .replace(/\r\n?/g, '\n')
+    .replace(/\n{4,}/g, '\n\n\n')
+    .trim();
+  if (body.length === 0 || body.length > MAX_MESSAGE_LENGTH) return null;
+  return body;
+}
+
+/** Unread when the last message is from the other person and newer than the last read */
+export function isConversationUnread(input: {
+  userId: string;
+  lastSenderId: string | null;
+  lastMessageAt: Date;
+  lastReadAt: Date | null;
+}): boolean {
+  if (!input.lastSenderId || input.lastSenderId === input.userId) return false;
+  return !input.lastReadAt || input.lastReadAt < input.lastMessageAt;
+}
+
+/** A hidden conversation comes back when a newer message arrives */
+export function isConversationVisible(input: {
+  hiddenAt: Date | null;
+  lastMessageAt: Date;
+}): boolean {
+  return !input.hiddenAt || input.hiddenAt < input.lastMessageAt;
+}
diff --git a/server/utils/messages.ts b/server/utils/messages.ts
new file mode 100644
index 00000000..e7965242
--- /dev/null
+++ b/server/utils/messages.ts
@@ -0,0 +1,136 @@
+/**
+ * Private messages: membership checks, blocks and sending.
+ * Only the two participants can read a conversation; staff roles grant no
+ * access here.
+ */
+
+import type { H3Event } from 'h3';
+import { randomUUID } from 'crypto';
+import { and, eq, or } from 'drizzle-orm';
+import { db, schema } from '../db';
+import { normalizeMessageBody, pairKey } from './messageRules';
+import { validateParam, uuidSchema } from './schemas';
+
+/**
+ * Load a conversation the current user belongs to, or 404 (never reveal
+ * whether a conversation exists)
+ */
+export async function requireConversation(event: H3Event) {
+  const { user } = await requireAuthSession(event);
+  const conversationId = validateParam(event, 'id', uuidSchema);
+
+  const members = await db
+    .select({ userId: schema.conversationMembers.userId })
+    .from(schema.conversationMembers)
+    .where(eq(schema.conversationMembers.conversationId, conversationId));
+
+  if (!members.some((m) => m.userId === user.id)) {
+    throw createError({ statusCode: 404, message: 'Conversation not found' });
+  }
+
+  const otherUserId = members.find((m) => m.userId !== user.id)?.userId ?? null;
+  return { user, conversationId, otherUserId };
+}
+
+/** Block state between two users, in both directions */
+export async function getBlockState(userId: string, otherId: string) {
+  const rows = await db
+    .select({ blockerId: schema.userBlocks.blockerId })
+    .from(schema.userBlocks)
+    .where(
+      or(
+        and(eq(schema.userBlocks.blockerId, userId), eq(schema.userBlocks.blockedId, otherId)),
+        and(eq(schema.userBlocks.blockerId, otherId), eq(schema.userBlocks.blockedId, userId))
+      )
+    );
+  return {
+    iBlocked: rows.some((r) => r.blockerId === userId),
+    blockedMe: rows.some((r) => r.blockerId === otherId),
+  };
+}
+
+export function parseBodyOrThrow(raw: unknown): string {
+  const body = normalizeMessageBody(raw);
+  if (!body) {
+    throw createError({ statusCode: 400, message: 'Message must be between 1 and 5000 characters' });
+  }
+  return body;
+}
+
+/**
+ * Send a message to `recipientId`, creating the conversation on first
+ * contact. Returns the conversation id.
+ */
+export async function sendPrivateMessage(senderId: string, recipientId: string, body: string) {
+  if (senderId === recipientId) {
+    throw createError({ statusCode: 400, message: 'You cannot message yourself' });
+  }
+
+  // Covers both entry points: new conversation by username and reply by id
+  const recipient = await db.query.users.findFirst({
+    where: eq(schema.users.id, recipientId),
+    columns: { isBanned: true },
+  });
+  if (!recipient || recipient.isBanned) {
+    throw createError({ statusCode: 404, message: 'No member with this username' });
+  }
+
+  const block = await getBlockState(senderId, recipientId);
+  if (block.blockedMe) {
+    throw createError({ statusCode: 403, message: 'This member does not accept your messages' });
+  }
+  if (block.iBlocked) {
+    throw createError({ statusCode: 403, message: 'Unblock this member to send a message' });
+  }
+
+  const key = pairKey(senderId, recipientId);
+  const now = new Date();
+
+  return db.transaction(async (tx) => {
+    // Create the conversation once per pair; concurrent first messages share it
+    await tx
+      .insert(schema.conversations)
+      .values({ id: randomUUID(), pairKey: key, lastMessageAt: now })
+      .onConflictDoNothing({ target: schema.conversations.pairKey });
+
+    const [conversation] = await tx
+      .select({ id: schema.conversations.id })
+      .from(schema.conversations)
+      .where(eq(schema.conversations.pairKey, key));
+    const conversationId = conversation!.id;
+
+    await tx
+      .insert(schema.conversationMembers)
+      .values([
+        { conversationId, userId: senderId },
+        { conversationId, userId: recipientId },
+      ])
+      .onConflictDoNothing();
+
+    await tx.insert(schema.privateMessages).values({
+      id: randomUUID(),
+      conversationId,
+      senderId,
+      body,
+      createdAt: now,
+    });
+
+    await tx
+      .update(schema.conversations)
+      .set({ lastMessageAt: now })
+      .where(eq(schema.conversations.id, conversationId));
+
+    // The sender has read their own message
+    await tx
+      .update(schema.conversationMembers)
+      .set({ lastReadAt: now })
+      .where(
+        and(
+          eq(schema.conversationMembers.conversationId, conversationId),
+          eq(schema.conversationMembers.userId, senderId)
+        )
+      );
+
+    return conversationId;
+  });
+}
diff --git a/server/utils/schemas.ts b/server/utils/schemas.ts
index 000433c4..0fa9f607 100644
--- a/server/utils/schemas.ts
+++ b/server/utils/schemas.ts
@@ -84,9 +84,7 @@ export const torrentQuerySchema = z.object({
   limit: z.coerce.number().int().positive().max(100).default(20),
   categoryId: z.uuid().optional(),
   search: z.string().max(255).optional(),
-  sortBy: z
-    .enum(['uploaded', 'name', 'size', 'seeders', 'leechers'])
-    .default('uploaded'),
+  sortBy: z.enum(['uploaded', 'name', 'size']).default('uploaded'),
   order: z.enum(['asc', 'desc']).default('desc'),
 });
 
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/message-rules.test.ts b/tests/message-rules.test.ts
new file mode 100644
index 00000000..c20a4fb8
--- /dev/null
+++ b/tests/message-rules.test.ts
@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import {
+  MAX_MESSAGE_LENGTH,
+  isConversationUnread,
+  isConversationVisible,
+  normalizeMessageBody,
+  pairKey,
+} from '../server/utils/messageRules';
+
+describe('pairKey', () => {
+  it('is the same whatever the order', () => {
+    expect(pairKey('b', 'a')).toBe(pairKey('a', 'b'));
+    expect(pairKey('a', 'b')).toBe('a:b');
+  });
+});
+
+describe('normalizeMessageBody', () => {
+  it('trims and normalizes line endings', () => {
+    expect(normalizeMessageBody('  hello\r\nworld  ')).toBe('hello\nworld');
+  });
+  it('collapses long runs of blank lines', () => {
+    expect(normalizeMessageBody('a\n\n\n\n\n\nb')).toBe('a\n\n\nb');
+  });
+  it('rejects empty, whitespace-only, too long and non-string bodies', () => {
+    expect(normalizeMessageBody('')).toBeNull();
+    expect(normalizeMessageBody('   \n  ')).toBeNull();
+    expect(normalizeMessageBody('x'.repeat(MAX_MESSAGE_LENGTH + 1))).toBeNull();
+    expect(normalizeMessageBody(42)).toBeNull();
+  });
+  it('keeps html as plain text (escaped at render time)', () => {
+    expect(normalizeMessageBody('<script>alert(1)</script>')).toBe('<script>alert(1)</script>');
+  });
+});
+
+describe('isConversationUnread', () => {
+  const at = new Date('2026-10-08T12:00:00Z');
+  it('is unread when the other person wrote after my last read', () => {
+    expect(isConversationUnread({ userId: 'me', lastSenderId: 'you', lastMessageAt: at, lastReadAt: null })).toBe(true);
+    expect(isConversationUnread({ userId: 'me', lastSenderId: 'you', lastMessageAt: at, lastReadAt: new Date('2026-10-08T11:00:00Z') })).toBe(true);
+  });
+  it('is read when I wrote last or read it afterwards', () => {
+    expect(isConversationUnread({ userId: 'me', lastSenderId: 'me', lastMessageAt: at, lastReadAt: null })).toBe(false);
+    expect(isConversationUnread({ userId: 'me', lastSenderId: 'you', lastMessageAt: at, lastReadAt: at })).toBe(false);
+  });
+});
+
+describe('isConversationVisible', () => {
+  const at = new Date('2026-10-08T12:00:00Z');
+  it('hides until a newer message arrives', () => {
+    expect(isConversationVisible({ hiddenAt: null, lastMessageAt: at })).toBe(true);
+    expect(isConversationVisible({ hiddenAt: at, lastMessageAt: at })).toBe(false);
+    expect(isConversationVisible({ hiddenAt: new Date('2026-10-08T11:00:00Z'), lastMessageAt: at })).toBe(true);
+  });
+});
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);
+    }
+  });
+});