From 956801f907891c29d95a6e5eb44feedffd2d6fd4 Mon Sep 17 00:00:00 2001
From: neon <18559658+neonsolstice@users.noreply.github.com>
Date: Tue, 10 Mar 2026 04:21:33 -0600
Subject: [PATCH] feat: redesign settings pages, theme tokens, and fix layout
 alignment

---
 client/src/assets/main.css                    |  70 ++-
 client/src/assets/theme/tokens.css            |   2 +-
 client/src/components/AppHeader.vue           |   2 +-
 client/src/components/AppSidebar.vue          | 380 +++++---------
 .../src/components/sidebar/SidebarNavItem.vue |  45 ++
 .../sidebar/SidebarSectionHeader.vue          |  42 ++
 client/src/components/ui/ToggleSwitch.vue     |  21 +
 client/src/features/admin/UsersPage.vue       |  14 +-
 .../author/views/AuthorDetailView.vue         |  20 +-
 .../email/components/EmailSettings.vue        |  58 ++-
 .../components/LibraryCreatorDetails.vue      |  10 +-
 .../components/LibraryCreatorFolders.vue      |   4 +-
 .../reader/components/PdfSettingsPanel.vue    |  10 +-
 .../src/features/settings/AboutSettings.vue   | 124 +++--
 .../features/settings/AppearanceSettings.vue  |  30 +-
 .../src/features/settings/ComicsSettings.vue  | 283 ++++++-----
 .../src/features/settings/EbookSettings.vue   | 469 +++++++++---------
 .../features/settings/FileNamingSettings.vue  | 422 +++++++++-------
 client/src/features/settings/KoboSettings.vue | 418 ++++++++--------
 .../features/settings/LibrariesSettings.vue   | 272 +++++-----
 .../features/settings/MaintenanceSettings.vue |  89 +---
 client/src/features/settings/OidcSettings.vue | 109 +---
 client/src/features/settings/OpdsSettings.vue | 231 ++++-----
 client/src/features/settings/PdfSettings.vue  | 233 +++++----
 .../src/features/settings/ReaderSettings.vue  | 100 ++--
 .../src/features/settings/ScannerSettings.vue | 139 ++----
 .../src/features/settings/SettingsHeader.vue  |   2 +-
 .../features/settings/SettingsPageHeader.vue  |  15 +
 .../src/features/settings/StagingSettings.vue | 145 +++---
 .../MetadataPreferencesSettings.vue           |  79 +--
 .../components/FieldGroupSection.vue          |   8 +-
 .../components/FieldPreferenceTable.vue       |  31 +-
 .../components/FieldRow.vue                   | 141 +++---
 .../components/GlobalPreferencePanel.vue      | 135 +++--
 .../components/LibraryPreferencePanel.vue     |  73 ++-
 .../components/ProviderConfigPanel.vue        | 132 +++--
 .../components/ProviderReservoir.vue          |  41 +-
 client/src/router/index.ts                    |   2 +-
 client/src/views/SettingsView.vue             |   4 +-
 client/src/views/StagingView.vue              |   2 +-
 client/typecheck-baseline.txt                 |   8 -
 packages/types/src/reader-settings.ts         |   3 +-
 .../dto/update-oidc-config.dto.ts             |   3 +-
 server/src/modules/book/book.service.ts       |   6 +-
 .../modules/kobo/guards/kobo-token.guard.ts   |   3 +-
 .../provider-config.service.spec.ts           |   2 +-
 .../provider-config.service.ts                |   2 +-
 server/src/modules/opds/opds-auth.guard.ts    |   5 +-
 48 files changed, 2198 insertions(+), 2241 deletions(-)
 create mode 100644 client/src/components/sidebar/SidebarNavItem.vue
 create mode 100644 client/src/components/sidebar/SidebarSectionHeader.vue
 create mode 100644 client/src/components/ui/ToggleSwitch.vue
 create mode 100644 client/src/features/settings/SettingsPageHeader.vue

diff --git a/client/src/assets/main.css b/client/src/assets/main.css
index 02aec3211..33d12273e 100644
--- a/client/src/assets/main.css
+++ b/client/src/assets/main.css
@@ -45,8 +45,24 @@
 
 .pattern-topo {
   background-image:
-    repeating-radial-gradient(circle at 0% 0%, transparent 0, transparent 40px, color-mix(in oklch, var(--dot-color) 50%, transparent) 40px, color-mix(in oklch, var(--dot-color) 50%, transparent) 41px, transparent 41px, transparent 80px),
-    repeating-radial-gradient(circle at 100% 100%, transparent 0, transparent 40px, color-mix(in oklch, var(--dot-color) 50%, transparent) 40px, color-mix(in oklch, var(--dot-color) 50%, transparent) 41px, transparent 41px, transparent 80px);
+    repeating-radial-gradient(
+      circle at 0% 0%,
+      transparent 0,
+      transparent 40px,
+      color-mix(in oklch, var(--dot-color) 50%, transparent) 40px,
+      color-mix(in oklch, var(--dot-color) 50%, transparent) 41px,
+      transparent 41px,
+      transparent 80px
+    ),
+    repeating-radial-gradient(
+      circle at 100% 100%,
+      transparent 0,
+      transparent 40px,
+      color-mix(in oklch, var(--dot-color) 50%, transparent) 40px,
+      color-mix(in oklch, var(--dot-color) 50%, transparent) 41px,
+      transparent 41px,
+      transparent 80px
+    );
 }
 
 .pattern-mesh {
@@ -73,7 +89,13 @@
 }
 
 .pattern-brushed {
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, color-mix(in oklch, var(--primary) 6%, transparent) 1px, color-mix(in oklch, var(--primary) 6%, transparent) 2px);
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 1px,
+    color-mix(in oklch, var(--primary) 6%, transparent) 1px,
+    color-mix(in oklch, var(--primary) 6%, transparent) 2px
+  );
 }
 
 .pattern-prism::before {
@@ -83,8 +105,7 @@
   z-index: -1;
   pointer-events: none;
   background-image:
-    linear-gradient(135deg, rgba(255, 0, 0, 0.03) 0%, transparent 50%),
-    linear-gradient(225deg, rgba(0, 0, 255, 0.03) 0%, transparent 50%),
+    linear-gradient(135deg, rgba(255, 0, 0, 0.03) 0%, transparent 50%), linear-gradient(225deg, rgba(0, 0, 255, 0.03) 0%, transparent 50%),
     linear-gradient(45deg, rgba(0, 255, 0, 0.03) 0%, transparent 50%);
   filter: contrast(150%) brightness(110%);
 }
@@ -207,7 +228,13 @@
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  background-image: repeating-radial-gradient(circle at 50% -25%, transparent, transparent 3px, color-mix(in oklch, var(--primary) 7%, transparent) 3.75px, transparent 4.5px);
+  background-image: repeating-radial-gradient(
+    circle at 50% -25%,
+    transparent,
+    transparent 3px,
+    color-mix(in oklch, var(--primary) 7%, transparent) 3.75px,
+    transparent 4.5px
+  );
 }
 
 .pattern-carbon::before {
@@ -316,4 +343,35 @@
   .settings-value {
     @apply text-sm font-medium tabular-nums text-foreground;
   }
+
+  /* ── Settings form controls ─────────────────────────────────
+     Use .input-field on <input> and .select-field on <select>
+     to get consistent sizing and focus rings across all tabs.
+  ────────────────────────────────────────────────────────────── */
+  .input-field {
+    @apply h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground
+           placeholder:text-muted-foreground/50
+           focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary
+           disabled:opacity-50 transition-colors;
+  }
+  .select-field {
+    @apply h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground cursor-pointer
+           focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary
+           disabled:opacity-50 transition-colors;
+  }
+
+  /* ── Settings action buttons ─────────────────────────────────
+     Use these on <button> elements in settings panels (headers,
+     card rows, inline forms). Matches the Kobo "Add device" size.
+  ────────────────────────────────────────────────────────────── */
+  .settings-btn-primary {
+    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium shrink-0
+           bg-primary text-primary-foreground hover:bg-primary/90
+           disabled:opacity-50 transition-colors;
+  }
+  .settings-btn-outline {
+    @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium shrink-0
+           border border-border bg-background text-foreground hover:bg-muted
+           disabled:opacity-50 transition-colors;
+  }
 }
diff --git a/client/src/assets/theme/tokens.css b/client/src/assets/theme/tokens.css
index 24efaab86..9d0aa3f43 100644
--- a/client/src/assets/theme/tokens.css
+++ b/client/src/assets/theme/tokens.css
@@ -79,7 +79,7 @@
 }
 
 .dark {
-  --tint-c: 0.025;
+  --tint-c: 0.02;
   --tint-c-surface: var(--tint-c);
   --bg-lift: 0;
 
diff --git a/client/src/components/AppHeader.vue b/client/src/components/AppHeader.vue
index 0d0b3f1eb..cb7a11fb7 100644
--- a/client/src/components/AppHeader.vue
+++ b/client/src/components/AppHeader.vue
@@ -143,7 +143,7 @@ function formatBadgeClass(fmt: string): string {
 
 <template>
   <header
-    class="flex h-12 shrink-0 items-center gap-2 border border-sidebar-border/50 bg-background/90 backdrop-blur-xl px-3 shadow-lg shadow-black/5 relative mt-3 ml-0 mr-4 z-30 rounded-xl transition-all duration-300 flex-none"
+    class="flex h-12 shrink-0 items-center gap-2 border border-sidebar-border/50 bg-background/90 backdrop-blur-xl px-3 shadow-lg shadow-black/5 relative mt-3 mx-4 z-30 rounded-xl transition-all duration-300 flex-none"
   >
     <!-- Mobile: search active overlay -->
     <template v-if="mobileSearchOpen">
diff --git a/client/src/components/AppSidebar.vue b/client/src/components/AppSidebar.vue
index e6146b828..dabb6840b 100644
--- a/client/src/components/AppSidebar.vue
+++ b/client/src/components/AppSidebar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, type Component } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import * as Icons from 'lucide-vue-next'
-import { Aperture, ChevronDown, FolderOpen, LayoutDashboard, PackageOpen, Plus, Users } from 'lucide-vue-next'
+import { Aperture, FolderOpen, LayoutDashboard, PackageOpen, Users } from 'lucide-vue-next'
 import {
   Sidebar,
   SidebarContent,
@@ -10,11 +10,12 @@ import {
   SidebarGroupContent,
   SidebarHeader,
   SidebarMenu,
-  SidebarMenuButton,
   SidebarMenuItem,
   SidebarRail,
   SidebarSeparator,
 } from '@/components/ui/sidebar'
+import SidebarNavItem from '@/components/sidebar/SidebarNavItem.vue'
+import SidebarSectionHeader from '@/components/sidebar/SidebarSectionHeader.vue'
 import { useLibraries } from '@/features/library/composables/useLibraries'
 import { useLenses } from '@/features/lens/composables/useLenses'
 import { useCollections } from '@/features/collection/composables/useCollections'
@@ -26,12 +27,18 @@ import CreateLensDialog from '@/features/lens/components/CreateLensDialog.vue'
 import CreateCollectionDialog from '@/features/collection/components/CreateCollectionDialog.vue'
 import LibraryCreatorModal from '@/features/library/components/LibraryCreatorModal.vue'
 
-function getCollectionIcon(iconName: string | null) {
-  if (iconName) {
-    const found = (Icons as Record<string, unknown>)[iconName]
-    if (found) return found
+function resolveIcon(name: string | null | undefined, fallback: Component): Component {
+  if (name && name in Icons) return (Icons as Record<string, unknown>)[name] as Component
+  return fallback
+}
+
+function useSidebarSection(key: string) {
+  const isOpen = ref(localStorage.getItem(`projectx:sidebar:${key}`) !== 'false')
+  function toggle() {
+    isOpen.value = !isOpen.value
+    localStorage.setItem(`projectx:sidebar:${key}`, String(isOpen.value))
   }
-  return FolderOpen
+  return { isOpen, toggle }
 }
 
 const router = useRouter()
@@ -48,47 +55,24 @@ const createCollectionOpen = ref(false)
 const createLibraryOpen = ref(false)
 const scanningLibraryId = ref<number | null>(null)
 
-const librariesOpen = ref(localStorage.getItem('projectx:sidebar:libraries') !== 'false')
-const lensesOpen = ref(localStorage.getItem('projectx:sidebar:lenses') !== 'false')
-const collectionsOpen = ref(localStorage.getItem('projectx:sidebar:collections') !== 'false')
+const { isOpen: librariesOpen, toggle: toggleLibraries } = useSidebarSection('libraries')
+const { isOpen: lensesOpen, toggle: toggleLenses } = useSidebarSection('lenses')
+const { isOpen: collectionsOpen, toggle: toggleCollections } = useSidebarSection('collections')
 
-function toggleLibraries() {
-  librariesOpen.value = !librariesOpen.value
-  localStorage.setItem('projectx:sidebar:libraries', String(librariesOpen.value))
-}
-function toggleLenses() {
-  lensesOpen.value = !lensesOpen.value
-  localStorage.setItem('projectx:sidebar:lenses', String(lensesOpen.value))
-}
-function toggleCollections() {
-  collectionsOpen.value = !collectionsOpen.value
-  localStorage.setItem('projectx:sidebar:collections', String(collectionsOpen.value))
-}
+const isDashboardActive = computed(() => route.name === 'dashboard')
+const isStagingActive = computed(() => route.name === 'staging')
+const isAuthorsActive = computed(() => route.name === 'authors' || route.name === 'author-detail')
 
 const activeLibraryId = computed(() => {
   const id = route.params.id
   return route.name === 'library' && id ? Number(id) : null
 })
 
-const isDashboardActive = computed(() => route.name === 'dashboard')
-const isStagingActive = computed(() => route.name === 'staging')
-const isAuthorsActive = computed(() => route.name === 'authors' || route.name === 'author-detail')
-
 const activeLensId = computed(() => {
   const id = route.params.id
   return route.name === 'lens' && id ? Number(id) : null
 })
 
-function getLibraryIcon(name: string | null | undefined) {
-  if (name && name in Icons) return (Icons as Record<string, unknown>)[name]
-  return Icons.BookCopy
-}
-
-function getLensIcon(name: string | null | undefined) {
-  if (name && name in Icons) return (Icons as Record<string, unknown>)[name]
-  return Aperture
-}
-
 const activeCollectionId = computed(() => {
   const id = route.params.id
   return route.name === 'collection' && id ? Number(id) : null
@@ -170,73 +154,35 @@ onMounted(async () => {
     </SidebarHeader>
 
     <SidebarContent>
-      <!-- Dashboard / Staging -->
+      <!-- Dashboard / Staging / Authors -->
       <SidebarGroup class="py-2">
         <SidebarGroupContent>
           <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                :is-active="isDashboardActive"
-                tooltip="Dashboard"
-                class="relative h-9 gap-2.5 rounded-xl px-2 transition-[background-color,box-shadow] duration-200 before:absolute before:-left-1.5 before:top-1/2 before:h-5 before:w-[3px] before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:bg-primary before:opacity-0 before:transition-all before:duration-200 hover:bg-primary/8 data-[active=true]:bg-primary/15 data-[active=true]:shadow-[inset_0_0_0_1px_var(--sidebar-border)] data-[active=true]:before:scale-y-100 data-[active=true]:before:opacity-100 group/item group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
-                @click="router.push({ name: 'dashboard' })"
-              >
-                <span class="inline-flex h-[1.65rem] w-[1.65rem] shrink-0 items-center justify-center rounded-lg transition-colors">
-                  <LayoutDashboard
-                    :size="16"
-                    class="text-sidebar-foreground/70 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary"
-                  />
-                </span>
-                <span
-                  class="text-[13.5px] font-semibold tracking-[0.005em] text-sidebar-foreground/80 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
-                  >Dashboard</span
-                >
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-            <SidebarMenuItem v-if="hasPermission('staging_access')">
-              <SidebarMenuButton
-                :is-active="isStagingActive"
-                tooltip="Staging"
-                class="relative h-9 gap-2.5 rounded-xl px-2 transition-[background-color,box-shadow] duration-200 before:absolute before:-left-1.5 before:top-1/2 before:h-5 before:w-[3px] before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:bg-primary before:opacity-0 before:transition-all before:duration-200 hover:bg-primary/8 data-[active=true]:bg-primary/15 data-[active=true]:shadow-[inset_0_0_0_1px_var(--sidebar-border)] data-[active=true]:before:scale-y-100 data-[active=true]:before:opacity-100 group/item group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
-                @click="router.push({ name: 'staging' })"
-              >
-                <span class="inline-flex h-[1.65rem] w-[1.65rem] shrink-0 items-center justify-center rounded-lg transition-colors">
-                  <PackageOpen
-                    :size="16"
-                    class="text-sidebar-foreground/70 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary"
-                  />
-                </span>
-                <span
-                  class="text-[13.5px] font-semibold tracking-[0.005em] text-sidebar-foreground/80 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
-                  >Staging</span
-                >
+            <SidebarNavItem
+              :is-active="isDashboardActive"
+              tooltip="Dashboard"
+              :icon="LayoutDashboard"
+              label="Dashboard"
+              @click="router.push({ name: 'dashboard' })"
+            />
+            <SidebarNavItem
+              v-if="hasPermission('staging_access')"
+              :is-active="isStagingActive"
+              tooltip="Staging"
+              :icon="PackageOpen"
+              label="Staging"
+              @click="router.push({ name: 'staging' })"
+            >
+              <template #badge>
                 <span
                   v-if="stagingSummary.total > 0"
-                  class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[11px] font-semibold tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
+                  class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[10px] font-medium tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
                 >
                   {{ stagingSummary.total }}
                 </span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                :is-active="isAuthorsActive"
-                tooltip="Authors"
-                class="relative h-9 gap-2.5 rounded-xl px-2 transition-[background-color,box-shadow] duration-200 before:absolute before:-left-1.5 before:top-1/2 before:h-5 before:w-[3px] before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:bg-primary before:opacity-0 before:transition-all before:duration-200 hover:bg-primary/8 data-[active=true]:bg-primary/15 data-[active=true]:shadow-[inset_0_0_0_1px_var(--sidebar-border)] data-[active=true]:before:scale-y-100 data-[active=true]:before:opacity-100 group/item group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
-                @click="router.push({ name: 'authors' })"
-              >
-                <span class="inline-flex h-[1.65rem] w-[1.65rem] shrink-0 items-center justify-center rounded-lg transition-colors">
-                  <Users
-                    :size="16"
-                    class="text-sidebar-foreground/70 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary"
-                  />
-                </span>
-                <span
-                  class="text-[13.5px] font-semibold tracking-[0.005em] text-sidebar-foreground/80 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
-                  >Authors</span
-                >
-              </SidebarMenuButton>
-            </SidebarMenuItem>
+              </template>
+            </SidebarNavItem>
+            <SidebarNavItem :is-active="isAuthorsActive" tooltip="Authors" :icon="Users" label="Authors" @click="router.push({ name: 'authors' })" />
           </SidebarMenu>
         </SidebarGroupContent>
       </SidebarGroup>
@@ -245,84 +191,61 @@ onMounted(async () => {
 
       <!-- Libraries -->
       <SidebarGroup class="py-2">
-        <div class="flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden">
-          <button class="group/hdr flex min-w-0 flex-1 items-center gap-1.5" @click="toggleLibraries">
-            <span
-              class="text-[11px] font-bold uppercase tracking-[0.12em] text-sidebar-foreground/60 transition-colors group-hover/hdr:text-sidebar-foreground/90"
-              >Libraries</span
-            >
-            <span v-if="!librariesOpen && libraries.length > 0" class="text-[11px] font-medium text-sidebar-foreground/40">
-              ({{ libraries.length }})
-            </span>
-            <ChevronDown
-              :size="13"
-              :stroke-width="2.5"
-              class="ml-auto shrink-0 text-sidebar-foreground/40 transition-transform duration-200 group-hover/hdr:text-sidebar-foreground/70"
-              :class="librariesOpen ? 'rotate-0' : '-rotate-90'"
-            />
-          </button>
-          <button
-            v-if="hasPermission('manage_libraries')"
-            class="ml-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/40 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
-            title="New Library"
-            @click="createLibraryOpen = true"
-          >
-            <Plus :size="14" :stroke-width="2.5" />
-          </button>
-        </div>
+        <SidebarSectionHeader
+          label="Libraries"
+          :is-open="librariesOpen"
+          :collapsed-count="libraries.length"
+          :can-add="hasPermission('manage_libraries')"
+          add-title="New Library"
+          @toggle="toggleLibraries"
+          @add="createLibraryOpen = true"
+        />
         <div v-show="librariesOpen">
           <SidebarGroupContent>
             <SidebarMenu>
-              <SidebarMenuItem v-for="lib in libraries" :key="lib.id">
-                <SidebarMenuButton
-                  :is-active="activeLibraryId === lib.id"
-                  :tooltip="getProgress(lib.id)?.status === 'running' ? `${lib.name} - Scanning ${scanPct(lib.id)}%` : lib.name"
-                  class="relative h-9 gap-2.5 rounded-xl px-2 transition-[background-color,box-shadow] duration-200 before:absolute before:-left-1.5 before:top-1/2 before:h-5 before:w-[3px] before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:bg-primary before:opacity-0 before:transition-all before:duration-200 hover:bg-primary/8 data-[active=true]:bg-primary/15 data-[active=true]:shadow-[inset_0_0_0_1px_var(--sidebar-border)] data-[active=true]:before:scale-y-100 data-[active=true]:before:opacity-100 group/item group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
-                  @click="router.push({ name: 'library', params: { id: lib.id } })"
-                >
-                  <span class="inline-flex h-[1.65rem] w-[1.65rem] shrink-0 items-center justify-center rounded-lg transition-colors">
-                    <component
-                      :is="getLibraryIcon(lib.icon)"
-                      :size="17"
-                      class="text-sidebar-foreground/70 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary"
-                      :class="getProgress(lib.id)?.status === 'running' ? 'animate-pulse' : ''"
-                    />
-                  </span>
-                  <span
-                    class="text-[13.5px] font-semibold tracking-[0.005em] text-sidebar-foreground/80 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
-                  >
-                    {{ lib.name }}
-                  </span>
+              <SidebarNavItem
+                v-for="lib in libraries"
+                :key="lib.id"
+                :is-active="activeLibraryId === lib.id"
+                :tooltip="getProgress(lib.id)?.status === 'running' ? `${lib.name} - Scanning ${scanPct(lib.id)}%` : lib.name"
+                :icon="resolveIcon(lib.icon, Icons.BookCopy)"
+                :icon-class="getProgress(lib.id)?.status === 'running' ? 'animate-pulse' : ''"
+                :label="lib.name"
+                @click="router.push({ name: 'library', params: { id: lib.id } })"
+              >
+                <template #badge>
                   <span
                     v-if="getProgress(lib.id)?.status === 'running'"
-                    class="ml-auto shrink-0 rounded-md bg-primary/20 px-1.5 py-px text-[11px] font-semibold tabular-nums text-primary group-data-[collapsible=icon]:hidden"
+                    class="ml-auto shrink-0 rounded-md bg-primary/20 px-1.5 py-px text-[10px] font-medium tabular-nums text-primary group-data-[collapsible=icon]:hidden"
                   >
                     {{ scanPct(lib.id) }}%
                   </span>
                   <span
                     v-else-if="lib.bookCount !== undefined"
-                    class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[11px] font-semibold tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
+                    class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[10px] font-medium tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
                   >
                     {{ lib.bookCount.toLocaleString() }}
                   </span>
-                </SidebarMenuButton>
-                <Transition name="scan-progress">
-                  <div v-if="getProgress(lib.id)?.status === 'running'" class="px-2 pb-1.5 group-data-[collapsible=icon]:hidden">
-                    <div class="h-0.5 w-full rounded-full bg-sidebar-foreground/10 overflow-hidden">
-                      <div
-                        class="h-full rounded-full bg-primary transition-all duration-300"
-                        :style="{
-                          width: getProgress(lib.id)!.total > 0 ? `${scanPct(lib.id)}%` : '30%',
-                          animation: getProgress(lib.id)!.total === 0 ? 'pulse 1.5s ease-in-out infinite' : 'none',
-                        }"
-                      />
+                </template>
+                <template #extra>
+                  <Transition name="scan-progress">
+                    <div v-if="getProgress(lib.id)?.status === 'running'" class="px-2 pb-1.5 group-data-[collapsible=icon]:hidden">
+                      <div class="h-0.5 w-full rounded-full bg-sidebar-foreground/10 overflow-hidden">
+                        <div
+                          class="h-full rounded-full bg-primary transition-all duration-300"
+                          :style="{
+                            width: getProgress(lib.id)!.total > 0 ? `${scanPct(lib.id)}%` : '30%',
+                            animation: getProgress(lib.id)!.total === 0 ? 'pulse 1.5s ease-in-out infinite' : 'none',
+                          }"
+                        />
+                      </div>
+                      <p class="mt-0.5 text-[10px] text-sidebar-foreground/45">
+                        {{ getProgress(lib.id)!.processed.toLocaleString() }} / {{ getProgress(lib.id)!.total.toLocaleString() }} books
+                      </p>
                     </div>
-                    <p class="mt-0.5 text-[10px] text-sidebar-foreground/45">
-                      {{ getProgress(lib.id)!.processed.toLocaleString() }} / {{ getProgress(lib.id)!.total.toLocaleString() }} books
-                    </p>
-                  </div>
-                </Transition>
-              </SidebarMenuItem>
+                  </Transition>
+                </template>
+              </SidebarNavItem>
             </SidebarMenu>
           </SidebarGroupContent>
         </div>
@@ -332,58 +255,36 @@ onMounted(async () => {
 
       <!-- Lenses -->
       <SidebarGroup class="py-2">
-        <div class="flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden">
-          <button class="group/hdr flex min-w-0 flex-1 items-center gap-1.5" @click="toggleLenses">
-            <span
-              class="text-[11px] font-bold uppercase tracking-[0.12em] text-sidebar-foreground/60 transition-colors group-hover/hdr:text-sidebar-foreground/90"
-              >Lenses</span
-            >
-            <span v-if="!lensesOpen && lenses.length > 0" class="text-[11px] font-medium text-sidebar-foreground/40"> ({{ lenses.length }}) </span>
-            <ChevronDown
-              :size="13"
-              :stroke-width="2.5"
-              class="ml-auto shrink-0 text-sidebar-foreground/40 transition-transform duration-200 group-hover/hdr:text-sidebar-foreground/70"
-              :class="lensesOpen ? 'rotate-0' : '-rotate-90'"
-            />
-          </button>
-          <button
-            class="ml-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/40 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
-            title="New Lens"
-            @click="createLensOpen = true"
-          >
-            <Plus :size="14" :stroke-width="2.5" />
-          </button>
-        </div>
+        <SidebarSectionHeader
+          label="Lenses"
+          :is-open="lensesOpen"
+          :collapsed-count="lenses.length"
+          :can-add="true"
+          add-title="New Lens"
+          @toggle="toggleLenses"
+          @add="createLensOpen = true"
+        />
         <div v-show="lensesOpen">
           <SidebarGroupContent>
             <SidebarMenu>
-              <SidebarMenuItem v-for="lens in lenses" :key="lens.id">
-                <SidebarMenuButton
-                  :is-active="activeLensId === lens.id"
-                  :tooltip="lens.name"
-                  class="relative h-9 gap-2.5 rounded-xl px-2 transition-[background-color,box-shadow] duration-200 before:absolute before:-left-1.5 before:top-1/2 before:h-5 before:w-[3px] before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:bg-primary before:opacity-0 before:transition-all before:duration-200 hover:bg-primary/8 data-[active=true]:bg-primary/15 data-[active=true]:shadow-[inset_0_0_0_1px_var(--sidebar-border)] data-[active=true]:before:scale-y-100 data-[active=true]:before:opacity-100 group/item group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
-                  @click="router.push({ name: 'lens', params: { id: lens.id } })"
-                >
-                  <span class="inline-flex h-[1.65rem] w-[1.65rem] shrink-0 items-center justify-center rounded-lg transition-colors">
-                    <component
-                      :is="getLensIcon(lens.icon)"
-                      :size="16"
-                      class="text-sidebar-foreground/70 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary"
-                    />
-                  </span>
+              <SidebarNavItem
+                v-for="lens in lenses"
+                :key="lens.id"
+                :is-active="activeLensId === lens.id"
+                :tooltip="lens.name"
+                :icon="resolveIcon(lens.icon, Aperture)"
+                :label="lens.name"
+                @click="router.push({ name: 'lens', params: { id: lens.id } })"
+              >
+                <template #badge>
                   <span
-                    class="text-[13.5px] font-semibold tracking-[0.005em] text-sidebar-foreground/80 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
-                  >
-                    {{ lens.name }}
-                  </span>
-                  <span
-                    v-if="lens.bookCount !== undefined"
-                    class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[11px] font-semibold tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
+                    v-if="lens.bookCount != null && lens.bookCount > 0"
+                    class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[10px] font-medium tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
                   >
                     {{ lens.bookCount.toLocaleString() }}
                   </span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
+                </template>
+              </SidebarNavItem>
               <SidebarMenuItem v-if="lenses.length === 0">
                 <span class="px-2 py-1 text-[11px] text-sidebar-foreground/35 group-data-[collapsible=icon]:hidden">No lenses yet</span>
               </SidebarMenuItem>
@@ -396,59 +297,36 @@ onMounted(async () => {
 
       <!-- Collections -->
       <SidebarGroup class="py-2">
-        <div class="flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden">
-          <button class="group/hdr flex min-w-0 flex-1 items-center gap-1.5" @click="toggleCollections">
-            <span
-              class="text-[11px] font-bold uppercase tracking-[0.12em] text-sidebar-foreground/60 transition-colors group-hover/hdr:text-sidebar-foreground/90"
-              >Collections</span
-            >
-            <span v-if="!collectionsOpen && collections.length > 0" class="text-[11px] font-medium text-sidebar-foreground/40">
-              ({{ collections.length }})
-            </span>
-            <ChevronDown
-              :size="13"
-              :stroke-width="2.5"
-              class="ml-auto shrink-0 text-sidebar-foreground/40 transition-transform duration-200 group-hover/hdr:text-sidebar-foreground/70"
-              :class="collectionsOpen ? 'rotate-0' : '-rotate-90'"
-            />
-          </button>
-          <button
-            class="ml-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/40 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
-            title="New Collection"
-            @click="createCollectionOpen = true"
-          >
-            <Plus :size="14" :stroke-width="2.5" />
-          </button>
-        </div>
+        <SidebarSectionHeader
+          label="Collections"
+          :is-open="collectionsOpen"
+          :collapsed-count="collections.length"
+          :can-add="true"
+          add-title="New Collection"
+          @toggle="toggleCollections"
+          @add="createCollectionOpen = true"
+        />
         <div v-show="collectionsOpen">
           <SidebarGroupContent>
             <SidebarMenu>
-              <SidebarMenuItem v-for="collection in collections" :key="collection.id">
-                <SidebarMenuButton
-                  :is-active="activeCollectionId === collection.id"
-                  :tooltip="collection.name"
-                  class="relative h-9 gap-2.5 rounded-xl px-2 transition-[background-color,box-shadow] duration-200 before:absolute before:-left-1.5 before:top-1/2 before:h-5 before:w-[3px] before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:bg-primary before:opacity-0 before:transition-all before:duration-200 hover:bg-primary/8 data-[active=true]:bg-primary/15 data-[active=true]:shadow-[inset_0_0_0_1px_var(--sidebar-border)] data-[active=true]:before:scale-y-100 data-[active=true]:before:opacity-100 group/item group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
-                  @click="router.push({ name: 'collection', params: { id: collection.id } })"
-                >
-                  <span class="inline-flex h-[1.65rem] w-[1.65rem] shrink-0 items-center justify-center rounded-lg transition-colors">
-                    <component
-                      :is="getCollectionIcon(collection.icon)"
-                      :size="16"
-                      class="text-sidebar-foreground/70 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary"
-                    />
-                  </span>
+              <SidebarNavItem
+                v-for="collection in collections"
+                :key="collection.id"
+                :is-active="activeCollectionId === collection.id"
+                :tooltip="collection.name"
+                :icon="resolveIcon(collection.icon, FolderOpen)"
+                :label="collection.name"
+                @click="router.push({ name: 'collection', params: { id: collection.id } })"
+              >
+                <template #badge>
                   <span
-                    class="text-[13.5px] font-semibold tracking-[0.005em] text-sidebar-foreground/80 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
-                  >
-                    {{ collection.name }}
-                  </span>
-                  <span
-                    class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[11px] font-semibold tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
+                    v-if="collection.bookCount > 0"
+                    class="ml-auto shrink-0 rounded-md bg-sidebar-foreground/10 px-1.5 py-px text-[10px] font-medium tabular-nums text-sidebar-foreground/60 transition-colors group-data-[active=true]/item:bg-primary/20 group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
                   >
                     {{ collection.bookCount.toLocaleString() }}
                   </span>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
+                </template>
+              </SidebarNavItem>
               <SidebarMenuItem v-if="collections.length === 0">
                 <span class="px-2 py-1 text-[11px] text-sidebar-foreground/35 group-data-[collapsible=icon]:hidden">No collections yet</span>
               </SidebarMenuItem>
diff --git a/client/src/components/sidebar/SidebarNavItem.vue b/client/src/components/sidebar/SidebarNavItem.vue
new file mode 100644
index 000000000..2bea180bf
--- /dev/null
+++ b/client/src/components/sidebar/SidebarNavItem.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
+
+withDefaults(
+  defineProps<{
+    isActive: boolean
+    tooltip: string
+    icon: Component
+    iconSize?: number
+    iconClass?: string
+    label: string
+  }>(),
+  { iconSize: 16, iconClass: '' },
+)
+
+const emit = defineEmits<{ click: [] }>()
+</script>
+
+<template>
+  <SidebarMenuItem>
+    <SidebarMenuButton
+      :is-active="isActive"
+      :tooltip="tooltip"
+      class="relative h-9 gap-2.5 rounded-xl px-2 transition-[background-color,box-shadow,transform] duration-200 before:absolute before:-left-1.5 before:top-1/2 before:h-5 before:w-[3px] before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:bg-primary before:opacity-0 before:transition-all before:duration-200 hover:translate-x-0.5 hover:bg-primary/8 data-[active=true]:translate-x-0 data-[active=true]:bg-primary/15 data-[active=true]:shadow-[inset_0_0_0_1px_var(--sidebar-border)] data-[active=true]:before:scale-y-100 data-[active=true]:before:opacity-100 group/item group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-1.5"
+      @click="emit('click')"
+    >
+      <span class="inline-flex h-[1.65rem] w-[1.65rem] shrink-0 items-center justify-center rounded-lg transition-colors">
+        <component
+          :is="icon"
+          :size="iconSize"
+          class="text-sidebar-foreground/70 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary"
+          :class="iconClass"
+        />
+      </span>
+      <span
+        class="text-sm font-medium tracking-tight text-sidebar-foreground/90 transition-colors group-hover/item:text-sidebar-foreground group-data-[active=true]/item:text-primary group-data-[collapsible=icon]:hidden"
+      >
+        {{ label }}
+      </span>
+      <slot name="badge" />
+    </SidebarMenuButton>
+    <slot name="extra" />
+  </SidebarMenuItem>
+</template>
diff --git a/client/src/components/sidebar/SidebarSectionHeader.vue b/client/src/components/sidebar/SidebarSectionHeader.vue
new file mode 100644
index 000000000..e97a45c73
--- /dev/null
+++ b/client/src/components/sidebar/SidebarSectionHeader.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ChevronDown, Plus } from 'lucide-vue-next'
+
+defineProps<{
+  label: string
+  isOpen: boolean
+  collapsedCount?: number
+  canAdd?: boolean
+  addTitle?: string
+}>()
+
+const emit = defineEmits<{ toggle: []; add: [] }>()
+</script>
+
+<template>
+  <div class="flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden">
+    <button class="group/hdr flex min-w-0 flex-1 items-center gap-1.5" @click="emit('toggle')">
+      <span
+        class="text-[10px] font-medium uppercase tracking-[0.18em] text-sidebar-foreground/45 transition-colors group-hover/hdr:text-sidebar-foreground/80"
+      >
+        {{ label }}
+      </span>
+      <span v-if="!isOpen && collapsedCount && collapsedCount > 0" class="text-[10px] font-medium text-sidebar-foreground/30">
+        {{ collapsedCount }}
+      </span>
+      <ChevronDown
+        :size="12"
+        :stroke-width="3"
+        class="ml-auto shrink-0 text-sidebar-foreground/30 transition-transform duration-200 group-hover/hdr:text-sidebar-foreground/60"
+        :class="isOpen ? 'rotate-0' : '-rotate-90'"
+      />
+    </button>
+    <button
+      v-if="canAdd"
+      class="ml-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/40 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+      :title="addTitle"
+      @click="emit('add')"
+    >
+      <Plus :size="14" :stroke-width="2.5" />
+    </button>
+  </div>
+</template>
diff --git a/client/src/components/ui/ToggleSwitch.vue b/client/src/components/ui/ToggleSwitch.vue
new file mode 100644
index 000000000..03c7919e8
--- /dev/null
+++ b/client/src/components/ui/ToggleSwitch.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{ modelValue: boolean; disabled?: boolean }>()
+defineEmits<{ 'update:modelValue': [value: boolean] }>()
+</script>
+
+<template>
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="modelValue"
+    class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+    :class="modelValue ? 'bg-primary' : 'bg-muted'"
+    :disabled="disabled"
+    @click="$emit('update:modelValue', !modelValue)"
+  >
+    <span
+      class="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
+      :class="modelValue ? 'translate-x-4' : 'translate-x-0'"
+    />
+  </button>
+</template>
diff --git a/client/src/features/admin/UsersPage.vue b/client/src/features/admin/UsersPage.vue
index d1b7e9c67..a24f6eb61 100644
--- a/client/src/features/admin/UsersPage.vue
+++ b/client/src/features/admin/UsersPage.vue
@@ -7,6 +7,7 @@ import { usePermissions } from '@/features/auth/composables/usePermissions'
 import UserFormDrawer from './UserFormDrawer.vue'
 import ResetLinkModal from './ResetLinkModal.vue'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import SettingsPageHeader from '@/features/settings/SettingsPageHeader.vue'
 
 interface Library {
   id: number
@@ -86,19 +87,12 @@ function onSaved(newResetUrl?: string) {
 </script>
 
 <template>
-  <div class="flex items-start justify-between mb-8">
-    <div>
-      <h2 class="settings-title">Users</h2>
-      <p class="settings-subtitle">Manage user accounts and permission assignments.</p>
-    </div>
-    <button
-      @click="openCreate"
-      class="flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors shrink-0 ml-4"
-    >
+  <SettingsPageHeader title="Users" subtitle="Manage user accounts and permission assignments.">
+    <button class="settings-btn-primary" @click="openCreate">
       <UserPlus :size="14" />
       Create user
     </button>
-  </div>
+  </SettingsPageHeader>
 
   <div v-if="error" class="mb-4 text-sm text-destructive">{{ error }}</div>
   <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
diff --git a/client/src/features/author/views/AuthorDetailView.vue b/client/src/features/author/views/AuthorDetailView.vue
index 811fa3755..b62f3e856 100644
--- a/client/src/features/author/views/AuthorDetailView.vue
+++ b/client/src/features/author/views/AuthorDetailView.vue
@@ -95,6 +95,16 @@ function goBack() {
   void router.push({ name: 'authors' })
 }
 
+function toggleEdit() {
+  editOpen.value = !editOpen.value
+  if (editOpen.value) mergeOpen.value = false
+}
+
+function toggleMerge() {
+  mergeOpen.value = !mergeOpen.value
+  if (mergeOpen.value) editOpen.value = false
+}
+
 function handleBookAction(book: BookCard, action: 'quick-view' | 'edit-metadata' | 'add-to-collection' | 'delete') {
   if (action === 'quick-view') {
     void router.push({ name: 'book-detail', params: { bookId: book.id } })
@@ -308,14 +318,8 @@ watch(authorName, () => {
       :can-update="canUpdate"
       :can-merge="canMerge"
       :refreshing="refreshingMetadata"
-      @edit="
-        editOpen = !editOpen
-        if (editOpen) mergeOpen = false
-      "
-      @merge="
-        mergeOpen = !mergeOpen
-        if (mergeOpen) editOpen = false
-      "
+      @edit="toggleEdit"
+      @merge="toggleMerge"
       @refresh="refreshMetadata"
     />
 
diff --git a/client/src/features/email/components/EmailSettings.vue b/client/src/features/email/components/EmailSettings.vue
index 4ef983451..d217d8563 100644
--- a/client/src/features/email/components/EmailSettings.vue
+++ b/client/src/features/email/components/EmailSettings.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import ProvidersTab from './ProvidersTab.vue'
+import SettingsPageHeader from '@/features/settings/SettingsPageHeader.vue'
 import RecipientsTab from './RecipientsTab.vue'
 import GroupsTab from './GroupsTab.vue'
 import TemplatesTab from './TemplatesTab.vue'
@@ -43,36 +44,33 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div class="mb-6">
-      <h2 class="settings-title">Email</h2>
-      <p class="settings-subtitle">Send books to your e-reader via email.</p>
+  <SettingsPageHeader title="Email" subtitle="Send books to your e-reader via email." />
+
+  <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
+  <div v-else-if="error" class="text-sm text-destructive">{{ error }}</div>
+  <template v-else>
+    <!-- Tab bar -->
+    <div class="flex gap-1 mb-6 border-b border-border overflow-x-auto">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        class="px-3 py-2 text-sm font-medium shrink-0 border-b-2 -mb-px transition-colors"
+        :class="
+          activeTab === tab.id
+            ? 'border-primary text-foreground'
+            : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+        "
+        @click="activeTab = tab.id"
+      >
+        {{ tab.label }}
+      </button>
     </div>
 
-    <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
-    <div v-else-if="error" class="text-sm text-destructive">{{ error }}</div>
-    <template v-else>
-      <!-- Tab bar -->
-      <div class="flex gap-1 mb-6 border-b border-border overflow-x-auto">
-        <button
-          v-for="tab in tabs"
-          :key="tab.id"
-          class="px-3 py-2 text-sm font-medium shrink-0 border-b-2 -mb-px transition-colors"
-          :class="
-            activeTab === tab.id
-              ? 'border-primary text-foreground'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
-          "
-          @click="activeTab = tab.id"
-        >
-          {{ tab.label }}
-        </button>
-      </div>
-
-      <ProvidersTab v-if="activeTab === 'providers'" />
-      <RecipientsTab v-else-if="activeTab === 'recipients'" />
-      <GroupsTab v-else-if="activeTab === 'groups'" />
-      <TemplatesTab v-else-if="activeTab === 'templates'" />
-      <PreferencesTab v-else-if="activeTab === 'preferences'" />
-      <HistoryTab v-else-if="activeTab === 'history'" />
-    </template>
+    <ProvidersTab v-if="activeTab === 'providers'" />
+    <RecipientsTab v-else-if="activeTab === 'recipients'" />
+    <GroupsTab v-else-if="activeTab === 'groups'" />
+    <TemplatesTab v-else-if="activeTab === 'templates'" />
+    <PreferencesTab v-else-if="activeTab === 'preferences'" />
+    <HistoryTab v-else-if="activeTab === 'history'" />
+  </template>
 </template>
diff --git a/client/src/features/library/components/LibraryCreatorDetails.vue b/client/src/features/library/components/LibraryCreatorDetails.vue
index ac6088a89..3aef6f57f 100644
--- a/client/src/features/library/components/LibraryCreatorDetails.vue
+++ b/client/src/features/library/components/LibraryCreatorDetails.vue
@@ -59,8 +59,8 @@ const selectedIconComponent = computed(() => (props.icon ? (LucideIcons as Recor
       <label class="block text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Library name</label>
       <div class="flex items-center gap-3">
         <!-- Icon preview -->
-        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-          <component :is="selectedIconComponent" :size="18" class="text-primary" />
+        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/20">
+          <component :is="selectedIconComponent" :size="24" class="text-primary" />
         </div>
         <!-- Name input -->
         <input
@@ -90,7 +90,7 @@ const selectedIconComponent = computed(() => (props.icon ? (LucideIcons as Recor
       <div class="flex flex-col rounded-lg border border-border bg-card overflow-hidden flex-1 min-h-0">
         <!-- Search -->
         <div class="flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
-          <Search :size="13" class="text-muted-foreground shrink-0" />
+          <Search :size="13" class="text-foreground/60 shrink-0" />
           <input
             v-model="search"
             type="text"
@@ -111,10 +111,10 @@ const selectedIconComponent = computed(() => (props.icon ? (LucideIcons as Recor
                   <button
                     class="flex items-center justify-center rounded-md transition-colors"
                     style="width: calc(100% / 10); aspect-ratio: 1"
-                    :class="icon === iconName ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'"
+                    :class="icon === iconName ? 'bg-primary text-primary-foreground' : 'text-foreground/60 hover:bg-muted hover:text-foreground'"
                     @click="emit('update:icon', icon === iconName ? null : iconName)"
                   >
-                    <component :is="getIconComponent(iconName)" :size="16" />
+                    <component :is="getIconComponent(iconName)" :size="17" />
                   </button>
                 </TooltipTrigger>
                 <TooltipContent>{{ iconName }}</TooltipContent>
diff --git a/client/src/features/library/components/LibraryCreatorFolders.vue b/client/src/features/library/components/LibraryCreatorFolders.vue
index 48c9be92e..28f8d4b91 100644
--- a/client/src/features/library/components/LibraryCreatorFolders.vue
+++ b/client/src/features/library/components/LibraryCreatorFolders.vue
@@ -141,9 +141,9 @@ function onManualKeydown(e: KeyboardEvent) {
       <!-- Folder list -->
       <div class="mt-4 space-y-2">
         <div v-for="(folder, index) in folders" :key="folder" class="rounded-lg border border-border bg-card px-4 py-3">
-          <div class="flex items-start gap-3">
+          <div class="flex items-center gap-3">
             <FolderOpen :size="15" class="text-muted-foreground shrink-0 mt-0.5" />
-            <span class="flex-1 text-sm text-foreground font-mono break-all">{{ folder }}</span>
+            <span class="flex-1 text-xs text-foreground font-mono break-all">{{ folder }}</span>
             <button
               class="p-1 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors shrink-0"
               @click="removeFolder(index)"
diff --git a/client/src/features/reader/components/PdfSettingsPanel.vue b/client/src/features/reader/components/PdfSettingsPanel.vue
index 30382c8c6..5e9a5ba3c 100644
--- a/client/src/features/reader/components/PdfSettingsPanel.vue
+++ b/client/src/features/reader/components/PdfSettingsPanel.vue
@@ -8,7 +8,7 @@ defineProps<{
   customScale: number
   zoomLabel: string
   spread: 'none' | 'odd' | 'even'
-  scrollMode: 'continuous' | 'page'
+  scrollMode: 'vertical' | 'page'
   rotation: 0 | 90 | 180 | 270
 }>()
 
@@ -16,7 +16,7 @@ const emit = defineEmits<{
   close: []
   applyZoomPreset: [value: string]
   'update:spread': [v: 'none' | 'odd' | 'even']
-  'update:scrollMode': [v: 'continuous' | 'page']
+  'update:scrollMode': [v: 'vertical' | 'page']
   rotate: []
 }>()
 
@@ -106,13 +106,13 @@ const activeTab = ref<Tab>('zoom')
               <button
                 class="py-2.5 rounded-xl text-sm font-medium border-2 transition-colors"
                 :class="
-                  scrollMode === 'continuous'
+                  scrollMode === 'vertical'
                     ? 'bg-primary text-primary-foreground border-primary'
                     : 'border-border hover:border-muted-foreground/40 hover:bg-muted text-foreground'
                 "
-                @click="emit('update:scrollMode', 'continuous')"
+                @click="emit('update:scrollMode', 'vertical')"
               >
-                Continuous
+                Scrolled
               </button>
               <button
                 class="py-2.5 rounded-xl text-sm font-medium border-2 transition-colors"
diff --git a/client/src/features/settings/AboutSettings.vue b/client/src/features/settings/AboutSettings.vue
index 7c613756d..688a0aa6d 100644
--- a/client/src/features/settings/AboutSettings.vue
+++ b/client/src/features/settings/AboutSettings.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { BookOpen, Database, Github, Server } from 'lucide-vue-next'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const stack = [
   { label: 'Frontend', value: 'Vue 3 + TypeScript + Tailwind CSS v4' },
@@ -11,75 +12,72 @@ const stack = [
 </script>
 
 <template>
-    <div class="mb-8">
-      <h2 class="settings-title">About</h2>
-      <p class="settings-subtitle">Information about this application.</p>
-    </div>
+  <SettingsPageHeader title="About" subtitle="Information about this application." />
 
-    <!-- App identity -->
-    <div class="mb-6">
-      <div class="border border-border rounded-lg bg-card px-5 py-5 flex items-start gap-4">
-        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10">
-          <BookOpen :size="22" class="text-primary" />
-        </div>
+  <!-- App identity -->
+  <div class="mb-6">
+    <div class="border border-border rounded-lg bg-card px-5 py-5 flex items-start gap-4">
+      <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10">
+        <BookOpen :size="22" class="text-primary" />
+      </div>
+      <div>
+        <p class="text-base font-semibold text-foreground font-serif">projectx</p>
+        <p class="settings-hint">Version 0.1.0 (early development)</p>
+        <p class="text-xs text-muted-foreground mt-2 leading-relaxed max-w-lg">
+          A self-hosted book and library management application with support for EPUB, PDF, and comic formats.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tech stack -->
+  <div class="mb-6">
+    <p class="settings-group-label">Tech Stack</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <div v-for="item in stack" :key="item.label" class="flex items-center justify-between px-5 py-3.5 bg-card">
+        <p class="text-sm text-muted-foreground">{{ item.label }}</p>
+        <p class="settings-label">{{ item.value }}</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Server info -->
+  <div class="mb-6">
+    <p class="settings-group-label">Server</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <div class="flex items-center gap-3 px-5 py-4 bg-card">
+        <Server :size="15" class="text-muted-foreground shrink-0" />
         <div>
-          <p class="text-base font-semibold text-foreground font-serif">projectx</p>
-          <p class="settings-hint">Version 0.1.0 (early development)</p>
-          <p class="text-xs text-muted-foreground mt-2 leading-relaxed max-w-lg">
-            A self-hosted book and library management application with support for EPUB, PDF, and comic formats.
-          </p>
+          <p class="settings-label">API</p>
+          <p class="text-xs text-muted-foreground font-mono mt-0.5">/api</p>
+        </div>
+      </div>
+      <div class="flex items-center gap-3 px-5 py-4 bg-card">
+        <Database :size="15" class="text-muted-foreground shrink-0" />
+        <div>
+          <p class="settings-label">Database</p>
+          <p class="settings-hint">PostgreSQL</p>
         </div>
       </div>
     </div>
+  </div>
 
-    <!-- Tech stack -->
-    <div class="mb-6">
-      <p class="settings-group-label">Tech Stack</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <div v-for="item in stack" :key="item.label" class="flex items-center justify-between px-5 py-3.5 bg-card">
-          <p class="text-sm text-muted-foreground">{{ item.label }}</p>
-          <p class="settings-label">{{ item.value }}</p>
+  <!-- Links -->
+  <div>
+    <p class="settings-group-label">Links</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <a
+        href="https://github.com/neonsolstice/projectx"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="flex items-center gap-3 px-5 py-4 bg-card hover:bg-muted/50 transition-colors group"
+      >
+        <Github :size="15" class="text-muted-foreground shrink-0" />
+        <div class="flex-1">
+          <p class="settings-label group-hover:text-primary transition-colors">GitHub</p>
+          <p class="settings-hint">Source code and issue tracker</p>
         </div>
-      </div>
-    </div>
-
-    <!-- Server info -->
-    <div class="mb-6">
-      <p class="settings-group-label">Server</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <div class="flex items-center gap-3 px-5 py-4 bg-card">
-          <Server :size="15" class="text-muted-foreground shrink-0" />
-          <div>
-            <p class="settings-label">API</p>
-            <p class="text-xs text-muted-foreground font-mono mt-0.5">/api</p>
-          </div>
-        </div>
-        <div class="flex items-center gap-3 px-5 py-4 bg-card">
-          <Database :size="15" class="text-muted-foreground shrink-0" />
-          <div>
-            <p class="settings-label">Database</p>
-            <p class="settings-hint">PostgreSQL</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Links -->
-    <div>
-      <p class="settings-group-label">Links</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <a
-          href="https://github.com/neonsolstice/projectx"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="flex items-center gap-3 px-5 py-4 bg-card hover:bg-muted/50 transition-colors group"
-        >
-          <Github :size="15" class="text-muted-foreground shrink-0" />
-          <div class="flex-1">
-            <p class="settings-label group-hover:text-primary transition-colors">GitHub</p>
-            <p class="settings-hint">Source code and issue tracker</p>
-          </div>
-        </a>
-      </div>
+      </a>
     </div>
+  </div>
 </template>
diff --git a/client/src/features/settings/AppearanceSettings.vue b/client/src/features/settings/AppearanceSettings.vue
index 9e8ead054..610a14039 100644
--- a/client/src/features/settings/AppearanceSettings.vue
+++ b/client/src/features/settings/AppearanceSettings.vue
@@ -3,6 +3,8 @@ import { ACCENT_VIVID, ACCENT_PASTEL, BACKGROUND_OPTIONS, RADIUS_OPTIONS, useThe
 import { Moon, Sun } from 'lucide-vue-next'
 import { useDisplaySettings, type CardOverlayKey } from '@/composables/useDisplaySettings'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const themeStore = useThemeStore()
 const { coverSize, gridGap, cardOverlays, lensFilterExpanded } = useDisplaySettings()
@@ -24,10 +26,7 @@ function toggleOverlay(key: CardOverlayKey) {
 </script>
 
 <template>
-  <div class="mb-8">
-    <h2 class="settings-title">Appearance</h2>
-    <p class="settings-subtitle">Customize how the app looks and feels.</p>
-  </div>
+  <SettingsPageHeader title="Appearance" subtitle="Customize how the app looks and feels." />
 
   <!-- Theme & colors -->
   <div class="mb-6">
@@ -241,22 +240,12 @@ function toggleOverlay(key: CardOverlayKey) {
     <!-- Card overlays -->
     <p class="settings-group-label mt-6">Card Overlays</p>
     <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-      <div
-        v-for="opt in OVERLAY_OPTIONS"
-        :key="opt.key"
-        class="flex items-center justify-between px-5 py-3.5 bg-card cursor-pointer"
-        @click="toggleOverlay(opt.key)"
-      >
+      <div v-for="opt in OVERLAY_OPTIONS" :key="opt.key" class="flex items-center justify-between px-5 py-3.5 bg-card">
         <div>
           <p class="settings-label">{{ opt.label }}</p>
           <p class="settings-hint">{{ opt.hint }}</p>
         </div>
-        <div class="w-9 h-5 rounded-full transition-colors shrink-0" :class="cardOverlays.includes(opt.key) ? 'bg-primary' : 'bg-muted'">
-          <div
-            class="mt-0.5 size-4 rounded-full bg-white shadow-sm transition-transform"
-            :class="cardOverlays.includes(opt.key) ? 'translate-x-4' : 'translate-x-0.5'"
-          />
-        </div>
+        <ToggleSwitch :model-value="cardOverlays.includes(opt.key)" @update:model-value="toggleOverlay(opt.key)" />
       </div>
     </div>
   </div>
@@ -265,17 +254,12 @@ function toggleOverlay(key: CardOverlayKey) {
   <div class="mt-8">
     <p class="settings-group-label">Lenses</p>
     <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-      <div class="flex items-center justify-between px-5 py-3.5 bg-card cursor-pointer" @click="lensFilterExpanded = !lensFilterExpanded">
+      <div class="flex items-center justify-between px-5 py-3.5 bg-card">
         <div>
           <p class="settings-label">Show filter preview by default</p>
           <p class="settings-hint">Expand the active filter and sort summary when opening a lens</p>
         </div>
-        <div class="w-9 h-5 rounded-full transition-colors shrink-0" :class="lensFilterExpanded ? 'bg-primary' : 'bg-muted'">
-          <div
-            class="mt-0.5 size-4 rounded-full bg-white shadow-sm transition-transform"
-            :class="lensFilterExpanded ? 'translate-x-4' : 'translate-x-0.5'"
-          />
-        </div>
+        <ToggleSwitch v-model="lensFilterExpanded" />
       </div>
     </div>
   </div>
diff --git a/client/src/features/settings/ComicsSettings.vue b/client/src/features/settings/ComicsSettings.vue
index 6d2cc8636..b69426c19 100644
--- a/client/src/features/settings/ComicsSettings.vue
+++ b/client/src/features/settings/ComicsSettings.vue
@@ -2,6 +2,7 @@
 import { onMounted } from 'vue'
 import type { CbxReaderSettings } from '@projectx/types'
 import { useReaderDefaultSettings } from '@/features/reader/composables/useReaderSettings'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const { effective, load, update, reset } = useReaderDefaultSettings<CbxReaderSettings>('cbx')
 
@@ -9,163 +10,155 @@ onMounted(load)
 </script>
 
 <template>
-    <div class="mb-8 flex items-start justify-between gap-4">
-      <div>
-        <h2 class="settings-title">Comics Reader</h2>
-        <p class="settings-subtitle">Default settings applied when opening CBZ, CBR, and CB7 files.</p>
+  <SettingsPageHeader title="Comics Reader" subtitle="Default settings applied when opening CBZ, CBR, and CB7 files.">
+    <button class="text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2" @click="reset()">
+      Reset to defaults
+    </button>
+  </SettingsPageHeader>
+
+  <!-- View -->
+  <div class="mb-6">
+    <p class="settings-group-label">View</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <!-- Scroll mode -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Reading mode</p>
+          <p class="settings-hint">How pages are navigated</p>
+        </div>
+        <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.scrollMode === 'paginated' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ scrollMode: 'paginated' })"
+          >
+            Paginated
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.scrollMode === 'infinite' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ scrollMode: 'infinite' })"
+          >
+            Infinite
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.scrollMode === 'long-strip' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ scrollMode: 'long-strip' })"
+          >
+            Long strip
+          </button>
+        </div>
       </div>
-      <button class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2" @click="reset()">
-        Reset to defaults
-      </button>
-    </div>
 
-    <!-- View -->
-    <div class="mb-6">
-      <p class="settings-group-label">View</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <!-- Scroll mode -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Reading mode</p>
-            <p class="settings-hint">How pages are navigated</p>
-          </div>
-          <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="
-                effective.scrollMode === 'paginated' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'
-              "
-              @click="update({ scrollMode: 'paginated' })"
-            >
-              Paginated
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.scrollMode === 'infinite' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ scrollMode: 'infinite' })"
-            >
-              Infinite
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="
-                effective.scrollMode === 'long-strip' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'
-              "
-              @click="update({ scrollMode: 'long-strip' })"
-            >
-              Long strip
-            </button>
-          </div>
+      <!-- View mode -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Page view</p>
+          <p class="settings-hint">Show one or two pages side by side</p>
         </div>
-
-        <!-- View mode -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Page view</p>
-            <p class="settings-hint">Show one or two pages side by side</p>
-          </div>
-          <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.viewMode === 'single' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ viewMode: 'single' })"
-            >
-              Single
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.viewMode === 'two-page' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ viewMode: 'two-page' })"
-            >
-              Two-page
-            </button>
-          </div>
+        <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.viewMode === 'single' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ viewMode: 'single' })"
+          >
+            Single
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.viewMode === 'two-page' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ viewMode: 'two-page' })"
+          >
+            Two-page
+          </button>
         </div>
+      </div>
 
-        <!-- Fit mode -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Fit mode</p>
-            <p class="settings-hint">How pages are scaled to fit the screen</p>
-          </div>
-          <div class="flex flex-wrap justify-end gap-1.5">
-            <button
-              v-for="opt in [
-                { id: 'fit-page' as const, label: 'Page' },
-                { id: 'fit-width' as const, label: 'Width' },
-                { id: 'fit-height' as const, label: 'Height' },
-                { id: 'actual' as const, label: 'Actual' },
-              ]"
-              :key="opt.id"
-              class="h-7 px-3 text-xs border-2 transition-colors font-medium rounded-md"
-              :class="
-                effective.fitMode === opt.id
-                  ? 'border-primary text-primary bg-primary/8'
-                  : 'border-border text-muted-foreground hover:border-muted-foreground/40 hover:text-foreground'
-              "
-              @click="update({ fitMode: opt.id })"
-            >
-              {{ opt.label }}
-            </button>
-          </div>
+      <!-- Fit mode -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Fit mode</p>
+          <p class="settings-hint">How pages are scaled to fit the screen</p>
         </div>
+        <div class="flex flex-wrap justify-end gap-1.5">
+          <button
+            v-for="opt in [
+              { id: 'fit-page' as const, label: 'Page' },
+              { id: 'fit-width' as const, label: 'Width' },
+              { id: 'fit-height' as const, label: 'Height' },
+              { id: 'actual' as const, label: 'Actual' },
+            ]"
+            :key="opt.id"
+            class="h-7 px-3 text-xs border-2 transition-colors font-medium rounded-md"
+            :class="
+              effective.fitMode === opt.id
+                ? 'border-primary text-primary bg-primary/8'
+                : 'border-border text-muted-foreground hover:border-muted-foreground/40 hover:text-foreground'
+            "
+            @click="update({ fitMode: opt.id })"
+          >
+            {{ opt.label }}
+          </button>
+        </div>
+      </div>
 
-        <!-- Reading direction -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Reading direction</p>
-            <p class="settings-hint">Left-to-right for western comics; right-to-left for manga</p>
-          </div>
-          <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.direction === 'ltr' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ direction: 'ltr' })"
-            >
-              L to R
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.direction === 'rtl' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ direction: 'rtl' })"
-            >
-              R to L
-            </button>
-          </div>
+      <!-- Reading direction -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Reading direction</p>
+          <p class="settings-hint">Left-to-right for western comics; right-to-left for manga</p>
+        </div>
+        <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.direction === 'ltr' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ direction: 'ltr' })"
+          >
+            L to R
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.direction === 'rtl' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ direction: 'rtl' })"
+          >
+            R to L
+          </button>
         </div>
       </div>
     </div>
+  </div>
 
-    <!-- Display -->
-    <div class="mb-6">
-      <p class="settings-group-label">Display</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <!-- Background color -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Background color</p>
-            <p class="settings-hint">Canvas color behind pages</p>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <button
-              v-for="opt in [
-                { id: 'black' as const, label: 'Black' },
-                { id: 'gray' as const, label: 'Gray' },
-                { id: 'white' as const, label: 'White' },
-              ]"
-              :key="opt.id"
-              class="h-7 px-3 text-xs border-2 transition-colors font-medium rounded-md"
-              :class="
-                effective.bgColor === opt.id
-                  ? 'border-primary text-primary bg-primary/8'
-                  : 'border-border text-muted-foreground hover:border-muted-foreground/40 hover:text-foreground'
-              "
-              @click="update({ bgColor: opt.id })"
-            >
-              {{ opt.label }}
-            </button>
-          </div>
+  <!-- Display -->
+  <div class="mb-6">
+    <p class="settings-group-label">Display</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <!-- Background color -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Background color</p>
+          <p class="settings-hint">Canvas color behind pages</p>
+        </div>
+        <div class="flex items-center gap-1.5">
+          <button
+            v-for="opt in [
+              { id: 'black' as const, label: 'Black' },
+              { id: 'gray' as const, label: 'Gray' },
+              { id: 'white' as const, label: 'White' },
+            ]"
+            :key="opt.id"
+            class="h-7 px-3 text-xs border-2 transition-colors font-medium rounded-md"
+            :class="
+              effective.bgColor === opt.id
+                ? 'border-primary text-primary bg-primary/8'
+                : 'border-border text-muted-foreground hover:border-muted-foreground/40 hover:text-foreground'
+            "
+            @click="update({ bgColor: opt.id })"
+          >
+            {{ opt.label }}
+          </button>
         </div>
       </div>
     </div>
+  </div>
 </template>
diff --git a/client/src/features/settings/EbookSettings.vue b/client/src/features/settings/EbookSettings.vue
index 6197afc8b..e77996323 100644
--- a/client/src/features/settings/EbookSettings.vue
+++ b/client/src/features/settings/EbookSettings.vue
@@ -3,6 +3,9 @@ import { onMounted } from 'vue'
 import type { EpubReaderSettings } from '@projectx/types'
 import { useReaderDefaultSettings } from '@/features/reader/composables/useReaderSettings'
 import { themes } from '@/features/reader/constants/themes'
+import { Check } from 'lucide-vue-next'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const { effective, load, update, reset } = useReaderDefaultSettings<EpubReaderSettings>('epub')
 
@@ -14,284 +17,280 @@ const fontFamilies: { id: string | null; label: string }[] = [
   { id: 'sans-serif', label: 'Sans-serif' },
   { id: 'monospace', label: 'Monospace' },
   { id: 'Georgia, serif', label: 'Georgia' },
-  { id: 'Palatino Linotype, serif', label: 'Palatino' },
-  { id: 'Bookerly, serif', label: 'Bookerly' },
+  { id: 'Palatino Linotype, Palatino, Book Antiqua, serif', label: 'Palatino' },
 ]
 </script>
 
 <template>
-    <div class="mb-8 flex items-start justify-between gap-4">
-      <div>
-        <h2 class="settings-title">eBook Reader</h2>
-        <p class="settings-subtitle">Default settings applied when opening EPUB, MOBI, FB2, and TXT files.</p>
-      </div>
-      <button class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2" @click="reset()">
-        Reset to defaults
-      </button>
-    </div>
+  <SettingsPageHeader title="eBook Reader" subtitle="Default settings applied when opening EPUB, MOBI, FB2, and TXT files.">
+    <button class="text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2" @click="reset()">
+      Reset to defaults
+    </button>
+  </SettingsPageHeader>
 
-    <!-- Formatting source -->
-    <div class="mb-6">
-      <p class="settings-group-label">New Books</p>
-      <div class="border border-border rounded-lg overflow-hidden bg-card">
-        <div class="flex items-start justify-between px-5 py-4 gap-4">
-          <div>
-            <p class="settings-label">Apply my settings to new books</p>
-            <p class="settings-hint">
-              When off, new books open with the publisher's own fonts and layout. Your settings only apply once you change something in-reader.
-            </p>
-          </div>
+  <!-- Formatting source -->
+  <div class="mb-6">
+    <p class="settings-group-label">New Books</p>
+    <div class="border border-border rounded-lg overflow-hidden bg-card">
+      <div class="flex items-start justify-between px-5 py-4 gap-4">
+        <div>
+          <p class="settings-label">Apply my settings to new books</p>
+          <p class="settings-hint">
+            When off, new books open with the publisher's own fonts and layout. Your settings only apply once you change something in-reader.
+          </p>
+        </div>
+        <ToggleSwitch
+          class="mt-0.5"
+          :model-value="effective.overrideBookFormatting"
+          @update:model-value="update({ overrideBookFormatting: $event })"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Layout -->
+  <div class="mb-6">
+    <p class="settings-group-label">Layout</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <!-- Flow -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Reading flow</p>
+          <p class="settings-hint">Paginated flips pages; scrolled flows continuously</p>
+        </div>
+        <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
           <button
-            class="w-11 h-6 rounded-full transition-colors relative shrink-0 mt-0.5"
-            :class="effective.overrideBookFormatting ? 'bg-primary' : 'bg-muted'"
-            @click="update({ overrideBookFormatting: !effective.overrideBookFormatting })"
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.flow === 'paginated' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ flow: 'paginated' })"
           >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="effective.overrideBookFormatting ? 'translate-x-6' : 'translate-x-1'"
-            />
+            Paginated
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.flow === 'scrolled' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ flow: 'scrolled' })"
+          >
+            Scrolled
           </button>
         </div>
       </div>
-    </div>
 
-    <!-- Layout -->
-    <div class="mb-6">
-      <p class="settings-group-label">Layout</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <!-- Flow -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
+      <!-- Columns -->
+      <div class="px-5 py-4 bg-card">
+        <div class="flex items-center justify-between mb-3">
           <div>
-            <p class="settings-label">Reading flow</p>
-            <p class="settings-hint">Paginated flips pages; scrolled flows continuously</p>
-          </div>
-          <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.flow === 'paginated' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ flow: 'paginated' })"
-            >
-              Paginated
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.flow === 'scrolled' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ flow: 'scrolled' })"
-            >
-              Scrolled
-            </button>
+            <p class="settings-label">Columns</p>
+            <p class="settings-hint">Number of text columns per page</p>
           </div>
+          <span class="settings-value">{{ effective.maxColumnCount }}</span>
         </div>
-
-        <!-- Columns -->
-        <div class="px-5 py-4 bg-card">
-          <div class="flex items-center justify-between mb-3">
-            <div>
-              <p class="settings-label">Columns</p>
-              <p class="settings-hint">Number of text columns per page</p>
-            </div>
-            <span class="settings-value">{{ effective.maxColumnCount }}</span>
-          </div>
-          <input
-            type="range"
-            min="1"
-            max="4"
-            step="1"
-            class="w-full accent-primary cursor-pointer"
-            :value="effective.maxColumnCount"
-            @input="update({ maxColumnCount: Number(($event.target as HTMLInputElement).value) })"
-          />
-        </div>
+        <input
+          type="range"
+          min="1"
+          max="4"
+          step="1"
+          class="w-full accent-primary cursor-pointer"
+          :value="effective.maxColumnCount"
+          @input="update({ maxColumnCount: Number(($event.target as HTMLInputElement).value) })"
+        />
       </div>
     </div>
+  </div>
 
-    <!-- Theme -->
-    <div class="mb-6">
-      <p class="settings-group-label">Theme</p>
-      <div class="border border-border rounded-lg overflow-hidden bg-card px-5 py-4">
-        <!-- Dark mode toggle -->
-        <div class="flex items-center justify-between mb-4">
-          <div>
-            <p class="settings-label">Dark mode</p>
-            <p class="settings-hint">Use the dark variant of the selected theme</p>
-          </div>
-          <button
-            class="w-11 h-6 rounded-full transition-colors relative shrink-0"
-            :class="effective.isDark ? 'bg-primary' : 'bg-muted'"
-            @click="update({ isDark: !effective.isDark })"
-          >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="effective.isDark ? 'translate-x-6' : 'translate-x-1'"
-            />
-          </button>
+  <!-- Theme -->
+  <div class="mb-6">
+    <p class="settings-group-label">Theme</p>
+    <div class="border border-border rounded-lg overflow-hidden bg-card px-5 py-4">
+      <!-- Dark mode toggle -->
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <p class="settings-label">Dark mode</p>
+          <p class="settings-hint">Use the dark variant of the selected theme</p>
         </div>
-        <!-- Theme swatches -->
-        <div class="flex flex-wrap gap-2">
-          <button v-for="t in themes" :key="t.name" class="flex flex-col items-center gap-1 group" @click="update({ themeName: t.name })">
+        <ToggleSwitch :model-value="effective.isDark" @update:model-value="update({ isDark: $event })" />
+      </div>
+      <!-- Theme swatches -->
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(64px,1fr))] gap-3">
+        <button v-for="t in themes" :key="t.name" class="flex flex-col items-center gap-1.5 group" @click="update({ themeName: t.name })">
+          <div
+            class="relative w-full aspect-[4/3] rounded-lg overflow-hidden transition-all ring-2 ring-offset-2 ring-offset-card"
+            :class="effective.themeName === t.name ? 'ring-primary' : 'ring-transparent group-hover:ring-border'"
+            :style="{ background: effective.isDark ? t.dark.bg : t.light.bg }"
+          >
+            <!-- Top accent strip -->
+            <div class="absolute top-0 left-0 right-0 h-[3px]" :style="{ background: effective.isDark ? t.dark.link : t.light.link }" />
+            <!-- Title line -->
             <div
-              class="w-20 h-14 rounded border-2 overflow-hidden transition-all shrink-0"
-              :class="effective.themeName === t.name ? 'border-primary shadow-sm' : 'border-transparent hover:border-border'"
+              class="absolute top-[10px] left-[8px] right-[12px] h-[3px] rounded-full"
+              :style="{ background: effective.isDark ? t.dark.fg : t.light.fg, opacity: 0.85 }"
+            />
+            <!-- Body text lines -->
+            <div
+              class="absolute top-[18px] left-[8px] right-[8px] h-[2px] rounded-full"
+              :style="{ background: effective.isDark ? t.dark.fg : t.light.fg, opacity: 0.35 }"
+            />
+            <div
+              class="absolute top-[23px] left-[8px] right-[16px] h-[2px] rounded-full"
+              :style="{ background: effective.isDark ? t.dark.fg : t.light.fg, opacity: 0.35 }"
+            />
+            <div
+              class="absolute top-[28px] left-[8px] right-[10px] h-[2px] rounded-full"
+              :style="{ background: effective.isDark ? t.dark.fg : t.light.fg, opacity: 0.35 }"
+            />
+            <!-- Link dot -->
+            <div
+              class="absolute bottom-[7px] left-[8px] h-[2px] w-[14px] rounded-full opacity-80"
+              :style="{ background: effective.isDark ? t.dark.link : t.light.link }"
+            />
+            <!-- Selected checkmark -->
+            <Transition
+              enter-active-class="transition-opacity duration-150"
+              leave-active-class="transition-opacity duration-150"
+              enter-from-class="opacity-0"
+              leave-to-class="opacity-0"
             >
-              <div class="w-full h-1/2" :style="{ background: effective.isDark ? t.dark.bg : t.light.bg }" />
               <div
-                class="w-full h-1/2 flex items-center justify-center px-0.5"
-                :style="{ background: effective.isDark ? t.dark.bg : t.light.bg }"
+                v-if="effective.themeName === t.name"
+                class="absolute bottom-[5px] right-[6px] w-4 h-4 rounded-full bg-primary flex items-center justify-center shadow"
               >
-                <div class="h-0.5 w-full rounded-full opacity-60" :style="{ background: effective.isDark ? t.dark.fg : t.light.fg }" />
+                <Check :size="9" class="text-primary-foreground" :stroke-width="3" />
               </div>
-            </div>
-            <span
-              class="text-xs font-medium transition-colors leading-none"
-              :class="effective.themeName === t.name ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'"
-            >
-              {{ t.label }}
-            </span>
-          </button>
-        </div>
+            </Transition>
+          </div>
+          <span
+            class="text-xs font-medium transition-colors leading-none text-center"
+            :class="effective.themeName === t.name ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'"
+          >
+            {{ t.label }}
+          </span>
+        </button>
       </div>
     </div>
+  </div>
 
-    <!-- Typography -->
-    <div class="mb-6">
-      <p class="settings-group-label">Typography</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <!-- Font family -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
+  <!-- Typography -->
+  <div class="mb-6">
+    <p class="settings-group-label">Typography</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <!-- Font family -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Font</p>
+          <p class="settings-hint">Typeface used for body text</p>
+        </div>
+        <select
+          class="text-xs border border-border rounded-md px-2 py-1.5 bg-card text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+          :value="effective.fontFamily ?? ''"
+          @change="update({ fontFamily: ($event.target as HTMLSelectElement).value || null })"
+        >
+          <option v-for="f in fontFamilies" :key="String(f.id)" :value="f.id ?? ''">{{ f.label }}</option>
+        </select>
+      </div>
+
+      <!-- Font size -->
+      <div class="px-5 py-4 bg-card">
+        <div class="flex items-center justify-between mb-3">
           <div>
-            <p class="settings-label">Font</p>
-            <p class="settings-hint">Typeface used for body text</p>
+            <p class="settings-label">Font size</p>
+            <p class="settings-hint">Base text size in pixels</p>
           </div>
-          <select
-            class="text-xs border border-border rounded-md px-2 py-1.5 bg-card text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
-            :value="effective.fontFamily ?? ''"
-            @change="update({ fontFamily: ($event.target as HTMLSelectElement).value || null })"
-          >
-            <option v-for="f in fontFamilies" :key="String(f.id)" :value="f.id ?? ''">{{ f.label }}</option>
-          </select>
+          <span class="settings-value">{{ effective.fontSize }}px</span>
         </div>
+        <input
+          type="range"
+          min="10"
+          max="32"
+          step="1"
+          class="w-full accent-primary cursor-pointer"
+          :value="effective.fontSize"
+          @input="update({ fontSize: Number(($event.target as HTMLInputElement).value) })"
+        />
+      </div>
 
-        <!-- Font size -->
-        <div class="px-5 py-4 bg-card">
-          <div class="flex items-center justify-between mb-3">
-            <div>
-              <p class="settings-label">Font size</p>
-              <p class="settings-hint">Base text size in pixels</p>
-            </div>
-            <span class="settings-value">{{ effective.fontSize }}px</span>
-          </div>
-          <input
-            type="range"
-            min="10"
-            max="32"
-            step="1"
-            class="w-full accent-primary cursor-pointer"
-            :value="effective.fontSize"
-            @input="update({ fontSize: Number(($event.target as HTMLInputElement).value) })"
-          />
-        </div>
-
-        <!-- Line height -->
-        <div class="px-5 py-4 bg-card">
-          <div class="flex items-center justify-between mb-3">
-            <div>
-              <p class="settings-label">Line height</p>
-              <p class="settings-hint">Vertical spacing between lines</p>
-            </div>
-            <span class="settings-value">{{ effective.lineHeight.toFixed(1) }}</span>
-          </div>
-          <input
-            type="range"
-            min="0.8"
-            max="3"
-            step="0.1"
-            class="w-full accent-primary cursor-pointer"
-            :value="effective.lineHeight"
-            @input="update({ lineHeight: Number(($event.target as HTMLInputElement).value) })"
-          />
-        </div>
-
-        <!-- Justify -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
+      <!-- Line height -->
+      <div class="px-5 py-4 bg-card">
+        <div class="flex items-center justify-between mb-3">
           <div>
-            <p class="settings-label">Justify text</p>
-            <p class="settings-hint">Align text to both margins</p>
+            <p class="settings-label">Line height</p>
+            <p class="settings-hint">Vertical spacing between lines</p>
           </div>
-          <button
-            class="w-11 h-6 rounded-full transition-colors relative shrink-0"
-            :class="effective.justify ? 'bg-primary' : 'bg-muted'"
-            @click="update({ justify: !effective.justify })"
-          >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="effective.justify ? 'translate-x-6' : 'translate-x-1'"
-            />
-          </button>
+          <span class="settings-value">{{ effective.lineHeight.toFixed(1) }}</span>
         </div>
+        <input
+          type="range"
+          min="0.8"
+          max="3"
+          step="0.1"
+          class="w-full accent-primary cursor-pointer"
+          :value="effective.lineHeight"
+          @input="update({ lineHeight: Number(($event.target as HTMLInputElement).value) })"
+        />
+      </div>
 
-        <!-- Hyphenation -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Hyphenation</p>
-            <p class="settings-hint">Automatically break long words with hyphens</p>
-          </div>
-          <button
-            class="w-11 h-6 rounded-full transition-colors relative shrink-0"
-            :class="effective.hyphenate ? 'bg-primary' : 'bg-muted'"
-            @click="update({ hyphenate: !effective.hyphenate })"
-          >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="effective.hyphenate ? 'translate-x-6' : 'translate-x-1'"
-            />
-          </button>
+      <!-- Justify -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Justify text</p>
+          <p class="settings-hint">Align text to both margins</p>
         </div>
+        <ToggleSwitch :model-value="effective.justify" @update:model-value="update({ justify: $event })" />
+      </div>
+
+      <!-- Hyphenation -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Hyphenation</p>
+          <p class="settings-hint">Automatically break long words with hyphens</p>
+        </div>
+        <ToggleSwitch :model-value="effective.hyphenate" @update:model-value="update({ hyphenate: $event })" />
       </div>
     </div>
+  </div>
 
-    <!-- Advanced -->
-    <div class="mb-6">
-      <p class="settings-group-label">Advanced</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <!-- Max inline size -->
-        <div class="px-5 py-4 bg-card">
-          <div class="flex items-center justify-between mb-3">
-            <div>
-              <p class="settings-label">Max content width</p>
-              <p class="settings-hint">Maximum width of the text area in pixels</p>
-            </div>
-            <span class="settings-value">{{ effective.maxInlineSize }}px</span>
+  <!-- Advanced -->
+  <div class="mb-6">
+    <p class="settings-group-label">Advanced</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <!-- Max inline size -->
+      <div class="px-5 py-4 bg-card">
+        <div class="flex items-center justify-between mb-3">
+          <div>
+            <p class="settings-label">Max content width</p>
+            <p class="settings-hint">Maximum width of the text area in pixels</p>
           </div>
-          <input
-            type="range"
-            min="400"
-            max="1600"
-            step="40"
-            class="w-full accent-primary cursor-pointer"
-            :value="effective.maxInlineSize"
-            @input="update({ maxInlineSize: Number(($event.target as HTMLInputElement).value) })"
-          />
+          <span class="settings-value">{{ effective.maxInlineSize }}px</span>
         </div>
+        <input
+          type="range"
+          min="400"
+          max="1600"
+          step="40"
+          class="w-full accent-primary cursor-pointer"
+          :value="effective.maxInlineSize"
+          @input="update({ maxInlineSize: Number(($event.target as HTMLInputElement).value) })"
+        />
+      </div>
 
-        <!-- Gap -->
-        <div class="px-5 py-4 bg-card">
-          <div class="flex items-center justify-between mb-3">
-            <div>
-              <p class="settings-label">Column gap</p>
-              <p class="settings-hint">Horizontal padding on each side of the text area</p>
-            </div>
-            <span class="settings-value">{{ Math.round(effective.gap * 100) }}%</span>
+      <!-- Gap -->
+      <div class="px-5 py-4 bg-card">
+        <div class="flex items-center justify-between mb-3">
+          <div>
+            <p class="settings-label">Column gap</p>
+            <p class="settings-hint">Horizontal padding on each side of the text area</p>
           </div>
-          <input
-            type="range"
-            min="0"
-            max="0.5"
-            step="0.01"
-            class="w-full accent-primary cursor-pointer"
-            :value="effective.gap"
-            @input="update({ gap: Number(($event.target as HTMLInputElement).value) })"
-          />
+          <span class="settings-value">{{ Math.round(effective.gap * 100) }}%</span>
         </div>
+        <input
+          type="range"
+          min="0"
+          max="0.5"
+          step="0.01"
+          class="w-full accent-primary cursor-pointer"
+          :value="effective.gap"
+          @input="update({ gap: Number(($event.target as HTMLInputElement).value) })"
+        />
       </div>
     </div>
+  </div>
 </template>
diff --git a/client/src/features/settings/FileNamingSettings.vue b/client/src/features/settings/FileNamingSettings.vue
index c5e1aa8d6..c1294162d 100644
--- a/client/src/features/settings/FileNamingSettings.vue
+++ b/client/src/features/settings/FileNamingSettings.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { Check, ChevronDown, ChevronUp, FileText, Loader2, RotateCcw, Save } from 'lucide-vue-next'
+import { Check, ChevronDown, ChevronUp, ClipboardCopy, FileText, Info, Loader2, RotateCcw, Save } from 'lucide-vue-next'
 import { DEFAULT_DOWNLOAD_PATTERN, DEFAULT_UPLOAD_PATTERN, PATTERN_TOKENS } from '@projectx/types'
+import { toast } from 'vue-sonner'
 import { useFileNamingPattern } from './composables/useFileNamingPattern'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { Badge } from '@/components/ui/badge'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const {
   globalPattern,
@@ -57,227 +60,270 @@ const EXAMPLES = [
   },
 ]
 
+async function copyToken(token: string) {
+  await navigator.clipboard.writeText(`{${token}}`)
+  toast.success(`{${token}} copied to clipboard`)
+}
+
+async function copyPattern(pattern: string) {
+  await navigator.clipboard.writeText(pattern)
+  toast.success('Pattern copied to clipboard')
+}
+
 onMounted(async () => {
   await Promise.all([fetchGlobalPattern(), fetchDownloadPattern(), fetchLibraries()])
 })
 </script>
 
 <template>
-  <div class="space-y-8">
-    <!-- Page header -->
-    <div>
-      <h2 class="settings-title">File Naming</h2>
-      <p class="settings-subtitle">
-        Control naming patterns for uploads and downloads using the same placeholder syntax.
-      </p>
-    </div>
+  <div class="space-y-10 pb-20">
+    <SettingsPageHeader
+      title="File Naming"
+      subtitle="Control how files are organized on disk when uploaded and how they are named when downloaded using placeholder tokens."
+    />
 
-    <!-- Upload global default -->
-    <div>
-      <p class="settings-group-label">Upload Pattern</p>
-      <div class="border border-border rounded-lg bg-card px-5 py-5 space-y-4">
-        <p class="text-xs text-muted-foreground leading-relaxed">
-          Applied to all libraries unless overridden. Leave blank to use the built-in default layout.
-        </p>
-
-        <div class="space-y-1.5">
-          <div class="flex gap-2">
-            <input
-              :value="globalPattern"
-              type="text"
-              :placeholder="DEFAULT_UPLOAD_PATTERN"
-              class="flex-1 h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
-              :class="globalError ? 'border-destructive focus:ring-destructive' : ''"
-              :disabled="loadingGlobal"
-              @input="onGlobalPatternInput(($event.target as HTMLInputElement).value)"
-            />
-            <button
-              class="flex items-center gap-1.5 h-8 px-3 rounded-md border border-border bg-background text-sm text-foreground hover:bg-muted transition-colors disabled:opacity-50"
-              :disabled="savingGlobal || !!globalError || loadingGlobal"
-              @click="saveGlobalPattern"
-            >
-              <Loader2 v-if="savingGlobal" :size="13" class="animate-spin" />
-              <Save v-else :size="13" />
-              Save
-            </button>
-          </div>
-          <p v-if="globalError" class="text-xs text-destructive">{{ globalError }}</p>
-          <p class="text-xs text-muted-foreground font-mono">
-            Preview: <span class="text-foreground">{{ previewPath(globalPattern) }}</span>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Download global default -->
-    <div>
-      <p class="settings-group-label">Download Pattern</p>
-      <div class="border border-border rounded-lg bg-card px-5 py-5 space-y-4">
-        <p class="text-xs text-muted-foreground leading-relaxed">
-          Controls suggested filenames for single-file downloads and files inside export ZIPs.
-        </p>
-
-        <div class="space-y-1.5">
-          <div class="flex gap-2">
-            <input
-              :value="downloadPattern"
-              type="text"
-              :placeholder="DEFAULT_DOWNLOAD_PATTERN"
-              class="flex-1 h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
-              :class="downloadError ? 'border-destructive focus:ring-destructive' : ''"
-              :disabled="loadingDownload"
-              @input="onDownloadPatternInput(($event.target as HTMLInputElement).value)"
-            />
-            <button
-              class="flex items-center gap-1.5 h-8 px-3 rounded-md border border-border bg-background text-sm text-foreground hover:bg-muted transition-colors disabled:opacity-50"
-              :disabled="savingDownload || !!downloadError || loadingDownload"
-              @click="saveDownloadPattern"
-            >
-              <Loader2 v-if="savingDownload" :size="13" class="animate-spin" />
-              <Save v-else :size="13" />
-              Save
-            </button>
-          </div>
-          <p v-if="downloadError" class="text-xs text-destructive">{{ downloadError }}</p>
-          <p class="text-xs text-muted-foreground font-mono">
-            Preview: <span class="text-foreground">{{ previewDownloadName(downloadPattern) }}</span>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Per-library overrides -->
-    <div>
-      <p class="settings-group-label">Library Overrides</p>
-      <div class="border border-border rounded-lg bg-card divide-y divide-border">
-        <div v-if="libraries.length === 0" class="px-5 py-8 text-center text-sm text-muted-foreground">No libraries configured.</div>
-
-        <div v-for="lib in libraries" :key="lib.id" class="px-5 py-4 space-y-3">
-          <div class="flex items-center justify-between gap-3">
-            <div class="flex items-center gap-2 min-w-0">
-              <FileText :size="14" class="text-muted-foreground shrink-0" />
-              <span class="settings-label truncate">{{ lib.name }}</span>
-              <span v-if="lib.fileNamingPattern" class="shrink-0 text-xs font-medium px-1.5 py-0.5 rounded bg-primary/10 text-primary">
-                custom
-              </span>
-              <span v-else class="shrink-0 text-xs font-medium px-1.5 py-0.5 rounded bg-muted text-muted-foreground"> using default </span>
+    <!-- Global Patterns -->
+    <section class="space-y-4">
+      <p class="settings-group-label">Global Defaults</p>
+      <div class="border border-border rounded-lg bg-card overflow-hidden divide-y divide-border shadow-sm">
+        <!-- Upload pattern -->
+        <div class="px-6 py-5 space-y-4">
+          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
+            <div class="max-w-md">
+              <p class="settings-label">Upload Pattern</p>
+              <p class="settings-hint">Controls the folder structure and filename for new uploads. Applied to all libraries unless overridden.</p>
+            </div>
+            <div class="flex items-center gap-2 w-full md:w-auto">
+              <div class="relative flex-1 md:w-120">
+                <input
+                  :value="globalPattern"
+                  type="text"
+                  :placeholder="DEFAULT_UPLOAD_PATTERN"
+                  class="input-field w-full"
+                  :class="globalError ? 'border-destructive focus:ring-destructive/20' : ''"
+                  :disabled="loadingGlobal"
+                  @input="onGlobalPatternInput(($event.target as HTMLInputElement).value)"
+                />
+                <p v-if="globalError" class="absolute -bottom-5 left-0 text-[11px] text-destructive font-medium">{{ globalError }}</p>
+              </div>
+              <button
+                class="flex items-center gap-2 h-9 px-3 rounded-md bg-primary text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+                :disabled="savingGlobal || !!globalError || loadingGlobal"
+                @click="saveGlobalPattern"
+              >
+                <Loader2 v-if="savingGlobal" :size="14" class="animate-spin" />
+                <Save v-else :size="14" />
+                <span>Save</span>
+              </button>
             </div>
-            <Tooltip>
-              <TooltipTrigger as-child>
-                <button
-                  v-if="lib.fileNamingPattern"
-                  class="shrink-0 flex items-center gap-1 h-7 px-2 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50"
-                  :disabled="savingLibraryId === lib.id"
-                  @click="clearLibraryPattern(lib)"
-                >
-                  <RotateCcw :size="11" />
-                  Reset
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>Clear override</TooltipContent>
-            </Tooltip>
           </div>
 
-          <div class="space-y-1.5">
-            <div class="flex gap-2">
+          <div class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-muted/40 border border-border/50 font-mono text-xs">
+            <span class="text-muted-foreground shrink-0 uppercase tracking-wider font-semibold text-[10px]">Preview:</span>
+            <span class="text-foreground truncate">{{ previewPath(globalPattern) }}</span>
+          </div>
+        </div>
+
+        <!-- Download pattern -->
+        <div class="px-6 py-5 space-y-4">
+          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
+            <div class="max-w-md">
+              <p class="settings-label">Download Pattern</p>
+              <p class="settings-hint">Suggested filenames for single-file downloads and files inside export ZIPs.</p>
+            </div>
+            <div class="flex items-center gap-2 w-full md:w-auto">
+              <div class="relative flex-1 md:w-120">
+                <input
+                  :value="downloadPattern"
+                  type="text"
+                  :placeholder="DEFAULT_DOWNLOAD_PATTERN"
+                  class="input-field w-full"
+                  :class="downloadError ? 'border-destructive focus:ring-destructive/20' : ''"
+                  :disabled="loadingDownload"
+                  @input="onDownloadPatternInput(($event.target as HTMLInputElement).value)"
+                />
+                <p v-if="downloadError" class="absolute -bottom-5 left-0 text-[11px] text-destructive font-medium">{{ downloadError }}</p>
+              </div>
+              <button
+                class="flex items-center gap-2 h-9 px-3 rounded-md bg-primary text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+                :disabled="savingDownload || !!downloadError || loadingDownload"
+                @click="saveDownloadPattern"
+              >
+                <Loader2 v-if="savingDownload" :size="14" class="animate-spin" />
+                <Save v-else :size="14" />
+                <span>Save</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-muted/40 border border-border/50 font-mono text-xs">
+            <span class="text-muted-foreground shrink-0 uppercase tracking-wider font-semibold text-[10px]">Preview:</span>
+            <span class="text-foreground truncate">{{ previewDownloadName(downloadPattern) }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Library Overrides -->
+    <section class="space-y-4">
+      <p class="settings-group-label">Library Overrides</p>
+      <div class="border border-border rounded-lg bg-card overflow-hidden divide-y divide-border shadow-sm">
+        <div v-if="libraries.length === 0" class="px-6 py-10 text-center text-sm text-muted-foreground italic">
+          No libraries configured. Create one in Library settings to set custom naming patterns.
+        </div>
+
+        <div v-for="lib in libraries" :key="lib.id" class="px-6 py-5 space-y-4">
+          <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div class="flex items-center gap-3">
+              <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-muted shrink-0 text-muted-foreground">
+                <FileText :size="16" />
+              </div>
+              <div class="min-w-0">
+                <div class="flex items-center gap-2">
+                  <span class="settings-label truncate">{{ lib.name }}</span>
+                  <Badge v-if="lib.fileNamingPattern" variant="secondary" class="h-4.5 px-1.5 text-[10px] font-bold uppercase tracking-tight">
+                    Custom
+                  </Badge>
+                  <Badge v-else variant="outline" class="h-4.5 px-1.5 text-[10px] font-bold uppercase tracking-tight opacity-60"> Default </Badge>
+                </div>
+                <p class="text-xs text-muted-foreground font-mono truncate max-w-[300px]">
+                  {{ getEffectivePreview(lib) }}
+                </p>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-2">
               <input
-                :value="lib.fileNamingPattern ?? ''"
+                v-model="lib.fileNamingPattern"
                 type="text"
                 :placeholder="globalPattern || DEFAULT_UPLOAD_PATTERN"
-                class="flex-1 h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
-                @input="lib.fileNamingPattern = ($event.target as HTMLInputElement).value || null"
+                class="input-field w-full md:w-120 h-8 text-xs px-2.5"
               />
               <button
-                class="flex items-center gap-1.5 h-8 px-3 rounded-md border border-border bg-background text-sm text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+                class="shrink-0 flex items-center justify-center h-8 w-8 rounded-md border border-border bg-background text-muted-foreground hover:text-primary hover:bg-primary/5 hover:border-primary/30 transition-all disabled:opacity-50"
                 :disabled="savingLibraryId === lib.id"
                 @click="saveLibraryPattern(lib)"
               >
-                <Loader2 v-if="savingLibraryId === lib.id" :size="13" class="animate-spin" />
-                <Check v-else :size="13" />
-                Save
+                <Loader2 v-if="savingLibraryId === lib.id" :size="14" class="animate-spin" />
+                <Check v-else :size="14" />
               </button>
+              <Tooltip v-if="lib.fileNamingPattern">
+                <TooltipTrigger as-child>
+                  <button
+                    class="shrink-0 flex items-center justify-center h-8 w-8 rounded-md border border-border bg-background text-muted-foreground hover:text-destructive hover:bg-destructive/5 hover:border-destructive/30 transition-all"
+                    @click="clearLibraryPattern(lib)"
+                  >
+                    <RotateCcw :size="13" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>Reset to default</TooltipContent>
+              </Tooltip>
             </div>
-            <p class="text-xs text-muted-foreground font-mono">
-              Preview: <span class="text-foreground">{{ getEffectivePreview(lib) }}</span>
-            </p>
           </div>
         </div>
       </div>
-    </div>
+    </section>
 
-    <!-- Placeholder reference (collapsible) -->
-    <div class="border border-border rounded-lg bg-card overflow-hidden">
-      <button
-        class="w-full flex items-center justify-between px-5 py-4 hover:bg-muted/50 transition-colors"
-        @click="referenceOpen = !referenceOpen"
-      >
-        <span class="text-sm font-medium text-foreground">Placeholder Reference</span>
-        <ChevronDown v-if="!referenceOpen" :size="15" class="text-muted-foreground" />
-        <ChevronUp v-else :size="15" class="text-muted-foreground" />
-      </button>
+    <!-- Placeholder Reference -->
+    <section class="space-y-4">
+      <p class="settings-group-label">Pattern Reference</p>
+      <div class="border border-border rounded-lg bg-card shadow-sm overflow-hidden">
+        <!-- Accordion header -->
+        <button
+          class="w-full flex items-center justify-between px-5 py-4 text-left hover:bg-muted/30 transition-colors"
+          @click="referenceOpen = !referenceOpen"
+        >
+          <div class="flex items-center gap-2.5">
+            <Info :size="16" class="text-primary shrink-0" />
+            <span class="text-sm font-medium text-foreground">Placeholder Reference</span>
+            <span class="hidden sm:inline text-xs text-muted-foreground">- guide for creating custom naming patterns</span>
+          </div>
+          <ChevronUp v-if="referenceOpen" :size="16" class="text-muted-foreground shrink-0" />
+          <ChevronDown v-else :size="16" class="text-muted-foreground shrink-0" />
+        </button>
 
-      <div v-if="referenceOpen" class="border-t border-border divide-y divide-border/60">
-        <!-- Tokens -->
-        <div class="px-5 py-4 space-y-2.5">
-          <p class="text-xs font-medium text-foreground">Available tokens</p>
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-1.5 gap-x-6">
-            <div v-for="t in PATTERN_TOKENS" :key="t.token" class="flex items-center gap-2">
-              <code class="shrink-0 text-xs font-mono bg-primary/10 text-primary px-1.5 py-0.5 rounded">{{ '{' + t.token + '}' }}</code>
-              <span class="text-xs text-muted-foreground">{{ t.description }}</span>
+        <div v-if="referenceOpen" class="border-t border-border animate-in fade-in slide-in-from-top-1 duration-200 divide-y divide-border">
+          <!-- Tokens -->
+          <div class="p-5 space-y-3">
+            <p class="text-xs font-semibold text-foreground uppercase tracking-wider">Tokens</p>
+            <p class="text-xs text-muted-foreground">Click any token to copy it to your clipboard.</p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-1.5">
+              <Tooltip v-for="t in PATTERN_TOKENS" :key="t.token">
+                <TooltipTrigger as-child>
+                  <button
+                    class="group flex items-center justify-between gap-3 px-3 py-2 rounded-lg border border-border bg-background text-left hover:border-primary/40 hover:bg-primary/5 transition-colors"
+                    @click="copyToken(t.token)"
+                  >
+                    <div class="min-w-0">
+                      <code class="text-xs font-mono font-semibold text-primary">{{ '{' + t.token + '}' }}</code>
+                      <p class="text-[11px] text-muted-foreground leading-tight mt-0.5">{{ t.description }}</p>
+                    </div>
+                    <ClipboardCopy :size="13" class="shrink-0 text-muted-foreground/40 group-hover:text-primary/60 transition-colors" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>Copy {{ '{' + t.token + '}' }}</TooltipContent>
+              </Tooltip>
             </div>
           </div>
-        </div>
 
-        <!-- Modifiers -->
-        <div class="px-5 py-4 space-y-2.5">
-          <p class="text-xs font-medium text-foreground">Modifiers</p>
-          <p class="text-xs text-muted-foreground">
-            Append <code class="bg-muted px-1 py-0.5 rounded font-mono text-foreground">:modifier</code> inside a token. Example:
-            <code class="bg-muted px-1 py-0.5 rounded font-mono text-foreground">{'{authors:sort}'}</code>
-          </p>
-          <div class="flex flex-wrap gap-2">
-            <div
-              v-for="mod in MODIFIERS"
-              :key="mod.key"
-              class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-muted/50 border border-border/60"
-            >
-              <code class="text-xs font-mono text-foreground">{{ mod.key }}</code>
-              <span class="text-[11px] text-muted-foreground">{{ mod.description }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Optional blocks -->
-        <div class="px-5 py-4 space-y-2.5">
-          <p class="text-xs font-medium text-foreground">Optional blocks</p>
-          <p class="text-xs text-muted-foreground">
-            Wrap in <code class="bg-muted px-1 py-0.5 rounded font-mono text-foreground">&lt;...&gt;</code> to skip a segment when its tokens are
-            empty. Use <code class="bg-muted px-1 py-0.5 rounded font-mono text-foreground">|fallback</code> to substitute a value instead.
-          </p>
-          <div class="space-y-2">
-            <div v-for="ex in EXAMPLES" :key="ex.pattern" class="rounded-md border border-border/60 overflow-hidden">
-              <div class="px-3 py-2 bg-muted/50 border-b border-border/60">
-                <code class="text-xs font-mono text-foreground">{{ ex.pattern }}</code>
+          <!-- Modifiers -->
+          <div class="p-5 space-y-4">
+            <p class="text-xs font-semibold text-foreground uppercase tracking-wider">Modifiers</p>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+              Append a modifier inside a token to transform its value:
+              <code class="bg-muted px-1.5 py-0.5 rounded font-mono text-foreground text-[11px]">{authors:first}</code>
+            </p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+              <div v-for="mod in MODIFIERS" :key="mod.key" class="flex items-center gap-3 px-3 py-2.5 rounded-lg border border-border bg-background">
+                <code class="text-xs font-mono font-semibold text-foreground shrink-0">{{ mod.key }}</code>
+                <span class="text-xs text-muted-foreground">{{ mod.description }}</span>
               </div>
-              <div class="px-3 py-2.5 space-y-1.5">
-                <div v-for="c in ex.cases" :key="c.label" class="flex items-baseline gap-3">
-                  <span class="text-[11px] text-muted-foreground shrink-0 w-16">{{ c.label }}</span>
-                  <code class="text-xs font-mono text-foreground/80 break-all">{{ c.result }}</code>
+            </div>
+            <div class="flex items-start gap-3 px-4 py-3 rounded-lg bg-primary/5 border border-primary/10">
+              <code class="text-sm font-mono text-primary shrink-0 mt-0.5">/</code>
+              <p class="text-xs text-muted-foreground leading-relaxed">
+                End a pattern with <code class="bg-primary/10 text-primary px-1 py-0.5 rounded font-mono text-[11px]">/</code> to specify a folder
+                only. The original filename will be preserved inside it.
+              </p>
+            </div>
+          </div>
+
+          <!-- Examples -->
+          <div class="p-5 space-y-3">
+            <p class="text-xs font-semibold text-foreground uppercase tracking-wider">Conditional Logic</p>
+            <p class="text-xs text-muted-foreground leading-relaxed">
+              Wrap in <code class="bg-muted px-1 py-0.5 rounded font-mono text-foreground text-[11px]">&lt;...&gt;</code> to skip a segment when its
+              token is empty. Use <code class="bg-muted px-1 py-0.5 rounded font-mono text-foreground text-[11px]">|fallback</code> for a default
+              value.
+            </p>
+            <div class="space-y-3">
+              <div v-for="ex in EXAMPLES" :key="ex.pattern" class="rounded-xl border border-border bg-background overflow-hidden shadow-xs">
+                <div class="flex items-center justify-between gap-3 px-4 py-2.5 bg-muted/30 border-b border-border">
+                  <code class="text-[11px] font-mono text-foreground break-all leading-relaxed">{{ ex.pattern }}</code>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <button
+                        class="shrink-0 flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[11px] font-medium text-muted-foreground border border-border bg-background hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors"
+                        @click="copyPattern(ex.pattern)"
+                      >
+                        <ClipboardCopy :size="12" />
+                        Copy
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>Copy pattern to clipboard</TooltipContent>
+                  </Tooltip>
+                </div>
+                <div class="px-4 py-3 space-y-2">
+                  <div v-for="c in ex.cases" :key="c.label" class="flex items-baseline gap-2">
+                    <span class="text-[10px] text-muted-foreground uppercase tracking-wider font-semibold shrink-0 w-20">{{ c.label }}</span>
+                    <code class="text-[11px] font-mono text-primary/80 break-all leading-tight">{{ c.result }}</code>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-
-        <!-- Folder-only mode -->
-        <div class="px-5 py-4">
-          <p class="text-xs font-medium text-foreground mb-1.5">Folder-only mode</p>
-          <p class="text-xs text-muted-foreground">
-            End the pattern with <code class="bg-muted px-1 py-0.5 rounded font-mono text-foreground">/</code> to specify a folder only - the
-            original filename is preserved inside it. This affects upload destinations and ZIP export paths.
-          </p>
-        </div>
       </div>
-    </div>
+    </section>
   </div>
 </template>
diff --git a/client/src/features/settings/KoboSettings.vue b/client/src/features/settings/KoboSettings.vue
index 94097f006..e16341054 100644
--- a/client/src/features/settings/KoboSettings.vue
+++ b/client/src/features/settings/KoboSettings.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { Plus, Trash2, Copy, Check, Pencil, X, Tablet } from 'lucide-vue-next'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 import { useKoboDevices } from '@/features/kobo/composables/useKoboDevices'
 import { useKoboSettings } from '@/features/kobo/composables/useKoboSettings'
 import type { KoboDevice } from '@projectx/types'
@@ -154,127 +156,120 @@ async function saveSettings() {
 </script>
 
 <template>
-    <div class="mb-8">
-      <h2 class="settings-title">Kobo Sync</h2>
-      <p class="settings-subtitle">
-        Pair your Kobo device to sync your library. Enable "Sync to Kobo" on any collection to push those books to your device.
-      </p>
-    </div>
+  <SettingsPageHeader title="Kobo Sync" subtitle="Pair your Kobo device to sync your library and reading progress." />
 
-    <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
-    <div v-else-if="error" class="text-sm text-destructive">{{ error }}</div>
-    <template v-else>
-      <!-- New device token display -->
-      <div v-if="newDeviceSyncUrl" class="mb-6 border border-primary/30 rounded-lg p-5 bg-primary/5">
-        <div class="flex items-start justify-between gap-3 mb-3">
-          <div>
-            <p class="text-sm font-semibold text-foreground">Device paired successfully</p>
-            <p class="settings-hint">
-              Copy this URL and enter it on your Kobo device under Settings - Account - Add account - Other.
-            </p>
+  <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
+  <div v-else-if="error" class="text-sm text-destructive">{{ error }}</div>
+  <template v-else>
+    <!-- New device token display -->
+    <div v-if="newDeviceSyncUrl" class="mb-8 border-2 border-primary/30 rounded-xl p-6 bg-primary/5 shadow-sm">
+      <div class="flex items-start justify-between gap-4 mb-4">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary shrink-0">
+            <Check :size="18" stroke-width="3" />
+          </div>
+          <div>
+            <p class="text-base font-semibold text-foreground leading-none mb-1">Device paired successfully</p>
+            <p class="settings-hint">You're ready to set up your Kobo. Follow the instructions below.</p>
           </div>
-          <button @click="dismissToken()" class="text-muted-foreground hover:text-foreground transition-colors shrink-0">
-            <X :size="16" />
-          </button>
         </div>
-        <div class="flex items-center gap-2 px-3 py-2.5 rounded-md border border-border bg-background">
-          <Tablet :size="14" class="text-muted-foreground shrink-0" />
-          <span class="flex-1 text-sm text-foreground font-mono select-all truncate min-w-0">{{ newDeviceSyncUrl }}</span>
-          <button
-            class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-card hover:bg-muted transition-colors shrink-0"
-            @click="copyToken()"
-          >
-            <component :is="tokenCopied ? Check : Copy" :size="12" />
-            {{ tokenCopied ? 'Copied' : 'Copy' }}
-          </button>
-        </div>
-        <p class="mt-2 text-xs text-muted-foreground">This URL will not be shown again. Keep it private.</p>
+        <button @click="dismissToken()" class="text-muted-foreground hover:text-foreground transition-colors p-1 shrink-0">
+          <X :size="18" />
+        </button>
       </div>
 
-      <!-- Devices -->
-      <div class="mb-6">
-        <div class="flex items-center justify-between mb-3">
-          <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Devices</p>
-          <button
-            v-if="!showCreateForm"
-            class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
-            @click="showCreateForm = true"
-          >
-            <Plus :size="12" />
-            Add device
+      <div class="space-y-4">
+        <div class="bg-background rounded-lg border border-border p-4">
+          <p class="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-2.5">Sync URL</p>
+          <div class="flex items-center gap-2 px-3 py-2.5 rounded-md border border-border bg-muted/30">
+            <Tablet :size="14" class="text-muted-foreground shrink-0" />
+            <span class="flex-1 text-sm text-foreground font-mono select-all truncate min-w-0">{{ newDeviceSyncUrl }}</span>
+            <button
+              class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors shrink-0"
+              @click="copyToken()"
+            >
+              <component :is="tokenCopied ? Check : Copy" :size="12" />
+              {{ tokenCopied ? 'Copied' : 'Copy' }}
+            </button>
+          </div>
+          <p class="mt-3 text-xs text-muted-foreground leading-relaxed">
+            On your Kobo device, go to <span class="font-semibold text-foreground">Settings → Account → Add account → Other</span> and enter this URL.
+            Any username/password will work.
+          </p>
+        </div>
+        <div
+          class="flex items-center gap-2 text-xs font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 px-3 py-2 rounded-md border border-amber-200 dark:border-amber-900/50"
+        >
+          <X :size="14" class="shrink-0" />
+          This URL will not be shown again. Keep it private.
+        </div>
+      </div>
+    </div>
+
+    <!-- Devices -->
+    <div class="mb-8">
+      <div class="flex items-center justify-between mb-3">
+        <p class="settings-group-label mb-0">Registered Devices</p>
+        <button v-if="!showCreateForm" class="settings-btn-primary" @click="showCreateForm = true">
+          <Plus :size="12" />
+          Add device
+        </button>
+      </div>
+
+      <!-- Create form -->
+      <div v-if="showCreateForm" class="border border-border rounded-lg p-5 bg-card mb-4 space-y-4 shadow-sm">
+        <div>
+          <label class="settings-label block mb-1.5">Device name</label>
+          <input v-model="newDeviceName" type="text" placeholder="e.g. My Kobo Libra" autofocus class="input-field w-full" />
+        </div>
+        <div v-if="createError" class="text-xs text-destructive">{{ createError }}</div>
+        <div class="flex items-center gap-2 pt-1">
+          <button class="settings-btn-primary" :disabled="creating || !newDeviceName.trim()" @click="submitCreate()">
+            {{ creating ? 'Creating...' : 'Create device' }}
           </button>
+          <button class="settings-btn-outline" @click="cancelCreate()">Cancel</button>
         </div>
+      </div>
 
-        <!-- Create form -->
-        <div v-if="showCreateForm" class="border border-border rounded-lg p-5 bg-card mb-4 space-y-4">
-          <div>
-            <label class="block text-xs font-medium text-muted-foreground mb-1.5">Device name</label>
-            <input
-              v-model="newDeviceName"
-              type="text"
-              placeholder="e.g. Kobo Libra 2"
-              autofocus
-              class="w-full h-9 px-3 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </div>
-          <div v-if="createError" class="text-xs text-destructive">{{ createError }}</div>
-          <div class="flex items-center gap-2">
-            <button
-              class="px-4 py-2 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-              :disabled="creating || !newDeviceName.trim()"
-              @click="submitCreate()"
-            >
-              {{ creating ? 'Creating...' : 'Create' }}
-            </button>
-            <button
-              class="px-4 py-2 text-xs font-medium rounded-md border border-border bg-background text-foreground hover:bg-muted transition-colors"
-              @click="cancelCreate()"
-            >
-              Cancel
+      <div v-if="devices.length === 0 && !showCreateForm" class="border border-border rounded-lg px-5 py-10 bg-card text-center shadow-sm">
+        <div class="w-12 h-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-3">
+          <Tablet :size="24" class="text-muted-foreground/50" />
+        </div>
+        <p class="text-sm font-medium text-foreground">No devices yet</p>
+        <p class="text-xs text-muted-foreground mt-1 max-w-[240px] mx-auto">
+          Add a device to start syncing your books and reading progress to your Kobo.
+        </p>
+      </div>
+
+      <div v-else-if="devices.length > 0" class="border border-border rounded-lg overflow-hidden divide-y divide-border shadow-sm">
+        <div v-for="device in devices" :key="device.id" class="px-5 py-4 bg-card transition-colors hover:bg-muted/30">
+          <div v-if="renamingId === device.id" class="flex items-center gap-2">
+            <input v-model="renameValue" type="text" class="flex-1 input-field" @keydown.enter="submitRename(device)" @keydown.esc="cancelRename()" />
+            <button class="settings-btn-primary" :disabled="renaming || !renameValue.trim()" @click="submitRename(device)">Save</button>
+            <button class="settings-btn-outline h-9 w-9 p-0 flex items-center justify-center" @click="cancelRename()">
+              <X :size="14" />
             </button>
           </div>
-        </div>
-
-        <div v-if="devices.length === 0 && !showCreateForm" class="border border-border rounded-lg px-5 py-8 bg-card text-center">
-          <p class="text-sm text-muted-foreground">No devices yet. Add a device to start syncing your library.</p>
-        </div>
-
-        <div v-else-if="devices.length > 0" class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-          <div v-for="device in devices" :key="device.id" class="px-5 py-3.5 bg-card">
-            <div v-if="renamingId === device.id" class="flex items-center gap-2">
-              <input
-                v-model="renameValue"
-                type="text"
-                class="flex-1 h-8 px-2.5 text-sm border border-primary rounded-md bg-background text-foreground focus:outline-none"
-                @keydown.enter="submitRename(device)"
-                @keydown.esc="cancelRename()"
-              />
-              <button
-                class="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-                :disabled="renaming || !renameValue.trim()"
-                @click="submitRename(device)"
-              >
-                Save
-              </button>
-              <button class="text-muted-foreground hover:text-foreground transition-colors" @click="cancelRename()">
-                <X :size="14" />
-              </button>
+          <div v-else class="flex items-center gap-4">
+            <div class="w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-muted-foreground shrink-0 border border-border">
+              <Tablet :size="20" />
             </div>
-            <div v-else class="flex items-center gap-3">
-              <Tablet :size="16" class="text-muted-foreground shrink-0" />
-              <div class="flex-1 min-w-0">
-                <p class="settings-label truncate">{{ device.name }}</p>
-                <p class="settings-hint">Last seen: {{ formatLastSeen(device.lastSeenAt) }}</p>
-              </div>
+            <div class="flex-1 min-w-0">
+              <p class="settings-label truncate leading-none mb-1.5">{{ device.name }}</p>
+              <p class="settings-hint leading-none">Last sync: {{ formatLastSeen(device.lastSeenAt) }}</p>
+            </div>
+            <div class="flex items-center gap-1">
               <button
-                class="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                class="w-8 h-8 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                 @click="startRename(device)"
+                title="Rename device"
               >
-                <Pencil :size="13" />
+                <Pencil :size="14" />
               </button>
               <button
-                class="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+                class="w-8 h-8 rounded-md flex items-center justify-center text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
                 @click="revoke(device)"
+                title="Revoke access"
               >
                 <Trash2 :size="14" />
               </button>
@@ -282,127 +277,122 @@ async function saveSettings() {
           </div>
         </div>
       </div>
+    </div>
 
-      <!-- Sync settings -->
-      <div class="mb-6">
-        <p class="settings-group-label">Progress Thresholds</p>
-        <div class="border border-border rounded-lg p-5 bg-card space-y-5">
-          <div class="flex items-center justify-between">
-            <div>
-              <p class="settings-label">Convert EPUB to KEPUB</p>
-              <p class="settings-hint">Optimizes ebooks for Kobo devices. Requires kepubify on first use.</p>
-            </div>
-            <button
-              type="button"
-              role="switch"
-              :aria-checked="convertToKepub"
-              class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-              :class="convertToKepub ? 'bg-primary' : 'bg-muted'"
-              @click="convertToKepub = !convertToKepub"
-            >
-              <span
-                class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
-                :class="convertToKepub ? 'translate-x-4' : 'translate-x-0'"
-              />
-            </button>
+    <!-- Sync settings -->
+    <div class="mb-8">
+      <p class="settings-group-label">Sync Preferences</p>
+      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border shadow-sm">
+        <div class="flex items-center justify-between px-5 py-4 bg-card">
+          <div class="pr-8">
+            <p class="settings-label">Convert to KEPUB</p>
+            <p class="settings-hint">Optimizes ebooks for Kobo devices with better performance and features.</p>
+          </div>
+          <ToggleSwitch v-model="convertToKepub" />
+        </div>
+
+        <div v-if="convertToKepub" class="flex items-center justify-between px-5 py-4 bg-card">
+          <div class="pr-8">
+            <p class="settings-label">Force hyphenation</p>
+            <p class="settings-hint">Ensures consistent text justification. This will regenerate cached KEPUBs.</p>
+          </div>
+          <ToggleSwitch v-model="forceEnableHyphenation" />
+        </div>
+
+        <div class="flex items-center justify-between px-5 py-4 bg-card">
+          <div class="pr-8">
+            <p class="settings-label">Two-way progress sync</p>
+            <p class="settings-hint">Pushes progress from the web reader to your device during sync.</p>
+          </div>
+          <ToggleSwitch v-model="twoWayProgressSync" />
+        </div>
+
+        <div class="px-5 py-5 bg-card space-y-5">
+          <div>
+            <p class="settings-label mb-1">Progress Thresholds</p>
+            <p class="settings-hint">Define when Kobo reading progress updates your library status.</p>
           </div>
 
-          <div class="flex items-center justify-between">
-            <div>
-              <p class="settings-label">Force hyphenation</p>
-              <p class="settings-hint">Passes --hyphenate to kepubify. Cached files are regenerated.</p>
+          <div class="grid sm:grid-cols-2 gap-6">
+            <div class="space-y-2">
+              <div class="flex items-center justify-between">
+                <label class="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">Mark as Reading</label>
+                <span class="text-xs font-mono text-primary font-bold">{{ readingThreshold }}%</span>
+              </div>
+              <input v-model.number="readingThreshold" type="range" min="0" max="99" step="1" class="w-full accent-primary cursor-pointer" />
+              <p class="text-[10px] text-muted-foreground leading-tight">Minimum percentage to move a book to "Reading".</p>
             </div>
-            <button
-              type="button"
-              role="switch"
-              :aria-checked="forceEnableHyphenation"
-              class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-              :class="forceEnableHyphenation ? 'bg-primary' : 'bg-muted'"
-              @click="forceEnableHyphenation = !forceEnableHyphenation"
-            >
-              <span
-                class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
-                :class="forceEnableHyphenation ? 'translate-x-4' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <div class="flex items-center justify-between">
-            <div>
-              <p class="settings-label">Two-way progress sync</p>
-              <p class="settings-hint">Pushes web reader progress to your Kobo device on sync.</p>
-            </div>
-            <button
-              type="button"
-              role="switch"
-              :aria-checked="twoWayProgressSync"
-              class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-              :class="twoWayProgressSync ? 'bg-primary' : 'bg-muted'"
-              @click="twoWayProgressSync = !twoWayProgressSync"
-            >
-              <span
-                class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
-                :class="twoWayProgressSync ? 'translate-x-4' : 'translate-x-0'"
-              />
-            </button>
-          </div>
-
-          <p class="text-xs text-muted-foreground">Define when Kobo reading progress marks a book as "Reading" or "Finished" in your library.</p>
-
-          <div class="grid grid-cols-2 gap-4">
-            <div>
-              <label class="block text-xs font-medium text-muted-foreground mb-1.5">Mark as Reading (%)</label>
-              <input
-                v-model.number="readingThreshold"
-                type="number"
-                min="0"
-                max="99"
-                class="w-full h-9 px-3 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-              />
-            </div>
-            <div>
-              <label class="block text-xs font-medium text-muted-foreground mb-1.5">Mark as Finished (%)</label>
-              <input
-                v-model.number="finishedThreshold"
-                type="number"
-                min="1"
-                max="100"
-                class="w-full h-9 px-3 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-              />
-            </div>
-            <div>
-              <label class="block text-xs font-medium text-muted-foreground mb-1.5">KEPUB conversion limit (MB)</label>
-              <input
-                v-model.number="kepubConversionLimitMb"
-                type="number"
-                min="1"
-                class="w-full h-9 px-3 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-              />
+            <div class="space-y-2">
+              <div class="flex items-center justify-between">
+                <label class="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">Mark as Finished</label>
+                <span class="text-xs font-mono text-primary font-bold">{{ finishedThreshold }}%</span>
+              </div>
+              <input v-model.number="finishedThreshold" type="range" min="1" max="100" step="1" class="w-full accent-primary cursor-pointer" />
+              <p class="text-[10px] text-muted-foreground leading-tight">Percentage threshold to mark a book as "Finished".</p>
             </div>
           </div>
 
-          <div v-if="settingsError" class="text-xs text-destructive">{{ settingsError }}</div>
+          <div class="pt-2">
+            <div class="flex items-center justify-between mb-2">
+              <label class="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">KEPUB conversion limit</label>
+              <span class="text-xs font-mono text-primary font-bold">{{ kepubConversionLimitMb }} MB</span>
+            </div>
+            <input v-model.number="kepubConversionLimitMb" type="range" min="1" max="500" step="5" class="w-full accent-primary cursor-pointer" />
+            <p class="text-[10px] text-muted-foreground mt-2">Skip conversion for files larger than this to save server resources.</p>
+          </div>
+        </div>
 
-          <button
-            class="px-4 py-2 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-            :disabled="savingSettings"
-            @click="saveSettings()"
-          >
-            {{ savingSettings ? 'Saving...' : 'Save' }}
+        <div class="px-5 py-4 bg-muted/30 flex items-center justify-between">
+          <div v-if="settingsError" class="text-xs text-destructive font-medium flex items-center gap-1.5"><X :size="14" /> {{ settingsError }}</div>
+          <div v-else class="text-[10px] text-muted-foreground italic">Changes must be saved to take effect.</div>
+
+          <button class="settings-btn-primary" :disabled="savingSettings" @click="saveSettings()">
+            {{ savingSettings ? 'Saving...' : 'Save Sync Settings' }}
           </button>
         </div>
       </div>
+    </div>
 
-      <!-- Help -->
-      <div class="border border-border rounded-lg p-5 bg-card">
-        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">How to sync</p>
-        <ol class="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
-          <li>Add a device above and copy the sync URL.</li>
-          <li>On your Kobo device, go to Settings - Account - Add account - Other.</li>
-          <li>Enter the sync URL and any username/password (both are ignored).</li>
-          <li>Enable "Sync to Kobo" on any collection from the Collections view.</li>
-          <li>Sync your Kobo device.</li>
-        </ol>
+    <!-- Help -->
+    <div class="border border-border rounded-lg bg-muted/40 p-6">
+      <div class="flex items-center gap-2 mb-4 text-foreground/80">
+        <Tablet :size="18" />
+        <p class="text-sm font-bold uppercase tracking-widest">Setup Guide</p>
       </div>
-    </template>
+      <div class="grid sm:grid-cols-2 gap-8">
+        <div class="space-y-4">
+          <div class="flex gap-4">
+            <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold shrink-0">1</div>
+            <p class="text-sm text-muted-foreground leading-relaxed">
+              Register your device above and copy the unique <span class="text-foreground font-medium">Sync URL</span>.
+            </p>
+          </div>
+          <div class="flex gap-4">
+            <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold shrink-0">2</div>
+            <p class="text-sm text-muted-foreground leading-relaxed">
+              On your Kobo, go to <span class="text-foreground font-medium">Settings → Account → Add account → Other</span>.
+            </p>
+          </div>
+          <div class="flex gap-4">
+            <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold shrink-0">3</div>
+            <p class="text-sm text-muted-foreground leading-relaxed">Enter the URL. Use any dummy text for username/password.</p>
+          </div>
+        </div>
+        <div class="space-y-4">
+          <div class="flex gap-4">
+            <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold shrink-0">4</div>
+            <p class="text-sm text-muted-foreground leading-relaxed">
+              Enable <span class="text-foreground font-medium">"Sync to Kobo"</span> on any collection in the app.
+            </p>
+          </div>
+          <div class="flex gap-4">
+            <div class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold shrink-0">5</div>
+            <p class="text-sm text-muted-foreground leading-relaxed">
+              Perform a <span class="text-foreground font-medium">Sync</span> on your device to fetch your books.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
 </template>
diff --git a/client/src/features/settings/LibrariesSettings.vue b/client/src/features/settings/LibrariesSettings.vue
index ffbac5034..37f4a1c07 100644
--- a/client/src/features/settings/LibrariesSettings.vue
+++ b/client/src/features/settings/LibrariesSettings.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { FolderOpen, Plus, RefreshCw, Pencil, Trash2, Images, FileEdit } from 'lucide-vue-next'
+import { FolderOpen, Plus, RefreshCw, Pencil, Trash2, Images, FileEdit, MoreHorizontal, BookOpen, HardDrive, Eye } from 'lucide-vue-next'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 import * as LucideIcons from 'lucide-vue-next'
 import { toast } from 'vue-sonner'
 import { api } from '@/lib/api'
@@ -10,7 +11,7 @@ import LibraryCreatorModal from '@/features/library/components/LibraryCreatorMod
 import { useLibraries } from '@/features/library/composables/useLibraries'
 import { useLibraryFileSync } from '@/features/library/composables/useLibraryFileSync'
 import { useScanProgress, getSocket } from '@/features/scanner/composables/useScanProgress'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 
 const route = useRoute()
 const router = useRouter()
@@ -189,7 +190,6 @@ async function confirmDelete() {
       deletingLibrary.value = null
       await refreshLibraries()
       loadAllStats()
-      // If currently viewing the deleted library, navigate to the first remaining one
       if (route.name === 'library' && Number(route.params.id) === deletedId) {
         const next = libraries.value[0]
         if (next) {
@@ -242,153 +242,145 @@ function coverRefreshLabel(libraryId: number): string {
 </script>
 
 <template>
-  <!-- Header -->
-  <div class="flex items-start justify-between mb-8">
-    <div>
-      <h2 class="settings-title">Libraries</h2>
-      <p class="settings-subtitle">Manage your media libraries and trigger content scans.</p>
-    </div>
-    <div class="flex items-center gap-2 shrink-0 ml-4">
-      <button
-        class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors text-muted-foreground hover:text-foreground disabled:opacity-50"
-        :disabled="scanningAll || libraries.length === 0"
-        @click="scanAll"
-      >
-        <RefreshCw :size="12" :class="scanningAll ? 'animate-spin' : ''" />
-        {{ scanningAll ? 'Scanning...' : 'Scan All' }}
-      </button>
-      <button
-        class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
-        @click="openCreate"
-      >
-        <Plus :size="12" />
-        Add Library
-      </button>
-    </div>
-  </div>
+  <SettingsPageHeader title="Libraries" subtitle="Manage your media libraries and trigger content scans.">
+    <button class="settings-btn-outline" :disabled="scanningAll || libraries.length === 0" @click="scanAll">
+      <RefreshCw :size="14" :class="scanningAll ? 'animate-spin' : ''" />
+      {{ scanningAll ? 'Scanning...' : 'Scan All' }}
+    </button>
+    <button class="settings-btn-primary" @click="openCreate">
+      <Plus :size="14" />
+      Add Library
+    </button>
+  </SettingsPageHeader>
 
-  <!-- Library list -->
-  <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-    <div v-for="lib in libraries" :key="lib.id" class="bg-card px-5 py-4">
-      <div class="flex items-center gap-4">
-        <RouterLink
-          :to="{ name: 'library', params: { id: lib.id } }"
-          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors"
-        >
-          <component :is="getIconComponent(lib.icon)" :size="17" class="text-primary" />
-        </RouterLink>
-        <div class="flex-1 min-w-0">
-          <RouterLink :to="{ name: 'library', params: { id: lib.id } }" class="settings-label hover:text-primary transition-colors truncate block">{{
-            lib.name
-          }}</RouterLink>
-          <div class="flex items-center gap-3 mt-0.5">
-            <span v-if="stats[lib.id]" class="text-xs text-muted-foreground">
-              {{ stats[lib.id]?.totalBooks }} book{{ stats[lib.id]?.totalBooks === 1 ? '' : 's' }}
-              <span v-if="(stats[lib.id]?.totalSizeBytes ?? 0) > 0"> &middot; {{ formatBytes(stats[lib.id]?.totalSizeBytes ?? 0) }}</span>
-            </span>
-            <span v-else class="text-xs text-muted-foreground">
-              Added {{ new Date(lib.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) }}
-            </span>
-            <span v-if="lib.watch" class="text-xs text-primary/70">Watching</span>
-          </div>
-          <!-- Scan progress bar -->
-          <div v-if="getProgress(lib.id)" class="mt-2">
-            <div class="flex items-center justify-between mb-1">
-              <span class="text-xs" :class="getProgress(lib.id)?.status === 'failed' ? 'text-destructive' : 'text-muted-foreground'">
-                {{ scanProgressLabel(lib.id) }}
+  <!-- Library cards -->
+  <div class="space-y-3">
+    <div v-for="lib in libraries" :key="lib.id" class="rounded-xl border border-border bg-card overflow-hidden">
+      <div class="px-5 py-4">
+        <div class="flex items-center gap-4">
+          <!-- Icon -->
+          <RouterLink
+            :to="{ name: 'library', params: { id: lib.id } }"
+            class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 hover:bg-primary/15 transition-colors"
+          >
+            <component :is="getIconComponent(lib.icon)" :size="22" class="text-primary" />
+          </RouterLink>
+
+          <!-- Name + stats -->
+          <div class="flex-1 min-w-0">
+            <RouterLink
+              :to="{ name: 'library', params: { id: lib.id } }"
+              class="text-base font-semibold text-foreground hover:text-primary transition-colors truncate block leading-snug"
+            >
+              {{ lib.name }}
+            </RouterLink>
+            <div class="flex items-center flex-wrap gap-x-3 gap-y-1 mt-1.5">
+              <span v-if="stats[lib.id]" class="flex items-center gap-1 text-xs text-muted-foreground">
+                <BookOpen :size="11" />
+                {{ stats[lib.id]?.totalBooks }} book{{ stats[lib.id]?.totalBooks === 1 ? '' : 's' }}
+              </span>
+              <span v-if="stats[lib.id] && (stats[lib.id]?.totalSizeBytes ?? 0) > 0" class="flex items-center gap-1 text-xs text-muted-foreground">
+                <HardDrive :size="11" />
+                {{ formatBytes(stats[lib.id]?.totalSizeBytes ?? 0) }}
+              </span>
+              <span v-if="!stats[lib.id]" class="text-xs text-muted-foreground">
+                Added {{ new Date(lib.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) }}
+              </span>
+              <span v-if="lib.watch" class="flex items-center gap-1 text-xs font-medium text-primary/80">
+                <Eye :size="11" />
+                Watching
               </span>
             </div>
-            <div v-if="getProgress(lib.id)?.status === 'running'" class="h-1 w-full rounded-full bg-muted overflow-hidden">
-              <div
-                class="h-full rounded-full bg-primary transition-all duration-300"
-                :style="{
-                  width:
-                    getProgress(lib.id)!.total > 0 ? `${Math.floor((getProgress(lib.id)!.processed / getProgress(lib.id)!.total) * 100)}%` : '100%',
-                  animation: getProgress(lib.id)!.total === 0 ? 'pulse 1.5s ease-in-out infinite' : 'none',
-                }"
-              />
-            </div>
           </div>
-          <!-- Cover refresh progress bar -->
-          <div v-if="getCoverRefreshProgress(lib.id)" class="mt-2">
-            <div class="flex items-center justify-between mb-1">
-              <span class="text-xs text-muted-foreground">{{ coverRefreshLabel(lib.id) }}</span>
-            </div>
-            <div v-if="getCoverRefreshProgress(lib.id)?.status === 'running'" class="h-1 w-full rounded-full bg-muted overflow-hidden">
-              <div
-                class="h-full rounded-full bg-accent transition-all duration-300"
-                :style="{
-                  width:
-                    getCoverRefreshProgress(lib.id)!.total > 0
-                      ? `${Math.floor((getCoverRefreshProgress(lib.id)!.processed / getCoverRefreshProgress(lib.id)!.total) * 100)}%`
-                      : '0%',
-                }"
-              />
-            </div>
+
+          <!-- Actions -->
+          <div class="flex items-center gap-2 shrink-0">
+            <button class="settings-btn-outline" :disabled="isScanning(lib.id)" @click="scan(lib)">
+              <RefreshCw :size="14" :class="isScanning(lib.id) ? 'animate-spin' : ''" />
+              {{ isScanning(lib.id) ? 'Scanning...' : 'Scan' }}
+            </button>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <button
+                  class="flex items-center justify-center w-9 h-9 rounded-lg border border-border hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+                >
+                  <MoreHorizontal :size="16" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" class="w-52">
+                <DropdownMenuItem @click="openEdit(lib)">
+                  <Pencil />
+                  Edit library
+                </DropdownMenuItem>
+                <DropdownMenuItem :disabled="isRefreshingCovers(lib.id)" @click="refreshCovers(lib)">
+                  <Images :class="isRefreshingCovers(lib.id) ? 'animate-pulse' : ''" />
+                  Refresh covers
+                </DropdownMenuItem>
+                <DropdownMenuItem :disabled="!!fileSyncingMap[lib.id] || !fileWriteEnabled" @click="promptSyncFiles(lib)">
+                  <FileEdit :class="fileSyncingMap[lib.id] ? 'animate-pulse' : ''" />
+                  <span class="flex-1">Sync metadata to files</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive" @click="openDelete(lib)">
+                  <Trash2 />
+                  Delete library
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
-        <div class="flex items-center gap-1.5 shrink-0">
-          <Tooltip>
-            <TooltipTrigger as-child>
-              <button class="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" @click="openEdit(lib)">
-                <Pencil :size="13" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>Edit library</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger as-child>
-              <button
-                class="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-                :disabled="!!fileSyncingMap[lib.id] || !fileWriteEnabled"
-                @click="promptSyncFiles(lib)"
-              >
-                <FileEdit :size="13" :class="fileSyncingMap[lib.id] ? 'animate-pulse' : ''" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {{ fileWriteEnabled ? 'Sync metadata to files' : 'Sync metadata to files (enable in Maintenance settings)' }}
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger as-child>
-              <button
-                class="p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
-                @click="openDelete(lib)"
-              >
-                <Trash2 :size="13" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>Delete library</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger as-child>
-              <button
-                class="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50"
-                :disabled="isRefreshingCovers(lib.id)"
-                @click="refreshCovers(lib)"
-              >
-                <Images :size="13" :class="isRefreshingCovers(lib.id) ? 'animate-pulse' : ''" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>Refresh covers</TooltipContent>
-          </Tooltip>
-          <button
-            class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors text-muted-foreground hover:text-foreground disabled:opacity-50"
-            :disabled="isScanning(lib.id)"
-            @click="scan(lib)"
-          >
-            <RefreshCw :size="12" :class="isScanning(lib.id) ? 'animate-spin' : ''" />
-            {{ isScanning(lib.id) ? 'Scanning...' : 'Scan' }}
-          </button>
+      </div>
+
+      <!-- Progress bars (shown below the main row, full width) -->
+      <div v-if="getProgress(lib.id) || getCoverRefreshProgress(lib.id)" class="border-t border-border px-5 py-3 space-y-2.5">
+        <div v-if="getProgress(lib.id)">
+          <div class="flex items-center justify-between mb-1.5">
+            <span class="text-xs font-medium" :class="getProgress(lib.id)?.status === 'failed' ? 'text-destructive' : 'text-muted-foreground'">
+              {{ scanProgressLabel(lib.id) }}
+            </span>
+          </div>
+          <div v-if="getProgress(lib.id)?.status === 'running'" class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
+            <div
+              class="h-full rounded-full bg-primary transition-all duration-300"
+              :style="{
+                width:
+                  getProgress(lib.id)!.total > 0 ? `${Math.floor((getProgress(lib.id)!.processed / getProgress(lib.id)!.total) * 100)}%` : '100%',
+                animation: getProgress(lib.id)!.total === 0 ? 'pulse 1.5s ease-in-out infinite' : 'none',
+              }"
+            />
+          </div>
+        </div>
+        <div v-if="getCoverRefreshProgress(lib.id)">
+          <div class="flex items-center justify-between mb-1.5">
+            <span class="text-xs font-medium text-muted-foreground">{{ coverRefreshLabel(lib.id) }}</span>
+          </div>
+          <div v-if="getCoverRefreshProgress(lib.id)?.status === 'running'" class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
+            <div
+              class="h-full rounded-full bg-accent transition-all duration-300"
+              :style="{
+                width:
+                  getCoverRefreshProgress(lib.id)!.total > 0
+                    ? `${Math.floor((getCoverRefreshProgress(lib.id)!.processed / getCoverRefreshProgress(lib.id)!.total) * 100)}%`
+                    : '0%',
+              }"
+            />
+          </div>
         </div>
       </div>
     </div>
 
-    <div v-if="libraries.length === 0" class="bg-card px-5 py-12 text-center">
-      <FolderOpen :size="28" class="text-muted-foreground/30 mx-auto mb-3" />
-      <p class="text-sm text-muted-foreground">No libraries yet.</p>
-      <button class="mt-3 text-xs text-primary hover:underline" @click="openCreate">Create your first library</button>
+    <!-- Empty state -->
+    <div v-if="libraries.length === 0" class="rounded-xl border border-dashed border-border bg-card/50 px-8 py-16 text-center">
+      <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-muted mx-auto mb-4">
+        <FolderOpen :size="32" class="text-muted-foreground/60" />
+      </div>
+      <p class="text-sm font-medium text-foreground mb-1">No libraries yet</p>
+      <p class="text-sm text-muted-foreground mb-5">Add a library to start organizing your books.</p>
+      <button class="settings-btn-primary" @click="openCreate">
+        <Plus :size="14" />
+        Add your first library
+      </button>
     </div>
   </div>
 
diff --git a/client/src/features/settings/MaintenanceSettings.vue b/client/src/features/settings/MaintenanceSettings.vue
index bf8379033..90ff74fde 100644
--- a/client/src/features/settings/MaintenanceSettings.vue
+++ b/client/src/features/settings/MaintenanceSettings.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { Check, RefreshCw, Sparkles, FileEdit } from 'lucide-vue-next'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 import type { GlobalFileWriteSettings } from '@projectx/types'
 import { DEFAULT_FILE_WRITE_SETTINGS } from '@projectx/types'
 
@@ -96,10 +98,7 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
 </script>
 
 <template>
-  <div class="mb-8">
-    <h2 class="settings-title">Maintenance</h2>
-    <p class="settings-subtitle">System maintenance and data operations.</p>
-  </div>
+  <SettingsPageHeader title="Maintenance" subtitle="System maintenance and data operations." />
 
   <div>
     <p class="settings-group-label">Recommendations</p>
@@ -121,11 +120,7 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
             <p v-if="error" class="text-xs text-destructive mt-2">{{ error }}</p>
           </div>
         </div>
-        <button
-          class="flex shrink-0 items-center gap-2 h-8 px-3 rounded-md border border-border bg-background text-sm text-foreground hover:bg-muted transition-colors disabled:opacity-50"
-          :disabled="running"
-          @click="rebuildEmbeddings"
-        >
+        <button class="settings-btn-outline" :disabled="running" @click="rebuildEmbeddings">
           <RefreshCw :size="13" :class="running ? 'animate-spin' : ''" />
           {{ running ? 'Running...' : 'Run' }}
         </button>
@@ -149,22 +144,16 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
             </p>
           </div>
         </div>
-        <button
-          class="relative shrink-0 w-10 h-6 rounded-full transition-colors disabled:opacity-50"
-          :class="writeSettings.enabled ? 'bg-primary' : 'bg-muted'"
+        <ToggleSwitch
+          :model-value="writeSettings.enabled"
           :disabled="writeSaving"
-          @click="
+          @update:model-value="
             toggle(
               () => writeSettings.enabled,
               (v) => (writeSettings.enabled = v),
             )
           "
-        >
-          <span
-            class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform"
-            :class="writeSettings.enabled ? 'translate-x-4' : 'translate-x-0'"
-          />
-        </button>
+        />
       </div>
 
       <template v-if="writeSettings.enabled">
@@ -174,22 +163,16 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
             <p class="settings-label">Include cover image</p>
             <p class="settings-hint">Writes the stored cover back into the file (EPUB only).</p>
           </div>
-          <button
-            class="relative shrink-0 w-10 h-6 rounded-full transition-colors disabled:opacity-50"
-            :class="writeSettings.writeCover ? 'bg-primary' : 'bg-muted'"
+          <ToggleSwitch
+            :model-value="writeSettings.writeCover"
             :disabled="writeSaving"
-            @click="
+            @update:model-value="
               toggle(
                 () => writeSettings.writeCover,
                 (v) => (writeSettings.writeCover = v),
               )
             "
-          >
-            <span
-              class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform"
-              :class="writeSettings.writeCover ? 'translate-x-4' : 'translate-x-0'"
-            />
-          </button>
+          />
         </div>
 
         <!-- EPUB row -->
@@ -199,22 +182,16 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
               <p class="settings-label">EPUB</p>
               <p class="settings-hint">Writes metadata into the OPF file inside the EPUB archive.</p>
             </div>
-            <button
-              class="relative shrink-0 w-10 h-6 rounded-full transition-colors disabled:opacity-50"
-              :class="writeSettings.epub.enabled ? 'bg-primary' : 'bg-muted'"
+            <ToggleSwitch
+              :model-value="writeSettings.epub.enabled"
               :disabled="writeSaving"
-              @click="
+              @update:model-value="
                 toggle(
                   () => writeSettings.epub.enabled,
                   (v) => (writeSettings.epub.enabled = v),
                 )
               "
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform"
-                :class="writeSettings.epub.enabled ? 'translate-x-4' : 'translate-x-0'"
-              />
-            </button>
+            />
           </div>
           <div v-if="writeSettings.epub.enabled" class="flex items-center justify-between gap-4 pl-0">
             <p class="text-sm text-muted-foreground">Max file size (MB)</p>
@@ -224,7 +201,7 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
               min="1"
               max="2000"
               :disabled="writeSaving"
-              class="w-24 text-sm border border-border rounded-md px-3 py-1.5 bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
+              class="input-field w-24"
               @change="saveWriteSettings"
             />
           </div>
@@ -237,22 +214,16 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
               <p class="settings-label">PDF</p>
               <p class="settings-hint">Embeds metadata into PDF Info dictionary and XMP stream.</p>
             </div>
-            <button
-              class="relative shrink-0 w-10 h-6 rounded-full transition-colors disabled:opacity-50"
-              :class="writeSettings.pdf.enabled ? 'bg-primary' : 'bg-muted'"
+            <ToggleSwitch
+              :model-value="writeSettings.pdf.enabled"
               :disabled="writeSaving"
-              @click="
+              @update:model-value="
                 toggle(
                   () => writeSettings.pdf.enabled,
                   (v) => (writeSettings.pdf.enabled = v),
                 )
               "
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform"
-                :class="writeSettings.pdf.enabled ? 'translate-x-4' : 'translate-x-0'"
-              />
-            </button>
+            />
           </div>
           <div v-if="writeSettings.pdf.enabled" class="flex items-center justify-between gap-4">
             <p class="text-sm text-muted-foreground">Max file size (MB)</p>
@@ -262,7 +233,7 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
               min="1"
               max="2000"
               :disabled="writeSaving"
-              class="w-24 text-sm border border-border rounded-md px-3 py-1.5 bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
+              class="input-field w-24"
               @change="saveWriteSettings"
             />
           </div>
@@ -275,22 +246,16 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
               <p class="settings-label">Comic archives</p>
               <p class="settings-hint">Writes ComicInfo.xml into CBZ and CB7 archives.</p>
             </div>
-            <button
-              class="relative shrink-0 w-10 h-6 rounded-full transition-colors disabled:opacity-50"
-              :class="writeSettings.cbx.enabled ? 'bg-primary' : 'bg-muted'"
+            <ToggleSwitch
+              :model-value="writeSettings.cbx.enabled"
               :disabled="writeSaving"
-              @click="
+              @update:model-value="
                 toggle(
                   () => writeSettings.cbx.enabled,
                   (v) => (writeSettings.cbx.enabled = v),
                 )
               "
-            >
-              <span
-                class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform"
-                :class="writeSettings.cbx.enabled ? 'translate-x-4' : 'translate-x-0'"
-              />
-            </button>
+            />
           </div>
           <template v-if="writeSettings.cbx.enabled">
             <div class="flex items-center gap-2 flex-wrap">
@@ -322,7 +287,7 @@ function toggleCbxFormat(fmt: 'cbz' | 'cb7') {
                 min="1"
                 max="5000"
                 :disabled="writeSaving"
-                class="w-24 text-sm border border-border rounded-md px-3 py-1.5 bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
+                class="input-field w-24"
                 @change="saveWriteSettings"
               />
             </div>
diff --git a/client/src/features/settings/OidcSettings.vue b/client/src/features/settings/OidcSettings.vue
index fd9d22221..4293de705 100644
--- a/client/src/features/settings/OidcSettings.vue
+++ b/client/src/features/settings/OidcSettings.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue'
 import { api } from '@/lib/api'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 interface OidcConfig {
   enabled: boolean
@@ -92,10 +94,7 @@ async function testConnection() {
 </script>
 
 <template>
-  <div class="mb-8">
-    <h2 class="settings-title">OIDC / SSO</h2>
-    <p class="settings-subtitle">Configure an OpenID Connect provider for single sign-on.</p>
-  </div>
+  <SettingsPageHeader title="OIDC / SSO" subtitle="Configure an OpenID Connect provider for single sign-on." />
 
   <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
 
@@ -109,19 +108,7 @@ async function testConnection() {
             <p class="settings-label">Enable OIDC</p>
             <p class="settings-hint">Show SSO login button and allow OIDC authentication.</p>
           </div>
-          <button
-            type="button"
-            role="switch"
-            :aria-checked="form.enabled"
-            class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
-            :class="form.enabled ? 'bg-primary' : 'bg-input'"
-            @click="form.enabled = !form.enabled"
-          >
-            <span
-              class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
-              :class="form.enabled ? 'translate-x-4' : 'translate-x-0.5'"
-            />
-          </button>
+          <ToggleSwitch v-model="form.enabled" />
         </div>
       </div>
     </div>
@@ -135,12 +122,7 @@ async function testConnection() {
             <p class="settings-label">Provider Name</p>
             <p class="settings-hint">Shown on the login button.</p>
           </div>
-          <input
-            v-model="form.providerName"
-            type="text"
-            placeholder="Authentik"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-          />
+          <input v-model="form.providerName" type="text" placeholder="Authentik" class="input-field w-52" />
         </div>
         <div class="flex items-start justify-between gap-8 px-5 py-4 bg-card">
           <div class="shrink-0 pt-0.5">
@@ -149,16 +131,11 @@ async function testConnection() {
           </div>
           <div class="flex flex-col items-end gap-2">
             <div class="flex items-center gap-2">
-              <input
-                v-model="form.issuerUri"
-                type="url"
-                placeholder="https://accounts.example.com"
-                class="w-64 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-              />
+              <input v-model="form.issuerUri" type="url" placeholder="https://accounts.example.com" class="input-field w-64" />
               <button
                 type="button"
                 :disabled="testing || !form.issuerUri"
-                class="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50 transition-colors shrink-0"
+                class="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50 transition-colors shrink-0 focus:outline-none focus:ring-2 focus:ring-primary/50"
                 @click="testConnection"
               >
                 {{ testing ? 'Testing...' : 'Test' }}
@@ -177,11 +154,7 @@ async function testConnection() {
         </div>
         <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
           <p class="settings-label shrink-0">Client ID</p>
-          <input
-            v-model="form.clientId"
-            type="text"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-          />
+          <input v-model="form.clientId" type="text" class="input-field w-52" />
         </div>
         <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
           <p class="settings-label shrink-0">Client Secret</p>
@@ -190,16 +163,12 @@ async function testConnection() {
             type="password"
             placeholder="Leave blank to keep existing"
             autocomplete="new-password"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
+            class="input-field w-52"
           />
         </div>
         <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
           <p class="settings-label shrink-0">Scopes</p>
-          <input
-            v-model="form.scopes"
-            type="text"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-          />
+          <input v-model="form.scopes" type="text" class="input-field w-52" />
         </div>
       </div>
     </div>
@@ -210,35 +179,19 @@ async function testConnection() {
       <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
         <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
           <p class="settings-label shrink-0">Username claim</p>
-          <input
-            v-model="form.claimMapping.username"
-            type="text"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-          />
+          <input v-model="form.claimMapping.username" type="text" class="input-field w-52" />
         </div>
         <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
           <p class="settings-label shrink-0">Name claim</p>
-          <input
-            v-model="form.claimMapping.name"
-            type="text"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-          />
+          <input v-model="form.claimMapping.name" type="text" class="input-field w-52" />
         </div>
         <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
           <p class="settings-label shrink-0">Email claim</p>
-          <input
-            v-model="form.claimMapping.email"
-            type="text"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-          />
+          <input v-model="form.claimMapping.email" type="text" class="input-field w-52" />
         </div>
         <div class="flex items-center justify-between gap-8 px-5 py-4 bg-card">
           <p class="settings-label shrink-0">Groups claim</p>
-          <input
-            v-model="form.claimMapping.groups"
-            type="text"
-            class="w-52 rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
-          />
+          <input v-model="form.claimMapping.groups" type="text" class="input-field w-52" />
         </div>
       </div>
     </div>
@@ -252,49 +205,21 @@ async function testConnection() {
             <p class="settings-label">Auto-provision users</p>
             <p class="settings-hint">Create accounts on first OIDC login if user does not exist.</p>
           </div>
-          <button
-            type="button"
-            role="switch"
-            :aria-checked="form.autoProvision.enabled"
-            class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
-            :class="form.autoProvision.enabled ? 'bg-primary' : 'bg-input'"
-            @click="form.autoProvision.enabled = !form.autoProvision.enabled"
-          >
-            <span
-              class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
-              :class="form.autoProvision.enabled ? 'translate-x-4' : 'translate-x-0.5'"
-            />
-          </button>
+          <ToggleSwitch v-model="form.autoProvision.enabled" />
         </div>
         <div class="flex items-center justify-between px-5 py-4 bg-card">
           <div>
             <p class="settings-label">Allow local account linking</p>
             <p class="settings-hint">Link OIDC identity to an existing local account by username match.</p>
           </div>
-          <button
-            type="button"
-            role="switch"
-            :aria-checked="form.autoProvision.allowLocalLinking"
-            class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
-            :class="form.autoProvision.allowLocalLinking ? 'bg-primary' : 'bg-input'"
-            @click="form.autoProvision.allowLocalLinking = !form.autoProvision.allowLocalLinking"
-          >
-            <span
-              class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
-              :class="form.autoProvision.allowLocalLinking ? 'translate-x-4' : 'translate-x-0.5'"
-            />
-          </button>
+          <ToggleSwitch v-model="form.autoProvision.allowLocalLinking" />
         </div>
       </div>
     </div>
 
     <!-- Save -->
     <div class="flex items-center gap-3">
-      <button
-        type="submit"
-        :disabled="saving"
-        class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
-      >
+      <button type="submit" :disabled="saving" class="settings-btn-primary">
         {{ saving ? 'Saving...' : 'Save changes' }}
       </button>
       <p v-if="saveSuccess" class="text-sm text-green-600">Saved.</p>
diff --git a/client/src/features/settings/OpdsSettings.vue b/client/src/features/settings/OpdsSettings.vue
index 98caf294c..5ff4fe262 100644
--- a/client/src/features/settings/OpdsSettings.vue
+++ b/client/src/features/settings/OpdsSettings.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from 'vue'
 import { Plus, Trash2, Copy, Check, Rss } from 'lucide-vue-next'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 import { api } from '@/lib/api'
 import { usePermissions } from '@/features/auth/composables/usePermissions'
 import type { OpdsUser, OpdsSortOrder } from '@projectx/types'
@@ -124,143 +126,116 @@ async function deleteUser(user: OpdsUser) {
 </script>
 
 <template>
-    <div class="mb-8">
-      <h2 class="settings-title">OPDS</h2>
-      <p class="settings-subtitle">
-        Connect OPDS-compatible reading apps like KOReader, Moon+ Reader, or Thorium Reader to your library.
-      </p>
+  <SettingsPageHeader title="OPDS" subtitle="Connect OPDS-compatible reading apps like KOReader, Moon+ Reader, or Thorium Reader to your library." />
+
+  <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
+  <div v-else-if="error" class="text-sm text-destructive">{{ error }}</div>
+  <template v-else>
+    <!-- Server Toggle -->
+    <div v-if="canManageSettings" class="mb-6">
+      <p class="settings-group-label">Server</p>
+      <div class="border border-border rounded-lg overflow-hidden">
+        <div class="flex items-center justify-between px-5 py-4 bg-card">
+          <div>
+            <p class="settings-label">OPDS Catalog Server</p>
+            <p class="settings-hint">Allow OPDS clients to browse and download books</p>
+          </div>
+          <ToggleSwitch :model-value="opdsEnabled" @update:model-value="toggleOpds()" />
+        </div>
+      </div>
     </div>
 
-    <div v-if="loading" class="text-sm text-muted-foreground">Loading...</div>
-    <div v-else-if="error" class="text-sm text-destructive">{{ error }}</div>
-    <template v-else>
-      <!-- Server Toggle -->
-      <div v-if="canManageSettings" class="mb-6">
-        <p class="settings-group-label">Server</p>
-        <div class="border border-border rounded-lg overflow-hidden">
-          <div class="flex items-center justify-between px-5 py-4 bg-card">
-            <div>
-              <p class="settings-label">OPDS Catalog Server</p>
-              <p class="settings-hint">Allow OPDS clients to browse and download books</p>
-            </div>
-            <button
-              class="w-11 h-6 rounded-full transition-colors relative shrink-0"
-              :class="opdsEnabled ? 'bg-primary' : 'bg-muted'"
-              @click="toggleOpds()"
-            >
-              <div
-                class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-                :class="opdsEnabled ? 'translate-x-6' : 'translate-x-1'"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Endpoint URL -->
-      <div v-if="opdsEnabled" class="mb-6">
-        <p class="settings-group-label">Endpoint</p>
-        <div class="border border-border rounded-lg overflow-hidden">
-          <div class="flex items-center gap-2 px-5 py-4 bg-card">
-            <Rss :size="14" class="text-muted-foreground shrink-0" />
-            <input :value="opdsUrl" readonly class="flex-1 text-sm bg-transparent text-foreground outline-none select-all min-w-0" />
-            <button
-              class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors shrink-0"
-              @click="copyUrl()"
-            >
-              <component :is="copied ? Check : Copy" :size="12" />
-              {{ copied ? 'Copied' : 'Copy' }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- OPDS Users -->
-      <div v-if="opdsEnabled" class="mb-6">
-        <div class="flex items-center justify-between mb-3">
-          <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">OPDS Accounts</p>
+    <!-- Endpoint URL -->
+    <div v-if="opdsEnabled" class="mb-6">
+      <p class="settings-group-label">Endpoint</p>
+      <div class="border border-border rounded-lg overflow-hidden">
+        <div class="flex items-center gap-2 px-5 py-4 bg-card">
+          <Rss :size="14" class="text-muted-foreground shrink-0" />
+          <input :value="opdsUrl" readonly class="flex-1 text-sm bg-transparent text-foreground outline-none select-all min-w-0" />
           <button
-            v-if="!showCreateForm"
-            class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
-            @click="showCreateForm = true"
+            class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-background hover:bg-muted transition-colors shrink-0"
+            @click="copyUrl()"
           >
-            <Plus :size="12" />
-            Add
+            <component :is="copied ? Check : Copy" :size="12" />
+            {{ copied ? 'Copied' : 'Copy' }}
           </button>
         </div>
+      </div>
+    </div>
 
-        <!-- Create form -->
-        <div v-if="showCreateForm" class="border border-border rounded-lg p-5 bg-card mb-4 space-y-4">
-          <div>
-            <label class="block text-xs font-medium text-muted-foreground mb-1.5">Username</label>
-            <input
-              v-model="createUsername"
-              type="text"
-              placeholder="e.g. koreader"
-              class="w-full h-9 px-3 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </div>
-          <div>
-            <label class="block text-xs font-medium text-muted-foreground mb-1.5">Password</label>
-            <input
-              v-model="createPassword"
-              type="password"
-              placeholder="Min 8 characters"
-              class="w-full h-9 px-3 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </div>
-          <div>
-            <label class="block text-xs font-medium text-muted-foreground mb-1.5">Default Sort</label>
-            <select
-              v-model="createSortOrder"
-              class="w-full h-9 px-3 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-            >
-              <option v-for="opt in sortOrderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
-            </select>
-          </div>
-          <div v-if="createError" class="text-xs text-destructive">{{ createError }}</div>
-          <div class="flex items-center gap-2 pt-1">
-            <button
-              class="px-4 py-2 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-              :disabled="creating || !createUsername || !createPassword"
-              @click="createUser()"
-            >
-              {{ creating ? 'Creating...' : 'Create' }}
-            </button>
-            <button
-              class="px-4 py-2 text-xs font-medium rounded-md border border-border bg-background text-foreground hover:bg-muted transition-colors"
-              @click="cancelCreate()"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
+    <!-- OPDS Users -->
+    <div v-if="opdsEnabled" class="mb-6">
+      <div class="flex items-center justify-between mb-3">
+        <p class="settings-group-label mb-0">OPDS Accounts</p>
+        <button
+          v-if="!showCreateForm"
+          class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          @click="showCreateForm = true"
+        >
+          <Plus :size="12" />
+          Add
+        </button>
+      </div>
 
-        <!-- Users list -->
-        <div v-if="opdsUsers.length === 0 && !showCreateForm" class="border border-border rounded-lg px-5 py-8 bg-card text-center">
-          <p class="text-sm text-muted-foreground">No OPDS accounts yet. Create one to start using OPDS clients.</p>
+      <!-- Create form -->
+      <div v-if="showCreateForm" class="border border-border rounded-lg p-5 bg-card mb-4 space-y-4">
+        <div>
+          <label class="block text-xs font-medium text-muted-foreground mb-1.5">Username</label>
+          <input v-model="createUsername" type="text" placeholder="e.g. koreader" class="input-field w-full" />
         </div>
-        <div v-else-if="opdsUsers.length > 0" class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-          <div v-for="user in opdsUsers" :key="user.id" class="flex items-center gap-3 px-5 py-3.5 bg-card">
-            <div class="flex-1 min-w-0">
-              <p class="settings-label truncate">{{ user.username }}</p>
-              <p class="settings-hint">{{ sortOrderLabel(user.sortOrder) }}</p>
-            </div>
-            <select
-              :value="user.sortOrder"
-              class="text-xs border border-border rounded-md px-2 py-1 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-              @change="updateSortOrder(user, ($event.target as HTMLSelectElement).value as OpdsSortOrder)"
-            >
-              <option v-for="opt in sortOrderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
-            </select>
-            <button
-              class="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
-              @click="deleteUser(user)"
-            >
-              <Trash2 :size="14" />
-            </button>
-          </div>
+        <div>
+          <label class="block text-xs font-medium text-muted-foreground mb-1.5">Password</label>
+          <input v-model="createPassword" type="password" placeholder="Min 8 characters" class="input-field w-full" />
+        </div>
+        <div>
+          <label class="block text-xs font-medium text-muted-foreground mb-1.5">Default Sort</label>
+          <select v-model="createSortOrder" class="select-field w-full">
+            <option v-for="opt in sortOrderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+          </select>
+        </div>
+        <div v-if="createError" class="text-xs text-destructive">{{ createError }}</div>
+        <div class="flex items-center gap-2 pt-1">
+          <button
+            class="px-4 py-2 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+            :disabled="creating || !createUsername || !createPassword"
+            @click="createUser()"
+          >
+            {{ creating ? 'Creating...' : 'Create' }}
+          </button>
+          <button
+            class="px-4 py-2 text-xs font-medium rounded-md border border-border bg-background text-foreground hover:bg-muted transition-colors"
+            @click="cancelCreate()"
+          >
+            Cancel
+          </button>
         </div>
       </div>
-    </template>
+
+      <!-- Users list -->
+      <div v-if="opdsUsers.length === 0 && !showCreateForm" class="border border-border rounded-lg px-5 py-8 bg-card text-center">
+        <p class="text-sm text-muted-foreground">No OPDS accounts yet. Create one to start using OPDS clients.</p>
+      </div>
+      <div v-else-if="opdsUsers.length > 0" class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+        <div v-for="user in opdsUsers" :key="user.id" class="flex items-center gap-3 px-5 py-3.5 bg-card">
+          <div class="flex-1 min-w-0">
+            <p class="settings-label truncate">{{ user.username }}</p>
+            <p class="settings-hint">{{ sortOrderLabel(user.sortOrder) }}</p>
+          </div>
+          <select
+            :value="user.sortOrder"
+            class="select-field text-xs h-auto py-1"
+            @change="updateSortOrder(user, ($event.target as HTMLSelectElement).value as OpdsSortOrder)"
+          >
+            <option v-for="opt in sortOrderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+          </select>
+          <button
+            class="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+            @click="deleteUser(user)"
+          >
+            <Trash2 :size="14" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
 </template>
diff --git a/client/src/features/settings/PdfSettings.vue b/client/src/features/settings/PdfSettings.vue
index 6138ce060..2083c9685 100644
--- a/client/src/features/settings/PdfSettings.vue
+++ b/client/src/features/settings/PdfSettings.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted } from 'vue'
 import type { PdfReaderSettings } from '@projectx/types'
 import { useReaderDefaultSettings } from '@/features/reader/composables/useReaderSettings'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const { effective, load, update, reset } = useReaderDefaultSettings<PdfReaderSettings>('pdf')
 
@@ -11,129 +12,123 @@ const showZoom = computed(() => effective.value.zoomMode === 'custom')
 </script>
 
 <template>
-    <div class="mb-8 flex items-start justify-between gap-4">
-      <div>
-        <h2 class="settings-title">PDF Reader</h2>
-        <p class="settings-subtitle">Default settings applied when opening PDF files.</p>
-      </div>
-      <button class="shrink-0 text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2" @click="reset()">
-        Reset to defaults
-      </button>
-    </div>
+  <SettingsPageHeader title="PDF Reader" subtitle="Default settings applied when opening PDF files.">
+    <button class="text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2" @click="reset()">
+      Reset to defaults
+    </button>
+  </SettingsPageHeader>
 
-    <!-- Layout -->
-    <div class="mb-6">
-      <p class="settings-group-label">Layout</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <!-- Scroll mode -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
+  <!-- Layout -->
+  <div class="mb-6">
+    <p class="settings-group-label">Layout</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <!-- Scroll mode -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Scroll mode</p>
+          <p class="settings-hint">Page flips one at a time; continuous scrolls through all pages</p>
+        </div>
+        <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.scrollMode === 'page' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ scrollMode: 'page' })"
+          >
+            Page
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.scrollMode === 'vertical' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ scrollMode: 'vertical' })"
+          >
+            Scrolled
+          </button>
+        </div>
+      </div>
+
+      <!-- Page spread -->
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Page spread</p>
+          <p class="settings-hint">Which page number starts on the right in two-page view</p>
+        </div>
+        <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.spread === 'none' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ spread: 'none' })"
+          >
+            None
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.spread === 'odd' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ spread: 'odd' })"
+          >
+            Odd
+          </button>
+          <button
+            class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+            :class="effective.spread === 'even' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
+            @click="update({ spread: 'even' })"
+          >
+            Even
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Zoom -->
+  <div class="mb-6">
+    <p class="settings-group-label">Zoom</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <!-- Zoom mode -->
+      <div class="px-5 py-4 bg-card">
+        <div class="mb-3">
+          <p class="settings-label">Default fit</p>
+          <p class="settings-hint">How pages are scaled when a PDF is opened</p>
+        </div>
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="opt in [
+              { id: 'fit-page' as const, label: 'Fit Page' },
+              { id: 'fit-width' as const, label: 'Fit Width' },
+              { id: 'custom' as const, label: 'Custom' },
+            ]"
+            :key="opt.id"
+            class="h-8 px-3 text-xs border-2 transition-colors font-medium rounded-md"
+            :class="
+              effective.zoomMode === opt.id
+                ? 'border-primary text-primary bg-primary/8'
+                : 'border-border text-muted-foreground hover:border-muted-foreground/40 hover:text-foreground'
+            "
+            @click="update({ zoomMode: opt.id })"
+          >
+            {{ opt.label }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Custom scale (only shown when zoomMode is custom) -->
+      <div v-if="showZoom" class="px-5 py-4 bg-card">
+        <div class="flex items-center justify-between mb-3">
           <div>
-            <p class="settings-label">Scroll mode</p>
-            <p class="settings-hint">Page flips one at a time; continuous scrolls through all pages</p>
-          </div>
-          <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.scrollMode === 'page' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ scrollMode: 'page' })"
-            >
-              Page
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="
-                effective.scrollMode === 'continuous' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'
-              "
-              @click="update({ scrollMode: 'continuous' })"
-            >
-              Continuous
-            </button>
-          </div>
-        </div>
-
-        <!-- Page spread -->
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Page spread</p>
-            <p class="settings-hint">Which page number starts on the right in two-page view</p>
-          </div>
-          <div class="flex items-center gap-1 p-1 rounded-lg border border-border bg-muted/50">
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.spread === 'none' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ spread: 'none' })"
-            >
-              None
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.spread === 'odd' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ spread: 'odd' })"
-            >
-              Odd
-            </button>
-            <button
-              class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
-              :class="effective.spread === 'even' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'"
-              @click="update({ spread: 'even' })"
-            >
-              Even
-            </button>
+            <p class="settings-label">Zoom level</p>
+            <p class="settings-hint">Scale factor for custom zoom mode</p>
           </div>
+          <span class="settings-value">{{ Math.round(effective.customScale * 100) }}%</span>
         </div>
+        <input
+          type="range"
+          min="0.25"
+          max="4"
+          step="0.05"
+          class="w-full accent-primary cursor-pointer"
+          :value="effective.customScale"
+          @input="update({ customScale: Number(($event.target as HTMLInputElement).value) })"
+        />
       </div>
     </div>
-
-    <!-- Zoom -->
-    <div class="mb-6">
-      <p class="settings-group-label">Zoom</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <!-- Zoom mode -->
-        <div class="px-5 py-4 bg-card">
-          <div class="mb-3">
-            <p class="settings-label">Default fit</p>
-            <p class="settings-hint">How pages are scaled when a PDF is opened</p>
-          </div>
-          <div class="flex flex-wrap gap-2">
-            <button
-              v-for="opt in [
-                { id: 'fit-page' as const, label: 'Fit Page' },
-                { id: 'fit-width' as const, label: 'Fit Width' },
-                { id: 'custom' as const, label: 'Custom' },
-              ]"
-              :key="opt.id"
-              class="h-8 px-3 text-xs border-2 transition-colors font-medium rounded-md"
-              :class="
-                effective.zoomMode === opt.id
-                  ? 'border-primary text-primary bg-primary/8'
-                  : 'border-border text-muted-foreground hover:border-muted-foreground/40 hover:text-foreground'
-              "
-              @click="update({ zoomMode: opt.id })"
-            >
-              {{ opt.label }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Custom scale (only shown when zoomMode is custom) -->
-        <div v-if="showZoom" class="px-5 py-4 bg-card">
-          <div class="flex items-center justify-between mb-3">
-            <div>
-              <p class="settings-label">Zoom level</p>
-              <p class="settings-hint">Scale factor for custom zoom mode</p>
-            </div>
-            <span class="settings-value">{{ Math.round(effective.customScale * 100) }}%</span>
-          </div>
-          <input
-            type="range"
-            min="0.25"
-            max="4"
-            step="0.05"
-            class="w-full accent-primary cursor-pointer"
-            :value="effective.customScale"
-            @input="update({ customScale: Number(($event.target as HTMLInputElement).value) })"
-          />
-        </div>
-      </div>
-    </div>
+  </div>
 </template>
diff --git a/client/src/features/settings/ReaderSettings.vue b/client/src/features/settings/ReaderSettings.vue
index dc7f07123..b1af20781 100644
--- a/client/src/features/settings/ReaderSettings.vue
+++ b/client/src/features/settings/ReaderSettings.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { Monitor, Cloud } from 'lucide-vue-next'
 import { api } from '@/lib/api'
 import { useAuth } from '@/features/auth/composables/useAuth'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const { user } = useAuth()
 
@@ -22,64 +23,61 @@ async function setStorageMode(sync: boolean) {
 </script>
 
 <template>
-    <div class="mb-8">
-      <h2 class="settings-title">Reading</h2>
-      <p class="settings-subtitle">General behavior that applies across all reader types.</p>
-    </div>
+  <SettingsPageHeader title="Reading" subtitle="General behavior that applies across all reader types." />
 
-    <!-- Preference storage -->
-    <div class="mb-2">
-      <p class="settings-group-label">Where to save reader preferences</p>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <!-- This device only -->
+  <!-- Preference storage -->
+  <div class="mb-2">
+    <p class="settings-group-label">Where to save reader preferences</p>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <!-- This device only -->
+      <div
+        class="flex items-start gap-4 px-5 py-4 rounded-xl border-2 cursor-pointer transition-colors"
+        :class="!syncEnabled ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-muted-foreground/30'"
+        @click="setStorageMode(false)"
+      >
         <div
-          class="flex items-start gap-4 px-5 py-4 rounded-xl border-2 cursor-pointer transition-colors"
-          :class="!syncEnabled ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-muted-foreground/30'"
-          @click="setStorageMode(false)"
+          class="mt-0.5 flex items-center justify-center w-8 h-8 rounded-lg shrink-0 transition-colors"
+          :class="!syncEnabled ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'"
         >
-          <div
-            class="mt-0.5 flex items-center justify-center w-8 h-8 rounded-lg shrink-0 transition-colors"
-            :class="!syncEnabled ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'"
-          >
-            <Monitor :size="16" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-1">
-              <span class="settings-label">This device only</span>
-              <span v-if="!syncEnabled" class="text-xs font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-primary/15 text-primary">
-                Active
-              </span>
-            </div>
-            <span class="block text-xs text-muted-foreground leading-relaxed">
-              Preferences stay in your browser. Best if you always read on this device, or want different settings per device.
-            </span>
-          </div>
+          <Monitor :size="16" />
         </div>
-
-        <!-- My account -->
-        <div
-          class="flex items-start gap-4 px-5 py-4 rounded-xl border-2 cursor-pointer transition-colors"
-          :class="syncEnabled ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-muted-foreground/30'"
-          @click="setStorageMode(true)"
-        >
-          <div
-            class="mt-0.5 flex items-center justify-center w-8 h-8 rounded-lg shrink-0 transition-colors"
-            :class="syncEnabled ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'"
-          >
-            <Cloud :size="16" />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 mb-1">
-              <span class="settings-label">My account</span>
-              <span v-if="syncEnabled" class="text-xs font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-primary/15 text-primary">
-                Active
-              </span>
-            </div>
-            <span class="block text-xs text-muted-foreground leading-relaxed">
-              Preferences are saved to your account. Best if you log in from multiple devices and want a consistent experience everywhere.
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2 mb-1">
+            <span class="settings-label">This device only</span>
+            <span v-if="!syncEnabled" class="text-xs font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-primary/15 text-primary">
+              Active
             </span>
           </div>
+          <span class="block text-xs text-muted-foreground leading-relaxed">
+            Preferences stay in your browser. Best if you always read on this device, or want different settings per device.
+          </span>
+        </div>
+      </div>
+
+      <!-- My account -->
+      <div
+        class="flex items-start gap-4 px-5 py-4 rounded-xl border-2 cursor-pointer transition-colors"
+        :class="syncEnabled ? 'border-primary bg-primary/5' : 'border-border bg-card hover:border-muted-foreground/30'"
+        @click="setStorageMode(true)"
+      >
+        <div
+          class="mt-0.5 flex items-center justify-center w-8 h-8 rounded-lg shrink-0 transition-colors"
+          :class="syncEnabled ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'"
+        >
+          <Cloud :size="16" />
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2 mb-1">
+            <span class="settings-label">My account</span>
+            <span v-if="syncEnabled" class="text-xs font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded bg-primary/15 text-primary">
+              Active
+            </span>
+          </div>
+          <span class="block text-xs text-muted-foreground leading-relaxed">
+            Preferences are saved to your account. Best if you log in from multiple devices and want a consistent experience everywhere.
+          </span>
         </div>
       </div>
     </div>
+  </div>
 </template>
diff --git a/client/src/features/settings/ScannerSettings.vue b/client/src/features/settings/ScannerSettings.vue
index fc501b0f7..c6e6175a0 100644
--- a/client/src/features/settings/ScannerSettings.vue
+++ b/client/src/features/settings/ScannerSettings.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 
 const autoScan = ref(true)
 const scanOnStartup = ref(true)
@@ -18,107 +20,68 @@ const fileTypes = ref([
 </script>
 
 <template>
-    <div class="mb-8">
-      <h2 class="settings-title">Scanner</h2>
-      <p class="settings-subtitle">Configure when and how your libraries are scanned for new content.</p>
-    </div>
+  <SettingsPageHeader title="Scanner" subtitle="Configure when and how your libraries are scanned for new content." />
 
-    <!-- Schedule -->
-    <div class="mb-6">
-      <p class="settings-group-label">Schedule</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Automatic scanning</p>
-            <p class="settings-hint">Periodically scan libraries for new or changed files</p>
-          </div>
-          <button
-            class="w-11 h-6 rounded-full transition-colors relative shrink-0"
-            :class="autoScan ? 'bg-primary' : 'bg-muted'"
-            @click="autoScan = !autoScan"
-          >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="autoScan ? 'translate-x-6' : 'translate-x-1'"
-            />
-          </button>
+  <!-- Schedule -->
+  <div class="mb-6">
+    <p class="settings-group-label">Schedule</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Automatic scanning</p>
+          <p class="settings-hint">Periodically scan libraries for new or changed files</p>
         </div>
+        <ToggleSwitch v-model="autoScan" />
+      </div>
 
-        <div class="flex items-center justify-between px-5 py-4 bg-card" :class="!autoScan ? 'opacity-40 pointer-events-none' : ''">
-          <div>
-            <p class="settings-label">Scan interval</p>
-            <p class="settings-hint">How often to check all library folders</p>
-          </div>
-          <select
-            v-model="scanInterval"
-            class="text-sm border border-border rounded-md px-3 py-1.5 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-          >
-            <option value="15min">Every 15 minutes</option>
-            <option value="hourly">Every hour</option>
-            <option value="6h">Every 6 hours</option>
-            <option value="daily">Once a day</option>
-            <option value="weekly">Once a week</option>
-          </select>
+      <div class="flex items-center justify-between px-5 py-4 bg-card" :class="!autoScan ? 'opacity-40 pointer-events-none' : ''">
+        <div>
+          <p class="settings-label">Scan interval</p>
+          <p class="settings-hint">How often to check all library folders</p>
         </div>
+        <select
+          v-model="scanInterval"
+          class="text-sm border border-border rounded-md px-3 py-1.5 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          <option value="15min">Every 15 minutes</option>
+          <option value="hourly">Every hour</option>
+          <option value="6h">Every 6 hours</option>
+          <option value="daily">Once a day</option>
+          <option value="weekly">Once a week</option>
+        </select>
+      </div>
 
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Scan on startup</p>
-            <p class="settings-hint">Run a scan automatically when the server starts</p>
-          </div>
-          <button
-            class="w-11 h-6 rounded-full transition-colors relative shrink-0"
-            :class="scanOnStartup ? 'bg-primary' : 'bg-muted'"
-            @click="scanOnStartup = !scanOnStartup"
-          >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="scanOnStartup ? 'translate-x-6' : 'translate-x-1'"
-            />
-          </button>
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Scan on startup</p>
+          <p class="settings-hint">Run a scan automatically when the server starts</p>
         </div>
+        <ToggleSwitch v-model="scanOnStartup" />
+      </div>
 
-        <div class="flex items-center justify-between px-5 py-4 bg-card">
-          <div>
-            <p class="settings-label">Watch for changes</p>
-            <p class="settings-hint">Detect new files instantly using filesystem events</p>
-          </div>
-          <button
-            class="w-11 h-6 rounded-full transition-colors relative shrink-0"
-            :class="watchForChanges ? 'bg-primary' : 'bg-muted'"
-            @click="watchForChanges = !watchForChanges"
-          >
-            <div
-              class="absolute top-1 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="watchForChanges ? 'translate-x-6' : 'translate-x-1'"
-            />
-          </button>
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Watch for changes</p>
+          <p class="settings-hint">Detect new files instantly using filesystem events</p>
         </div>
+        <ToggleSwitch v-model="watchForChanges" />
       </div>
     </div>
+  </div>
 
-    <!-- File types -->
-    <div>
-      <p class="settings-group-label">Supported file types</p>
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <div v-for="type in fileTypes" :key="type.ext" class="flex items-center justify-between px-5 py-3.5 bg-card">
-          <div class="flex items-center gap-3">
-            <span class="text-xs font-mono font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded uppercase"> .{{ type.ext }} </span>
-            <p class="text-sm text-foreground">{{ type.label }}</p>
-          </div>
-          <button
-            class="w-9 h-5 rounded-full transition-colors relative shrink-0"
-            :class="type.enabled ? 'bg-primary' : 'bg-muted'"
-            @click="type.enabled = !type.enabled"
-          >
-            <div
-              class="absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform shadow-sm"
-              :class="type.enabled ? 'translate-x-4' : 'translate-x-0.5'"
-            />
-          </button>
+  <!-- File types -->
+  <div>
+    <p class="settings-group-label">Supported file types</p>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <div v-for="type in fileTypes" :key="type.ext" class="flex items-center justify-between px-5 py-3.5 bg-card">
+        <div class="flex items-center gap-3">
+          <span class="text-xs font-mono font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded uppercase"> .{{ type.ext }} </span>
+          <p class="text-sm text-foreground">{{ type.label }}</p>
         </div>
+        <ToggleSwitch v-model="type.enabled" />
       </div>
     </div>
+  </div>
 
-    <p class="mt-6 text-xs text-muted-foreground">Scanner configuration will be persisted in a future update.</p>
+  <p class="mt-6 text-xs text-muted-foreground">Scanner configuration will be persisted in a future update.</p>
 </template>
diff --git a/client/src/features/settings/SettingsHeader.vue b/client/src/features/settings/SettingsHeader.vue
index 82bafaae9..8b5ab540b 100644
--- a/client/src/features/settings/SettingsHeader.vue
+++ b/client/src/features/settings/SettingsHeader.vue
@@ -82,7 +82,7 @@ const groups = computed<Group[]>(() => {
 </script>
 
 <template>
-  <div class="flex items-stretch h-11 px-2 border-b overflow-x-auto shrink-0 scrollbar-none">
+  <div class="flex items-stretch h-11 px-6 border-b overflow-x-auto shrink-0 scrollbar-none">
     <template v-for="group in groups" :key="group.id">
       <span
         class="flex items-center px-2 text-[10px] font-semibold text-muted-foreground/35 uppercase tracking-widest whitespace-nowrap shrink-0 select-none"
diff --git a/client/src/features/settings/SettingsPageHeader.vue b/client/src/features/settings/SettingsPageHeader.vue
new file mode 100644
index 000000000..e43f7beb7
--- /dev/null
+++ b/client/src/features/settings/SettingsPageHeader.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ title: string; subtitle: string }>()
+</script>
+
+<template>
+  <div class="flex items-start justify-between mb-8 gap-4">
+    <div class="min-w-0">
+      <h2 class="settings-title">{{ title }}</h2>
+      <p class="settings-subtitle">{{ subtitle }}</p>
+    </div>
+    <div v-if="$slots.default" class="flex items-center gap-2 shrink-0">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/client/src/features/settings/StagingSettings.vue b/client/src/features/settings/StagingSettings.vue
index 5ecc6ef46..f301ef976 100644
--- a/client/src/features/settings/StagingSettings.vue
+++ b/client/src/features/settings/StagingSettings.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { Loader2 } from 'lucide-vue-next'
+import ToggleSwitch from '@/components/ui/ToggleSwitch.vue'
+import SettingsPageHeader from './SettingsPageHeader.vue'
 import { api } from '@/lib/api'
 import { useLibraries } from '@/features/library/composables/useLibraries'
 
@@ -98,102 +100,73 @@ async function onThresholdChange() {
 </script>
 
 <template>
-    <div class="mb-8">
-      <h2 class="settings-title">Staging</h2>
-      <p class="settings-subtitle">Configure how files are processed when they enter the staging area.</p>
-    </div>
+  <SettingsPageHeader title="Staging" subtitle="Configure how files are processed when they enter the staging area." />
 
-    <div v-if="loading" class="flex items-center justify-center py-8">
-      <Loader2 class="size-5 animate-spin text-muted-foreground" />
-    </div>
+  <div v-if="loading" class="flex items-center justify-center py-8">
+    <Loader2 class="size-5 animate-spin text-muted-foreground" />
+  </div>
 
-    <div v-else class="space-y-6">
-      <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Metadata</p>
+  <div v-else class="space-y-6">
+    <p class="settings-group-label">Metadata</p>
 
-      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-        <label class="flex items-center justify-between px-5 py-4 bg-card cursor-pointer select-none group" @click="toggle">
-          <div>
-            <p class="settings-label">Auto-fetch metadata from providers</p>
-            <p class="settings-hint">
-              Automatically fetch metadata from configured providers (Google Books, Open Library, etc.) after a file is added to staging.
-            </p>
-          </div>
-          <span
-            class="relative ml-4 inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors"
-            :class="autoFetch ? 'bg-primary' : 'bg-muted'"
-          >
-            <span
-              class="inline-block size-4 rounded-full bg-white shadow transition-transform"
-              :class="autoFetch ? 'translate-x-6' : 'translate-x-1'"
-            />
-          </span>
-        </label>
+    <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+      <div class="flex items-center justify-between px-5 py-4 bg-card">
+        <div>
+          <p class="settings-label">Auto-fetch metadata from providers</p>
+          <p class="settings-hint">
+            Automatically fetch metadata from configured providers (Google Books, Open Library, etc.) after a file is added to staging.
+          </p>
+        </div>
+        <ToggleSwitch :model-value="autoFetch" :disabled="saving" class="ml-4" @update:model-value="() => toggle()" />
       </div>
+    </div>
 
-      <div class="mt-6 space-y-4">
-        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Auto-finalize</p>
-        <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
-          <label class="flex items-center justify-between px-5 py-4 bg-card cursor-pointer select-none" @click="toggleAutoFinalize">
-            <div>
-              <p class="settings-label">Enable auto-finalize</p>
-              <p class="settings-hint">
-                Files with a metadata confidence score at or above the threshold will be finalized automatically.
-              </p>
+    <div class="mt-6 space-y-4">
+      <p class="settings-group-label">Auto-finalize</p>
+      <div class="border border-border rounded-lg overflow-hidden divide-y divide-border">
+        <div class="flex items-center justify-between px-5 py-4 bg-card">
+          <div>
+            <p class="settings-label">Enable auto-finalize</p>
+            <p class="settings-hint">Files with a metadata confidence score at or above the threshold will be finalized automatically.</p>
+          </div>
+          <ToggleSwitch :model-value="autoFinalizeEnabled" :disabled="saving" class="ml-4" @update:model-value="() => toggleAutoFinalize()" />
+        </div>
+
+        <div v-if="autoFinalizeEnabled" class="px-5 py-4 bg-card space-y-4">
+          <label class="block">
+            <span class="text-xs font-medium text-muted-foreground">Confidence threshold: {{ autoFinalizeThreshold }}%</span>
+            <input
+              v-model.number="autoFinalizeThreshold"
+              type="range"
+              min="50"
+              max="100"
+              step="5"
+              class="mt-1 w-full accent-primary"
+              @change="onThresholdChange"
+            />
+            <div class="flex justify-between settings-hint">
+              <span>50%</span>
+              <span>100%</span>
             </div>
-            <span
-              class="relative ml-4 inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors"
-              :class="autoFinalizeEnabled ? 'bg-primary' : 'bg-muted'"
-            >
-              <span
-                class="inline-block size-4 rounded-full bg-white shadow transition-transform"
-                :class="autoFinalizeEnabled ? 'translate-x-6' : 'translate-x-1'"
-              />
-            </span>
           </label>
 
-          <div v-if="autoFinalizeEnabled" class="px-5 py-4 bg-card space-y-4">
-            <label class="block">
-              <span class="text-xs font-medium text-muted-foreground">Confidence threshold: {{ autoFinalizeThreshold }}%</span>
-              <input
-                v-model.number="autoFinalizeThreshold"
-                type="range"
-                min="50"
-                max="100"
-                step="5"
-                class="mt-1 w-full accent-primary"
-                @change="onThresholdChange"
-              />
-              <div class="flex justify-between settings-hint">
-                <span>50%</span>
-                <span>100%</span>
-              </div>
-            </label>
+          <label class="block">
+            <span class="text-xs font-medium text-muted-foreground">Destination library</span>
+            <select class="select-field mt-1 w-full" :value="autoFinalizeLibraryId ?? ''" @change="onLibraryChange">
+              <option value="" disabled>Select a library...</option>
+              <option v-for="lib in libraries" :key="lib.id" :value="lib.id">{{ lib.name }}</option>
+            </select>
+          </label>
 
-            <label class="block">
-              <span class="text-xs font-medium text-muted-foreground">Destination library</span>
-              <select
-                class="mt-1 w-full h-8 rounded-lg border border-input bg-background px-3 text-sm outline-none focus:ring-1 focus:ring-ring"
-                :value="autoFinalizeLibraryId ?? ''"
-                @change="onLibraryChange"
-              >
-                <option value="" disabled>Select a library...</option>
-                <option v-for="lib in libraries" :key="lib.id" :value="lib.id">{{ lib.name }}</option>
-              </select>
-            </label>
-
-            <label class="block">
-              <span class="text-xs font-medium text-muted-foreground">Destination folder</span>
-              <select
-                class="mt-1 w-full h-8 rounded-lg border border-input bg-background px-3 text-sm outline-none focus:ring-1 focus:ring-ring"
-                :value="autoFinalizeFolderId ?? ''"
-                @change="onFolderChange"
-              >
-                <option value="" disabled>Select a folder...</option>
-                <option v-for="folder in autoFinalizeFolders" :key="folder.id" :value="folder.id">{{ folder.path }}</option>
-              </select>
-            </label>
-          </div>
+          <label class="block">
+            <span class="text-xs font-medium text-muted-foreground">Destination folder</span>
+            <select class="select-field mt-1 w-full" :value="autoFinalizeFolderId ?? ''" @change="onFolderChange">
+              <option value="" disabled>Select a folder...</option>
+              <option v-for="folder in autoFinalizeFolders" :key="folder.id" :value="folder.id">{{ folder.path }}</option>
+            </select>
+          </label>
         </div>
       </div>
     </div>
+  </div>
 </template>
diff --git a/client/src/features/settings/metadata-preferences/MetadataPreferencesSettings.vue b/client/src/features/settings/metadata-preferences/MetadataPreferencesSettings.vue
index fd5fb01c2..fb27aadce 100644
--- a/client/src/features/settings/metadata-preferences/MetadataPreferencesSettings.vue
+++ b/client/src/features/settings/metadata-preferences/MetadataPreferencesSettings.vue
@@ -7,6 +7,8 @@ import GlobalPreferencePanel from './components/GlobalPreferencePanel.vue'
 import LibraryPreferencePanel from './components/LibraryPreferencePanel.vue'
 import { useProviderConfig } from './composables/useProviderConfig'
 import { useMetadataPreferences } from './composables/useMetadataPreferences'
+import { Info } from 'lucide-vue-next'
+import SettingsPageHeader from '../SettingsPageHeader.vue'
 
 const { config, statuses, saving: savingProviders, fetchConfig, saveConfig } = useProviderConfig()
 const { globalPrefs, libraryPrefs, savingGlobal, savingField, fetchGlobal, saveGlobal, fetchLibrary, saveFieldOverride, resetLibrary } =
@@ -35,49 +37,60 @@ async function onResetLibrary(libraryId: number) {
 </script>
 
 <template>
-  <div class="space-y-8">
-    <div>
-      <h2 class="settings-title">Metadata Preferences</h2>
-      <p class="settings-subtitle">Control provider priority, merge behavior, and advanced auto-refresh metadata behavior.</p>
-    </div>
+  <div class="space-y-10 pb-20">
+    <SettingsPageHeader
+      title="Metadata Preferences"
+      subtitle="Configure how metadata is fetched and merged from different providers. Control priority, merge behavior, and library-specific overrides."
+    />
 
-    <div>
-      <p class="settings-group-label">Providers</p>
+    <!-- Provider Configuration -->
+    <section class="space-y-4">
+      <p class="settings-group-label">Metadata Providers</p>
       <ProviderConfigPanel
         :config="config"
         :statuses="statuses"
         :saving="savingProviders"
         @save="saveConfig($event as Partial<ProviderConfigurations>)"
       />
-    </div>
+    </section>
 
-    <div>
-      <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1">Field Preferences</p>
-      <p class="text-xs text-muted-foreground mb-3">
-        For each metadata field, choose which providers to use and in what order (drag to reorder - lower number = higher priority). The merge
-        strategy controls how a provider's value is applied: <span class="font-medium text-foreground">Fill missing</span> only writes when empty,
-        <span class="font-medium text-foreground">Overwrite if provided</span> writes whenever the provider returns a value,
-        <span class="font-medium text-foreground">Always overwrite</span> replaces the existing value unconditionally.
-      </p>
-      <div class="space-y-3">
-        <GlobalPreferencePanel :preferences="globalPrefs" :statuses="statuses" :saving="savingGlobal" @save="saveGlobal" />
-
-        <div v-if="libraries.length" class="space-y-2">
-          <p class="text-xs text-muted-foreground px-1">
-            Per-library overrides - expand a library to customize individual fields. Fields not overridden inherit global defaults.
+    <!-- Field Preferences -->
+    <section class="space-y-6">
+      <div class="space-y-1">
+        <p class="settings-group-label">Field Preferences</p>
+        <div class="flex items-start gap-3 p-4 rounded-xl bg-primary/5 border border-primary/10 max-w-6xl">
+          <Info :size="18" class="text-primary shrink-0 mt-0.5" />
+          <p class="text-sm text-muted-foreground leading-relaxed">
+            Choose which providers to use for each field and in what order (drag to reorder). The merge strategy controls how values are applied:
+            <span class="font-semibold text-foreground">Fill missing</span> only writes when empty,
+            <span class="font-semibold text-foreground">Overwrite if provided</span> writes whenever a provider returns a value, and
+            <span class="font-semibold text-foreground">Always overwrite</span> replaces existing values unconditionally.
           </p>
-          <LibraryPreferencePanel
-            v-for="lib in libraries"
-            :key="lib.id"
-            :library-name="lib.name"
-            :library-prefs="libraryPrefs.get(lib.id) ?? null"
-            :statuses="statuses"
-            :saving-field="savingField"
-            @field-change="onFieldChange"
-            @reset="onResetLibrary"
-          />
         </div>
       </div>
-    </div>
+
+      <div class="space-y-6">
+        <GlobalPreferencePanel :preferences="globalPrefs" :statuses="statuses" :saving="savingGlobal" @save="saveGlobal" />
+
+        <div v-if="libraries.length" class="space-y-4">
+          <div class="px-1">
+            <p class="text-sm font-medium text-foreground">Library Overrides</p>
+            <p class="settings-hint">Expand a library to customize individual fields. Fields not overridden inherit global defaults.</p>
+          </div>
+          <div class="space-y-3">
+            <LibraryPreferencePanel
+              v-for="lib in libraries"
+              :key="lib.id"
+              :library-name="lib.name"
+              :library-prefs="libraryPrefs.get(lib.id) ?? null"
+              :statuses="statuses"
+              :saving-field="savingField"
+              @field-change="onFieldChange"
+              @reset="onResetLibrary"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
diff --git a/client/src/features/settings/metadata-preferences/components/FieldGroupSection.vue b/client/src/features/settings/metadata-preferences/components/FieldGroupSection.vue
index 1c407d919..60ee919e1 100644
--- a/client/src/features/settings/metadata-preferences/components/FieldGroupSection.vue
+++ b/client/src/features/settings/metadata-preferences/components/FieldGroupSection.vue
@@ -23,16 +23,16 @@ const open = ref(true)
 </script>
 
 <template>
-  <div>
+  <div class="border-b border-border/60 last:border-0">
     <button
-      class="w-full flex items-center gap-2 px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider hover:bg-muted/40 transition-colors"
+      class="w-full flex items-center gap-2.5 px-6 py-2.5 text-[10px] font-bold text-muted-foreground/60 uppercase tracking-[0.1em] hover:bg-muted/30 hover:text-muted-foreground transition-all group"
       @click="open = !open"
     >
-      <component :is="open ? ChevronDown : ChevronRight" :size="12" />
+      <component :is="open ? ChevronDown : ChevronRight" :size="12" class="transition-transform duration-200 group-hover:scale-110" />
       {{ label }}
     </button>
 
-    <div v-if="open" class="divide-y divide-border/60">
+    <div v-if="open" class="divide-y divide-border/60 animate-in fade-in slide-in-from-top-1 duration-200">
       <FieldRow
         v-for="field in fields"
         :key="field"
diff --git a/client/src/features/settings/metadata-preferences/components/FieldPreferenceTable.vue b/client/src/features/settings/metadata-preferences/components/FieldPreferenceTable.vue
index 2dc196212..257557eb9 100644
--- a/client/src/features/settings/metadata-preferences/components/FieldPreferenceTable.vue
+++ b/client/src/features/settings/metadata-preferences/components/FieldPreferenceTable.vue
@@ -2,6 +2,7 @@
 import type { FieldPreference, MetadataFetchPreferences, MetadataField, ProviderStatus } from '@projectx/types'
 import FieldGroupSection from './FieldGroupSection.vue'
 import ProviderReservoir from './ProviderReservoir.vue'
+import { Info } from 'lucide-vue-next'
 
 defineProps<{
   preferences: MetadataFetchPreferences
@@ -26,16 +27,30 @@ const GROUPS: { label: string; fields: MetadataField[] }[] = [
 </script>
 
 <template>
-  <div>
-    <ProviderReservoir :statuses="statuses" />
-
-    <!-- Column headers (desktop only) -->
-    <div class="hidden sm:flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/10">
-      <span class="w-36 shrink-0 text-xs text-muted-foreground">Field</span>
-      <span class="flex-1 text-xs text-muted-foreground">Providers</span>
-      <span class="shrink-0 text-xs text-muted-foreground pr-2">Strategy</span>
+  <div class="space-y-0">
+    <!-- Reservoir with context -->
+    <div class="px-6 py-4 bg-muted/30 border-b border-border flex flex-col md:flex-row md:items-center justify-between gap-4">
+      <div class="flex items-center gap-2.5">
+        <Info :size="14" class="text-primary" />
+        <p class="settings-hint !mt-0 uppercase tracking-wider">Drag providers from here onto any field to add them</p>
+      </div>
+      <ProviderReservoir :statuses="statuses" />
     </div>
 
+    <!-- Table Header (desktop) -->
+    <div class="hidden md:flex items-center gap-4 px-6 py-3 bg-muted/10 border-b border-border/60">
+      <div class="w-48 shrink-0 text-xs font-semibold text-muted-foreground uppercase tracking-wider">Field</div>
+      <div class="flex-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">Active Providers (ordered by priority)</div>
+      <div class="w-44 shrink-0 text-xs font-semibold text-muted-foreground uppercase tracking-wider">Merge Strategy</div>
+      <div
+        v-if="overriddenFields !== undefined"
+        class="w-16 shrink-0 text-xs font-semibold text-muted-foreground uppercase tracking-wider text-center"
+      >
+        Status
+      </div>
+    </div>
+
+    <!-- Content -->
     <div class="divide-y divide-border/60">
       <FieldGroupSection
         v-for="group in GROUPS"
diff --git a/client/src/features/settings/metadata-preferences/components/FieldRow.vue b/client/src/features/settings/metadata-preferences/components/FieldRow.vue
index d9dcb38ff..c93fbe8b1 100644
--- a/client/src/features/settings/metadata-preferences/components/FieldRow.vue
+++ b/client/src/features/settings/metadata-preferences/components/FieldRow.vue
@@ -7,6 +7,7 @@ import ProviderChipList from './ProviderChipList.vue'
 import FieldConfigSheet from './FieldConfigSheet.vue'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { providerChipStyle, PROVIDER_SHORT_LABELS } from '@/lib/provider-colors'
+import { Badge } from '@/components/ui/badge'
 
 const RESERVOIR_TYPE = 'application/x-provider-key'
 
@@ -75,99 +76,109 @@ function onDrop(e: DragEvent) {
 
 <template>
   <div
-    class="flex flex-col sm:flex-row sm:items-center gap-2 px-4 py-3 transition-colors relative"
-    :class="isDragOver ? 'bg-primary/5 outline outline-1 outline-primary/25 outline-offset-[-1px]' : ''"
+    class="flex flex-col md:flex-row md:items-center gap-4 px-6 py-3.5 transition-colors relative hover:bg-muted/15"
+    :class="isDragOver ? 'bg-primary/5 outline outline-primary/25 -outline-offset-1' : ''"
     @dragover="onDragOver"
     @dragleave="onDragLeave"
     @drop="onDrop"
   >
     <!-- Drop hint overlay -->
     <div v-if="isDragOver" class="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
-      <span class="text-xs text-primary font-medium bg-card border border-primary/30 px-2.5 py-1 rounded-full shadow-sm"> Add to {{ label }} </span>
+      <span
+        class="text-xs text-primary font-bold bg-card border-2 border-primary/30 px-4 py-1.5 rounded-full shadow-lg animate-in zoom-in-95 duration-200"
+      >
+        Drop to add to {{ label }}
+      </span>
     </div>
 
     <!-- Enable toggle + label -->
-    <div class="flex items-center gap-2 sm:w-36 shrink-0">
-      <input
-        type="checkbox"
-        :checked="preference.enabled"
-        :disabled="saving"
-        class="h-3.5 w-3.5 rounded border-input accent-primary cursor-pointer"
-        @change="update({ enabled: ($event.target as HTMLInputElement).checked })"
-      />
-      <span class="text-sm text-foreground font-medium truncate">{{ label }}</span>
+    <div class="flex items-center gap-3 md:w-44 shrink-0">
+      <div
+        class="relative flex h-4.5 w-8.5 shrink-0 items-center rounded-full transition-colors cursor-pointer"
+        :class="preference.enabled ? 'bg-primary' : 'bg-muted border border-border'"
+        @click="update({ enabled: !preference.enabled })"
+      >
+        <span
+          class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"
+          :class="preference.enabled ? 'translate-x-4' : 'translate-x-0.5'"
+        />
+      </div>
+      <span class="settings-label truncate">{{ label }}</span>
     </div>
 
     <!-- Provider chip list (desktop) -->
-    <div class="flex-1 min-w-0 hidden sm:block">
-      <ProviderChipList
-        :providers="preference.providers"
-        :statuses="statuses"
-        :disabled="!preference.enabled || saving"
-        @update:providers="update({ providers: $event })"
-      />
+    <div class="flex-1 min-w-0 hidden md:block">
+      <div class="flex items-center gap-2">
+        <ProviderChipList
+          :providers="preference.providers"
+          :statuses="statuses"
+          :disabled="!preference.enabled || saving"
+          @update:providers="update({ providers: $event })"
+        />
+        <Tooltip v-if="noProviders">
+          <TooltipTrigger as-child>
+            <AlertTriangle :size="14" class="text-amber-500 animate-pulse shrink-0" />
+          </TooltipTrigger>
+          <TooltipContent>Enabled but has no providers</TooltipContent>
+        </Tooltip>
+      </div>
     </div>
 
     <!-- Mobile: chip preview + configure button -->
-    <div class="flex items-center gap-2 sm:hidden">
-      <div class="flex flex-wrap gap-1 flex-1 min-w-0">
-        <span v-for="key in preference.providers" :key="key" class="text-xs px-1.5 py-0.5 rounded font-medium" :style="providerChipStyle(key)">
+    <div class="flex items-center gap-3 md:hidden">
+      <div class="flex flex-wrap gap-1.5 flex-1 min-w-0">
+        <span
+          v-for="key in preference.providers"
+          :key="key"
+          class="text-[10px] px-2 py-0.5 rounded font-bold uppercase tracking-tight"
+          :style="providerChipStyle(key)"
+        >
           {{ PROVIDER_SHORT_LABELS[key] ?? key }}
         </span>
-        <span v-if="preference.providers.length === 0 && !preference.enabled" class="text-xs text-muted-foreground/50 italic">none</span>
-        <span v-if="noProviders" class="flex items-center gap-1 text-xs text-amber-500 font-medium">
-          <AlertTriangle :size="11" />
-          No providers
+        <span v-if="preference.providers.length === 0 && !preference.enabled" class="text-xs text-muted-foreground/40 italic">Not fetched</span>
+        <span v-if="noProviders" class="flex items-center gap-1.5 text-xs text-amber-500 font-bold uppercase tracking-tight">
+          <AlertTriangle :size="12" />
+          Empty
         </span>
       </div>
       <button
         :disabled="saving"
-        class="shrink-0 flex items-center gap-1.5 h-7 px-2.5 rounded border border-border bg-background text-xs text-foreground hover:bg-muted transition-colors disabled:opacity-40"
+        class="shrink-0 flex items-center gap-1.5 h-8 px-3 rounded-md border border-border bg-background text-xs font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-40"
         @click="sheetOpen = true"
       >
-        <Settings2 :size="12" />
-        Configure
+        <Settings2 :size="13" />
+        Config
       </button>
     </div>
 
     <!-- Merge strategy + badges + revert (desktop) -->
-    <div class="hidden sm:flex items-center gap-2 shrink-0">
-      <Tooltip v-if="noProviders">
-        <TooltipTrigger as-child>
-          <span class="flex items-center gap-1 text-xs text-amber-500 font-medium shrink-0">
-            <AlertTriangle :size="12" />
-            No providers
-          </span>
-        </TooltipTrigger>
-        <TooltipContent>Field is enabled but has no providers - it will be skipped during refresh</TooltipContent>
-      </Tooltip>
+    <div class="hidden md:flex items-center gap-4 shrink-0">
+      <div class="w-44 shrink-0">
+        <MergeStrategyPicker
+          :model-value="preference.mergeStrategy"
+          :disabled="!preference.enabled || saving"
+          @update:model-value="update({ mergeStrategy: $event })"
+        />
+      </div>
 
-      <MergeStrategyPicker
-        :model-value="preference.mergeStrategy"
-        :disabled="!preference.enabled || saving"
-        @update:model-value="update({ mergeStrategy: $event })"
-      />
-
-      <span
-        v-if="inherited !== undefined"
-        class="text-xs font-medium px-1.5 py-0.5 rounded shrink-0"
-        :class="inherited ? 'bg-muted text-muted-foreground' : 'bg-primary/10 text-primary'"
-      >
-        {{ inherited ? 'inherited' : 'custom' }}
-      </span>
-
-      <Tooltip v-if="inherited === false">
-        <TooltipTrigger as-child>
-          <button
-            :disabled="saving"
-            class="flex items-center h-6 px-1.5 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-40"
-            @click="$emit('revert', field)"
-          >
-            <RotateCcw :size="11" />
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>Revert to global default</TooltipContent>
-      </Tooltip>
+      <div v-if="inherited !== undefined" class="w-16 flex items-center justify-center shrink-0">
+        <Tooltip v-if="!inherited">
+          <TooltipTrigger as-child>
+            <div class="flex items-center gap-1">
+              <Badge variant="secondary" class="h-4.5 px-1.5 text-[9px] font-bold uppercase tracking-tight"> Custom </Badge>
+              <button
+                :disabled="saving"
+                class="flex items-center justify-center h-6 w-6 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/5 transition-colors disabled:opacity-40"
+                @click="$emit('revert', field)"
+              >
+                <RotateCcw :size="11" />
+              </button>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>Reset to default</TooltipContent>
+        </Tooltip>
+        <Badge v-else variant="outline" class="h-4.5 px-1.5 text-[9px] font-bold uppercase tracking-tight opacity-40"> Default </Badge>
+      </div>
     </div>
 
     <FieldConfigSheet
diff --git a/client/src/features/settings/metadata-preferences/components/GlobalPreferencePanel.vue b/client/src/features/settings/metadata-preferences/components/GlobalPreferencePanel.vue
index 916dce4a4..3bf0e95a7 100644
--- a/client/src/features/settings/metadata-preferences/components/GlobalPreferencePanel.vue
+++ b/client/src/features/settings/metadata-preferences/components/GlobalPreferencePanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { Loader2, Save } from 'lucide-vue-next'
+import { Loader2, Save, Settings } from 'lucide-vue-next'
 import type { FieldPreference, MetadataFetchPreferences, MetadataField, ProviderStatus } from '@projectx/types'
 import FieldPreferenceTable from './FieldPreferenceTable.vue'
 
@@ -52,74 +52,103 @@ function setGenreMerge(enabled: boolean) {
 </script>
 
 <template>
-  <div class="border border-border rounded-lg bg-card overflow-hidden">
-    <div class="px-5 py-4 border-b border-border flex items-center justify-between">
+  <div class="border border-border rounded-xl bg-card overflow-hidden shadow-sm">
+    <div class="px-6 py-5 border-b border-border flex flex-col md:flex-row md:items-center justify-between gap-4 bg-muted/20">
       <div>
-        <p class="text-sm font-semibold text-foreground">Global Defaults</p>
+        <p class="settings-label">Global Defaults</p>
         <p class="settings-hint">Default rules applied to every library. Override per-library below.</p>
       </div>
       <button
-        class="flex items-center gap-1.5 h-8 px-3 rounded-md border border-border bg-background text-sm text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+        class="inline-flex items-center gap-2 px-4 py-2 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
         :disabled="saving || !draft"
         @click="save"
       >
-        <Loader2 v-if="saving" :size="13" class="animate-spin" />
-        <Save v-else :size="13" />
-        Save
+        <Loader2 v-if="saving" :size="14" class="animate-spin" />
+        <Save v-else :size="14" />
+        <span>Save Defaults</span>
       </button>
     </div>
 
     <div v-if="draft">
       <FieldPreferenceTable :preferences="draft" :statuses="statuses" @change="onFieldChange" />
-      <div class="border-t border-border px-5 py-4 space-y-3">
-        <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Advanced Fetch Behavior</p>
 
-        <label class="flex items-start gap-2.5">
-          <input
-            type="checkbox"
-            class="h-3.5 w-3.5 rounded border-input accent-primary mt-0.5 cursor-pointer"
-            :checked="draft.options?.genres.mode === 'merge'"
-            @change="setGenreMerge(($event.target as HTMLInputElement).checked)"
-          />
-          <span class="text-sm text-foreground leading-5">Merge genres across providers</span>
-        </label>
+      <!-- Advanced settings -->
+      <div class="border-t border-border px-6 py-6 bg-muted/5 space-y-5">
+        <div class="flex items-center gap-2">
+          <Settings :size="16" class="text-muted-foreground" />
+          <h4 class="settings-group-label !mb-0">Advanced Fetch Behavior</h4>
+        </div>
 
-        <fieldset class="pl-6 space-y-2" :disabled="draft.options?.genres.mode !== 'merge'">
-          <label class="flex items-start gap-2.5">
-            <input
-              type="radio"
-              name="genre-provider-scope"
-              class="h-3.5 w-3.5 border-input accent-primary mt-0.5 cursor-pointer"
-              :checked="draft.options?.genres.providerScope === 'selectedProviders'"
-              :disabled="draft.options?.genres.mode !== 'merge'"
-              @change="draft.options && (draft.options.genres.providerScope = 'selectedProviders')"
-            />
-            <span class="text-sm text-foreground leading-5">Use only selected providers from the Genres field</span>
-          </label>
-          <label class="flex items-start gap-2.5">
-            <input
-              type="radio"
-              name="genre-provider-scope"
-              class="h-3.5 w-3.5 border-input accent-primary mt-0.5 cursor-pointer"
-              :checked="draft.options?.genres.providerScope === 'allConfiguredProviders'"
-              :disabled="draft.options?.genres.mode !== 'merge'"
-              @change="draft.options && (draft.options.genres.providerScope = 'allConfiguredProviders')"
-            />
-            <span class="text-sm text-foreground leading-5">Use all enabled and configured providers</span>
-          </label>
-        </fieldset>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <!-- Genre Behavior -->
+          <div class="space-y-4">
+            <label class="flex items-start gap-3 group cursor-pointer">
+              <div
+                class="relative flex h-5 w-9 shrink-0 items-center rounded-full transition-colors mt-0.5"
+                :class="draft.options?.genres.mode === 'merge' ? 'bg-primary' : 'bg-muted border border-border'"
+                @click.prevent="setGenreMerge(draft.options?.genres.mode !== 'merge')"
+              >
+                <span
+                  class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
+                  :class="draft.options?.genres.mode === 'merge' ? 'translate-x-4.5' : 'translate-x-0.5'"
+                />
+              </div>
+              <div class="space-y-1">
+                <span class="text-sm font-medium text-foreground">Merge genres across providers</span>
+                <p class="text-xs text-muted-foreground">Instead of taking genres from a single provider, combine them from multiple sources.</p>
+              </div>
+            </label>
 
-        <label class="flex items-start gap-2.5">
-          <input
-            type="checkbox"
-            class="h-3.5 w-3.5 rounded border-input accent-primary mt-0.5 cursor-pointer"
-            :checked="draft.options?.saveProviderIds ?? false"
-            @change="draft.options && (draft.options.saveProviderIds = ($event.target as HTMLInputElement).checked)"
-          />
-          <span class="text-sm text-foreground leading-5">Save provider IDs during auto-refresh</span>
-        </label>
+            <fieldset class="pl-12 space-y-3" :class="draft.options?.genres.mode !== 'merge' ? 'opacity-40 pointer-events-none' : ''">
+              <label class="flex items-center gap-2.5 cursor-pointer group">
+                <input
+                  type="radio"
+                  name="genre-provider-scope"
+                  class="h-4 w-4 border-input accent-primary cursor-pointer"
+                  :checked="draft.options?.genres.providerScope === 'selectedProviders'"
+                  @change="draft.options && (draft.options.genres.providerScope = 'selectedProviders')"
+                />
+                <span class="text-sm text-foreground group-hover:text-primary transition-colors">Use only providers selected for Genres field</span>
+              </label>
+              <label class="flex items-center gap-2.5 cursor-pointer group">
+                <input
+                  type="radio"
+                  name="genre-provider-scope"
+                  class="h-4 w-4 border-input accent-primary cursor-pointer"
+                  :checked="draft.options?.genres.providerScope === 'allConfiguredProviders'"
+                  @change="draft.options && (draft.options.genres.providerScope = 'allConfiguredProviders')"
+                />
+                <span class="text-sm text-foreground group-hover:text-primary transition-colors">Use all enabled and configured providers</span>
+              </label>
+            </fieldset>
+          </div>
+
+          <!-- IDs Behavior -->
+          <div class="space-y-4">
+            <label class="flex items-start gap-3 group cursor-pointer">
+              <div
+                class="relative flex h-5 w-9 shrink-0 items-center rounded-full transition-colors mt-0.5"
+                :class="draft.options?.saveProviderIds ? 'bg-primary' : 'bg-muted border border-border'"
+                @click.prevent="draft.options && (draft.options.saveProviderIds = !draft.options.saveProviderIds)"
+              >
+                <span
+                  class="inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform"
+                  :class="draft.options?.saveProviderIds ? 'translate-x-4.5' : 'translate-x-0.5'"
+                />
+              </div>
+              <div class="space-y-1">
+                <span class="text-sm font-medium text-foreground">Save provider IDs</span>
+                <p class="text-xs text-muted-foreground">
+                  Persist IDs (ISBN, ASIN, Goodreads ID, etc.) back to the book records during auto-refresh.
+                </p>
+              </div>
+            </label>
+          </div>
+        </div>
       </div>
     </div>
-    <div v-else class="px-5 py-6 text-sm text-muted-foreground">Loading...</div>
+    <div v-else class="px-6 py-12 flex items-center justify-center">
+      <Loader2 :size="24" class="animate-spin text-muted-foreground" />
+    </div>
   </div>
 </template>
diff --git a/client/src/features/settings/metadata-preferences/components/LibraryPreferencePanel.vue b/client/src/features/settings/metadata-preferences/components/LibraryPreferencePanel.vue
index a90767dea..4953dfea6 100644
--- a/client/src/features/settings/metadata-preferences/components/LibraryPreferencePanel.vue
+++ b/client/src/features/settings/metadata-preferences/components/LibraryPreferencePanel.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { ChevronDown, ChevronRight, RotateCcw } from 'lucide-vue-next'
+import { ChevronDown, ChevronRight, RotateCcw, Library } from 'lucide-vue-next'
 import type { FieldPreference, LibraryMetadataPreferences, MetadataField, ProviderStatus } from '@projectx/types'
 import FieldPreferenceTable from './FieldPreferenceTable.vue'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { Badge } from '@/components/ui/badge'
 
 const props = defineProps<{
   libraryName: string
@@ -46,34 +47,52 @@ function onReset() {
 </script>
 
 <template>
-  <div class="border border-border rounded-lg bg-card overflow-hidden">
-    <div class="flex items-center gap-3 px-5 py-3.5">
-      <button class="flex items-center gap-2 flex-1 min-w-0 text-left" @click="open = !open">
-        <component :is="open ? ChevronDown : ChevronRight" :size="14" class="text-muted-foreground shrink-0" />
-        <span class="settings-label truncate">{{ libraryName }}</span>
-        <span
-          class="shrink-0 text-xs font-medium px-1.5 py-0.5 rounded"
-          :class="hasOverrides ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'"
+  <div
+    class="border border-border rounded-xl bg-card overflow-hidden shadow-sm transition-all"
+    :class="open ? 'ring-1 ring-primary/20' : 'hover:border-primary/30'"
+  >
+    <div class="flex items-center gap-3 px-6 py-4 cursor-pointer select-none" @click="open = !open">
+      <div class="flex items-center gap-4 flex-1 min-w-0">
+        <div
+          class="flex items-center justify-center w-8 h-8 rounded-lg bg-muted shrink-0 text-muted-foreground transition-colors"
+          :class="open ? 'bg-primary/10 text-primary' : ''"
         >
-          {{ hasOverrides ? `${overriddenFields.size} override${overriddenFields.size === 1 ? '' : 's'}` : 'using global' }}
-        </span>
-      </button>
+          <Library :size="16" />
+        </div>
+        <div class="min-w-0 space-y-0.5">
+          <div class="flex items-center gap-3">
+            <span class="text-sm font-semibold text-foreground truncate">{{ libraryName }}</span>
+            <Badge v-if="hasOverrides" variant="secondary" class="h-4.5 px-1.5 text-[10px] font-bold uppercase tracking-tight">
+              {{ overriddenFields.size }} {{ overriddenFields.size === 1 ? 'Override' : 'Overrides' }}
+            </Badge>
+            <Badge v-else variant="outline" class="h-4.5 px-1.5 text-[10px] font-bold uppercase tracking-tight opacity-60"> Global Defaults </Badge>
+          </div>
+          <p class="text-[11px] text-muted-foreground font-mono truncate" v-if="!open">
+            {{ hasOverrides ? `Overriding: ${Array.from(overriddenFields).join(', ')}` : 'Inheriting all global metadata rules' }}
+          </p>
+        </div>
+      </div>
 
-      <Tooltip v-if="hasOverrides">
-        <TooltipTrigger as-child>
-          <button
-            class="shrink-0 flex items-center gap-1 h-6 px-2 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-            @click="onReset"
-          >
-            <RotateCcw :size="11" />
-            Reset all
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>Reset all to global</TooltipContent>
-      </Tooltip>
+      <div class="flex items-center gap-3">
+        <Tooltip v-if="hasOverrides">
+          <TooltipTrigger as-child>
+            <button
+              class="shrink-0 flex items-center justify-center h-8 w-8 rounded-md border border-border bg-background text-muted-foreground hover:text-destructive hover:bg-destructive/5 hover:border-destructive/30 transition-all"
+              @click.stop="onReset"
+            >
+              <RotateCcw :size="13" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Reset library to global defaults</TooltipContent>
+        </Tooltip>
+
+        <div class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-muted transition-colors">
+          <component :is="open ? ChevronDown : ChevronRight" :size="16" class="text-muted-foreground" />
+        </div>
+      </div>
     </div>
 
-    <div v-if="open && libraryPrefs" class="border-t border-border">
+    <div v-if="open && libraryPrefs" class="border-t border-border bg-muted/5 animate-in fade-in slide-in-from-top-1 duration-200">
       <FieldPreferenceTable
         :preferences="libraryPrefs.effective"
         :statuses="statuses"
@@ -85,6 +104,8 @@ function onReset() {
       />
     </div>
 
-    <div v-else-if="open && !libraryPrefs" class="border-t border-border px-5 py-4 text-sm text-muted-foreground">Loading...</div>
+    <div v-else-if="open && !libraryPrefs" class="border-t border-border px-6 py-10 flex items-center justify-center">
+      <Loader2 :size="20" class="animate-spin text-muted-foreground" />
+    </div>
   </div>
 </template>
diff --git a/client/src/features/settings/metadata-preferences/components/ProviderConfigPanel.vue b/client/src/features/settings/metadata-preferences/components/ProviderConfigPanel.vue
index e3f38b4f8..fc48cd5aa 100644
--- a/client/src/features/settings/metadata-preferences/components/ProviderConfigPanel.vue
+++ b/client/src/features/settings/metadata-preferences/components/ProviderConfigPanel.vue
@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue'
 import { Loader2, Save } from 'lucide-vue-next'
 import type { ProviderConfigurations, ProviderStatus } from '@projectx/types'
+import { Badge } from '@/components/ui/badge'
 
 const props = defineProps<{
   config: ProviderConfigurations | null
@@ -43,42 +44,32 @@ const AMAZON_DOMAINS = [
   'amazon.tr',
 ]
 
-type FieldDef =
-  | { key: string; label: string; type: 'text' | 'password' | 'select'; hint?: string; options?: string[] }
+type FieldDef = { key: string; label: string; type: 'text' | 'password' | 'select'; options?: string[] }
 
-const rows: { key: keyof ProviderConfigurations; label: string; fields: FieldDef[] }[] = [
+const rows: { key: keyof ProviderConfigurations; label: string; hint?: string; fields: FieldDef[] }[] = [
   {
     key: 'google',
     label: 'Google Books',
-    fields: [
-      {
-        key: 'apiKey',
-        label: 'API key',
-        type: 'password',
-        hint: 'Recommended for higher rate limits. Works without one.',
-      },
-    ],
+    hint: 'Recommended for higher rate limits.',
+    fields: [{ key: 'apiKey', label: 'API Key', type: 'password' }],
   },
   {
     key: 'amazon',
     label: 'Amazon',
+    hint: 'Provides richer metadata and avoids rate limiting.',
     fields: [
       { key: 'domain', label: 'Region', type: 'select', options: AMAZON_DOMAINS },
-      {
-        key: 'cookie',
-        label: 'Cookie',
-        type: 'password',
-        hint: 'Optional but highly recommended - provides richer metadata and avoids rate limiting.',
-      },
+      { key: 'cookie', label: 'Cookie', type: 'password' },
     ],
   },
-  { key: 'goodreads', label: 'Goodreads', fields: [] },
+  { key: 'goodreads', label: 'Goodreads', hint: 'Standard community metadata.', fields: [] },
   {
     key: 'hardcover',
     label: 'Hardcover',
-    fields: [{ key: 'apiKey', label: 'API key', type: 'password' }],
+    hint: 'Social book tracking platform.',
+    fields: [{ key: 'apiKey', label: 'API Key', type: 'password' }],
   },
-  { key: 'openLibrary', label: 'Open Library', fields: [] },
+  { key: 'openLibrary', label: 'Open Library', hint: 'The internet archive for books.', fields: [] },
 ]
 
 function statusFor(key: string) {
@@ -92,62 +83,95 @@ function save() {
 </script>
 
 <template>
-  <div class="border border-border rounded-lg bg-card overflow-hidden">
-    <div class="px-5 py-4 border-b border-border flex items-center justify-between">
-      <div>
-        <p class="text-sm font-semibold text-foreground">Metadata Providers</p>
-        <p class="settings-hint">Enable providers and configure API keys or cookies where needed.</p>
+  <div class="border border-border rounded-xl bg-card overflow-hidden shadow-sm">
+    <!-- Card Header -->
+    <div class="px-6 py-4 border-b border-border flex items-center justify-between bg-muted/20">
+      <div class="flex items-center gap-2">
+        <span class="settings-group-label !mb-0">Available Sources</span>
       </div>
       <button
-        class="flex items-center gap-1.5 h-8 px-3 rounded-md border border-border bg-background text-sm text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+        class="inline-flex items-center gap-2 px-4 py-2 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
         :disabled="saving || !draft"
         @click="save"
       >
-        <Loader2 v-if="saving" :size="13" class="animate-spin" />
-        <Save v-else :size="13" />
-        Save
+        <Loader2 v-if="saving" :size="14" class="animate-spin" />
+        <Save v-else :size="14" />
+        <span>Save Changes</span>
       </button>
     </div>
 
-    <div v-if="draft" class="divide-y divide-border/60">
-      <div v-for="row in rows" :key="row.key" class="px-5 py-3.5 flex flex-col sm:flex-row sm:items-start gap-3">
-        <div class="flex items-start gap-3 sm:w-44 shrink-0 pt-0.5">
-          <input v-model="draft[row.key].enabled" type="checkbox" class="h-3.5 w-3.5 rounded border-input accent-primary cursor-pointer mt-0.5" />
-          <div>
-            <p class="settings-label">{{ row.label }}</p>
+    <div v-if="draft" class="divide-y divide-border/50">
+      <div v-for="row in rows" :key="row.key" class="px-6 py-5 flex flex-col lg:flex-row lg:items-center justify-between gap-6">
+        <!-- Left: Provider Info -->
+        <div class="space-y-1.5">
+          <div class="flex items-center gap-3">
+            <span class="settings-label">{{ row.label }}</span>
             <template v-if="statusFor(row.key)">
-              <p v-if="!statusFor(row.key)?.configured" class="text-xs text-amber-600">API key required</p>
-              <p v-else-if="statusFor(row.key)?.hint" class="text-xs text-amber-500">{{ statusFor(row.key)?.hint }}</p>
-              <p v-else class="text-xs text-emerald-600">Configured</p>
+              <Badge
+                v-if="!statusFor(row.key)?.configured"
+                variant="destructive"
+                class="h-4.5 px-1.5 text-[9px] font-black uppercase tracking-tighter"
+              >
+                Setup Required
+              </Badge>
+              <Badge
+                v-else
+                variant="outline"
+                class="h-4.5 px-1.5 text-[9px] font-black uppercase tracking-tighter text-emerald-600 border-emerald-500/30 bg-emerald-500/5"
+              >
+                Ready
+              </Badge>
             </template>
           </div>
+          <p v-if="row.hint" class="text-xs text-muted-foreground max-w-sm leading-relaxed">
+            {{ row.hint }}
+          </p>
         </div>
 
-        <div v-if="row.fields.length" class="flex flex-col gap-2 flex-1">
-          <div v-for="field in row.fields" :key="field.key">
-            <select
-              v-if="field.type === 'select'"
-              v-model="(draft[row.key] as Record<string, string>)[field.key]"
-              :disabled="!draft[row.key].enabled"
-              class="w-full h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 cursor-pointer"
-            >
-              <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
-            </select>
-            <template v-else>
+        <!-- Right: Config & Toggle -->
+        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+          <!-- Fields -->
+          <div v-if="row.fields.length" class="flex flex-wrap items-center gap-2">
+            <div v-for="field in row.fields" :key="field.key" class="relative">
+              <select
+                v-if="field.type === 'select'"
+                v-model="(draft[row.key] as unknown as Record<string, string>)[field.key]"
+                :disabled="!draft[row.key].enabled"
+                class="h-8 rounded border border-input bg-background px-2.5 text-xs font-medium focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-40 transition-all"
+              >
+                <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
+              </select>
               <input
-                v-model="(draft[row.key] as Record<string, string>)[field.key]"
+                v-else
+                v-model="(draft[row.key] as unknown as Record<string, string>)[field.key]"
                 :type="field.type"
                 :placeholder="field.label"
                 :disabled="!draft[row.key].enabled"
-                class="w-full h-8 rounded-md border border-input bg-background px-2.5 text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
+                class="h-8 w-96 rounded border border-input bg-background px-2.5 text-xs font-medium placeholder:text-muted-foreground/40 focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-40 transition-all"
               />
-              <p v-if="field.hint" class="settings-hint">{{ field.hint }}</p>
-            </template>
+            </div>
           </div>
+
+          <!-- Switch -->
+          <button
+            type="button"
+            role="switch"
+            :aria-checked="draft[row.key].enabled"
+            class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none"
+            :class="draft[row.key].enabled ? 'bg-primary' : 'bg-muted border border-border'"
+            @click="draft[row.key].enabled = !draft[row.key].enabled"
+          >
+            <span
+              class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"
+              :class="draft[row.key].enabled ? 'translate-x-4.5' : 'translate-x-0.5'"
+            />
+          </button>
         </div>
       </div>
     </div>
 
-    <div v-else class="px-5 py-6 text-sm text-muted-foreground">Loading...</div>
+    <div v-else class="px-6 py-12 flex items-center justify-center">
+      <Loader2 :size="24" class="animate-spin text-muted-foreground" />
+    </div>
   </div>
 </template>
diff --git a/client/src/features/settings/metadata-preferences/components/ProviderReservoir.vue b/client/src/features/settings/metadata-preferences/components/ProviderReservoir.vue
index 6ea240b5a..6f09cc9e7 100644
--- a/client/src/features/settings/metadata-preferences/components/ProviderReservoir.vue
+++ b/client/src/features/settings/metadata-preferences/components/ProviderReservoir.vue
@@ -13,27 +13,26 @@ function onDragStart(key: string, e: DragEvent) {
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 border-b border-border bg-muted/30">
-    <div class="flex flex-wrap gap-2">
-      <div
-        v-for="status in statuses"
-        :key="status.key"
-        :draggable="status.enabled && status.configured"
-        :title="
-          !status.enabled
-            ? `${status.label} - disabled`
-            : !status.configured
-              ? `${status.label} - not configured`
-              : `Drag to assign ${status.label} to a field`
-        "
-        class="flex items-center gap-1.5 h-7 px-2.5 rounded text-xs font-medium select-none transition-transform"
-        :style="providerChipStyle(status.key, !(status.enabled && status.configured))"
-        :class="status.enabled && status.configured ? 'cursor-grab active:cursor-grabbing active:scale-95' : 'cursor-not-allowed'"
-        @dragstart="onDragStart(status.key, $event)"
-      >
-        {{ PROVIDER_SHORT_LABELS[status.key] ?? status.key }}
-      </div>
+  <div class="flex flex-wrap gap-2">
+    <div
+      v-for="status in statuses"
+      :key="status.key"
+      :draggable="status.enabled && status.configured"
+      :title="
+        !status.enabled
+          ? `${status.label} - disabled`
+          : !status.configured
+            ? `${status.label} - not configured`
+            : `Drag to assign ${status.label} to a field`
+      "
+      class="flex items-center gap-1.5 h-7 px-3 rounded text-[10px] font-bold uppercase tracking-tight select-none transition-all shadow-xs"
+      :style="providerChipStyle(status.key, !(status.enabled && status.configured))"
+      :class="
+        status.enabled && status.configured ? 'cursor-grab active:cursor-grabbing hover:scale-105 active:scale-95' : 'cursor-not-allowed opacity-40'
+      "
+      @dragstart="onDragStart(status.key, $event)"
+    >
+      {{ PROVIDER_SHORT_LABELS[status.key] ?? status.key }}
     </div>
-    <span class="text-xs text-muted-foreground/60 hidden sm:block">drag onto any field row to assign</span>
   </div>
 </template>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index fd13dfb30..81b9a22e2 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -87,7 +87,7 @@ const router = createRouter({
               path: 'admin/file-naming',
               name: 'settings-admin-file-naming',
               component: () => import('@/features/settings/FileNamingSettings.vue'),
-              meta: { maxWidth: 'max-w-4xl' },
+              meta: { maxWidth: 'max-w-6xl' },
             },
             {
               path: 'admin/staging',
diff --git a/client/src/views/SettingsView.vue b/client/src/views/SettingsView.vue
index 1e1b99fb0..7573e40e8 100644
--- a/client/src/views/SettingsView.vue
+++ b/client/src/views/SettingsView.vue
@@ -4,11 +4,11 @@ import { useRoute } from 'vue-router'
 import SettingsHeader from '@/features/settings/SettingsHeader.vue'
 
 const route = useRoute()
-const maxWidth = computed(() => (route.meta.maxWidth as string | undefined) ?? 'max-w-3xl')
+const maxWidth = computed(() => route.meta.maxWidth as string | undefined)
 </script>
 
 <template>
-  <div class="flex flex-col my-2 -ml-2 min-h-[calc(100%-1.5rem)] overflow-hidden rounded-xl border border-border/70 bg-card/30">
+  <div class="flex flex-col my-2 min-h-[calc(100%-1.5rem)] overflow-hidden rounded-xl border border-border/70 bg-card/30">
     <SettingsHeader />
     <main class="flex-1 overflow-y-auto overflow-x-hidden">
       <div class="px-6 py-6" :class="maxWidth">
diff --git a/client/src/views/StagingView.vue b/client/src/views/StagingView.vue
index fa5c29272..a2471ba19 100644
--- a/client/src/views/StagingView.vue
+++ b/client/src/views/StagingView.vue
@@ -252,7 +252,7 @@ onUnmounted(() => {
 
 <template>
   <main class="flex-1" @dragover="onDragOver" @dragenter="onDragEnter" @dragleave="onDragLeave" @drop="onDrop">
-    <div class="flex flex-col gap-4 p-4 sm:p-6 max-w-7xl mx-auto w-full">
+    <div class="flex flex-col gap-4 p-4 sm:p-6 max-w-7xl w-full">
       <div class="flex items-center gap-2.5">
         <div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
           <PackageOpen class="size-4.5 text-primary" />
diff --git a/client/typecheck-baseline.txt b/client/typecheck-baseline.txt
index 7b00d2e71..782d23ed7 100644
--- a/client/typecheck-baseline.txt
+++ b/client/typecheck-baseline.txt
@@ -1,7 +1,6 @@
 # Client typecheck baseline
 # Auto-generated by: pnpm run typecheck:client:baseline:update
 # One diagnostic per line. Do not edit manually unless necessary.
-src/components/IconPicker.vue(174,39): error TS18046: 'item' is of type 'unknown'.
 src/features/book/components/detail/BookDetailHeader.vue(22,5): error TS2322: Type 'number | null | undefined' is not assignable to type 'number | null'.
 src/features/book/components/detail/BookDetailHeader.vue(23,5): error TS2322: Type 'number | null | undefined' is not assignable to type 'number | null'.
 src/features/dashboard/components/DashboardSettingsSheet.vue(45,26): error TS2345: Argument of type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; } | undefined' is not assignable to parameter of type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; }'.
@@ -9,7 +8,6 @@ src/features/dashboard/components/DashboardSettingsSheet.vue(80,23): error TS232
 src/features/dashboard/components/DashboardSettingsSheet.vue(80,5): error TS2322: Type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; } | undefined' is not assignable to type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; }'.
 src/features/dashboard/components/DashboardSettingsSheet.vue(87,19): error TS2322: Type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; } | undefined' is not assignable to type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; }'.
 src/features/dashboard/components/DashboardSettingsSheet.vue(87,5): error TS2322: Type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; } | undefined' is not assignable to type '{ id: string; type: ScrollerType; label: string; enabled: boolean; order: number; limit: number; lensId?: number | undefined; }'.
-src/features/library/components/LibraryCreatorDetails.vue(109,43): error TS18046: 'item' is of type 'unknown'.
 src/features/library/components/LibraryCreatorScanner.vue(36,36): error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
 src/features/reader/components/CbzReaderView.vue(95,17): error TS2532: Object is possibly 'undefined'.
 src/features/reader/components/CbzReaderView.vue(99,14): error TS2532: Object is possibly 'undefined'.
@@ -36,8 +34,6 @@ src/features/reader/composables/useFoliateInput.ts(92,39): error TS18048: 'touch
 src/features/reader/composables/useFoliateInput.ts(95,27): error TS18048: 'touch' is possibly 'undefined'.
 src/features/reader/composables/usePdfFind.ts(33,22): error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
 src/features/reader/composables/usePdfFind.ts(33,43): error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
-src/features/reader/composables/usePdfOutline.ts(22,72): error TS2694: Namespace '"node_modules/.pnpm/pdfjs-dist@5.5.207/node_modules/pdfjs-dist/types/src/pdf"' has no exported member 'RefProxy'.
-src/features/reader/composables/usePdfOutline.ts(29,74): error TS2694: Namespace '"node_modules/.pnpm/pdfjs-dist@5.5.207/node_modules/pdfjs-dist/types/src/pdf"' has no exported member 'OutlineNode'.
 src/features/reader/composables/usePdfRenderer.ts(96,17): error TS18048: 'e' is possibly 'undefined'.
 src/features/reader/composables/usePdfRenderer.ts(97,34): error TS18048: 'f' is possibly 'undefined'.
 src/features/reader/composables/usePdfRenderer.ts(98,31): error TS18048: 'a' is possibly 'undefined'.
@@ -57,8 +53,4 @@ src/features/settings/metadata-preferences/components/FieldConfigSheet.vue(57,5)
 src/features/settings/metadata-preferences/components/FieldConfigSheet.vue(65,21): error TS2322: Type 'MetadataProviderKey | undefined' is not assignable to type 'MetadataProviderKey'.
 src/features/settings/metadata-preferences/components/FieldConfigSheet.vue(65,5): error TS2322: Type 'MetadataProviderKey | undefined' is not assignable to type 'MetadataProviderKey'.
 src/features/settings/metadata-preferences/components/ProviderChipList.vue(56,34): error TS2345: Argument of type 'MetadataProviderKey | undefined' is not assignable to parameter of type 'MetadataProviderKey'.
-src/features/settings/metadata-preferences/components/ProviderConfigPanel.vue(130,25): error TS2352: Conversion of type '{ enabled: boolean; apiKey: string; } | { enabled: boolean; domain: string; cookie: string; } | { enabled: boolean; } | { enabled: boolean; apiKey: string; }' to type 'Record<string, string>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
-src/features/settings/metadata-preferences/components/ProviderConfigPanel.vue(138,27): error TS2352: Conversion of type '{ enabled: boolean; apiKey: string; } | { enabled: boolean; domain: string; cookie: string; } | { enabled: boolean; } | { enabled: boolean; apiKey: string; }' to type 'Record<string, string>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
-src/features/settings/PdfSettings.vue(45,17): error TS2367: This comparison appears to be unintentional because the types '"vertical" | "horizontal" | "page" | "wrapped"' and '"continuous"' have no overlap.
-src/features/settings/PdfSettings.vue(47,32): error TS2322: Type '"continuous"' is not assignable to type '"vertical" | "horizontal" | "page" | "wrapped" | undefined'.
 src/lib/api.ts(55,37): error TS2353: Object literal may only specify known properties, and '_isRetry' does not exist in type 'RequestInit'.
diff --git a/packages/types/src/reader-settings.ts b/packages/types/src/reader-settings.ts
index f6bc082b3..baebe266e 100644
--- a/packages/types/src/reader-settings.ts
+++ b/packages/types/src/reader-settings.ts
@@ -8,6 +8,7 @@ export const FORMAT_TO_GROUP: Record<string, ReaderFormatGroup> = {
   fb2: 'epub',
   txt: 'epub',
   pdf: 'pdf',
+  cbx: 'cbx',
   cbz: 'cbx',
   cbr: 'cbx',
   cb7: 'cbx',
@@ -76,7 +77,7 @@ export const EPUB_READER_DEFAULTS: EpubReaderSettings = {
 }
 
 export const PDF_READER_DEFAULTS: PdfReaderSettings = {
-  scrollMode: 'vertical',
+  scrollMode: 'page',
   spread: 'none',
   zoomMode: 'fit-page',
   customScale: 1.0,
diff --git a/server/src/modules/app-settings/dto/update-oidc-config.dto.ts b/server/src/modules/app-settings/dto/update-oidc-config.dto.ts
index dc63d5552..a0dac433e 100644
--- a/server/src/modules/app-settings/dto/update-oidc-config.dto.ts
+++ b/server/src/modules/app-settings/dto/update-oidc-config.dto.ts
@@ -22,10 +22,9 @@ class AutoProvisionDto {
   @IsBoolean()
   allowLocalLinking: boolean;
 
-  @IsOptional()
   @IsArray()
   @IsString({ each: true })
-  defaultPermissionNames?: string[];
+  defaultPermissionNames: string[] = [];
 }
 
 export class UpdateOidcConfigDto {
diff --git a/server/src/modules/book/book.service.ts b/server/src/modules/book/book.service.ts
index 1b9658525..ad32b747c 100644
--- a/server/src/modules/book/book.service.ts
+++ b/server/src/modules/book/book.service.ts
@@ -3,7 +3,7 @@ import { ConfigService } from '@nestjs/config';
 import { access, readdir, rm, stat } from 'fs/promises';
 import { basename, extname, join } from 'path';
 
-import { MetadataProviderKey, resolveUploadPath } from '@projectx/types';
+import { MetadataProviderKey, Permission, resolveUploadPath } from '@projectx/types';
 import type { BookKoboState, BookQuery, BooksPage, MetadataField } from '@projectx/types';
 import { assembleBookCards } from './utils/assemble-book-cards';
 import type { RequestUser } from '../../common/types/request-user';
@@ -44,7 +44,7 @@ export class BookService {
     return user.isSuperuser;
   }
 
-  private hasPermission(user: RequestUser, permissionName: string): boolean {
+  private hasPermission(user: RequestUser, permissionName: Permission): boolean {
     return user.isSuperuser || user.permissions.includes(permissionName);
   }
 
@@ -357,7 +357,7 @@ export class BookService {
   async getKoboState(id: number, user: RequestUser): Promise<BookKoboState> {
     await this.verifyBookAccess(id, user);
 
-    if (!this.hasPermission(user, 'kobo_sync')) {
+    if (!this.hasPermission(user, Permission.KoboSync)) {
       return {
         eligibleForKoboSync: false,
         syncCollections: [],
diff --git a/server/src/modules/kobo/guards/kobo-token.guard.ts b/server/src/modules/kobo/guards/kobo-token.guard.ts
index a69496884..a8abbad83 100644
--- a/server/src/modules/kobo/guards/kobo-token.guard.ts
+++ b/server/src/modules/kobo/guards/kobo-token.guard.ts
@@ -3,6 +3,7 @@ import { eq } from 'drizzle-orm';
 import type { FastifyRequest } from 'fastify';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 
+import { Permission } from '@projectx/types';
 import { DB } from '../../../db/db.module';
 import * as schema from '../../../db/schema';
 import { PermissionService } from '../../../common/services/permission.service';
@@ -36,7 +37,7 @@ export class KoboTokenGuard implements CanActivate {
 
     const user = await this.userService.findByIdWithPermissions(device.userId);
     if (!user || !user.active) throw new UnauthorizedException('Account not found or disabled');
-    if (!this.permissionService.userHas(user, 'kobo_sync')) throw new UnauthorizedException('Kobo sync permission revoked');
+    if (!this.permissionService.userHas(user, Permission.KoboSync)) throw new UnauthorizedException('Kobo sync permission revoked');
 
     // Update last seen asynchronously so it doesn't block the request
     this.db
diff --git a/server/src/modules/metadata-preferences/provider-config.service.spec.ts b/server/src/modules/metadata-preferences/provider-config.service.spec.ts
index 55381416d..4338a09c2 100644
--- a/server/src/modules/metadata-preferences/provider-config.service.spec.ts
+++ b/server/src/modules/metadata-preferences/provider-config.service.spec.ts
@@ -137,7 +137,7 @@ describe('ProviderConfigService', () => {
       MetadataProviderKey.HARDCOVER,
       MetadataProviderKey.OPEN_LIBRARY,
     ]);
-    expect(statuses.find((s) => s.key === MetadataProviderKey.GOOGLE)?.hint).toContain('API key recommended');
+    expect(statuses.find((s) => s.key === MetadataProviderKey.GOOGLE)?.hint).toContain('Recommended for higher rate limits');
     expect(statuses.find((s) => s.key === MetadataProviderKey.AMAZON)?.hint).toContain('Cookie recommended');
     expect(statuses.find((s) => s.key === MetadataProviderKey.HARDCOVER)?.configured).toBe(false);
     expect(statuses.find((s) => s.key === MetadataProviderKey.GOODREADS)?.enabled).toBe(false);
diff --git a/server/src/modules/metadata-preferences/provider-config.service.ts b/server/src/modules/metadata-preferences/provider-config.service.ts
index 9febc9c3a..62f98493d 100644
--- a/server/src/modules/metadata-preferences/provider-config.service.ts
+++ b/server/src/modules/metadata-preferences/provider-config.service.ts
@@ -89,7 +89,7 @@ export class ProviderConfigService {
         label: PROVIDER_LABELS[MetadataProviderKey.GOOGLE],
         enabled: cfg.google.enabled,
         configured: true,
-        hint: !cfg.google.apiKey ? 'API key recommended for higher rate limits' : undefined,
+        hint: !cfg.google.apiKey ? 'Recommended for higher rate limits' : undefined,
       },
       {
         key: MetadataProviderKey.AMAZON,
diff --git a/server/src/modules/opds/opds-auth.guard.ts b/server/src/modules/opds/opds-auth.guard.ts
index e7a9b5d9b..43c1474ad 100644
--- a/server/src/modules/opds/opds-auth.guard.ts
+++ b/server/src/modules/opds/opds-auth.guard.ts
@@ -4,6 +4,7 @@ import { CanActivate, ExecutionContext, ForbiddenException, Injectable, Unauthor
 import { ConfigService } from '@nestjs/config';
 import type { FastifyReply, FastifyRequest } from 'fastify';
 
+import { Permission } from '@projectx/types';
 import { PermissionService } from '../../common/services/permission.service';
 import { OpdsUserService } from './opds-user.service';
 import { UserService } from '../user/user.service';
@@ -53,7 +54,7 @@ export class OpdsAuthGuard implements CanActivate {
 
       const fullUser = await this.userService.findByIdWithPermissions(userId);
       if (!fullUser || !fullUser.active) throw new UnauthorizedException('Account not found or disabled');
-      if (!this.permissionService.userHas(fullUser, 'opds_access')) throw new ForbiddenException('OPDS access revoked');
+      if (!this.permissionService.userHas(fullUser, Permission.OpdsAccess)) throw new ForbiddenException('OPDS access revoked');
 
       (request as unknown as Record<string, unknown>).opdsUser = {
         opdsUserId: 0,
@@ -98,7 +99,7 @@ export class OpdsAuthGuard implements CanActivate {
       throw new UnauthorizedException('Account not found');
     }
 
-    if (!this.permissionService.userHas(fullUser, 'opds_access')) {
+    if (!this.permissionService.userHas(fullUser, Permission.OpdsAccess)) {
       throw new ForbiddenException('OPDS access revoked');
     }