From a075a5061fc810da01422c63cd8943851245ec90 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Wed, 5 Aug 2026 16:01:22 -0400
Subject: [PATCH] feat(ui): refresh auth, entry, admin, and secondary pages

Apply the new design-system primitives across the remaining pages so the
whole app shares one visual language:

- Auth/entry: redesigned index, login, register (centered card layout,
  SVG icons, semantic tokens)
- Admin: sidebar nav with icons, cohesive admin dashboard/users/library/
  processing-issues/settings (tables use border-line + hover states;
  scan/websocket attributes preserved)
- Secondary: analytics (stat cards), devices, progress, conflicts, queue,
  profile + form/modal all migrated to .card/.btn/.input primitives and
  SVG action icons
- Docs + API explorer + setup wizard + collection/rules/modals +
  unlinked books + book-detail modals: consistent chrome, modal scrims
  use --surface-overlay, close buttons use icon-btn
- reader.templ and error.templ intentionally left unchanged
---
 templates/admin.templ                         | 199 +++++-----
 templates/admin_library.templ                 | 238 ++++++------
 templates/admin_library_templ.go              |  94 +++--
 templates/admin_processing_issues.templ       |  40 +-
 templates/admin_processing_issues_templ.go    |  72 ++--
 templates/admin_settings.templ                | 167 ++++-----
 templates/admin_settings_templ.go             | 132 ++++---
 templates/admin_sidebar.templ                 |  33 +-
 templates/admin_sidebar_templ.go              |  58 ++-
 templates/admin_templ.go                      |  44 ++-
 templates/admin_users.templ                   | 219 ++++++-----
 templates/admin_users_templ.go                |  42 +--
 templates/analytics.templ                     |  59 +--
 templates/analytics_templ.go                  |  10 +-
 templates/api_explorer.templ                  |  44 +--
 templates/api_explorer_templ.go               |  20 +-
 templates/book_detail_modals.templ            | 332 +++++++---------
 templates/book_detail_modals_templ.go         | 354 ++++++++++--------
 templates/collection_modal.templ              |  60 ++-
 templates/collection_modal_templ.go           |  48 ++-
 templates/collection_rules.templ              |  90 ++---
 templates/collection_rules_templ.go           |  42 ++-
 templates/conflicts.templ                     | 139 ++++---
 templates/conflicts_templ.go                  |  80 +++-
 templates/custom_section.templ                |  90 ++---
 templates/custom_section_templ.go             |  42 ++-
 templates/devices.templ                       | 258 ++++++-------
 templates/devices_templ.go                    | 234 +++++++++---
 templates/docs.templ                          |  36 +-
 templates/docs_templ.go                       | 102 ++---
 templates/filter_item.templ                   |  11 +-
 templates/filter_item_templ.go                |  18 +-
 templates/index.templ                         | 134 +++----
 templates/index_templ.go                      |  84 ++++-
 templates/login.templ                         |  88 ++---
 templates/login_templ.go                      |  68 +++-
 templates/profile.templ                       |  12 +-
 templates/profile_form.templ                  |  80 ++--
 templates/profile_form_templ.go               |  36 +-
 templates/profile_modal.templ                 |  15 +-
 templates/profile_modal_templ.go              |  14 +-
 templates/profile_templ.go                    |   4 +-
 templates/progress.templ                      |  50 +--
 templates/progress_templ.go                   | 104 +++--
 templates/queue.templ                         |  96 ++---
 templates/queue_templ.go                      |  98 +++--
 templates/register.templ                      | 114 +++---
 templates/register_templ.go                   |  10 +-
 .../restore_system_collection_modal.templ     |  18 +-
 .../restore_system_collection_modal_templ.go  |  10 +-
 templates/setup.templ                         | 190 +++++-----
 templates/setup_templ.go                      |  10 +-
 templates/unlinked_books.templ                | 114 +++---
 templates/unlinked_books_templ.go             | 112 ++++--
 54 files changed, 2740 insertions(+), 2128 deletions(-)

diff --git a/templates/admin.templ b/templates/admin.templ
index a5d1ad9..8ab302d 100644
--- a/templates/admin.templ
+++ b/templates/admin.templ
@@ -9,110 +9,111 @@ templ Admin(user User) {
 			<script src="/static/htmx.min.js"></script>
 			<link href="/static/style.css" rel="stylesheet"/>
 		</head>
-		<body x-data="admin" x-init="loadWatchStatus(); initializeScanWebSocket()" class="theme-tokyo-night">
-			@Header(user, "/admin")
-			<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
-				@AdminSidebar(user, "/admin")
-				<main class="flex-1 p-8">
-					<div class="max-w-4xl">
-						<div class="mb-8">
-							<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Dashboard</h1>
-							<p style="color: var(--text-secondary)">Overview of your Bookhoard library and settings</p>
+	<body x-data="admin" x-init="loadWatchStatus(); initializeScanWebSocket()" class="theme-tokyo-night">
+		@Header(user, "/admin")
+		<div class="flex min-h-screen bg-surface">
+			@AdminSidebar(user, "/admin")
+			<main class="flex-1 p-6 sm:p-8">
+				<div class="max-w-4xl">
+					<div class="mb-8">
+						<h1 class="text-2xl font-bold tracking-tight text-content mb-2">Dashboard</h1>
+						<p class="text-content-muted">Overview of your Bookhoard library and settings</p>
+					</div>
+					<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+						<div class="card p-6">
+							<div class="flex items-center space-x-3">
+								<div class="text-content-muted">@Icon("library", "h-7 w-7")</div>
+								<div>
+									<h3 class="font-semibold text-content">Library</h3>
+									<p class="text-content-muted text-sm">Manage your ebook collection</p>
+								</div>
+							</div>
+							<a href="/" class="btn btn-secondary mt-4 text-sm">View Library</a>
 						</div>
-						<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-							<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-								<div class="flex items-center space-x-3">
-									<div class="text-3xl">📖</div>
-									<div>
-										<h3 class="font-semibold" style="color: var(--text-primary)">Library</h3>
-										<p style="color: var(--text-secondary)" class="text-sm">Manage your ebook collection</p>
-									</div>
-								</div>
-								<a href="/" class="mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded">View Library</a>
-							</div>
-							<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-								<div class="flex items-center space-x-3">
-									<div class="text-3xl">👁️</div>
-									<div>
-										<h3 class="font-semibold" style="color: var(--text-primary)">Scan Watch Status</h3>
-										<p style="color: var(--text-secondary)" class="text-sm">Auto-detecting new files</p>
-									</div>
-								</div>
-								<div id="watch-status" class="mt-4 text-sm" style="color: var(--text-secondary)">
-									<span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span>
-									Watching <span id="watch-count">0</span> libraries
+						<div class="card p-6">
+							<div class="flex items-center space-x-3">
+								<div class="text-content-muted">@Icon("sync", "h-7 w-7")</div>
+								<div>
+									<h3 class="font-semibold text-content">Scan Watch Status</h3>
+									<p class="text-content-muted text-sm">Auto-detecting new files</p>
 								</div>
 							</div>
-						</div>
-						<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-							<h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Quick Actions</h3>
-							<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-								<button @click="scanAllLibraries()" class="btn-primary p-4 rounded-lg text-left">
-									<div class="font-medium">Rescan Library</div>
-									<div style="color: var(--text-secondary)" class="text-sm">Re-scan existing files and fix metadata</div>
-								</button>
-								<a href="/admin/library" class="btn-secondary p-4 rounded-lg text-left block">
-									<div class="font-medium">Manage Libraries and Folders</div>
-									<div style="color: var(--text-secondary)" class="text-sm">Add or remove libraries and scan directories</div>
-								</a>
-							</div>
-						</div>
-						<!-- Scan Progress Section -->
-						<div id="scan-progress-container" class="hidden mt-6 p-6 rounded-lg border opacity-0 -translate-y-2.5 transition-all duration-300 ease-out" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<div class="flex justify-between items-center mb-4">
-								<h3 class="text-lg font-semibold" style="color: var(--text-primary)">
-									📚 Scanning Libraries
-								</h3>
-								<button @click="hideScanProgress()" class="p-2 hover:bg-gray-700 rounded">
-									✕
-								</button>
-							</div>
-							<!-- Overall Progress -->
-							<div class="mb-4">
-								<div class="flex justify-between text-sm mb-2">
-									<span style="color: var(--text-secondary)">Overall Progress</span>
-									<span id="scan-progress-text" style="color: var(--text-primary)">0%</span>
-								</div>
-								<div class="w-full bg-gray-700 rounded-full h-3">
-									<div
-										id="scan-progress-bar"
-										class="h-3 rounded-full transition-all duration-500"
-										style="width: 0%; background-color: var(--accent);"
-									></div>
-								</div>
-								<div id="scan-status" class="text-sm mt-2" style="color: var(--text-secondary)">
-									Starting scan...
-								</div>
-							</div>
-							<!-- Per-Library Progress -->
-							<div id="library-progress-list" class="space-y-3">
-								<!-- Dynamically populated -->
-							</div>
-							<!-- Results Summary -->
-							<div id="scan-results" class="hidden mt-6 p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border);">
-								<h4 class="font-semibold mb-2" style="color: var(--text-primary)">✅ Scan Complete!</h4>
-								<div id="scan-results-content" style="color: var(--text-secondary)">
-									<!-- Results populated by JS -->
-								</div>
-								<div class="mt-4 flex gap-2">
-									<button
-										@click="window.location.reload()"
-										class="btn-primary px-4 py-2 rounded-lg"
-									>
-										Refresh to View Books
-									</button>
-									<button
-										@click="hideScanProgress()"
-										class="btn-secondary px-4 py-2 rounded-lg"
-									>
-										Dismiss
-									</button>
-								</div>
+							<div id="watch-status" class="mt-4 text-sm text-content-muted">
+								<span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2"></span>
+								Watching <span id="watch-count">0</span> libraries
 							</div>
 						</div>
 					</div>
-				</main>
-			</div>
-		</body>
+					<div class="card p-6">
+						<h3 class="text-xl font-semibold mb-4 text-content">Quick Actions</h3>
+						<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+							<button @click="scanAllLibraries()" class="btn btn-primary p-4 text-left">
+								<div class="font-medium">Rescan Library</div>
+								<div class="text-content-muted text-sm">Re-scan existing files and fix metadata</div>
+							</button>
+							<a href="/admin/library" class="btn btn-secondary p-4 text-left block">
+								<div class="font-medium">Manage Libraries and Folders</div>
+								<div class="text-content-muted text-sm">Add or remove libraries and scan directories</div>
+							</a>
+						</div>
+					</div>
+					<!-- Scan Progress Section -->
+					<div id="scan-progress-container" class="card mt-6 opacity-0 -translate-y-2.5 transition-all duration-300 ease-out">
+						<div class="flex justify-between items-center mb-4">
+							<h3 class="text-lg font-semibold text-content flex items-center gap-2">
+								@Icon("library", "h-5 w-5")
+								Scanning Libraries
+							</h3>
+							<button @click="hideScanProgress()" class="p-2 hover:bg-surface-hover rounded">
+								@Icon("close", "h-4 w-4")
+							</button>
+						</div>
+						<!-- Overall Progress -->
+						<div class="mb-4">
+							<div class="flex justify-between text-sm mb-2">
+								<span class="text-content-muted">Overall Progress</span>
+								<span id="scan-progress-text" class="text-content">0%</span>
+							</div>
+							<div class="w-full bg-surface-hover rounded-full h-3">
+								<div
+									id="scan-progress-bar"
+									class="h-3 rounded-full transition-all duration-500 bg-brand"
+									style="width: 0%;"
+								></div>
+							</div>
+							<div id="scan-status" class="text-sm mt-2 text-content-muted">
+								Starting scan...
+							</div>
+						</div>
+						<!-- Per-Library Progress -->
+						<div id="library-progress-list" class="space-y-3">
+							<!-- Dynamically populated -->
+						</div>
+						<!-- Results Summary -->
+						<div id="scan-results" class="hidden mt-6 p-4 rounded-lg border border-line bg-surface">
+							<h4 class="font-semibold mb-2 text-content flex items-center gap-2">@Icon("check-circle", "h-4 w-4") Scan Complete!</h4>
+							<div id="scan-results-content" class="text-content-muted">
+								<!-- Results populated by JS -->
+							</div>
+							<div class="mt-4 flex gap-2">
+								<button
+									@click="window.location.reload()"
+									class="btn btn-primary"
+								>
+									Refresh to View Books
+								</button>
+								<button
+									@click="hideScanProgress()"
+									class="btn btn-secondary"
+								>
+									Dismiss
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</main>
+		</div>
+	</body>
 	</html>
 }
diff --git a/templates/admin_library.templ b/templates/admin_library.templ
index ac1f327..3a2c90f 100644
--- a/templates/admin_library.templ
+++ b/templates/admin_library.templ
@@ -10,145 +10,147 @@ templ AdminLibrary(user User, libraries []LibraryData, users []User) {
 		</head>
 		<body x-data="library" x-init="initializeLibraryAdmin" class="theme-{ user.Theme }">
 			@Header(user, "/admin/library")
-			<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
-				@AdminSidebar(user, "/admin/library")
-				<main class="flex-1 p-8">
-					<div class="w-full">
-						<div class="mb-8">
-							<div class="flex items-center justify-between mb-4">
-								<a href="/admin" class="btn-secondary px-4 py-2 rounded-lg font-medium">
-									← Back to Dashboard
-								</a>
-								<button data-action="show-create-modal" class="btn-primary px-4 py-2 rounded-lg font-medium">
-									+ Create Library
-								</button>
-							</div>
-							<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Library Management</h1>
-							<p style="color: var(--text-secondary)">Manage libraries and configure media scanning</p>
+		<div class="flex min-h-screen bg-surface">
+			@AdminSidebar(user, "/admin/library")
+			<main class="flex-1 p-6 sm:p-8">
+				<div class="w-full">
+					<div class="mb-8">
+						<div class="flex items-center justify-between mb-4">
+							<a href="/admin" class="btn btn-secondary font-medium">
+								@Icon("arrow-left", "h-4 w-4")
+								Back to Dashboard
+							</a>
+							<button data-action="show-create-modal" class="btn btn-primary font-medium">
+								@Icon("plus", "h-4 w-4")
+								Create Library
+							</button>
 						</div>
-						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-							<!-- Libraries Section -->
-							<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-								<h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Libraries</h3>
-								<p style="color: var(--text-secondary)" class="mb-4">Manage media libraries and their folders</p>
-								<div id="libraries-list" class="space-y-3 mb-6">
-									if len(libraries) == 0 {
-										<p style="color: var(--text-secondary)" class="text-center py-8">
-											No libraries yet. Create your first library to get started.
-										</p>
-									} else {
-										for _, library := range libraries {
-											<div class="p-4 border rounded-lg" style="background-color: var(--bg-primary); border-color: var(--border)">
-												<div class="flex justify-between items-start mb-2">
-													<div>
-														<h4 class="font-semibold" style="color: var(--text-primary)">{ library.Name }</h4>
-														if library.Description != "" {
-															<p class="text-sm" style="color: var(--text-secondary)">{ library.Description }</p>
-														}
-														<span class="inline-block px-2 py-1 text-xs rounded" style="background-color: var(--accent); color: var(--bg-primary)">
-															{ library.TypeName }
-														</span>
-													</div>
-													<div class="flex space-x-2">
-														<button data-library-id={ library.ID } data-action="show-folders" class="text-xs px-2 py-1 rounded" style="background-color: var(--bg-secondary); color: var(--text-primary)">Folders</button>
-														<button data-library-id={ library.ID } data-action="edit" class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: var(--bg-primary)">Edit</button>
-														<button data-library-id={ library.ID } data-action="delete" class="text-xs px-2 py-1 rounded text-red-500">Delete</button>
-													</div>
+						<h1 class="text-2xl font-bold tracking-tight text-content mb-2">Library Management</h1>
+						<p class="text-content-muted">Manage libraries and configure media scanning</p>
+					</div>
+					<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+						<!-- Libraries Section -->
+						<div class="card p-6">
+							<h3 class="text-xl font-semibold mb-6 text-content">Libraries</h3>
+							<p class="text-content-muted mb-4">Manage media libraries and their folders</p>
+							<div id="libraries-list" class="space-y-3 mb-6">
+								if len(libraries) == 0 {
+									<p class="text-content-muted text-center py-8">
+										No libraries yet. Create your first library to get started.
+									</p>
+								} else {
+									for _, library := range libraries {
+										<div class="p-4 border border-line rounded-lg bg-surface">
+											<div class="flex justify-between items-start mb-2">
+												<div>
+													<h4 class="font-semibold text-content">{ library.Name }</h4>
+													if library.Description != "" {
+														<p class="text-sm text-content-muted">{ library.Description }</p>
+													}
+													<span class="badge bg-brand text-white">
+														{ library.TypeName }
+													</span>
+												</div>
+												<div class="flex space-x-2">
+													<button data-library-id={ library.ID } data-action="show-folders" class="btn btn-secondary text-xs">Folders</button>
+													<button data-library-id={ library.ID } data-action="edit" class="btn btn-primary text-xs">Edit</button>
+													<button data-library-id={ library.ID } data-action="delete" class="btn btn-danger text-xs">Delete</button>
 												</div>
-												<div id={ "library-folders-" + library.ID } class="hidden mt-3 space-y-2"></div>
 											</div>
-										}
+											<div id={ "library-folders-" + library.ID } class="hidden mt-3 space-y-2"></div>
+										</div>
 									}
-								</div>
-							</div>
-							<!-- User Library Visibility Section -->
-							<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-								<h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Library Visibility</h3>
-								<p style="color: var(--text-secondary)" class="mb-4">Control which libraries are visible to users</p>
-								<div id="visibility-controls" class="space-y-4">
-									<!-- Visibility controls will be loaded here -->
-								</div>
+								}
 							</div>
 						</div>
-						<!-- User Visibility Management -->
-						<div class="mt-8 card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-							<h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">User Library Access</h3>
-							<p style="color: var(--text-secondary)" class="mb-4">Manage individual user access to specific libraries</p>
-							<div class="mb-4">
-								<select id="user-select" onchange="loadUserVisibility()" class="px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
-									<option value="">Select a user...</option>
-									for _, user := range users {
-										<option value="{ user.ID }">{ user.Username } ({ user.Email })</option>
-									}
-								</select>
-							</div>
-							<div id="user-libraries" class="space-y-3">
-								<!-- User library checkboxes will be loaded here -->
+						<!-- User Library Visibility Section -->
+						<div class="card p-6">
+							<h3 class="text-xl font-semibold mb-6 text-content">Library Visibility</h3>
+							<p class="text-content-muted mb-4">Control which libraries are visible to users</p>
+							<div id="visibility-controls" class="space-y-4">
+								<!-- Visibility controls will be loaded here -->
 							</div>
 						</div>
 					</div>
-				</main>
-			</div>
-			<!-- Create Library Modal -->
-			<div id="create-library-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
-					<div class="flex justify-between items-center mb-6">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Create Library</h2>
-						<button type="button" data-action="hide-create-modal" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
-					</div>
-					<form id="create-library-form">
-						<input type="hidden" id="library-id" name="id"/>
+					<!-- User Visibility Management -->
+					<div class="mt-8 card p-6">
+						<h3 class="text-xl font-semibold mb-6 text-content">User Library Access</h3>
+						<p class="text-content-muted mb-4">Manage individual user access to specific libraries</p>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Library Name</label>
-							<input type="text" name="name" placeholder="My Ebook Library" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-						</div>
-						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Description</label>
-							<textarea name="description" placeholder="Optional description" rows="3" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"></textarea>
-						</div>
-						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Library Type</label>
-							<select name="type" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-								<option value="ebooks">📚 Ebooks</option>
-								<option value="comics">📖 Comics</option>
-								<option value="manga">🗾 Manga</option>
+							<select id="user-select" onchange="loadUserVisibility()" class="input">
+								<option value="">Select a user...</option>
+								for _, user := range users {
+									<option value="{ user.ID }">{ user.Username } ({ user.Email })</option>
+								}
 							</select>
 						</div>
-						<div class="flex justify-end space-x-3">
-							<button type="button" data-action="hide-create-modal" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
-							<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Create</button>
+						<div id="user-libraries" class="space-y-3">
+							<!-- User library checkboxes will be loaded here -->
 						</div>
-					</form>
-				</div>
-			</div>
-			<!-- Folder Browser Modal -->
-			<div id="folder-browser-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
-					<div class="flex justify-between items-center mb-4">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Browse Folders</h2>
-						<button type="button" data-action="browse-cancel" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
-					</div>
-					<div id="folder-browser-content">
-						<!-- Directory listings will be rendered here -->
 					</div>
 				</div>
-			</div>
-			<!-- Delete Library Confirmation Modal -->
-			<div id="delete-library-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
-					<div class="flex justify-between items-center mb-4">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Delete Library</h2>
-						<button type="button" data-action="hide-delete-modal" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+			</main>
+		</div>
+		<!-- Create Library Modal -->
+		<div id="create-library-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
+			<div class="card p-6 w-full max-w-md mx-4">
+				<div class="flex justify-between items-center mb-6">
+					<h2 class="text-xl font-bold text-content">Create Library</h2>
+					<button type="button" data-action="hide-create-modal" class="p-2 hover:bg-surface-hover rounded text-content">@Icon("close", "h-4 w-4")</button>
+				</div>
+				<form id="create-library-form">
+					<input type="hidden" id="library-id" name="id"/>
+					<div class="mb-4">
+						<label class="block text-sm font-medium mb-2 text-content">Library Name</label>
+						<input type="text" name="name" placeholder="My Ebook Library" class="input" required/>
 					</div>
-					<div id="delete-modal-content" class="mb-6" style="color: var(--text-primary)">
-						<!-- Dynamic content will be injected here -->
+					<div class="mb-4">
+						<label class="block text-sm font-medium mb-2 text-content">Description</label>
+						<textarea name="description" placeholder="Optional description" rows="3" class="input"></textarea>
+					</div>
+					<div class="mb-4">
+						<label class="block text-sm font-medium mb-2 text-content">Library Type</label>
+						<select name="type" class="input" required>
+							<option value="ebooks">📚 Ebooks</option>
+							<option value="comics">📖 Comics</option>
+							<option value="manga">🗾 Manga</option>
+						</select>
 					</div>
 					<div class="flex justify-end space-x-3">
-						<button type="button" data-action="hide-delete-modal" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
-						<button type="button" data-action="confirm-delete" class="btn-primary px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600">Delete</button>
+						<button type="button" data-action="hide-create-modal" class="btn btn-secondary">Cancel</button>
+						<button type="submit" class="btn btn-primary">Create</button>
 					</div>
+				</form>
+			</div>
+		</div>
+		<!-- Folder Browser Modal -->
+		<div id="folder-browser-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
+			<div class="card p-6 w-full max-w-md mx-4">
+				<div class="flex justify-between items-center mb-4">
+					<h2 class="text-xl font-bold text-content">Browse Folders</h2>
+					<button type="button" data-action="browse-cancel" class="p-2 hover:bg-surface-hover rounded text-content">@Icon("close", "h-4 w-4")</button>
+				</div>
+				<div id="folder-browser-content">
+					<!-- Directory listings will be rendered here -->
 				</div>
 			</div>
+		</div>
+		<!-- Delete Library Confirmation Modal -->
+		<div id="delete-library-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
+			<div class="card p-6 w-full max-w-md mx-4">
+				<div class="flex justify-between items-center mb-4">
+					<h2 class="text-xl font-bold text-content">Delete Library</h2>
+					<button type="button" data-action="hide-delete-modal" class="p-2 hover:bg-surface-hover rounded text-content">@Icon("close", "h-4 w-4")</button>
+				</div>
+				<div id="delete-modal-content" class="mb-6 text-content">
+					<!-- Dynamic content will be injected here -->
+				</div>
+				<div class="flex justify-end space-x-3">
+					<button type="button" data-action="hide-delete-modal" class="btn btn-secondary">Cancel</button>
+					<button type="button" data-action="confirm-delete" class="btn btn-danger">Delete</button>
+				</div>
+			</div>
+		</div>
 			<script src="/static/htmx.min.js"></script>
 		</body>
 	</html>
diff --git a/templates/admin_library_templ.go b/templates/admin_library_templ.go
index 903292e..04daa0f 100644
--- a/templates/admin_library_templ.go
+++ b/templates/admin_library_templ.go
@@ -37,7 +37,7 @@ func AdminLibrary(user User, libraries []LibraryData, users []User) templ.Compon
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex min-h-screen\" style=\"background-color: var(--bg-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex min-h-screen bg-surface\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -45,161 +45,201 @@ func AdminLibrary(user User, libraries []LibraryData, users []User) templ.Compon
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-8\"><div class=\"w-full\"><div class=\"mb-8\"><div class=\"flex items-center justify-between mb-4\"><a href=\"/admin\" class=\"btn-secondary px-4 py-2 rounded-lg font-medium\">← Back to Dashboard</a> <button data-action=\"show-create-modal\" class=\"btn-primary px-4 py-2 rounded-lg font-medium\">+ Create Library</button></div><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">Library Management</h1><p style=\"color: var(--text-secondary)\">Manage libraries and configure media scanning</p></div><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\"><!-- Libraries Section --><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h3 class=\"text-xl font-semibold mb-6\" style=\"color: var(--text-primary)\">Libraries</h3><p style=\"color: var(--text-secondary)\" class=\"mb-4\">Manage media libraries and their folders</p><div id=\"libraries-list\" class=\"space-y-3 mb-6\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-6 sm:p-8\"><div class=\"w-full\"><div class=\"mb-8\"><div class=\"flex items-center justify-between mb-4\"><a href=\"/admin\" class=\"btn btn-secondary font-medium\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("arrow-left", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "Back to Dashboard</a> <button data-action=\"show-create-modal\" class=\"btn btn-primary font-medium\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("plus", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "Create Library</button></div><h1 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Library Management</h1><p class=\"text-content-muted\">Manage libraries and configure media scanning</p></div><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\"><!-- Libraries Section --><div class=\"card p-6\"><h3 class=\"text-xl font-semibold mb-6 text-content\">Libraries</h3><p class=\"text-content-muted mb-4\">Manage media libraries and their folders</p><div id=\"libraries-list\" class=\"space-y-3 mb-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(libraries) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<p style=\"color: var(--text-secondary)\" class=\"text-center py-8\">No libraries yet. Create your first library to get started.</p>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<p class=\"text-content-muted text-center py-8\">No libraries yet. Create your first library to get started.</p>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
 			for _, library := range libraries {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"p-4 border rounded-lg\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><div class=\"flex justify-between items-start mb-2\"><div><h4 class=\"font-semibold\" style=\"color: var(--text-primary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"p-4 border border-line rounded-lg bg-surface\"><div class=\"flex justify-between items-start mb-2\"><div><h4 class=\"font-semibold text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var2 string
 				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(library.Name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 44, Col: 89}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 46, Col: 66}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</h4>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</h4>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if library.Description != "" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<p class=\"text-sm\" style=\"color: var(--text-secondary)\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<p class=\"text-sm text-content-muted\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var3 string
 					templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(library.Description)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 46, Col: 92}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 48, Col: 73}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</p>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</p>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<span class=\"inline-block px-2 py-1 text-xs rounded\" style=\"background-color: var(--accent); color: var(--bg-primary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<span class=\"badge bg-brand text-white\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(library.TypeName)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 49, Col: 33}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 51, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</span></div><div class=\"flex space-x-2\"><button data-library-id=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span></div><div class=\"flex space-x-2\"><button data-library-id=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var5 string
 				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.ResolveAttributeValue(library.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 53, Col: 50}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 55, Col: 49}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\" data-action=\"show-folders\" class=\"text-xs px-2 py-1 rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary)\">Folders</button> <button data-library-id=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" data-action=\"show-folders\" class=\"btn btn-secondary text-xs\">Folders</button> <button data-library-id=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var6 string
 				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.ResolveAttributeValue(library.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 54, Col: 50}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 56, Col: 49}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "\" data-action=\"edit\" class=\"text-xs px-2 py-1 rounded\" style=\"background-color: var(--accent); color: var(--bg-primary)\">Edit</button> <button data-library-id=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\" data-action=\"edit\" class=\"btn btn-primary text-xs\">Edit</button> <button data-library-id=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var7 string
 				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.ResolveAttributeValue(library.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 55, Col: 50}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 57, Col: 49}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" data-action=\"delete\" class=\"text-xs px-2 py-1 rounded text-red-500\">Delete</button></div></div><div id=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\" data-action=\"delete\" class=\"btn btn-danger text-xs\">Delete</button></div></div><div id=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.ResolveAttributeValue("library-folders-" + library.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 58, Col: 53}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 60, Col: 52}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\" class=\"hidden mt-3 space-y-2\"></div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"hidden mt-3 space-y-2\"></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</div></div><!-- User Library Visibility Section --><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h3 class=\"text-xl font-semibold mb-6\" style=\"color: var(--text-primary)\">Library Visibility</h3><p style=\"color: var(--text-secondary)\" class=\"mb-4\">Control which libraries are visible to users</p><div id=\"visibility-controls\" class=\"space-y-4\"><!-- Visibility controls will be loaded here --></div></div></div><!-- User Visibility Management --><div class=\"mt-8 card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h3 class=\"text-xl font-semibold mb-6\" style=\"color: var(--text-primary)\">User Library Access</h3><p style=\"color: var(--text-secondary)\" class=\"mb-4\">Manage individual user access to specific libraries</p><div class=\"mb-4\"><select id=\"user-select\" onchange=\"loadUserVisibility()\" class=\"px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"><option value=\"\">Select a user...</option> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div></div><!-- User Library Visibility Section --><div class=\"card p-6\"><h3 class=\"text-xl font-semibold mb-6 text-content\">Library Visibility</h3><p class=\"text-content-muted mb-4\">Control which libraries are visible to users</p><div id=\"visibility-controls\" class=\"space-y-4\"><!-- Visibility controls will be loaded here --></div></div></div><!-- User Visibility Management --><div class=\"mt-8 card p-6\"><h3 class=\"text-xl font-semibold mb-6 text-content\">User Library Access</h3><p class=\"text-content-muted mb-4\">Manage individual user access to specific libraries</p><div class=\"mb-4\"><select id=\"user-select\" onchange=\"loadUserVisibility()\" class=\"input\"><option value=\"\">Select a user...</option> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, user := range users {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<option value=\"{ user.ID }\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<option value=\"{ user.ID }\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 81, Col: 53}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 83, Col: 52}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " (")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " (")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(user.Email)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 81, Col: 69}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 83, Col: 68}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, ")</option>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ")</option>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</select></div><div id=\"user-libraries\" class=\"space-y-3\"><!-- User library checkboxes will be loaded here --></div></div></div></main></div><!-- Create Library Modal --><div id=\"create-library-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Create Library</h2><button type=\"button\" data-action=\"hide-create-modal\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"create-library-form\"><input type=\"hidden\" id=\"library-id\" name=\"id\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-primary)\">Library Name</label> <input type=\"text\" name=\"name\" placeholder=\"My Ebook Library\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-primary)\">Description</label> <textarea name=\"description\" placeholder=\"Optional description\" rows=\"3\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"></textarea></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-primary)\">Library Type</label> <select name=\"type\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required><option value=\"ebooks\">📚 Ebooks</option> <option value=\"comics\">📖 Comics</option> <option value=\"manga\">🗾 Manga</option></select></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" data-action=\"hide-create-modal\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Create</button></div></form></div></div><!-- Folder Browser Modal --><div id=\"folder-browser-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Browse Folders</h2><button type=\"button\" data-action=\"browse-cancel\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><div id=\"folder-browser-content\"><!-- Directory listings will be rendered here --></div></div></div><!-- Delete Library Confirmation Modal --><div id=\"delete-library-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Delete Library</h2><button type=\"button\" data-action=\"hide-delete-modal\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><div id=\"delete-modal-content\" class=\"mb-6\" style=\"color: var(--text-primary)\"><!-- Dynamic content will be injected here --></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" data-action=\"hide-delete-modal\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" data-action=\"confirm-delete\" class=\"btn-primary px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600\">Delete</button></div></div></div><script src=\"/static/htmx.min.js\"></script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</select></div><div id=\"user-libraries\" class=\"space-y-3\"><!-- User library checkboxes will be loaded here --></div></div></div></main></div><!-- Create Library Modal --><div id=\"create-library-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold text-content\">Create Library</h2><button type=\"button\" data-action=\"hide-create-modal\" class=\"p-2 hover:bg-surface-hover rounded text-content\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</button></div><form id=\"create-library-form\"><input type=\"hidden\" id=\"library-id\" name=\"id\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2 text-content\">Library Name</label> <input type=\"text\" name=\"name\" placeholder=\"My Ebook Library\" class=\"input\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2 text-content\">Description</label> <textarea name=\"description\" placeholder=\"Optional description\" rows=\"3\" class=\"input\"></textarea></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2 text-content\">Library Type</label> <select name=\"type\" class=\"input\" required><option value=\"ebooks\">📚 Ebooks</option> <option value=\"comics\">📖 Comics</option> <option value=\"manga\">🗾 Manga</option></select></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" data-action=\"hide-create-modal\" class=\"btn btn-secondary\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Create</button></div></form></div></div><!-- Folder Browser Modal --><div id=\"folder-browser-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold text-content\">Browse Folders</h2><button type=\"button\" data-action=\"browse-cancel\" class=\"p-2 hover:bg-surface-hover rounded text-content\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</button></div><div id=\"folder-browser-content\"><!-- Directory listings will be rendered here --></div></div></div><!-- Delete Library Confirmation Modal --><div id=\"delete-library-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold text-content\">Delete Library</h2><button type=\"button\" data-action=\"hide-delete-modal\" class=\"p-2 hover:bg-surface-hover rounded text-content\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</button></div><div id=\"delete-modal-content\" class=\"mb-6 text-content\"><!-- Dynamic content will be injected here --></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" data-action=\"hide-delete-modal\" class=\"btn btn-secondary\">Cancel</button> <button type=\"button\" data-action=\"confirm-delete\" class=\"btn btn-danger\">Delete</button></div></div></div><script src=\"/static/htmx.min.js\"></script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/admin_processing_issues.templ b/templates/admin_processing_issues.templ
index a017738..583d636 100644
--- a/templates/admin_processing_issues.templ
+++ b/templates/admin_processing_issues.templ
@@ -11,15 +11,16 @@ templ AdminProcessingIssues(user User, libraryID string, issues []ProcessingIssu
 		</head>
 		<body x-data="processingIssues" x-init="initializeProcessingIssues('{ libraryID }')" class="theme-{ user.Theme }">
 			@Header(user, "/admin/libraries/"+libraryID)
-			<main class="flex-1 p-8">
+			<main class="flex-1 p-6 sm:p-8">
 				<div class="mb-8">
 					<div class="flex items-center justify-between mb-4">
 						<div>
-							<h1 class="text-3xl font-bold mb-2">Processing Issues</h1>
-							<p class="text-gray-600">Items that couldn't be processed in this library</p>
+							<h1 class="text-2xl font-bold tracking-tight text-content mb-2">Processing Issues</h1>
+							<p class="text-content-muted">Items that couldn't be processed in this library</p>
 						</div>
-						<a href="/admin/libraries/{ libraryID }" class="btn-secondary px-4 py-2 rounded-lg">
-							← Back to Library
+						<a href="/admin/libraries/{ libraryID }" class="btn btn-secondary">
+							@Icon("arrow-left", "h-4 w-4")
+							Back to Library
 						</a>
 					</div>
 				</div>
@@ -27,39 +28,39 @@ templ AdminProcessingIssues(user User, libraryID string, issues []ProcessingIssu
 					<!-- Stats Cards -->
 					<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
 						if stats.ErrorCount > 0 {
-							<div class="card p-6 rounded-lg border-l-4 border-red-500">
+							<div class="card p-6 border-l-4 border-red-500">
 								<h3 class="text-lg font-semibold text-red-600 mb-2">Errors</h3>
-								<p class="text-3xl font-bold">{ stats.ErrorCount }</p>
+								<p class="text-3xl font-bold text-content">{ stats.ErrorCount }</p>
 							</div>
 						}
 						if stats.WarningCount > 0 {
-							<div class="card p-6 rounded-lg border-l-4 border-yellow-500">
+							<div class="card p-6 border-l-4 border-yellow-500">
 								<h3 class="text-lg font-semibold text-yellow-600 mb-2">Warnings</h3>
-								<p class="text-3xl font-bold">{ stats.WarningCount }</p>
+								<p class="text-3xl font-bold text-content">{ stats.WarningCount }</p>
 							</div>
 						}
 						if stats.InfoCount > 0 {
-							<div class="card p-6 rounded-lg border-l-4 border-blue-500">
+							<div class="card p-6 border-l-4 border-blue-500">
 								<h3 class="text-lg font-semibold text-blue-600 mb-2">Info</h3>
-								<p class="text-3xl font-bold">{ stats.InfoCount }</p>
+								<p class="text-3xl font-bold text-content">{ stats.InfoCount }</p>
 							</div>
 						}
 					</div>
 				}
 				if len(issues) == 0 {
-					<div class="card p-8 rounded-lg text-center">
-						<p class="text-gray-600">No processing issues found for this library.</p>
+					<div class="card p-8 text-center">
+						<p class="text-content-muted">No processing issues found for this library.</p>
 					</div>
 				} else {
 					<!-- Issues List -->
 					<div class="space-y-4">
 						for _, issue := range issues {
-							<div class="card p-6 rounded-lg">
+							<div class="card p-6">
 								<div class="flex justify-between items-start mb-4">
 									<div class="flex-1">
-										<h4 class="text-lg font-semibold mb-2">{ issue.Title }</h4>
-										<p class="text-gray-700 mb-3">{ issue.IssueDescription }</p>
-										<div class="text-sm text-gray-500 space-y-1">
+										<h4 class="text-lg font-semibold mb-2 text-content">{ issue.Title }</h4>
+										<p class="text-content mb-3">{ issue.IssueDescription }</p>
+										<div class="text-sm text-content-muted space-y-1">
 											<p><strong>Type:</strong> { issue.IssueType }</p>
 											<p><strong>Format:</strong> { issue.FormatGroup }</p>
 											<p><strong>File:</strong> { issue.FilePath }</p>
@@ -68,8 +69,7 @@ templ AdminProcessingIssues(user User, libraryID string, issues []ProcessingIssu
 									</div>
 									<div class="ml-4">
 										<span
-											class="inline-block px-3 py-1 text-sm rounded-full font-medium"
-											style="background-color: var(--accent); color: white;"
+											class="inline-block px-3 py-1 text-sm rounded-full font-medium bg-brand text-white"
 										>
 											{ issue.Severity }
 										</span>
@@ -79,7 +79,7 @@ templ AdminProcessingIssues(user User, libraryID string, issues []ProcessingIssu
 									if issue.Severity == "warning" || issue.Severity == "info" {
 										<button
 											@click="dismissIssue('{ issue.ID }', '{ issue.MediaItemID }')"
-											class="btn-secondary px-4 py-2 rounded text-sm"
+											class="btn btn-secondary text-sm"
 										>
 											Dismiss
 										</button>
diff --git a/templates/admin_processing_issues_templ.go b/templates/admin_processing_issues_templ.go
index 56cac26..098664a 100644
--- a/templates/admin_processing_issues_templ.go
+++ b/templates/admin_processing_issues_templ.go
@@ -38,167 +38,175 @@ func AdminProcessingIssues(user User, libraryID string, issues []ProcessingIssue
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"flex-1 p-8\"><div class=\"mb-8\"><div class=\"flex items-center justify-between mb-4\"><div><h1 class=\"text-3xl font-bold mb-2\">Processing Issues</h1><p class=\"text-gray-600\">Items that couldn't be processed in this library</p></div><a href=\"/admin/libraries/{ libraryID }\" class=\"btn-secondary px-4 py-2 rounded-lg\">← Back to Library</a></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"flex-1 p-6 sm:p-8\"><div class=\"mb-8\"><div class=\"flex items-center justify-between mb-4\"><div><h1 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Processing Issues</h1><p class=\"text-content-muted\">Items that couldn't be processed in this library</p></div><a href=\"/admin/libraries/{ libraryID }\" class=\"btn btn-secondary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("arrow-left", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "Back to Library</a></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if stats.ErrorCount > 0 || stats.WarningCount > 0 || stats.InfoCount > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<!-- Stats Cards --> <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-8\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<!-- Stats Cards --> <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-8\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if stats.ErrorCount > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"card p-6 rounded-lg border-l-4 border-red-500\"><h3 class=\"text-lg font-semibold text-red-600 mb-2\">Errors</h3><p class=\"text-3xl font-bold\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"card p-6 border-l-4 border-red-500\"><h3 class=\"text-lg font-semibold text-red-600 mb-2\">Errors</h3><p class=\"text-3xl font-bold text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var2 string
 				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(stats.ErrorCount)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 32, Col: 56}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 33, Col: 69}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</p></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</p></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
 			if stats.WarningCount > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"card p-6 rounded-lg border-l-4 border-yellow-500\"><h3 class=\"text-lg font-semibold text-yellow-600 mb-2\">Warnings</h3><p class=\"text-3xl font-bold\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"card p-6 border-l-4 border-yellow-500\"><h3 class=\"text-lg font-semibold text-yellow-600 mb-2\">Warnings</h3><p class=\"text-3xl font-bold text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var3 string
 				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(stats.WarningCount)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 38, Col: 58}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 39, Col: 71}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</p></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</p></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
 			if stats.InfoCount > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"card p-6 rounded-lg border-l-4 border-blue-500\"><h3 class=\"text-lg font-semibold text-blue-600 mb-2\">Info</h3><p class=\"text-3xl font-bold\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"card p-6 border-l-4 border-blue-500\"><h3 class=\"text-lg font-semibold text-blue-600 mb-2\">Info</h3><p class=\"text-3xl font-bold text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(stats.InfoCount)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 44, Col: 55}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 45, Col: 68}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</p></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</p></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
 		if len(issues) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"card p-8 rounded-lg text-center\"><p class=\"text-gray-600\">No processing issues found for this library.</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"card p-8 text-center\"><p class=\"text-content-muted\">No processing issues found for this library.</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<!-- Issues List --> <div class=\"space-y-4\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<!-- Issues List --> <div class=\"space-y-4\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for _, issue := range issues {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<div class=\"card p-6 rounded-lg\"><div class=\"flex justify-between items-start mb-4\"><div class=\"flex-1\"><h4 class=\"text-lg font-semibold mb-2\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"card p-6\"><div class=\"flex justify-between items-start mb-4\"><div class=\"flex-1\"><h4 class=\"text-lg font-semibold mb-2 text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var5 string
 				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(issue.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 60, Col: 62}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 61, Col: 75}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</h4><p class=\"text-gray-700 mb-3\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</h4><p class=\"text-content mb-3\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var6 string
 				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(issue.IssueDescription)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 61, Col: 64}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 62, Col: 63}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</p><div class=\"text-sm text-gray-500 space-y-1\"><p><strong>Type:</strong> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</p><div class=\"text-sm text-content-muted space-y-1\"><p><strong>Type:</strong> ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var7 string
 				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(issue.IssueType)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 63, Col: 54}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 64, Col: 54}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</p><p><strong>Format:</strong> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</p><p><strong>Format:</strong> ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(issue.FormatGroup)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 64, Col: 58}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 65, Col: 58}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</p><p><strong>File:</strong> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</p><p><strong>File:</strong> ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(issue.FilePath)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 65, Col: 53}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 66, Col: 53}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</p><p><strong>Library:</strong> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</p><p><strong>Library:</strong> ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(issue.LibraryTypeName)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 66, Col: 63}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_processing_issues.templ`, Line: 67, Col: 63}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</p></div></div><div class=\"ml-4\"><span class=\"inline-block px-3 py-1 text-sm rounded-full font-medium\" style=\"background-color: var(--accent); color: white;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</p></div></div><div class=\"ml-4\"><span class=\"inline-block px-3 py-1 text-sm rounded-full font-medium bg-brand text-white\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -211,27 +219,27 @@ func AdminProcessingIssues(user User, libraryID string, issues []ProcessingIssue
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</span></div></div><div class=\"flex gap-3 mt-4\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</span></div></div><div class=\"flex gap-3 mt-4\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if issue.Severity == "warning" || issue.Severity == "info" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<button @click=\"dismissIssue('{ issue.ID }', '{ issue.MediaItemID }')\" class=\"btn-secondary px-4 py-2 rounded text-sm\">Dismiss</button>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<button @click=\"dismissIssue('{ issue.ID }', '{ issue.MediaItemID }')\" class=\"btn btn-secondary text-sm\">Dismiss</button>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</main></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</main></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/admin_settings.templ b/templates/admin_settings.templ
index feacf7d..b3084ed 100644
--- a/templates/admin_settings.templ
+++ b/templates/admin_settings.templ
@@ -11,96 +11,95 @@ templ AdminSettings(user User, systemConfig map[string]string, errorMessage stri
 		</head>
 		<body class="theme-{ user.Theme }" x-data="adminSettings">
 			@Header(user, "/admin/settings")
-			<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
-				@AdminSidebar(user, "/admin/settings")
-				<main class="flex-1 p-8">
-					<div class="max-w-4xl">
-						<div class="mb-8">
-							<div class="flex items-center justify-between mb-4">
-								<a href="/admin" class="btn-secondary px-4 py-2 rounded-lg font-medium">
-									← Back to Dashboard
-								</a>
-							</div>
-							<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">System Settings</h1>
-							<p style="color: var(--text-secondary)">Configure your Bookhoard instance</p>
+		<div class="flex min-h-screen bg-surface">
+			@AdminSidebar(user, "/admin/settings")
+			<main class="flex-1 p-6 sm:p-8">
+				<div class="max-w-4xl">
+					<div class="mb-8">
+						<div class="flex items-center justify-between mb-4">
+							<a href="/admin" class="btn btn-secondary font-medium">
+								@Icon("arrow-left", "h-4 w-4")
+								Back to Dashboard
+							</a>
 						</div>
-						if errorMessage != "" {
-							<div class="mb-6 p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--error); color: var(--error);">
-								{ errorMessage }
+						<h1 class="text-2xl font-bold tracking-tight text-content mb-2">System Settings</h1>
+						<p class="text-content-muted">Configure your Bookhoard instance</p>
+					</div>
+					if errorMessage != "" {
+						<div class="mb-6 p-4 rounded-lg border border-line bg-surface-raised text-danger">
+							{ errorMessage }
+						</div>
+					}
+					<form id="settings-form" hx-put="/api/system/config" hx-target="#settings-form" hx-swap="outerHTML">
+						<div class="card p-6">
+							<h3 class="text-xl font-semibold mb-6 text-content">Base URL</h3>
+							<div>
+								<label class="block text-sm font-medium mb-2 text-content">Base URL</label>
+								<input
+									type="url"
+									name="base_url"
+									value={ systemConfig["base_url"] }
+									placeholder="https://books.example.com"
+									class="input"
+									required
+								/>
+								<p class="text-sm mt-1 text-content-muted">The public URL of your Bookhoard instance (e.g., https://books.example.com). Used for device sync, OPDS, and API endpoints.</p>
 							</div>
-						}
-						<form id="settings-form" hx-put="/api/system/config" hx-target="#settings-form" hx-swap="outerHTML">
-							<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
-								<h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">Base URL</h3>
-								<div>
-									<label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Base URL</label>
-									<input
-										type="url"
-										name="base_url"
-										value={ systemConfig["base_url"] }
-										placeholder="https://books.example.com"
-										class="w-full px-4 py-2 rounded-lg border"
-										style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-										required
-									/>
-									<p class="text-sm mt-1" style="color: var(--text-secondary)">The public URL of your Bookhoard instance (e.g., https://books.example.com). Used for device sync, OPDS, and API endpoints.</p>
-								</div>
-								<div class="mt-6 flex justify-end">
-									<button type="submit" class="btn-primary px-6 py-2 rounded-lg font-medium">
-										Save Settings
-									</button>
-								</div>
+							<div class="mt-6 flex justify-end">
+								<button type="submit" class="btn btn-primary font-medium">
+									Save Settings
+								</button>
 							</div>
-							<div class="mt-8 card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
-								<h3 class="text-xl font-semibold mb-6" style="color: var(--text-primary)">System Defaults</h3>
-								<div>
-									<label class="block text-sm font-medium mb-2" style="color: var(--text-primary)">Default Timezone</label>
-									<select
-										name="default_timezone"
-										id="default_timezone"
-										class="w-full px-4 py-2 rounded-lg border"
-										style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
-									>
-										<option value="UTC" selected?={ systemConfig["default_timezone"] == "UTC" }>UTC (UTC+0)</option>
-										<option value="Pacific/Honolulu" selected?={ systemConfig["default_timezone"] == "Pacific/Honolulu" }>Hawaii (UTC-10)</option>
-										<option value="America/Anchorage" selected?={ systemConfig["default_timezone"] == "America/Anchorage" }>Alaska (UTC-9/-8)</option>
-										<option value="America/Los_Angeles" selected?={ systemConfig["default_timezone"] == "America/Los_Angeles" }>Pacific (UTC-8/-7)</option>
-										<option value="America/Denver" selected?={ systemConfig["default_timezone"] == "America/Denver" }>Mountain (UTC-7/-6)</option>
-										<option value="America/Phoenix" selected?={ systemConfig["default_timezone"] == "America/Phoenix" }>Mountain - no DST (UTC-7)</option>
-										<option value="America/Chicago" selected?={ systemConfig["default_timezone"] == "America/Chicago" }>Central (UTC-6/-5)</option>
-										<option value="America/New_York" selected?={ systemConfig["default_timezone"] == "America/New_York" }>Eastern (UTC-5/-4)</option>
-										<option value="America/Sao_Paulo" selected?={ systemConfig["default_timezone"] == "America/Sao_Paulo" }>Brasilia (UTC-3/-2)</option>
-										<option value="Europe/London" selected?={ systemConfig["default_timezone"] == "Europe/London" }>British (UTC+0/+1)</option>
-										<option value="Europe/Paris" selected?={ systemConfig["default_timezone"] == "Europe/Paris" }>Central European (UTC+1/+2)</option>
-										<option value="Europe/Helsinki" selected?={ systemConfig["default_timezone"] == "Europe/Helsinki" }>Eastern European (UTC+2/+3)</option>
-										<option value="Europe/Moscow" selected?={ systemConfig["default_timezone"] == "Europe/Moscow" }>Moscow (UTC+3)</option>
-										<option value="Asia/Tehran" selected?={ systemConfig["default_timezone"] == "Asia/Tehran" }>Iran (UTC+3:30)</option>
-										<option value="Asia/Dubai" selected?={ systemConfig["default_timezone"] == "Asia/Dubai" }>Gulf (UTC+4)</option>
-										<option value="Asia/Karachi" selected?={ systemConfig["default_timezone"] == "Asia/Karachi" }>Pakistan (UTC+5)</option>
-										<option value="Asia/Kolkata" selected?={ systemConfig["default_timezone"] == "Asia/Kolkata" }>India (UTC+5:30)</option>
-										<option value="Asia/Dhaka" selected?={ systemConfig["default_timezone"] == "Asia/Dhaka" }>Bangladesh (UTC+6)</option>
-										<option value="Asia/Bangkok" selected?={ systemConfig["default_timezone"] == "Asia/Bangkok" }>Indochina (UTC+7)</option>
-										<option value="Asia/Shanghai" selected?={ systemConfig["default_timezone"] == "Asia/Shanghai" }>China (UTC+8)</option>
-										<option value="Asia/Tokyo" selected?={ systemConfig["default_timezone"] == "Asia/Tokyo" }>Japan/Korea (UTC+9)</option>
-										<option value="Australia/Darwin" selected?={ systemConfig["default_timezone"] == "Australia/Darwin" }>Australian Central (UTC+9:30)</option>
-										<option value="Australia/Sydney" selected?={ systemConfig["default_timezone"] == "Australia/Sydney" }>Australian Eastern (UTC+10/+11)</option>
-										<option value="Pacific/Auckland" selected?={ systemConfig["default_timezone"] == "Pacific/Auckland" }>New Zealand (UTC+12/+13)</option>
-									</select>
-									<p class="text-sm mt-1" style="color: var(--text-secondary)">Default timezone for users who haven't set their own.</p>
-								</div>
-							</div>
-						</form>
-						<div class="mt-8 card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">URL Paths</h3>
-							<div class="space-y-2 text-sm" style="color: var(--text-secondary);">
-								<p><strong>OPDS:</strong> { systemConfig["base_url"] }/opds</p>
-								<p><strong>API:</strong> { systemConfig["base_url"] }/api</p>
-								<p><strong>Device Sync:</strong> { systemConfig["base_url"] }/api/sync</p>
+						</div>
+						<div class="mt-8 card p-6">
+							<h3 class="text-xl font-semibold mb-6 text-content">System Defaults</h3>
+							<div>
+								<label class="block text-sm font-medium mb-2 text-content">Default Timezone</label>
+								<select
+									name="default_timezone"
+									id="default_timezone"
+									class="input"
+								>
+									<option value="UTC" selected?={ systemConfig["default_timezone"] == "UTC" }>UTC (UTC+0)</option>
+									<option value="Pacific/Honolulu" selected?={ systemConfig["default_timezone"] == "Pacific/Honolulu" }>Hawaii (UTC-10)</option>
+									<option value="America/Anchorage" selected?={ systemConfig["default_timezone"] == "America/Anchorage" }>Alaska (UTC-9/-8)</option>
+									<option value="America/Los_Angeles" selected?={ systemConfig["default_timezone"] == "America/Los_Angeles" }>Pacific (UTC-8/-7)</option>
+									<option value="America/Denver" selected?={ systemConfig["default_timezone"] == "America/Denver" }>Mountain (UTC-7/-6)</option>
+									<option value="America/Phoenix" selected?={ systemConfig["default_timezone"] == "America/Phoenix" }>Mountain - no DST (UTC-7)</option>
+									<option value="America/Chicago" selected?={ systemConfig["default_timezone"] == "America/Chicago" }>Central (UTC-6/-5)</option>
+									<option value="America/New_York" selected?={ systemConfig["default_timezone"] == "America/New_York" }>Eastern (UTC-5/-4)</option>
+									<option value="America/Sao_Paulo" selected?={ systemConfig["default_timezone"] == "America/Sao_Paulo" }>Brasilia (UTC-3/-2)</option>
+									<option value="Europe/London" selected?={ systemConfig["default_timezone"] == "Europe/London" }>British (UTC+0/+1)</option>
+									<option value="Europe/Paris" selected?={ systemConfig["default_timezone"] == "Europe/Paris" }>Central European (UTC+1/+2)</option>
+									<option value="Europe/Helsinki" selected?={ systemConfig["default_timezone"] == "Europe/Helsinki" }>Eastern European (UTC+2/+3)</option>
+									<option value="Europe/Moscow" selected?={ systemConfig["default_timezone"] == "Europe/Moscow" }>Moscow (UTC+3)</option>
+									<option value="Asia/Tehran" selected?={ systemConfig["default_timezone"] == "Asia/Tehran" }>Iran (UTC+3:30)</option>
+									<option value="Asia/Dubai" selected?={ systemConfig["default_timezone"] == "Asia/Dubai" }>Gulf (UTC+4)</option>
+									<option value="Asia/Karachi" selected?={ systemConfig["default_timezone"] == "Asia/Karachi" }>Pakistan (UTC+5)</option>
+									<option value="Asia/Kolkata" selected?={ systemConfig["default_timezone"] == "Asia/Kolkata" }>India (UTC+5:30)</option>
+									<option value="Asia/Dhaka" selected?={ systemConfig["default_timezone"] == "Asia/Dhaka" }>Bangladesh (UTC+6)</option>
+									<option value="Asia/Bangkok" selected?={ systemConfig["default_timezone"] == "Asia/Bangkok" }>Indochina (UTC+7)</option>
+									<option value="Asia/Shanghai" selected?={ systemConfig["default_timezone"] == "Asia/Shanghai" }>China (UTC+8)</option>
+									<option value="Asia/Tokyo" selected?={ systemConfig["default_timezone"] == "Asia/Tokyo" }>Japan/Korea (UTC+9)</option>
+									<option value="Australia/Darwin" selected?={ systemConfig["default_timezone"] == "Australia/Darwin" }>Australian Central (UTC+9:30)</option>
+									<option value="Australia/Sydney" selected?={ systemConfig["default_timezone"] == "Australia/Sydney" }>Australian Eastern (UTC+10/+11)</option>
+									<option value="Pacific/Auckland" selected?={ systemConfig["default_timezone"] == "Pacific/Auckland" }>New Zealand (UTC+12/+13)</option>
+								</select>
+								<p class="text-sm mt-1 text-content-muted">Default timezone for users who haven't set their own.</p>
 							</div>
 						</div>
+					</form>
+					<div class="mt-8 card p-6">
+						<h3 class="text-xl font-semibold mb-4 text-content">URL Paths</h3>
+						<div class="space-y-2 text-sm text-content-muted">
+							<p><strong class="text-content">OPDS:</strong> { systemConfig["base_url"] }/opds</p>
+							<p><strong class="text-content">API:</strong> { systemConfig["base_url"] }/api</p>
+							<p><strong class="text-content">Device Sync:</strong> { systemConfig["base_url"] }/api/sync</p>
+						</div>
 					</div>
-				</main>
-			</div>
+				</div>
+			</main>
+		</div>
 		</body>
 	</html>
 }
diff --git a/templates/admin_settings_templ.go b/templates/admin_settings_templ.go
index 40b8b8f..8ad5626 100644
--- a/templates/admin_settings_templ.go
+++ b/templates/admin_settings_templ.go
@@ -37,7 +37,7 @@ func AdminSettings(user User, systemConfig map[string]string, errorMessage strin
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex min-h-screen\" style=\"background-color: var(--bg-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex min-h-screen bg-surface\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -45,322 +45,330 @@ func AdminSettings(user User, systemConfig map[string]string, errorMessage strin
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-8\"><div class=\"max-w-4xl\"><div class=\"mb-8\"><div class=\"flex items-center justify-between mb-4\"><a href=\"/admin\" class=\"btn-secondary px-4 py-2 rounded-lg font-medium\">← Back to Dashboard</a></div><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">System Settings</h1><p style=\"color: var(--text-secondary)\">Configure your Bookhoard instance</p></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-6 sm:p-8\"><div class=\"max-w-4xl\"><div class=\"mb-8\"><div class=\"flex items-center justify-between mb-4\"><a href=\"/admin\" class=\"btn btn-secondary font-medium\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("arrow-left", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "Back to Dashboard</a></div><h1 class=\"text-2xl font-bold tracking-tight text-content mb-2\">System Settings</h1><p class=\"text-content-muted\">Configure your Bookhoard instance</p></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if errorMessage != "" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"mb-6 p-4 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--error); color: var(--error);\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"mb-6 p-4 rounded-lg border border-line bg-surface-raised text-danger\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(errorMessage)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 29, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 30, Col: 21}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<form id=\"settings-form\" hx-put=\"/api/system/config\" hx-target=\"#settings-form\" hx-swap=\"outerHTML\"><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-xl font-semibold mb-6\" style=\"color: var(--text-primary)\">Base URL</h3><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-primary)\">Base URL</label> <input type=\"url\" name=\"base_url\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<form id=\"settings-form\" hx-put=\"/api/system/config\" hx-target=\"#settings-form\" hx-swap=\"outerHTML\"><div class=\"card p-6\"><h3 class=\"text-xl font-semibold mb-6 text-content\">Base URL</h3><div><label class=\"block text-sm font-medium mb-2 text-content\">Base URL</label> <input type=\"url\" name=\"base_url\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.ResolveAttributeValue(systemConfig["base_url"])
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 40, Col: 42}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 41, Col: 41}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" placeholder=\"https://books.example.com\" class=\"w-full px-4 py-2 rounded-lg border\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" required><p class=\"text-sm mt-1\" style=\"color: var(--text-secondary)\">The public URL of your Bookhoard instance (e.g., https://books.example.com). Used for device sync, OPDS, and API endpoints.</p></div><div class=\"mt-6 flex justify-end\"><button type=\"submit\" class=\"btn-primary px-6 py-2 rounded-lg font-medium\">Save Settings</button></div></div><div class=\"mt-8 card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-xl font-semibold mb-6\" style=\"color: var(--text-primary)\">System Defaults</h3><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-primary)\">Default Timezone</label> <select name=\"default_timezone\" id=\"default_timezone\" class=\"w-full px-4 py-2 rounded-lg border\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"UTC\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\" placeholder=\"https://books.example.com\" class=\"input\" required><p class=\"text-sm mt-1 text-content-muted\">The public URL of your Bookhoard instance (e.g., https://books.example.com). Used for device sync, OPDS, and API endpoints.</p></div><div class=\"mt-6 flex justify-end\"><button type=\"submit\" class=\"btn btn-primary font-medium\">Save Settings</button></div></div><div class=\"mt-8 card p-6\"><h3 class=\"text-xl font-semibold mb-6 text-content\">System Defaults</h3><div><label class=\"block text-sm font-medium mb-2 text-content\">Default Timezone</label> <select name=\"default_timezone\" id=\"default_timezone\" class=\"input\"><option value=\"UTC\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "UTC" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">UTC (UTC+0)</option> <option value=\"Pacific/Honolulu\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, ">UTC (UTC+0)</option> <option value=\"Pacific/Honolulu\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Pacific/Honolulu" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, ">Hawaii (UTC-10)</option> <option value=\"America/Anchorage\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, ">Hawaii (UTC-10)</option> <option value=\"America/Anchorage\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "America/Anchorage" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, ">Alaska (UTC-9/-8)</option> <option value=\"America/Los_Angeles\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, ">Alaska (UTC-9/-8)</option> <option value=\"America/Los_Angeles\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "America/Los_Angeles" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, ">Pacific (UTC-8/-7)</option> <option value=\"America/Denver\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, ">Pacific (UTC-8/-7)</option> <option value=\"America/Denver\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "America/Denver" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, ">Mountain (UTC-7/-6)</option> <option value=\"America/Phoenix\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, ">Mountain (UTC-7/-6)</option> <option value=\"America/Phoenix\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "America/Phoenix" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, ">Mountain - no DST (UTC-7)</option> <option value=\"America/Chicago\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">Mountain - no DST (UTC-7)</option> <option value=\"America/Chicago\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "America/Chicago" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, ">Central (UTC-6/-5)</option> <option value=\"America/New_York\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, ">Central (UTC-6/-5)</option> <option value=\"America/New_York\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "America/New_York" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, ">Eastern (UTC-5/-4)</option> <option value=\"America/Sao_Paulo\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, ">Eastern (UTC-5/-4)</option> <option value=\"America/Sao_Paulo\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "America/Sao_Paulo" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, ">Brasilia (UTC-3/-2)</option> <option value=\"Europe/London\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, ">Brasilia (UTC-3/-2)</option> <option value=\"Europe/London\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Europe/London" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, ">British (UTC+0/+1)</option> <option value=\"Europe/Paris\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, ">British (UTC+0/+1)</option> <option value=\"Europe/Paris\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Europe/Paris" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, ">Central European (UTC+1/+2)</option> <option value=\"Europe/Helsinki\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, ">Central European (UTC+1/+2)</option> <option value=\"Europe/Helsinki\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Europe/Helsinki" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, ">Eastern European (UTC+2/+3)</option> <option value=\"Europe/Moscow\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, ">Eastern European (UTC+2/+3)</option> <option value=\"Europe/Moscow\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Europe/Moscow" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, ">Moscow (UTC+3)</option> <option value=\"Asia/Tehran\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, ">Moscow (UTC+3)</option> <option value=\"Asia/Tehran\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Tehran" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, ">Iran (UTC+3:30)</option> <option value=\"Asia/Dubai\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, ">Iran (UTC+3:30)</option> <option value=\"Asia/Dubai\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Dubai" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, ">Gulf (UTC+4)</option> <option value=\"Asia/Karachi\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, ">Gulf (UTC+4)</option> <option value=\"Asia/Karachi\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Karachi" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, ">Pakistan (UTC+5)</option> <option value=\"Asia/Kolkata\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, ">Pakistan (UTC+5)</option> <option value=\"Asia/Kolkata\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Kolkata" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, ">India (UTC+5:30)</option> <option value=\"Asia/Dhaka\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, ">India (UTC+5:30)</option> <option value=\"Asia/Dhaka\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Dhaka" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, ">Bangladesh (UTC+6)</option> <option value=\"Asia/Bangkok\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, ">Bangladesh (UTC+6)</option> <option value=\"Asia/Bangkok\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Bangkok" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, ">Indochina (UTC+7)</option> <option value=\"Asia/Shanghai\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, ">Indochina (UTC+7)</option> <option value=\"Asia/Shanghai\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Shanghai" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, ">China (UTC+8)</option> <option value=\"Asia/Tokyo\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, ">China (UTC+8)</option> <option value=\"Asia/Tokyo\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Asia/Tokyo" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, ">Japan/Korea (UTC+9)</option> <option value=\"Australia/Darwin\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, ">Japan/Korea (UTC+9)</option> <option value=\"Australia/Darwin\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Australia/Darwin" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, ">Australian Central (UTC+9:30)</option> <option value=\"Australia/Sydney\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, ">Australian Central (UTC+9:30)</option> <option value=\"Australia/Sydney\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Australia/Sydney" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, ">Australian Eastern (UTC+10/+11)</option> <option value=\"Pacific/Auckland\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, ">Australian Eastern (UTC+10/+11)</option> <option value=\"Pacific/Auckland\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if systemConfig["default_timezone"] == "Pacific/Auckland" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, " selected")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, " selected")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, ">New Zealand (UTC+12/+13)</option></select><p class=\"text-sm mt-1\" style=\"color: var(--text-secondary)\">Default timezone for users who haven't set their own.</p></div></div></form><div class=\"mt-8 card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-xl font-semibold mb-4\" style=\"color: var(--text-primary)\">URL Paths</h3><div class=\"space-y-2 text-sm\" style=\"color: var(--text-secondary);\"><p><strong>OPDS:</strong> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, ">New Zealand (UTC+12/+13)</option></select><p class=\"text-sm mt-1 text-content-muted\">Default timezone for users who haven't set their own.</p></div></div></form><div class=\"mt-8 card p-6\"><h3 class=\"text-xl font-semibold mb-4 text-content\">URL Paths</h3><div class=\"space-y-2 text-sm text-content-muted\"><p><strong class=\"text-content\">OPDS:</strong> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(systemConfig["base_url"])
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 96, Col: 60}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 95, Col: 80}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "/opds</p><p><strong>API:</strong> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "/opds</p><p><strong class=\"text-content\">API:</strong> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(systemConfig["base_url"])
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 97, Col: 59}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 96, Col: 79}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "/api</p><p><strong>Device Sync:</strong> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "/api</p><p><strong class=\"text-content\">Device Sync:</strong> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(systemConfig["base_url"])
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 98, Col: 67}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_settings.templ`, Line: 97, Col: 87}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "/api/sync</p></div></div></div></main></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "/api/sync</p></div></div></div></main></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/admin_sidebar.templ b/templates/admin_sidebar.templ
index fff21e9..bce6a01 100644
--- a/templates/admin_sidebar.templ
+++ b/templates/admin_sidebar.templ
@@ -1,23 +1,30 @@
 package templates
 
 templ AdminSidebar(user User, currentPath string) {
-	<aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
-		<div class="p-6">
-			<h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
-			<nav class="space-y-2">
-				<a href="/admin" class={activeClass(currentPath, "/admin")} style="color: var(--text-primary)">
-					🏠 Dashboard
+	<aside class="w-60 shrink-0 border-r border-line bg-surface-raised">
+		<div class="p-5">
+			<h2 class="mb-5 flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-content-muted">
+				@Icon("shield", "h-4 w-4")
+				Admin
+			</h2>
+			<nav class="space-y-1">
+				<a href="/admin" class={ activeClass(currentPath, "/admin") }>
+					@Icon("home", "h-4 w-4")
+					Dashboard
 				</a>
-				<a href="/admin/users" class={activeClass(currentPath, "/admin/users")} style="color: var(--text-primary)">
-					👤 User Administration
+				<a href="/admin/users" class={ activeClass(currentPath, "/admin/users") }>
+					@Icon("users", "h-4 w-4")
+					Users
 				</a>
-				<a href="/admin/library" class={activeClass(currentPath, "/admin/library")} style="color: var(--text-primary)">
-					📚 Library Management
+				<a href="/admin/library" class={ activeClass(currentPath, "/admin/library") }>
+					@Icon("library", "h-4 w-4")
+					Libraries
 				</a>
-				<a href="/admin/settings" class={activeClass(currentPath, "/admin/settings")} style="color: var(--text-primary)">
-					⚙️ System Settings
+				<a href="/admin/settings" class={ activeClass(currentPath, "/admin/settings") }>
+					@Icon("settings", "h-4 w-4")
+					Settings
 				</a>
 			</nav>
 		</div>
 	</aside>
-}   
\ No newline at end of file
+}
diff --git a/templates/admin_sidebar_templ.go b/templates/admin_sidebar_templ.go
index c3a3713..836a7e1 100644
--- a/templates/admin_sidebar_templ.go
+++ b/templates/admin_sidebar_templ.go
@@ -29,7 +29,15 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"w-64 border-r\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"p-6\"><h2 class=\"text-lg font-semibold mb-6\" style=\"color: var(--text-primary)\">Admin Panel</h2><nav class=\"space-y-2\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"w-60 shrink-0 border-r border-line bg-surface-raised\"><div class=\"p-5\"><h2 class=\"mb-5 flex items-center gap-2 text-sm font-bold uppercase tracking-wide text-content-muted\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("shield", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "Admin</h2><nav class=\"space-y-1\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -38,7 +46,7 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<a href=\"/admin\" class=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<a href=\"/admin\" class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -51,7 +59,15 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" style=\"color: var(--text-primary)\">🏠 Dashboard</a> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("home", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "Dashboard</a> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -60,7 +76,7 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<a href=\"/admin/users\" class=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<a href=\"/admin/users\" class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -73,7 +89,15 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" style=\"color: var(--text-primary)\">👤 User Administration</a> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("users", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "Users</a> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -82,7 +106,7 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<a href=\"/admin/library\" class=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<a href=\"/admin/library\" class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -95,7 +119,15 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" style=\"color: var(--text-primary)\">📚 Library Management</a> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("library", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "Libraries</a> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -104,7 +136,7 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<a href=\"/admin/settings\" class=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<a href=\"/admin/settings\" class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -117,7 +149,15 @@ func AdminSidebar(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\" style=\"color: var(--text-primary)\">⚙️ System Settings</a></nav></div></aside>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("settings", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "Settings</a></nav></div></aside>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/admin_templ.go b/templates/admin_templ.go
index 2316f11..930e355 100644
--- a/templates/admin_templ.go
+++ b/templates/admin_templ.go
@@ -37,7 +37,7 @@ func Admin(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex min-h-screen\" style=\"background-color: var(--bg-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"flex min-h-screen bg-surface\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -45,7 +45,47 @@ func Admin(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-8\"><div class=\"max-w-4xl\"><div class=\"mb-8\"><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">Dashboard</h1><p style=\"color: var(--text-secondary)\">Overview of your Bookhoard library and settings</p></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\"><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"flex items-center space-x-3\"><div class=\"text-3xl\">📖</div><div><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">Library</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Manage your ebook collection</p></div></div><a href=\"/\" class=\"mt-4 inline-block text-sm btn-secondary px-3 py-1 rounded\">View Library</a></div><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"flex items-center space-x-3\"><div class=\"text-3xl\">👁️</div><div><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">Scan Watch Status</h3><p style=\"color: var(--text-secondary)\" class=\"text-sm\">Auto-detecting new files</p></div></div><div id=\"watch-status\" class=\"mt-4 text-sm\" style=\"color: var(--text-secondary)\"><span class=\"inline-block w-2 h-2 rounded-full bg-green-500 mr-2\"></span> Watching <span id=\"watch-count\">0</span> libraries</div></div></div><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h3 class=\"text-xl font-semibold mb-4\" style=\"color: var(--text-primary)\">Quick Actions</h3><div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><button @click=\"scanAllLibraries()\" class=\"btn-primary p-4 rounded-lg text-left\"><div class=\"font-medium\">Rescan Library</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Re-scan existing files and fix metadata</div></button> <a href=\"/admin/library\" class=\"btn-secondary p-4 rounded-lg text-left block\"><div class=\"font-medium\">Manage Libraries and Folders</div><div style=\"color: var(--text-secondary)\" class=\"text-sm\">Add or remove libraries and scan directories</div></a></div></div><!-- Scan Progress Section --><div id=\"scan-progress-container\" class=\"hidden mt-6 p-6 rounded-lg border opacity-0 -translate-y-2.5 transition-all duration-300 ease-out\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-lg font-semibold\" style=\"color: var(--text-primary)\">📚 Scanning Libraries</h3><button @click=\"hideScanProgress()\" class=\"p-2 hover:bg-gray-700 rounded\">✕</button></div><!-- Overall Progress --><div class=\"mb-4\"><div class=\"flex justify-between text-sm mb-2\"><span style=\"color: var(--text-secondary)\">Overall Progress</span> <span id=\"scan-progress-text\" style=\"color: var(--text-primary)\">0%</span></div><div class=\"w-full bg-gray-700 rounded-full h-3\"><div id=\"scan-progress-bar\" class=\"h-3 rounded-full transition-all duration-500\" style=\"width: 0%; background-color: var(--accent);\"></div></div><div id=\"scan-status\" class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Starting scan...</div></div><!-- Per-Library Progress --><div id=\"library-progress-list\" class=\"space-y-3\"><!-- Dynamically populated --></div><!-- Results Summary --><div id=\"scan-results\" class=\"hidden mt-6 p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><h4 class=\"font-semibold mb-2\" style=\"color: var(--text-primary)\">✅ Scan Complete!</h4><div id=\"scan-results-content\" style=\"color: var(--text-secondary)\"><!-- Results populated by JS --></div><div class=\"mt-4 flex gap-2\"><button @click=\"window.location.reload()\" class=\"btn-primary px-4 py-2 rounded-lg\">Refresh to View Books</button> <button @click=\"hideScanProgress()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Dismiss</button></div></div></div></div></main></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-6 sm:p-8\"><div class=\"max-w-4xl\"><div class=\"mb-8\"><h1 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Dashboard</h1><p class=\"text-content-muted\">Overview of your Bookhoard library and settings</p></div><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\"><div class=\"card p-6\"><div class=\"flex items-center space-x-3\"><div class=\"text-content-muted\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("library", "h-7 w-7").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div><div><h3 class=\"font-semibold text-content\">Library</h3><p class=\"text-content-muted text-sm\">Manage your ebook collection</p></div></div><a href=\"/\" class=\"btn btn-secondary mt-4 text-sm\">View Library</a></div><div class=\"card p-6\"><div class=\"flex items-center space-x-3\"><div class=\"text-content-muted\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("sync", "h-7 w-7").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div><div><h3 class=\"font-semibold text-content\">Scan Watch Status</h3><p class=\"text-content-muted text-sm\">Auto-detecting new files</p></div></div><div id=\"watch-status\" class=\"mt-4 text-sm text-content-muted\"><span class=\"inline-block w-2 h-2 rounded-full bg-green-500 mr-2\"></span> Watching <span id=\"watch-count\">0</span> libraries</div></div></div><div class=\"card p-6\"><h3 class=\"text-xl font-semibold mb-4 text-content\">Quick Actions</h3><div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><button @click=\"scanAllLibraries()\" class=\"btn btn-primary p-4 text-left\"><div class=\"font-medium\">Rescan Library</div><div class=\"text-content-muted text-sm\">Re-scan existing files and fix metadata</div></button> <a href=\"/admin/library\" class=\"btn btn-secondary p-4 text-left block\"><div class=\"font-medium\">Manage Libraries and Folders</div><div class=\"text-content-muted text-sm\">Add or remove libraries and scan directories</div></a></div></div><!-- Scan Progress Section --><div id=\"scan-progress-container\" class=\"card mt-6 opacity-0 -translate-y-2.5 transition-all duration-300 ease-out\"><div class=\"flex justify-between items-center mb-4\"><h3 class=\"text-lg font-semibold text-content flex items-center gap-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("library", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "Scanning Libraries</h3><button @click=\"hideScanProgress()\" class=\"p-2 hover:bg-surface-hover rounded\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</button></div><!-- Overall Progress --><div class=\"mb-4\"><div class=\"flex justify-between text-sm mb-2\"><span class=\"text-content-muted\">Overall Progress</span> <span id=\"scan-progress-text\" class=\"text-content\">0%</span></div><div class=\"w-full bg-surface-hover rounded-full h-3\"><div id=\"scan-progress-bar\" class=\"h-3 rounded-full transition-all duration-500 bg-brand\" style=\"width: 0%;\"></div></div><div id=\"scan-status\" class=\"text-sm mt-2 text-content-muted\">Starting scan...</div></div><!-- Per-Library Progress --><div id=\"library-progress-list\" class=\"space-y-3\"><!-- Dynamically populated --></div><!-- Results Summary --><div id=\"scan-results\" class=\"hidden mt-6 p-4 rounded-lg border border-line bg-surface\"><h4 class=\"font-semibold mb-2 text-content flex items-center gap-2\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("check-circle", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "Scan Complete!</h4><div id=\"scan-results-content\" class=\"text-content-muted\"><!-- Results populated by JS --></div><div class=\"mt-4 flex gap-2\"><button @click=\"window.location.reload()\" class=\"btn btn-primary\">Refresh to View Books</button> <button @click=\"hideScanProgress()\" class=\"btn btn-secondary\">Dismiss</button></div></div></div></div></main></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/admin_users.templ b/templates/admin_users.templ
index 0a9e8ad..a67f386 100644
--- a/templates/admin_users.templ
+++ b/templates/admin_users.templ
@@ -13,122 +13,117 @@ templ AdminUsers(currentUser User, users []User, adminCount int) {
 			@Header(currentUser, "/admin/users")
 			<!-- Modal Container (populated by HTMX) -->
 			<div id="modal-container"></div>
-			<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
-				@AdminSidebar(currentUser, "/admin/users")
-				<main class="flex-1 p-8">
-					<div class="w-full">
-						<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">User Management</h1>
-						<p style="color: var(--text-secondary)">Manage user accounts and permissions</p>
-					</div>
-					<!-- Users Table -->
-					<div class="card rounded-lg border overflow-hidden" style="background-color: var(--bg-secondary); border-color: var(--border)">
-						<table class="w-full">
-							<thead style="background-color: var(--bg-primary)">
-								<tr>
-									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Username</th>
-									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Email</th>
-									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Role</th>
-									<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Created</th>
-									<th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Actions</th>
-								</tr>
-							</thead>
-							<tbody class="divide-y" style="divide-color: var(--border)">
-								for _, user := range users {
-									<tr id={ "user-" + user.ID } class="hover:bg-opacity-50" style="transition: background-color 0.2s;">
-										<!-- Username -->
-										<td class="px-6 py-4 whitespace-nowrap">
-											<div class="flex items-center">
-												<div>
-													<div class="text-sm font-medium" style="color: var(--text-primary)">{ user.Username }</div>
-													if user.ID == currentUser.ID {
-														<span class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: white;">You</span>
-													}
-												</div>
+		<div class="flex min-h-screen bg-surface">
+			@AdminSidebar(currentUser, "/admin/users")
+			<main class="flex-1 p-6 sm:p-8">
+				<div class="w-full">
+					<h1 class="text-2xl font-bold tracking-tight text-content mb-2">User Management</h1>
+					<p class="text-content-muted">Manage user accounts and permissions</p>
+				</div>
+				<!-- Users Table -->
+				<div class="card overflow-hidden">
+					<table class="w-full">
+						<thead class="bg-surface">
+							<tr>
+								<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted">Username</th>
+								<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted">Email</th>
+								<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted">Role</th>
+								<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted">Created</th>
+								<th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-content-muted">Actions</th>
+							</tr>
+						</thead>
+						<tbody class="divide-y divide-line">
+							for _, user := range users {
+								<tr id={ "user-" + user.ID } class="hover:bg-surface-hover" style="transition: background-color 0.2s;">
+									<!-- Username -->
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="flex items-center">
+											<div>
+												<div class="text-sm font-medium text-content">{ user.Username }</div>
+												if user.ID == currentUser.ID {
+													<span class="badge bg-brand text-white">You</span>
+												}
 											</div>
-										</td>
-										<!-- Email -->
-										<td class="px-6 py-4 whitespace-nowrap">
-											<div class="text-sm" style="color: var(--text-primary)">{ user.Email }</div>
-										</td>
-										<!-- Role Toggle (with last-admin protection) -->
-										<td class="px-6 py-4 whitespace-nowrap">
-											if user.Role == "admin" && adminCount == 1 {
-												<!-- Last admin - disabled -->
-												<div class="relative">
-													<select
-														disabled
-														class="text-sm rounded px-2 py-1 cursor-not-allowed opacity-50"
-														style="background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);"
-														title="Cannot demote the last admin"
-													>
-														<option value="user">User</option>
-														<option value="admin" selected>Admin</option>
-													</select>
-												</div>
-											} else {
+										</div>
+									</td>
+									<!-- Email -->
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="text-sm text-content">{ user.Email }</div>
+									</td>
+									<!-- Role Toggle (with last-admin protection) -->
+									<td class="px-6 py-4 whitespace-nowrap">
+										if user.Role == "admin" && adminCount == 1 {
+											<!-- Last admin - disabled -->
+											<div class="relative">
 												<select
-													hx-put={ "/api/auth/profile/" + user.ID }
-													hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
-													hx-target={ "#role-result-" + user.ID }
-													hx-swap="innerHTML"
-													name="role"
-													class="text-sm rounded px-2 py-1"
-													style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
-													onchange="this.dispatchEvent(new Event('htmx:trigger'))"
-													hx-trigger="change"
-													hx-vals='{"role": this.value}'
-												>
-													<option value="user" selected?={ user.Role == "user" }>User</option>
-													<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
-												</select>
-												<div id={ "role-result-" + user.ID } class="text-xs mt-1"></div>
-											}
-										</td>
-										<!-- Created -->
-										<td class="px-6 py-4 whitespace-nowrap">
-											<div class="text-sm" style="color: var(--text-secondary)">{ FormatInTimezone(user.CreatedAt, currentUser.Timezone) }</div>
-										</td>
-										<!-- Actions -->
-										<td class="px-6 py-4 whitespace-nowrap text-right">
-											<button
-												hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
-												hx-target="#modal-container"
-												hx-swap="innerHTML"
-												class="text-sm px-3 py-1 rounded mr-2"
-												style="background-color: var(--accent); color: white;"
-											>
-												Edit
-											</button>
-											if user.Role == "admin" && adminCount == 1 {
-												<button
 													disabled
-													class="text-sm px-3 py-1 rounded cursor-not-allowed opacity-50"
-													style="background-color: #dc2626; color: white;"
-													title="Cannot delete the last admin"
+													class="input text-sm cursor-not-allowed opacity-50"
+													title="Cannot demote the last admin"
 												>
-													Delete
-												</button>
-											} else {
-												<button
-													hx-delete={ "/api/auth/profile/" + user.ID }
-													hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
-													hx-target={ "#user-" + user.ID }
-													hx-swap="outerHTML swap:0.5s"
-													hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
-													class="text-sm px-3 py-1 rounded"
-													style="background-color: #dc2626; color: white;"
-												>
-													Delete
-												</button>
-											}
-										</td>
-									</tr>
-								}
-							</tbody>
-						</table>
-					</div>
-				</main>
-			</div>
+													<option value="user">User</option>
+													<option value="admin" selected>Admin</option>
+												</select>
+											</div>
+										} else {
+											<select
+												hx-put={ "/api/auth/profile/" + user.ID }
+												hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
+												hx-target={ "#role-result-" + user.ID }
+												hx-swap="innerHTML"
+												name="role"
+												class="input text-sm"
+												onchange="this.dispatchEvent(new Event('htmx:trigger'))"
+												hx-trigger="change"
+												hx-vals='{"role": this.value}'
+											>
+												<option value="user" selected?={ user.Role == "user" }>User</option>
+												<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
+											</select>
+											<div id={ "role-result-" + user.ID } class="text-xs mt-1"></div>
+										}
+									</td>
+									<!-- Created -->
+									<td class="px-6 py-4 whitespace-nowrap">
+										<div class="text-sm text-content-muted">{ FormatInTimezone(user.CreatedAt, currentUser.Timezone) }</div>
+									</td>
+									<!-- Actions -->
+									<td class="px-6 py-4 whitespace-nowrap text-right">
+										<button
+											hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
+											hx-target="#modal-container"
+											hx-swap="innerHTML"
+											class="btn btn-primary text-sm mr-2"
+										>
+											Edit
+										</button>
+										if user.Role == "admin" && adminCount == 1 {
+											<button
+												disabled
+												class="btn btn-danger text-sm cursor-not-allowed opacity-50"
+												title="Cannot delete the last admin"
+											>
+												Delete
+											</button>
+										} else {
+											<button
+												hx-delete={ "/api/auth/profile/" + user.ID }
+												hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
+												hx-target={ "#user-" + user.ID }
+												hx-swap="outerHTML swap:0.5s"
+												hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
+												class="btn btn-danger text-sm"
+											>
+												Delete
+											</button>
+										}
+									</td>
+								</tr>
+							}
+						</tbody>
+					</table>
+				</div>
+			</main>
+		</div>
 		</body>
 	</html>
 }
diff --git a/templates/admin_users_templ.go b/templates/admin_users_templ.go
index ab0d0cc..3096208 100644
--- a/templates/admin_users_templ.go
+++ b/templates/admin_users_templ.go
@@ -37,7 +37,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<!-- Modal Container (populated by HTMX) --><div id=\"modal-container\"></div><div class=\"flex min-h-screen\" style=\"background-color: var(--bg-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<!-- Modal Container (populated by HTMX) --><div id=\"modal-container\"></div><div class=\"flex min-h-screen bg-surface\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -45,7 +45,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-8\"><div class=\"w-full\"><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">User Management</h1><p style=\"color: var(--text-secondary)\">Manage user accounts and permissions</p></div><!-- Users Table --><div class=\"card rounded-lg border overflow-hidden\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><table class=\"w-full\"><thead style=\"background-color: var(--bg-primary)\"><tr><th class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider\" style=\"color: var(--text-secondary)\">Username</th><th class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider\" style=\"color: var(--text-secondary)\">Email</th><th class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider\" style=\"color: var(--text-secondary)\">Role</th><th class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider\" style=\"color: var(--text-secondary)\">Created</th><th class=\"px-6 py-3 text-right text-xs font-medium uppercase tracking-wider\" style=\"color: var(--text-secondary)\">Actions</th></tr></thead> <tbody class=\"divide-y\" style=\"divide-color: var(--border)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<main class=\"flex-1 p-6 sm:p-8\"><div class=\"w-full\"><h1 class=\"text-2xl font-bold tracking-tight text-content mb-2\">User Management</h1><p class=\"text-content-muted\">Manage user accounts and permissions</p></div><!-- Users Table --><div class=\"card overflow-hidden\"><table class=\"w-full\"><thead class=\"bg-surface\"><tr><th class=\"px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted\">Username</th><th class=\"px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted\">Email</th><th class=\"px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted\">Role</th><th class=\"px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-content-muted\">Created</th><th class=\"px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-content-muted\">Actions</th></tr></thead> <tbody class=\"divide-y divide-line\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -57,20 +57,20 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.ResolveAttributeValue("user-" + user.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 37, Col: 35}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 37, Col: 34}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" class=\"hover:bg-opacity-50\" style=\"transition: background-color 0.2s;\"><!-- Username --><td class=\"px-6 py-4 whitespace-nowrap\"><div class=\"flex items-center\"><div><div class=\"text-sm font-medium\" style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" class=\"hover:bg-surface-hover\" style=\"transition: background-color 0.2s;\"><!-- Username --><td class=\"px-6 py-4 whitespace-nowrap\"><div class=\"flex items-center\"><div><div class=\"text-sm font-medium text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 42, Col: 96}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 42, Col: 73}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -81,19 +81,19 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				return templ_7745c5c3_Err
 			}
 			if user.ID == currentUser.ID {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<span class=\"text-xs px-2 py-1 rounded\" style=\"background-color: var(--accent); color: white;\">You</span>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<span class=\"badge bg-brand text-white\">You</span>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div></td><!-- Email --><td class=\"px-6 py-4 whitespace-nowrap\"><div class=\"text-sm\" style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div></td><!-- Email --><td class=\"px-6 py-4 whitespace-nowrap\"><div class=\"text-sm text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(user.Email)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 51, Col: 79}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 51, Col: 56}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -104,7 +104,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				return templ_7745c5c3_Err
 			}
 			if user.Role == "admin" && adminCount == 1 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<!-- Last admin - disabled --> <div class=\"relative\"><select disabled class=\"text-sm rounded px-2 py-1 cursor-not-allowed opacity-50\" style=\"background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);\" title=\"Cannot demote the last admin\"><option value=\"user\">User</option> <option value=\"admin\" selected>Admin</option></select></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<!-- Last admin - disabled --> <div class=\"relative\"><select disabled class=\"input text-sm cursor-not-allowed opacity-50\" title=\"Cannot demote the last admin\"><option value=\"user\">User</option> <option value=\"admin\" selected>Admin</option></select></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -116,7 +116,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var5 string
 				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.ResolveAttributeValue("/api/auth/profile/" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 70, Col: 52}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 69, Col: 51}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5)
 				if templ_7745c5c3_Err != nil {
@@ -129,13 +129,13 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var6 string
 				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.ResolveAttributeValue("#role-result-" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 72, Col: 50}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 71, Col: 49}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" hx-swap=\"innerHTML\" name=\"role\" class=\"text-sm rounded px-2 py-1\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);\" onchange=\"this.dispatchEvent(new Event('htmx:trigger'))\" hx-trigger=\"change\" hx-vals='{\"role\": this.value}'><option value=\"user\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" hx-swap=\"innerHTML\" name=\"role\" class=\"input text-sm\" onchange=\"this.dispatchEvent(new Event('htmx:trigger'))\" hx-trigger=\"change\" hx-vals='{\"role\": this.value}'><option value=\"user\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -162,7 +162,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var7 string
 				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.ResolveAttributeValue("role-result-" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 84, Col: 46}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 82, Col: 45}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7)
 				if templ_7745c5c3_Err != nil {
@@ -173,14 +173,14 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</td><!-- Created --><td class=\"px-6 py-4 whitespace-nowrap\"><div class=\"text-sm\" style=\"color: var(--text-secondary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</td><!-- Created --><td class=\"px-6 py-4 whitespace-nowrap\"><div class=\"text-sm text-content-muted\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(FormatInTimezone(user.CreatedAt, currentUser.Timezone))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 89, Col: 125}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 87, Col: 106}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -193,18 +193,18 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.ResolveAttributeValue("/admin/users/" + user.ID + "/profile-modal")
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 94, Col: 65}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 92, Col: 64}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var9)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" hx-target=\"#modal-container\" hx-swap=\"innerHTML\" class=\"text-sm px-3 py-1 rounded mr-2\" style=\"background-color: var(--accent); color: white;\">Edit</button> ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" hx-target=\"#modal-container\" hx-swap=\"innerHTML\" class=\"btn btn-primary text-sm mr-2\">Edit</button> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if user.Role == "admin" && adminCount == 1 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<button disabled class=\"text-sm px-3 py-1 rounded cursor-not-allowed opacity-50\" style=\"background-color: #dc2626; color: white;\" title=\"Cannot delete the last admin\">Delete</button>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<button disabled class=\"btn btn-danger text-sm cursor-not-allowed opacity-50\" title=\"Cannot delete the last admin\">Delete</button>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -216,7 +216,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.ResolveAttributeValue("/api/auth/profile/" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 113, Col: 55}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 109, Col: 54}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10)
 				if templ_7745c5c3_Err != nil {
@@ -229,13 +229,13 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.ResolveAttributeValue("#user-" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 115, Col: 43}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_users.templ`, Line: 111, Col: 42}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "\" hx-swap=\"outerHTML swap:0.5s\" hx-confirm=\"Are you sure you want to delete this user? This action cannot be undone.\" class=\"text-sm px-3 py-1 rounded\" style=\"background-color: #dc2626; color: white;\">Delete</button>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "\" hx-swap=\"outerHTML swap:0.5s\" hx-confirm=\"Are you sure you want to delete this user? This action cannot be undone.\" class=\"btn btn-danger text-sm\">Delete</button>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
diff --git a/templates/analytics.templ b/templates/analytics.templ
index 8cf3411..b512deb 100644
--- a/templates/analytics.templ
+++ b/templates/analytics.templ
@@ -14,78 +14,79 @@ templ Analytics(user User) {
 			@Header(user, "/analytics")
 			<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
 				<div class="mb-8">
-					<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">📊 Reading Analytics</h1>
-					<p style="color: var(--text-secondary)">Track your reading habits and device usage</p>
+					<h1 class="mb-2 flex items-center gap-2 text-2xl font-bold tracking-tight text-content">
+						@Icon("chart", "h-6 w-6")
+						Reading Analytics
+					</h1>
+					<p class="text-content-muted">Track your reading habits and device usage</p>
 				</div>
 				<!-- Date Range Picker -->
-				<div class="card p-4 rounded-lg border mb-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
+				<div class="card p-4 mb-6">
 					<div class="flex flex-wrap gap-4 items-center">
 						<div class="flex-1 min-w-[200px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary);">Start Date</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Start Date</label>
 							<input
 								type="date"
 								id="start-date"
 								onchange="loadAnalytics()"
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							/>
 						</div>
 						<div class="flex-1 min-w-[200px]">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary);">End Date</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">End Date</label>
 							<input
 								type="date"
 								id="end-date"
 								onchange="loadAnalytics()"
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							/>
 						</div>
 						<div class="flex items-end">
-							<button @click="loadAnalytics()" class="btn-primary px-6 py-2 rounded-lg">Update</button>
+							<button @click="loadAnalytics()" class="btn btn-primary">Update</button>
 						</div>
 					</div>
 				</div>
 				<!-- Stats Cards -->
 				<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8" id="stats-container">
-					<div class="card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg" style="background-color: var(--bg-secondary); border-color: var(--border);">
-						<h3 class="text-lg font-semibold mb-2" style="color: var(--text-secondary);">Books Read</h3>
-						<p id="total-books" class="text-3xl font-bold" style="color: var(--text-primary);">-</p>
+					<div class="card p-5">
+						<h3 class="text-xs font-semibold uppercase tracking-wide text-content-muted">Books Read</h3>
+						<p id="total-books" class="mt-1 text-2xl font-bold text-content">-</p>
 					</div>
-					<div class="card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg" style="background-color: var(--bg-secondary); border-color: var(--border);">
-						<h3 class="text-lg font-semibold mb-2" style="color: var(--text-secondary);">Pages Read</h3>
-						<p id="total-pages" class="text-3xl font-bold" style="color: var(--text-primary);">-</p>
+					<div class="card p-5">
+						<h3 class="text-xs font-semibold uppercase tracking-wide text-content-muted">Pages Read</h3>
+						<p id="total-pages" class="mt-1 text-2xl font-bold text-content">-</p>
 					</div>
-					<div class="card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg" style="background-color: var(--bg-secondary); border-color: var(--border);">
-						<h3 class="text-lg font-semibold mb-2" style="color: var(--text-secondary);">Reading Time</h3>
-						<p id="reading-time" class="text-3xl font-bold" style="color: var(--text-primary);">-</p>
+					<div class="card p-5">
+						<h3 class="text-xs font-semibold uppercase tracking-wide text-content-muted">Reading Time</h3>
+						<p id="reading-time" class="mt-1 text-2xl font-bold text-content">-</p>
 					</div>
-					<div class="card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg" style="background-color: var(--bg-secondary); border-color: var(--border);">
-						<h3 class="text-lg font-semibold mb-2" style="color: var(--text-secondary);">Completion Rate</h3>
-						<p id="completion-rate" class="text-3xl font-bold" style="color: var(--text-primary);">-</p>
+					<div class="card p-5">
+						<h3 class="text-xs font-semibold uppercase tracking-wide text-content-muted">Completion Rate</h3>
+						<p id="completion-rate" class="mt-1 text-2xl font-bold text-content">-</p>
 					</div>
 				</div>
 				<!-- Charts Row -->
 				<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
 					<!-- Daily Reading Chart -->
-					<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
-						<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary);">Daily Reading Minutes</h3>
+					<div class="card p-6">
+						<h3 class="text-lg font-semibold mb-4 text-content">Daily Reading Minutes</h3>
 						<div class="h-80">
 							<canvas id="daily-reading-chart"></canvas>
 						</div>
 					</div>
 					<!-- Device Usage Chart -->
-					<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
-						<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary);">Device Usage</h3>
+					<div class="card p-6">
+						<h3 class="text-lg font-semibold mb-4 text-content">Device Usage</h3>
 						<div class="h-80">
 							<canvas id="device-usage-chart"></canvas>
 						</div>
 					</div>
 				</div>
 				<!-- Popular Books -->
-				<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
-					<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary);">Most Read Books</h3>
+				<div class="card p-6">
+					<h3 class="text-lg font-semibold mb-4 text-content">Most Read Books</h3>
 					<div id="popular-books" class="space-y-3">
-						<div class="text-center py-8" style="color: var(--text-secondary);">
+						<div class="text-center py-8 text-content-muted">
 							<div class="loading-spinner mx-auto mb-4"></div>
 							<p>Loading analytics...</p>
 						</div>
diff --git a/templates/analytics_templ.go b/templates/analytics_templ.go
index 3b9e12c..ac49cc8 100644
--- a/templates/analytics_templ.go
+++ b/templates/analytics_templ.go
@@ -37,7 +37,15 @@ func Analytics(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">📊 Reading Analytics</h1><p style=\"color: var(--text-secondary)\">Track your reading habits and device usage</p></div><!-- Date Range Picker --><div class=\"card p-4 rounded-lg border mb-6\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex flex-wrap gap-4 items-center\"><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary);\">Start Date</label> <input type=\"date\" id=\"start-date\" onchange=\"loadAnalytics()\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div class=\"flex-1 min-w-[200px]\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary);\">End Date</label> <input type=\"date\" id=\"end-date\" onchange=\"loadAnalytics()\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div class=\"flex items-end\"><button @click=\"loadAnalytics()\" class=\"btn-primary px-6 py-2 rounded-lg\">Update</button></div></div></div><!-- Stats Cards --><div class=\"grid grid-cols-1 md:grid-cols-4 gap-6 mb-8\" id=\"stats-container\"><div class=\"card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-secondary);\">Books Read</h3><p id=\"total-books\" class=\"text-3xl font-bold\" style=\"color: var(--text-primary);\">-</p></div><div class=\"card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-secondary);\">Pages Read</h3><p id=\"total-pages\" class=\"text-3xl font-bold\" style=\"color: var(--text-primary);\">-</p></div><div class=\"card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-secondary);\">Reading Time</h3><p id=\"reading-time\" class=\"text-3xl font-bold\" style=\"color: var(--text-primary);\">-</p></div><div class=\"card p-6 rounded-lg border transition-all duration-200 ease hover:-translate-y-0.5 hover:shadow-lg\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-secondary);\">Completion Rate</h3><p id=\"completion-rate\" class=\"text-3xl font-bold\" style=\"color: var(--text-primary);\">-</p></div></div><!-- Charts Row --><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8\"><!-- Daily Reading Chart --><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-4\" style=\"color: var(--text-primary);\">Daily Reading Minutes</h3><div class=\"h-80\"><canvas id=\"daily-reading-chart\"></canvas></div></div><!-- Device Usage Chart --><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-4\" style=\"color: var(--text-primary);\">Device Usage</h3><div class=\"h-80\"><canvas id=\"device-usage-chart\"></canvas></div></div></div><!-- Popular Books --><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-4\" style=\"color: var(--text-primary);\">Most Read Books</h3><div id=\"popular-books\" class=\"space-y-3\"><div class=\"text-center py-8\" style=\"color: var(--text-secondary);\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading analytics...</p></div></div></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><h1 class=\"mb-2 flex items-center gap-2 text-2xl font-bold tracking-tight text-content\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("chart", "h-6 w-6").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "Reading Analytics</h1><p class=\"text-content-muted\">Track your reading habits and device usage</p></div><!-- Date Range Picker --><div class=\"card p-4 mb-6\"><div class=\"flex flex-wrap gap-4 items-center\"><div class=\"flex-1 min-w-[200px]\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Start Date</label> <input type=\"date\" id=\"start-date\" onchange=\"loadAnalytics()\" class=\"input\"></div><div class=\"flex-1 min-w-[200px]\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">End Date</label> <input type=\"date\" id=\"end-date\" onchange=\"loadAnalytics()\" class=\"input\"></div><div class=\"flex items-end\"><button @click=\"loadAnalytics()\" class=\"btn btn-primary\">Update</button></div></div></div><!-- Stats Cards --><div class=\"grid grid-cols-1 md:grid-cols-4 gap-6 mb-8\" id=\"stats-container\"><div class=\"card p-5\"><h3 class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Books Read</h3><p id=\"total-books\" class=\"mt-1 text-2xl font-bold text-content\">-</p></div><div class=\"card p-5\"><h3 class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Pages Read</h3><p id=\"total-pages\" class=\"mt-1 text-2xl font-bold text-content\">-</p></div><div class=\"card p-5\"><h3 class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Reading Time</h3><p id=\"reading-time\" class=\"mt-1 text-2xl font-bold text-content\">-</p></div><div class=\"card p-5\"><h3 class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Completion Rate</h3><p id=\"completion-rate\" class=\"mt-1 text-2xl font-bold text-content\">-</p></div></div><!-- Charts Row --><div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8\"><!-- Daily Reading Chart --><div class=\"card p-6\"><h3 class=\"text-lg font-semibold mb-4 text-content\">Daily Reading Minutes</h3><div class=\"h-80\"><canvas id=\"daily-reading-chart\"></canvas></div></div><!-- Device Usage Chart --><div class=\"card p-6\"><h3 class=\"text-lg font-semibold mb-4 text-content\">Device Usage</h3><div class=\"h-80\"><canvas id=\"device-usage-chart\"></canvas></div></div></div><!-- Popular Books --><div class=\"card p-6\"><h3 class=\"text-lg font-semibold mb-4 text-content\">Most Read Books</h3><div id=\"popular-books\" class=\"space-y-3\"><div class=\"text-center py-8 text-content-muted\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading analytics...</p></div></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/api_explorer.templ b/templates/api_explorer.templ
index af59618..e8443af 100644
--- a/templates/api_explorer.templ
+++ b/templates/api_explorer.templ
@@ -3,63 +3,63 @@ package templates
 templ APIExplorer(explorer APIExplorerData) {
 	if !explorer.IsLoggedIn {
 		// Show mode toggle and mock data
-		<div x-data="devices" class="border border-border rounded-lg p-6 mt-8 bg-background-secondary">
+		<div x-data="devices" class="card p-6 mt-8">
 			<div class="flex gap-2 mb-4">
-				<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer bg-accent text-white">Mock Data</button>
-				<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary opacity-50 cursor-not-allowed" disabled>Login to Try Real</button>
+				<button class="btn btn-primary">Mock Data</button>
+				<button class="btn btn-secondary opacity-50 cursor-not-allowed" disabled>Login to Try Real</button>
 			</div>
 			<div class="mb-4">
 				<div class="mb-4">
-					<select disabled class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
+					<select disabled class="input w-full">
 						<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
 						<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
 						<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
 						<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
 					</select>
 				</div>
-				<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body (Example)</h4>
-				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.RequestBody }</code></pre>
+				<h4 class="text-content-muted mb-2 text-sm font-medium">Request Body (Example)</h4>
+				<pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code class="text-content text-sm">{ explorer.Endpoint.RequestBody }</code></pre>
 			</div>
 			<div class="mt-4">
-				<h4 class="text-text-secondary mb-2 text-sm font-medium">Response (Mock)</h4>
-				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.Response }</code></pre>
+				<h4 class="text-content-muted mb-2 text-sm font-medium">Response (Mock)</h4>
+				<pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code class="text-content text-sm">{ explorer.Endpoint.Response }</code></pre>
 			</div>
 			<div class="flex gap-2 mt-4">
-				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
-				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
+				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="btn btn-secondary text-sm">Copy Request</button>
+				<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="btn btn-secondary text-sm">Copy Response</button>
 			</div>
 		</div>
 	} else {
 		// Show interactive explorer with real execution
-		<div class="border border-border rounded-lg p-6 mt-8 bg-background-secondary" x-data="apiExplorerDoc" x-init="initAPIExplorerDoc('{ explorer.Endpoint.Path }', '{ explorer.Endpoint.RequestBody }', '{ explorer.Endpoint.Response }')">
+		<div class="card p-6 mt-8" x-data="apiExplorerDoc" x-init="initAPIExplorerDoc('{ explorer.Endpoint.Path }', '{ explorer.Endpoint.RequestBody }', '{ explorer.Endpoint.Response }')">
 			<div class="flex gap-2 mb-4">
-				<button class="mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm" id="mock-btn" @click="showDocMode('mock')">Mock Data</button>
-				<button class="mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm" id="real-btn" @click="showDocMode('real')">Try It Out</button>
+				<button class="mode-btn btn btn-secondary text-sm" id="mock-btn" @click="showDocMode('mock')">Mock Data</button>
+				<button class="mode-btn btn btn-primary text-sm" id="real-btn" @click="showDocMode('real')">Try It Out</button>
 			</div>
 			<div class="mb-4">
 				<div class="mb-4">
-					<select id="http-method" class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
+					<select id="http-method" class="input w-full">
 						<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
 						<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
 						<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
 						<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
 					</select>
 				</div>
-				<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body</h4>
-				<textarea id="request-body" placeholder="Edit request body..." class="w-full min-h-[150px] px-3 py-2 font-mono text-sm bg-background-primary text-text-primary border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent">{ explorer.Endpoint.RequestBody }</textarea>
+				<h4 class="text-content-muted mb-2 text-sm font-medium">Request Body</h4>
+				<textarea id="request-body" placeholder="Edit request body..." class="input w-full min-h-[150px] font-mono text-sm">{ explorer.Endpoint.RequestBody }</textarea>
 			</div>
-			<button id="try-it-out" @click="tryDocEndpoint()" class="bg-accent text-white px-6 py-3 rounded cursor-pointer mt-4 hover:opacity-90">Try It Out</button>
+			<button id="try-it-out" @click="tryDocEndpoint()" class="btn btn-primary mt-4">Try It Out</button>
 			<div class="api-response mt-4 hidden">
 				<div class="flex justify-between mb-2 text-sm">
 					<span id="response-status" class="font-semibold"></span>
-					<span id="response-time" class="text-text-secondary"></span>
+					<span id="response-time" class="text-content-muted"></span>
 				</div>
-				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code id="response-body" class="text-text-primary text-sm"></code></pre>
+				<pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code id="response-body" class="text-content text-sm"></code></pre>
 			</div>
 			<div class="flex gap-2 mt-4 flex-wrap">
-				<button @click="copyDocRequest()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
-				<button @click="copyDocResponse()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
-				<button @click="generateDocCURL()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Generate cURL</button>
+				<button @click="copyDocRequest()" class="btn btn-secondary text-sm">Copy Request</button>
+				<button @click="copyDocResponse()" class="btn btn-secondary text-sm">Copy Response</button>
+				<button @click="generateDocCURL()" class="btn btn-secondary text-sm">Generate cURL</button>
 			</div>
 		</div>
 	}
diff --git a/templates/api_explorer_templ.go b/templates/api_explorer_templ.go
index d51eeb9..cf89e82 100644
--- a/templates/api_explorer_templ.go
+++ b/templates/api_explorer_templ.go
@@ -30,7 +30,7 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !explorer.IsLoggedIn {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <div x-data=\"devices\" class=\"border border-border rounded-lg p-6 mt-8 bg-background-secondary\"><div class=\"flex gap-2 mb-4\"><button class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer bg-accent text-white\">Mock Data</button> <button class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary opacity-50 cursor-not-allowed\" disabled>Login to Try Real</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select disabled class=\"w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent\"><option value=\"GET\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <div x-data=\"devices\" class=\"card p-6 mt-8\"><div class=\"flex gap-2 mb-4\"><button class=\"btn btn-primary\">Mock Data</button> <button class=\"btn btn-secondary opacity-50 cursor-not-allowed\" disabled>Login to Try Real</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select disabled class=\"input w-full\"><option value=\"GET\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -70,38 +70,38 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">DELETE</option></select></div><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Request Body (Example)</h4><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code class=\"text-text-primary text-sm\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">DELETE</option></select></div><h4 class=\"text-content-muted mb-2 text-sm font-medium\">Request Body (Example)</h4><pre class=\"bg-surface p-4 rounded-lg overflow-x-auto\"><code class=\"text-content text-sm\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.RequestBody)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 21, Col: 141}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 21, Col: 125}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</code></pre></div><div class=\"mt-4\"><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Response (Mock)</h4><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code class=\"text-text-primary text-sm\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</code></pre></div><div class=\"mt-4\"><h4 class=\"text-content-muted mb-2 text-sm font-medium\">Response (Mock)</h4><pre class=\"bg-surface p-4 rounded-lg overflow-x-auto\"><code class=\"text-content text-sm\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.Response)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 25, Col: 138}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 25, Col: 122}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</code></pre></div><div class=\"flex gap-2 mt-4\"><button @click=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Request</button> <button @click=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Response</button></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</code></pre></div><div class=\"flex gap-2 mt-4\"><button @click=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))\" class=\"btn btn-secondary text-sm\">Copy Request</button> <button @click=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))\" class=\"btn btn-secondary text-sm\">Copy Response</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " <div class=\"border border-border rounded-lg p-6 mt-8 bg-background-secondary\" x-data=\"apiExplorerDoc\" x-init=\"initAPIExplorerDoc('{ explorer.Endpoint.Path }', '{ explorer.Endpoint.RequestBody }', '{ explorer.Endpoint.Response }')\"><div class=\"flex gap-2 mb-4\"><button class=\"mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm\" id=\"mock-btn\" @click=\"showDocMode('mock')\">Mock Data</button> <button class=\"mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm\" id=\"real-btn\" @click=\"showDocMode('real')\">Try It Out</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select id=\"http-method\" class=\"w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent\"><option value=\"GET\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " <div class=\"card p-6 mt-8\" x-data=\"apiExplorerDoc\" x-init=\"initAPIExplorerDoc('{ explorer.Endpoint.Path }', '{ explorer.Endpoint.RequestBody }', '{ explorer.Endpoint.Response }')\"><div class=\"flex gap-2 mb-4\"><button class=\"mode-btn btn btn-secondary text-sm\" id=\"mock-btn\" @click=\"showDocMode('mock')\">Mock Data</button> <button class=\"mode-btn btn btn-primary text-sm\" id=\"real-btn\" @click=\"showDocMode('real')\">Try It Out</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select id=\"http-method\" class=\"input w-full\"><option value=\"GET\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -141,20 +141,20 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">DELETE</option></select></div><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Request Body</h4><textarea id=\"request-body\" placeholder=\"Edit request body...\" class=\"w-full min-h-[150px] px-3 py-2 font-mono text-sm bg-background-primary text-text-primary border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">DELETE</option></select></div><h4 class=\"text-content-muted mb-2 text-sm font-medium\">Request Body</h4><textarea id=\"request-body\" placeholder=\"Edit request body...\" class=\"input w-full min-h-[150px] font-mono text-sm\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.RequestBody)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 49, Col: 274}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 49, Col: 151}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</textarea></div><button id=\"try-it-out\" @click=\"tryDocEndpoint()\" class=\"bg-accent text-white px-6 py-3 rounded cursor-pointer mt-4 hover:opacity-90\">Try It Out</button><div class=\"api-response mt-4 hidden\"><div class=\"flex justify-between mb-2 text-sm\"><span id=\"response-status\" class=\"font-semibold\"></span> <span id=\"response-time\" class=\"text-text-secondary\"></span></div><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code id=\"response-body\" class=\"text-text-primary text-sm\"></code></pre></div><div class=\"flex gap-2 mt-4 flex-wrap\"><button @click=\"copyDocRequest()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Request</button> <button @click=\"copyDocResponse()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Response</button> <button @click=\"generateDocCURL()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Generate cURL</button></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</textarea></div><button id=\"try-it-out\" @click=\"tryDocEndpoint()\" class=\"btn btn-primary mt-4\">Try It Out</button><div class=\"api-response mt-4 hidden\"><div class=\"flex justify-between mb-2 text-sm\"><span id=\"response-status\" class=\"font-semibold\"></span> <span id=\"response-time\" class=\"text-content-muted\"></span></div><pre class=\"bg-surface p-4 rounded-lg overflow-x-auto\"><code id=\"response-body\" class=\"text-content text-sm\"></code></pre></div><div class=\"flex gap-2 mt-4 flex-wrap\"><button @click=\"copyDocRequest()\" class=\"btn btn-secondary text-sm\">Copy Request</button> <button @click=\"copyDocResponse()\" class=\"btn btn-secondary text-sm\">Copy Response</button> <button @click=\"generateDocCURL()\" class=\"btn btn-secondary text-sm\">Generate cURL</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/templates/book_detail_modals.templ b/templates/book_detail_modals.templ
index 8fd49ee..175420f 100644
--- a/templates/book_detail_modals.templ
+++ b/templates/book_detail_modals.templ
@@ -9,65 +9,61 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
 	<div
 		id="progress-sync-modal"
 		class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
-		style="background-color: rgba(0, 0, 0, 0.7);"
+		style="background-color: var(--surface-overlay);"
 	>
 		<div
-			class="card rounded-lg p-6 w-full max-w-4xl mx-4 my-8"
-			style="background-color: var(--bg-secondary); border-color: var(--border);"
+			class="card p-6 w-full max-w-4xl mx-4 my-8"
 		>
 			<div class="flex justify-between items-center mb-6">
 				<div>
-					<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Sync Progress</h2>
-					<p class="text-sm" style="color: var(--text-secondary);">{ book.Title }</p>
+					<h2 class="text-2xl font-bold tracking-tight text-content">Sync Progress</h2>
+					<p class="text-sm text-content-muted">{ book.Title }</p>
 				</div>
 				<button
 					@click="hideProgressSyncModal()"
-					class="p-2 hover:opacity-80 rounded-lg"
-					style="color: var(--text-primary); background-color: var(--bg-primary);"
+					class="icon-btn"
 				>
-					✕
+					@Icon("close", "h-5 w-5")
 				</button>
 			</div>
 			if book.ActiveConflict != nil {
 				<div
-					class="mb-6 p-4 rounded-lg border"
-					style="background-color: #f59e0b20; border-color: #f59e0b;"
+					class="mb-6 p-4 rounded-lg border border-warning bg-warning/10"
 				>
-					<p class="font-semibold mb-2" style="color: var(--text-primary);">
-						⚠️ Conflict Detected
+					<p class="font-semibold mb-2 flex items-center gap-2 text-content">
+						@Icon("alert", "h-4 w-4 text-warning")
+						Conflict Detected
 					</p>
-					<p class="text-sm" style="color: var(--text-secondary);">
+					<p class="text-sm text-content-muted">
 						Progress differs between devices. Choose which version to keep.
 					</p>
 				</div>
 				<div class="space-y-4">
 					for source, data := range book.ActiveConflict.ConflictData {
 						<div
-							class="card p-4 rounded-lg border"
-							style="background-color: var(--bg-primary); border-color: var(--border);"
+							class="card p-4"
 						>
 							<div class="flex justify-between items-start mb-3">
 								<div>
 									<span
-										class="inline-block px-2 py-1 rounded text-xs font-semibold capitalize mb-2"
-										style="background-color: var(--accent); color: white;"
+										class="inline-block px-2 py-1 rounded text-xs font-semibold capitalize mb-2 bg-brand text-white"
 									>
 										{ data.Source }
 									</span>
-									<p class="text-xs" style="color: var(--text-secondary);">
+									<p class="text-xs text-content-muted">
 										{ FormatInTimezone(data.Timestamp, user.Timezone) }
 									</p>
 								</div>
 								<div class="text-right">
 									if data.Data["percentage"] != nil {
-										<div class="text-3xl font-bold" style="color: var(--accent);">
+										<div class="text-3xl font-bold text-brand">
 											{ fmt.Sprintf("%.1f", data.Data["percentage"].(float64) * 100) }%
 										</div>
 									}
 								</div>
 							</div>
 							if data.Data["page"] != nil {
-								<div class="text-sm" style="color: var(--text-secondary);">
+								<div class="text-sm text-content-muted">
 									if data.Data["total_pages"] != nil {
 										Page: { fmt.Sprintf("%.0f", data.Data["page"].(float64)) } / { fmt.Sprintf("%.0f", data.Data["total_pages"].(float64)) }
 									} else {
@@ -76,15 +72,14 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
 								</div>
 							}
 							if data.Data["epubcfi"] != nil {
-								<div class="text-xs mt-1" style="color: var(--text-secondary);">
+								<div class="text-xs mt-1 text-content-muted">
 									CFI: { data.Data["epubcfi"].(string) }
 								</div>
 							}
 							<div class="mt-3">
 								<button
 									@click={"resolveConflict('" + book.ActiveConflict.ID + "', '" + source + "')"}
-									class="px-3 py-1.5 rounded-lg text-sm font-semibold"
-									style="background-color: var(--accent); color: white;"
+									class="btn btn-primary text-sm"
 								>
 									Keep This
 								</button>
@@ -93,26 +88,25 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
 					}
 				</div>
 			} else if book.ReadingProgress != nil {
-				<div class="mb-4" style="color: var(--text-secondary);">
+				<div class="mb-4 text-content-muted">
 					<p>No conflicts detected. Current progress from <strong>{ book.ReadingProgress.LastSyncSource.String }</strong>:</p>
 				</div>
 				<div
-					class="card p-6 rounded-lg border text-center"
-					style="background-color: var(--bg-primary); border-color: var(--border);"
+					class="card p-6 text-center"
 				>
-					<div class="text-5xl font-bold mb-4" style="color: var(--accent);">
+					<div class="text-5xl font-bold mb-4 text-brand">
 						{ fmt.Sprintf("%.1f", book.ReadingProgress.Percentage.Float64 * 100) }%
 					</div>
-					<p class="capitalize text-lg mb-2" style="color: var(--text-primary);">
+					<p class="capitalize text-lg mb-2 text-content">
 						{ book.ReadingProgress.LastSyncSource.String }
 					</p>
 					if book.ReadingProgress.CurrentPage.Valid && book.ReadingProgress.TotalPages.Valid {
-						<p style="color: var(--text-secondary);">
+						<p class="text-content-muted">
 							Page { book.ReadingProgress.CurrentPage.Int32 } of { book.ReadingProgress.TotalPages.Int32 }
 						</p>
 					}
 					if book.ReadingProgress.LastReadAt.Valid {
-						<p class="text-sm mt-2" style="color: var(--text-secondary);">
+						<p class="text-sm mt-2 text-content-muted">
 							Last read: { FormatTimestamptzInTimezone(book.ReadingProgress.LastReadAt, user.Timezone) }
 						</p>
 					}
@@ -121,8 +115,7 @@ templ ProgressSyncModal(user User, book handlers.MediaDetail) {
 			<div class="flex justify-end space-x-3 mt-6">
 				<button
 					@click="hideProgressSyncModal()"
-					class="px-4 py-2 rounded-lg"
-					style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
+					class="btn btn-secondary"
 				>
 					Close
 				</button>
@@ -135,23 +128,23 @@ templ NotesHighlightsModal(book handlers.MediaDetail) {
 	<div
 		id="notes-modal"
 		class="hidden fixed inset-0 z-50 flex items-center justify-center"
-		style="background-color: rgba(0, 0, 0, 0.7);"
+		style="background-color: var(--surface-overlay);"
 	>
 		<div
-			class="card rounded-lg p-8 w-full max-w-2xl mx-4 text-center"
-			style="background-color: var(--bg-secondary); border-color: var(--border);"
+			class="card p-8 w-full max-w-2xl mx-4 text-center"
 		>
-			<div class="text-6xl mb-4">📝</div>
-			<h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary)">Notes & Highlights</h2>
-			<p class="mb-2" style="color: var(--text-secondary);">
+			<div class="mb-4 flex justify-center">
+				@Icon("edit", "h-12 w-12 text-content-muted")
+			</div>
+			<h2 class="text-2xl font-bold tracking-tight text-content mb-2">Notes & Highlights</h2>
+			<p class="mb-2 text-content-muted">
 				This book has <strong>{ book.NotesCount }</strong> notes and <strong>{ book.HighlightsCount }</strong> highlights.
 			</p>
-			<p class="mb-6" style="color: var(--text-secondary);">Feature coming soon!</p>
+			<p class="mb-6 text-content-muted">Feature coming soon!</p>
 			<div>
 				<button
 					@click="hideNotesModal()"
-					class="px-6 py-2 rounded-lg font-semibold"
-					style="background-color: var(--accent); color: white;"
+					class="btn btn-primary"
 				>
 					Close
 				</button>
@@ -164,27 +157,24 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 	<div
 		id="metadata-editor-modal"
 		class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
-		style="background-color: rgba(0, 0, 0, 0.7);"
+		style="background-color: var(--surface-overlay);"
 	>
 		<div
-			class="rounded-lg w-full max-w-5xl mx-4 my-8 flex flex-col max-h-[90vh]"
-			style="background-color: var(--bg-secondary); border: 1px solid var(--border);"
+			class="card w-full max-w-5xl mx-4 my-8 flex flex-col max-h-[90vh]"
 		>
-			<div class="flex justify-between items-center p-6 border-b flex-shrink-0" style="border-color: var(--border);">
-				<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Edit Metadata</h2>
+			<div class="flex justify-between items-center p-6 border-b border-line flex-shrink-0">
+				<h2 class="text-2xl font-bold tracking-tight text-content">Edit Metadata</h2>
 				<button
 					@click="hideMetadataEditor()"
-					class="p-2 hover:opacity-80 rounded-lg"
-					style="color: var(--text-primary); background-color: var(--bg-primary);"
+					class="icon-btn"
 				>
-					✕
+					@Icon("close", "h-5 w-5")
 				</button>
 			</div>
 			<div class="flex flex-col md:flex-row gap-8 p-6 flex-1 min-h-0 overflow-y-auto">
 				<!-- Cover Section (Left) -->
 				<div class="flex-shrink-0">
-					<div class="w-64 h-96 rounded-lg overflow-hidden shadow-lg mb-3 cursor-pointer relative group"
-						style="background-color: var(--bg-primary);"
+					<div class="w-64 h-96 rounded-lg overflow-hidden shadow-lg mb-3 cursor-pointer relative group bg-surface"
 						@click="document.getElementById('cover-upload-input').click()"
 					>
 						if book.CoverImagePath.Valid && book.CoverImagePath.String != "" {
@@ -209,29 +199,29 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 					<div class="w-64 space-y-2">
 						<button
 							type="button"
-							class="w-full px-3 py-2 text-sm rounded-lg font-semibold"
-							style="background-color: var(--accent); color: white;"
+							class="btn btn-primary w-full text-sm"
 							@click="generateCover()"
 							x-show="coverGenerating"
+							x-cloak
 							disabled
 						>
 							Generating...
 						</button>
 						<button
 							type="button"
-							class="w-full px-3 py-2 text-sm rounded-lg font-semibold"
-							style="background-color: var(--accent); color: white;"
+							class="btn btn-primary w-full text-sm"
 							@click="generateCover()"
 							x-show="!coverGenerating"
+							x-cloak
 						>
 							Generate Cover
 						</button>
 						<button
 							type="button"
-							class="w-full px-3 py-2 text-sm rounded-lg"
-							style="background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);"
+							class="btn btn-secondary w-full text-sm"
 							@click="removeCover()"
 							x-show="hasExistingCover || newCoverPreview"
+							x-cloak
 						>
 							Remove Cover
 						</button>
@@ -240,50 +230,44 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 				<!-- Accordion Fields (Right) -->
 				<div class="flex-1 min-w-0 space-y-2">
 					<!-- Basic Info -->
-					<div class="border rounded-lg" style="border-color: var(--border);">
-						<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
-							style="color: var(--text-primary); background-color: var(--bg-primary);"
+					<div class="border rounded-lg border-line">
+						<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
 							@click="toggleSection('basic')">
 							<span class="font-semibold">Basic Info</span>
 							<span x-text="openSections.basic ? '▾' : '▸'">▸</span>
 						</button>
-						<div x-show="openSections.basic" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
+						<div x-show="openSections.basic" x-cloak x-transition class="p-4 space-y-3 bg-surface">
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Title</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Title</label>
 								<input type="text" name="title" value={ book.Title }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Author</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Author</label>
 								<input type="text" name="author" value={ textToString(book.Author) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Description</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Description</label>
 								<textarea name="description" rows="3"
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);"
+									class="input text-sm"
 								>{ textToString(book.Description) }</textarea>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Summary</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Summary</label>
 								<textarea name="summary" rows="2"
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);"
+									class="input text-sm"
 								>{ textToString(book.Summary) }</textarea>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Tags</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Tags</label>
 								<div class="flex flex-wrap gap-1.5 mb-2">
 									<template x-for="(tag, idx) in editorTags" :key="idx">
 										<span
-											class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
-											style="background-color: var(--accent); color: white;"
+											class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-brand text-white"
 										>
 											<span x-text="tag"></span>
-											<button type="button" class="hover:opacity-70 leading-none" @click="removeEditorTag(idx)">✕</button>
+											<button type="button" class="hover:opacity-70 leading-none" @click="removeEditorTag(idx)">@Icon("close", "h-3 w-3")</button>
 										</span>
 									</template>
 								</div>
@@ -297,13 +281,12 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 										@keydown="onTagKeydown($event)"
 										@blur="hideEditorTagDropdown()"
 										placeholder="Add tag..."
-										class="w-full px-3 py-2 rounded-lg border text-sm"
-										style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+										class="input text-sm" />
 									<div
 										x-show="showTagDropdown"
+										x-cloak
 										x-transition
-										class="mt-1 w-full rounded-lg shadow-lg border max-h-48 overflow-y-auto"
-										style="background-color: var(--bg-primary); border-color: var(--border);"
+										class="mt-1 w-full rounded-lg shadow-lg border border-line bg-surface max-h-48 overflow-y-auto"
 									>
 									<template x-for="sug in tagSuggestions" :key="sug.value">
 										<button
@@ -314,171 +297,149 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 											@click="selectEditorTagSuggestion(sug.value)"
 										>
 												<span x-text="sug.value"></span>
-												<span class="text-xs" style="color: var(--text-secondary);" x-text="sug.count + ' books'"></span>
+												<span class="text-xs text-content-muted" x-text="sug.count + ' books'"></span>
 											</button>
 										</template>
 									</div>
 								</div>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Community Rating (0-10)</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Community Rating (0-10)</label>
 								<input type="number" name="community_rating" min="0" max="10" step="0.1"
 									value={ fmt.Sprintf("%.1f", book.CommunityRating.Float64) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 						</div>
 					</div>
 					<!-- Publication -->
-					<div class="border rounded-lg" style="border-color: var(--border);">
-						<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
-							style="color: var(--text-primary); background-color: var(--bg-primary);"
+					<div class="border rounded-lg border-line">
+						<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
 							@click="toggleSection('publication')">
 							<span class="font-semibold">Publication</span>
 							<span x-text="openSections.publication ? '▾' : '▸'">▸</span>
 						</button>
-						<div x-show="openSections.publication" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
+						<div x-show="openSections.publication" x-cloak x-transition class="p-4 space-y-3 bg-surface">
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Publisher</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Publisher</label>
 								<input type="text" name="publisher" value={ textToString(book.Publisher) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Date Published</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Date Published</label>
 								<input type="date" name="date_published"
 									value={ formatDateForInput(book.DatePublished) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Edition</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Edition</label>
 								<input type="text" name="edition" value={ textToString(book.Edition) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Language</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Language</label>
 								<input type="text" name="language" value={ textToString(book.Language) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Genre</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Genre</label>
 								<input type="text" name="genre" value={ textToString(book.Genre) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Copyright Year</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Copyright Year</label>
 								<input type="number" name="copyright_year"
 									value={ fmt.Sprintf("%d", book.CopyrightYear.Int32) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 						</div>
 					</div>
 					<!-- Series -->
-					<div class="border rounded-lg" style="border-color: var(--border);">
-						<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
-							style="color: var(--text-primary); background-color: var(--bg-primary);"
+					<div class="border rounded-lg border-line">
+						<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
 							@click="toggleSection('series')">
 							<span class="font-semibold">Series</span>
 							<span x-text="openSections.series ? '▾' : '▸'">▸</span>
 						</button>
-						<div x-show="openSections.series" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
+						<div x-show="openSections.series" x-cloak x-transition class="p-4 space-y-3 bg-surface">
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Series</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Series</label>
 								<input type="text" name="series" value={ textToString(book.Series) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div class="grid grid-cols-3 gap-3">
 								<div>
-									<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Number</label>
+									<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Number</label>
 									<input type="number" name="series_number"
 										value={ fmt.Sprintf("%d", book.SeriesNumber.Int32) }
-										class="w-full px-3 py-2 rounded-lg border text-sm"
-										style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+										class="input text-sm" />
 								</div>
 								<div>
-									<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Count</label>
+									<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Count</label>
 									<input type="number" name="series_count"
 										value={ fmt.Sprintf("%d", book.SeriesCount.Int32) }
-										class="w-full px-3 py-2 rounded-lg border text-sm"
-										style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+										class="input text-sm" />
 								</div>
 								<div>
-									<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Volume</label>
+									<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Volume</label>
 									<input type="number" name="volume"
 										value={ fmt.Sprintf("%d", book.Volume.Int32) }
-										class="w-full px-3 py-2 rounded-lg border text-sm"
-										style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+										class="input text-sm" />
 								</div>
 							</div>
 						</div>
 					</div>
 					<!-- Identifiers -->
-					<div class="border rounded-lg" style="border-color: var(--border);">
-						<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
-							style="color: var(--text-primary); background-color: var(--bg-primary);"
+					<div class="border rounded-lg border-line">
+						<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
 							@click="toggleSection('identifiers')">
 							<span class="font-semibold">Identifiers</span>
 							<span x-text="openSections.identifiers ? '▾' : '▸'">▸</span>
 						</button>
-						<div x-show="openSections.identifiers" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
+						<div x-show="openSections.identifiers" x-cloak x-transition class="p-4 space-y-3 bg-surface">
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">ISBN</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">ISBN</label>
 								<input type="text" name="isbn" value={ textToString(book.Isbn) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">ASIN</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">ASIN</label>
 								<input type="text" name="asin" value={ textToString(book.Asin) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Goodreads ID</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Goodreads ID</label>
 								<input type="text" name="goodreads_id" value={ textToString(book.GoodreadsID) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">OpenLibrary ID</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">OpenLibrary ID</label>
 								<input type="text" name="openlibrary_id" value={ textToString(book.OpenlibraryID) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Google Books ID</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Google Books ID</label>
 								<input type="text" name="google_books_id" value={ textToString(book.GoogleBooksID) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Web URL</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Web URL</label>
 								<input type="url" name="web_url" value={ textToString(book.WebUrl) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 						</div>
 					</div>
 					<!-- Comic/Manga -->
-					<div class="border rounded-lg" style="border-color: var(--border);">
-						<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
-							style="color: var(--text-primary); background-color: var(--bg-primary);"
+					<div class="border rounded-lg border-line">
+						<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
 							@click="toggleSection('comic')">
 							<span class="font-semibold">Comic/Manga</span>
 							<span x-text="openSections.comic ? '▾' : '▸'">▸</span>
 						</button>
-						<div x-show="openSections.comic" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
+						<div x-show="openSections.comic" x-cloak x-transition class="p-4 space-y-3 bg-surface">
 							<div>
-								<label for="manga_type" class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Manga Type</label>
+								<label for="manga_type" class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Manga Type</label>
 								<select id="manga_type" name="manga_type"
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);">
+									class="input text-sm">
 									<option value="unknown" selected={ textToString(book.MangaType) == "unknown" }>Unknown</option>
 									<option value="no" selected={ textToString(book.MangaType) == "no" }>No</option>
 									<option value="yes" selected={ textToString(book.MangaType) == "yes" }>Yes</option>
@@ -486,10 +447,9 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 								</select>
 							</div>
 							<div>
-								<label for="reading_direction" class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Reading Direction</label>
+								<label for="reading_direction" class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Reading Direction</label>
 								<select id="reading_direction" name="reading_direction"
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);">
+									class="input text-sm">
 									<option value="auto" selected={ textToString(book.ReadingDirection) == "auto" }>Auto</option>
 									<option value="ltr" selected={ textToString(book.ReadingDirection) == "ltr" }>Left to Right</option>
 									<option value="rtl" selected={ textToString(book.ReadingDirection) == "rtl" }>Right to Left</option>
@@ -497,96 +457,84 @@ templ MetadataEditorModal(book handlers.MediaDetail) {
 								</select>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Age Rating</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Age Rating</label>
 								<input type="text" name="age_rating" value={ textToString(book.AgeRating) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Story Arc</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Story Arc</label>
 								<input type="text" name="story_arc" value={ textToString(book.StoryArc) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Imprint</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Imprint</label>
 								<input type="text" name="imprint" value={ textToString(book.Imprint) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Scan Information</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Scan Information</label>
 								<input type="text" name="scan_information" value={ textToString(book.ScanInformation) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Metadata Notes</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Metadata Notes</label>
 								<textarea name="metadata_notes" rows="2"
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);"
+									class="input text-sm"
 								>{ textToString(book.MetadataNotes) }</textarea>
 							</div>
 							<div class="flex items-center gap-2">
 								<input type="checkbox" name="is_black_and_white" id="is_black_and_white"
 									if book.IsBlackAndWhite.Bool { checked }
 									class="rounded" />
-								<label for="is_black_and_white" class="text-sm" style="color: var(--text-secondary);">Black & White</label>
+								<label for="is_black_and_white" class="text-sm text-content-muted">Black & White</label>
 							</div>
 						</div>
 					</div>
 					<!-- Technical -->
-					<div class="border rounded-lg" style="border-color: var(--border);">
-						<button type="button" class="w-full px-4 py-3 flex justify-between items-center"
-							style="color: var(--text-primary); background-color: var(--bg-primary);"
+					<div class="border rounded-lg border-line">
+						<button type="button" class="w-full px-4 py-3 flex justify-between items-center text-content bg-surface"
 							@click="toggleSection('technical')">
 							<span class="font-semibold">Technical</span>
 							<span x-text="openSections.technical ? '▾' : '▸'">▸</span>
 						</button>
-						<div x-show="openSections.technical" x-transition class="p-4 space-y-3" style="background-color: var(--bg-primary);">
+						<div x-show="openSections.technical" x-cloak x-transition class="p-4 space-y-3 bg-surface">
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Page Count</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Page Count</label>
 								<input type="number" name="page_count"
 									value={ fmt.Sprintf("%d", book.PageCount.Int32) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Contributors (comma-separated)</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Contributors (comma-separated)</label>
 								<input type="text" name="contributors" value={ stringSliceToString(book.Contributors) }
-									class="w-full px-3 py-2 rounded-lg border text-sm"
-									style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+									class="input text-sm" />
 							</div>
 							<div class="grid grid-cols-2 gap-3">
 								<div>
-									<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">Format</label>
+									<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Format</label>
 									<input type="text" value={ textToString(book.MimeType) } readonly
-										class="w-full px-3 py-2 rounded-lg border text-sm opacity-60"
-										style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+										class="input text-sm opacity-60" />
 								</div>
 								<div>
-									<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary);">File Size</label>
+									<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">File Size</label>
 									<input type="text" value={ fmt.Sprintf("%.1f MB", float64(book.FileSize.Int64)/1024/1024) } readonly
-										class="w-full px-3 py-2 rounded-lg border text-sm opacity-60"
-										style="background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);" />
+										class="input text-sm opacity-60" />
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="flex justify-end space-x-3 p-6 border-t flex-shrink-0" style="border-color: var(--border);">
+			<div class="flex justify-end space-x-3 p-6 border-t border-line flex-shrink-0">
 				<button
 					@click="hideMetadataEditor()"
-					class="px-4 py-2 rounded-lg"
-					style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
+					class="btn btn-secondary"
 				>
 					Cancel
 				</button>
 				<button
 					@click="saveMetadata()"
-					class="px-6 py-2 rounded-lg font-semibold"
-					style="background-color: var(--accent); color: white;"
+					class="btn btn-primary"
 				>
 					Save
 				</button>
diff --git a/templates/book_detail_modals_templ.go b/templates/book_detail_modals_templ.go
index 3b7a760..94dc884 100644
--- a/templates/book_detail_modals_templ.go
+++ b/templates/book_detail_modals_templ.go
@@ -34,276 +34,292 @@ func ProgressSyncModal(user User, book handlers.MediaDetail) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"progress-sync-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-4xl mx-4 my-8\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><div><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Sync Progress</h2><p class=\"text-sm\" style=\"color: var(--text-secondary);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"progress-sync-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-4xl mx-4 my-8\"><div class=\"flex justify-between items-center mb-6\"><div><h2 class=\"text-2xl font-bold tracking-tight text-content\">Sync Progress</h2><p class=\"text-sm text-content-muted\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(book.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 21, Col: 74}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 20, Col: 55}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p></div><button @click=\"hideProgressSyncModal()\" class=\"p-2 hover:opacity-80 rounded-lg\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\">✕</button></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p></div><button @click=\"hideProgressSyncModal()\" class=\"icon-btn\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</button></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if book.ActiveConflict != nil {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"mb-6 p-4 rounded-lg border\" style=\"background-color: #f59e0b20; border-color: #f59e0b;\"><p class=\"font-semibold mb-2\" style=\"color: var(--text-primary);\">⚠️ Conflict Detected</p><p class=\"text-sm\" style=\"color: var(--text-secondary);\">Progress differs between devices. Choose which version to keep.</p></div><div class=\"space-y-4\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"mb-6 p-4 rounded-lg border border-warning bg-warning/10\"><p class=\"font-semibold mb-2 flex items-center gap-2 text-content\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("alert", "h-4 w-4 text-warning").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "Conflict Detected</p><p class=\"text-sm text-content-muted\">Progress differs between devices. Choose which version to keep.</p></div><div class=\"space-y-4\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for source, data := range book.ActiveConflict.ConflictData {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"card p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><div class=\"flex justify-between items-start mb-3\"><div><span class=\"inline-block px-2 py-1 rounded text-xs font-semibold capitalize mb-2\" style=\"background-color: var(--accent); color: white;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"card p-4\"><div class=\"flex justify-between items-start mb-3\"><div><span class=\"inline-block px-2 py-1 rounded text-xs font-semibold capitalize mb-2 bg-brand text-white\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var3 string
 				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(data.Source)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 55, Col: 23}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 51, Col: 23}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</span><p class=\"text-xs\" style=\"color: var(--text-secondary);\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span><p class=\"text-xs text-content-muted\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(FormatInTimezone(data.Timestamp, user.Timezone))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 58, Col: 59}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 54, Col: 59}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</p></div><div class=\"text-right\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</p></div><div class=\"text-right\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if data.Data["percentage"] != nil {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"text-3xl font-bold\" style=\"color: var(--accent);\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"text-3xl font-bold text-brand\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var5 string
 					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", data.Data["percentage"].(float64)*100))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 64, Col: 73}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 60, Col: 73}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "%</div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "%</div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if data.Data["page"] != nil {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div class=\"text-sm\" style=\"color: var(--text-secondary);\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"text-sm text-content-muted\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					if data.Data["total_pages"] != nil {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "Page: ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "Page: ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 						var templ_7745c5c3_Var6 string
 						templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f", data.Data["page"].(float64)))
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 72, Col: 66}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 68, Col: 66}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " / ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " / ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 						var templ_7745c5c3_Var7 string
 						templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f", data.Data["total_pages"].(float64)))
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 72, Col: 128}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 68, Col: 128}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					} else {
-						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "Page: ")
+						templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "Page: ")
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 						var templ_7745c5c3_Var8 string
 						templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f", data.Data["page"].(float64)))
 						if templ_7745c5c3_Err != nil {
-							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 74, Col: 66}
+							return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 70, Col: 66}
 						}
 						_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 						if templ_7745c5c3_Err != nil {
 							return templ_7745c5c3_Err
 						}
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
 				if data.Data["epubcfi"] != nil {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"text-xs mt-1\" style=\"color: var(--text-secondary);\">CFI: ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"text-xs mt-1 text-content-muted\">CFI: ")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var9 string
 					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(data.Data["epubcfi"].(string))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 80, Col: 45}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 76, Col: 45}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"mt-3\"><button @click=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"mt-3\"><button @click=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.ResolveAttributeValue("resolveConflict('" + book.ActiveConflict.ID + "', '" + source + "')")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 85, Col: 86}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 81, Col: 86}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" class=\"px-3 py-1.5 rounded-lg text-sm font-semibold\" style=\"background-color: var(--accent); color: white;\">Keep This</button></div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\" class=\"btn btn-primary text-sm\">Keep This</button></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else if book.ReadingProgress != nil {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<div class=\"mb-4\" style=\"color: var(--text-secondary);\"><p>No conflicts detected. Current progress from <strong>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<div class=\"mb-4 text-content-muted\"><p>No conflicts detected. Current progress from <strong>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(book.ReadingProgress.LastSyncSource.String)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 97, Col: 105}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 92, Col: 105}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</strong>:</p></div><div class=\"card p-6 rounded-lg border text-center\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><div class=\"text-5xl font-bold mb-4\" style=\"color: var(--accent);\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</strong>:</p></div><div class=\"card p-6 text-center\"><div class=\"text-5xl font-bold mb-4 text-brand\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f", book.ReadingProgress.Percentage.Float64*100))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 104, Col: 74}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 98, Col: 74}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "%</div><p class=\"capitalize text-lg mb-2\" style=\"color: var(--text-primary);\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "%</div><p class=\"capitalize text-lg mb-2 text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var13 string
 			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(book.ReadingProgress.LastSyncSource.String)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 107, Col: 50}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 101, Col: 50}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</p>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</p>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if book.ReadingProgress.CurrentPage.Valid && book.ReadingProgress.TotalPages.Valid {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<p style=\"color: var(--text-secondary);\">Page ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<p class=\"text-content-muted\">Page ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(book.ReadingProgress.CurrentPage.Int32)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 111, Col: 52}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 105, Col: 52}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " of ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, " of ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(book.ReadingProgress.TotalPages.Int32)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 111, Col: 97}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 105, Col: 97}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</p>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			if book.ReadingProgress.LastReadAt.Valid {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<p class=\"text-sm mt-2\" style=\"color: var(--text-secondary);\">Last read: ")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(FormatTimestamptzInTimezone(book.ReadingProgress.LastReadAt, user.Timezone))
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 116, Col: 95}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
 				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</div>")
+			if book.ReadingProgress.LastReadAt.Valid {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<p class=\"text-sm mt-2 text-content-muted\">Last read: ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var16 string
+				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(FormatTimestamptzInTimezone(book.ReadingProgress.LastReadAt, user.Timezone))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 110, Col: 95}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</p>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div class=\"flex justify-end space-x-3 mt-6\"><button @click=\"hideProgressSyncModal()\" class=\"px-4 py-2 rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);\">Close</button></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div class=\"flex justify-end space-x-3 mt-6\"><button @click=\"hideProgressSyncModal()\" class=\"btn btn-secondary\">Close</button></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -332,33 +348,41 @@ func NotesHighlightsModal(book handlers.MediaDetail) templ.Component {
 			templ_7745c5c3_Var17 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<div id=\"notes-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-8 w-full max-w-2xl mx-4 text-center\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"text-6xl mb-4\">📝</div><h2 class=\"text-2xl font-bold mb-2\" style=\"color: var(--text-primary)\">Notes & Highlights</h2><p class=\"mb-2\" style=\"color: var(--text-secondary);\">This book has <strong>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div id=\"notes-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-8 w-full max-w-2xl mx-4 text-center\"><div class=\"mb-4 flex justify-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("edit", "h-12 w-12 text-content-muted").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div><h2 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Notes & Highlights</h2><p class=\"mb-2 text-content-muted\">This book has <strong>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(book.NotesCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 147, Col: 43}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 141, Col: 43}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</strong> notes and <strong>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</strong> notes and <strong>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var19 string
 		templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(book.HighlightsCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 147, Col: 95}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 141, Col: 95}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</strong> highlights.</p><p class=\"mb-6\" style=\"color: var(--text-secondary);\">Feature coming soon!</p><div><button @click=\"hideNotesModal()\" class=\"px-6 py-2 rounded-lg font-semibold\" style=\"background-color: var(--accent); color: white;\">Close</button></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</strong> highlights.</p><p class=\"mb-6 text-content-muted\">Feature coming soon!</p><div><button @click=\"hideNotesModal()\" class=\"btn btn-primary\">Close</button></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -387,588 +411,604 @@ func MetadataEditorModal(book handlers.MediaDetail) templ.Component {
 			templ_7745c5c3_Var20 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "<div id=\"metadata-editor-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"rounded-lg w-full max-w-5xl mx-4 my-8 flex flex-col max-h-[90vh]\" style=\"background-color: var(--bg-secondary); border: 1px solid var(--border);\"><div class=\"flex justify-between items-center p-6 border-b flex-shrink-0\" style=\"border-color: var(--border);\"><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Edit Metadata</h2><button @click=\"hideMetadataEditor()\" class=\"p-2 hover:opacity-80 rounded-lg\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\">✕</button></div><div class=\"flex flex-col md:flex-row gap-8 p-6 flex-1 min-h-0 overflow-y-auto\"><!-- Cover Section (Left) --><div class=\"flex-shrink-0\"><div class=\"w-64 h-96 rounded-lg overflow-hidden shadow-lg mb-3 cursor-pointer relative group\" style=\"background-color: var(--bg-primary);\" @click=\"document.getElementById('cover-upload-input').click()\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<div id=\"metadata-editor-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: var(--surface-overlay);\"><div class=\"card w-full max-w-5xl mx-4 my-8 flex flex-col max-h-[90vh]\"><div class=\"flex justify-between items-center p-6 border-b border-line flex-shrink-0\"><h2 class=\"text-2xl font-bold tracking-tight text-content\">Edit Metadata</h2><button @click=\"hideMetadataEditor()\" class=\"icon-btn\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</button></div><div class=\"flex flex-col md:flex-row gap-8 p-6 flex-1 min-h-0 overflow-y-auto\"><!-- Cover Section (Left) --><div class=\"flex-shrink-0\"><div class=\"w-64 h-96 rounded-lg overflow-hidden shadow-lg mb-3 cursor-pointer relative group bg-surface\" @click=\"document.getElementById('cover-upload-input').click()\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if book.CoverImagePath.Valid && book.CoverImagePath.String != "" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<img id=\"metadata-cover-preview\" src=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<img id=\"metadata-cover-preview\" src=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var21 string
 			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.ResolveAttributeValue(book.CoverImagePath.String)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 192, Col: 40}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 182, Col: 40}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var21)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\" alt=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\" alt=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var22 string
 			templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.ResolveAttributeValue(book.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 193, Col: 24}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 183, Col: 24}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var22)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\" class=\"w-full h-full object-cover\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\" class=\"w-full h-full object-cover\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "<img id=\"metadata-cover-preview\" src=\"/static/placeholder-book.svg\" alt=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "<img id=\"metadata-cover-preview\" src=\"/static/placeholder-book.svg\" alt=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var23 string
 			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.ResolveAttributeValue(book.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 199, Col: 24}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 189, Col: 24}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var23)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "\" class=\"w-full h-full object-cover\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\" class=\"w-full h-full object-cover\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "<div class=\"absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\"><span class=\"text-white text-sm font-semibold\">Click to upload</span></div></div><input type=\"file\" id=\"cover-upload-input\" accept=\"image/jpeg,image/png,image/webp\" class=\"hidden\" @change=\"handleCoverUpload($event)\"><div class=\"w-64 space-y-2\"><button type=\"button\" class=\"w-full px-3 py-2 text-sm rounded-lg font-semibold\" style=\"background-color: var(--accent); color: white;\" @click=\"generateCover()\" x-show=\"coverGenerating\" disabled>Generating...</button> <button type=\"button\" class=\"w-full px-3 py-2 text-sm rounded-lg font-semibold\" style=\"background-color: var(--accent); color: white;\" @click=\"generateCover()\" x-show=\"!coverGenerating\">Generate Cover</button> <button type=\"button\" class=\"w-full px-3 py-2 text-sm rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);\" @click=\"removeCover()\" x-show=\"hasExistingCover || newCoverPreview\">Remove Cover</button></div></div><!-- Accordion Fields (Right) --><div class=\"flex-1 min-w-0 space-y-2\"><!-- Basic Info --><div class=\"border rounded-lg\" style=\"border-color: var(--border);\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\" @click=\"toggleSection('basic')\"><span class=\"font-semibold\">Basic Info</span> <span x-text=\"openSections.basic ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.basic\" x-transition class=\"p-4 space-y-3\" style=\"background-color: var(--bg-primary);\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Title</label> <input type=\"text\" name=\"title\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "<div class=\"absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\"><span class=\"text-white text-sm font-semibold\">Click to upload</span></div></div><input type=\"file\" id=\"cover-upload-input\" accept=\"image/jpeg,image/png,image/webp\" class=\"hidden\" @change=\"handleCoverUpload($event)\"><div class=\"w-64 space-y-2\"><button type=\"button\" class=\"btn btn-primary w-full text-sm\" @click=\"generateCover()\" x-show=\"coverGenerating\" x-cloak disabled>Generating...</button> <button type=\"button\" class=\"btn btn-primary w-full text-sm\" @click=\"generateCover()\" x-show=\"!coverGenerating\" x-cloak>Generate Cover</button> <button type=\"button\" class=\"btn btn-secondary w-full text-sm\" @click=\"removeCover()\" x-show=\"hasExistingCover || newCoverPreview\" x-cloak>Remove Cover</button></div></div><!-- Accordion Fields (Right) --><div class=\"flex-1 min-w-0 space-y-2\"><!-- Basic Info --><div class=\"border rounded-lg border-line\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center text-content bg-surface\" @click=\"toggleSection('basic')\"><span class=\"font-semibold\">Basic Info</span> <span x-text=\"openSections.basic ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.basic\" x-cloak x-transition class=\"p-4 space-y-3 bg-surface\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Title</label> <input type=\"text\" name=\"title\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var24 string
 		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.ResolveAttributeValue(book.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 253, Col: 58}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 242, Col: 58}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var24)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Author</label> <input type=\"text\" name=\"author\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Author</label> <input type=\"text\" name=\"author\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var25 string
 		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Author))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 259, Col: 74}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 247, Col: 74}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var25)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Description</label> <textarea name=\"description\" rows=\"3\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Description</label> <textarea name=\"description\" rows=\"3\" class=\"input text-sm\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var26 string
 		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(textToString(book.Description))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 268, Col: 41}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 254, Col: 41}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</textarea></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Summary</label> <textarea name=\"summary\" rows=\"2\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "</textarea></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Summary</label> <textarea name=\"summary\" rows=\"2\" class=\"input text-sm\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var27 string
 		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(textToString(book.Summary))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 275, Col: 37}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 260, Col: 37}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</textarea></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Tags</label><div class=\"flex flex-wrap gap-1.5 mb-2\"><template x-for=\"(tag, idx) in editorTags\" :key=\"idx\"><span class=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium\" style=\"background-color: var(--accent); color: white;\"><span x-text=\"tag\"></span> <button type=\"button\" class=\"hover:opacity-70 leading-none\" @click=\"removeEditorTag(idx)\">✕</button></span></template></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "</textarea></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Tags</label><div class=\"flex flex-wrap gap-1.5 mb-2\"><template x-for=\"(tag, idx) in editorTags\" :key=\"idx\"><span class=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-brand text-white\"><span x-text=\"tag\"></span> <button type=\"button\" class=\"hover:opacity-70 leading-none\" @click=\"removeEditorTag(idx)\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-3 w-3").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "</button></span></template></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, tag := range book.Tags {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<span data-editor-tag=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "<span data-editor-tag=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var28 string
 			templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.ResolveAttributeValue(tag)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 291, Col: 36}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 275, Col: 36}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var28)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "\" class=\"hidden\"></span>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "\" class=\"hidden\"></span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "<div><input type=\"text\" x-model=\"tagSearch\" @input.debounce.300ms=\"searchEditorTags()\" @keydown=\"onTagKeydown($event)\" @blur=\"hideEditorTagDropdown()\" placeholder=\"Add tag...\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"><div x-show=\"showTagDropdown\" x-transition class=\"mt-1 w-full rounded-lg shadow-lg border max-h-48 overflow-y-auto\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><template x-for=\"sug in tagSuggestions\" :key=\"sug.value\"><button type=\"button\" class=\"w-full text-left px-3 py-2 text-sm flex justify-between items-center\" :class=\"highlightedTagIndex === tagSuggestions.indexOf(sug) ? 'opacity-80' : ''\" :style=\"highlightedTagIndex === tagSuggestions.indexOf(sug) ? 'background-color: var(--bg-secondary); color: var(--text-primary);' : 'color: var(--text-primary);'\" @click=\"selectEditorTagSuggestion(sug.value)\"><span x-text=\"sug.value\"></span> <span class=\"text-xs\" style=\"color: var(--text-secondary);\" x-text=\"sug.count + ' books'\"></span></button></template></div></div></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Community Rating (0-10)</label> <input type=\"number\" name=\"community_rating\" min=\"0\" max=\"10\" step=\"0.1\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "<div><input type=\"text\" x-model=\"tagSearch\" @input.debounce.300ms=\"searchEditorTags()\" @keydown=\"onTagKeydown($event)\" @blur=\"hideEditorTagDropdown()\" placeholder=\"Add tag...\" class=\"input text-sm\"><div x-show=\"showTagDropdown\" x-cloak x-transition class=\"mt-1 w-full rounded-lg shadow-lg border border-line bg-surface max-h-48 overflow-y-auto\"><template x-for=\"sug in tagSuggestions\" :key=\"sug.value\"><button type=\"button\" class=\"w-full text-left px-3 py-2 text-sm flex justify-between items-center\" :class=\"highlightedTagIndex === tagSuggestions.indexOf(sug) ? 'opacity-80' : ''\" :style=\"highlightedTagIndex === tagSuggestions.indexOf(sug) ? 'background-color: var(--bg-secondary); color: var(--text-primary);' : 'color: var(--text-primary);'\" @click=\"selectEditorTagSuggestion(sug.value)\"><span x-text=\"sug.value\"></span> <span class=\"text-xs text-content-muted\" x-text=\"sug.count + ' books'\"></span></button></template></div></div></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Community Rating (0-10)</label> <input type=\"number\" name=\"community_rating\" min=\"0\" max=\"10\" step=\"0.1\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var29 string
 		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%.1f", book.CommunityRating.Float64))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 326, Col: 66}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 309, Col: 66}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var29)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div></div></div><!-- Publication --><div class=\"border rounded-lg\" style=\"border-color: var(--border);\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\" @click=\"toggleSection('publication')\"><span class=\"font-semibold\">Publication</span> <span x-text=\"openSections.publication ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.publication\" x-transition class=\"p-4 space-y-3\" style=\"background-color: var(--bg-primary);\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Publisher</label> <input type=\"text\" name=\"publisher\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "\" class=\"input text-sm\"></div></div></div><!-- Publication --><div class=\"border rounded-lg border-line\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center text-content bg-surface\" @click=\"toggleSection('publication')\"><span class=\"font-semibold\">Publication</span> <span x-text=\"openSections.publication ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.publication\" x-cloak x-transition class=\"p-4 space-y-3 bg-surface\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Publisher</label> <input type=\"text\" name=\"publisher\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var30 string
 		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Publisher))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 343, Col: 80}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 324, Col: 80}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var30)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Date Published</label> <input type=\"date\" name=\"date_published\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Date Published</label> <input type=\"date\" name=\"date_published\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var31 string
 		templ_7745c5c3_Var31, templ_7745c5c3_Err = templ.ResolveAttributeValue(formatDateForInput(book.DatePublished))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 350, Col: 55}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 330, Col: 55}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var31)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Edition</label> <input type=\"text\" name=\"edition\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Edition</label> <input type=\"text\" name=\"edition\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var32 string
 		templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Edition))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 356, Col: 76}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 335, Col: 76}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var32)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Language</label> <input type=\"text\" name=\"language\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Language</label> <input type=\"text\" name=\"language\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var33 string
 		templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Language))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 362, Col: 78}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 340, Col: 78}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var33)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Genre</label> <input type=\"text\" name=\"genre\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Genre</label> <input type=\"text\" name=\"genre\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var34 string
 		templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Genre))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 368, Col: 72}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 345, Col: 72}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var34)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Copyright Year</label> <input type=\"number\" name=\"copyright_year\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Copyright Year</label> <input type=\"number\" name=\"copyright_year\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var35 string
 		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%d", book.CopyrightYear.Int32))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 375, Col: 60}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 351, Col: 60}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var35)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div></div></div><!-- Series --><div class=\"border rounded-lg\" style=\"border-color: var(--border);\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\" @click=\"toggleSection('series')\"><span class=\"font-semibold\">Series</span> <span x-text=\"openSections.series ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.series\" x-transition class=\"p-4 space-y-3\" style=\"background-color: var(--bg-primary);\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Series</label> <input type=\"text\" name=\"series\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "\" class=\"input text-sm\"></div></div></div><!-- Series --><div class=\"border rounded-lg border-line\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center text-content bg-surface\" @click=\"toggleSection('series')\"><span class=\"font-semibold\">Series</span> <span x-text=\"openSections.series ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.series\" x-cloak x-transition class=\"p-4 space-y-3 bg-surface\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Series</label> <input type=\"text\" name=\"series\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var36 string
 		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Series))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 392, Col: 74}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 366, Col: 74}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var36)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div class=\"grid grid-cols-3 gap-3\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Number</label> <input type=\"number\" name=\"series_number\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "\" class=\"input text-sm\"></div><div class=\"grid grid-cols-3 gap-3\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Number</label> <input type=\"number\" name=\"series_number\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var37 string
 		templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%d", book.SeriesNumber.Int32))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 400, Col: 60}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 373, Col: 60}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var37)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Count</label> <input type=\"number\" name=\"series_count\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Count</label> <input type=\"number\" name=\"series_count\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var38 string
 		templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%d", book.SeriesCount.Int32))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 407, Col: 59}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 379, Col: 59}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var38)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Volume</label> <input type=\"number\" name=\"volume\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Volume</label> <input type=\"number\" name=\"volume\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var39 string
 		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%d", book.Volume.Int32))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 414, Col: 54}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 385, Col: 54}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var39)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div></div></div></div><!-- Identifiers --><div class=\"border rounded-lg\" style=\"border-color: var(--border);\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\" @click=\"toggleSection('identifiers')\"><span class=\"font-semibold\">Identifiers</span> <span x-text=\"openSections.identifiers ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.identifiers\" x-transition class=\"p-4 space-y-3\" style=\"background-color: var(--bg-primary);\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">ISBN</label> <input type=\"text\" name=\"isbn\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\" class=\"input text-sm\"></div></div></div></div><!-- Identifiers --><div class=\"border rounded-lg border-line\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center text-content bg-surface\" @click=\"toggleSection('identifiers')\"><span class=\"font-semibold\">Identifiers</span> <span x-text=\"openSections.identifiers ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.identifiers\" x-cloak x-transition class=\"p-4 space-y-3 bg-surface\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">ISBN</label> <input type=\"text\" name=\"isbn\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var40 string
 		templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Isbn))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 432, Col: 70}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 401, Col: 70}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var40)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">ASIN</label> <input type=\"text\" name=\"asin\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">ASIN</label> <input type=\"text\" name=\"asin\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var41 string
 		templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Asin))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 438, Col: 70}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 406, Col: 70}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var41)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Goodreads ID</label> <input type=\"text\" name=\"goodreads_id\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Goodreads ID</label> <input type=\"text\" name=\"goodreads_id\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var42 string
 		templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.GoodreadsID))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 444, Col: 85}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 411, Col: 85}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var42)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">OpenLibrary ID</label> <input type=\"text\" name=\"openlibrary_id\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">OpenLibrary ID</label> <input type=\"text\" name=\"openlibrary_id\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var43 string
 		templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.OpenlibraryID))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 450, Col: 89}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 416, Col: 89}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var43)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Google Books ID</label> <input type=\"text\" name=\"google_books_id\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Google Books ID</label> <input type=\"text\" name=\"google_books_id\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var44 string
 		templ_7745c5c3_Var44, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.GoogleBooksID))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 456, Col: 90}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 421, Col: 90}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var44)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Web URL</label> <input type=\"url\" name=\"web_url\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Web URL</label> <input type=\"url\" name=\"web_url\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var45 string
 		templ_7745c5c3_Var45, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.WebUrl))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 462, Col: 74}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 426, Col: 74}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var45)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div></div></div><!-- Comic/Manga --><div class=\"border rounded-lg\" style=\"border-color: var(--border);\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\" @click=\"toggleSection('comic')\"><span class=\"font-semibold\">Comic/Manga</span> <span x-text=\"openSections.comic ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.comic\" x-transition class=\"p-4 space-y-3\" style=\"background-color: var(--bg-primary);\"><div><label for=\"manga_type\" class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Manga Type</label> <select id=\"manga_type\" name=\"manga_type\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"><option value=\"unknown\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "\" class=\"input text-sm\"></div></div></div><!-- Comic/Manga --><div class=\"border rounded-lg border-line\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center text-content bg-surface\" @click=\"toggleSection('comic')\"><span class=\"font-semibold\">Comic/Manga</span> <span x-text=\"openSections.comic ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.comic\" x-cloak x-transition class=\"p-4 space-y-3 bg-surface\"><div><label for=\"manga_type\" class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Manga Type</label> <select id=\"manga_type\" name=\"manga_type\" class=\"input text-sm\"><option value=\"unknown\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var46 string
 		templ_7745c5c3_Var46, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.MangaType) == "unknown")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 482, Col: 85}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 443, Col: 85}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var46)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "\">Unknown</option> <option value=\"no\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "\">Unknown</option> <option value=\"no\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var47 string
 		templ_7745c5c3_Var47, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.MangaType) == "no")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 483, Col: 75}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 444, Col: 75}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var47)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, "\">No</option> <option value=\"yes\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 71, "\">No</option> <option value=\"yes\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var48 string
 		templ_7745c5c3_Var48, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.MangaType) == "yes")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 484, Col: 77}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 445, Col: 77}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var48)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "\">Yes</option> <option value=\"yes_and_right_to_left\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 72, "\">Yes</option> <option value=\"yes_and_right_to_left\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var49 string
 		templ_7745c5c3_Var49, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.MangaType) == "yes_and_right_to_left")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 485, Col: 113}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 446, Col: 113}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var49)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, "\">Yes (Right to Left)</option></select></div><div><label for=\"reading_direction\" class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Reading Direction</label> <select id=\"reading_direction\" name=\"reading_direction\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"><option value=\"auto\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 73, "\">Yes (Right to Left)</option></select></div><div><label for=\"reading_direction\" class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Reading Direction</label> <select id=\"reading_direction\" name=\"reading_direction\" class=\"input text-sm\"><option value=\"auto\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var50 string
 		templ_7745c5c3_Var50, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.ReadingDirection) == "auto")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 493, Col: 86}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 453, Col: 86}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var50)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "\">Auto</option> <option value=\"ltr\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "\">Auto</option> <option value=\"ltr\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var51 string
 		templ_7745c5c3_Var51, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.ReadingDirection) == "ltr")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 494, Col: 84}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 454, Col: 84}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var51)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "\">Left to Right</option> <option value=\"rtl\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "\">Left to Right</option> <option value=\"rtl\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var52 string
 		templ_7745c5c3_Var52, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.ReadingDirection) == "rtl")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 495, Col: 84}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 455, Col: 84}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var52)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 71, "\">Right to Left</option> <option value=\"vertical\" selected=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "\">Right to Left</option> <option value=\"vertical\" selected=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var53 string
 		templ_7745c5c3_Var53, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.ReadingDirection) == "vertical")
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 496, Col: 94}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 456, Col: 94}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var53)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 72, "\">Vertical</option></select></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Age Rating</label> <input type=\"text\" name=\"age_rating\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "\">Vertical</option></select></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Age Rating</label> <input type=\"text\" name=\"age_rating\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var54 string
 		templ_7745c5c3_Var54, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.AgeRating))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 501, Col: 81}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 461, Col: 81}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var54)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 73, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Story Arc</label> <input type=\"text\" name=\"story_arc\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Story Arc</label> <input type=\"text\" name=\"story_arc\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var55 string
 		templ_7745c5c3_Var55, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.StoryArc))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 507, Col: 79}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 466, Col: 79}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var55)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Imprint</label> <input type=\"text\" name=\"imprint\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Imprint</label> <input type=\"text\" name=\"imprint\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var56 string
 		templ_7745c5c3_Var56, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.Imprint))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 513, Col: 76}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 471, Col: 76}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var56)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Scan Information</label> <input type=\"text\" name=\"scan_information\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Scan Information</label> <input type=\"text\" name=\"scan_information\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var57 string
 		templ_7745c5c3_Var57, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.ScanInformation))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 519, Col: 93}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 476, Col: 93}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var57)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Metadata Notes</label> <textarea name=\"metadata_notes\" rows=\"2\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Metadata Notes</label> <textarea name=\"metadata_notes\" rows=\"2\" class=\"input text-sm\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var58 string
 		templ_7745c5c3_Var58, templ_7745c5c3_Err = templ.JoinStringErrs(textToString(book.MetadataNotes))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 528, Col: 43}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 483, Col: 43}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var58))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "</textarea></div><div class=\"flex items-center gap-2\"><input type=\"checkbox\" name=\"is_black_and_white\" id=\"is_black_and_white\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 82, "</textarea></div><div class=\"flex items-center gap-2\"><input type=\"checkbox\" name=\"is_black_and_white\" id=\"is_black_and_white\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if book.IsBlackAndWhite.Bool {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, " checked")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 83, " checked")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, " class=\"rounded\"> <label for=\"is_black_and_white\" class=\"text-sm\" style=\"color: var(--text-secondary);\">Black & White</label></div></div></div><!-- Technical --><div class=\"border rounded-lg\" style=\"border-color: var(--border);\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\" @click=\"toggleSection('technical')\"><span class=\"font-semibold\">Technical</span> <span x-text=\"openSections.technical ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.technical\" x-transition class=\"p-4 space-y-3\" style=\"background-color: var(--bg-primary);\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Page Count</label> <input type=\"number\" name=\"page_count\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 84, " class=\"rounded\"> <label for=\"is_black_and_white\" class=\"text-sm text-content-muted\">Black & White</label></div></div></div><!-- Technical --><div class=\"border rounded-lg border-line\"><button type=\"button\" class=\"w-full px-4 py-3 flex justify-between items-center text-content bg-surface\" @click=\"toggleSection('technical')\"><span class=\"font-semibold\">Technical</span> <span x-text=\"openSections.technical ? '▾' : '▸'\">▸</span></button><div x-show=\"openSections.technical\" x-cloak x-transition class=\"p-4 space-y-3 bg-surface\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Page Count</label> <input type=\"number\" name=\"page_count\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var59 string
 		templ_7745c5c3_Var59, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%d", book.PageCount.Int32))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 550, Col: 56}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 504, Col: 56}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var59)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Contributors (comma-separated)</label> <input type=\"text\" name=\"contributors\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 85, "\" class=\"input text-sm\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Contributors (comma-separated)</label> <input type=\"text\" name=\"contributors\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var60 string
 		templ_7745c5c3_Var60, templ_7745c5c3_Err = templ.ResolveAttributeValue(stringSliceToString(book.Contributors))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 556, Col: 93}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 509, Col: 93}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var60)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "\" class=\"w-full px-3 py-2 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div class=\"grid grid-cols-2 gap-3\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">Format</label> <input type=\"text\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 86, "\" class=\"input text-sm\"></div><div class=\"grid grid-cols-2 gap-3\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Format</label> <input type=\"text\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var61 string
 		templ_7745c5c3_Var61, templ_7745c5c3_Err = templ.ResolveAttributeValue(textToString(book.MimeType))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 563, Col: 63}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 515, Col: 63}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var61)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 82, "\" readonly class=\"w-full px-3 py-2 rounded-lg border text-sm opacity-60\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary);\">File Size</label> <input type=\"text\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 87, "\" readonly class=\"input text-sm opacity-60\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">File Size</label> <input type=\"text\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var62 string
 		templ_7745c5c3_Var62, templ_7745c5c3_Err = templ.ResolveAttributeValue(fmt.Sprintf("%.1f MB", float64(book.FileSize.Int64)/1024/1024))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 569, Col: 98}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/book_detail_modals.templ`, Line: 520, Col: 98}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var62)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 83, "\" readonly class=\"w-full px-3 py-2 rounded-lg border text-sm opacity-60\" style=\"background-color: var(--bg-secondary); border-color: var(--border); color: var(--text-primary);\"></div></div></div></div></div></div><div class=\"flex justify-end space-x-3 p-6 border-t flex-shrink-0\" style=\"border-color: var(--border);\"><button @click=\"hideMetadataEditor()\" class=\"px-4 py-2 rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);\">Cancel</button> <button @click=\"saveMetadata()\" class=\"px-6 py-2 rounded-lg font-semibold\" style=\"background-color: var(--accent); color: white;\">Save</button></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 88, "\" readonly class=\"input text-sm opacity-60\"></div></div></div></div></div></div><div class=\"flex justify-end space-x-3 p-6 border-t border-line flex-shrink-0\"><button @click=\"hideMetadataEditor()\" class=\"btn btn-secondary\">Cancel</button> <button @click=\"saveMetadata()\" class=\"btn btn-primary\">Save</button></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/collection_modal.templ b/templates/collection_modal.templ
index 809a311..b7b2b16 100644
--- a/templates/collection_modal.templ
+++ b/templates/collection_modal.templ
@@ -1,15 +1,17 @@
 package templates
 
 templ CollectionModal(collection CollectionData) {
-	<div x-data="collections" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
-		<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
+	<div x-data="collections" class="fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+		<div class="card p-6 w-full max-w-md mx-4">
 			<div class="flex justify-between items-center mb-6">
 				if collection.ID != "" {
-					<h2 class="text-xl font-bold" style="color: var(--text-primary)">Edit Collection</h2>
+					<h2 class="text-xl font-bold text-content">Edit Collection</h2>
 				} else {
-					<h2 class="text-xl font-bold" style="color: var(--text-primary)">Create Collection</h2>
+					<h2 class="text-xl font-bold text-content">Create Collection</h2>
 				}
-				<button type="button" @click="closeCollectionModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+				<button type="button" @click="closeCollectionModal()" class="icon-btn">
+					@Icon("close", "h-5 w-5")
+				</button>
 			</div>
 			if collection.ID != "" {
 				<form
@@ -18,35 +20,32 @@ templ CollectionModal(collection CollectionData) {
 				>
 					<input type="hidden" name="id" value={ collection.ID }/>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Name</label>
 						<input
 							type="text"
 							name="name"
 							value={ collection.Name }
 							required
-							class="w-full px-4 py-2 border rounded-lg"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							placeholder="My Reading List"
 						/>
 					</div>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Description</label>
 						<textarea
 							name="description"
-							class="w-full px-4 py-2 border rounded-lg"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							placeholder="Optional description"
 							rows="3"
 						>{ collection.Description }</textarea>
 					</div>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Icon</label>
 						<!-- Search/Text Input -->
 						<input
 							type="text"
 							id="icon-search"
-							class="w-full px-4 py-2 border rounded-lg mb-2"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input mb-2"
 							placeholder="🔍 Search or type emoji..."
 							maxlength="4"
 							oninput="filterIcons(this.value)"
@@ -57,14 +56,13 @@ templ CollectionModal(collection CollectionData) {
 						<!-- Emoji Grid -->
 						<div
 							id="icon-grid"
-							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg"
-							style="background-color: var(--bg-primary); border-color: var(--border);"
+							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border border-line bg-surface"
 						>
 							<!-- Populated dynamically by JavaScript -->
 						</div>
 					</div>
 					<div class="mb-6">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Color</label>
 						<div class="flex gap-2">
 							<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
 							<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
@@ -75,8 +73,8 @@ templ CollectionModal(collection CollectionData) {
 						<input type="hidden" name="color" id="collection-color" value={ collection.Color }/>
 					</div>
 					<div class="flex justify-end space-x-3">
-						<button type="button" @click="closeCollectionModal()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
-						<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Update Collection</button>
+						<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
+						<button type="submit" class="btn btn-primary">Update Collection</button>
 					</div>
 				</form>
 			} else {
@@ -85,34 +83,31 @@ templ CollectionModal(collection CollectionData) {
 					hx-redirect="/collections"
 				>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Name</label>
 						<input
 							type="text"
 							name="name"
 							required
-							class="w-full px-4 py-2 border rounded-lg"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							placeholder="My Reading List"
 						/>
 					</div>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Description</label>
 						<textarea
 							name="description"
-							class="w-full px-4 py-2 border rounded-lg"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							placeholder="Optional description"
 							rows="3"
 						></textarea>
 					</div>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Icon</label>
 						<!-- Search/Text Input -->
 						<input
 							type="text"
 							id="icon-search"
-							class="w-full px-4 py-2 border rounded-lg mb-2"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input mb-2"
 							placeholder="🔍 Search or type emoji..."
 							maxlength="4"
 							oninput="filterIcons(this.value)"
@@ -123,14 +118,13 @@ templ CollectionModal(collection CollectionData) {
 						<!-- Emoji Grid -->
 						<div
 							id="icon-grid"
-							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg"
-							style="background-color: var(--bg-primary); border-color: var(--border);"
+							class="grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border border-line bg-surface"
 						>
 							<!-- Populated dynamically by JavaScript -->
 						</div>
 					</div>
 					<div class="mb-6">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Color</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Color</label>
 						<div class="flex gap-2">
 							<button type="button" @click="selectColor('blue')" class="w-8 h-8 rounded-full color-option bg-blue-500"></button>
 							<button type="button" @click="selectColor('red')" class="w-8 h-8 rounded-full color-option bg-red-500"></button>
@@ -141,8 +135,8 @@ templ CollectionModal(collection CollectionData) {
 						<input type="hidden" name="color" id="collection-color" value="blue"/>
 					</div>
 					<div class="flex justify-end space-x-3">
-						<button type="button" @click="closeCollectionModal()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
-						<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Create Collection</button>
+						<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
+						<button type="submit" class="btn btn-primary">Create Collection</button>
 					</div>
 				</form>
 			}
diff --git a/templates/collection_modal_templ.go b/templates/collection_modal_templ.go
index 0937323..2c1f4d6 100644
--- a/templates/collection_modal_templ.go
+++ b/templates/collection_modal_templ.go
@@ -29,66 +29,74 @@ func CollectionModal(collection CollectionData) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div x-data=\"collections\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/70\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div x-data=\"collections\" class=\"fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if collection.ID != "" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Edit Collection</h2>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<h2 class=\"text-xl font-bold text-content\">Edit Collection</h2>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Create Collection</h2>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<h2 class=\"text-xl font-bold text-content\">Create Collection</h2>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<button type=\"button\" @click=\"closeCollectionModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<button type=\"button\" @click=\"closeCollectionModal()\" class=\"icon-btn\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</button></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if collection.ID != "" {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<form hx-put=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<form hx-put=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.ResolveAttributeValue("/api/collections/" + collection.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 16, Col: 49}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 18, Col: 49}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" hx-redirect=\"/collections\"><input type=\"hidden\" name=\"id\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" hx-redirect=\"/collections\"><input type=\"hidden\" name=\"id\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.ResolveAttributeValue(collection.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 19, Col: 57}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 21, Col: 57}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Name</label> <input type=\"text\" name=\"name\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Name</label> <input type=\"text\" name=\"name\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.ResolveAttributeValue(collection.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 25, Col: 30}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 27, Col: 30}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"My Reading List\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Description</label> <textarea name=\"description\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"Optional description\" rows=\"3\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "\" required class=\"input\" placeholder=\"My Reading List\"></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Description</label> <textarea name=\"description\" class=\"input\" placeholder=\"Optional description\" rows=\"3\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -101,56 +109,56 @@ func CollectionModal(collection CollectionData) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</textarea></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Icon</label><!-- Search/Text Input --><input type=\"text\" id=\"icon-search\" class=\"w-full px-4 py-2 border rounded-lg mb-2\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"🔍 Search or type emoji...\" maxlength=\"4\" oninput=\"filterIcons(this.value)\" onfocus=\"showAllIcons()\"><!-- Hidden input for form submission --><input type=\"hidden\" name=\"icon\" id=\"collection-icon\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</textarea></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Icon</label><!-- Search/Text Input --><input type=\"text\" id=\"icon-search\" class=\"input mb-2\" placeholder=\"🔍 Search or type emoji...\" maxlength=\"4\" oninput=\"filterIcons(this.value)\" onfocus=\"showAllIcons()\"><!-- Hidden input for form submission --><input type=\"hidden\" name=\"icon\" id=\"collection-icon\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.ResolveAttributeValue(collection.Icon)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 56, Col: 83}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 55, Col: 83}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\"><!-- Emoji Grid --><div id=\"icon-grid\" class=\"grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><!-- Populated dynamically by JavaScript --></div></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Color</label><div class=\"flex gap-2\"><button type=\"button\" @click=\"selectColor('blue')\" class=\"w-8 h-8 rounded-full color-option bg-blue-500\"></button> <button type=\"button\" @click=\"selectColor('red')\" class=\"w-8 h-8 rounded-full color-option bg-red-500\"></button> <button type=\"button\" @click=\"selectColor('yellow')\" class=\"w-8 h-8 rounded-full color-option bg-yellow-500\"></button> <button type=\"button\" @click=\"selectColor('green')\" class=\"w-8 h-8 rounded-full color-option bg-green-500\"></button> <button type=\"button\" @click=\"selectColor('purple')\" class=\"w-8 h-8 rounded-full color-option bg-purple-500\"></button></div><input type=\"hidden\" name=\"color\" id=\"collection-color\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"><!-- Emoji Grid --><div id=\"icon-grid\" class=\"grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border border-line bg-surface\"><!-- Populated dynamically by JavaScript --></div></div><div class=\"mb-6\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Color</label><div class=\"flex gap-2\"><button type=\"button\" @click=\"selectColor('blue')\" class=\"w-8 h-8 rounded-full color-option bg-blue-500\"></button> <button type=\"button\" @click=\"selectColor('red')\" class=\"w-8 h-8 rounded-full color-option bg-red-500\"></button> <button type=\"button\" @click=\"selectColor('yellow')\" class=\"w-8 h-8 rounded-full color-option bg-yellow-500\"></button> <button type=\"button\" @click=\"selectColor('green')\" class=\"w-8 h-8 rounded-full color-option bg-green-500\"></button> <button type=\"button\" @click=\"selectColor('purple')\" class=\"w-8 h-8 rounded-full color-option bg-purple-500\"></button></div><input type=\"hidden\" name=\"color\" id=\"collection-color\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.ResolveAttributeValue(collection.Color)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 75, Col: 86}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 73, Col: 86}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"closeCollectionModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Update Collection</button></div></form>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"closeCollectionModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Update Collection</button></div></form>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<form hx-post=\"/api/collections\" hx-redirect=\"/collections\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Name</label> <input type=\"text\" name=\"name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"My Reading List\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Description</label> <textarea name=\"description\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"Optional description\" rows=\"3\"></textarea></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Icon</label><!-- Search/Text Input --><input type=\"text\" id=\"icon-search\" class=\"w-full px-4 py-2 border rounded-lg mb-2\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"🔍 Search or type emoji...\" maxlength=\"4\" oninput=\"filterIcons(this.value)\" onfocus=\"showAllIcons()\"><!-- Hidden input for form submission --><input type=\"hidden\" name=\"icon\" id=\"collection-icon\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<form hx-post=\"/api/collections\" hx-redirect=\"/collections\"><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Name</label> <input type=\"text\" name=\"name\" required class=\"input\" placeholder=\"My Reading List\"></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Description</label> <textarea name=\"description\" class=\"input\" placeholder=\"Optional description\" rows=\"3\"></textarea></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Icon</label><!-- Search/Text Input --><input type=\"text\" id=\"icon-search\" class=\"input mb-2\" placeholder=\"🔍 Search or type emoji...\" maxlength=\"4\" oninput=\"filterIcons(this.value)\" onfocus=\"showAllIcons()\"><!-- Hidden input for form submission --><input type=\"hidden\" name=\"icon\" id=\"collection-icon\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.ResolveAttributeValue(collection.Icon)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 122, Col: 83}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_modal.templ`, Line: 117, Col: 83}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"><!-- Emoji Grid --><div id=\"icon-grid\" class=\"grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 border rounded-lg\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><!-- Populated dynamically by JavaScript --></div></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Color</label><div class=\"flex gap-2\"><button type=\"button\" @click=\"selectColor('blue')\" class=\"w-8 h-8 rounded-full color-option bg-blue-500\"></button> <button type=\"button\" @click=\"selectColor('red')\" class=\"w-8 h-8 rounded-full color-option bg-red-500\"></button> <button type=\"button\" @click=\"selectColor('yellow')\" class=\"w-8 h-8 rounded-full color-option bg-yellow-500\"></button> <button type=\"button\" @click=\"selectColor('green')\" class=\"w-8 h-8 rounded-full color-option bg-green-500\"></button> <button type=\"button\" @click=\"selectColor('purple')\" class=\"w-8 h-8 rounded-full color-option bg-purple-500\"></button></div><input type=\"hidden\" name=\"color\" id=\"collection-color\" value=\"blue\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"closeCollectionModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Create Collection</button></div></form>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"><!-- Emoji Grid --><div id=\"icon-grid\" class=\"grid grid-cols-8 gap-1 max-h-32 overflow-y-auto p-2 rounded-lg border border-line bg-surface\"><!-- Populated dynamically by JavaScript --></div></div><div class=\"mb-6\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Color</label><div class=\"flex gap-2\"><button type=\"button\" @click=\"selectColor('blue')\" class=\"w-8 h-8 rounded-full color-option bg-blue-500\"></button> <button type=\"button\" @click=\"selectColor('red')\" class=\"w-8 h-8 rounded-full color-option bg-red-500\"></button> <button type=\"button\" @click=\"selectColor('yellow')\" class=\"w-8 h-8 rounded-full color-option bg-yellow-500\"></button> <button type=\"button\" @click=\"selectColor('green')\" class=\"w-8 h-8 rounded-full color-option bg-green-500\"></button> <button type=\"button\" @click=\"selectColor('purple')\" class=\"w-8 h-8 rounded-full color-option bg-purple-500\"></button></div><input type=\"hidden\" name=\"color\" id=\"collection-color\" value=\"blue\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"closeCollectionModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Create Collection</button></div></form>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/collection_rules.templ b/templates/collection_rules.templ
index 3570edb..782a76b 100644
--- a/templates/collection_rules.templ
+++ b/templates/collection_rules.templ
@@ -14,39 +14,41 @@ templ CollectionRules(user User, collection CollectionData) {
 			@Header(user, "/collections")
 			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 				<div class="mb-6">
-					<button @click="backToCollection()" class="btn-secondary px-4 py-2 rounded-lg mb-4">
-						← Back to Collection
+					<button @click="backToCollection()" class="btn btn-secondary mb-4">
+						@Icon("arrow-left", "h-4 w-4")
+						Back to Collection
 					</button>
 					<div class="flex items-center gap-4">
 						<div class="text-4xl" style="color: { collection.Color }">{ collection.Icon }</div>
 						<div>
-							<h1 class="text-3xl font-bold" style="color: var(--text-primary)">{ collection.Name }</h1>
-							<p style="color: var(--text-secondary)">Auto-Assign Rules</p>
+							<h1 class="text-2xl font-bold tracking-tight text-content">{ collection.Name }</h1>
+							<p class="text-content-muted">Auto-Assign Rules</p>
 						</div>
 					</div>
 				</div>
 				<div class="mb-8">
-					<h2 class="text-2xl font-bold mb-4" style="color: var(--text-primary)">Existing Rules</h2>
+					<h2 class="text-2xl font-bold tracking-tight text-content mb-4">Existing Rules</h2>
 					<div id="rules-container" class="space-y-4">
-						<div id="no-rules" class="card p-6 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<div class="text-4xl mb-2">📋</div>
-							<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">No Rules Yet</h3>
-							<p style="color: var(--text-secondary)">Create auto-assign rules to automatically add books to this collection</p>
+						<div id="no-rules" class="card p-6 text-center">
+							<div class="mb-2 flex justify-center">
+								@Icon("list", "h-10 w-10 text-content-muted")
+							</div>
+							<h3 class="text-lg font-semibold mb-2 text-content">No Rules Yet</h3>
+							<p class="text-content-muted">Create auto-assign rules to automatically add books to this collection</p>
 						</div>
 					</div>
 				</div>
 				<div class="mb-8">
-					<h2 class="text-2xl font-bold mb-4" style="color: var(--text-primary)">Create New Rule</h2>
+					<h2 class="text-2xl font-bold tracking-tight text-content mb-4">Create New Rule</h2>
 					<form id="rule-form" @submit="handleCreateRule($event)">
 						<input type="hidden" id="collection-id" value="{ collection.ID }"/>
 						<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 							<div>
-								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Field</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Field</label>
 								<select
 									id="rule-field"
 									required
-									class="w-full px-4 py-2 border rounded-lg"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input"
 								>
 									<option value="">Select field...</option>
 									<option value="genre">Genre</option>
@@ -59,12 +61,11 @@ templ CollectionRules(user User, collection CollectionData) {
 								</select>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Operator</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Operator</label>
 								<select
 									id="rule-operator"
 									required
-									class="w-full px-4 py-2 border rounded-lg"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input"
 								>
 									<option value="">Select operator...</option>
 									<option value="equals">equals</option>
@@ -79,13 +80,12 @@ templ CollectionRules(user User, collection CollectionData) {
 							</div>
 						</div>
 						<div class="mb-6">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Value</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Value</label>
 							<input
 								type="text"
 								id="rule-value"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 								placeholder="e.g., Science Fiction"
 							/>
 						</div>
@@ -97,16 +97,16 @@ templ CollectionRules(user User, collection CollectionData) {
 									checked
 									class="w-5 h-5 rounded"
 								/>
-								<span style="color: var(--text-primary)">Enable Rule</span>
+								<span class="text-content">Enable Rule</span>
 							</label>
-							<p class="text-xs mt-1" style="color: var(--text-secondary)">Uncheck to disable without deleting</p>
+							<p class="text-xs mt-1 text-content-muted">Uncheck to disable without deleting</p>
 						</div>
 						<div class="mb-6">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Priority</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Priority</label>
 							<div class="flex gap-4">
 								<label class="flex items-center space-x-2 cursor-pointer">
 									<input type="radio" name="priority" value="1" class="w-4 h-4"/>
-									<span style="color: var(--text-primary)">High</span>
+									<span class="text-content">High</span>
 								</label>
 								<label class="flex items-center space-x-2 cursor-pointer">
 									<input
@@ -116,7 +116,7 @@ templ CollectionRules(user User, collection CollectionData) {
 										checked
 										class="w-4 h-4"
 									/>
-									<span style="color: var(--text-primary)">Medium</span>
+									<span class="text-content">Medium</span>
 								</label>
 								<label class="flex items-center space-x-2 cursor-pointer">
 									<input
@@ -125,36 +125,38 @@ templ CollectionRules(user User, collection CollectionData) {
 										value="3"
 										class="w-4 h-4"
 									/>
-									<span style="color: var(--text-primary)">Low</span>
+									<span class="text-content">Low</span>
 								</label>
 							</div>
 						</div>
 						<div class="flex justify-end space-x-3">
-							<button type="button" @click="testRule()" class="btn-secondary px-4 py-2 rounded-lg">
-								🧪 Test Rule
+							<button type="button" @click="testRule()" class="btn btn-secondary">
+								@Icon("play", "h-4 w-4")
+								Test Rule
 							</button>
-							<button type="button" @click="clearForm()" class="btn-secondary px-4 py-2 rounded-lg">
+							<button type="button" @click="clearForm()" class="btn btn-secondary">
 								Clear
 							</button>
-							<button type="submit" class="btn-primary px-4 py-2 rounded-lg">
-								➕ Add Rule
+							<button type="submit" class="btn btn-primary">
+								@Icon("plus", "h-4 w-4")
+								Add Rule
 							</button>
 						</div>
 					</form>
-					<div id="test-results" class="hidden card p-6 rounded-lg border mb-6" style="background-color: var(--bg-primary); border-color: var(--border);">
-						<h3 class="font-semibold mb-3" style="color: var(--text-primary)">Rule Test Results</h3>
-						<p class="text-sm mb-2" style="color: var(--text-secondary)">Books that would be added by this rule:</p>
+					<div id="test-results" class="hidden card p-6 mb-6">
+						<h3 class="font-semibold mb-3 text-content">Rule Test Results</h3>
+						<p class="text-sm mb-2 text-content-muted">Books that would be added by this rule:</p>
 						<div id="test-results-list" class="max-h-64 overflow-y-auto space-y-2"></div>
 					</div>
 				</div>
-				<div class="card p-6 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border);">
-					<h2 class="text-xl font-bold mb-4" style="color: var(--text-primary)">Rule Examples</h2>
+				<div class="card p-6">
+					<h2 class="text-xl font-bold mb-4 text-content">Rule Examples</h2>
 					<div class="space-y-4">
 						<div class="flex items-start gap-4">
-							<div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold" style="background-color: var(--accent);">1</div>
+							<div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold bg-brand text-surface">1</div>
 							<div>
-								<p class="font-medium" style="color: var(--text-primary)">Add all Science Fiction books</p>
-								<code class="block mt-1 text-sm" style="color: var(--text-secondary); background-color: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;">
+								<p class="font-medium text-content">Add all Science Fiction books</p>
+								<code class="block mt-1 text-sm text-content-muted bg-surface-raised px-2 py-1 rounded">
 									Field: genre
 									<br/>
 									Operator: equals
@@ -164,10 +166,10 @@ templ CollectionRules(user User, collection CollectionData) {
 							</div>
 						</div>
 						<div class="flex items-start gap-4">
-							<div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold" style="background-color: var(--accent);">2</div>
+							<div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold bg-brand text-surface">2</div>
 							<div>
-								<p class="font-medium" style="color: var(--text-primary)">Add books from a specific series</p>
-								<code class="block mt-1 text-sm" style="color: var(--text-secondary); background-color: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;">
+								<p class="font-medium text-content">Add books from a specific series</p>
+								<code class="block mt-1 text-sm text-content-muted bg-surface-raised px-2 py-1 rounded">
 									Field: series
 									<br/>
 									Operator: starts with
@@ -177,10 +179,10 @@ templ CollectionRules(user User, collection CollectionData) {
 							</div>
 						</div>
 						<div class="flex items-start gap-4">
-							<div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold" style="background-color: var(--accent);">3</div>
+							<div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold bg-brand text-surface">3</div>
 							<div>
-								<p class="font-medium" style="color: var(--text-primary)">Add books published in a year range</p>
-								<code class="block mt-1 text-sm" style="color: var(--text-secondary); background-color: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;">
+								<p class="font-medium text-content">Add books published in a year range</p>
+								<code class="block mt-1 text-sm text-content-muted bg-surface-raised px-2 py-1 rounded">
 									Field: copyright_year
 									<br/>
 									Operator: greater than
diff --git a/templates/collection_rules_templ.go b/templates/collection_rules_templ.go
index 55c2272..e20814e 100644
--- a/templates/collection_rules_templ.go
+++ b/templates/collection_rules_templ.go
@@ -50,33 +50,65 @@ func CollectionRules(user User, collection CollectionData) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-6\"><button @click=\"backToCollection()\" class=\"btn-secondary px-4 py-2 rounded-lg mb-4\">← Back to Collection</button><div class=\"flex items-center gap-4\"><div class=\"text-4xl\" style=\"color: { collection.Color }\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-6\"><button @click=\"backToCollection()\" class=\"btn btn-secondary mb-4\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("arrow-left", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "Back to Collection</button><div class=\"flex items-center gap-4\"><div class=\"text-4xl\" style=\"color: { collection.Color }\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(collection.Icon)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 21, Col: 81}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 22, Col: 81}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div><div><h1 class=\"text-3xl font-bold\" style=\"color: var(--text-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div><div><h1 class=\"text-2xl font-bold tracking-tight text-content\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(collection.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 23, Col: 90}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collection_rules.templ`, Line: 24, Col: 83}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</h1><p style=\"color: var(--text-secondary)\">Auto-Assign Rules</p></div></div></div><div class=\"mb-8\"><h2 class=\"text-2xl font-bold mb-4\" style=\"color: var(--text-primary)\">Existing Rules</h2><div id=\"rules-container\" class=\"space-y-4\"><div id=\"no-rules\" class=\"card p-6 rounded-lg border text-center\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"text-4xl mb-2\">📋</div><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-primary)\">No Rules Yet</h3><p style=\"color: var(--text-secondary)\">Create auto-assign rules to automatically add books to this collection</p></div></div></div><div class=\"mb-8\"><h2 class=\"text-2xl font-bold mb-4\" style=\"color: var(--text-primary)\">Create New Rule</h2><form id=\"rule-form\" @submit=\"handleCreateRule($event)\"><input type=\"hidden\" id=\"collection-id\" value=\"{ collection.ID }\"><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\"><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Field</label> <select id=\"rule-field\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select field...</option> <option value=\"genre\">Genre</option> <option value=\"series\">Series</option> <option value=\"author\">Author</option> <option value=\"language\">Language</option> <option value=\"publisher\">Publisher</option> <option value=\"copyright_year\">Copyright Year</option> <option value=\"tags\">Tags</option></select></div><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Operator</label> <select id=\"rule-operator\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select operator...</option> <option value=\"equals\">equals</option> <option value=\"not_equals\">does not equal</option> <option value=\"contains\">contains</option> <option value=\"not_contains\">does not contain</option> <option value=\"starts_with\">starts with</option> <option value=\"ends_with\">ends with</option> <option value=\"greater_than\">greater than</option> <option value=\"less_than\">less than</option></select></div></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Value</label> <input type=\"text\" id=\"rule-value\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"e.g., Science Fiction\"></div><div class=\"mb-6\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"rule-enabled\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Enable Rule</span></label><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary)\">Uncheck to disable without deleting</p></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Priority</label><div class=\"flex gap-4\"><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"priority\" value=\"1\" class=\"w-4 h-4\"> <span style=\"color: var(--text-primary)\">High</span></label> <label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"priority\" value=\"2\" checked class=\"w-4 h-4\"> <span style=\"color: var(--text-primary)\">Medium</span></label> <label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"priority\" value=\"3\" class=\"w-4 h-4\"> <span style=\"color: var(--text-primary)\">Low</span></label></div></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"testRule()\" class=\"btn-secondary px-4 py-2 rounded-lg\">🧪 Test Rule</button> <button type=\"button\" @click=\"clearForm()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Clear</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">➕ Add Rule</button></div></form><div id=\"test-results\" class=\"hidden card p-6 rounded-lg border mb-6\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><h3 class=\"font-semibold mb-3\" style=\"color: var(--text-primary)\">Rule Test Results</h3><p class=\"text-sm mb-2\" style=\"color: var(--text-secondary)\">Books that would be added by this rule:</p><div id=\"test-results-list\" class=\"max-h-64 overflow-y-auto space-y-2\"></div></div></div><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><h2 class=\"text-xl font-bold mb-4\" style=\"color: var(--text-primary)\">Rule Examples</h2><div class=\"space-y-4\"><div class=\"flex items-start gap-4\"><div class=\"flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold\" style=\"background-color: var(--accent);\">1</div><div><p class=\"font-medium\" style=\"color: var(--text-primary)\">Add all Science Fiction books</p><code class=\"block mt-1 text-sm\" style=\"color: var(--text-secondary); background-color: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;\">Field: genre<br>Operator: equals<br>Value: Science Fiction</code></div></div><div class=\"flex items-start gap-4\"><div class=\"flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold\" style=\"background-color: var(--accent);\">2</div><div><p class=\"font-medium\" style=\"color: var(--text-primary)\">Add books from a specific series</p><code class=\"block mt-1 text-sm\" style=\"color: var(--text-secondary); background-color: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;\">Field: series<br>Operator: starts with<br>Value: Harry Potter</code></div></div><div class=\"flex items-start gap-4\"><div class=\"flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold\" style=\"background-color: var(--accent);\">3</div><div><p class=\"font-medium\" style=\"color: var(--text-primary)\">Add books published in a year range</p><code class=\"block mt-1 text-sm\" style=\"color: var(--text-secondary); background-color: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;\">Field: copyright_year<br>Operator: greater than<br>Value: 2020</code></div></div></div></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</h1><p class=\"text-content-muted\">Auto-Assign Rules</p></div></div></div><div class=\"mb-8\"><h2 class=\"text-2xl font-bold tracking-tight text-content mb-4\">Existing Rules</h2><div id=\"rules-container\" class=\"space-y-4\"><div id=\"no-rules\" class=\"card p-6 text-center\"><div class=\"mb-2 flex justify-center\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("list", "h-10 w-10 text-content-muted").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div><h3 class=\"text-lg font-semibold mb-2 text-content\">No Rules Yet</h3><p class=\"text-content-muted\">Create auto-assign rules to automatically add books to this collection</p></div></div></div><div class=\"mb-8\"><h2 class=\"text-2xl font-bold tracking-tight text-content mb-4\">Create New Rule</h2><form id=\"rule-form\" @submit=\"handleCreateRule($event)\"><input type=\"hidden\" id=\"collection-id\" value=\"{ collection.ID }\"><div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-6\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Field</label> <select id=\"rule-field\" required class=\"input\"><option value=\"\">Select field...</option> <option value=\"genre\">Genre</option> <option value=\"series\">Series</option> <option value=\"author\">Author</option> <option value=\"language\">Language</option> <option value=\"publisher\">Publisher</option> <option value=\"copyright_year\">Copyright Year</option> <option value=\"tags\">Tags</option></select></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Operator</label> <select id=\"rule-operator\" required class=\"input\"><option value=\"\">Select operator...</option> <option value=\"equals\">equals</option> <option value=\"not_equals\">does not equal</option> <option value=\"contains\">contains</option> <option value=\"not_contains\">does not contain</option> <option value=\"starts_with\">starts with</option> <option value=\"ends_with\">ends with</option> <option value=\"greater_than\">greater than</option> <option value=\"less_than\">less than</option></select></div></div><div class=\"mb-6\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Value</label> <input type=\"text\" id=\"rule-value\" required class=\"input\" placeholder=\"e.g., Science Fiction\"></div><div class=\"mb-6\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"rule-enabled\" checked class=\"w-5 h-5 rounded\"> <span class=\"text-content\">Enable Rule</span></label><p class=\"text-xs mt-1 text-content-muted\">Uncheck to disable without deleting</p></div><div class=\"mb-6\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Priority</label><div class=\"flex gap-4\"><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"priority\" value=\"1\" class=\"w-4 h-4\"> <span class=\"text-content\">High</span></label> <label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"priority\" value=\"2\" checked class=\"w-4 h-4\"> <span class=\"text-content\">Medium</span></label> <label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"radio\" name=\"priority\" value=\"3\" class=\"w-4 h-4\"> <span class=\"text-content\">Low</span></label></div></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"testRule()\" class=\"btn btn-secondary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("play", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "Test Rule</button> <button type=\"button\" @click=\"clearForm()\" class=\"btn btn-secondary\">Clear</button> <button type=\"submit\" class=\"btn btn-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("plus", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "Add Rule</button></div></form><div id=\"test-results\" class=\"hidden card p-6 mb-6\"><h3 class=\"font-semibold mb-3 text-content\">Rule Test Results</h3><p class=\"text-sm mb-2 text-content-muted\">Books that would be added by this rule:</p><div id=\"test-results-list\" class=\"max-h-64 overflow-y-auto space-y-2\"></div></div></div><div class=\"card p-6\"><h2 class=\"text-xl font-bold mb-4 text-content\">Rule Examples</h2><div class=\"space-y-4\"><div class=\"flex items-start gap-4\"><div class=\"flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold bg-brand text-surface\">1</div><div><p class=\"font-medium text-content\">Add all Science Fiction books</p><code class=\"block mt-1 text-sm text-content-muted bg-surface-raised px-2 py-1 rounded\">Field: genre<br>Operator: equals<br>Value: Science Fiction</code></div></div><div class=\"flex items-start gap-4\"><div class=\"flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold bg-brand text-surface\">2</div><div><p class=\"font-medium text-content\">Add books from a specific series</p><code class=\"block mt-1 text-sm text-content-muted bg-surface-raised px-2 py-1 rounded\">Field: series<br>Operator: starts with<br>Value: Harry Potter</code></div></div><div class=\"flex items-start gap-4\"><div class=\"flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold bg-brand text-surface\">3</div><div><p class=\"font-medium text-content\">Add books published in a year range</p><code class=\"block mt-1 text-sm text-content-muted bg-surface-raised px-2 py-1 rounded\">Field: copyright_year<br>Operator: greater than<br>Value: 2020</code></div></div></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/conflicts.templ b/templates/conflicts.templ
index 1eb1b67..dfe504e 100644
--- a/templates/conflicts.templ
+++ b/templates/conflicts.templ
@@ -18,81 +18,85 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
 				<div class="mb-8">
 					<div class="flex justify-between items-center">
 						<div>
-							<h1 class="text-3xl font-bold" style="color: var(--text-primary)">Sync Conflicts</h1>
-							<p style="color: var(--text-secondary)">Resolve conflicts when reading progress differs across devices</p>
+							<h1 class="text-2xl font-bold tracking-tight text-content">Sync Conflicts</h1>
+							<p class="text-content-muted">Resolve conflicts when reading progress differs across devices</p>
 						</div>
 						<div class="flex space-x-3">
 							<select
 								id="status-filter"
 								onchange="filterConflicts()"
-								class="px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border);"
+								class="input w-auto"
 							>
 								<option value="unresolved">Unresolved Only</option>
 								<option value="all">All Conflicts</option>
 								<option value="resolved">Resolved Only</option>
 							</select>
-							<button @click="dismissAllResolved()" class="btn-secondary px-4 py-2 rounded-lg">
+							<button @click="dismissAllResolved()" class="btn btn-secondary">
 								Dismiss All Resolved
 							</button>
 						</div>
 					</div>
 					<div id="stats-bar" class="mt-4 flex space-x-6 text-sm">
-						<span style="color: var(--text-secondary)">Total: <strong style="color: var(--text-primary)">{ total }</strong></span>
-						<span style="color: var(--text-secondary)">Unresolved: <strong style="color: #f59e0b;">{ unresolved }</strong></span>
-						<span style="color: var(--text-secondary)">Resolved: <strong style="color: #10b981;">{ total - unresolved }</strong></span>
+						<span class="text-content-muted">Total: <strong class="text-content">{ total }</strong></span>
+						<span class="text-content-muted">Unresolved: <strong class="text-warning">{ unresolved }</strong></span>
+						<span class="text-content-muted">Resolved: <strong class="text-success">{ total - unresolved }</strong></span>
 					</div>
 					<div id="bulk-actions" class="mt-4 hidden">
-						<div class="flex items-center justify-between p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+						<div class="card p-4 flex items-center justify-between">
 							<div class="flex items-center space-x-4">
-								<span class="text-sm font-semibold" style="color: var(--text-primary);">
+								<span class="text-sm font-semibold text-content">
 									<span id="selected-count">0</span> conflicts selected
 								</span>
 								<select
 									id="bulk-strategy"
-									class="px-3 py-2 border rounded-lg text-sm"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input w-auto text-sm"
 								>
 									<option value="most_recent">Most Recent</option>
 									<option value="highest_progress">Highest Progress</option>
 								</select>
 							</div>
 							<div class="flex space-x-2">
-								<button @click="bulkResolve()" class="btn-primary px-4 py-2 rounded-lg text-sm">
-									✅ Resolve Selected
+								<button @click="bulkResolve()" class="btn btn-primary text-sm">
+									@Icon("check", "h-4 w-4")
+									Resolve Selected
 								</button>
-								<button @click="bulkDismiss()" class="btn-danger px-4 py-2 rounded-lg text-sm">
-									❌ Dismiss Selected
+								<button @click="bulkDismiss()" class="btn btn-danger text-sm">
+									@Icon("x-circle", "h-4 w-4")
+									Dismiss Selected
 								</button>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div id="loading" class="hidden text-center py-16" style="color: var(--text-secondary)">
+				<div id="loading" class="hidden text-center py-16 text-content-muted">
 					<div class="loading-spinner mx-auto mb-4"></div>
 					<p>Loading conflicts...</p>
 				</div>
-				<div id="empty-state" class="hidden text-center py-16" style="color: var(--text-secondary)">
-					<div class="text-6xl mb-4">✅</div>
-					<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Conflicts</h3>
+				<div id="empty-state" class="hidden text-center py-16 text-content-muted">
+					<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-success">
+						@Icon("check-circle", "h-7 w-7")
+					</div>
+					<h3 class="text-xl font-semibold mb-2 text-content">No Conflicts</h3>
 					<p>Your devices are in sync! No conflicts to resolve.</p>
 				</div>
 				<div id="conflicts-list" class="space-y-6">
 					<div id="select-all-container" class="mb-4 hidden">
 						<label class="flex items-center space-x-2 cursor-pointer">
 							<input type="checkbox" id="select-all-conflicts" class="w-5 h-5 rounded" onchange="toggleAllConflicts()"/>
-							<span class="text-sm font-semibold" style="color: var(--text-primary);">Select All</span>
+							<span class="text-sm font-semibold text-content">Select All</span>
 						</label>
 					</div>
 					if len(conflicts) == 0 {
-						<div class="text-center py-16" style="color: var(--text-secondary)">
-							<div class="text-6xl mb-4">✅</div>
-							<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Conflicts</h3>
+						<div class="text-center py-16 text-content-muted">
+							<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-success">
+								@Icon("check-circle", "h-7 w-7")
+							</div>
+							<h3 class="text-xl font-semibold mb-2 text-content">No Conflicts</h3>
 							<p>Your devices are in sync! No conflicts to resolve.</p>
 						</div>
 					}
 					for _, conflict := range conflicts {
-						<div class="conflict-item card p-6 rounded-lg border" data-conflict-id="{ conflict.ID }" style="background-color: var(--bg-secondary); border-color: var(--border); border-left-width: 4px; border-left-style: solid; border-left-color: rgb(245, 158, 11);">
+						<div class="conflict-item card p-6 border-l-4 border-l-warning" data-conflict-id="{ conflict.ID }">
 							<div class="flex justify-between items-start mb-4">
 								<div class="flex items-start space-x-4">
 									<input
@@ -102,15 +106,15 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
 										onchange="updateBulkActions()"
 									/>
 									<div>
-										<h3 class="text-lg font-semibold" style="color: var(--text-primary)">{ conflict.MediaItemTitle }</h3>
-										<p class="text-sm" style="color: var(--text-secondary)">Type: { conflict.ConflictType }</p>
+										<h3 class="text-lg font-semibold text-content">{ conflict.MediaItemTitle }</h3>
+										<p class="text-sm text-content-muted">Type: { conflict.ConflictType }</p>
 									</div>
 								</div>
-								<button @click="showResolveModal('{ conflict.ID }')" class="btn-primary px-4 py-2 rounded-lg">
+								<button @click="showResolveModal('{ conflict.ID }')" class="btn btn-primary">
 									Resolve
 								</button>
 							</div>
-							<div class="text-sm" style="color: var(--text-secondary)">
+							<div class="text-sm text-content-muted">
 								Created: { FormatInTimezone(conflict.CreatedAt, user.Timezone) }
 								if conflict.ResolvedBy != "" {
 									| Resolved by: { conflict.ResolvedBy }
@@ -119,94 +123,90 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
 						</div>
 					}
 				</div>
-				<div id="conflict-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="background-color: rgba(0, 0, 0, 0.7);">
-					<div class="card rounded-lg p-6 w-full max-w-4xl mx-4 my-8" style="background-color: var(--bg-secondary); border-color: var(--border);">
+				<div id="conflict-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="background-color: var(--surface-overlay);">
+					<div class="card p-6 w-full max-w-4xl mx-4 my-8">
 						<div class="flex justify-between items-center mb-6">
 							<div>
-								<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Resolve Conflict</h2>
-								<p class="text-sm" id="conflict-book-title" style="color: var(--text-secondary);">Book Title</p>
+								<h2 class="text-2xl font-bold tracking-tight text-content">Resolve Conflict</h2>
+								<p id="conflict-book-title" class="text-sm text-content-muted">Book Title</p>
 							</div>
-							<button @click="hideResolveModal()" class="p-2 hover:opacity-80 rounded-lg" style="color: var(--text-primary); background-color: var(--bg-primary);">
-								X
+							<button @click="hideResolveModal()" class="icon-btn" aria-label="Close">
+								@Icon("close", "h-5 w-5")
 							</button>
 						</div>
 						<form id="conflict-resolution-form" @submit="handleResolveSubmit($event)">
 							<input type="hidden" id="conflict-id"/>
 							<div id="conflict-details" class="mb-6"></div>
-							<div class="card p-4 rounded-lg border mb-6" style="background-color: var(--bg-primary); border-color: var(--border);">
-								<h3 class="font-semibold mb-4" style="color: var(--text-primary)">Resolution Options</h3>
+							<div class="card p-4 mb-6 bg-surface">
+								<h3 class="font-semibold mb-4 text-content">Resolution Options</h3>
 								<div class="space-y-3 mb-6">
-									<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80" style="border-color: var(--border);">
+									<label class="flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover">
 										<input type="radio" name="winner" value="koreader" class="mr-3" required/>
 										<div class="flex-1">
-											<span class="font-semibold" style="color: var(--text-primary);">Keep KOReader Progress</span>
-											<p class="text-xs" style="color: var(--text-secondary);">Use progress from your KOReader device</p>
+											<span class="font-semibold text-content">Keep KOReader Progress</span>
+											<p class="text-xs text-content-muted">Use progress from your KOReader device</p>
 										</div>
 									</label>
-									<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80" style="border-color: var(--border);">
+									<label class="flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover">
 										<input type="radio" name="winner" value="kobo" class="mr-3"/>
 										<div class="flex-1">
-											<span class="font-semibold" style="color: var(--text-primary);">Keep Kobo Progress</span>
-											<p class="text-xs" style="color: var(--text-secondary);">Use progress from your Kobo device</p>
+											<span class="font-semibold text-content">Keep Kobo Progress</span>
+											<p class="text-xs text-content-muted">Use progress from your Kobo device</p>
 										</div>
 									</label>
-									<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80" style="border-color: var(--border);">
+									<label class="flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover">
 										<input type="radio" name="winner" value="web" class="mr-3"/>
 										<div class="flex-1">
-											<span class="font-semibold" style="color: var(--text-primary);">Keep Web Progress</span>
-											<p class="text-xs" style="color: var(--text-secondary);">Use progress from the web interface</p>
+											<span class="font-semibold text-content">Keep Web Progress</span>
+											<p class="text-xs text-content-muted">Use progress from the web interface</p>
 										</div>
 									</label>
-									<label class="flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80" style="border-color: var(--border);">
+									<label class="flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover">
 										<input type="radio" name="winner" value="manual" class="mr-3"/>
 										<div class="flex-1">
-											<span class="font-semibold" style="color: var(--text-primary);">Manual Override</span>
-											<p class="text-xs" style="color: var(--text-secondary);">Specify a custom progress value</p>
+											<span class="font-semibold text-content">Manual Override</span>
+											<p class="text-xs text-content-muted">Specify a custom progress value</p>
 										</div>
 									</label>
 								</div>
-								<div id="manual-override" class="hidden mb-4 p-4 border rounded-lg" style="background-color: var(--bg-secondary); border-color: var(--border);">
-									<h4 class="font-semibold mb-3" style="color: var(--text-primary);">Manual Progress</h4>
+								<div id="manual-override" class="hidden mb-4 p-4 border border-line rounded-lg bg-surface-raised">
+									<h4 class="font-semibold mb-3 text-content">Manual Progress</h4>
 									<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 										<div>
-											<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary);">Percentage (0-100)</label>
+											<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Percentage (0-100)</label>
 											<input
 												type="number"
 												id="manual-percentage"
 												min="0"
 												max="100"
 												step="0.01"
-												class="w-full px-4 py-2 border rounded-lg"
-												style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+												class="input"
 											/>
 										</div>
 										<div>
-											<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary);">Page Number</label>
+											<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Page Number</label>
 											<input
 												type="number"
 												id="manual-page"
 												min="1"
-												class="w-full px-4 py-2 border rounded-lg"
-												style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+												class="input"
 											/>
 										</div>
 										<div>
-											<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary);">EPUB CFI</label>
+											<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">EPUB CFI</label>
 											<input
 												type="text"
 												id="manual-epubcfi"
-												class="w-full px-4 py-2 border rounded-lg"
-												style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+												class="input"
 											/>
 										</div>
 										<div>
-											<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary);">Chapter</label>
+											<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Chapter</label>
 											<input
 												type="number"
 												id="manual-chapter"
 												min="1"
-												class="w-full px-4 py-2 border rounded-lg"
-												style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+												class="input"
 											/>
 										</div>
 									</div>
@@ -214,24 +214,23 @@ templ Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total in
 								<div class="mb-6">
 									<label class="flex items-center space-x-3 cursor-pointer">
 										<input type="checkbox" id="apply-to-all" class="w-5 h-5 rounded"/>
-										<span style="color: var(--text-primary);">Apply this resolution to all future conflicts</span>
+										<span class="text-content">Apply this resolution to all future conflicts</span>
 									</label>
 								</div>
 								<div class="mb-6">
-									<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary);">Resolution Reason (optional)</label>
+									<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Resolution Reason (optional)</label>
 									<input
 										type="text"
 										id="resolution-reason"
-										class="w-full px-4 py-2 border rounded-lg"
-										style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+										class="input"
 										placeholder="e.g., Device was offline, using most recent progress"
 									/>
 								</div>
 							</div>
 							<div class="flex justify-end space-x-3">
-								<button type="button" @click="hideResolveModal()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
-								<button type="button" @click="deleteConflict()" class="btn-danger px-4 py-2 rounded-lg">Dismiss</button>
-								<button type="submit" class="btn-primary px-6 py-2 rounded-lg">Resolve Conflict</button>
+								<button type="button" @click="hideResolveModal()" class="btn btn-secondary">Cancel</button>
+								<button type="button" @click="deleteConflict()" class="btn btn-danger">Dismiss</button>
+								<button type="submit" class="btn btn-primary">Resolve Conflict</button>
 							</div>
 						</form>
 					</div>
diff --git a/templates/conflicts_templ.go b/templates/conflicts_templ.go
index f0c2f81..ecc9bc2 100644
--- a/templates/conflicts_templ.go
+++ b/templates/conflicts_templ.go
@@ -39,120 +39,160 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><div class=\"flex justify-between items-center\"><div><h1 class=\"text-3xl font-bold\" style=\"color: var(--text-primary)\">Sync Conflicts</h1><p style=\"color: var(--text-secondary)\">Resolve conflicts when reading progress differs across devices</p></div><div class=\"flex space-x-3\"><select id=\"status-filter\" onchange=\"filterConflicts()\" class=\"px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border);\"><option value=\"unresolved\">Unresolved Only</option> <option value=\"all\">All Conflicts</option> <option value=\"resolved\">Resolved Only</option></select> <button @click=\"dismissAllResolved()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Dismiss All Resolved</button></div></div><div id=\"stats-bar\" class=\"mt-4 flex space-x-6 text-sm\"><span style=\"color: var(--text-secondary)\">Total: <strong style=\"color: var(--text-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><div class=\"flex justify-between items-center\"><div><h1 class=\"text-2xl font-bold tracking-tight text-content\">Sync Conflicts</h1><p class=\"text-content-muted\">Resolve conflicts when reading progress differs across devices</p></div><div class=\"flex space-x-3\"><select id=\"status-filter\" onchange=\"filterConflicts()\" class=\"input w-auto\"><option value=\"unresolved\">Unresolved Only</option> <option value=\"all\">All Conflicts</option> <option value=\"resolved\">Resolved Only</option></select> <button @click=\"dismissAllResolved()\" class=\"btn btn-secondary\">Dismiss All Resolved</button></div></div><div id=\"stats-bar\" class=\"mt-4 flex space-x-6 text-sm\"><span class=\"text-content-muted\">Total: <strong class=\"text-content\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(total)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 41, Col: 106}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 40, Col: 82}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</strong></span> <span style=\"color: var(--text-secondary)\">Unresolved: <strong style=\"color: #f59e0b;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</strong></span> <span class=\"text-content-muted\">Unresolved: <strong class=\"text-warning\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(unresolved)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 42, Col: 105}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 41, Col: 92}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</strong></span> <span style=\"color: var(--text-secondary)\">Resolved: <strong style=\"color: #10b981;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</strong></span> <span class=\"text-content-muted\">Resolved: <strong class=\"text-success\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(total - unresolved)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 43, Col: 111}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 42, Col: 98}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</strong></span></div><div id=\"bulk-actions\" class=\"mt-4 hidden\"><div class=\"flex items-center justify-between p-4 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex items-center space-x-4\"><span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\"><span id=\"selected-count\">0</span> conflicts selected</span> <select id=\"bulk-strategy\" class=\"px-3 py-2 border rounded-lg text-sm\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"most_recent\">Most Recent</option> <option value=\"highest_progress\">Highest Progress</option></select></div><div class=\"flex space-x-2\"><button @click=\"bulkResolve()\" class=\"btn-primary px-4 py-2 rounded-lg text-sm\">✅ Resolve Selected</button> <button @click=\"bulkDismiss()\" class=\"btn-danger px-4 py-2 rounded-lg text-sm\">❌ Dismiss Selected</button></div></div></div></div><div id=\"loading\" class=\"hidden text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading conflicts...</p></div><div id=\"empty-state\" class=\"hidden text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"text-6xl mb-4\">✅</div><h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--text-primary)\">No Conflicts</h3><p>Your devices are in sync! No conflicts to resolve.</p></div><div id=\"conflicts-list\" class=\"space-y-6\"><div id=\"select-all-container\" class=\"mb-4 hidden\"><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"checkbox\" id=\"select-all-conflicts\" class=\"w-5 h-5 rounded\" onchange=\"toggleAllConflicts()\"> <span class=\"text-sm font-semibold\" style=\"color: var(--text-primary);\">Select All</span></label></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</strong></span></div><div id=\"bulk-actions\" class=\"mt-4 hidden\"><div class=\"card p-4 flex items-center justify-between\"><div class=\"flex items-center space-x-4\"><span class=\"text-sm font-semibold text-content\"><span id=\"selected-count\">0</span> conflicts selected</span> <select id=\"bulk-strategy\" class=\"input w-auto text-sm\"><option value=\"most_recent\">Most Recent</option> <option value=\"highest_progress\">Highest Progress</option></select></div><div class=\"flex space-x-2\"><button @click=\"bulkResolve()\" class=\"btn btn-primary text-sm\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("check", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "Resolve Selected</button> <button @click=\"bulkDismiss()\" class=\"btn btn-danger text-sm\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("x-circle", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "Dismiss Selected</button></div></div></div></div><div id=\"loading\" class=\"hidden text-center py-16 text-content-muted\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading conflicts...</p></div><div id=\"empty-state\" class=\"hidden text-center py-16 text-content-muted\"><div class=\"mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-success\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("check-circle", "h-7 w-7").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div><h3 class=\"text-xl font-semibold mb-2 text-content\">No Conflicts</h3><p>Your devices are in sync! No conflicts to resolve.</p></div><div id=\"conflicts-list\" class=\"space-y-6\"><div id=\"select-all-container\" class=\"mb-4 hidden\"><label class=\"flex items-center space-x-2 cursor-pointer\"><input type=\"checkbox\" id=\"select-all-conflicts\" class=\"w-5 h-5 rounded\" onchange=\"toggleAllConflicts()\"> <span class=\"text-sm font-semibold text-content\">Select All</span></label></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(conflicts) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"text-6xl mb-4\">✅</div><h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--text-primary)\">No Conflicts</h3><p>Your devices are in sync! No conflicts to resolve.</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"text-center py-16 text-content-muted\"><div class=\"mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-success\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("check-circle", "h-7 w-7").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div><h3 class=\"text-xl font-semibold mb-2 text-content\">No Conflicts</h3><p>Your devices are in sync! No conflicts to resolve.</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
 		for _, conflict := range conflicts {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"conflict-item card p-6 rounded-lg border\" data-conflict-id=\"{ conflict.ID }\" style=\"background-color: var(--bg-secondary); border-color: var(--border); border-left-width: 4px; border-left-style: solid; border-left-color: rgb(245, 158, 11);\"><div class=\"flex justify-between items-start mb-4\"><div class=\"flex items-start space-x-4\"><input type=\"checkbox\" class=\"conflict-checkbox w-5 h-5 rounded mt-1\" data-conflict-id=\"{ conflict.ID }\" onchange=\"updateBulkActions()\"><div><h3 class=\"text-lg font-semibold\" style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"conflict-item card p-6 border-l-4 border-l-warning\" data-conflict-id=\"{ conflict.ID }\"><div class=\"flex justify-between items-start mb-4\"><div class=\"flex items-start space-x-4\"><input type=\"checkbox\" class=\"conflict-checkbox w-5 h-5 rounded mt-1\" data-conflict-id=\"{ conflict.ID }\" onchange=\"updateBulkActions()\"><div><h3 class=\"text-lg font-semibold text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.MediaItemTitle)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 105, Col: 104}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 109, Col: 82}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</h3><p class=\"text-sm\" style=\"color: var(--text-secondary)\">Type: ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</h3><p class=\"text-sm text-content-muted\">Type: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.ConflictType)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 106, Col: 95}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 110, Col: 77}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</p></div></div><button @click=\"showResolveModal('{ conflict.ID }')\" class=\"btn-primary px-4 py-2 rounded-lg\">Resolve</button></div><div class=\"text-sm\" style=\"color: var(--text-secondary)\">Created: ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</p></div></div><button @click=\"showResolveModal('{ conflict.ID }')\" class=\"btn btn-primary\">Resolve</button></div><div class=\"text-sm text-content-muted\">Created: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(FormatInTimezone(conflict.CreatedAt, user.Timezone))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 114, Col: 70}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 118, Col: 70}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if conflict.ResolvedBy != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "| Resolved by: ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "| Resolved by: ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.ResolvedBy)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 116, Col: 45}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 120, Col: 45}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div><div id=\"conflict-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-4xl mx-4 my-8\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><div><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Resolve Conflict</h2><p class=\"text-sm\" id=\"conflict-book-title\" style=\"color: var(--text-secondary);\">Book Title</p></div><button @click=\"hideResolveModal()\" class=\"p-2 hover:opacity-80 rounded-lg\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\">X</button></div><form id=\"conflict-resolution-form\" @submit=\"handleResolveSubmit($event)\"><input type=\"hidden\" id=\"conflict-id\"><div id=\"conflict-details\" class=\"mb-6\"></div><div class=\"card p-4 rounded-lg border mb-6\" style=\"background-color: var(--bg-primary); border-color: var(--border);\"><h3 class=\"font-semibold mb-4\" style=\"color: var(--text-primary)\">Resolution Options</h3><div class=\"space-y-3 mb-6\"><label class=\"flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80\" style=\"border-color: var(--border);\"><input type=\"radio\" name=\"winner\" value=\"koreader\" class=\"mr-3\" required><div class=\"flex-1\"><span class=\"font-semibold\" style=\"color: var(--text-primary);\">Keep KOReader Progress</span><p class=\"text-xs\" style=\"color: var(--text-secondary);\">Use progress from your KOReader device</p></div></label> <label class=\"flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80\" style=\"border-color: var(--border);\"><input type=\"radio\" name=\"winner\" value=\"kobo\" class=\"mr-3\"><div class=\"flex-1\"><span class=\"font-semibold\" style=\"color: var(--text-primary);\">Keep Kobo Progress</span><p class=\"text-xs\" style=\"color: var(--text-secondary);\">Use progress from your Kobo device</p></div></label> <label class=\"flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80\" style=\"border-color: var(--border);\"><input type=\"radio\" name=\"winner\" value=\"web\" class=\"mr-3\"><div class=\"flex-1\"><span class=\"font-semibold\" style=\"color: var(--text-primary);\">Keep Web Progress</span><p class=\"text-xs\" style=\"color: var(--text-secondary);\">Use progress from the web interface</p></div></label> <label class=\"flex items-center p-3 border rounded-lg cursor-pointer hover:opacity-80\" style=\"border-color: var(--border);\"><input type=\"radio\" name=\"winner\" value=\"manual\" class=\"mr-3\"><div class=\"flex-1\"><span class=\"font-semibold\" style=\"color: var(--text-primary);\">Manual Override</span><p class=\"text-xs\" style=\"color: var(--text-secondary);\">Specify a custom progress value</p></div></label></div><div id=\"manual-override\" class=\"hidden mb-4 p-4 border rounded-lg\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><h4 class=\"font-semibold mb-3\" style=\"color: var(--text-primary);\">Manual Progress</h4><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary);\">Percentage (0-100)</label> <input type=\"number\" id=\"manual-percentage\" min=\"0\" max=\"100\" step=\"0.01\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary);\">Page Number</label> <input type=\"number\" id=\"manual-page\" min=\"1\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary);\">EPUB CFI</label> <input type=\"text\" id=\"manual-epubcfi\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary);\">Chapter</label> <input type=\"number\" id=\"manual-chapter\" min=\"1\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div></div></div><div class=\"mb-6\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"apply-to-all\" class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary);\">Apply this resolution to all future conflicts</span></label></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary);\">Resolution Reason (optional)</label> <input type=\"text\" id=\"resolution-reason\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"e.g., Device was offline, using most recent progress\"></div></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideResolveModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" @click=\"deleteConflict()\" class=\"btn-danger px-4 py-2 rounded-lg\">Dismiss</button> <button type=\"submit\" class=\"btn-primary px-6 py-2 rounded-lg\">Resolve Conflict</button></div></form></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div><div id=\"conflict-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-4xl mx-4 my-8\"><div class=\"flex justify-between items-center mb-6\"><div><h2 class=\"text-2xl font-bold tracking-tight text-content\">Resolve Conflict</h2><p id=\"conflict-book-title\" class=\"text-sm text-content-muted\">Book Title</p></div><button @click=\"hideResolveModal()\" class=\"icon-btn\" aria-label=\"Close\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</button></div><form id=\"conflict-resolution-form\" @submit=\"handleResolveSubmit($event)\"><input type=\"hidden\" id=\"conflict-id\"><div id=\"conflict-details\" class=\"mb-6\"></div><div class=\"card p-4 mb-6 bg-surface\"><h3 class=\"font-semibold mb-4 text-content\">Resolution Options</h3><div class=\"space-y-3 mb-6\"><label class=\"flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover\"><input type=\"radio\" name=\"winner\" value=\"koreader\" class=\"mr-3\" required><div class=\"flex-1\"><span class=\"font-semibold text-content\">Keep KOReader Progress</span><p class=\"text-xs text-content-muted\">Use progress from your KOReader device</p></div></label> <label class=\"flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover\"><input type=\"radio\" name=\"winner\" value=\"kobo\" class=\"mr-3\"><div class=\"flex-1\"><span class=\"font-semibold text-content\">Keep Kobo Progress</span><p class=\"text-xs text-content-muted\">Use progress from your Kobo device</p></div></label> <label class=\"flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover\"><input type=\"radio\" name=\"winner\" value=\"web\" class=\"mr-3\"><div class=\"flex-1\"><span class=\"font-semibold text-content\">Keep Web Progress</span><p class=\"text-xs text-content-muted\">Use progress from the web interface</p></div></label> <label class=\"flex items-center p-3 border border-line rounded-lg cursor-pointer hover:bg-surface-hover\"><input type=\"radio\" name=\"winner\" value=\"manual\" class=\"mr-3\"><div class=\"flex-1\"><span class=\"font-semibold text-content\">Manual Override</span><p class=\"text-xs text-content-muted\">Specify a custom progress value</p></div></label></div><div id=\"manual-override\" class=\"hidden mb-4 p-4 border border-line rounded-lg bg-surface-raised\"><h4 class=\"font-semibold mb-3 text-content\">Manual Progress</h4><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Percentage (0-100)</label> <input type=\"number\" id=\"manual-percentage\" min=\"0\" max=\"100\" step=\"0.01\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Page Number</label> <input type=\"number\" id=\"manual-page\" min=\"1\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">EPUB CFI</label> <input type=\"text\" id=\"manual-epubcfi\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Chapter</label> <input type=\"number\" id=\"manual-chapter\" min=\"1\" class=\"input\"></div></div></div><div class=\"mb-6\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"apply-to-all\" class=\"w-5 h-5 rounded\"> <span class=\"text-content\">Apply this resolution to all future conflicts</span></label></div><div class=\"mb-6\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Resolution Reason (optional)</label> <input type=\"text\" id=\"resolution-reason\" class=\"input\" placeholder=\"e.g., Device was offline, using most recent progress\"></div></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideResolveModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"button\" @click=\"deleteConflict()\" class=\"btn btn-danger\">Dismiss</button> <button type=\"submit\" class=\"btn btn-primary\">Resolve Conflict</button></div></form></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -160,7 +200,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/custom_section.templ b/templates/custom_section.templ
index 087d85a..a67fb05 100644
--- a/templates/custom_section.templ
+++ b/templates/custom_section.templ
@@ -13,55 +13,51 @@ templ CustomSectionBuilder(user User, libraries []LibraryData, errorMessage stri
 		<body class="theme-{ user.Theme }">
 			@Header(user, "/custom-section")
 			<main class="max-w-4xl mx-auto px-4 py-8">
-				<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Create Custom Section</h1>
-				<p class="mb-6" style="color: var(--text-secondary)">Build a custom dashboard section by defining filter rules or manually selecting books.</p>
+				<h1 class="text-2xl font-bold tracking-tight text-content mb-2">Create Custom Section</h1>
+				<p class="mb-6 text-content-muted">Build a custom dashboard section by defining filter rules or manually selecting books.</p>
 				<form id="custom-section-form" class="space-y-6">
 					<!-- Section Details -->
-					<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
-						<h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Section Details</h2>
+					<div class="p-4 rounded-lg bg-surface-raised">
+						<h2 class="text-xl font-semibold mb-4 text-content">Section Details</h2>
 						<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 							<div>
-								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name *</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Name *</label>
 								<input
 									type="text"
 									id="section-name"
 									name="name"
 									required
-									class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input"
 								/>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon (emoji)</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Icon (emoji)</label>
 								<input
 									type="text"
 									id="section-icon"
 									name="icon"
 									maxlength="4"
-									class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input"
 									placeholder="📚"
 								/>
 							</div>
 						</div>
 						<div class="mt-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Description</label>
 							<textarea
 								id="section-description"
 								name="description"
 								rows="2"
-								class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							></textarea>
 						</div>
 						<div class="mt-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Library *</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Library *</label>
 							<select
 								id="section-library"
 								name="library_id"
 								required
-								class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							>
 								<option value="">Select a library...</option>
 								for _, lib := range libraries {
@@ -71,29 +67,28 @@ templ CustomSectionBuilder(user User, libraries []LibraryData, errorMessage stri
 						</div>
 					</div>
 					<!-- Filter Rules -->
-					<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
+					<div class="p-4 rounded-lg bg-surface-raised">
 						<div class="flex items-center justify-between mb-4">
-							<h2 class="text-xl font-semibold" style="color: var(--text-primary)">Filter Rules</h2>
+							<h2 class="text-xl font-semibold text-content">Filter Rules</h2>
 							<button
 								type="button"
 								id="add-rule-btn"
-								class="px-3 py-1 rounded-lg text-sm font-medium"
-								style="background-color: var(--accent);"
+								class="btn btn-primary text-sm"
 							>
-								+ Add Rule
+								@Icon("plus", "h-4 w-4")
+								Add Rule
 							</button>
 						</div>
-						<p class="text-sm mb-4" style="color: var(--text-secondary)">
+						<p class="text-sm mb-4 text-content-muted">
 							Books matching these rules will be automatically added to your section. Use AND for all rules, OR for any rule.
 						</p>
 						<div id="rules-container" class="space-y-3"></div>
 						<div class="mt-4 flex items-center gap-2">
-							<label class="text-sm font-medium" style="color: var(--text-secondary)">Match:</label>
+							<label class="text-sm font-medium text-content-muted">Match:</label>
 							<select
 								id="match-type"
 								name="match_type"
-								class="px-3 py-1 rounded border"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input w-auto"
 							>
 								<option value="all">ALL rules (AND)</option>
 								<option value="any">ANY rule (OR)</option>
@@ -101,68 +96,64 @@ templ CustomSectionBuilder(user User, libraries []LibraryData, errorMessage stri
 						</div>
 					</div>
 					<!-- Manual Book Selection -->
-					<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
-						<h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Manual Book Selection</h2>
-						<p class="text-sm mb-4" style="color: var(--text-secondary)">
+					<div class="p-4 rounded-lg bg-surface-raised">
+						<h2 class="text-xl font-semibold mb-4 text-content">Manual Book Selection</h2>
+						<p class="text-sm mb-4 text-content-muted">
 							Add specific books to this section. Use the search to find and select multiple books.
 						</p>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Search Books</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Search Books</label>
 							<div class="flex gap-2">
 								<input
 									type="text"
 									id="book-search"
 									name="book_search"
-									class="flex-1 px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input flex-1"
 									placeholder="Search by title or author..."
 									autocomplete="off"
 								/>
 								<button
 									type="button"
 									id="search-books-btn"
-									class="px-4 py-2 rounded-lg font-medium"
-									style="background-color: var(--accent);"
+									class="btn btn-primary"
 								>
+									@Icon("search", "h-4 w-4")
 									Search
 								</button>
 							</div>
 						</div>
 						<div
 							id="search-results"
-							class="hidden mb-4 p-3 rounded-lg max-h-60 overflow-y-auto"
-							style="background-color: var(--bg-primary);"
+							class="hidden mb-4 p-3 rounded-lg max-h-60 overflow-y-auto bg-surface"
 						></div>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Selected Books</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Selected Books</label>
 							<div
 								id="selected-books"
-								class="min-h-[60px] p-3 rounded-lg border-2 border-dashed"
-								style="border-color: var(--border); background-color: var(--bg-primary);"
+								class="min-h-[60px] p-3 rounded-lg border-2 border-dashed border-line bg-surface"
 							>
-								<p class="text-sm text-center" style="color: var(--text-secondary);">No books selected</p>
+								<p class="text-sm text-center text-content-muted">No books selected</p>
 							</div>
 						</div>
 					</div>
 					<!-- Live Preview -->
-					<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
+					<div class="p-4 rounded-lg bg-surface-raised">
 						<div class="flex items-center justify-between mb-4">
-							<h2 class="text-xl font-semibold" style="color: var(--text-primary)">Live Preview</h2>
+							<h2 class="text-xl font-semibold text-content">Live Preview</h2>
 							<button
 								type="button"
 								id="preview-btn"
-								class="px-4 py-2 rounded-lg font-medium"
-								style="background-color: var(--accent);"
+								class="btn btn-primary"
 							>
+								@Icon("refresh", "h-4 w-4")
 								Refresh Preview
 							</button>
 						</div>
 						<div
 							id="preview-container"
-							class="p-4 rounded-lg"
-							style="background-color: var(--bg-primary); min-height: 200px;"
+							class="p-4 rounded-lg bg-surface min-h-[200px]"
 						>
-							<p class="text-center" style="color: var(--text-secondary);">
+							<p class="text-center text-content-muted">
 								Add filter rules or select books to see a preview of your custom section.
 							</p>
 						</div>
@@ -172,17 +163,16 @@ templ CustomSectionBuilder(user User, libraries []LibraryData, errorMessage stri
 						<button
 							type="button"
 							id="cancel-btn"
-							class="px-6 py-2 rounded-lg font-medium border hover:opacity-80"
-							style="border-color: var(--border); color: var(--text-primary); background-color: var(--bg-secondary);"
+							class="btn btn-secondary"
 						>
 							Cancel
 						</button>
 						<button
 							type="submit"
 							id="save-section-btn"
-							class="px-6 py-2 rounded-lg font-medium text-white hover:opacity-90"
-							style="background-color: var(--accent);"
+							class="btn btn-primary"
 						>
+							@Icon("save", "h-4 w-4")
 							Save Section
 						</button>
 					</div>
diff --git a/templates/custom_section_templ.go b/templates/custom_section_templ.go
index 83fa74f..d72d7fc 100644
--- a/templates/custom_section_templ.go
+++ b/templates/custom_section_templ.go
@@ -37,7 +37,7 @@ func CustomSectionBuilder(user User, libraries []LibraryData, errorMessage strin
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"max-w-4xl mx-auto px-4 py-8\"><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">Create Custom Section</h1><p class=\"mb-6\" style=\"color: var(--text-secondary)\">Build a custom dashboard section by defining filter rules or manually selecting books.</p><form id=\"custom-section-form\" class=\"space-y-6\"><!-- Section Details --><div class=\"p-4 rounded-lg\" style=\"background-color: var(--bg-secondary);\"><h2 class=\"text-xl font-semibold mb-4\" style=\"color: var(--text-primary)\">Section Details</h2><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Name *</label> <input type=\"text\" id=\"section-name\" name=\"name\" required class=\"w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Icon (emoji)</label> <input type=\"text\" id=\"section-icon\" name=\"icon\" maxlength=\"4\" class=\"w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"📚\"></div></div><div class=\"mt-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Description</label> <textarea id=\"section-description\" name=\"description\" rows=\"2\" class=\"w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></textarea></div><div class=\"mt-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Library *</label> <select id=\"section-library\" name=\"library_id\" required class=\"w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select a library...</option> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"max-w-4xl mx-auto px-4 py-8\"><h1 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Create Custom Section</h1><p class=\"mb-6 text-content-muted\">Build a custom dashboard section by defining filter rules or manually selecting books.</p><form id=\"custom-section-form\" class=\"space-y-6\"><!-- Section Details --><div class=\"p-4 rounded-lg bg-surface-raised\"><h2 class=\"text-xl font-semibold mb-4 text-content\">Section Details</h2><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Name *</label> <input type=\"text\" id=\"section-name\" name=\"name\" required class=\"input\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Icon (emoji)</label> <input type=\"text\" id=\"section-icon\" name=\"icon\" maxlength=\"4\" class=\"input\" placeholder=\"📚\"></div></div><div class=\"mt-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Description</label> <textarea id=\"section-description\" name=\"description\" rows=\"2\" class=\"input\"></textarea></div><div class=\"mt-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Library *</label> <select id=\"section-library\" name=\"library_id\" required class=\"input\"><option value=\"\">Select a library...</option> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -49,7 +49,7 @@ func CustomSectionBuilder(user User, libraries []LibraryData, errorMessage strin
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.ResolveAttributeValue(lib.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/custom_section.templ`, Line: 68, Col: 31}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/custom_section.templ`, Line: 64, Col: 31}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
 			if templ_7745c5c3_Err != nil {
@@ -62,7 +62,7 @@ func CustomSectionBuilder(user User, libraries []LibraryData, errorMessage strin
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(lib.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/custom_section.templ`, Line: 68, Col: 44}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/custom_section.templ`, Line: 64, Col: 44}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -73,7 +73,39 @@ func CustomSectionBuilder(user User, libraries []LibraryData, errorMessage strin
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</select></div></div><!-- Filter Rules --><div class=\"p-4 rounded-lg\" style=\"background-color: var(--bg-secondary);\"><div class=\"flex items-center justify-between mb-4\"><h2 class=\"text-xl font-semibold\" style=\"color: var(--text-primary)\">Filter Rules</h2><button type=\"button\" id=\"add-rule-btn\" class=\"px-3 py-1 rounded-lg text-sm font-medium\" style=\"background-color: var(--accent);\">+ Add Rule</button></div><p class=\"text-sm mb-4\" style=\"color: var(--text-secondary)\">Books matching these rules will be automatically added to your section. Use AND for all rules, OR for any rule.</p><div id=\"rules-container\" class=\"space-y-3\"></div><div class=\"mt-4 flex items-center gap-2\"><label class=\"text-sm font-medium\" style=\"color: var(--text-secondary)\">Match:</label> <select id=\"match-type\" name=\"match_type\" class=\"px-3 py-1 rounded border\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"all\">ALL rules (AND)</option> <option value=\"any\">ANY rule (OR)</option></select></div></div><!-- Manual Book Selection --><div class=\"p-4 rounded-lg\" style=\"background-color: var(--bg-secondary);\"><h2 class=\"text-xl font-semibold mb-4\" style=\"color: var(--text-primary)\">Manual Book Selection</h2><p class=\"text-sm mb-4\" style=\"color: var(--text-secondary)\">Add specific books to this section. Use the search to find and select multiple books.</p><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Search Books</label><div class=\"flex gap-2\"><input type=\"text\" id=\"book-search\" name=\"book_search\" class=\"flex-1 px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"Search by title or author...\" autocomplete=\"off\"> <button type=\"button\" id=\"search-books-btn\" class=\"px-4 py-2 rounded-lg font-medium\" style=\"background-color: var(--accent);\">Search</button></div></div><div id=\"search-results\" class=\"hidden mb-4 p-3 rounded-lg max-h-60 overflow-y-auto\" style=\"background-color: var(--bg-primary);\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Selected Books</label><div id=\"selected-books\" class=\"min-h-[60px] p-3 rounded-lg border-2 border-dashed\" style=\"border-color: var(--border); background-color: var(--bg-primary);\"><p class=\"text-sm text-center\" style=\"color: var(--text-secondary);\">No books selected</p></div></div></div><!-- Live Preview --><div class=\"p-4 rounded-lg\" style=\"background-color: var(--bg-secondary);\"><div class=\"flex items-center justify-between mb-4\"><h2 class=\"text-xl font-semibold\" style=\"color: var(--text-primary)\">Live Preview</h2><button type=\"button\" id=\"preview-btn\" class=\"px-4 py-2 rounded-lg font-medium\" style=\"background-color: var(--accent);\">Refresh Preview</button></div><div id=\"preview-container\" class=\"p-4 rounded-lg\" style=\"background-color: var(--bg-primary); min-height: 200px;\"><p class=\"text-center\" style=\"color: var(--text-secondary);\">Add filter rules or select books to see a preview of your custom section.</p></div></div><!-- Form Actions --><div class=\"flex justify-end gap-3\"><button type=\"button\" id=\"cancel-btn\" class=\"px-6 py-2 rounded-lg font-medium border hover:opacity-80\" style=\"border-color: var(--border); color: var(--text-primary); background-color: var(--bg-secondary);\">Cancel</button> <button type=\"submit\" id=\"save-section-btn\" class=\"px-6 py-2 rounded-lg font-medium text-white hover:opacity-90\" style=\"background-color: var(--accent);\">Save Section</button></div></form></main>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</select></div></div><!-- Filter Rules --><div class=\"p-4 rounded-lg bg-surface-raised\"><div class=\"flex items-center justify-between mb-4\"><h2 class=\"text-xl font-semibold text-content\">Filter Rules</h2><button type=\"button\" id=\"add-rule-btn\" class=\"btn btn-primary text-sm\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("plus", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "Add Rule</button></div><p class=\"text-sm mb-4 text-content-muted\">Books matching these rules will be automatically added to your section. Use AND for all rules, OR for any rule.</p><div id=\"rules-container\" class=\"space-y-3\"></div><div class=\"mt-4 flex items-center gap-2\"><label class=\"text-sm font-medium text-content-muted\">Match:</label> <select id=\"match-type\" name=\"match_type\" class=\"input w-auto\"><option value=\"all\">ALL rules (AND)</option> <option value=\"any\">ANY rule (OR)</option></select></div></div><!-- Manual Book Selection --><div class=\"p-4 rounded-lg bg-surface-raised\"><h2 class=\"text-xl font-semibold mb-4 text-content\">Manual Book Selection</h2><p class=\"text-sm mb-4 text-content-muted\">Add specific books to this section. Use the search to find and select multiple books.</p><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Search Books</label><div class=\"flex gap-2\"><input type=\"text\" id=\"book-search\" name=\"book_search\" class=\"input flex-1\" placeholder=\"Search by title or author...\" autocomplete=\"off\"> <button type=\"button\" id=\"search-books-btn\" class=\"btn btn-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("search", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "Search</button></div></div><div id=\"search-results\" class=\"hidden mb-4 p-3 rounded-lg max-h-60 overflow-y-auto bg-surface\"></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Selected Books</label><div id=\"selected-books\" class=\"min-h-[60px] p-3 rounded-lg border-2 border-dashed border-line bg-surface\"><p class=\"text-sm text-center text-content-muted\">No books selected</p></div></div></div><!-- Live Preview --><div class=\"p-4 rounded-lg bg-surface-raised\"><div class=\"flex items-center justify-between mb-4\"><h2 class=\"text-xl font-semibold text-content\">Live Preview</h2><button type=\"button\" id=\"preview-btn\" class=\"btn btn-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("refresh", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "Refresh Preview</button></div><div id=\"preview-container\" class=\"p-4 rounded-lg bg-surface min-h-[200px]\"><p class=\"text-center text-content-muted\">Add filter rules or select books to see a preview of your custom section.</p></div></div><!-- Form Actions --><div class=\"flex justify-end gap-3\"><button type=\"button\" id=\"cancel-btn\" class=\"btn btn-secondary\">Cancel</button> <button type=\"submit\" id=\"save-section-btn\" class=\"btn btn-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("save", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "Save Section</button></div></form></main>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -81,7 +113,7 @@ func CustomSectionBuilder(user User, libraries []LibraryData, errorMessage strin
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/devices.templ b/templates/devices.templ
index cac4412..1b60df0 100644
--- a/templates/devices.templ
+++ b/templates/devices.templ
@@ -19,11 +19,12 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 				<div class="mb-8">
 					<div class="flex justify-between items-center">
 						<div>
-							<h1 class="text-3xl font-bold" style="color: var(--text-primary)">Device Management</h1>
-							<p style="color: var(--text-secondary)">Manage your reading devices and sync settings</p>
+							<h1 class="text-2xl font-bold tracking-tight text-content">Device Management</h1>
+							<p class="text-content-muted">Manage your reading devices and sync settings</p>
 						</div>
-						<button @click="showAddDeviceModal()" class="btn-primary px-4 py-2 rounded-lg">
-							➕ Add New Device
+						<button @click="showAddDeviceModal()" class="btn btn-primary">
+							@Icon("plus", "h-4 w-4")
+							Add New Device
 						</button>
 					</div>
 				</div>
@@ -31,11 +32,13 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 				<div id="devices-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 					<!-- Empty state -->
 					if len(devices) == 0 {
-						<div id="empty-state" class="text-center py-16 col-span-full" style="color: var(--text-secondary)">
-							<div class="text-6xl mb-4">📱</div>
-							<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Devices Yet</h3>
+						<div id="empty-state" class="text-center py-16 col-span-full text-content-muted">
+							<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-brand">
+								@Icon("device", "h-7 w-7")
+							</div>
+							<h3 class="text-xl font-semibold mb-2 text-content">No Devices Yet</h3>
 							<p class="mb-4">Add your reading devices to enable cross-device sync</p>
-							<button @click="showAddDeviceModal()" class="btn-primary px-4 py-2 rounded-lg">
+							<button @click="showAddDeviceModal()" class="btn btn-primary">
 								Add Your First Device
 							</button>
 						</div>
@@ -44,7 +47,7 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 					if len(devices) > 0 {
 						<div id="devices-grid" class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 							for _, device := range devices {
-								<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+								<div class="card p-6">
 									<div class="flex items-start justify-between mb-4">
 										<div class="text-4xl">
 											if device.DeviceType == "koreader" {
@@ -58,103 +61,110 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 											}
 										</div>
 										<div class="flex space-x-2">
-											<button @click={ "showShelfMappings('" + device.ID.String() + "')" } class="p-2 hover:opacity-80 rounded" style="color: var(--text-secondary); background-color: var(--bg-primary);">
-												📚
+											<button @click={ "showShelfMappings('" + device.ID.String() + "')" } class="icon-btn" aria-label="Shelf mappings">
+												@Icon("library", "h-4 w-4")
 											</button>
-											<button @click={ "showDeviceSettings('" + device.ID.String() + "')" } class="p-2 hover:opacity-80 rounded" style="color: var(--text-secondary); background-color: var(--bg-primary);">
-												⚙️
+											<button @click={ "showDeviceSettings('" + device.ID.String() + "')" } class="icon-btn" aria-label="Device settings">
+												@Icon("settings", "h-4 w-4")
 											</button>
 										</div>
 									</div>
-									<h3 class="text-lg font-semibold mb-1" style="color: var(--text-primary)">{ device.DeviceName }</h3>
-									<p class="text-sm mb-4" style="color: var(--text-secondary)">{ device.DeviceType }</p>
+									<h3 class="text-lg font-semibold mb-1 text-content">{ device.DeviceName }</h3>
+									<p class="text-sm mb-4 text-content-muted">{ device.DeviceType }</p>
 									<div class="space-y-2 text-sm mb-4">
 										<div class="flex justify-between">
-											<span style="color: var(--text-secondary)">Sync Status</span>
+											<span class="text-content-muted">Sync Status</span>
 											if device.SyncEnabled {
-												<span style="color: var(--accent)">✓ Enabled</span>
+												<span class="inline-flex items-center gap-1 text-brand">
+													@Icon("check", "h-3.5 w-3.5")
+													Enabled
+												</span>
 											} else {
-												<span style="color: var(--text-secondary)">✗ Disabled</span>
+												<span class="inline-flex items-center gap-1 text-content-muted">
+													@Icon("close", "h-3.5 w-3.5")
+													Disabled
+												</span>
 											}
 										</div>
 										<div class="flex justify-between">
-											<span style="color: var(--text-secondary)">Last Sync</span>
+											<span class="text-content-muted">Last Sync</span>
 											if device.LastSync != nil {
-												<span style="color: var(--text-primary)">{ FormatInTimezone(*device.LastSync, user.Timezone) }</span>
+												<span class="text-content">{ FormatInTimezone(*device.LastSync, user.Timezone) }</span>
 											} else {
-												<span style="color: var(--text-primary)">Never</span>
+												<span class="text-content">Never</span>
 											}
 										</div>
 										<div class="flex justify-between">
-											<span style="color: var(--text-secondary)">Last Seen</span>
+											<span class="text-content-muted">Last Seen</span>
 											if device.LastSeen != nil {
-												<span style="color: var(--text-primary)">{ FormatInTimezone(*device.LastSeen, user.Timezone) }</span>
+												<span class="text-content">{ FormatInTimezone(*device.LastSeen, user.Timezone) }</span>
 											} else {
-												<span style="color: var(--text-primary)">Never</span>
+												<span class="text-content">Never</span>
 											}
 										</div>
 									</div>
 									<!-- NEW: Sync URL & Token Management -->
-									<div class="border-t pt-4" style="border-color: var(--border);">
-										<p class="text-xs font-semibold mb-2" style="color: var(--text-secondary)">DEVICE SYNC CONFIGURATION</p>
+									<div class="border-t border-line pt-4">
+										<p class="text-xs font-semibold mb-2 text-content-muted">DEVICE SYNC CONFIGURATION</p>
 										if device.DeviceType == "kobo" {
 											<!-- Kobo: Copy Full Sync URL -->
 											<div class="mb-3">
-												<label class="block text-xs mb-1" style="color: var(--text-secondary)">Kobo Sync URL</label>
+												<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Kobo Sync URL</label>
 												<div class="flex space-x-2">
 													<input
 														type="text"
 														id="sync-url-{ device.ID }"
 														readonly
 														value={ baseURL + "/api/sync/kobo/" + device.AuthToken }
-														class="flex-1 px-3 py-2 text-xs rounded border"
-														style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+														class="input flex-1 text-xs"
 													/>
 													<button
 														@click="copyToClipboard(document.getElementById('sync-url-{ device.ID }').value, 'Kobo sync URL')"
-														class="px-3 py-2 text-xs rounded hover:opacity-80"
-														style="background-color: var(--accent); color: white;"
+														class="btn btn-primary text-xs"
 													>
-														📋 Copy
+														@Icon("copy", "h-3.5 w-3.5")
+														Copy
 													</button>
 												</div>
-												<p class="text-xs mt-1" style="color: var(--text-secondary);">Paste this URL into Kobo's <code class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary);">api_endpoint</code> setting</p>
+												<p class="text-xs mt-1 text-content-muted">Paste this URL into Kobo's <code class="px-1 py-0.5 rounded bg-surface">api_endpoint</code> setting</p>
 											</div>
 										}
 										if device.DeviceType == "koreader" {
 											<!-- KOReader: Copy Auth Token -->
 											<div class="mb-3">
-												<label class="block text-xs mb-1" style="color: var(--text-secondary)">Auth Token (for plugin)</label>
+												<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Auth Token (for plugin)</label>
 												<div class="flex space-x-2">
 													<input
 														type="text"
 														id="auth-token-{ device.ID }"
 														readonly
 														value={ device.AuthToken }
-														class="flex-1 px-3 py-2 text-xs rounded border"
-														style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border); font-family: monospace;"
+														class="input flex-1 text-xs font-mono"
 													/>
 													<button
 														@click="copyToClipboard(document.getElementById('auth-token-{ device.ID }').value, 'Auth token')"
-														class="px-3 py-2 text-xs rounded hover:opacity-80"
-														style="background-color: var(--accent); color: white;"
+														class="btn btn-primary text-xs"
 													>
-														📋 Copy
+														@Icon("copy", "h-3.5 w-3.5")
+														Copy
 													</button>
 												</div>
-												<p class="text-xs mt-1" style="color: var(--text-secondary);">Enter this token in the KOReader plugin settings</p>
+												<p class="text-xs mt-1 text-content-muted">Enter this token in the KOReader plugin settings</p>
 											</div>
 										}
 										<!-- Regenerate Token Button -->
 										<button
 											hx-put={ "/api/devices/" + device.ID.String() + "/regenerate-token" }
 											hx-confirm="⚠️ Old token will immediately stop working. Regenerate anyway?"
-											class="w-full px-3 py-2 text-xs rounded border hover:opacity-80"
-											style="border-color: var(--border); color: var(--text-secondary); background-color: var(--bg-primary);"
+											class="btn btn-secondary w-full text-xs"
 										>
-											🔄 Regenerate Token
+											@Icon("refresh", "h-3.5 w-3.5")
+											Regenerate Token
 										</button>
-										<p class="text-xs mt-1" style="color: var(--text-secondary);">⚠️ Old token will immediately stop working</p>
+										<p class="text-xs mt-1 inline-flex items-center gap-1 text-content-muted">
+											@Icon("alert", "h-3 w-3")
+											Old token will immediately stop working
+										</p>
 									</div>
 								</div>
 							}
@@ -164,21 +174,21 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 				<!-- Pending Registrations -->
 				if len(pendingRegistrations) > 0 {
 					<div id="pending-section" class="mt-12">
-						<h2 class="text-2xl font-bold mb-4" style="color: var(--text-primary)">Pending Device Registrations</h2>
+						<h2 class="text-2xl font-bold tracking-tight mb-4 text-content">Pending Device Registrations</h2>
 						<div class="space-y-4">
 							for _, reg := range pendingRegistrations {
-								<div class="card p-4 rounded-lg border flex items-center justify-between" style="background-color: var(--bg-secondary); border-color: var(--border);">
+								<div class="card p-4 flex items-center justify-between">
 									<div>
-										<h3 class="font-semibold" style="color: var(--text-primary)">{ reg.DeviceName }</h3>
-										<p class="text-sm" style="color: var(--text-secondary)">
+										<h3 class="font-semibold text-content">{ reg.DeviceName }</h3>
+										<p class="text-sm text-content-muted">
 											{ reg.DeviceType } - Expires in { reg.ExpiresAt }
 										</p>
 									</div>
 									<div class="flex space-x-2">
-										<button @click={ "approveDevice('" + reg.RegistrationID + "')" } class="btn-primary px-4 py-2 rounded-lg text-sm">
+										<button @click={ "approveDevice('" + reg.RegistrationID + "')" } class="btn btn-primary text-sm">
 											Approve
 										</button>
-										<button @click={ "rejectDevice('" + reg.RegistrationID + "')" } class="btn-danger px-4 py-2 rounded-lg text-sm">
+										<button @click={ "rejectDevice('" + reg.RegistrationID + "')" } class="btn btn-danger text-sm">
 											Reject
 										</button>
 									</div>
@@ -190,8 +200,8 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 				<!-- Sync Queue Section -->
 				<div id="sync-queue-section" class="mt-12 hidden">
 					<div class="flex justify-between items-center mb-4">
-						<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Sync Queue</h2>
-						<button @click="clearSyncQueue()" class="btn-secondary px-4 py-2 rounded-lg">
+						<h2 class="text-2xl font-bold tracking-tight text-content">Sync Queue</h2>
+						<button @click="clearSyncQueue()" class="btn btn-secondary">
 							Clear Queue
 						</button>
 					</div>
@@ -199,31 +209,31 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 				</div>
 			</div>
 			<!-- Add Device Modal -->
-			<div id="add-device-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
+			<div id="add-device-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+				<div class="card p-6 w-full max-w-md mx-4">
 					<div class="flex justify-between items-center mb-6">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Add New Device</h2>
-						<button @click="hideAddDeviceModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+						<h2 class="text-xl font-bold text-content">Add New Device</h2>
+						<button @click="hideAddDeviceModal()" class="icon-btn" aria-label="Close">
+							@Icon("close", "h-5 w-5")
+						</button>
 					</div>
 					<form id="add-device-form" @submit="handleAddDevice($event)">
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Device Name</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Device Name</label>
 							<input
 								type="text"
 								id="device-name"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 								placeholder="My Kindle Paperwhite"
 							/>
 						</div>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Device Type</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Device Type</label>
 							<select
 								id="device-type"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							>
 								<option value="">Select device type...</option>
 								<option value="koreader">KOReader (Kindle, Kobo, PocketBook)</option>
@@ -233,22 +243,21 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 							</select>
 						</div>
 						<div class="mb-6">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Device Identifier</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Device Identifier</label>
 							<input
 								type="text"
 								id="device-identifier"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 								placeholder="Hardware ID or Serial Number"
 							/>
-							<p class="text-xs mt-1" style="color: var(--text-secondary)">Enter your device's unique identifier</p>
+							<p class="text-xs mt-1 text-content-muted">Enter your device's unique identifier</p>
 						</div>
 						<div class="flex justify-end space-x-3">
-							<button type="button" @click="hideAddDeviceModal()" class="btn-secondary px-4 py-2 rounded-lg">
+							<button type="button" @click="hideAddDeviceModal()" class="btn btn-secondary">
 								Cancel
 							</button>
-							<button type="submit" class="btn-primary px-4 py-2 rounded-lg">
+							<button type="submit" class="btn btn-primary">
 								Register Device
 							</button>
 						</div>
@@ -256,23 +265,24 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 				</div>
 			</div>
 			<!-- Device Settings Modal -->
-			<div id="device-settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
+			<div id="device-settings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+				<div class="card p-6 w-full max-w-md mx-4">
 					<div class="flex justify-between items-center mb-6">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Device Settings</h2>
-						<button @click="hideDeviceSettingsModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+						<h2 class="text-xl font-bold text-content">Device Settings</h2>
+						<button @click="hideDeviceSettingsModal()" class="icon-btn" aria-label="Close">
+							@Icon("close", "h-5 w-5")
+						</button>
 					</div>
 					<form id="device-settings-form" @submit="handleSaveDeviceSettings($event)">
 						<input type="hidden" id="settings-device-id"/>
 						<input type="hidden" id="settings-device-type"/>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Device Name</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Device Name</label>
 							<input
 								type="text"
 								id="settings-device-name"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							/>
 						</div>
 						<div class="mb-4">
@@ -283,9 +293,9 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 									checked
 									class="w-5 h-5 rounded"
 								/>
-								<span style="color: var(--text-primary)">Enable Sync</span>
+								<span class="text-content">Enable Sync</span>
 							</label>
-							<p class="text-xs mt-1 ml-8" style="color: var(--text-secondary)">Allow this device to sync reading progress</p>
+							<p class="text-xs mt-1 ml-8 text-content-muted">Allow this device to sync reading progress</p>
 						</div>
 						<div class="mb-4">
 							<label class="flex items-center space-x-3 cursor-pointer">
@@ -295,16 +305,15 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 									checked
 									class="w-5 h-5 rounded"
 								/>
-								<span style="color: var(--text-primary)">Auto Sync</span>
+								<span class="text-content">Auto Sync</span>
 							</label>
-							<p class="text-xs mt-1 ml-8" style="color: var(--text-secondary)">Automatically sync changes</p>
+							<p class="text-xs mt-1 ml-8 text-content-muted">Automatically sync changes</p>
 						</div>
 						<div class="mb-6">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Sync Frequency</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Sync Frequency</label>
 							<select
 								id="settings-sync-frequency"
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							>
 								<option value="1">Every 1 minute</option>
 								<option value="5" selected>Every 5 minutes</option>
@@ -313,15 +322,14 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 								<option value="60">Every hour</option>
 							</select>
 						</div>
-						<div class="border-t pt-6 mb-6" style="border-color: var(--border);">
-							<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary)">Collection View Settings</h3>
-							<p class="text-sm mb-4" style="color: var(--text-secondary)">Configure how collections are displayed on this device</p>
+						<div class="border-t border-line pt-6 mb-6">
+							<h3 class="text-lg font-semibold mb-4 text-content">Collection View Settings</h3>
+							<p class="text-sm mb-4 text-content-muted">Configure how collections are displayed on this device</p>
 							<div class="mb-4">
-								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Default View Mode</label>
+								<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Default View Mode</label>
 								<select
 									id="settings-view-mode"
-									class="w-full px-4 py-2 border rounded-lg"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input"
 								>
 									<option value="grid">Grid View</option>
 									<option value="list">List View</option>
@@ -329,11 +337,10 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 								</select>
 							</div>
 							<div class="mb-4">
-								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Sort Collections By</label>
+								<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Sort Collections By</label>
 								<select
 									id="settings-sort-order"
-									class="w-full px-4 py-2 border rounded-lg"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input"
 								>
 									<option value="name">Collection Name</option>
 									<option value="created">Date Created</option>
@@ -342,11 +349,10 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 								</select>
 							</div>
 							<div class="mb-4">
-								<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Items Per Page</label>
+								<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Items Per Page</label>
 								<select
 									id="settings-items-per-page"
-									class="w-full px-4 py-2 border rounded-lg"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+									class="input"
 								>
 									<option value="12">12 items</option>
 									<option value="24" selected>24 items</option>
@@ -362,9 +368,9 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 										checked
 										class="w-5 h-5 rounded"
 									/>
-									<span style="color: var(--text-primary)">Show Cover Images</span>
+									<span class="text-content">Show Cover Images</span>
 								</label>
-								<p class="text-xs mt-1 ml-8" style="color: var(--text-secondary)">Display book covers in collection views</p>
+								<p class="text-xs mt-1 ml-8 text-content-muted">Display book covers in collection views</p>
 							</div>
 							<div class="mb-4">
 								<label class="flex items-center space-x-3 cursor-pointer">
@@ -373,19 +379,19 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 										id="settings-show-progress"
 										class="w-5 h-5 rounded"
 									/>
-									<span style="color: var(--text-primary)">Show Reading Progress</span>
+									<span class="text-content">Show Reading Progress</span>
 								</label>
-								<p class="text-xs mt-1 ml-8" style="color: var(--text-secondary)">Display progress indicators for books</p>
+								<p class="text-xs mt-1 ml-8 text-content-muted">Display progress indicators for books</p>
 							</div>
 						</div>
 						<div class="flex justify-end space-x-3">
-							<button type="button" @click="hideDeviceSettingsModal()" class="btn-secondary px-4 py-2 rounded-lg">
+							<button type="button" @click="hideDeviceSettingsModal()" class="btn btn-secondary">
 								Cancel
 							</button>
-							<button type="button" @click="handleRevokeDevice()" class="btn-danger px-4 py-2 rounded-lg">
+							<button type="button" @click="handleRevokeDevice()" class="btn btn-danger">
 								Revoke Device
 							</button>
-							<button type="submit" class="btn-primary px-4 py-2 rounded-lg">
+							<button type="submit" class="btn btn-primary">
 								Save Settings
 							</button>
 						</div>
@@ -393,66 +399,68 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 				</div>
 			</div>
 			<!-- Device Shelf Mappings Modal -->
-			<div id="shelf-mappings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" style="background-color: var(--bg-secondary); border-color: var(--border);">
+			<div id="shelf-mappings-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+				<div class="card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
 					<div class="flex justify-between items-center mb-6">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Collection to Shelf Mappings</h2>
-						<button @click="hideShelfMappingsModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+						<h2 class="text-xl font-bold text-content">Collection to Shelf Mappings</h2>
+						<button @click="hideShelfMappingsModal()" class="icon-btn" aria-label="Close">
+							@Icon("close", "h-5 w-5")
+						</button>
 					</div>
 					<input type="hidden" id="mappings-device-id"/>
 					<div id="shelf-mappings-container" class="space-y-4 mb-6">
-						<p style="color: var(--text-secondary)">Loading mappings...</p>
+						<p class="text-content-muted">Loading mappings...</p>
 					</div>
 					<div class="flex justify-end space-x-3">
-						<button type="button" @click="hideShelfMappingsModal()" class="btn-secondary px-4 py-2 rounded-lg">
+						<button type="button" @click="hideShelfMappingsModal()" class="btn btn-secondary">
 							Close
 						</button>
-						<button type="button" @click="showAddMappingModal()" class="btn-primary px-4 py-2 rounded-lg">
-							➕ Add Mapping
+						<button type="button" @click="showAddMappingModal()" class="btn btn-primary">
+							@Icon("plus", "h-4 w-4")
+							Add Mapping
 						</button>
 					</div>
 				</div>
 			</div>
 			<!-- Add/Edit Shelf Mapping Modal -->
-			<div id="add-mapping-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
+			<div id="add-mapping-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+				<div class="card p-6 w-full max-w-md mx-4">
 					<div class="flex justify-between items-center mb-6">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Add Collection Mapping</h2>
-						<button @click="hideAddMappingModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+						<h2 class="text-xl font-bold text-content">Add Collection Mapping</h2>
+						<button @click="hideAddMappingModal()" class="icon-btn" aria-label="Close">
+							@Icon("close", "h-5 w-5")
+						</button>
 					</div>
 					<form id="mapping-form" @submit="handleSaveMapping($event)">
 						<input type="hidden" id="mapping-device-id"/>
 						<input type="hidden" id="mapping-id"/>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Collection</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Collection</label>
 							<select
 								id="mapping-collection"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							>
 								<option value="">Select collection...</option>
 							</select>
 						</div>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Device Shelf Name</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Device Shelf Name</label>
 							<input
 								type="text"
 								id="mapping-shelf-name"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 								placeholder="e.g., Sci-Fi"
 							/>
-							<p class="text-xs mt-1" style="color: var(--text-secondary)">Name of the shelf on this device</p>
+							<p class="text-xs mt-1 text-content-muted">Name of the shelf on this device</p>
 						</div>
 						<div class="mb-6">
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Sync Direction</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Sync Direction</label>
 							<select
 								id="mapping-sync-direction"
 								required
-								class="w-full px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input"
 							>
 								<option value="bidirectional">Bidirectional (sync both ways)</option>
 								<option value="book_to_device">Bookhoard → Device</option>
@@ -461,10 +469,10 @@ templ Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []P
 							</select>
 						</div>
 						<div class="flex justify-end space-x-3">
-							<button type="button" @click="hideAddMappingModal()" class="btn-secondary px-4 py-2 rounded-lg">
+							<button type="button" @click="hideAddMappingModal()" class="btn btn-secondary">
 								Cancel
 							</button>
-							<button type="submit" class="btn-primary px-4 py-2 rounded-lg">
+							<button type="submit" class="btn btn-primary">
 								Save Mapping
 							</button>
 						</div>
diff --git a/templates/devices_templ.go b/templates/devices_templ.go
index b0cfdf8..6e7861b 100644
--- a/templates/devices_templ.go
+++ b/templates/devices_templ.go
@@ -39,325 +39,445 @@ func Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []Pe
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><!-- Header Section --><div class=\"mb-8\"><div class=\"flex justify-between items-center\"><div><h1 class=\"text-3xl font-bold\" style=\"color: var(--text-primary)\">Device Management</h1><p style=\"color: var(--text-secondary)\">Manage your reading devices and sync settings</p></div><button @click=\"showAddDeviceModal()\" class=\"btn-primary px-4 py-2 rounded-lg\">➕ Add New Device</button></div></div><!-- Devices Grid --><div id=\"devices-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"><!-- Empty state -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><!-- Header Section --><div class=\"mb-8\"><div class=\"flex justify-between items-center\"><div><h1 class=\"text-2xl font-bold tracking-tight text-content\">Device Management</h1><p class=\"text-content-muted\">Manage your reading devices and sync settings</p></div><button @click=\"showAddDeviceModal()\" class=\"btn btn-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("plus", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "Add New Device</button></div></div><!-- Devices Grid --><div id=\"devices-container\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"><!-- Empty state -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(devices) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div id=\"empty-state\" class=\"text-center py-16 col-span-full\" style=\"color: var(--text-secondary)\"><div class=\"text-6xl mb-4\">📱</div><h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--text-primary)\">No Devices Yet</h3><p class=\"mb-4\">Add your reading devices to enable cross-device sync</p><button @click=\"showAddDeviceModal()\" class=\"btn-primary px-4 py-2 rounded-lg\">Add Your First Device</button></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div id=\"empty-state\" class=\"text-center py-16 col-span-full text-content-muted\"><div class=\"mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-brand\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("device", "h-7 w-7").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div><h3 class=\"text-xl font-semibold mb-2 text-content\">No Devices Yet</h3><p class=\"mb-4\">Add your reading devices to enable cross-device sync</p><button @click=\"showAddDeviceModal()\" class=\"btn btn-primary\">Add Your First Device</button></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<!-- Devices Grid -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<!-- Devices Grid -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(devices) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div id=\"devices-grid\" class=\"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div id=\"devices-grid\" class=\"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for _, device := range devices {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex items-start justify-between mb-4\"><div class=\"text-4xl\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"card p-6\"><div class=\"flex items-start justify-between mb-4\"><div class=\"text-4xl\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if device.DeviceType == "koreader" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "📖")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "📖")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else if device.DeviceType == "kobo" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "📚")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "📚")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else if device.DeviceType == "web" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "🌐")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "🌐")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "📱")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "📱")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div><div class=\"flex space-x-2\"><button @click=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div><div class=\"flex space-x-2\"><button @click=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var2 string
 				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.ResolveAttributeValue("showShelfMappings('" + device.ID.String() + "')")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 61, Col: 77}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 64, Col: 77}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-secondary); background-color: var(--bg-primary);\">📚</button> <button @click=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\" class=\"icon-btn\" aria-label=\"Shelf mappings\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = Icon("library", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</button> <button @click=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var3 string
 				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.ResolveAttributeValue("showDeviceSettings('" + device.ID.String() + "')")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 64, Col: 78}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 67, Col: 78}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-secondary); background-color: var(--bg-primary);\">⚙️</button></div></div><h3 class=\"text-lg font-semibold mb-1\" style=\"color: var(--text-primary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"icon-btn\" aria-label=\"Device settings\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = Icon("settings", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</button></div></div><h3 class=\"text-lg font-semibold mb-1 text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(device.DeviceName)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 69, Col: 102}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 72, Col: 80}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</h3><p class=\"text-sm mb-4\" style=\"color: var(--text-secondary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</h3><p class=\"text-sm mb-4 text-content-muted\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var5 string
 				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(device.DeviceType)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 70, Col: 89}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 73, Col: 71}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</p><div class=\"space-y-2 text-sm mb-4\"><div class=\"flex justify-between\"><span style=\"color: var(--text-secondary)\">Sync Status</span> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</p><div class=\"space-y-2 text-sm mb-4\"><div class=\"flex justify-between\"><span class=\"text-content-muted\">Sync Status</span> ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if device.SyncEnabled {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<span style=\"color: var(--accent)\">✓ Enabled</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<span class=\"inline-flex items-center gap-1 text-brand\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = Icon("check", "h-3.5 w-3.5").Render(ctx, templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "Enabled</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<span style=\"color: var(--text-secondary)\">✗ Disabled</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<span class=\"inline-flex items-center gap-1 text-content-muted\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = Icon("close", "h-3.5 w-3.5").Render(ctx, templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "Disabled</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div><div class=\"flex justify-between\"><span style=\"color: var(--text-secondary)\">Last Sync</span> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div><div class=\"flex justify-between\"><span class=\"text-content-muted\">Last Sync</span> ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if device.LastSync != nil {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<span style=\"color: var(--text-primary)\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<span class=\"text-content\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var6 string
 					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(FormatInTimezone(*device.LastSync, user.Timezone))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 83, Col: 104}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 92, Col: 90}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<span style=\"color: var(--text-primary)\">Never</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<span class=\"text-content\">Never</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div><div class=\"flex justify-between\"><span style=\"color: var(--text-secondary)\">Last Seen</span> ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</div><div class=\"flex justify-between\"><span class=\"text-content-muted\">Last Seen</span> ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if device.LastSeen != nil {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<span style=\"color: var(--text-primary)\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<span class=\"text-content\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var7 string
 					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(FormatInTimezone(*device.LastSeen, user.Timezone))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 91, Col: 104}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 100, Col: 90}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				} else {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<span style=\"color: var(--text-primary)\">Never</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<span class=\"text-content\">Never</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div></div><!-- NEW: Sync URL & Token Management --><div class=\"border-t pt-4\" style=\"border-color: var(--border);\"><p class=\"text-xs font-semibold mb-2\" style=\"color: var(--text-secondary)\">DEVICE SYNC CONFIGURATION</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</div></div><!-- NEW: Sync URL & Token Management --><div class=\"border-t border-line pt-4\"><p class=\"text-xs font-semibold mb-2 text-content-muted\">DEVICE SYNC CONFIGURATION</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				if device.DeviceType == "kobo" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<!-- Kobo: Copy Full Sync URL --> <div class=\"mb-3\"><label class=\"block text-xs mb-1\" style=\"color: var(--text-secondary)\">Kobo Sync URL</label><div class=\"flex space-x-2\"><input type=\"text\" id=\"sync-url-{ device.ID }\" readonly value=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<!-- Kobo: Copy Full Sync URL --> <div class=\"mb-3\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Kobo Sync URL</label><div class=\"flex space-x-2\"><input type=\"text\" id=\"sync-url-{ device.ID }\" readonly value=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var8 string
 					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.ResolveAttributeValue(baseURL + "/api/sync/kobo/" + device.AuthToken)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 109, Col: 68}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 118, Col: 68}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8)
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\" class=\"flex-1 px-3 py-2 text-xs rounded border\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"> <button @click=\"copyToClipboard(document.getElementById('sync-url-{ device.ID }').value, 'Kobo sync URL')\" class=\"px-3 py-2 text-xs rounded hover:opacity-80\" style=\"background-color: var(--accent); color: white;\">📋 Copy</button></div><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary);\">Paste this URL into Kobo's <code class=\"px-1 py-0.5 rounded\" style=\"background-color: var(--bg-primary);\">api_endpoint</code> setting</p></div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\" class=\"input flex-1 text-xs\"> <button @click=\"copyToClipboard(document.getElementById('sync-url-{ device.ID }').value, 'Kobo sync URL')\" class=\"btn btn-primary text-xs\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = Icon("copy", "h-3.5 w-3.5").Render(ctx, templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "Copy</button></div><p class=\"text-xs mt-1 text-content-muted\">Paste this URL into Kobo's <code class=\"px-1 py-0.5 rounded bg-surface\">api_endpoint</code> setting</p></div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
 				if device.DeviceType == "koreader" {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<!-- KOReader: Copy Auth Token --> <div class=\"mb-3\"><label class=\"block text-xs mb-1\" style=\"color: var(--text-secondary)\">Auth Token (for plugin)</label><div class=\"flex space-x-2\"><input type=\"text\" id=\"auth-token-{ device.ID }\" readonly value=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<!-- KOReader: Copy Auth Token --> <div class=\"mb-3\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Auth Token (for plugin)</label><div class=\"flex space-x-2\"><input type=\"text\" id=\"auth-token-{ device.ID }\" readonly value=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var9 string
 					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.ResolveAttributeValue(device.AuthToken)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 133, Col: 38}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 141, Col: 38}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var9)
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" class=\"flex-1 px-3 py-2 text-xs rounded border\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border); font-family: monospace;\"> <button @click=\"copyToClipboard(document.getElementById('auth-token-{ device.ID }').value, 'Auth token')\" class=\"px-3 py-2 text-xs rounded hover:opacity-80\" style=\"background-color: var(--accent); color: white;\">📋 Copy</button></div><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary);\">Enter this token in the KOReader plugin settings</p></div>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\" class=\"input flex-1 text-xs font-mono\"> <button @click=\"copyToClipboard(document.getElementById('auth-token-{ device.ID }').value, 'Auth token')\" class=\"btn btn-primary text-xs\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = Icon("copy", "h-3.5 w-3.5").Render(ctx, templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "Copy</button></div><p class=\"text-xs mt-1 text-content-muted\">Enter this token in the KOReader plugin settings</p></div>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<!-- Regenerate Token Button --><button hx-put=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<!-- Regenerate Token Button --><button hx-put=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.ResolveAttributeValue("/api/devices/" + device.ID.String() + "/regenerate-token")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 150, Col: 78}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 157, Col: 78}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\" hx-confirm=\"⚠️ Old token will immediately stop working. Regenerate anyway?\" class=\"w-full px-3 py-2 text-xs rounded border hover:opacity-80\" style=\"border-color: var(--border); color: var(--text-secondary); background-color: var(--bg-primary);\">🔄 Regenerate Token</button><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary);\">⚠️ Old token will immediately stop working</p></div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\" hx-confirm=\"⚠️ Old token will immediately stop working. Regenerate anyway?\" class=\"btn btn-secondary w-full text-xs\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = Icon("refresh", "h-3.5 w-3.5").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "Regenerate Token</button><p class=\"text-xs mt-1 inline-flex items-center gap-1 text-content-muted\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = Icon("alert", "h-3 w-3").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "Old token will immediately stop working</p></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div><!-- Pending Registrations -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</div><!-- Pending Registrations -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(pendingRegistrations) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<div id=\"pending-section\" class=\"mt-12\"><h2 class=\"text-2xl font-bold mb-4\" style=\"color: var(--text-primary)\">Pending Device Registrations</h2><div class=\"space-y-4\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div id=\"pending-section\" class=\"mt-12\"><h2 class=\"text-2xl font-bold tracking-tight mb-4 text-content\">Pending Device Registrations</h2><div class=\"space-y-4\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for _, reg := range pendingRegistrations {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<div class=\"card p-4 rounded-lg border flex items-center justify-between\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "<div class=\"card p-4 flex items-center justify-between\"><div><h3 class=\"font-semibold text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(reg.DeviceName)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 172, Col: 87}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 182, Col: 65}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</h3><p class=\"text-sm\" style=\"color: var(--text-secondary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "</h3><p class=\"text-sm text-content-muted\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(reg.DeviceType)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 174, Col: 27}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 184, Col: 27}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, " - Expires in ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, " - Expires in ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(reg.ExpiresAt)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 174, Col: 58}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 184, Col: 58}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "</p></div><div class=\"flex space-x-2\"><button @click=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "</p></div><div class=\"flex space-x-2\"><button @click=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.ResolveAttributeValue("approveDevice('" + reg.RegistrationID + "')")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 178, Col: 72}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 188, Col: 72}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "\" class=\"btn-primary px-4 py-2 rounded-lg text-sm\">Approve</button> <button @click=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "\" class=\"btn btn-primary text-sm\">Approve</button> <button @click=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.ResolveAttributeValue("rejectDevice('" + reg.RegistrationID + "')")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 181, Col: 71}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/devices.templ`, Line: 191, Col: 71}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var15)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\" class=\"btn-danger px-4 py-2 rounded-lg text-sm\">Reject</button></div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "\" class=\"btn btn-danger text-sm\">Reject</button></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "</div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "<!-- Sync Queue Section --><div id=\"sync-queue-section\" class=\"mt-12 hidden\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Sync Queue</h2><button @click=\"clearSyncQueue()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Clear Queue</button></div><div id=\"sync-queue\" class=\"space-y-3\"></div></div></div><!-- Add Device Modal --><div id=\"add-device-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add New Device</h2><button @click=\"hideAddDeviceModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"add-device-form\" @submit=\"handleAddDevice($event)\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Name</label> <input type=\"text\" id=\"device-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"My Kindle Paperwhite\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Type</label> <select id=\"device-type\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select device type...</option> <option value=\"koreader\">KOReader (Kindle, Kobo, PocketBook)</option> <option value=\"kobo\">Kobo E-Reader</option> <option value=\"web\">Web Browser</option> <option value=\"mobile\">Mobile App</option></select></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Identifier</label> <input type=\"text\" id=\"device-identifier\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"Hardware ID or Serial Number\"><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary)\">Enter your device's unique identifier</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideAddDeviceModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Register Device</button></div></form></div></div><!-- Device Settings Modal --><div id=\"device-settings-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Device Settings</h2><button @click=\"hideDeviceSettingsModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"device-settings-form\" @submit=\"handleSaveDeviceSettings($event)\"><input type=\"hidden\" id=\"settings-device-id\"> <input type=\"hidden\" id=\"settings-device-type\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Name</label> <input type=\"text\" id=\"settings-device-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-sync-enabled\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Enable Sync</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Allow this device to sync reading progress</p></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-auto-sync\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Auto Sync</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Automatically sync changes</p></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sync Frequency</label> <select id=\"settings-sync-frequency\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"1\">Every 1 minute</option> <option value=\"5\" selected>Every 5 minutes</option> <option value=\"15\">Every 15 minutes</option> <option value=\"30\">Every 30 minutes</option> <option value=\"60\">Every hour</option></select></div><div class=\"border-t pt-6 mb-6\" style=\"border-color: var(--border);\"><h3 class=\"text-lg font-semibold mb-4\" style=\"color: var(--text-primary)\">Collection View Settings</h3><p class=\"text-sm mb-4\" style=\"color: var(--text-secondary)\">Configure how collections are displayed on this device</p><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Default View Mode</label> <select id=\"settings-view-mode\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"grid\">Grid View</option> <option value=\"list\">List View</option> <option value=\"compact\">Compact View</option></select></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sort Collections By</label> <select id=\"settings-sort-order\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"name\">Collection Name</option> <option value=\"created\">Date Created</option> <option value=\"book_count\">Book Count</option> <option value=\"recent\">Recently Added</option></select></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Items Per Page</label> <select id=\"settings-items-per-page\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"12\">12 items</option> <option value=\"24\" selected>24 items</option> <option value=\"48\">48 items</option> <option value=\"96\">96 items</option></select></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-show-covers\" checked class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Show Cover Images</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Display book covers in collection views</p></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-show-progress\" class=\"w-5 h-5 rounded\"> <span style=\"color: var(--text-primary)\">Show Reading Progress</span></label><p class=\"text-xs mt-1 ml-8\" style=\"color: var(--text-secondary)\">Display progress indicators for books</p></div></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideDeviceSettingsModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" @click=\"handleRevokeDevice()\" class=\"btn-danger px-4 py-2 rounded-lg\">Revoke Device</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Save Settings</button></div></form></div></div><!-- Device Shelf Mappings Modal --><div id=\"shelf-mappings-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Collection to Shelf Mappings</h2><button @click=\"hideShelfMappingsModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><input type=\"hidden\" id=\"mappings-device-id\"><div id=\"shelf-mappings-container\" class=\"space-y-4 mb-6\"><p style=\"color: var(--text-secondary)\">Loading mappings...</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideShelfMappingsModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Close</button> <button type=\"button\" @click=\"showAddMappingModal()\" class=\"btn-primary px-4 py-2 rounded-lg\">➕ Add Mapping</button></div></div></div><!-- Add/Edit Shelf Mapping Modal --><div id=\"add-mapping-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Collection Mapping</h2><button @click=\"hideAddMappingModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><form id=\"mapping-form\" @submit=\"handleSaveMapping($event)\"><input type=\"hidden\" id=\"mapping-device-id\"> <input type=\"hidden\" id=\"mapping-id\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Collection</label> <select id=\"mapping-collection\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select collection...</option></select></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device Shelf Name</label> <input type=\"text\" id=\"mapping-shelf-name\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" placeholder=\"e.g., Sci-Fi\"><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary)\">Name of the shelf on this device</p></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sync Direction</label> <select id=\"mapping-sync-direction\" required class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"bidirectional\">Bidirectional (sync both ways)</option> <option value=\"book_to_device\">Bookhoard → Device</option> <option value=\"device_to_book\">Device → Bookhoard</option> <option value=\"none\">No sync</option></select></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideAddMappingModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Save Mapping</button></div></form></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "<!-- Sync Queue Section --><div id=\"sync-queue-section\" class=\"mt-12 hidden\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-2xl font-bold tracking-tight text-content\">Sync Queue</h2><button @click=\"clearSyncQueue()\" class=\"btn btn-secondary\">Clear Queue</button></div><div id=\"sync-queue\" class=\"space-y-3\"></div></div></div><!-- Add Device Modal --><div id=\"add-device-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold text-content\">Add New Device</h2><button @click=\"hideAddDeviceModal()\" class=\"icon-btn\" aria-label=\"Close\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "</button></div><form id=\"add-device-form\" @submit=\"handleAddDevice($event)\"><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Device Name</label> <input type=\"text\" id=\"device-name\" required class=\"input\" placeholder=\"My Kindle Paperwhite\"></div><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Device Type</label> <select id=\"device-type\" required class=\"input\"><option value=\"\">Select device type...</option> <option value=\"koreader\">KOReader (Kindle, Kobo, PocketBook)</option> <option value=\"kobo\">Kobo E-Reader</option> <option value=\"web\">Web Browser</option> <option value=\"mobile\">Mobile App</option></select></div><div class=\"mb-6\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Device Identifier</label> <input type=\"text\" id=\"device-identifier\" required class=\"input\" placeholder=\"Hardware ID or Serial Number\"><p class=\"text-xs mt-1 text-content-muted\">Enter your device's unique identifier</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideAddDeviceModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Register Device</button></div></form></div></div><!-- Device Settings Modal --><div id=\"device-settings-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold text-content\">Device Settings</h2><button @click=\"hideDeviceSettingsModal()\" class=\"icon-btn\" aria-label=\"Close\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "</button></div><form id=\"device-settings-form\" @submit=\"handleSaveDeviceSettings($event)\"><input type=\"hidden\" id=\"settings-device-id\"> <input type=\"hidden\" id=\"settings-device-type\"><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Device Name</label> <input type=\"text\" id=\"settings-device-name\" required class=\"input\"></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-sync-enabled\" checked class=\"w-5 h-5 rounded\"> <span class=\"text-content\">Enable Sync</span></label><p class=\"text-xs mt-1 ml-8 text-content-muted\">Allow this device to sync reading progress</p></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-auto-sync\" checked class=\"w-5 h-5 rounded\"> <span class=\"text-content\">Auto Sync</span></label><p class=\"text-xs mt-1 ml-8 text-content-muted\">Automatically sync changes</p></div><div class=\"mb-6\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Sync Frequency</label> <select id=\"settings-sync-frequency\" class=\"input\"><option value=\"1\">Every 1 minute</option> <option value=\"5\" selected>Every 5 minutes</option> <option value=\"15\">Every 15 minutes</option> <option value=\"30\">Every 30 minutes</option> <option value=\"60\">Every hour</option></select></div><div class=\"border-t border-line pt-6 mb-6\"><h3 class=\"text-lg font-semibold mb-4 text-content\">Collection View Settings</h3><p class=\"text-sm mb-4 text-content-muted\">Configure how collections are displayed on this device</p><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Default View Mode</label> <select id=\"settings-view-mode\" class=\"input\"><option value=\"grid\">Grid View</option> <option value=\"list\">List View</option> <option value=\"compact\">Compact View</option></select></div><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Sort Collections By</label> <select id=\"settings-sort-order\" class=\"input\"><option value=\"name\">Collection Name</option> <option value=\"created\">Date Created</option> <option value=\"book_count\">Book Count</option> <option value=\"recent\">Recently Added</option></select></div><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Items Per Page</label> <select id=\"settings-items-per-page\" class=\"input\"><option value=\"12\">12 items</option> <option value=\"24\" selected>24 items</option> <option value=\"48\">48 items</option> <option value=\"96\">96 items</option></select></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-show-covers\" checked class=\"w-5 h-5 rounded\"> <span class=\"text-content\">Show Cover Images</span></label><p class=\"text-xs mt-1 ml-8 text-content-muted\">Display book covers in collection views</p></div><div class=\"mb-4\"><label class=\"flex items-center space-x-3 cursor-pointer\"><input type=\"checkbox\" id=\"settings-show-progress\" class=\"w-5 h-5 rounded\"> <span class=\"text-content\">Show Reading Progress</span></label><p class=\"text-xs mt-1 ml-8 text-content-muted\">Display progress indicators for books</p></div></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideDeviceSettingsModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"button\" @click=\"handleRevokeDevice()\" class=\"btn btn-danger\">Revoke Device</button> <button type=\"submit\" class=\"btn btn-primary\">Save Settings</button></div></form></div></div><!-- Device Shelf Mappings Modal --><div id=\"shelf-mappings-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold text-content\">Collection to Shelf Mappings</h2><button @click=\"hideShelfMappingsModal()\" class=\"icon-btn\" aria-label=\"Close\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "</button></div><input type=\"hidden\" id=\"mappings-device-id\"><div id=\"shelf-mappings-container\" class=\"space-y-4 mb-6\"><p class=\"text-content-muted\">Loading mappings...</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideShelfMappingsModal()\" class=\"btn btn-secondary\">Close</button> <button type=\"button\" @click=\"showAddMappingModal()\" class=\"btn btn-primary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("plus", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "Add Mapping</button></div></div></div><!-- Add/Edit Shelf Mapping Modal --><div id=\"add-mapping-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold text-content\">Add Collection Mapping</h2><button @click=\"hideAddMappingModal()\" class=\"icon-btn\" aria-label=\"Close\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</button></div><form id=\"mapping-form\" @submit=\"handleSaveMapping($event)\"><input type=\"hidden\" id=\"mapping-device-id\"> <input type=\"hidden\" id=\"mapping-id\"><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Collection</label> <select id=\"mapping-collection\" required class=\"input\"><option value=\"\">Select collection...</option></select></div><div class=\"mb-4\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Device Shelf Name</label> <input type=\"text\" id=\"mapping-shelf-name\" required class=\"input\" placeholder=\"e.g., Sci-Fi\"><p class=\"text-xs mt-1 text-content-muted\">Name of the shelf on this device</p></div><div class=\"mb-6\"><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Sync Direction</label> <select id=\"mapping-sync-direction\" required class=\"input\"><option value=\"bidirectional\">Bidirectional (sync both ways)</option> <option value=\"book_to_device\">Bookhoard → Device</option> <option value=\"device_to_book\">Device → Bookhoard</option> <option value=\"none\">No sync</option></select></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideAddMappingModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Save Mapping</button></div></form></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -365,7 +485,7 @@ func Devices(user User, devices []handlers.DeviceInfo, pendingRegistrations []Pe
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "</body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/docs.templ b/templates/docs.templ
index c53b7af..247541a 100644
--- a/templates/docs.templ
+++ b/templates/docs.templ
@@ -12,27 +12,25 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 			<link href="/static/style.css" rel="stylesheet"/>
 			<link rel="stylesheet" href="/static/highlight-dark.min.css"/>
 		</head>
-		<body x-data="docs" x-init="initializeSearch(); highlightCurrentPage(); initializeCodeCopyButtons()" class={ "theme-" + user.Theme + " page-docs bg-background-primary text-text-primary font-sans antialiased" }>
+		<body x-data="docs" x-init="initializeSearch(); highlightCurrentPage(); initializeCodeCopyButtons()" class={ "theme-" + user.Theme + " page-docs bg-surface text-content font-sans antialiased" }>
 			@Header(user, currentPath)
 			<!-- Mobile Menu Button -->
 			<button
-				class="lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80"
+				class="icon-btn lg:hidden fixed top-4 left-4 z-50"
 				onclick="toggleSidebar()"
 				aria-label="Toggle menu"
 			>
-				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-				</svg>
+				@Icon("menu", "h-6 w-6")
 			</button>
 			<!-- Search Results Overlay -->
 			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out"></div>
 			<!-- Sidebar -->
-			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out">
+			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-surface-raised border-r border-line overflow-y-auto mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out">
 				<!-- Search -->
-				<div class="p-4 border-b border-border">
+				<div class="p-4 border-b border-line">
 					<input
 						type="text"
-						class="search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm"
+						class="search-input input text-sm"
 						placeholder="Search documentation..."
 						id="docs-search"
 					/>
@@ -41,7 +39,7 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 				for _, section := range nav.Sections {
 					<div class="nav-section mb-6">
 						<div
-							class="nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between"
+							class="nav-section-title font-semibold text-xs uppercase tracking-wide text-content-muted px-4 py-3 cursor-pointer select-none flex items-center justify-between"
 							@click="toggleSection($el)"
 						>
 							<span>{ section.Title }</span>
@@ -52,7 +50,7 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 						if section.Collapsed {
 							<div class="nav-items hidden" data-collapsed="true">
 								for _, item := range section.Items {
-									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline">
+									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-content-muted hover:text-brand text-sm transition-colors no-underline">
 										<span class="mr-2">{ item.Icon }</span>{ item.Title }
 									</a>
 								}
@@ -60,7 +58,7 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 						} else {
 							<div class="nav-items" data-collapsed="false">
 								for _, item := range section.Items {
-									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline">
+									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-content-muted hover:text-brand text-sm transition-colors no-underline">
 										<span class="mr-2">{ item.Icon }</span>{ item.Title }
 									</a>
 								}
@@ -73,28 +71,28 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 			<main class="main-content lg:ml-72 p-8 max-w-4xl mx-auto">
 				<!-- Breadcrumb -->
 				if len(doc.Breadcrumb) > 0 {
-					<nav class="breadcrumb flex gap-2 text-sm text-text-secondary mb-8" aria-label="Breadcrumb">
+					<nav class="breadcrumb flex gap-2 text-sm text-content-muted mb-8" aria-label="Breadcrumb">
 						for i, crumb := range doc.Breadcrumb {
 							if i > 0 {
-								<span class="text-text-secondary/50">›</span>
+								<span class="text-content-muted/50">›</span>
 							}
-							<a href={ crumb.URL } class="text-accent hover:underline no-underline">{ crumb.Title }</a>
+							<a href={ crumb.URL } class="text-brand hover:underline no-underline">{ crumb.Title }</a>
 						}
 					</nav>
 				}
 				<!-- Title -->
-				<h1 class="text-4xl font-bold mb-8 text-text-primary">{ doc.Title }</h1>
+				<h1 class="text-3xl font-bold tracking-tight mb-8 text-content">{ doc.Title }</h1>
 				<!-- Table of Contents -->
 				if len(doc.TOC) > 0 {
-					<details class="toc bg-background-secondary p-4 rounded-lg mb-8 border border-border">
+					<details class="toc bg-surface-raised p-4 rounded-lg mb-8 border border-line">
 						<summary class="cursor-pointer hover:opacity-80 transition-opacity">
-							<strong class="text-text-primary font-semibold">On this page</strong>
-							<span class="ml-2 text-text-secondary text-xs">▼</span>
+							<strong class="text-content font-semibold">On this page</strong>
+							<span class="ml-2 text-content-muted text-xs">▼</span>
 						</summary>
 						for _, item := range doc.TOC {
 							<a
 								href={ "#" + item.Anchor }
-								class="toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline"
+								class="toc-item block py-1 text-content-muted hover:text-brand text-sm no-underline"
 								style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) }
 							>
 								{ item.Title }
diff --git a/templates/docs_templ.go b/templates/docs_templ.go
index c7c572b..f3beea7 100644
--- a/templates/docs_templ.go
+++ b/templates/docs_templ.go
@@ -48,7 +48,7 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var3 = []any{"theme-" + user.Theme + " page-docs bg-background-primary text-text-primary font-sans antialiased"}
+		var templ_7745c5c3_Var3 = []any{"theme-" + user.Theme + " page-docs bg-surface text-content font-sans antialiased"}
 		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -74,267 +74,275 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<!-- Mobile Menu Button --><button class=\"lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80\" onclick=\"toggleSidebar()\" aria-label=\"Toggle menu\"><svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"></path></svg></button><!-- Search Results Overlay --><div id=\"search-results\" class=\"hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out\"><!-- Search --><div class=\"p-4 border-b border-border\"><input type=\"text\" class=\"search-input w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent text-sm\" placeholder=\"Search documentation...\" id=\"docs-search\"></div><!-- Navigation Sections -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<!-- Mobile Menu Button --><button class=\"icon-btn lg:hidden fixed top-4 left-4 z-50\" onclick=\"toggleSidebar()\" aria-label=\"Toggle menu\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("menu", "h-6 w-6").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</button><!-- Search Results Overlay --><div id=\"search-results\" class=\"hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-surface-raised border-r border-line overflow-y-auto mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out\"><!-- Search --><div class=\"p-4 border-b border-line\"><input type=\"text\" class=\"search-input input text-sm\" placeholder=\"Search documentation...\" id=\"docs-search\"></div><!-- Navigation Sections -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, section := range nav.Sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" @click=\"toggleSection($el)\"><span>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wide text-content-muted px-4 py-3 cursor-pointer select-none flex items-center justify-between\" @click=\"toggleSection($el)\"><span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 47, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 45, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if section.Collapsed {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				for _, item := range section.Items {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<a href=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<a href=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var6 templ.SafeURL
 					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 55, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 53, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\" class=\"nav-item block py-2 px-4 pl-8 text-content-muted hover:text-brand text-sm transition-colors no-underline\"><span class=\"mr-2\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var7 string
 					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 56, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 54, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var8 string
 					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 56, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 54, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"nav-items\" data-collapsed=\"false\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div class=\"nav-items\" data-collapsed=\"false\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				for _, item := range section.Items {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<a href=\"")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<a href=\"")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var9 templ.SafeURL
 					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 63, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 61, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\" class=\"nav-item block py-2 px-4 pl-8 text-content-muted hover:text-brand text-sm transition-colors no-underline\"><span class=\"mr-2\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var10 string
 					templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 64, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 62, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					var templ_7745c5c3_Var11 string
 					templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 64, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 62, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</a>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</a>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.Breadcrumb) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<nav class=\"breadcrumb flex gap-2 text-sm text-text-secondary mb-8\" aria-label=\"Breadcrumb\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<nav class=\"breadcrumb flex gap-2 text-sm text-content-muted mb-8\" aria-label=\"Breadcrumb\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for i, crumb := range doc.Breadcrumb {
 				if i > 0 {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<span class=\"text-text-secondary/50\">›</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<span class=\"text-content-muted/50\">›</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " <a href=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " <a href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var12 templ.SafeURL
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 81, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 79, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "\" class=\"text-accent hover:underline no-underline\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\" class=\"text-brand hover:underline no-underline\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 81, Col: 91}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 79, Col: 90}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</a>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</a>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</nav>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</nav>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<!-- Title --><h1 class=\"text-4xl font-bold mb-8 text-text-primary\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<!-- Title --><h1 class=\"text-3xl font-bold tracking-tight mb-8 text-content\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 86, Col: 69}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 84, Col: 79}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</h1><!-- Table of Contents -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</h1><!-- Table of Contents -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.TOC) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<details class=\"toc bg-background-secondary p-4 rounded-lg mb-8 border border-border\"><summary class=\"cursor-pointer hover:opacity-80 transition-opacity\"><strong class=\"text-text-primary font-semibold\">On this page</strong> <span class=\"ml-2 text-text-secondary text-xs\">▼</span></summary> ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<details class=\"toc bg-surface-raised p-4 rounded-lg mb-8 border border-line\"><summary class=\"cursor-pointer hover:opacity-80 transition-opacity\"><strong class=\"text-content font-semibold\">On this page</strong> <span class=\"ml-2 text-content-muted text-xs\">▼</span></summary> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for _, item := range doc.TOC {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<a href=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<a href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var15 templ.SafeURL
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 96, Col: 32}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 94, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "\" class=\"toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline\" style=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\" class=\"toc-item block py-1 text-content-muted hover:text-brand text-sm no-underline\" style=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var16 string
 				templ_7745c5c3_Var16, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("margin-left: " + fmt.Sprintf("%drem", item.Level))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 98, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 96, Col: 66}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var17 string
 				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 100, Col: 20}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 98, Col: 20}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</a>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</a>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "</details>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</details>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<!-- Content --><div class=\"prose prose-invert max-w-none\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<!-- Content --><div class=\"prose prose-invert max-w-none\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -342,7 +350,7 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</div></main></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</div></main></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/filter_item.templ b/templates/filter_item.templ
index 20a2b6d..7b57cbd 100644
--- a/templates/filter_item.templ
+++ b/templates/filter_item.templ
@@ -3,26 +3,23 @@ package templates
 // FilterItem renders a single saved filter item for the list
 templ FilterItem(id string, name string) {
 	<div
-		class="flex items-center justify-between p-2 rounded hover:opacity-80"
-		style="background-color: var(--bg-primary);"
+		class="flex items-center justify-between p-2 rounded bg-surface hover:bg-surface-hover"
 		data-filter-id={ id }
 	>
 		<button
 			data-action="load-filter"
 			@click="loadFilter($event)"
-			class="flex-1 text-left px-2 py-1 rounded"
-			style="color: var(--text-primary);"
+			class="flex-1 text-left px-2 py-1 rounded text-content"
 		>
 			{ name }
 		</button>
 		<button
 			data-action="delete-filter"
 			@click="deleteFilter($event)"
-			class="p-1 hover:opacity-70 rounded"
-			style="color: var(--text-secondary);"
+			class="icon-btn"
 			title="Delete filter"
 		>
-			🗑
+			@Icon("trash", "h-4 w-4")
 		</button>
 	</div>
 }
diff --git a/templates/filter_item_templ.go b/templates/filter_item_templ.go
index 4e3187a..b90daeb 100644
--- a/templates/filter_item_templ.go
+++ b/templates/filter_item_templ.go
@@ -30,33 +30,41 @@ func FilterItem(id string, name string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"flex items-center justify-between p-2 rounded hover:opacity-80\" style=\"background-color: var(--bg-primary);\" data-filter-id=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"flex items-center justify-between p-2 rounded bg-surface hover:bg-surface-hover\" data-filter-id=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.ResolveAttributeValue(id)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 8, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 7, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><button data-action=\"load-filter\" @click=\"loadFilter($event)\" class=\"flex-1 text-left px-2 py-1 rounded\" style=\"color: var(--text-primary);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"><button data-action=\"load-filter\" @click=\"loadFilter($event)\" class=\"flex-1 text-left px-2 py-1 rounded text-content\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 16, Col: 9}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/filter_item.templ`, Line: 14, Col: 9}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</button> <button data-action=\"delete-filter\" @click=\"deleteFilter($event)\" class=\"p-1 hover:opacity-70 rounded\" style=\"color: var(--text-secondary);\" title=\"Delete filter\">🗑</button></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</button> <button data-action=\"delete-filter\" @click=\"deleteFilter($event)\" class=\"icon-btn\" title=\"Delete filter\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("trash", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</button></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/index.templ b/templates/index.templ
index 7a49115..37790e4 100644
--- a/templates/index.templ
+++ b/templates/index.templ
@@ -12,109 +12,87 @@ templ Index(loggedIn bool) {
 			<link href="/static/style.css" rel="stylesheet"/>
 		</head>
 		<body class="theme-tokyo-night" x-data="index" x-init="initIndexTheme(); checkAuthRedirect()">
-			<!-- Hero Section -->
+			<!-- Hero -->
 			<div class="relative overflow-hidden">
-				<div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10"></div>
-				<div class="relative max-w-7xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
-					<div class="flex justify-between items-start mb-8">
-						<div></div>
-						<select id="theme-select" @change="changeTheme" class="px-3 py-2 border rounded text-sm" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
-							<option value="tokyo-night">Tokyo Night</option>
-							<option value="dracula">Dracula</option>
-							<option value="nord">Nord</option>
-							<option value="solarized-dark">Solarized Dark</option>
-							<option value="monokai">Monokai</option>
-							<option value="one-dark-pro">One Dark Pro</option>
-							<option value="material-dark">Material Dark</option>
-							<option value="catppuccin-mocha">Catppuccin Mocha</option>
-							<option value="catppuccin-macchiato">Catppuccin Macchiato</option>
-							<option value="catppuccin-frappe">Catppuccin Frappé</option>
-							<option value="catppuccin-latte">Catppuccin Latte</option>
+				<div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/15 via-transparent to-brand/5"></div>
+				<div class="relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
+					<div class="absolute right-4 top-4">
+						<select id="theme-select" @change="changeTheme" class="input w-auto py-1.5 text-xs">
+							for _, t := range ThemeOptions {
+								<option value={ t.Name }>{ t.Label }</option>
+							}
 						</select>
 					</div>
 					<div class="text-center">
-						<h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold" style="color: var(--text-primary)">
-							📚 Bookhoard
+						<div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand/15 text-brand">
+							@Icon("book-open", "h-9 w-9")
+						</div>
+						<h1 class="text-4xl font-extrabold tracking-tight text-content sm:text-6xl">
+							Your books, beautifully organized.
 						</h1>
-						<p class="mt-6 max-w-2xl mx-auto text-xl" style="color: var(--text-secondary)">
-							Your personal ebook management system. Track reading progress, organize your library, and enjoy beautiful themes.
+						<p class="mx-auto mt-5 max-w-2xl text-lg text-content-muted">
+							A self-hosted ebook and comic library with cross-device sync, a built-in reader, and reading analytics.
 						</p>
-						<div class="mt-10">
-							<a href="#auth" class="btn-primary px-8 py-3 rounded-lg font-medium text-lg">
+						<div class="mt-8 flex justify-center">
+							<a href="#auth" class="btn btn-primary px-8 py-3 text-base">
+								@Icon("arrow-right", "h-4 w-4")
 								Get Started
 							</a>
 						</div>
 					</div>
 				</div>
 			</div>
-			<!-- Features Section -->
-			<div class="py-16" style="background-color: var(--bg-secondary)">
-				<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-					<div class="text-center mb-12">
-						<h2 class="text-3xl font-extrabold" style="color: var(--text-primary)">Why Bookhoard?</h2>
-						<p class="mt-4 text-lg" style="color: var(--text-secondary)">Discover the features that make ebook management effortless</p>
+
+			<!-- Features -->
+			<div class="border-t border-line bg-surface-raised">
+				<div class="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
+					<div class="mb-10 text-center">
+						<h2 class="text-2xl font-bold tracking-tight text-content">Why Bookhoard?</h2>
 					</div>
-					<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-						<div class="card p-6 rounded-xl border">
-							<div class="text-center">
-								<div class="mx-auto w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
-									<span class="text-white text-2xl">📖</span>
-								</div>
-								<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Reading Progress</h3>
-								<p style="color: var(--text-secondary)">Track your reading progress across all your ebooks with detailed statistics.</p>
+					<div class="grid grid-cols-1 gap-5 md:grid-cols-3">
+						<div class="card p-6">
+							<div class="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand/15 text-brand">
+								@Icon("clock", "h-6 w-6")
 							</div>
+							<h3 class="mb-1.5 text-base font-semibold text-content">Cross-device sync</h3>
+							<p class="text-sm leading-relaxed text-content-muted">Sync reading progress, bookmarks, and highlights across KOReader, Kobo, and the web.</p>
 						</div>
-						<div class="card p-6 rounded-xl border">
-							<div class="text-center">
-								<div class="mx-auto w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
-									<span class="text-white text-2xl">🎨</span>
-								</div>
-								<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Beautiful Themes</h3>
-								<p style="color: var(--text-secondary)">Choose from 11 stunning themes including Tokyo Night, Dracula, and Catppuccin variants.</p>
+						<div class="card p-6">
+							<div class="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand/15 text-brand">
+								@Icon("book-open", "h-6 w-6")
 							</div>
+							<h3 class="mb-1.5 text-base font-semibold text-content">Built-in reader</h3>
+							<p class="text-sm leading-relaxed text-content-muted">Read EPUB, PDF, and comics in the browser with custom themes, fonts, and layouts.</p>
 						</div>
-						<div class="card p-6 rounded-xl border">
-							<div class="text-center">
-								<div class="mx-auto w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
-									<span class="text-white text-2xl">⚡</span>
-								</div>
-								<h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Fast & Modern</h3>
-								<p style="color: var(--text-secondary)">Built with Go and HTMX for lightning-fast performance and smooth interactions.</p>
+						<div class="card p-6">
+							<div class="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand/15 text-brand">
+								@Icon("chart", "h-6 w-6")
 							</div>
+							<h3 class="mb-1.5 text-base font-semibold text-content">Smart collections</h3>
+							<p class="text-sm leading-relaxed text-content-muted">Organize with rules-based collections, series tracking, and reading analytics.</p>
 						</div>
 					</div>
 				</div>
 			</div>
-			<!-- Auth Section -->
+
+			<!-- Auth -->
 			if !loggedIn {
-				<div id="auth" class="py-16">
-					<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-						<div class="text-center mb-12">
-							<h2 class="text-3xl font-extrabold" style="color: var(--text-primary)">Join Bookhoard Today</h2>
-							<p class="mt-4 text-lg" style="color: var(--text-secondary)">Sign in to start managing your ebook library</p>
-						</div>
-						<div class="grid grid-cols-1 gap-8">
-							<div class="card p-8 rounded-xl border">
-								<h3 class="text-2xl font-semibold mb-6 text-center" style="color: var(--text-primary)">Login</h3>
-								<form hx-post="/api/auth/login" hx-target="#auth-result" hx-swap="innerHTML">
-									<div class="space-y-4">
-										<div>
-											<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email or Username</label>
-											<input type="text" name="login" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-										</div>
-										<div>
-											<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Password</label>
-											<input type="password" name="password" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-										</div>
-										<button type="submit" class="w-full btn-primary py-2 rounded-lg font-medium">
-											Sign In
-										</button>
-									</div>
-								</form>
+				<div id="auth" class="mx-auto max-w-md px-4 py-16 sm:px-6 lg:px-8">
+					<div class="card p-6">
+						<h2 class="mb-5 text-center text-lg font-bold text-content">Sign in to Bookhoard</h2>
+						<form hx-post="/api/auth/login" hx-target="#auth-result" hx-swap="innerHTML" class="space-y-4">
+							<div>
+								<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Email or Username</label>
+								<input type="text" name="login" class="input" required/>
 							</div>
-						</div>
-						<div id="auth-result" class="mt-8 text-center"></div>
+							<div>
+								<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Password</label>
+								<input type="password" name="password" class="input" required/>
+							</div>
+							<button type="submit" class="btn btn-primary w-full">Sign In</button>
+						</form>
 					</div>
+					<div id="auth-result" class="mt-6 text-center"></div>
 				</div>
 			}
 		</body>
diff --git a/templates/index_templ.go b/templates/index_templ.go
index 42a1530..dd474ac 100644
--- a/templates/index_templ.go
+++ b/templates/index_templ.go
@@ -29,17 +29,93 @@ func Index(loggedIn bool) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Bookhoard - Home</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\" x-data=\"index\" x-init=\"initIndexTheme(); checkAuthRedirect()\"><!-- Hero Section --><div class=\"relative overflow-hidden\"><div class=\"absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10\"></div><div class=\"relative max-w-7xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8\"><div class=\"flex justify-between items-start mb-8\"><div></div><select id=\"theme-select\" @change=\"changeTheme\" class=\"px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\"><option value=\"tokyo-night\">Tokyo Night</option> <option value=\"dracula\">Dracula</option> <option value=\"nord\">Nord</option> <option value=\"solarized-dark\">Solarized Dark</option> <option value=\"monokai\">Monokai</option> <option value=\"one-dark-pro\">One Dark Pro</option> <option value=\"material-dark\">Material Dark</option> <option value=\"catppuccin-mocha\">Catppuccin Mocha</option> <option value=\"catppuccin-macchiato\">Catppuccin Macchiato</option> <option value=\"catppuccin-frappe\">Catppuccin Frappé</option> <option value=\"catppuccin-latte\">Catppuccin Latte</option></select></div><div class=\"text-center\"><h1 class=\"text-4xl sm:text-6xl lg:text-7xl font-extrabold\" style=\"color: var(--text-primary)\">📚 Bookhoard</h1><p class=\"mt-6 max-w-2xl mx-auto text-xl\" style=\"color: var(--text-secondary)\">Your personal ebook management system. Track reading progress, organize your library, and enjoy beautiful themes.</p><div class=\"mt-10\"><a href=\"#auth\" class=\"btn-primary px-8 py-3 rounded-lg font-medium text-lg\">Get Started</a></div></div></div></div><!-- Features Section --><div class=\"py-16\" style=\"background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center mb-12\"><h2 class=\"text-3xl font-extrabold\" style=\"color: var(--text-primary)\">Why Bookhoard?</h2><p class=\"mt-4 text-lg\" style=\"color: var(--text-secondary)\">Discover the features that make ebook management effortless</p></div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\"><div class=\"card p-6 rounded-xl border\"><div class=\"text-center\"><div class=\"mx-auto w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4\"><span class=\"text-white text-2xl\">📖</span></div><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-primary)\">Reading Progress</h3><p style=\"color: var(--text-secondary)\">Track your reading progress across all your ebooks with detailed statistics.</p></div></div><div class=\"card p-6 rounded-xl border\"><div class=\"text-center\"><div class=\"mx-auto w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4\"><span class=\"text-white text-2xl\">🎨</span></div><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-primary)\">Beautiful Themes</h3><p style=\"color: var(--text-secondary)\">Choose from 11 stunning themes including Tokyo Night, Dracula, and Catppuccin variants.</p></div></div><div class=\"card p-6 rounded-xl border\"><div class=\"text-center\"><div class=\"mx-auto w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4\"><span class=\"text-white text-2xl\">⚡</span></div><h3 class=\"text-lg font-semibold mb-2\" style=\"color: var(--text-primary)\">Fast & Modern</h3><p style=\"color: var(--text-secondary)\">Built with Go and HTMX for lightning-fast performance and smooth interactions.</p></div></div></div></div></div><!-- Auth Section -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Bookhoard - Home</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\" x-data=\"index\" x-init=\"initIndexTheme(); checkAuthRedirect()\"><!-- Hero --><div class=\"relative overflow-hidden\"><div class=\"pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/15 via-transparent to-brand/5\"></div><div class=\"relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8 lg:py-28\"><div class=\"absolute right-4 top-4\"><select id=\"theme-select\" @change=\"changeTheme\" class=\"input w-auto py-1.5 text-xs\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		if !loggedIn {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div id=\"auth\" class=\"py-16\"><div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"text-center mb-12\"><h2 class=\"text-3xl font-extrabold\" style=\"color: var(--text-primary)\">Join Bookhoard Today</h2><p class=\"mt-4 text-lg\" style=\"color: var(--text-secondary)\">Sign in to start managing your ebook library</p></div><div class=\"grid grid-cols-1 gap-8\"><div class=\"card p-8 rounded-xl border\"><h3 class=\"text-2xl font-semibold mb-6 text-center\" style=\"color: var(--text-primary)\">Login</h3><form hx-post=\"/api/auth/login\" hx-target=\"#auth-result\" hx-swap=\"innerHTML\"><div class=\"space-y-4\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Email or Username</label> <input type=\"text\" name=\"login\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><button type=\"submit\" class=\"w-full btn-primary py-2 rounded-lg font-medium\">Sign In</button></div></form></div></div><div id=\"auth-result\" class=\"mt-8 text-center\"></div></div></div>")
+		for _, t := range ThemeOptions {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var2 string
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.ResolveAttributeValue(t.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 22, Col: 30}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(t.Label)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 22, Col: 42}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</option>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</select></div><div class=\"text-center\"><div class=\"mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-brand/15 text-brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("book-open", "h-9 w-9").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div><h1 class=\"text-4xl font-extrabold tracking-tight text-content sm:text-6xl\">Your books, beautifully organized.</h1><p class=\"mx-auto mt-5 max-w-2xl text-lg text-content-muted\">A self-hosted ebook and comic library with cross-device sync, a built-in reader, and reading analytics.</p><div class=\"mt-8 flex justify-center\"><a href=\"#auth\" class=\"btn btn-primary px-8 py-3 text-base\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("arrow-right", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "Get Started</a></div></div></div></div><!-- Features --><div class=\"border-t border-line bg-surface-raised\"><div class=\"mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8\"><div class=\"mb-10 text-center\"><h2 class=\"text-2xl font-bold tracking-tight text-content\">Why Bookhoard?</h2></div><div class=\"grid grid-cols-1 gap-5 md:grid-cols-3\"><div class=\"card p-6\"><div class=\"mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand/15 text-brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("clock", "h-6 w-6").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div><h3 class=\"mb-1.5 text-base font-semibold text-content\">Cross-device sync</h3><p class=\"text-sm leading-relaxed text-content-muted\">Sync reading progress, bookmarks, and highlights across KOReader, Kobo, and the web.</p></div><div class=\"card p-6\"><div class=\"mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand/15 text-brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("book-open", "h-6 w-6").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div><h3 class=\"mb-1.5 text-base font-semibold text-content\">Built-in reader</h3><p class=\"text-sm leading-relaxed text-content-muted\">Read EPUB, PDF, and comics in the browser with custom themes, fonts, and layouts.</p></div><div class=\"card p-6\"><div class=\"mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-brand/15 text-brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("chart", "h-6 w-6").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div><h3 class=\"mb-1.5 text-base font-semibold text-content\">Smart collections</h3><p class=\"text-sm leading-relaxed text-content-muted\">Organize with rules-based collections, series tracking, and reading analytics.</p></div></div></div></div><!-- Auth -->")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !loggedIn {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div id=\"auth\" class=\"mx-auto max-w-md px-4 py-16 sm:px-6 lg:px-8\"><div class=\"card p-6\"><h2 class=\"mb-5 text-center text-lg font-bold text-content\">Sign in to Bookhoard</h2><form hx-post=\"/api/auth/login\" hx-target=\"#auth-result\" hx-swap=\"innerHTML\" class=\"space-y-4\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Email or Username</label> <input type=\"text\" name=\"login\" class=\"input\" required></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Password</label> <input type=\"password\" name=\"password\" class=\"input\" required></div><button type=\"submit\" class=\"btn btn-primary w-full\">Sign In</button></form></div><div id=\"auth-result\" class=\"mt-6 text-center\"></div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/login.templ b/templates/login.templ
index c0dfa73..dfff669 100644
--- a/templates/login.templ
+++ b/templates/login.templ
@@ -6,60 +6,54 @@ templ Login(sessionExpired bool, deleted bool) {
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<title>Login</title>
+			<title>Login - Bookhoard</title>
 			<script src="/static/htmx.min.js"></script>
 			<script type="module" src="/static/main.js"></script>
 			<link href="/static/style.css" rel="stylesheet"/>
 		</head>
-		<body class="theme-tokyo-night min-h-screen" x-data="login" x-init="initLoginTheme()">
-			<div class="container mx-auto px-4 py-8 max-w-md">
-				<div class="flex justify-between items-center mb-8">
-					<h1 class="text-3xl font-bold">Login to Bookhoard</h1>
-					<select id="theme-select" @change="changeTheme()" class="px-3 py-2 border rounded" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
-						<option value="tokyo-night">Tokyo Night</option>
-						<option value="dracula">Dracula</option>
-						<option value="nord">Nord</option>
-						<option value="solarized-dark">Solarized Dark</option>
-						<option value="monokai">Monokai</option>
-						<option value="one-dark-pro">One Dark Pro</option>
-						<option value="material-dark">Material Dark</option>
-						<option value="catppuccin-mocha">Catppuccin Mocha</option>
-						<option value="catppuccin-macchiato">Catppuccin Macchiato</option>
-						<option value="catppuccin-frappe">Catppuccin Frappé</option>
-						<option value="catppuccin-latte">Catppuccin Latte</option>
+		<body class="theme-tokyo-night flex min-h-screen items-center justify-center px-4" x-data="login" x-init="initLoginTheme()">
+			<div class="w-full max-w-md">
+				<div class="mb-8 flex items-center justify-center gap-2 text-2xl font-bold tracking-tight text-content">
+					@Icon("book-open", "h-7 w-7 text-brand")
+					Bookhoard
+				</div>
+				<div class="mb-6 flex justify-end">
+					<select id="theme-select" @change="changeTheme()" class="input w-auto py-1.5 text-xs">
+						for _, t := range ThemeOptions {
+							<option value={ t.Name }>{ t.Label }</option>
+						}
 					</select>
 				</div>
-				if sessionExpired {
-					<div class="mb-4 p-3 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--accent);">
-						<p style="color: var(--text-primary);">
-							Your session has expired. Please log in again to continue.
-						</p>
+				<div class="card p-6">
+					<h1 class="mb-5 text-xl font-bold text-content">Welcome back</h1>
+					if sessionExpired {
+						<div class="mb-4 flex items-start gap-2 rounded-lg border border-brand/40 bg-brand/10 p-3 text-sm text-content">
+							@Icon("info", "h-4 w-4 mt-0.5 shrink-0 text-brand")
+							<span>Your session has expired. Please log in again to continue.</span>
+						</div>
+					}
+					if deleted {
+						<div class="mb-4 flex items-start gap-2 rounded-lg border border-success/40 bg-success/10 p-3 text-sm text-content">
+							@Icon("check-circle", "h-4 w-4 mt-0.5 shrink-0 text-success")
+							<span>Your account has been deleted successfully.</span>
+						</div>
+					}
+					<form hx-post="/api/auth/login" hx-target="#result" hx-swap="innerHTML" class="space-y-4">
+						<div>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Email or Username</label>
+							<input type="text" name="login" class="input" required/>
+						</div>
+						<div>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Password</label>
+							<input type="password" name="password" class="input" required/>
+						</div>
+						<button type="submit" class="btn btn-primary w-full">Sign In</button>
+					</form>
+					<div id="result" class="mt-4 text-center text-sm"></div>
+					<div class="mt-4 border-t border-line pt-4 text-center">
+						<a href="/register" class="text-sm text-content-muted transition-colors hover:text-content">Don't have an account? Sign Up</a>
 					</div>
-				}
-				if deleted {
-					<div class="mb-4 p-3 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--accent);">
-						<p style="color: var(--text-primary);">
-							Your account has been deleted successfully.
-						</p>
-					</div>
-				}
-				<form hx-post="/api/auth/login" hx-target="#result" hx-swap="innerHTML" class="card p-6 rounded-lg shadow-md border">
-					<div class="mb-4">
-						<label class="block mb-2" style="color: var(--text-secondary)">Email or Username</label>
-						<input type="text" name="login" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-					</div>
-					<div class="mb-4">
-						<label class="block mb-2" style="color: var(--text-secondary)">Password</label>
-						<input type="password" name="password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-					</div>
-					<button type="submit" class="btn-primary w-full py-2 rounded">
-						Sign In
-					</button>
-				</form>
-				<div id="result" class="mt-4 text-center"></div>
-				<p class="text-center mt-4">
-					<a href="/register" class="text-blue-500 hover:underline">Don't have an account? Sign Up</a>
-				</p>
+				</div>
 			</div>
 		</body>
 	</html>
diff --git a/templates/login_templ.go b/templates/login_templ.go
index c56d09c..dd14ab4 100644
--- a/templates/login_templ.go
+++ b/templates/login_templ.go
@@ -29,23 +29,83 @@ func Login(sessionExpired bool, deleted bool) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Login</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\" x-data=\"login\" x-init=\"initLoginTheme()\"><div class=\"container mx-auto px-4 py-8 max-w-md\"><div class=\"flex justify-between items-center mb-8\"><h1 class=\"text-3xl font-bold\">Login to Bookhoard</h1><select id=\"theme-select\" @change=\"changeTheme()\" class=\"px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\"><option value=\"tokyo-night\">Tokyo Night</option> <option value=\"dracula\">Dracula</option> <option value=\"nord\">Nord</option> <option value=\"solarized-dark\">Solarized Dark</option> <option value=\"monokai\">Monokai</option> <option value=\"one-dark-pro\">One Dark Pro</option> <option value=\"material-dark\">Material Dark</option> <option value=\"catppuccin-mocha\">Catppuccin Mocha</option> <option value=\"catppuccin-macchiato\">Catppuccin Macchiato</option> <option value=\"catppuccin-frappe\">Catppuccin Frappé</option> <option value=\"catppuccin-latte\">Catppuccin Latte</option></select></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Login - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night flex min-h-screen items-center justify-center px-4\" x-data=\"login\" x-init=\"initLoginTheme()\"><div class=\"w-full max-w-md\"><div class=\"mb-8 flex items-center justify-center gap-2 text-2xl font-bold tracking-tight text-content\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("book-open", "h-7 w-7 text-brand").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "Bookhoard</div><div class=\"mb-6 flex justify-end\"><select id=\"theme-select\" @change=\"changeTheme()\" class=\"input w-auto py-1.5 text-xs\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, t := range ThemeOptions {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var2 string
+			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.ResolveAttributeValue(t.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/login.templ`, Line: 23, Col: 29}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var3 string
+			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(t.Label)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/login.templ`, Line: 23, Col: 41}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</select></div><div class=\"card p-6\"><h1 class=\"mb-5 text-xl font-bold text-content\">Welcome back</h1>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if sessionExpired {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"mb-4 p-3 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--accent);\"><p style=\"color: var(--text-primary);\">Your session has expired. Please log in again to continue.</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"mb-4 flex items-start gap-2 rounded-lg border border-brand/40 bg-brand/10 p-3 text-sm text-content\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("info", "h-4 w-4 mt-0.5 shrink-0 text-brand").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<span>Your session has expired. Please log in again to continue.</span></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
 		if deleted {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"mb-4 p-3 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--accent);\"><p style=\"color: var(--text-primary);\">Your account has been deleted successfully.</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"mb-4 flex items-start gap-2 rounded-lg border border-success/40 bg-success/10 p-3 text-sm text-content\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("check-circle", "h-4 w-4 mt-0.5 shrink-0 text-success").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<span>Your account has been deleted successfully.</span></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<form hx-post=\"/api/auth/login\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"card p-6 rounded-lg shadow-md border\"><div class=\"mb-4\"><label class=\"block mb-2\" style=\"color: var(--text-secondary)\">Email or Username</label> <input type=\"text\" name=\"login\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block mb-2\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><button type=\"submit\" class=\"btn-primary w-full py-2 rounded\">Sign In</button></form><div id=\"result\" class=\"mt-4 text-center\"></div><p class=\"text-center mt-4\"><a href=\"/register\" class=\"text-blue-500 hover:underline\">Don't have an account? Sign Up</a></p></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<form hx-post=\"/api/auth/login\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"space-y-4\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Email or Username</label> <input type=\"text\" name=\"login\" class=\"input\" required></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Password</label> <input type=\"password\" name=\"password\" class=\"input\" required></div><button type=\"submit\" class=\"btn btn-primary w-full\">Sign In</button></form><div id=\"result\" class=\"mt-4 text-center text-sm\"></div><div class=\"mt-4 border-t border-line pt-4 text-center\"><a href=\"/register\" class=\"text-sm text-content-muted transition-colors hover:text-content\">Don't have an account? Sign Up</a></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/profile.templ b/templates/profile.templ
index 0c0fe25..d483852 100644
--- a/templates/profile.templ
+++ b/templates/profile.templ
@@ -13,18 +13,18 @@ templ Profile(user User) {
 			@Header(user, "/profile")
 			<main class="max-w-4xl mx-auto px-4 py-8">
 				<div class="mb-8">
-					<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Profile Settings</h1>
-					<p style="color: var(--text-secondary)">Manage your account information and preferences</p>
+					<h1 class="text-2xl font-bold tracking-tight mb-2 text-content">Profile Settings</h1>
+					<p class="text-content-muted">Manage your account information and preferences</p>
 				</div>
 				<div class="space-y-8">
 					<!-- Account Information & Password - uses reusable ProfileForm -->
-					<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+					<div class="card p-6">
 						@ProfileForm(user, "/api/auth/profile", true, false, false)
 					</div>
 					<!-- Danger Zone -->
-					<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-						<h3 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Danger Zone</h3>
-						<p style="color: var(--text-secondary)" class="mb-4">Once you delete your account, there is no going back. Please be certain.</p>
+					<div class="card p-6">
+						<h3 class="text-xl font-semibold mb-4 text-content">Danger Zone</h3>
+						<p class="text-content-muted mb-4">Once you delete your account, there is no going back. Please be certain.</p>
 						<button @click="confirmDeleteAccount()" class="px-4 py-2 rounded text-sm" style="background-color: #dc2626; color: white;">
 							Remove My Account
 						</button>
diff --git a/templates/profile_form.templ b/templates/profile_form.templ
index fe00f1e..5ec27d1 100644
--- a/templates/profile_form.templ
+++ b/templates/profile_form.templ
@@ -10,56 +10,51 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 	>
 		<!-- Account Information -->
 		<div>
-			<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary)">Account Information</h3>
+			<h3 class="text-lg font-semibold mb-4 text-content">Account Information</h3>
 			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 				<div>
-					<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Username</label>
+					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Username</label>
 					<input
 						type="text"
 						name="username"
 						value={ user.Username }
-						class="w-full px-3 py-2 border rounded"
-						style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+						class="input"
 					/>
 				</div>
 				<div>
-					<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email Address</label>
+					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Email Address</label>
 					<input
 						type="email"
 						name="email"
 						value={ user.Email }
-						class="w-full px-3 py-2 border rounded"
-						style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+						class="input"
 					/>
 				</div>
 				<div>
-					<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">First Name</label>
+					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">First Name</label>
 					<input
 						type="text"
 						name="first_name"
 						value={ user.FirstName }
 						placeholder="Optional"
-						class="w-full px-3 py-2 border rounded"
-						style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+						class="input"
 					/>
 				</div>
 				<div>
-					<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Last Name</label>
+					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Last Name</label>
 					<input
 						type="text"
 						name="last_name"
 						value={ user.LastName }
 						placeholder="Optional"
-						class="w-full px-3 py-2 border rounded"
-						style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+						class="input"
 					/>
 				</div>
 				<div>
-					<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Theme</label>
+					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Theme</label>
 					<select
 						name="theme"
-						class="w-full px-3 py-2 border rounded"
-						style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+						class="input"
 					>
 						<option value="tokyo-night" selected?={ user.Theme == "tokyo-night" }>Tokyo Night</option>
 						<option value="dracula" selected?={ user.Theme == "dracula" }>Dracula</option>
@@ -71,11 +66,10 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 					</select>
 				</div>
 				<div>
-					<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Timezone</label>
+					<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Timezone</label>
 					<select
 						name="timezone"
-						class="w-full px-3 py-2 border rounded"
-						style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+						class="input"
 					>
 						<option value="UTC" selected?={ user.Timezone == "UTC" }>UTC (UTC+0)</option>
 						<option value="Pacific/Honolulu" selected?={ user.Timezone == "Pacific/Honolulu" }>Hawaii (UTC-10)</option>
@@ -105,11 +99,10 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 				</div>
 				if showRoleField {
 					<div>
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Role</label>
+						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Role</label>
 						<select
 							name="role"
-							class="w-full px-3 py-2 border rounded"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 						>
 							<option value="user" selected?={ user.Role == "user" }>User</option>
 							<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
@@ -120,37 +113,34 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 		</div>
 		<!-- Change Password Section -->
 		<div>
-			<h3 class="text-lg font-semibold mb-4" style="color: var(--text-primary)">Change Password</h3>
+			<h3 class="text-lg font-semibold mb-4 text-content">Change Password</h3>
 			if requireCurrentPassword {
 				<!-- Self-edit: require current password -->
 				<div class="space-y-4 max-w-md">
 					<div>
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Current Password</label>
+						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Current Password</label>
 						<input
 							type="password"
 							name="current_password"
-							class="w-full px-3 py-2 border rounded"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							required
 						/>
 					</div>
 					<div>
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">New Password</label>
+						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">New Password</label>
 						<input
 							type="password"
 							name="new_password"
-							class="w-full px-3 py-2 border rounded"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							minlength="6"
 						/>
 					</div>
 					<div>
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm New Password</label>
+						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Confirm New Password</label>
 						<input
 							type="password"
 							name="confirm_password"
-							class="w-full px-3 py-2 border rounded"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							minlength="6"
 						/>
 					</div>
@@ -161,8 +151,7 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 						hx-target="#password-result"
 						hx-swap="innerHTML"
 						hx-include="closest form"
-						class="px-4 py-2 rounded"
-						style="background-color: var(--accent); color: white;"
+						class="btn btn-primary"
 					>
 						Update Password
 					</button>
@@ -170,27 +159,25 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 				</div>
 			} else {
 				<!-- Admin edit: no current password required -->
-				<p class="text-sm italic mb-4" style="color: var(--text-secondary);">
+				<p class="text-sm italic mb-4 text-content-muted">
 					As an admin, you can change this user's password without knowing their current password.
 				</p>
 				<div class="space-y-4 max-w-md">
 					<div>
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">New Password</label>
+						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">New Password</label>
 						<input
 							type="password"
 							name="new_password"
-							class="w-full px-3 py-2 border rounded"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							minlength="6"
 						/>
 					</div>
 					<div>
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm New Password</label>
+						<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Confirm New Password</label>
 						<input
 							type="password"
 							name="confirm_password"
-							class="w-full px-3 py-2 border rounded"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input"
 							minlength="6"
 						/>
 					</div>
@@ -201,8 +188,7 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 						hx-target="#password-result"
 						hx-swap="innerHTML"
 						hx-include="closest form"
-						class="px-4 py-2 rounded"
-						style="background-color: var(--accent); color: white;"
+						class="btn btn-primary"
 					>
 						Reset Password
 					</button>
@@ -211,21 +197,19 @@ templ ProfileForm(user User, actionURL string, requireCurrentPassword bool, show
 			}
 		</div>
 		<!-- Actions -->
-		<div class="flex justify-end gap-3 pt-6 border-t" style="border-color: var(--border);">
+		<div class="flex justify-end gap-3 pt-6 border-t border-line">
 			if showCancelButton {
 				<button
 					type="button"
 					@click="closeProfileModal()"
-					class="px-4 py-2 rounded"
-					style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
+					class="btn btn-secondary"
 				>
 					Cancel
 				</button>
 			}
 			<button
 				type="submit"
-				class="px-4 py-2 rounded"
-				style="background-color: var(--accent); color: white;"
+				class="btn btn-primary"
 			>
 				Save Changes
 			</button>
diff --git a/templates/profile_form_templ.go b/templates/profile_form_templ.go
index ea7b12a..20169d9 100644
--- a/templates/profile_form_templ.go
+++ b/templates/profile_form_templ.go
@@ -42,7 +42,7 @@ func ProfileForm(user User, actionURL string, requireCurrentPassword bool, showR
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" hx-target=\"#profile-result\" hx-swap=\"innerHTML\" hx-headers='{\"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")}' class=\"space-y-6\"><!-- Account Information --><div><h3 class=\"text-lg font-semibold mb-4\" style=\"color: var(--text-primary)\">Account Information</h3><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Username</label> <input type=\"text\" name=\"username\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" hx-target=\"#profile-result\" hx-swap=\"innerHTML\" hx-headers='{\"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")}' class=\"space-y-6\"><!-- Account Information --><div><h3 class=\"text-lg font-semibold mb-4 text-content\">Account Information</h3><div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Username</label> <input type=\"text\" name=\"username\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -55,46 +55,46 @@ func ProfileForm(user User, actionURL string, requireCurrentPassword bool, showR
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Email Address</label> <input type=\"email\" name=\"email\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Email Address</label> <input type=\"email\" name=\"email\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.ResolveAttributeValue(user.Email)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 30, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 29, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var4)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">First Name</label> <input type=\"text\" name=\"first_name\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">First Name</label> <input type=\"text\" name=\"first_name\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.ResolveAttributeValue(user.FirstName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 40, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 38, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Last Name</label> <input type=\"text\" name=\"last_name\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" placeholder=\"Optional\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Last Name</label> <input type=\"text\" name=\"last_name\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.ResolveAttributeValue(user.LastName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 51, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 48, Col: 27}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Theme</label> <select name=\"theme\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"tokyo-night\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" placeholder=\"Optional\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Theme</label> <select name=\"theme\" class=\"input\"><option value=\"tokyo-night\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -164,7 +164,7 @@ func ProfileForm(user User, actionURL string, requireCurrentPassword bool, showR
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">Material Dark</option></select></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Timezone</label> <select name=\"timezone\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"UTC\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">Material Dark</option></select></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Timezone</label> <select name=\"timezone\" class=\"input\"><option value=\"UTC\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -409,7 +409,7 @@ func ProfileForm(user User, actionURL string, requireCurrentPassword bool, showR
 			return templ_7745c5c3_Err
 		}
 		if showRoleField {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "<div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Role</label> <select name=\"role\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"user\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "<div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Role</label> <select name=\"role\" class=\"input\"><option value=\"user\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -434,45 +434,45 @@ func ProfileForm(user User, actionURL string, requireCurrentPassword bool, showR
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "</div></div><!-- Change Password Section --><div><h3 class=\"text-lg font-semibold mb-4\" style=\"color: var(--text-primary)\">Change Password</h3>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "</div></div><!-- Change Password Section --><div><h3 class=\"text-lg font-semibold mb-4 text-content\">Change Password</h3>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if requireCurrentPassword {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "<!-- Self-edit: require current password --> <div class=\"space-y-4 max-w-md\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Current Password</label> <input type=\"password\" name=\"current_password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" required></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">New Password</label> <input type=\"password\" name=\"new_password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" minlength=\"6\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Confirm New Password</label> <input type=\"password\" name=\"confirm_password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" minlength=\"6\"></div><button type=\"button\" hx-put=\"/api/auth/password\" hx-headers='{\"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")}' hx-target=\"#password-result\" hx-swap=\"innerHTML\" hx-include=\"closest form\" class=\"px-4 py-2 rounded\" style=\"background-color: var(--accent); color: white;\">Update Password</button><div id=\"password-result\" class=\"mt-2\"></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "<!-- Self-edit: require current password --> <div class=\"space-y-4 max-w-md\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Current Password</label> <input type=\"password\" name=\"current_password\" class=\"input\" required></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">New Password</label> <input type=\"password\" name=\"new_password\" class=\"input\" minlength=\"6\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Confirm New Password</label> <input type=\"password\" name=\"confirm_password\" class=\"input\" minlength=\"6\"></div><button type=\"button\" hx-put=\"/api/auth/password\" hx-headers='{\"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")}' hx-target=\"#password-result\" hx-swap=\"innerHTML\" hx-include=\"closest form\" class=\"btn btn-primary\">Update Password</button><div id=\"password-result\" class=\"mt-2\"></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "<!-- Admin edit: no current password required --> <p class=\"text-sm italic mb-4\" style=\"color: var(--text-secondary);\">As an admin, you can change this user's password without knowing their current password.</p><div class=\"space-y-4 max-w-md\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">New Password</label> <input type=\"password\" name=\"new_password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" minlength=\"6\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Confirm New Password</label> <input type=\"password\" name=\"confirm_password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\" minlength=\"6\"></div><button type=\"button\" hx-put=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "<!-- Admin edit: no current password required --> <p class=\"text-sm italic mb-4 text-content-muted\">As an admin, you can change this user's password without knowing their current password.</p><div class=\"space-y-4 max-w-md\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">New Password</label> <input type=\"password\" name=\"new_password\" class=\"input\" minlength=\"6\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Confirm New Password</label> <input type=\"password\" name=\"confirm_password\" class=\"input\" minlength=\"6\"></div><button type=\"button\" hx-put=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.ResolveAttributeValue("/api/auth/password/" + user.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 199, Col: 46}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/profile_form.templ`, Line: 186, Col: 46}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "\" hx-headers='{\"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")}' hx-target=\"#password-result\" hx-swap=\"innerHTML\" hx-include=\"closest form\" class=\"px-4 py-2 rounded\" style=\"background-color: var(--accent); color: white;\">Reset Password</button><div id=\"password-result\" class=\"mt-2\"></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "\" hx-headers='{\"Authorization\": \"Bearer \" + localStorage.getItem(\"token\")}' hx-target=\"#password-result\" hx-swap=\"innerHTML\" hx-include=\"closest form\" class=\"btn btn-primary\">Reset Password</button><div id=\"password-result\" class=\"mt-2\"></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, "</div><!-- Actions --><div class=\"flex justify-end gap-3 pt-6 border-t\" style=\"border-color: var(--border);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, "</div><!-- Actions --><div class=\"flex justify-end gap-3 pt-6 border-t border-line\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if showCancelButton {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, "<button type=\"button\" @click=\"closeProfileModal()\" class=\"px-4 py-2 rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);\">Cancel</button> ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, "<button type=\"button\" @click=\"closeProfileModal()\" class=\"btn btn-secondary\">Cancel</button> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "<button type=\"submit\" class=\"px-4 py-2 rounded\" style=\"background-color: var(--accent); color: white;\">Save Changes</button></div><div id=\"profile-result\" class=\"mt-2\"></div></form>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "<button type=\"submit\" class=\"btn btn-primary\">Save Changes</button></div><div id=\"profile-result\" class=\"mt-2\"></div></form>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/profile_modal.templ b/templates/profile_modal.templ
index 17c86b0..9d713f9 100644
--- a/templates/profile_modal.templ
+++ b/templates/profile_modal.templ
@@ -1,22 +1,21 @@
 package templates
 
 templ ProfileModal(user User) {
-	<div id="profile-modal" class="fixed inset-0 flex items-center justify-center z-50" x-data="profileModal" x-init="setupProfileModal()" style="background-color: rgba(0,0,0,0.5);">
-		<div class="rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto" style="background-color: var(--bg-secondary);">
+	<div id="profile-modal" class="fixed inset-0 flex items-center justify-center z-50" x-data="profileModal" x-init="setupProfileModal()" style="background-color: var(--surface-overlay);">
+		<div class="card max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
 			<!-- Modal Header -->
-			<div class="flex justify-between items-center p-6 border-b" style="border-color: var(--border);">
+			<div class="flex justify-between items-center p-6 border-b border-line">
 				<div>
-					<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Edit User Profile</h2>
-					<p class="text-sm mt-1" style="color: var(--text-secondary);">
+					<h2 class="text-2xl font-bold tracking-tight text-content">Edit User Profile</h2>
+					<p class="text-sm mt-1 text-content-muted">
 						{ user.Username } ({ user.Email })
 					</p>
 				</div>
 				<button
 					@click="closeProfileModal()"
-					class="text-2xl"
-					style="color: var(--text-secondary);"
+					class="btn btn-ghost"
 				>
-					&times;
+					@Icon("close", "h-5 w-5")
 				</button>
 			</div>
 
diff --git a/templates/profile_modal_templ.go b/templates/profile_modal_templ.go
index 0dbe975..4450069 100644
--- a/templates/profile_modal_templ.go
+++ b/templates/profile_modal_templ.go
@@ -29,7 +29,7 @@ func ProfileModal(user User) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"profile-modal\" class=\"fixed inset-0 flex items-center justify-center z-50\" x-data=\"profileModal\" x-init=\"setupProfileModal()\" style=\"background-color: rgba(0,0,0,0.5);\"><div class=\"rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto\" style=\"background-color: var(--bg-secondary);\"><!-- Modal Header --><div class=\"flex justify-between items-center p-6 border-b\" style=\"border-color: var(--border);\"><div><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Edit User Profile</h2><p class=\"text-sm mt-1\" style=\"color: var(--text-secondary);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"profile-modal\" class=\"fixed inset-0 flex items-center justify-center z-50\" x-data=\"profileModal\" x-init=\"setupProfileModal()\" style=\"background-color: var(--surface-overlay);\"><div class=\"card max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto\"><!-- Modal Header --><div class=\"flex justify-between items-center p-6 border-b border-line\"><div><h2 class=\"text-2xl font-bold tracking-tight text-content\">Edit User Profile</h2><p class=\"text-sm mt-1 text-content-muted\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -55,7 +55,15 @@ func ProfileModal(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ")</p></div><button @click=\"closeProfileModal()\" class=\"text-2xl\" style=\"color: var(--text-secondary);\">&times;</button></div><!-- Modal Body - uses reusable form --><div class=\"p-6\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, ")</p></div><button @click=\"closeProfileModal()\" class=\"btn btn-ghost\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</button></div><!-- Modal Body - uses reusable form --><div class=\"p-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -63,7 +71,7 @@ func ProfileModal(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/profile_templ.go b/templates/profile_templ.go
index 53f5ab1..38303e3 100644
--- a/templates/profile_templ.go
+++ b/templates/profile_templ.go
@@ -37,7 +37,7 @@ func Profile(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"max-w-4xl mx-auto px-4 py-8\"><div class=\"mb-8\"><h1 class=\"text-3xl font-bold mb-2\" style=\"color: var(--text-primary)\">Profile Settings</h1><p style=\"color: var(--text-secondary)\">Manage your account information and preferences</p></div><div class=\"space-y-8\"><!-- Account Information & Password - uses reusable ProfileForm --><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"max-w-4xl mx-auto px-4 py-8\"><div class=\"mb-8\"><h1 class=\"text-2xl font-bold tracking-tight mb-2 text-content\">Profile Settings</h1><p class=\"text-content-muted\">Manage your account information and preferences</p></div><div class=\"space-y-8\"><!-- Account Information & Password - uses reusable ProfileForm --><div class=\"card p-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -45,7 +45,7 @@ func Profile(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div><!-- Danger Zone --><div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h3 class=\"text-xl font-semibold mb-4\" style=\"color: var(--text-primary)\">Danger Zone</h3><p style=\"color: var(--text-secondary)\" class=\"mb-4\">Once you delete your account, there is no going back. Please be certain.</p><button @click=\"confirmDeleteAccount()\" class=\"px-4 py-2 rounded text-sm\" style=\"background-color: #dc2626; color: white;\">Remove My Account</button></div></div></main></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div><!-- Danger Zone --><div class=\"card p-6\"><h3 class=\"text-xl font-semibold mb-4 text-content\">Danger Zone</h3><p class=\"text-content-muted mb-4\">Once you delete your account, there is no going back. Please be certain.</p><button @click=\"confirmDeleteAccount()\" class=\"px-4 py-2 rounded text-sm\" style=\"background-color: #dc2626; color: white;\">Remove My Account</button></div></div></main></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/progress.templ b/templates/progress.templ
index a91e2c0..f3264b7 100644
--- a/templates/progress.templ
+++ b/templates/progress.templ
@@ -1,7 +1,9 @@
 package templates
 
-import "bookhoard/internal/handlers"
-import "fmt"
+import (
+	"bookhoard/internal/handlers"
+	"fmt"
+)
 
 templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage string) {
 	<!DOCTYPE html>
@@ -17,19 +19,19 @@ templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessag
 			@Header(user, "/progress")
 			<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
 				<div class="mb-8">
-					<h1 class="text-3xl font-bold" style="color: var(--text-primary)">Reading Progress</h1>
-					<p style="color: var(--text-secondary)">Track your reading progress across all devices</p>
+					<h1 class="text-2xl font-bold tracking-tight text-content">Reading Progress</h1>
+					<p class="text-content-muted">Track your reading progress across all devices</p>
 				</div>
 				<div id="progress-container" class="space-y-6">
 					if len(progressData) == 0 {
-						<div class="text-center py-16" style="color: var(--text-secondary)">
-							<div class="text-6xl mb-4">📖</div>
-							<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Progress Yet</h3>
+						<div class="text-center py-16 text-content-muted">
+							<div class="mb-4 flex justify-center">@Icon("book-open", "h-12 w-12")</div>
+							<h3 class="text-xl font-semibold mb-2 text-content">No Progress Yet</h3>
 							<p>Start reading a book to track your progress</p>
 						</div>
 					}
 					for _, item := range progressData {
-						<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+						<div class="card p-6">
 							<div class="flex gap-6">
 								<div class="flex-shrink-0">
 									<img
@@ -44,27 +46,27 @@ templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessag
 										<div>
 											<a
 												href={ "/media/" + item.MediaItemID.String() }
-												style="color: var(--text-primary); text-decoration: none;"
+												class="text-content no-underline"
 											>
 												<h3 class="font-semibold text-lg hover:opacity-80">{ item.Title }</h3>
 											</a>
 											if item.Author != "" {
-												<p class="text-sm" style="color: var(--text-secondary)">by { item.Author }</p>
+												<p class="text-sm text-content-muted">by { item.Author }</p>
 											}
 										</div>
 										<div class="text-right">
-											<span class="text-2xl font-bold" style="color: var(--accent)">{ item.ProgressPercentage }%</span>
+											<span class="text-2xl font-bold text-brand">{ item.ProgressPercentage }%</span>
 										</div>
 									</div>
 									<div class="mb-4">
-										<div class="w-full bg-gray-700 rounded-full h-3">
-											<div class="h-3 rounded-full transition-all" style={ "width: " + fmt.Sprintf("%.1f", item.ProgressPercentage) + "%; background-color: var(--accent);" }></div>
+										<div class="w-full bg-surface rounded-full h-3">
+											<div class="h-3 rounded-full transition-all bg-brand" style={ "width: " + fmt.Sprintf("%.1f", item.ProgressPercentage) + "%" }></div>
 										</div>
 									</div>
 									<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
 										<div>
-										<p style="color: var(--text-secondary)">Current Position</p>
-										<p style="color: var(--text-primary)">
+										<p class="text-content-muted">Current Position</p>
+										<p class="text-content">
 											if item.FormatGroup == "reflowable" {
 												if item.EstimatedPages > 0 {
 													{ fmt.Sprintf("Page %d of %d (est.)", item.CurrentPage, item.EstimatedPages) }
@@ -77,29 +79,29 @@ templ Progress(user User, progressData []handlers.ProgressWithMedia, errorMessag
 										</p>
 										</div>
 										<div>
-											<p style="color: var(--text-secondary)">Last Updated</p>
-											<p style="color: var(--text-primary)">{ item.LastUpdated }</p>
+											<p class="text-content-muted">Last Updated</p>
+											<p class="text-content">{ item.LastUpdated }</p>
 										</div>
 										<div>
-											<p style="color: var(--text-secondary)">Synced From</p>
+											<p class="text-content-muted">Synced From</p>
 											<div class="flex items-center gap-2">
 												<span class="text-xl">{ item.DeviceIcon }</span>
-												<span style="color: var(--text-primary)">{ item.DeviceName }</span>
+												<span class="text-content">{ item.DeviceName }</span>
 											</div>
 										</div>
 									</div>
 									if item.DeviceIcon != "" {
-										<div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
-											<div class="flex items-center gap-2 text-xs" style="color: var(--text-secondary);">
-												<span>🔄</span>
+										<div class="mt-3 pt-3 border-t border-line">
+											<div class="flex items-center gap-2 text-xs text-content-muted">
+												@Icon("sync", "h-4 w-4")
 												<span>Last sync from <strong>{ item.DeviceName }</strong></span>
 												<span>({ item.DeviceType })</span>
 											</div>
 										</div>
 									}
 									if item.EpubCFI != "" {
-										<div class="mt-2 text-xs" style="color: var(--text-secondary);">
-											<span>📍</span>
+										<div class="mt-2 text-xs text-content-muted">
+											@Icon("bookmark", "h-4 w-4")
 											<span>CFI: { item.EpubCFI }</span>
 										</div>
 									}
diff --git a/templates/progress_templ.go b/templates/progress_templ.go
index 168f326..d56ad92 100644
--- a/templates/progress_templ.go
+++ b/templates/progress_templ.go
@@ -8,8 +8,10 @@ package templates
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-import "bookhoard/internal/handlers"
-import "fmt"
+import (
+	"bookhoard/internal/handlers"
+	"fmt"
+)
 
 func Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
@@ -40,93 +42,101 @@ func Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><h1 class=\"text-3xl font-bold\" style=\"color: var(--text-primary)\">Reading Progress</h1><p style=\"color: var(--text-secondary)\">Track your reading progress across all devices</p></div><div id=\"progress-container\" class=\"space-y-6\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><h1 class=\"text-2xl font-bold tracking-tight text-content\">Reading Progress</h1><p class=\"text-content-muted\">Track your reading progress across all devices</p></div><div id=\"progress-container\" class=\"space-y-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(progressData) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"text-6xl mb-4\">📖</div><h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--text-primary)\">No Progress Yet</h3><p>Start reading a book to track your progress</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"text-center py-16 text-content-muted\"><div class=\"mb-4 flex justify-center\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("book-open", "h-12 w-12").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div><h3 class=\"text-xl font-semibold mb-2 text-content\">No Progress Yet</h3><p>Start reading a book to track your progress</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
 		for _, item := range progressData {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex gap-6\"><div class=\"flex-shrink-0\"><img src=\"{ item.CoverImagePath }\" alt=\"Cover\" class=\"w-24 h-32 object-cover rounded\" onerror=\"this.src='/static/placeholder-book.svg'\"></div><div class=\"flex-1\"><div class=\"flex justify-between items-start mb-2\"><div><a href=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"card p-6\"><div class=\"flex gap-6\"><div class=\"flex-shrink-0\"><img src=\"{ item.CoverImagePath }\" alt=\"Cover\" class=\"w-24 h-32 object-cover rounded\" onerror=\"this.src='/static/placeholder-book.svg'\"></div><div class=\"flex-1\"><div class=\"flex justify-between items-start mb-2\"><div><a href=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var2 templ.SafeURL
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinURLErrs("/media/" + item.MediaItemID.String())
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 46, Col: 56}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 48, Col: 56}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" style=\"color: var(--text-primary); text-decoration: none;\"><h3 class=\"font-semibold text-lg hover:opacity-80\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" class=\"text-content no-underline\"><h3 class=\"font-semibold text-lg hover:opacity-80\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 49, Col: 75}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 51, Col: 75}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</h3></a> ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</h3></a> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if item.Author != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<p class=\"text-sm\" style=\"color: var(--text-secondary)\">by ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<p class=\"text-sm text-content-muted\">by ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(item.Author)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 52, Col: 84}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 54, Col: 66}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div><div class=\"text-right\"><span class=\"text-2xl font-bold\" style=\"color: var(--accent)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div><div class=\"text-right\"><span class=\"text-2xl font-bold text-brand\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(item.ProgressPercentage)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 56, Col: 98}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 58, Col: 80}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "%</span></div></div><div class=\"mb-4\"><div class=\"w-full bg-gray-700 rounded-full h-3\"><div class=\"h-3 rounded-full transition-all\" style=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "%</span></div></div><div class=\"mb-4\"><div class=\"w-full bg-surface rounded-full h-3\"><div class=\"h-3 rounded-full transition-all bg-brand\" style=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var6 string
-			templ_7745c5c3_Var6, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("width: " + fmt.Sprintf("%.1f", item.ProgressPercentage) + "%; background-color: var(--accent);")
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("width: " + fmt.Sprintf("%.1f", item.ProgressPercentage) + "%")
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 61, Col: 160}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 63, Col: 135}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\"></div></div></div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-sm\"><div><p style=\"color: var(--text-secondary)\">Current Position</p><p style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "\"></div></div></div><div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-sm\"><div><p class=\"text-content-muted\">Current Position</p><p class=\"text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -135,7 +145,7 @@ func Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage
 					var templ_7745c5c3_Var7 string
 					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("Page %d of %d (est.)", item.CurrentPage, item.EstimatedPages))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 70, Col: 89}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 72, Col: 89}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 					if templ_7745c5c3_Err != nil {
@@ -145,7 +155,7 @@ func Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage
 					var templ_7745c5c3_Var8 string
 					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.1f%%", item.ProgressPercentage))
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 72, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 74, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 					if templ_7745c5c3_Err != nil {
@@ -156,113 +166,129 @@ func Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d / %d", item.CurrentPage, item.TotalPages))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 75, Col: 71}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 77, Col: 71}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</p></div><div><p style=\"color: var(--text-secondary)\">Last Updated</p><p style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</p></div><div><p class=\"text-content-muted\">Last Updated</p><p class=\"text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.LastUpdated)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 81, Col: 67}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 83, Col: 53}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</p></div><div><p style=\"color: var(--text-secondary)\">Synced From</p><div class=\"flex items-center gap-2\"><span class=\"text-xl\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</p></div><div><p class=\"text-content-muted\">Synced From</p><div class=\"flex items-center gap-2\"><span class=\"text-xl\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.DeviceIcon)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 86, Col: 51}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 88, Col: 51}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span> <span style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</span> <span class=\"text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.DeviceName)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 87, Col: 70}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 89, Col: 56}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</span></div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</span></div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if item.DeviceIcon != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div class=\"mt-3 pt-3 border-t\" style=\"border-color: var(--border);\"><div class=\"flex items-center gap-2 text-xs\" style=\"color: var(--text-secondary);\"><span>🔄</span> <span>Last sync from <strong>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"mt-3 pt-3 border-t border-line\"><div class=\"flex items-center gap-2 text-xs text-content-muted\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = Icon("sync", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<span>Last sync from <strong>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var13 string
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.DeviceName)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 95, Col: 58}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 97, Col: 58}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</strong></span> <span>(")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</strong></span> <span>(")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(item.DeviceType)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 96, Col: 36}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 98, Col: 36}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, ")</span></div></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ")</span></div></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
 			if item.EpubCFI != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"mt-2 text-xs\" style=\"color: var(--text-secondary);\"><span>📍</span> <span>CFI: ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div class=\"mt-2 text-xs text-content-muted\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = Icon("bookmark", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<span>CFI: ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(item.EpubCFI)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 103, Col: 36}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/progress.templ`, Line: 105, Col: 36}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</span></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</span></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -270,7 +296,7 @@ func Progress(user User, progressData []handlers.ProgressWithMedia, errorMessage
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/queue.templ b/templates/queue.templ
index fed6dd2..e006e21 100644
--- a/templates/queue.templ
+++ b/templates/queue.templ
@@ -18,49 +18,48 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
 				<div class="mb-8">
 					<div class="flex justify-between items-center">
 						<div>
-							<h1 class="text-3xl font-bold" style="color: var(--text-primary)">Sync Queue</h1>
-							<p style="color: var(--text-secondary)">Monitor and manage offline sync queue</p>
+							<h1 class="text-2xl font-bold tracking-tight text-content">Sync Queue</h1>
+							<p class="text-content-muted">Monitor and manage offline sync queue</p>
 						</div>
 						<div class="flex space-x-3">
-							<button @click="processPendingItems()" class="btn-primary px-4 py-2 rounded-lg">
+							<button @click="processPendingItems()" class="btn btn-primary">
 								Process Queue
 							</button>
-							<button @click="clearFailedItems()" class="btn-secondary px-4 py-2 rounded-lg">
+							<button @click="clearFailedItems()" class="btn btn-secondary">
 								Clear Failed
 							</button>
-							<button @click="clearAllItems()" class="btn-danger px-4 py-2 rounded-lg">
+							<button @click="clearAllItems()" class="btn btn-danger">
 								Clear All
 							</button>
 						</div>
 					</div>
 					<div id="stats-bar" class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
-						<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<div class="text-3xl font-bold" style="color: #f59e0b;">{ stats.PendingCount }</div>
-							<div class="text-sm" style="color: var(--text-secondary);">Pending</div>
+						<div class="card p-5 text-center">
+							<div class="text-2xl font-bold text-warning">{ stats.PendingCount }</div>
+							<div class="text-xs font-semibold uppercase tracking-wide text-content-muted">Pending</div>
 						</div>
-						<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<div class="text-3xl font-bold" style="color: #3b82f6;">{ stats.ProcessingCount }</div>
-							<div class="text-sm" style="color: var(--text-secondary);">Processing</div>
+						<div class="card p-5 text-center">
+							<div class="text-2xl font-bold text-info">{ stats.ProcessingCount }</div>
+							<div class="text-xs font-semibold uppercase tracking-wide text-content-muted">Processing</div>
 						</div>
-						<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<div class="text-3xl font-bold" style="color: #10b981;">{ stats.CompletedCount }</div>
-							<div class="text-sm" style="color: var(--text-secondary);">Completed</div>
+						<div class="card p-5 text-center">
+							<div class="text-2xl font-bold text-success">{ stats.CompletedCount }</div>
+							<div class="text-xs font-semibold uppercase tracking-wide text-content-muted">Completed</div>
 						</div>
-						<div class="card p-4 rounded-lg border text-center" style="background-color: var(--bg-secondary); border-color: var(--border);">
-							<div class="text-3xl font-bold" style="color: #ef4444;">{ stats.FailedCount }</div>
-							<div class="text-sm" style="color: var(--text-secondary);">Failed</div>
+						<div class="card p-5 text-center">
+							<div class="text-2xl font-bold text-danger">{ stats.FailedCount }</div>
+							<div class="text-xs font-semibold uppercase tracking-wide text-content-muted">Failed</div>
 						</div>
 					</div>
 				</div>
-				<div class="card p-4 rounded-lg border mb-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
+				<div class="card p-4 mb-6">
 					<div class="flex flex-wrap gap-4 items-center">
 						<div>
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Status Filter</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Status Filter</label>
 							<select
 								id="status-filter"
 								onchange="filterQueue()"
-								class="px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input w-auto"
 							>
 								<option value="all">All Items</option>
 								<option value="pending" selected>Pending</option>
@@ -70,12 +69,11 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
 							</select>
 						</div>
 						<div>
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Sync Type</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Sync Type</label>
 							<select
 								id="type-filter"
 								onchange="filterQueue()"
-								class="px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input w-auto"
 							>
 								<option value="all">All Types</option>
 								<option value="progress">Progress</option>
@@ -85,78 +83,82 @@ templ Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Q
 							</select>
 						</div>
 						<div>
-							<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Device</label>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Device</label>
 							<select
 								id="device-filter"
 								onchange="filterQueue()"
-								class="px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input w-auto"
 							>
 								<option value="all">All Devices</option>
 							</select>
 						</div>
 						<div class="flex-1"></div>
-						<button @click="refreshQueue()" class="btn-secondary px-4 py-2 rounded-lg">
+						<button @click="refreshQueue()" class="btn btn-secondary">
+							@Icon("refresh", "h-4 w-4")
 							Refresh
 						</button>
 					</div>
 				</div>
-				<div id="loading" class="hidden text-center py-16" style="color: var(--text-secondary)">
+				<div id="loading" class="hidden text-center py-16 text-content-muted">
 					<div class="loading-spinner mx-auto mb-4"></div>
 					<p>Loading queue...</p>
 				</div>
-				<div id="empty-state" class="hidden text-center py-16" style="color: var(--text-secondary)">
-					<div class="text-6xl mb-4">📭</div>
-					<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">Queue Empty</h3>
+				<div id="empty-state" class="hidden text-center py-16 text-content-muted">
+					<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-brand">
+						@Icon("sync", "h-7 w-7")
+					</div>
+					<h3 class="text-xl font-semibold mb-2 text-content">Queue Empty</h3>
 					<p>No items in the sync queue</p>
 				</div>
 				<div id="queue-list" class="space-y-3">
 					if len(queueItems) == 0 {
-						<div class="text-center py-16" style="color: var(--text-secondary)">
-							<div class="text-6xl mb-4">📭</div>
-							<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">Queue Empty</h3>
+						<div class="text-center py-16 text-content-muted">
+							<div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-brand">
+								@Icon("sync", "h-7 w-7")
+							</div>
+							<h3 class="text-xl font-semibold mb-2 text-content">Queue Empty</h3>
 							<p>No items in the sync queue</p>
 						</div>
 					}
 					for _, item := range queueItems {
-						<div class="card p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+						<div class="card p-4">
 							<div class="flex justify-between items-start mb-2">
 								<div class="flex items-center space-x-3">
 									<span class="inline-block px-2 py-0.5 rounded text-[11px] font-semibold uppercase status-{ item.Status }">{ item.Status }</span>
-									<span class="text-sm" style="color: var(--text-secondary)">{ item.SyncType }</span>
+									<span class="text-sm text-content-muted">{ item.SyncType }</span>
 								</div>
 								<span class="inline-block px-2 py-0.5 rounded text-[10px] font-semibold priority-{ item.Priority }">P{ item.Priority }</span>
 							</div>
-							<div class="text-sm mb-2" style="color: var(--text-secondary)">
+							<div class="text-sm mb-2 text-content-muted">
 								Device ID: { item.DeviceID }
 								if item.MediaTitle != nil {
 									| Book: { *item.MediaTitle }
 								}
 							</div>
-							<div class="flex justify-between items-center text-sm" style="color: var(--text-secondary)">
+							<div class="flex justify-between items-center text-sm text-content-muted">
 								<span>Attempts: { item.Attempts }/{ item.MaxAttempts }</span>
 								<span>{ item.CreatedAt }</span>
 							</div>
 							if item.ErrorMessage != nil {
-								<div class="mt-2 text-sm" style="color: #ef4444;">
+								<div class="mt-2 text-sm text-danger">
 									Error: { *item.ErrorMessage }
 								</div>
 							}
 						</div>
 					}
 				</div>
-				<div id="queue-item-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="background-color: rgba(0, 0, 0, 0.7);">
-					<div class="card rounded-lg p-6 w-full max-w-2xl mx-4 my-8" style="background-color: var(--bg-secondary); border-color: var(--border);">
+				<div id="queue-item-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto" style="background-color: var(--surface-overlay);">
+					<div class="card p-6 w-full max-w-2xl mx-4 my-8">
 						<div class="flex justify-between items-center mb-6">
-							<h2 class="text-2xl font-bold" style="color: var(--text-primary)">Queue Item Details</h2>
-							<button @click="hideQueueItemModal()" class="p-2 hover:opacity-80 rounded-lg" style="color: var(--text-primary); background-color: var(--bg-primary);">
-								X
+							<h2 class="text-2xl font-bold tracking-tight text-content">Queue Item Details</h2>
+							<button @click="hideQueueItemModal()" class="icon-btn" aria-label="Close">
+								@Icon("close", "h-5 w-5")
 							</button>
 						</div>
 						<div id="queue-item-details"></div>
 						<div class="flex justify-end space-x-3 mt-6">
-							<button @click="hideQueueItemModal()" class="btn-secondary px-4 py-2 rounded-lg">Close</button>
-							<button @click="retryQueueItem()" class="btn-primary px-4 py-2 rounded-lg">Retry</button>
+							<button @click="hideQueueItemModal()" class="btn btn-secondary">Close</button>
+							<button @click="retryQueueItem()" class="btn btn-primary">Retry</button>
 						</div>
 					</div>
 				</div>
diff --git a/templates/queue_templ.go b/templates/queue_templ.go
index a7e7d5b..c1e5926 100644
--- a/templates/queue_templ.go
+++ b/templates/queue_templ.go
@@ -39,208 +39,240 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><div class=\"flex justify-between items-center\"><div><h1 class=\"text-3xl font-bold\" style=\"color: var(--text-primary)\">Sync Queue</h1><p style=\"color: var(--text-secondary)\">Monitor and manage offline sync queue</p></div><div class=\"flex space-x-3\"><button @click=\"processPendingItems()\" class=\"btn-primary px-4 py-2 rounded-lg\">Process Queue</button> <button @click=\"clearFailedItems()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Clear Failed</button> <button @click=\"clearAllItems()\" class=\"btn-danger px-4 py-2 rounded-lg\">Clear All</button></div></div><div id=\"stats-bar\" class=\"mt-4 grid grid-cols-2 md:grid-cols-4 gap-4\"><div class=\"card p-4 rounded-lg border text-center\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"text-3xl font-bold\" style=\"color: #f59e0b;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><div class=\"flex justify-between items-center\"><div><h1 class=\"text-2xl font-bold tracking-tight text-content\">Sync Queue</h1><p class=\"text-content-muted\">Monitor and manage offline sync queue</p></div><div class=\"flex space-x-3\"><button @click=\"processPendingItems()\" class=\"btn btn-primary\">Process Queue</button> <button @click=\"clearFailedItems()\" class=\"btn btn-secondary\">Clear Failed</button> <button @click=\"clearAllItems()\" class=\"btn btn-danger\">Clear All</button></div></div><div id=\"stats-bar\" class=\"mt-4 grid grid-cols-2 md:grid-cols-4 gap-4\"><div class=\"card p-5 text-center\"><div class=\"text-2xl font-bold text-warning\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(stats.PendingCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 38, Col: 83}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 38, Col: 72}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div><div class=\"text-sm\" style=\"color: var(--text-secondary);\">Pending</div></div><div class=\"card p-4 rounded-lg border text-center\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"text-3xl font-bold\" style=\"color: #3b82f6;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div><div class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Pending</div></div><div class=\"card p-5 text-center\"><div class=\"text-2xl font-bold text-info\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(stats.ProcessingCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 42, Col: 86}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 42, Col: 72}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div><div class=\"text-sm\" style=\"color: var(--text-secondary);\">Processing</div></div><div class=\"card p-4 rounded-lg border text-center\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"text-3xl font-bold\" style=\"color: #10b981;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div><div class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Processing</div></div><div class=\"card p-5 text-center\"><div class=\"text-2xl font-bold text-success\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(stats.CompletedCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 46, Col: 85}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 46, Col: 74}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div><div class=\"text-sm\" style=\"color: var(--text-secondary);\">Completed</div></div><div class=\"card p-4 rounded-lg border text-center\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"text-3xl font-bold\" style=\"color: #ef4444;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div><div class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Completed</div></div><div class=\"card p-5 text-center\"><div class=\"text-2xl font-bold text-danger\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(stats.FailedCount)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 50, Col: 82}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 50, Col: 70}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div><div class=\"text-sm\" style=\"color: var(--text-secondary);\">Failed</div></div></div></div><div class=\"card p-4 rounded-lg border mb-6\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex flex-wrap gap-4 items-center\"><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Status Filter</label> <select id=\"status-filter\" onchange=\"filterQueue()\" class=\"px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"all\">All Items</option> <option value=\"pending\" selected>Pending</option> <option value=\"processing\">Processing</option> <option value=\"completed\">Completed</option> <option value=\"failed\">Failed</option></select></div><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Sync Type</label> <select id=\"type-filter\" onchange=\"filterQueue()\" class=\"px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"all\">All Types</option> <option value=\"progress\">Progress</option> <option value=\"note\">Notes</option> <option value=\"highlight\">Highlights</option> <option value=\"bookmark\">Bookmarks</option></select></div><div><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Device</label> <select id=\"device-filter\" onchange=\"filterQueue()\" class=\"px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"all\">All Devices</option></select></div><div class=\"flex-1\"></div><button @click=\"refreshQueue()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Refresh</button></div></div><div id=\"loading\" class=\"hidden text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading queue...</p></div><div id=\"empty-state\" class=\"hidden text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"text-6xl mb-4\">📭</div><h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--text-primary)\">Queue Empty</h3><p>No items in the sync queue</p></div><div id=\"queue-list\" class=\"space-y-3\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div><div class=\"text-xs font-semibold uppercase tracking-wide text-content-muted\">Failed</div></div></div></div><div class=\"card p-4 mb-6\"><div class=\"flex flex-wrap gap-4 items-center\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Status Filter</label> <select id=\"status-filter\" onchange=\"filterQueue()\" class=\"input w-auto\"><option value=\"all\">All Items</option> <option value=\"pending\" selected>Pending</option> <option value=\"processing\">Processing</option> <option value=\"completed\">Completed</option> <option value=\"failed\">Failed</option></select></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Sync Type</label> <select id=\"type-filter\" onchange=\"filterQueue()\" class=\"input w-auto\"><option value=\"all\">All Types</option> <option value=\"progress\">Progress</option> <option value=\"note\">Notes</option> <option value=\"highlight\">Highlights</option> <option value=\"bookmark\">Bookmarks</option></select></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Device</label> <select id=\"device-filter\" onchange=\"filterQueue()\" class=\"input w-auto\"><option value=\"all\">All Devices</option></select></div><div class=\"flex-1\"></div><button @click=\"refreshQueue()\" class=\"btn btn-secondary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("refresh", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "Refresh</button></div></div><div id=\"loading\" class=\"hidden text-center py-16 text-content-muted\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading queue...</p></div><div id=\"empty-state\" class=\"hidden text-center py-16 text-content-muted\"><div class=\"mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("sync", "h-7 w-7").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div><h3 class=\"text-xl font-semibold mb-2 text-content\">Queue Empty</h3><p>No items in the sync queue</p></div><div id=\"queue-list\" class=\"space-y-3\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(queueItems) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"text-6xl mb-4\">📭</div><h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--text-primary)\">Queue Empty</h3><p>No items in the sync queue</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"text-center py-16 text-content-muted\"><div class=\"mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand/15 text-brand\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("sync", "h-7 w-7").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div><h3 class=\"text-xl font-semibold mb-2 text-content\">Queue Empty</h3><p>No items in the sync queue</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
 		for _, item := range queueItems {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"card p-4 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-start mb-2\"><div class=\"flex items-center space-x-3\"><span class=\"inline-block px-2 py-0.5 rounded text-[11px] font-semibold uppercase status-{ item.Status }\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"card p-4\"><div class=\"flex justify-between items-start mb-2\"><div class=\"flex items-center space-x-3\"><span class=\"inline-block px-2 py-0.5 rounded text-[11px] font-semibold uppercase status-{ item.Status }\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Status)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 125, Col: 128}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 127, Col: 128}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</span> <span class=\"text-sm\" style=\"color: var(--text-secondary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span> <span class=\"text-sm text-content-muted\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.SyncType)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 126, Col: 83}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 128, Col: 65}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</span></div><span class=\"inline-block px-2 py-0.5 rounded text-[10px] font-semibold priority-{ item.Priority }\">P")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</span></div><span class=\"inline-block px-2 py-0.5 rounded text-[10px] font-semibold priority-{ item.Priority }\">P")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Priority)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 128, Col: 124}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 130, Col: 124}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</span></div><div class=\"text-sm mb-2\" style=\"color: var(--text-secondary)\">Device ID: ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span></div><div class=\"text-sm mb-2 text-content-muted\">Device ID: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.DeviceID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 131, Col: 34}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 133, Col: 34}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, " ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if item.MediaTitle != nil {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "| Book: ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "| Book: ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(*item.MediaTitle)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 133, Col: 35}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 135, Col: 35}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</div><div class=\"flex justify-between items-center text-sm\" style=\"color: var(--text-secondary)\"><span>Attempts: ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div><div class=\"flex justify-between items-center text-sm text-content-muted\"><span>Attempts: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var11 string
 			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Attempts)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 137, Col: 39}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 139, Col: 39}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "/")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "/")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.MaxAttempts)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 137, Col: 60}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 139, Col: 60}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</span> <span>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</span> <span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var13 string
 			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.CreatedAt)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 138, Col: 30}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 140, Col: 30}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</span></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</span></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if item.ErrorMessage != nil {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div class=\"mt-2 text-sm\" style=\"color: #ef4444;\">Error: ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div class=\"mt-2 text-sm text-danger\">Error: ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(*item.ErrorMessage)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 142, Col: 36}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 144, Col: 36}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div><div id=\"queue-item-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4 my-8\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-bold\" style=\"color: var(--text-primary)\">Queue Item Details</h2><button @click=\"hideQueueItemModal()\" class=\"p-2 hover:opacity-80 rounded-lg\" style=\"color: var(--text-primary); background-color: var(--bg-primary);\">X</button></div><div id=\"queue-item-details\"></div><div class=\"flex justify-end space-x-3 mt-6\"><button @click=\"hideQueueItemModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Close</button> <button @click=\"retryQueueItem()\" class=\"btn-primary px-4 py-2 rounded-lg\">Retry</button></div></div></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div><div id=\"queue-item-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center overflow-y-auto\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-2xl mx-4 my-8\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-2xl font-bold tracking-tight text-content\">Queue Item Details</h2><button @click=\"hideQueueItemModal()\" class=\"icon-btn\" aria-label=\"Close\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</button></div><div id=\"queue-item-details\"></div><div class=\"flex justify-end space-x-3 mt-6\"><button @click=\"hideQueueItemModal()\" class=\"btn btn-secondary\">Close</button> <button @click=\"retryQueueItem()\" class=\"btn btn-primary\">Retry</button></div></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/register.templ b/templates/register.templ
index 5b10c7a..b6c5af1 100644
--- a/templates/register.templ
+++ b/templates/register.templ
@@ -6,70 +6,66 @@ templ Register() {
 		<head>
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<title>Register</title>
+			<title>Register - Bookhoard</title>
 			<script src="/static/htmx.min.js"></script>
 			<script type="module" src="/static/main.js"></script>
 			<link href="/static/style.css" rel="stylesheet"/>
 		</head>
-		<body class="theme-tokyo-night min-h-screen" x-data="register" x-init="initRegisterTheme()">
-			<div class="container mx-auto px-4 py-8 max-w-md">
-				<h1 class="text-3xl font-bold text-center mb-8">Register for Bookhoard</h1>
-				<form hx-post="/api/auth/register" hx-target="#result" hx-swap="innerHTML" class="card p-6 rounded-lg shadow-md border">
-					<div class="mb-4">
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email</label>
-						<input type="email" id="email" name="email" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
+		<body class="theme-tokyo-night flex min-h-screen items-center justify-center px-4 py-8" x-data="register" x-init="initRegisterTheme()">
+			<div class="w-full max-w-md">
+				<div class="mb-6 flex items-center justify-center gap-2 text-2xl font-bold tracking-tight text-content">
+					@Icon("book-open", "h-7 w-7 text-brand")
+					Bookhoard
+				</div>
+				<div class="card p-6">
+					<h1 class="mb-5 text-xl font-bold text-content">Create your account</h1>
+					<form hx-post="/api/auth/register" hx-target="#result" hx-swap="innerHTML" class="space-y-4">
+						<div>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Email</label>
+							<input type="email" id="email" name="email" class="input" required/>
+						</div>
+						<div>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Username</label>
+							<input type="text" id="username" name="username" class="input" required/>
+						</div>
+						<div class="grid grid-cols-2 gap-3">
+							<div>
+								<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">First Name</label>
+								<input type="text" name="first_name" placeholder="Optional" class="input"/>
+							</div>
+							<div>
+								<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Last Name</label>
+								<input type="text" name="last_name" placeholder="Optional" class="input"/>
+							</div>
+						</div>
+						<div id="password-requirements" class="rounded-xl border border-line bg-surface p-4 text-sm">
+							<p class="mb-2 font-semibold text-content">Password Requirements</p>
+							<ul class="space-y-1.5 text-content-muted">
+								<li id="req-length" class="flex items-center gap-2"><span class="requirement-icon">○</span> At least 8 characters</li>
+								<li id="req-upper" class="flex items-center gap-2"><span class="requirement-icon">○</span> One uppercase letter</li>
+								<li id="req-lower" class="flex items-center gap-2"><span class="requirement-icon">○</span> One lowercase letter</li>
+								<li id="req-number" class="flex items-center gap-2"><span class="requirement-icon">○</span> One number</li>
+								<li id="req-special" class="flex items-center gap-2"><span class="requirement-icon">○</span> One special character</li>
+								<li id="req-match" class="flex items-center gap-2"><span class="requirement-icon">○</span> Passwords match</li>
+							</ul>
+						</div>
+						<div>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Password</label>
+							<input type="password" id="password" name="password" class="input" required/>
+						</div>
+						<div>
+							<label class="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted">Confirm Password</label>
+							<input type="password" id="confirm-password" name="confirm_password" class="input" required/>
+						</div>
+						<button type="submit" id="register-btn" class="btn btn-primary w-full opacity-50 cursor-not-allowed" disabled>
+							Register
+						</button>
+					</form>
+					<div id="result" class="mt-4 text-center text-sm"></div>
+					<div class="mt-4 border-t border-line pt-4 text-center">
+						<a href="/login" class="text-sm text-content-muted transition-colors hover:text-content">Already have an account? Login</a>
 					</div>
-					<div class="mb-4">
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Username</label>
-						<input type="text" id="username" name="username" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-					</div>
-					<div class="mb-4">
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">First Name</label>
-						<input type="text" name="first_name" placeholder="Optional" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"/>
-					</div>
-					<div class="mb-4">
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Last Name</label>
-						<input type="text" name="last_name" placeholder="Optional" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"/>
-					</div>
-					<div id="password-requirements" class="mb-4 p-4 rounded-lg border text-sm" style="background-color: var(--bg-secondary); border-color: var(--border)">
-						<p class="font-semibold mb-2" style="color: var(--text-primary)">Password Requirements:</p>
-						<ul class="space-y-1" style="color: var(--text-secondary)">
-							<li id="req-length" class="flex items-center gap-2">
-								<span class="requirement-icon">○</span> At least 8 characters
-							</li>
-							<li id="req-upper" class="flex items-center gap-2">
-								<span class="requirement-icon">○</span> One uppercase letter
-							</li>
-							<li id="req-lower" class="flex items-center gap-2">
-								<span class="requirement-icon">○</span> One lowercase letter
-							</li>
-							<li id="req-number" class="flex items-center gap-2">
-								<span class="requirement-icon">○</span> One number
-							</li>
-							<li id="req-special" class="flex items-center gap-2">
-								<span class="requirement-icon">○</span> One special character
-							</li>
-							<li id="req-match" class="flex items-center gap-2">
-								<span class="requirement-icon">○</span> Passwords match
-							</li>
-						</ul>
-					</div>
-					<div class="mb-4">
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Password</label>
-						<input type="password" id="password" name="password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-					</div>
-					<div class="mb-4">
-						<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm Password</label>
-						<input type="password" id="confirm-password" name="confirm_password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
-					</div>
-					<button type="submit" id="register-btn" class="btn-primary w-full py-2 rounded opacity-50 cursor-not-allowed" disabled>
-						Register
-					</button>
-				</form>
-				<div id="result" class="mt-4 text-center"></div>
-				<p class="text-center mt-4">
-					<a href="/login" class="text-blue-500 hover:underline">Already have an account? Login</a>
-				</p>
+				</div>
 			</div>
 		</body>
 	</html>
diff --git a/templates/register_templ.go b/templates/register_templ.go
index f48e449..1c4c8df 100644
--- a/templates/register_templ.go
+++ b/templates/register_templ.go
@@ -29,7 +29,15 @@ func Register() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Register</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\" x-data=\"register\" x-init=\"initRegisterTheme()\"><div class=\"container mx-auto px-4 py-8 max-w-md\"><h1 class=\"text-3xl font-bold text-center mb-8\">Register for Bookhoard</h1><form hx-post=\"/api/auth/register\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"card p-6 rounded-lg shadow-md border\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Email</label> <input type=\"email\" id=\"email\" name=\"email\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Username</label> <input type=\"text\" id=\"username\" name=\"username\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">First Name</label> <input type=\"text\" name=\"first_name\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Last Name</label> <input type=\"text\" name=\"last_name\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"></div><div id=\"password-requirements\" class=\"mb-4 p-4 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><p class=\"font-semibold mb-2\" style=\"color: var(--text-primary)\">Password Requirements:</p><ul class=\"space-y-1\" style=\"color: var(--text-secondary)\"><li id=\"req-length\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> At least 8 characters</li><li id=\"req-upper\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One uppercase letter</li><li id=\"req-lower\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One lowercase letter</li><li id=\"req-number\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One number</li><li id=\"req-special\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One special character</li><li id=\"req-match\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> Passwords match</li></ul></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" id=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Confirm Password</label> <input type=\"password\" id=\"confirm-password\" name=\"confirm_password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><button type=\"submit\" id=\"register-btn\" class=\"btn-primary w-full py-2 rounded opacity-50 cursor-not-allowed\" disabled>Register</button></form><div id=\"result\" class=\"mt-4 text-center\"></div><p class=\"text-center mt-4\"><a href=\"/login\" class=\"text-blue-500 hover:underline\">Already have an account? Login</a></p></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Register - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night flex min-h-screen items-center justify-center px-4 py-8\" x-data=\"register\" x-init=\"initRegisterTheme()\"><div class=\"w-full max-w-md\"><div class=\"mb-6 flex items-center justify-center gap-2 text-2xl font-bold tracking-tight text-content\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("book-open", "h-7 w-7 text-brand").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "Bookhoard</div><div class=\"card p-6\"><h1 class=\"mb-5 text-xl font-bold text-content\">Create your account</h1><form hx-post=\"/api/auth/register\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"space-y-4\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Email</label> <input type=\"email\" id=\"email\" name=\"email\" class=\"input\" required></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Username</label> <input type=\"text\" id=\"username\" name=\"username\" class=\"input\" required></div><div class=\"grid grid-cols-2 gap-3\"><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">First Name</label> <input type=\"text\" name=\"first_name\" placeholder=\"Optional\" class=\"input\"></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Last Name</label> <input type=\"text\" name=\"last_name\" placeholder=\"Optional\" class=\"input\"></div></div><div id=\"password-requirements\" class=\"rounded-xl border border-line bg-surface p-4 text-sm\"><p class=\"mb-2 font-semibold text-content\">Password Requirements</p><ul class=\"space-y-1.5 text-content-muted\"><li id=\"req-length\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> At least 8 characters</li><li id=\"req-upper\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One uppercase letter</li><li id=\"req-lower\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One lowercase letter</li><li id=\"req-number\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One number</li><li id=\"req-special\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One special character</li><li id=\"req-match\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> Passwords match</li></ul></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Password</label> <input type=\"password\" id=\"password\" name=\"password\" class=\"input\" required></div><div><label class=\"mb-1.5 block text-xs font-semibold uppercase tracking-wide text-content-muted\">Confirm Password</label> <input type=\"password\" id=\"confirm-password\" name=\"confirm_password\" class=\"input\" required></div><button type=\"submit\" id=\"register-btn\" class=\"btn btn-primary w-full opacity-50 cursor-not-allowed\" disabled>Register</button></form><div id=\"result\" class=\"mt-4 text-center text-sm\"></div><div class=\"mt-4 border-t border-line pt-4 text-center\"><a href=\"/login\" class=\"text-sm text-content-muted transition-colors hover:text-content\">Already have an account? Login</a></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/restore_system_collection_modal.templ b/templates/restore_system_collection_modal.templ
index 3a2cd5b..103aa62 100644
--- a/templates/restore_system_collection_modal.templ
+++ b/templates/restore_system_collection_modal.templ
@@ -1,19 +1,21 @@
 package templates
 
 templ RestoreSystemCollectionModal() {
-	<div x-data="collections" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70">
-		<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
+	<div x-data="collections" class="fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+		<div class="card p-6 w-full max-w-md mx-4">
 			<div class="flex justify-between items-center mb-6">
-				<h2 class="text-xl font-bold" style="color: var(--text-primary)">Restore System Collection</h2>
-				<button type="button" @click="closeCollectionModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+				<h2 class="text-xl font-bold text-content">Restore System Collection</h2>
+				<button type="button" @click="closeCollectionModal()" class="icon-btn">
+					@Icon("close", "h-5 w-5")
+				</button>
 			</div>
 			<div class="mb-4">
-				<p class="mb-4" style="color: var(--text-secondary)">Select a system collection to restore:</p>
+				<p class="mb-4 text-content-muted">Select a system collection to restore:</p>
 				<form
 					hx-post="/api/dashboard/restore-system-collection"
 					hx-redirect="/collections"
 				>
-					<select name="collection_name" class="w-full px-4 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
+					<select name="collection_name" class="input">
 						<option value="">Select collection...</option>
 						<option value="Continue Reading">Continue Reading</option>
 						<option value="Recently Added">Recently Added</option>
@@ -22,8 +24,8 @@ templ RestoreSystemCollectionModal() {
 						<option value="Continue Series">Continue Series</option>
 					</select>
 					<div class="flex justify-end space-x-3 mt-6">
-						<button type="button" @click="closeCollectionModal()" class="btn-secondary px-4 py-2 rounded-lg">Cancel</button>
-						<button type="submit" class="btn-primary px-4 py-2 rounded-lg">Restore</button>
+						<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
+						<button type="submit" class="btn btn-primary">Restore</button>
 					</div>
 				</form>
 			</div>
diff --git a/templates/restore_system_collection_modal_templ.go b/templates/restore_system_collection_modal_templ.go
index cff185f..62a1cf8 100644
--- a/templates/restore_system_collection_modal_templ.go
+++ b/templates/restore_system_collection_modal_templ.go
@@ -29,7 +29,15 @@ func RestoreSystemCollectionModal() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div x-data=\"collections\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/70\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Restore System Collection</h2><button type=\"button\" @click=\"closeCollectionModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><div class=\"mb-4\"><p class=\"mb-4\" style=\"color: var(--text-secondary)\">Select a system collection to restore:</p><form hx-post=\"/api/dashboard/restore-system-collection\" hx-redirect=\"/collections\"><select name=\"collection_name\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Select collection...</option> <option value=\"Continue Reading\">Continue Reading</option> <option value=\"Recently Added\">Recently Added</option> <option value=\"Recently Read\">Recently Read</option> <option value=\"Not Started\">Not Started</option> <option value=\"Continue Series\">Continue Series</option></select><div class=\"flex justify-end space-x-3 mt-6\"><button type=\"button\" @click=\"closeCollectionModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"submit\" class=\"btn-primary px-4 py-2 rounded-lg\">Restore</button></div></form></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div x-data=\"collections\" class=\"fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold text-content\">Restore System Collection</h2><button type=\"button\" @click=\"closeCollectionModal()\" class=\"icon-btn\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</button></div><div class=\"mb-4\"><p class=\"mb-4 text-content-muted\">Select a system collection to restore:</p><form hx-post=\"/api/dashboard/restore-system-collection\" hx-redirect=\"/collections\"><select name=\"collection_name\" class=\"input\"><option value=\"\">Select collection...</option> <option value=\"Continue Reading\">Continue Reading</option> <option value=\"Recently Added\">Recently Added</option> <option value=\"Recently Read\">Recently Read</option> <option value=\"Not Started\">Not Started</option> <option value=\"Continue Series\">Continue Series</option></select><div class=\"flex justify-end space-x-3 mt-6\"><button type=\"button\" @click=\"closeCollectionModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"submit\" class=\"btn btn-primary\">Restore</button></div></form></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/setup.templ b/templates/setup.templ
index ee81ba7..3c470fe 100644
--- a/templates/setup.templ
+++ b/templates/setup.templ
@@ -14,8 +14,8 @@ templ Setup() {
 		<body class="theme-tokyo-night min-h-screen" x-data="setupWizard" x-init="initSetup()">
 			<div class="container mx-auto px-4 py-8 max-w-2xl">
 				<div class="text-center mb-8">
-					<h1 class="text-4xl font-bold mb-2" style="color: var(--text-primary)">Welcome to Bookhoard</h1>
-					<p class="text-lg" style="color: var(--text-secondary)">Let's get your library set up.</p>
+					<h1 class="text-2xl font-bold tracking-tight text-content mb-2">Welcome to Bookhoard</h1>
+					<p class="text-lg text-content-muted">Let's get your library set up.</p>
 				</div>
 
 				<!-- Step indicator -->
@@ -39,77 +39,72 @@ templ Setup() {
 				</div>
 
 				<!-- Error display -->
-				<div x-show="errorMsg" class="mb-4 p-4 rounded-lg border border-red-500/50 bg-red-500/10 text-red-400 text-sm">
+				<div x-show="errorMsg" x-cloak class="mb-4 p-4 rounded-lg border border-red-500/50 bg-red-500/10 text-red-400 text-sm">
 					<span x-text="errorMsg"></span>
 				</div>
 
 				<!-- ==================== STEP 1: Create Admin ==================== -->
-				<div x-show="currentStep === 1" class="card p-6 rounded-lg shadow-md border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-					<h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary)">Create Administrator Account</h2>
-					<p class="mb-6" style="color: var(--text-secondary)">This first account will have full admin privileges.</p>
+				<div x-show="currentStep === 1" x-cloak class="card p-6">
+					<h2 class="text-2xl font-bold tracking-tight text-content mb-2">Create Administrator Account</h2>
+					<p class="mb-6 text-content-muted">This first account will have full admin privileges.</p>
 
 					<form @submit.prevent="submitAdmin()">
-						<div class="mb-6 p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border)">
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Server URL (Base URL)</label>
+						<div class="mb-6 p-4 rounded-lg border border-line bg-surface">
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Server URL (Base URL)</label>
 							<input
 								type="url"
 								x-model="admin.baseUrl"
 								placeholder="https://books.example.com"
-								class="w-full px-3 py-2 border rounded mt-2"
-								style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full mt-2"
 								required
 							/>
-							<p class="text-sm mt-2" style="color: var(--text-secondary)">The public URL of your Bookhoard instance. Used for device sync, OPDS feed, and API endpoints.</p>
+							<p class="text-sm mt-2 text-content-muted">The public URL of your Bookhoard instance. Used for device sync, OPDS feed, and API endpoints.</p>
 						</div>
 
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Email</label>
 							<input
 								type="email"
 								id="email"
 								x-model="admin.email"
-								class="w-full px-3 py-2 border rounded"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full"
 								required
 							/>
 						</div>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Username</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Username</label>
 							<input
 								type="text"
 								x-model="admin.username"
 								id="username"
-								class="w-full px-3 py-2 border rounded"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full"
 								required
 							/>
 						</div>
 						<div class="grid grid-cols-2 gap-4 mb-4">
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">First Name</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">First Name</label>
 								<input
 									type="text"
 									x-model="admin.firstName"
 									placeholder="Optional"
-									class="w-full px-3 py-2 border rounded"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"
+									class="input w-full"
 								/>
 							</div>
 							<div>
-								<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Last Name</label>
+								<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Last Name</label>
 								<input
 									type="text"
 									x-model="admin.lastName"
 									placeholder="Optional"
-									class="w-full px-3 py-2 border rounded"
-									style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"
+									class="input w-full"
 								/>
 							</div>
 						</div>
 
-						<div id="password-requirements" class="mb-4 p-4 rounded-lg border text-sm" style="background-color: var(--bg-primary); border-color: var(--border)">
-							<p class="font-semibold mb-2" style="color: var(--text-primary)">Password Requirements:</p>
-							<ul class="space-y-1" style="color: var(--text-secondary)">
+						<div id="password-requirements" class="mb-4 p-4 rounded-lg border border-line bg-surface text-sm">
+							<p class="font-semibold mb-2 text-content">Password Requirements:</p>
+							<ul class="space-y-1 text-content-muted">
 								<li id="req-length" class="flex items-center gap-2">
 									<span class="requirement-icon">○</span> At least 8 characters
 								</li>
@@ -131,31 +126,29 @@ templ Setup() {
 							</ul>
 						</div>
 						<div class="mb-4">
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Password</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Password</label>
 							<input
 								type="password"
 								x-model="admin.password"
 								id="password"
-								class="w-full px-3 py-2 border rounded"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full"
 								required
 							/>
 						</div>
 						<div class="mb-6">
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Confirm Password</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Confirm Password</label>
 							<input
 								type="password"
 								x-model="admin.confirmPassword"
 								id="confirm-password"
-								class="w-full px-3 py-2 border rounded"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full"
 								required
 							/>
 						</div>
 						<button
 							type="submit"
 							id="register-btn"
-							class="btn-primary w-full py-2 rounded opacity-50 cursor-not-allowed"
+							class="btn btn-primary w-full opacity-50 cursor-not-allowed"
 							:disabled="loading"
 							x-text="loading ? 'Creating...' : 'Create Admin Account'"
 						></button>
@@ -163,49 +156,47 @@ templ Setup() {
 				</div>
 
 				<!-- ==================== STEP 2: Create Libraries ==================== -->
-				<div x-show="currentStep === 2" class="card p-6 rounded-lg shadow-md border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-					<h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary)">Create Libraries</h2>
-					<p class="mb-6" style="color: var(--text-secondary)">Add one or more media libraries. You can always add more later.</p>
+				<div x-show="currentStep === 2" x-cloak class="card p-6">
+					<h2 class="text-2xl font-bold tracking-tight text-content mb-2">Create Libraries</h2>
+					<p class="mb-6 text-content-muted">Add one or more media libraries. You can always add more later.</p>
 
 					<!-- Created libraries list -->
-					<div x-show="libraries.length > 0" class="mb-6 space-y-2">
+					<div x-show="libraries.length > 0" x-cloak class="mb-6 space-y-2">
 						<template x-for="(lib, idx) in libraries" :key="lib.id">
-							<div class="p-3 rounded-lg border flex items-center justify-between" style="background-color: var(--bg-primary); border-color: var(--border)">
+							<div class="p-3 rounded-lg border border-line bg-surface flex items-center justify-between">
 								<div class="flex items-center gap-3">
 									<span class="text-xl" x-text="lib.type === 'ebooks' ? '📚' : lib.type === 'comics' ? '📖' : '🗾'"></span>
 									<div>
-										<p class="font-medium" style="color: var(--text-primary)" x-text="lib.name"></p>
-										<p class="text-xs capitalize" style="color: var(--text-secondary)" x-text="lib.type"></p>
+										<p class="font-medium text-content" x-text="lib.name"></p>
+										<p class="text-xs capitalize text-content-muted" x-text="lib.type"></p>
 									</div>
 								</div>
 								<button
 									type="button"
 									@click="removeLibrary(idx)"
-									class="text-xs text-red-500 hover:underline"
+									class="text-xs text-danger hover:underline"
 								>Remove</button>
 							</div>
 						</template>
 					</div>
 
 					<!-- Add library form -->
-					<form @submit.prevent="addLibrary()" class="space-y-4 p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border)">
+					<form @submit.prevent="addLibrary()" class="space-y-4 p-4 rounded-lg border border-line bg-surface">
 						<div>
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Library Name</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Library Name</label>
 							<input
 								type="text"
 								x-model="newLibrary.name"
 								placeholder="My Ebook Library"
-								class="w-full px-3 py-2 border rounded"
-								style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full"
 								required
 							/>
 						</div>
 						<div>
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Library Type</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Library Type</label>
 							<select
 								x-model="newLibrary.type"
-								class="w-full px-3 py-2 border rounded"
-								style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full"
 							>
 								<option value="ebooks">📚 Ebooks</option>
 								<option value="comics">📖 Comics</option>
@@ -213,54 +204,53 @@ templ Setup() {
 							</select>
 						</div>
 						<div>
-							<label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Description (optional)</label>
+							<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1">Description (optional)</label>
 							<input
 								type="text"
 								x-model="newLibrary.description"
 								placeholder="Optional"
-								class="w-full px-3 py-2 border rounded"
-								style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)"
+								class="input w-full"
 							/>
 						</div>
 						<button
 							type="submit"
-							class="btn-secondary w-full py-2 rounded"
+							class="btn btn-secondary w-full"
 							:disabled="loading || !newLibrary.name.trim()"
 							x-text="loading ? 'Creating...' : '+ Add This Library'"
 						></button>
 					</form>
 
 					<div class="flex justify-between mt-6">
-						<button type="button" @click="currentStep = 1" class="btn-secondary px-4 py-2 rounded">Back</button>
-						<button type="button" @click="currentStep = 3" class="btn-primary px-6 py-2 rounded">
+						<button type="button" @click="currentStep = 1" class="btn btn-secondary">Back</button>
+						<button type="button" @click="currentStep = 3" class="btn btn-primary">
 							<span x-text="libraries.length > 0 ? 'Next: Configure Folders' : 'Skip – Continue'"></span>
 						</button>
 					</div>
 				</div>
 
 				<!-- ==================== STEP 3: Configure Folders ==================== -->
-				<div x-show="currentStep === 3" class="card p-6 rounded-lg shadow-md border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-					<h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary)">Configure Library Folders</h2>
-					<p class="mb-6" style="color: var(--text-secondary)">Add the filesystem folders where your media files are stored.</p>
+				<div x-show="currentStep === 3" x-cloak class="card p-6">
+					<h2 class="text-2xl font-bold tracking-tight text-content mb-2">Configure Library Folders</h2>
+					<p class="mb-6 text-content-muted">Add the filesystem folders where your media files are stored.</p>
 
-					<div x-show="libraries.length === 0" class="text-center py-8" style="color: var(--text-secondary)">
+					<div x-show="libraries.length === 0" x-cloak class="text-center py-8 text-content-muted">
 						<p>No libraries created. You can add folders later from the admin panel.</p>
 					</div>
 
 					<div class="space-y-6">
 						<template x-for="lib in libraries" :key="lib.id">
-							<div class="p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border)">
+							<div class="p-4 rounded-lg border border-line bg-surface">
 								<div class="flex items-center gap-2 mb-3">
 									<span class="text-xl" x-text="lib.type === 'ebooks' ? '📚' : lib.type === 'comics' ? '📖' : '🗾'"></span>
-									<h4 class="font-semibold" style="color: var(--text-primary)" x-text="lib.name"></h4>
+									<h4 class="font-semibold text-content" x-text="lib.name"></h4>
 								</div>
 
 								<!-- Existing folders for this library -->
 								<div class="space-y-1 mb-3" x-show="lib.folders && lib.folders.length > 0">
 									<template x-for="(folder, fIdx) in (lib.folders || [])" :key="folder">
-										<div class="flex items-center justify-between p-2 rounded text-sm" style="background-color: var(--bg-secondary); border-color: var(--border)">
-											<span style="color: var(--text-primary)" x-text="folder"></span>
-											<button type="button" @click="removeFolder(lib.id, folder, fIdx)" class="text-xs text-red-500 hover:underline">Remove</button>
+										<div class="flex items-center justify-between p-2 rounded text-sm border border-line bg-surface-raised">
+											<span class="text-content" x-text="folder"></span>
+											<button type="button" @click="removeFolder(lib.id, folder, fIdx)" class="text-xs text-danger hover:underline">Remove</button>
 										</div>
 									</template>
 								</div>
@@ -271,18 +261,17 @@ templ Setup() {
 										type="text"
 										:placeholder="'/path/to/' + lib.type"
 										:id="'folderInput-' + lib.id"
-										class="flex-1 px-3 py-2 border rounded text-sm"
-										style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)"
+										class="input flex-1 text-sm"
 									/>
 									<button
 										type="button"
 										@click="showFolderBrowser('folderInput-' + lib.id)"
-										class="btn-secondary px-3 py-2 text-xs rounded"
+										class="btn btn-secondary text-xs"
 									>Browse</button>
 									<button
 										type="button"
 										@click="addFolderToLibrary(lib)"
-										class="btn-primary px-3 py-2 text-xs rounded"
+										class="btn btn-primary text-xs"
 									>Add</button>
 								</div>
 							</div>
@@ -290,37 +279,37 @@ templ Setup() {
 					</div>
 
 					<div class="flex justify-between mt-6">
-						<button type="button" @click="currentStep = 2" class="btn-secondary px-4 py-2 rounded">Back</button>
-						<button type="button" @click="currentStep = 4" class="btn-primary px-6 py-2 rounded">Next: Scan</button>
+						<button type="button" @click="currentStep = 2" class="btn btn-secondary">Back</button>
+						<button type="button" @click="currentStep = 4" class="btn btn-primary">Next: Scan</button>
 					</div>
 				</div>
 
 				<!-- ==================== STEP 4: Scan & Finish ==================== -->
-				<div x-show="currentStep === 4" class="card p-6 rounded-lg shadow-md border" style="background-color: var(--bg-secondary); border-color: var(--border)">
-					<h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary)">Scan & Finish</h2>
-					<p class="mb-6" style="color: var(--text-secondary)">Review your configuration and start the initial scan.</p>
+				<div x-show="currentStep === 4" x-cloak class="card p-6">
+					<h2 class="text-2xl font-bold tracking-tight text-content mb-2">Scan & Finish</h2>
+					<p class="mb-6 text-content-muted">Review your configuration and start the initial scan.</p>
 
 					<!-- Summary -->
 					<div class="space-y-3 mb-6">
-						<div class="p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border)">
-							<p class="text-sm font-medium mb-1" style="color: var(--text-secondary)">Server URL</p>
-							<p style="color: var(--text-primary)" x-text="admin.baseUrl"></p>
+						<div class="p-4 rounded-lg border border-line bg-surface">
+							<p class="text-sm font-medium mb-1 text-content-muted">Server URL</p>
+							<p class="text-content" x-text="admin.baseUrl"></p>
 						</div>
-						<div class="p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border)">
-							<p class="text-sm font-medium mb-1" style="color: var(--text-secondary)">Administrator</p>
-							<p style="color: var(--text-primary)" x-text="admin.username + ' (' + admin.email + ')'"></p>
+						<div class="p-4 rounded-lg border border-line bg-surface">
+							<p class="text-sm font-medium mb-1 text-content-muted">Administrator</p>
+							<p class="text-content" x-text="admin.username + ' (' + admin.email + ')'"></p>
 						</div>
-						<div class="p-4 rounded-lg border" style="background-color: var(--bg-primary); border-color: var(--border)">
-							<p class="text-sm font-medium mb-2" style="color: var(--text-secondary)">
+						<div class="p-4 rounded-lg border border-line bg-surface">
+							<p class="text-sm font-medium mb-2 text-content-muted">
 								Libraries (<span x-text="libraries.length"></span>)
 							</p>
 							<template x-for="lib in libraries" :key="lib.id">
 								<div class="flex items-start justify-between text-sm py-1">
 									<div>
-										<span style="color: var(--text-primary)" x-text="lib.name"></span>
-										<span class="ml-2 text-xs px-2 py-0.5 rounded" style="background-color: var(--accent); color: var(--bg-primary)" x-text="lib.type"></span>
+										<span class="text-content" x-text="lib.name"></span>
+										<span class="ml-2 text-xs px-2 py-0.5 rounded bg-brand text-surface" x-text="lib.type"></span>
 									</div>
-									<div class="text-right" style="color: var(--text-secondary)">
+									<div class="text-right text-content-muted">
 										<span x-text="(lib.folders || []).length + ' folder(s)'"></span>
 									</div>
 								</div>
@@ -329,16 +318,16 @@ templ Setup() {
 					</div>
 
 					<!-- Scan progress -->
-					<div x-show="scanStarted" class="mb-6 space-y-3">
-						<h3 class="font-semibold" style="color: var(--text-primary)">Scan Progress</h3>
+					<div x-show="scanStarted" x-cloak class="mb-6 space-y-3">
+						<h3 class="font-semibold text-content">Scan Progress</h3>
 						<div id="library-progress-list" class="space-y-3">
 							<template x-for="job in scanJobs" :key="job.jobId">
-								<div class="p-3 rounded border" style="background-color: var(--bg-primary); border-color: var(--border)">
+								<div class="p-3 rounded border border-line bg-surface">
 									<div class="flex justify-between items-center mb-2">
-										<span class="font-medium" style="color: var(--text-primary)" x-text="job.libraryName"></span>
-										<span class="text-sm" style="color: var(--text-secondary)" x-text="job.statusText"></span>
+										<span class="font-medium text-content" x-text="job.libraryName"></span>
+										<span class="text-sm text-content-muted" x-text="job.statusText"></span>
 									</div>
-									<div class="w-full rounded-full h-2" style="background-color: var(--bg-secondary)">
+									<div class="w-full rounded-full h-2 bg-surface-raised">
 										<div
 											class="h-2 rounded-full transition-all duration-500"
 											:style="'width: ' + job.progress + '%; background-color: var(--accent);'"
@@ -347,36 +336,39 @@ templ Setup() {
 								</div>
 							</template>
 						</div>
-						<div x-show="scanComplete" class="p-4 rounded-lg border border-green-500/50 bg-green-500/10 text-green-400 text-sm">
+						<div x-show="scanComplete" x-cloak class="p-4 rounded-lg border border-green-500/50 bg-green-500/10 text-green-400 text-sm">
 							Initial scan complete! Your libraries are ready to use.
 						</div>
 					</div>
 
 					<div class="flex justify-between mt-6">
-						<button type="button" @click="currentStep = 3" class="btn-secondary px-4 py-2 rounded" :disabled="loading">Back</button>
+						<button type="button" @click="currentStep = 3" class="btn btn-secondary" :disabled="loading">Back</button>
 
 						<div class="flex gap-3">
 							<button
 								x-show="!scanStarted"
+								x-cloak
 								type="button"
 								@click="startScan()"
-								class="btn-primary px-6 py-2 rounded"
+								class="btn btn-primary"
 								:disabled="loading"
 							>Start Scan</button>
 
 							<button
 								x-show="scanStarted && !scanComplete"
+								x-cloak
 								type="button"
 								@click="finishSetup()"
-								class="btn-secondary px-6 py-2 rounded"
+								class="btn btn-secondary"
 								:disabled="loading"
 							>Skip to Dashboard</button>
 
 							<button
 								x-show="scanComplete"
+								x-cloak
 								type="button"
 								@click="finishSetup()"
-								class="btn-primary px-6 py-2 rounded"
+								class="btn btn-primary"
 								:disabled="loading"
 								x-text="loading ? 'Finishing...' : 'Go to Dashboard'"
 							></button>
@@ -386,11 +378,13 @@ templ Setup() {
 			</div>
 
 			<!-- Folder Browser Modal (reused from admin library) -->
-			<div id="folder-browser-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7)">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border)">
+			<div id="folder-browser-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+				<div class="card p-6 w-full max-w-md mx-4">
 					<div class="flex justify-between items-center mb-4">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Browse Folders</h2>
-						<button type="button" @click="hideFolderBrowser()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+						<h2 class="text-xl font-bold text-content">Browse Folders</h2>
+						<button type="button" @click="hideFolderBrowser()" class="icon-btn">
+							@Icon("close", "h-5 w-5")
+						</button>
 					</div>
 					<div id="folder-browser-content">
 						<!-- Directory listings rendered by Alpine -->
diff --git a/templates/setup_templ.go b/templates/setup_templ.go
index d19dcb1..9371946 100644
--- a/templates/setup_templ.go
+++ b/templates/setup_templ.go
@@ -29,7 +29,15 @@ func Setup() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Setup - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\" x-data=\"setupWizard\" x-init=\"initSetup()\"><div class=\"container mx-auto px-4 py-8 max-w-2xl\"><div class=\"text-center mb-8\"><h1 class=\"text-4xl font-bold mb-2\" style=\"color: var(--text-primary)\">Welcome to Bookhoard</h1><p class=\"text-lg\" style=\"color: var(--text-secondary)\">Let's get your library set up.</p></div><!-- Step indicator --><div class=\"flex items-center justify-center mb-8 gap-2\"><template x-for=\"n in 4\" :key=\"n\"><div class=\"flex items-center gap-2\"><div class=\"w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all\" :class=\"currentStep >= n ? 'bg-[var(--accent)] text-[var(--bg-primary)]' : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border)]'\"><span x-text=\"currentStep > n ? '✓' : n\"></span></div><div x-text=\"['Admin', 'Libraries', 'Folders', 'Scan'][n-1]\" class=\"text-sm hidden sm:inline\" :style=\"currentStep >= n ? 'color: var(--text-primary)' : 'color: var(--text-secondary)'\"></div><div x-show=\"n < 4\" class=\"w-8 h-0.5 mx-1\" :class=\"currentStep > n ? 'bg-[var(--accent)]' : 'bg-[var(--border)]'\"></div></div></template></div><!-- Error display --><div x-show=\"errorMsg\" class=\"mb-4 p-4 rounded-lg border border-red-500/50 bg-red-500/10 text-red-400 text-sm\"><span x-text=\"errorMsg\"></span></div><!-- ==================== STEP 1: Create Admin ==================== --><div x-show=\"currentStep === 1\" class=\"card p-6 rounded-lg shadow-md border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h2 class=\"text-2xl font-bold mb-2\" style=\"color: var(--text-primary)\">Create Administrator Account</h2><p class=\"mb-6\" style=\"color: var(--text-secondary)\">This first account will have full admin privileges.</p><form @submit.prevent=\"submitAdmin()\"><div class=\"mb-6 p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Server URL (Base URL)</label> <input type=\"url\" x-model=\"admin.baseUrl\" placeholder=\"https://books.example.com\" class=\"w-full px-3 py-2 border rounded mt-2\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" required><p class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">The public URL of your Bookhoard instance. Used for device sync, OPDS feed, and API endpoints.</p></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Email</label> <input type=\"email\" id=\"email\" x-model=\"admin.email\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Username</label> <input type=\"text\" x-model=\"admin.username\" id=\"username\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"grid grid-cols-2 gap-4 mb-4\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">First Name</label> <input type=\"text\" x-model=\"admin.firstName\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Last Name</label> <input type=\"text\" x-model=\"admin.lastName\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"></div></div><div id=\"password-requirements\" class=\"mb-4 p-4 rounded-lg border text-sm\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><p class=\"font-semibold mb-2\" style=\"color: var(--text-primary)\">Password Requirements:</p><ul class=\"space-y-1\" style=\"color: var(--text-secondary)\"><li id=\"req-length\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> At least 8 characters</li><li id=\"req-upper\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One uppercase letter</li><li id=\"req-lower\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One lowercase letter</li><li id=\"req-number\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One number</li><li id=\"req-special\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One special character</li><li id=\"req-match\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> Passwords match</li></ul></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" x-model=\"admin.password\" id=\"password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-6\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Confirm Password</label> <input type=\"password\" x-model=\"admin.confirmPassword\" id=\"confirm-password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><button type=\"submit\" id=\"register-btn\" class=\"btn-primary w-full py-2 rounded opacity-50 cursor-not-allowed\" :disabled=\"loading\" x-text=\"loading ? 'Creating...' : 'Create Admin Account'\"></button></form></div><!-- ==================== STEP 2: Create Libraries ==================== --><div x-show=\"currentStep === 2\" class=\"card p-6 rounded-lg shadow-md border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h2 class=\"text-2xl font-bold mb-2\" style=\"color: var(--text-primary)\">Create Libraries</h2><p class=\"mb-6\" style=\"color: var(--text-secondary)\">Add one or more media libraries. You can always add more later.</p><!-- Created libraries list --><div x-show=\"libraries.length > 0\" class=\"mb-6 space-y-2\"><template x-for=\"(lib, idx) in libraries\" :key=\"lib.id\"><div class=\"p-3 rounded-lg border flex items-center justify-between\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><div class=\"flex items-center gap-3\"><span class=\"text-xl\" x-text=\"lib.type === 'ebooks' ? '📚' : lib.type === 'comics' ? '📖' : '🗾'\"></span><div><p class=\"font-medium\" style=\"color: var(--text-primary)\" x-text=\"lib.name\"></p><p class=\"text-xs capitalize\" style=\"color: var(--text-secondary)\" x-text=\"lib.type\"></p></div></div><button type=\"button\" @click=\"removeLibrary(idx)\" class=\"text-xs text-red-500 hover:underline\">Remove</button></div></template></div><!-- Add library form --><form @submit.prevent=\"addLibrary()\" class=\"space-y-4 p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Library Name</label> <input type=\"text\" x-model=\"newLibrary.name\" placeholder=\"My Ebook Library\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" required></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Library Type</label> <select x-model=\"newLibrary.type\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\"><option value=\"ebooks\">📚 Ebooks</option> <option value=\"comics\">📖 Comics</option> <option value=\"manga\">🗾 Manga</option></select></div><div><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Description (optional)</label> <input type=\"text\" x-model=\"newLibrary.description\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\"></div><button type=\"submit\" class=\"btn-secondary w-full py-2 rounded\" :disabled=\"loading || !newLibrary.name.trim()\" x-text=\"loading ? 'Creating...' : '+ Add This Library'\"></button></form><div class=\"flex justify-between mt-6\"><button type=\"button\" @click=\"currentStep = 1\" class=\"btn-secondary px-4 py-2 rounded\">Back</button> <button type=\"button\" @click=\"currentStep = 3\" class=\"btn-primary px-6 py-2 rounded\"><span x-text=\"libraries.length > 0 ? 'Next: Configure Folders' : 'Skip – Continue'\"></span></button></div></div><!-- ==================== STEP 3: Configure Folders ==================== --><div x-show=\"currentStep === 3\" class=\"card p-6 rounded-lg shadow-md border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h2 class=\"text-2xl font-bold mb-2\" style=\"color: var(--text-primary)\">Configure Library Folders</h2><p class=\"mb-6\" style=\"color: var(--text-secondary)\">Add the filesystem folders where your media files are stored.</p><div x-show=\"libraries.length === 0\" class=\"text-center py-8\" style=\"color: var(--text-secondary)\"><p>No libraries created. You can add folders later from the admin panel.</p></div><div class=\"space-y-6\"><template x-for=\"lib in libraries\" :key=\"lib.id\"><div class=\"p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><div class=\"flex items-center gap-2 mb-3\"><span class=\"text-xl\" x-text=\"lib.type === 'ebooks' ? '📚' : lib.type === 'comics' ? '📖' : '🗾'\"></span><h4 class=\"font-semibold\" style=\"color: var(--text-primary)\" x-text=\"lib.name\"></h4></div><!-- Existing folders for this library --><div class=\"space-y-1 mb-3\" x-show=\"lib.folders && lib.folders.length > 0\"><template x-for=\"(folder, fIdx) in (lib.folders || [])\" :key=\"folder\"><div class=\"flex items-center justify-between p-2 rounded text-sm\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><span style=\"color: var(--text-primary)\" x-text=\"folder\"></span> <button type=\"button\" @click=\"removeFolder(lib.id, folder, fIdx)\" class=\"text-xs text-red-500 hover:underline\">Remove</button></div></template></div><!-- Add folder --><div class=\"flex gap-2\"><input type=\"text\" :placeholder=\"'/path/to/' + lib.type\" :id=\"'folderInput-' + lib.id\" class=\"flex-1 px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\"> <button type=\"button\" @click=\"showFolderBrowser('folderInput-' + lib.id)\" class=\"btn-secondary px-3 py-2 text-xs rounded\">Browse</button> <button type=\"button\" @click=\"addFolderToLibrary(lib)\" class=\"btn-primary px-3 py-2 text-xs rounded\">Add</button></div></div></template></div><div class=\"flex justify-between mt-6\"><button type=\"button\" @click=\"currentStep = 2\" class=\"btn-secondary px-4 py-2 rounded\">Back</button> <button type=\"button\" @click=\"currentStep = 4\" class=\"btn-primary px-6 py-2 rounded\">Next: Scan</button></div></div><!-- ==================== STEP 4: Scan & Finish ==================== --><div x-show=\"currentStep === 4\" class=\"card p-6 rounded-lg shadow-md border\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><h2 class=\"text-2xl font-bold mb-2\" style=\"color: var(--text-primary)\">Scan & Finish</h2><p class=\"mb-6\" style=\"color: var(--text-secondary)\">Review your configuration and start the initial scan.</p><!-- Summary --><div class=\"space-y-3 mb-6\"><div class=\"p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><p class=\"text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Server URL</p><p style=\"color: var(--text-primary)\" x-text=\"admin.baseUrl\"></p></div><div class=\"p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><p class=\"text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Administrator</p><p style=\"color: var(--text-primary)\" x-text=\"admin.username + ' (' + admin.email + ')'\"></p></div><div class=\"p-4 rounded-lg border\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><p class=\"text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Libraries (<span x-text=\"libraries.length\"></span>)</p><template x-for=\"lib in libraries\" :key=\"lib.id\"><div class=\"flex items-start justify-between text-sm py-1\"><div><span style=\"color: var(--text-primary)\" x-text=\"lib.name\"></span> <span class=\"ml-2 text-xs px-2 py-0.5 rounded\" style=\"background-color: var(--accent); color: var(--bg-primary)\" x-text=\"lib.type\"></span></div><div class=\"text-right\" style=\"color: var(--text-secondary)\"><span x-text=\"(lib.folders || []).length + ' folder(s)'\"></span></div></div></template></div></div><!-- Scan progress --><div x-show=\"scanStarted\" class=\"mb-6 space-y-3\"><h3 class=\"font-semibold\" style=\"color: var(--text-primary)\">Scan Progress</h3><div id=\"library-progress-list\" class=\"space-y-3\"><template x-for=\"job in scanJobs\" :key=\"job.jobId\"><div class=\"p-3 rounded border\" style=\"background-color: var(--bg-primary); border-color: var(--border)\"><div class=\"flex justify-between items-center mb-2\"><span class=\"font-medium\" style=\"color: var(--text-primary)\" x-text=\"job.libraryName\"></span> <span class=\"text-sm\" style=\"color: var(--text-secondary)\" x-text=\"job.statusText\"></span></div><div class=\"w-full rounded-full h-2\" style=\"background-color: var(--bg-secondary)\"><div class=\"h-2 rounded-full transition-all duration-500\" :style=\"'width: ' + job.progress + '%; background-color: var(--accent);'\"></div></div></div></template></div><div x-show=\"scanComplete\" class=\"p-4 rounded-lg border border-green-500/50 bg-green-500/10 text-green-400 text-sm\">Initial scan complete! Your libraries are ready to use.</div></div><div class=\"flex justify-between mt-6\"><button type=\"button\" @click=\"currentStep = 3\" class=\"btn-secondary px-4 py-2 rounded\" :disabled=\"loading\">Back</button><div class=\"flex gap-3\"><button x-show=\"!scanStarted\" type=\"button\" @click=\"startScan()\" class=\"btn-primary px-6 py-2 rounded\" :disabled=\"loading\">Start Scan</button> <button x-show=\"scanStarted && !scanComplete\" type=\"button\" @click=\"finishSetup()\" class=\"btn-secondary px-6 py-2 rounded\" :disabled=\"loading\">Skip to Dashboard</button> <button x-show=\"scanComplete\" type=\"button\" @click=\"finishSetup()\" class=\"btn-primary px-6 py-2 rounded\" :disabled=\"loading\" x-text=\"loading ? 'Finishing...' : 'Go to Dashboard'\"></button></div></div></div></div><!-- Folder Browser Modal (reused from admin library) --><div id=\"folder-browser-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7)\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border)\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Browse Folders</h2><button type=\"button\" @click=\"hideFolderBrowser()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><div id=\"folder-browser-content\"><!-- Directory listings rendered by Alpine --></div></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Setup - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\" x-data=\"setupWizard\" x-init=\"initSetup()\"><div class=\"container mx-auto px-4 py-8 max-w-2xl\"><div class=\"text-center mb-8\"><h1 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Welcome to Bookhoard</h1><p class=\"text-lg text-content-muted\">Let's get your library set up.</p></div><!-- Step indicator --><div class=\"flex items-center justify-center mb-8 gap-2\"><template x-for=\"n in 4\" :key=\"n\"><div class=\"flex items-center gap-2\"><div class=\"w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all\" :class=\"currentStep >= n ? 'bg-[var(--accent)] text-[var(--bg-primary)]' : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border)]'\"><span x-text=\"currentStep > n ? '✓' : n\"></span></div><div x-text=\"['Admin', 'Libraries', 'Folders', 'Scan'][n-1]\" class=\"text-sm hidden sm:inline\" :style=\"currentStep >= n ? 'color: var(--text-primary)' : 'color: var(--text-secondary)'\"></div><div x-show=\"n < 4\" class=\"w-8 h-0.5 mx-1\" :class=\"currentStep > n ? 'bg-[var(--accent)]' : 'bg-[var(--border)]'\"></div></div></template></div><!-- Error display --><div x-show=\"errorMsg\" x-cloak class=\"mb-4 p-4 rounded-lg border border-red-500/50 bg-red-500/10 text-red-400 text-sm\"><span x-text=\"errorMsg\"></span></div><!-- ==================== STEP 1: Create Admin ==================== --><div x-show=\"currentStep === 1\" x-cloak class=\"card p-6\"><h2 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Create Administrator Account</h2><p class=\"mb-6 text-content-muted\">This first account will have full admin privileges.</p><form @submit.prevent=\"submitAdmin()\"><div class=\"mb-6 p-4 rounded-lg border border-line bg-surface\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Server URL (Base URL)</label> <input type=\"url\" x-model=\"admin.baseUrl\" placeholder=\"https://books.example.com\" class=\"input w-full mt-2\" required><p class=\"text-sm mt-2 text-content-muted\">The public URL of your Bookhoard instance. Used for device sync, OPDS feed, and API endpoints.</p></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Email</label> <input type=\"email\" id=\"email\" x-model=\"admin.email\" class=\"input w-full\" required></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Username</label> <input type=\"text\" x-model=\"admin.username\" id=\"username\" class=\"input w-full\" required></div><div class=\"grid grid-cols-2 gap-4 mb-4\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">First Name</label> <input type=\"text\" x-model=\"admin.firstName\" placeholder=\"Optional\" class=\"input w-full\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Last Name</label> <input type=\"text\" x-model=\"admin.lastName\" placeholder=\"Optional\" class=\"input w-full\"></div></div><div id=\"password-requirements\" class=\"mb-4 p-4 rounded-lg border border-line bg-surface text-sm\"><p class=\"font-semibold mb-2 text-content\">Password Requirements:</p><ul class=\"space-y-1 text-content-muted\"><li id=\"req-length\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> At least 8 characters</li><li id=\"req-upper\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One uppercase letter</li><li id=\"req-lower\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One lowercase letter</li><li id=\"req-number\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One number</li><li id=\"req-special\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One special character</li><li id=\"req-match\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> Passwords match</li></ul></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Password</label> <input type=\"password\" x-model=\"admin.password\" id=\"password\" class=\"input w-full\" required></div><div class=\"mb-6\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Confirm Password</label> <input type=\"password\" x-model=\"admin.confirmPassword\" id=\"confirm-password\" class=\"input w-full\" required></div><button type=\"submit\" id=\"register-btn\" class=\"btn btn-primary w-full opacity-50 cursor-not-allowed\" :disabled=\"loading\" x-text=\"loading ? 'Creating...' : 'Create Admin Account'\"></button></form></div><!-- ==================== STEP 2: Create Libraries ==================== --><div x-show=\"currentStep === 2\" x-cloak class=\"card p-6\"><h2 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Create Libraries</h2><p class=\"mb-6 text-content-muted\">Add one or more media libraries. You can always add more later.</p><!-- Created libraries list --><div x-show=\"libraries.length > 0\" x-cloak class=\"mb-6 space-y-2\"><template x-for=\"(lib, idx) in libraries\" :key=\"lib.id\"><div class=\"p-3 rounded-lg border border-line bg-surface flex items-center justify-between\"><div class=\"flex items-center gap-3\"><span class=\"text-xl\" x-text=\"lib.type === 'ebooks' ? '📚' : lib.type === 'comics' ? '📖' : '🗾'\"></span><div><p class=\"font-medium text-content\" x-text=\"lib.name\"></p><p class=\"text-xs capitalize text-content-muted\" x-text=\"lib.type\"></p></div></div><button type=\"button\" @click=\"removeLibrary(idx)\" class=\"text-xs text-danger hover:underline\">Remove</button></div></template></div><!-- Add library form --><form @submit.prevent=\"addLibrary()\" class=\"space-y-4 p-4 rounded-lg border border-line bg-surface\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Library Name</label> <input type=\"text\" x-model=\"newLibrary.name\" placeholder=\"My Ebook Library\" class=\"input w-full\" required></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Library Type</label> <select x-model=\"newLibrary.type\" class=\"input w-full\"><option value=\"ebooks\">📚 Ebooks</option> <option value=\"comics\">📖 Comics</option> <option value=\"manga\">🗾 Manga</option></select></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-1\">Description (optional)</label> <input type=\"text\" x-model=\"newLibrary.description\" placeholder=\"Optional\" class=\"input w-full\"></div><button type=\"submit\" class=\"btn btn-secondary w-full\" :disabled=\"loading || !newLibrary.name.trim()\" x-text=\"loading ? 'Creating...' : '+ Add This Library'\"></button></form><div class=\"flex justify-between mt-6\"><button type=\"button\" @click=\"currentStep = 1\" class=\"btn btn-secondary\">Back</button> <button type=\"button\" @click=\"currentStep = 3\" class=\"btn btn-primary\"><span x-text=\"libraries.length > 0 ? 'Next: Configure Folders' : 'Skip – Continue'\"></span></button></div></div><!-- ==================== STEP 3: Configure Folders ==================== --><div x-show=\"currentStep === 3\" x-cloak class=\"card p-6\"><h2 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Configure Library Folders</h2><p class=\"mb-6 text-content-muted\">Add the filesystem folders where your media files are stored.</p><div x-show=\"libraries.length === 0\" x-cloak class=\"text-center py-8 text-content-muted\"><p>No libraries created. You can add folders later from the admin panel.</p></div><div class=\"space-y-6\"><template x-for=\"lib in libraries\" :key=\"lib.id\"><div class=\"p-4 rounded-lg border border-line bg-surface\"><div class=\"flex items-center gap-2 mb-3\"><span class=\"text-xl\" x-text=\"lib.type === 'ebooks' ? '📚' : lib.type === 'comics' ? '📖' : '🗾'\"></span><h4 class=\"font-semibold text-content\" x-text=\"lib.name\"></h4></div><!-- Existing folders for this library --><div class=\"space-y-1 mb-3\" x-show=\"lib.folders && lib.folders.length > 0\"><template x-for=\"(folder, fIdx) in (lib.folders || [])\" :key=\"folder\"><div class=\"flex items-center justify-between p-2 rounded text-sm border border-line bg-surface-raised\"><span class=\"text-content\" x-text=\"folder\"></span> <button type=\"button\" @click=\"removeFolder(lib.id, folder, fIdx)\" class=\"text-xs text-danger hover:underline\">Remove</button></div></template></div><!-- Add folder --><div class=\"flex gap-2\"><input type=\"text\" :placeholder=\"'/path/to/' + lib.type\" :id=\"'folderInput-' + lib.id\" class=\"input flex-1 text-sm\"> <button type=\"button\" @click=\"showFolderBrowser('folderInput-' + lib.id)\" class=\"btn btn-secondary text-xs\">Browse</button> <button type=\"button\" @click=\"addFolderToLibrary(lib)\" class=\"btn btn-primary text-xs\">Add</button></div></div></template></div><div class=\"flex justify-between mt-6\"><button type=\"button\" @click=\"currentStep = 2\" class=\"btn btn-secondary\">Back</button> <button type=\"button\" @click=\"currentStep = 4\" class=\"btn btn-primary\">Next: Scan</button></div></div><!-- ==================== STEP 4: Scan & Finish ==================== --><div x-show=\"currentStep === 4\" x-cloak class=\"card p-6\"><h2 class=\"text-2xl font-bold tracking-tight text-content mb-2\">Scan & Finish</h2><p class=\"mb-6 text-content-muted\">Review your configuration and start the initial scan.</p><!-- Summary --><div class=\"space-y-3 mb-6\"><div class=\"p-4 rounded-lg border border-line bg-surface\"><p class=\"text-sm font-medium mb-1 text-content-muted\">Server URL</p><p class=\"text-content\" x-text=\"admin.baseUrl\"></p></div><div class=\"p-4 rounded-lg border border-line bg-surface\"><p class=\"text-sm font-medium mb-1 text-content-muted\">Administrator</p><p class=\"text-content\" x-text=\"admin.username + ' (' + admin.email + ')'\"></p></div><div class=\"p-4 rounded-lg border border-line bg-surface\"><p class=\"text-sm font-medium mb-2 text-content-muted\">Libraries (<span x-text=\"libraries.length\"></span>)</p><template x-for=\"lib in libraries\" :key=\"lib.id\"><div class=\"flex items-start justify-between text-sm py-1\"><div><span class=\"text-content\" x-text=\"lib.name\"></span> <span class=\"ml-2 text-xs px-2 py-0.5 rounded bg-brand text-surface\" x-text=\"lib.type\"></span></div><div class=\"text-right text-content-muted\"><span x-text=\"(lib.folders || []).length + ' folder(s)'\"></span></div></div></template></div></div><!-- Scan progress --><div x-show=\"scanStarted\" x-cloak class=\"mb-6 space-y-3\"><h3 class=\"font-semibold text-content\">Scan Progress</h3><div id=\"library-progress-list\" class=\"space-y-3\"><template x-for=\"job in scanJobs\" :key=\"job.jobId\"><div class=\"p-3 rounded border border-line bg-surface\"><div class=\"flex justify-between items-center mb-2\"><span class=\"font-medium text-content\" x-text=\"job.libraryName\"></span> <span class=\"text-sm text-content-muted\" x-text=\"job.statusText\"></span></div><div class=\"w-full rounded-full h-2 bg-surface-raised\"><div class=\"h-2 rounded-full transition-all duration-500\" :style=\"'width: ' + job.progress + '%; background-color: var(--accent);'\"></div></div></div></template></div><div x-show=\"scanComplete\" x-cloak class=\"p-4 rounded-lg border border-green-500/50 bg-green-500/10 text-green-400 text-sm\">Initial scan complete! Your libraries are ready to use.</div></div><div class=\"flex justify-between mt-6\"><button type=\"button\" @click=\"currentStep = 3\" class=\"btn btn-secondary\" :disabled=\"loading\">Back</button><div class=\"flex gap-3\"><button x-show=\"!scanStarted\" x-cloak type=\"button\" @click=\"startScan()\" class=\"btn btn-primary\" :disabled=\"loading\">Start Scan</button> <button x-show=\"scanStarted && !scanComplete\" x-cloak type=\"button\" @click=\"finishSetup()\" class=\"btn btn-secondary\" :disabled=\"loading\">Skip to Dashboard</button> <button x-show=\"scanComplete\" x-cloak type=\"button\" @click=\"finishSetup()\" class=\"btn btn-primary\" :disabled=\"loading\" x-text=\"loading ? 'Finishing...' : 'Go to Dashboard'\"></button></div></div></div></div><!-- Folder Browser Modal (reused from admin library) --><div id=\"folder-browser-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-4\"><h2 class=\"text-xl font-bold text-content\">Browse Folders</h2><button type=\"button\" @click=\"hideFolderBrowser()\" class=\"icon-btn\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</button></div><div id=\"folder-browser-content\"><!-- Directory listings rendered by Alpine --></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/unlinked_books.templ b/templates/unlinked_books.templ
index 95b9a57..774608b 100644
--- a/templates/unlinked_books.templ
+++ b/templates/unlinked_books.templ
@@ -14,84 +14,89 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
 			@Header(user, "/unlinked")
 			<div class="w-full px-4 sm:px-6 lg:px-8 py-8">
 				<div class="mb-8">
-					<h1 class="text-3xl font-bold" style="color: var(--text-primary)">Unlinked Books</h1>
-					<p style="color: var(--text-secondary)">Resolve books that couldn't be automatically matched between devices</p>
+					<h1 class="text-2xl font-bold tracking-tight text-content">Unlinked Books</h1>
+					<p class="text-content-muted">Resolve books that couldn't be automatically matched between devices</p>
 				</div>
 				if len(unlinkedBooks) > 0 {
-					<div class="flex justify-between items-center mb-6 p-4 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+					<div class="flex justify-between items-center mb-6 p-4 rounded-lg border border-line bg-surface-raised">
 						<div class="flex items-center gap-4">
 							<input type="checkbox" id="select-all-unlinked" @change="toggleAllUnlinked()" class="w-5 h-5"/>
-							<label for="select-all-unlinked" class="cursor-pointer" style="color: var(--text-primary)">Select All</label>
-							<span id="selected-count" class="text-sm" style="color: var(--text-secondary)">0 selected</span>
+							<label for="select-all-unlinked" class="cursor-pointer text-content">Select All</label>
+							<span id="selected-count" class="text-sm text-content-muted">0 selected</span>
 						</div>
 						<div class="flex gap-2">
-							<button @click="bulkAutoLink()" class="btn-secondary px-4 py-2 rounded-lg text-sm">
-								🤖 Auto-Link Selected (High Confidence)
+							<button @click="bulkAutoLink()" class="btn btn-secondary text-sm">
+								@Icon("sync", "h-4 w-4")
+								Auto-Link Selected (High Confidence)
 							</button>
-							<button @click="bulkGetSuggestions()" class="btn-secondary px-4 py-2 rounded-lg text-sm">
-								💡 Get Suggestions for Selected
+							<button @click="bulkGetSuggestions()" class="btn btn-secondary text-sm">
+								@Icon("info", "h-4 w-4")
+								Get Suggestions for Selected
 							</button>
-							<button @click="showBulkManualLink()" class="btn-primary px-4 py-2 rounded-lg text-sm">
-								🔗 Bulk Manual Link
+							<button @click="showBulkManualLink()" class="btn btn-primary text-sm">
+								@Icon("arrow-right", "h-4 w-4")
+								Bulk Manual Link
 							</button>
 						</div>
 					</div>
 				}
 				<div id="unlinked-container" class="space-y-6">
 					if len(unlinkedBooks) == 0 {
-						<div class="text-center py-16" style="color: var(--text-secondary)">
-							<div class="text-6xl mb-4">✓</div>
-							<h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">All Books Linked!</h3>
+						<div class="text-center py-16 text-content-muted">
+							<div class="mb-4 flex justify-center">
+								@Icon("check-circle", "h-12 w-12 text-success")
+							</div>
+							<h3 class="text-xl font-semibold mb-2 text-content">All Books Linked!</h3>
 							<p>There are no unlinked books that need manual resolution.</p>
 						</div>
 					}
 					for _, book := range unlinkedBooks {
-						<div class="card p-6 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--border);">
+						<div class="card p-6">
 							<div class="flex gap-6">
 								<div class="flex items-start pt-2">
 									<input type="checkbox" class="unlinked-checkbox w-5 h-5" data-progress-id="{ book.ProgressID }" data-title="{ book.TitleFromDevice }" onchange="updateSelectedCount()"/>
 								</div>
 								<div class="flex-1">
 									<div class="flex items-center gap-3 mb-4">
-										<div class="text-4xl">
+										<div>
 											if book.DeviceType == "koreader" {
-												📖
+												@Icon("book-open", "h-8 w-8")
 											} else if book.DeviceType == "kobo" {
-												📚
+												@Icon("book", "h-8 w-8")
 											} else {
-												📱
+												@Icon("device", "h-8 w-8")
 											}
 										</div>
 										<div>
-											<h3 class="font-semibold text-lg" style="color: var(--text-primary)">{ book.TitleFromDevice }</h3>
-											<p class="text-sm" style="color: var(--text-secondary)">
+											<h3 class="font-semibold text-lg text-content">{ book.TitleFromDevice }</h3>
+											<p class="text-sm text-content-muted">
 												Device: { book.DeviceName } ({ book.DeviceType })
 											</p>
 										</div>
 									</div>
 									<div class="space-y-2 text-sm mb-4">
 										<div>
-											<span style="color: var(--text-secondary)">File Path:</span>
-											<code style="color: var(--text-primary); background-color: var(--bg-primary); padding: 2px 6px; border-radius: 4px;">
+											<span class="text-content-muted">File Path:</span>
+											<code class="text-content bg-surface px-1.5 py-0.5 rounded">
 												{ book.FilePath }
 											</code>
 										</div>
 										if book.SHA256 != "" {
 											<div>
-												<span style="color: var(--text-secondary)">SHA-256:</span>
-												<code style="color: var(--text-primary); background-color: var(--bg-primary); padding: 2px 6px; border-radius: 4px; font-size: 11px;">
+												<span class="text-content-muted">SHA-256:</span>
+												<code class="text-content bg-surface px-1.5 py-0.5 rounded text-[11px]">
 													{ book.SHA256 }
 												</code>
 											</div>
 										}
 										<div>
-											<span style="color: var(--text-secondary)">Last Synced:</span>
-											<span style="color: var(--text-primary)">{ book.LastSyncTime }</span>
+											<span class="text-content-muted">Last Synced:</span>
+											<span class="text-content">{ book.LastSyncTime }</span>
 										</div>
 										if book.ConfidenceScore > 0 {
 											<div>
-												<span style="color: var(--text-secondary)">Auto-Link Confidence:</span>
-												<span style="color: var(--text-primary)">
+												<span class="text-content-muted">Auto-Link Confidence:</span>
+												<span class="text-content">
 													{ book.ConfidenceScore }% confidence
 												</span>
 											</div>
@@ -100,22 +105,24 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
 									<div class="mb-4">
 										<button
 											@click="searchMatches('{ book.ProgressID }', '{ book.SHA256 }', '{ book.TitleFromDevice }')"
-											class="btn-secondary px-4 py-2 rounded-lg text-sm"
+											class="btn btn-secondary text-sm"
 										>
-											🔍 Find Potential Matches
+											@Icon("search", "h-4 w-4")
+											Find Potential Matches
 										</button>
 										<button
 											@click="showManualLinkModal('{ book.ProgressID }', '{ book.TitleFromDevice }')"
-											class="btn-primary px-4 py-2 rounded-lg text-sm"
+											class="btn btn-primary text-sm"
 										>
-											🔗 Manually Link
+											@Icon("arrow-right", "h-4 w-4")
+											Manually Link
 										</button>
 									</div>
 									<div id="matches-{ book.ProgressID }" class="hidden">
-										<div class="border-t pt-4" style="border-color: var(--border);">
-											<h4 class="font-semibold mb-3" style="color: var(--text-primary)">Potential Matches</h4>
+										<div class="border-t border-line pt-4">
+											<h4 class="font-semibold mb-3 text-content">Potential Matches</h4>
 											<div id="matches-list-{ book.ProgressID }" class="space-y-3">
-												<p style="color: var(--text-secondary)">Click "Find Potential Matches" to search</p>
+												<p class="text-content-muted">Click "Find Potential Matches" to search</p>
 											</div>
 										</div>
 									</div>
@@ -126,48 +133,48 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
 				</div>
 			</div>
 			<!-- Manual Link Modal -->
-			<div id="manual-link-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: rgba(0, 0, 0, 0.7);">
-				<div class="card rounded-lg p-6 w-full max-w-md mx-4" style="background-color: var(--bg-secondary); border-color: var(--border);">
+			<div id="manual-link-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background-color: var(--surface-overlay);">
+				<div class="card p-6 w-full max-w-md mx-4">
 					<div class="flex justify-between items-center mb-6">
-						<h2 class="text-xl font-bold" style="color: var(--text-primary)">Manually Link Book</h2>
-						<button @click="hideManualLinkModal()" class="p-2 hover:opacity-80 rounded" style="color: var(--text-primary)">✕</button>
+						<h2 class="text-xl font-bold text-content">Manually Link Book</h2>
+						<button @click="hideManualLinkModal()" class="icon-btn">
+							@Icon("close", "h-5 w-5")
+						</button>
 					</div>
 					<input type="hidden" id="link-progress-id"/>
 					<input type="hidden" id="link-book-sha256"/>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Book Title from Device</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Book Title from Device</label>
 						<input
 							type="text"
 							id="link-book-title"
 							readonly
-							class="w-full px-4 py-2 border rounded-lg"
-							style="background-color: var(--bg-primary); color: var(--text-secondary); border-color: var(--border);"
+							class="input w-full text-content-muted"
 						/>
 					</div>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Search for Book to Link</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Search for Book to Link</label>
 						<div class="flex gap-2">
 							<input
 								type="text"
 								id="link-search-input"
 								placeholder="Search by title, author..."
-								class="flex-1 px-4 py-2 border rounded-lg"
-								style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+								class="input flex-1"
 							/>
 							<button
 								type="button"
 								@click="searchBooksForLink()"
-								class="btn-primary px-4 py-2 rounded-lg"
+								class="btn btn-primary"
 							>
 								Search
 							</button>
 						</div>
 					</div>
 					<div id="link-search-results" class="mb-4 max-h-48 overflow-y-auto space-y-2">
-						<p style="color: var(--text-secondary)">Search for books to link</p>
+						<p class="text-content-muted">Search for books to link</p>
 					</div>
 					<div class="mb-4">
-						<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Confidence Score</label>
+						<label class="block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2">Confidence Score</label>
 						<input
 							type="number"
 							id="link-confidence"
@@ -175,16 +182,15 @@ templ UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) {
 							max="1"
 							step="0.1"
 							value="1.0"
-							class="w-full px-4 py-2 border rounded-lg"
-							style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+							class="input w-full"
 						/>
-						<p class="text-xs mt-1" style="color: var(--text-secondary)">1.0 = manual override (highest confidence)</p>
+						<p class="text-xs mt-1 text-content-muted">1.0 = manual override (highest confidence)</p>
 					</div>
 					<div class="flex justify-end space-x-3">
-						<button type="button" @click="hideManualLinkModal()" class="btn-secondary px-4 py-2 rounded-lg">
+						<button type="button" @click="hideManualLinkModal()" class="btn btn-secondary">
 							Cancel
 						</button>
-						<button type="button" @click="confirmManualLink()" class="btn-primary px-4 py-2 rounded-lg">
+						<button type="button" @click="confirmManualLink()" class="btn btn-primary">
 							Link Book
 						</button>
 					</div>
diff --git a/templates/unlinked_books_templ.go b/templates/unlinked_books_templ.go
index cdd13f0..cd50a7b 100644
--- a/templates/unlinked_books_templ.go
+++ b/templates/unlinked_books_templ.go
@@ -37,164 +37,220 @@ func UnlinkedBooks(user User, unlinkedBooks []UnlinkedBookData) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><h1 class=\"text-3xl font-bold\" style=\"color: var(--text-primary)\">Unlinked Books</h1><p style=\"color: var(--text-secondary)\">Resolve books that couldn't be automatically matched between devices</p></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"w-full px-4 sm:px-6 lg:px-8 py-8\"><div class=\"mb-8\"><h1 class=\"text-2xl font-bold tracking-tight text-content\">Unlinked Books</h1><p class=\"text-content-muted\">Resolve books that couldn't be automatically matched between devices</p></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(unlinkedBooks) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"flex justify-between items-center mb-6 p-4 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex items-center gap-4\"><input type=\"checkbox\" id=\"select-all-unlinked\" @change=\"toggleAllUnlinked()\" class=\"w-5 h-5\"> <label for=\"select-all-unlinked\" class=\"cursor-pointer\" style=\"color: var(--text-primary)\">Select All</label> <span id=\"selected-count\" class=\"text-sm\" style=\"color: var(--text-secondary)\">0 selected</span></div><div class=\"flex gap-2\"><button @click=\"bulkAutoLink()\" class=\"btn-secondary px-4 py-2 rounded-lg text-sm\">🤖 Auto-Link Selected (High Confidence)</button> <button @click=\"bulkGetSuggestions()\" class=\"btn-secondary px-4 py-2 rounded-lg text-sm\">💡 Get Suggestions for Selected</button> <button @click=\"showBulkManualLink()\" class=\"btn-primary px-4 py-2 rounded-lg text-sm\">🔗 Bulk Manual Link</button></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"flex justify-between items-center mb-6 p-4 rounded-lg border border-line bg-surface-raised\"><div class=\"flex items-center gap-4\"><input type=\"checkbox\" id=\"select-all-unlinked\" @change=\"toggleAllUnlinked()\" class=\"w-5 h-5\"> <label for=\"select-all-unlinked\" class=\"cursor-pointer text-content\">Select All</label> <span id=\"selected-count\" class=\"text-sm text-content-muted\">0 selected</span></div><div class=\"flex gap-2\"><button @click=\"bulkAutoLink()\" class=\"btn btn-secondary text-sm\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("sync", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "Auto-Link Selected (High Confidence)</button> <button @click=\"bulkGetSuggestions()\" class=\"btn btn-secondary text-sm\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("info", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "Get Suggestions for Selected</button> <button @click=\"showBulkManualLink()\" class=\"btn btn-primary text-sm\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("arrow-right", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "Bulk Manual Link</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div id=\"unlinked-container\" class=\"space-y-6\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div id=\"unlinked-container\" class=\"space-y-6\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(unlinkedBooks) == 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"text-6xl mb-4\">✓</div><h3 class=\"text-xl font-semibold mb-2\" style=\"color: var(--text-primary)\">All Books Linked!</h3><p>There are no unlinked books that need manual resolution.</p></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"text-center py-16 text-content-muted\"><div class=\"mb-4 flex justify-center\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("check-circle", "h-12 w-12 text-success").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div><h3 class=\"text-xl font-semibold mb-2 text-content\">All Books Linked!</h3><p>There are no unlinked books that need manual resolution.</p></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
 		for _, book := range unlinkedBooks {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"card p-6 rounded-lg border\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex gap-6\"><div class=\"flex items-start pt-2\"><input type=\"checkbox\" class=\"unlinked-checkbox w-5 h-5\" data-progress-id=\"{ book.ProgressID }\" data-title=\"{ book.TitleFromDevice }\" onchange=\"updateSelectedCount()\"></div><div class=\"flex-1\"><div class=\"flex items-center gap-3 mb-4\"><div class=\"text-4xl\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div class=\"card p-6\"><div class=\"flex gap-6\"><div class=\"flex items-start pt-2\"><input type=\"checkbox\" class=\"unlinked-checkbox w-5 h-5\" data-progress-id=\"{ book.ProgressID }\" data-title=\"{ book.TitleFromDevice }\" onchange=\"updateSelectedCount()\"></div><div class=\"flex-1\"><div class=\"flex items-center gap-3 mb-4\"><div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if book.DeviceType == "koreader" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "📖")
+				templ_7745c5c3_Err = Icon("book-open", "h-8 w-8").Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else if book.DeviceType == "kobo" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "📚")
+				templ_7745c5c3_Err = Icon("book", "h-8 w-8").Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "📱")
+				templ_7745c5c3_Err = Icon("device", "h-8 w-8").Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div><div><h3 class=\"font-semibold text-lg\" style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div><div><h3 class=\"font-semibold text-lg text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(book.TitleFromDevice)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 66, Col: 102}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 71, Col: 80}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</h3><p class=\"text-sm\" style=\"color: var(--text-secondary)\">Device: ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</h3><p class=\"text-sm text-content-muted\">Device: ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(book.DeviceName)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 68, Col: 37}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 73, Col: 37}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " (")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " (")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(book.DeviceType)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 68, Col: 58}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 73, Col: 58}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, ")</p></div></div><div class=\"space-y-2 text-sm mb-4\"><div><span style=\"color: var(--text-secondary)\">File Path:</span> <code style=\"color: var(--text-primary); background-color: var(--bg-primary); padding: 2px 6px; border-radius: 4px;\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, ")</p></div></div><div class=\"space-y-2 text-sm mb-4\"><div><span class=\"text-content-muted\">File Path:</span> <code class=\"text-content bg-surface px-1.5 py-0.5 rounded\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(book.FilePath)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 76, Col: 27}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 81, Col: 27}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</code></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</code></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if book.SHA256 != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div><span style=\"color: var(--text-secondary)\">SHA-256:</span> <code style=\"color: var(--text-primary); background-color: var(--bg-primary); padding: 2px 6px; border-radius: 4px; font-size: 11px;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<div><span class=\"text-content-muted\">SHA-256:</span> <code class=\"text-content bg-surface px-1.5 py-0.5 rounded text-[11px]\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var6 string
 				templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(book.SHA256)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 83, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 88, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</code></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</code></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div><span style=\"color: var(--text-secondary)\">Last Synced:</span> <span style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<div><span class=\"text-content-muted\">Last Synced:</span> <span class=\"text-content\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(book.LastSyncTime)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 89, Col: 71}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 94, Col: 57}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</span></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</span></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if book.ConfidenceScore > 0 {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div><span style=\"color: var(--text-secondary)\">Auto-Link Confidence:</span> <span style=\"color: var(--text-primary)\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<div><span class=\"text-content-muted\">Auto-Link Confidence:</span> <span class=\"text-content\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(book.ConfidenceScore)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 95, Col: 35}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/unlinked_books.templ`, Line: 100, Col: 35}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "% confidence</span></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "% confidence</span></div>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div><div class=\"mb-4\"><button @click=\"searchMatches('{ book.ProgressID }', '{ book.SHA256 }', '{ book.TitleFromDevice }')\" class=\"btn-secondary px-4 py-2 rounded-lg text-sm\">🔍 Find Potential Matches</button> <button @click=\"showManualLinkModal('{ book.ProgressID }', '{ book.TitleFromDevice }')\" class=\"btn-primary px-4 py-2 rounded-lg text-sm\">🔗 Manually Link</button></div><div id=\"matches-{ book.ProgressID }\" class=\"hidden\"><div class=\"border-t pt-4\" style=\"border-color: var(--border);\"><h4 class=\"font-semibold mb-3\" style=\"color: var(--text-primary)\">Potential Matches</h4><div id=\"matches-list-{ book.ProgressID }\" class=\"space-y-3\"><p style=\"color: var(--text-secondary)\">Click \"Find Potential Matches\" to search</p></div></div></div></div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div><div class=\"mb-4\"><button @click=\"searchMatches('{ book.ProgressID }', '{ book.SHA256 }', '{ book.TitleFromDevice }')\" class=\"btn btn-secondary text-sm\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("search", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "Find Potential Matches</button> <button @click=\"showManualLinkModal('{ book.ProgressID }', '{ book.TitleFromDevice }')\" class=\"btn btn-primary text-sm\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("arrow-right", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "Manually Link</button></div><div id=\"matches-{ book.ProgressID }\" class=\"hidden\"><div class=\"border-t border-line pt-4\"><h4 class=\"font-semibold mb-3 text-content\">Potential Matches</h4><div id=\"matches-list-{ book.ProgressID }\" class=\"space-y-3\"><p class=\"text-content-muted\">Click \"Find Potential Matches\" to search</p></div></div></div></div></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div><!-- Manual Link Modal --><div id=\"manual-link-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-md mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Manually Link Book</h2><button @click=\"hideManualLinkModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><input type=\"hidden\" id=\"link-progress-id\"> <input type=\"hidden\" id=\"link-book-sha256\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Book Title from Device</label> <input type=\"text\" id=\"link-book-title\" readonly class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-secondary); border-color: var(--border);\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Search for Book to Link</label><div class=\"flex gap-2\"><input type=\"text\" id=\"link-search-input\" placeholder=\"Search by title, author...\" class=\"flex-1 px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"> <button type=\"button\" @click=\"searchBooksForLink()\" class=\"btn-primary px-4 py-2 rounded-lg\">Search</button></div></div><div id=\"link-search-results\" class=\"mb-4 max-h-48 overflow-y-auto space-y-2\"><p style=\"color: var(--text-secondary)\">Search for books to link</p></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Confidence Score</label> <input type=\"number\" id=\"link-confidence\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1.0\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"><p class=\"text-xs mt-1\" style=\"color: var(--text-secondary)\">1.0 = manual override (highest confidence)</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideManualLinkModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" @click=\"confirmManualLink()\" class=\"btn-primary px-4 py-2 rounded-lg\">Link Book</button></div></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div></div><!-- Manual Link Modal --><div id=\"manual-link-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: var(--surface-overlay);\"><div class=\"card p-6 w-full max-w-md mx-4\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold text-content\">Manually Link Book</h2><button @click=\"hideManualLinkModal()\" class=\"icon-btn\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("close", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</button></div><input type=\"hidden\" id=\"link-progress-id\"> <input type=\"hidden\" id=\"link-book-sha256\"><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Book Title from Device</label> <input type=\"text\" id=\"link-book-title\" readonly class=\"input w-full text-content-muted\"></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Search for Book to Link</label><div class=\"flex gap-2\"><input type=\"text\" id=\"link-search-input\" placeholder=\"Search by title, author...\" class=\"input flex-1\"> <button type=\"button\" @click=\"searchBooksForLink()\" class=\"btn btn-primary\">Search</button></div></div><div id=\"link-search-results\" class=\"mb-4 max-h-48 overflow-y-auto space-y-2\"><p class=\"text-content-muted\">Search for books to link</p></div><div class=\"mb-4\"><label class=\"block text-xs font-semibold uppercase tracking-wide text-content-muted mb-2\">Confidence Score</label> <input type=\"number\" id=\"link-confidence\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1.0\" class=\"input w-full\"><p class=\"text-xs mt-1 text-content-muted\">1.0 = manual override (highest confidence)</p></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" @click=\"hideManualLinkModal()\" class=\"btn btn-secondary\">Cancel</button> <button type=\"button\" @click=\"confirmManualLink()\" class=\"btn btn-primary\">Link Book</button></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}