diff --git a/templates/admin_users.templ b/templates/admin_users.templ
index 975bbd9..a120e9c 100644
--- a/templates/admin_users.templ
+++ b/templates/admin_users.templ
@@ -3,143 +3,133 @@ package templates
 templ AdminUsers(currentUser User, users []User, adminCount int) {
 	<!DOCTYPE html>
 	<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<title>Users - Bookhoard Admin</title>
-		<script src="/static/htmx.min.js"></script>
-		<script src="/static/toast.js"></script>
-		<script src="/static/header.js"></script>
-		<script src="/static/theme.js"></script>
-		<link href="/static/style.css" rel="stylesheet">
-	</head>
-	<body class="theme-{ currentUser.Theme }">
-		@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>
-                                    </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 {
-                                            <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)">{ user.CreatedAt.Format("2006-01-02") }</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"
-                                            >
-                                                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>
-	</body>
+		<head>
+			<meta charset="UTF-8"/>
+			<title>Users - Bookhoard Admin</title>
+			<script src="/static/htmx.min.js"></script>
+			<script src="/static/main.js"></script>
+			<link href="/static/style.css" rel="stylesheet"/>
+		</head>
+		<body class="theme-{ currentUser.Theme }">
+			@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>
+										</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 {
+												<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)">{ user.CreatedAt.Format("2006-01-02") }</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"
+												>
+													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>
+		</body>
 	</html>
 }
diff --git a/templates/custom_section.templ b/templates/custom_section.templ
index d9bde0d..8aa8472 100644
--- a/templates/custom_section.templ
+++ b/templates/custom_section.templ
@@ -3,166 +3,193 @@ package templates
 templ CustomSectionBuilder(user User, libraries []LibraryData, errorMessage string) {
 	<!DOCTYPE html>
 	<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>Create Custom Section - Bookhoard</title>
-		<script src="/static/htmx.min.js"></script>
-		<script src="/static/toast.js"></script>
-		<script src="/static/api.js"></script>
-		<script src="/static/custom-section-builder.js"></script>
-		<link href="/static/style.css" rel="stylesheet">
-	</head>
-	<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>
-
-			<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);">
+		<head>
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>Create Custom Section - Bookhoard</title>
+			<script src="/static/htmx.min.js"></script>
+			<script src="/static/main.js"></script>
+			<link href="/static/style.css" rel="stylesheet"/>
+		</head>
+		<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>
+				<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>
-							<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
+						<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);">
-							<option value="">Select a library...</option>
-							for _, lib := range libraries {
-								<option value={ lib.ID }>{ lib.Name }</option>
-							}
-						</select>
+								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>
+								for _, lib := range libraries {
+									<option value={ lib.ID }>{ lib.Name }</option>
+								}
+							</select>
+						</div>
 					</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"
+					<!-- 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
+								style="background-color: var(--accent);"
+							>
+								+ Add Rule
 							</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>
+						<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>
-				</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"
+					<!-- 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
+								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>
-
-					<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>
-
-		@ErrorToast(errorMessage)
-	</body>
+				</form>
+			</main>
+			@ErrorToast(errorMessage)
+		</body>
 	</html>
 }
diff --git a/templates/dashboard.templ b/templates/dashboard.templ
index f5b8bce..8a9b7d6 100644
--- a/templates/dashboard.templ
+++ b/templates/dashboard.templ
@@ -13,10 +13,7 @@ templ Dashboard(user User, sections []handlers.SectionData, allSections []handle
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<title>Dashboard - Bookhoard</title>
 			<script src="/static/htmx.min.js"></script>
-			<script src="/static/toast.js"></script>
-			<script src="/static/api.js"></script>
-			<script src="/static/events.js"></script>
-			<script src="/static/dashboard.js"></script>
+			<script src="/static/main.js"></script>
 			<link href="/static/style.css" rel="stylesheet"/>
 		</head>
 		<body class="theme-{ user.Theme }">
diff --git a/templates/docs.templ b/templates/docs.templ
index 855449b..b5f06ee 100644
--- a/templates/docs.templ
+++ b/templates/docs.templ
@@ -1,26 +1,22 @@
 package templates
 
-import (
-	"fmt"
-)
+import "fmt"
 
 templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 	<!DOCTYPE html>
 	<html lang="en" class="dark">
 		<head>
-			<meta charset="UTF-8">
-			<meta name="viewport" content="width=device-width, initial-scale=1.0">
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<title>{ doc.Title } - Bookhoard Documentation</title>
-			<link href="/static/style.css" rel="stylesheet">
-			<link rel="stylesheet" href="/static/highlight-dark.min.css">
-		<script src="/static/highlight.min.js"></script>
-		<script src="/static/lunr.min.js"></script>
-		<script src="/static/lunr-flex.min.js"></script>
+			<link href="/static/style.css" rel="stylesheet"/>
+			<link rel="stylesheet" href="/static/highlight-dark.min.css"/>
+			<script src="/static/main.js"></script>
 		</head>
 		<body class={ "theme-" + user.Theme + " page-docs bg-background-primary text-text-primary font-sans antialiased" }>
 			@Header(user, currentPath)
 			<!-- Mobile Menu Button -->
-			<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"
@@ -29,27 +25,23 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 					<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 
+					<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 -->
 				for _, section := range nav.Sections {
 					<div class="nav-section mb-6">
-						<div 
+						<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"
 							onclick="toggleSection(this)"
 						>
@@ -78,7 +70,6 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 					</div>
 				}
 			</div>
-
 			<!-- Main Content -->
 			<main class="main-content lg:ml-72 p-8 max-w-4xl mx-auto">
 				<!-- Breadcrumb -->
@@ -92,10 +83,8 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 						}
 					</nav>
 				}
-
 				<!-- Title -->
 				<h1 class="text-4xl font-bold mb-8 text-text-primary">{ 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">
@@ -104,8 +93,8 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 							<span class="ml-2 text-text-secondary text-xs">▼</span>
 						</summary>
 						for _, item := range doc.TOC {
-							<a 
-								href={ "#" + item.Anchor } 
+							<a
+								href={ "#" + item.Anchor }
 								class="toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline"
 								style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) }
 							>
@@ -114,155 +103,161 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 						}
 					</details>
 				}
-
 				<!-- Content -->
 				<div class="prose prose-invert max-w-none">
 					@UnsafeHTML(doc.Content).ToComponent()
 				</div>
 			</main>
-
 			<script>
 				// Toggle sidebar section
 				function toggleSection(el) {
 					const items = el.nextElementSibling;
-					const arrow = el.querySelector('.section-arrow');
-					const isCollapsed = items.getAttribute('data-collapsed') === 'true';
+					const arrow = el.querySelector(".section-arrow");
+					const isCollapsed = items.getAttribute("data-collapsed") === "true";
 
 					if (isCollapsed) {
-						items.classList.remove('hidden');
-						items.setAttribute('data-collapsed', 'false');
-						arrow.style.transform = 'rotate(0deg)';
+						items.classList.remove("hidden");
+						items.setAttribute("data-collapsed", "false");
+						arrow.style.transform = "rotate(0deg)";
 					} else {
-						items.classList.add('hidden');
-						items.setAttribute('data-collapsed', 'true');
-						arrow.style.transform = 'rotate(-90deg)';
+						items.classList.add("hidden");
+						items.setAttribute("data-collapsed", "true");
+						arrow.style.transform = "rotate(-90deg)";
 					}
 				}
 
 				// Toggle sidebar on mobile
 				function toggleSidebar() {
-					const sidebar = document.querySelector('.sidebar');
-					sidebar.classList.toggle('open');
+					const sidebar = document.querySelector(".sidebar");
+					sidebar.classList.toggle("open");
 				}
 
 				// Highlight current page in nav
-				document.addEventListener('DOMContentLoaded', function() {
+				document.addEventListener("DOMContentLoaded", function () {
 					const currentPath = window.location.pathname;
-					document.querySelectorAll('.nav-item').forEach(item => {
-						if (item.getAttribute('href') === currentPath) {
-							item.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');
+					document.querySelectorAll(".nav-item").forEach((item) => {
+						if (item.getAttribute("href") === currentPath) {
+							item.classList.add(
+								"text-accent",
+								"bg-accent/10",
+								"border-r-2",
+								"border-accent",
+							);
 						}
 					});
 
 					// Initialize syntax highlighting
-					if (typeof hljs !== 'undefined') {
+					if (typeof hljs !== "undefined") {
 						hljs.highlightAll();
-					
-					// Add copy buttons to all code blocks
-					document.querySelectorAll('pre code').forEach((block) => {
-						const pre = block.parentElement;
-						const wrapper = document.createElement('div');
-						wrapper.className = 'relative group';
-						pre.parentNode.insertBefore(wrapper, pre);
-						wrapper.appendChild(pre);
-						
-						const button = document.createElement('button');
-						button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
-						button.textContent = 'Copy';
-						button.onclick = async () => {
-							await navigator.clipboard.writeText(block.textContent);
-							button.textContent = 'Copied!';
-							setTimeout(() => {
-								button.textContent = 'Copy';
-							}, 2000);
-						};
-						wrapper.appendChild(button);
-					});
+
+						// Add copy buttons to all code blocks
+						document.querySelectorAll("pre code").forEach((block) => {
+							const pre = block.parentElement;
+							const wrapper = document.createElement("div");
+							wrapper.className = "relative group";
+							pre.parentNode.insertBefore(wrapper, pre);
+							wrapper.appendChild(pre);
+
+							const button = document.createElement("button");
+							button.className =
+								"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
+							button.textContent = "Copy";
+							button.onclick = async () => {
+								await navigator.clipboard.writeText(block.textContent);
+								button.textContent = "Copied!";
+								setTimeout(() => {
+									button.textContent = "Copy";
+								}, 2000);
+							};
+							wrapper.appendChild(button);
+						});
 					}
 
 					// Add copy buttons to all code blocks
-					document.querySelectorAll('pre code').forEach((block) => {
+					document.querySelectorAll("pre code").forEach((block) => {
 						const pre = block.parentElement;
-						const wrapper = document.createElement('div');
-						wrapper.className = 'relative group';
+						const wrapper = document.createElement("div");
+						wrapper.className = "relative group";
 						pre.parentNode.insertBefore(wrapper, pre);
 						wrapper.appendChild(pre);
-						
-						const button = document.createElement('button');
-						button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
-						button.textContent = 'Copy';
+
+						const button = document.createElement("button");
+						button.className =
+							"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
+						button.textContent = "Copy";
 						button.onclick = async () => {
 							await navigator.clipboard.writeText(block.textContent);
-							button.textContent = 'Copied!';
+							button.textContent = "Copied!";
 							setTimeout(() => {
-								button.textContent = 'Copy';
+								button.textContent = "Copy";
 							}, 2000);
 						};
 						wrapper.appendChild(button);
 					});
 				});
 
-					// Add copy buttons to all code blocks
-					document.querySelectorAll('pre code').forEach((block) => {
-						const pre = block.parentElement;
-						const wrapper = document.createElement('div');
-						wrapper.className = 'relative group';
-						pre.parentNode.insertBefore(wrapper, pre);
-						wrapper.appendChild(pre);
-						
-						const button = document.createElement('button');
-						button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
-						button.textContent = 'Copy';
-						button.onclick = async () => {
-							await navigator.clipboard.writeText(block.textContent);
-							button.textContent = 'Copied!';
-							setTimeout(() => {
-								button.textContent = 'Copy';
-							}, 2000);
-						};
-						wrapper.appendChild(button);
-					});
+				// Add copy buttons to all code blocks
+				document.querySelectorAll("pre code").forEach((block) => {
+					const pre = block.parentElement;
+					const wrapper = document.createElement("div");
+					wrapper.className = "relative group";
+					pre.parentNode.insertBefore(wrapper, pre);
+					wrapper.appendChild(pre);
+
+					const button = document.createElement("button");
+					button.className =
+						"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
+					button.textContent = "Copy";
+					button.onclick = async () => {
+						await navigator.clipboard.writeText(block.textContent);
+						button.textContent = "Copied!";
+						setTimeout(() => {
+							button.textContent = "Copy";
+						}, 2000);
+					};
+					wrapper.appendChild(button);
+				});
 
 				// Search state
 				let idx;
 				let searchDocs = [];
 
 				// Load index on page load
-				fetch('/docs/search-index.json')
-					.then(r => r.json())
-					.then(data => {
-						idx = lunr(function() {
+				fetch("/docs/search-index.json")
+					.then((r) => r.json())
+					.then((data) => {
+						idx = lunr(function () {
 							this.use(lunr.flex);
-							this.ref('id');
-							this.field('title', {boost: 10});
-							this.field('content', {boost: 1});
-							data.forEach(doc => this.add(doc));
+							this.ref("id");
+							this.field("title", { boost: 10 });
+							this.field("content", { boost: 1 });
+							data.forEach((doc) => this.add(doc));
 						});
 						searchDocs = data;
-						console.log('Search index loaded:', data.length, 'documents');
+						console.log("Search index loaded:", data.length, "documents");
 					})
-					.catch(err => console.error('Failed to load search index:', err));
+					.catch((err) => console.error("Failed to load search index:", err));
 
 				// Search input with debounce
-				const searchInput = document.getElementById('docs-search');
-				const searchResultsDiv = document.getElementById('search-results');
+				const searchInput = document.getElementById("docs-search");
+				const searchResultsDiv = document.getElementById("search-results");
 
 				let debounceTimer;
 
-				searchInput.addEventListener('input', (e) => {
+				searchInput.addEventListener("input", (e) => {
 					clearTimeout(debounceTimer);
 					debounceTimer = setTimeout(() => {
 						const query = e.target.value.trim();
 
 						if (query.length < 2) {
-							searchResultsDiv.classList.add('hidden');
+							searchResultsDiv.classList.add("hidden");
 							return;
 						}
 
 						// Search with fuzzy matching
 						const results = idx.search(query, {
-							fields: {title: {boost: 10}, content: 1},
-							expand: true
+							fields: { title: { boost: 10 }, content: 1 },
+							expand: true,
 						});
 
 						// Render results
@@ -273,26 +268,29 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 				// Render search results
 				function renderSearchResults(results, query) {
 					if (results.length === 0) {
-						searchResultsDiv.innerHTML = '<div class="text-center py-8 text-text-secondary">No results found</div>';
-						searchResultsDiv.classList.remove('hidden');
+						searchResultsDiv.innerHTML =
+							'<div class="text-center py-8 text-text-secondary">No results found</div>';
+						searchResultsDiv.classList.remove("hidden");
 						return;
 					}
 
-					searchResultsDiv.innerHTML = results.map(r => {
-						const doc = searchDocs.find(d => d.id === r.ref);
-						if (!doc) return '';
+					searchResultsDiv.innerHTML = results
+						.map((r) => {
+							const doc = searchDocs.find((d) => d.id === r.ref);
+							if (!doc) return "";
 
-						const snippet = getSnippet(doc.content, query);
+							const snippet = getSnippet(doc.content, query);
 
-						return `
+							return `
 							<a href="${doc.url}" class="block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline">
 								<div class="font-semibold mb-2">${doc.title}</div>
 								<div class="text-sm text-text-secondary">${snippet}...</div>
 							</a>
 						`;
-					}).join('');
+						})
+						.join("");
 
-					searchResultsDiv.classList.remove('hidden');
+					searchResultsDiv.classList.remove("hidden");
 				}
 
 				function getSnippet(content, query) {
@@ -304,23 +302,26 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 						if (idx !== -1) {
 							const start = Math.max(0, idx - 50);
 							const end = Math.min(content.length, idx + 100);
-							return '...' + content.substring(start, end) + '...';
+							return "..." + content.substring(start, end) + "...";
 						}
 					}
-					return content.substring(0, 150) + '...';
+					return content.substring(0, 150) + "...";
 				}
 
 				// Close search results when clicking outside
-				document.addEventListener('click', (e) => {
-					if (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {
-						searchResultsDiv.classList.add('hidden');
+				document.addEventListener("click", (e) => {
+					if (
+						!searchResultsDiv.contains(e.target) &&
+						e.target !== searchInput
+					) {
+						searchResultsDiv.classList.add("hidden");
 					}
 				});
 
 				// Close search on Escape key
-				document.addEventListener('keydown', (e) => {
-					if (e.key === 'Escape') {
-						searchResultsDiv.classList.add('hidden');
+				document.addEventListener("keydown", (e) => {
+					if (e.key === "Escape") {
+						searchResultsDiv.classList.add("hidden");
 						searchInput.blur();
 					}
 				});
@@ -328,129 +329,136 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 			<script>
 				// Toggle sidebar on mobile
 				function toggleSidebar() {
-					const sidebar = document.querySelector('.sidebar');
-					sidebar.classList.toggle('open');
+					const sidebar = document.querySelector(".sidebar");
+					sidebar.classList.toggle("open");
 				}
 
- 
 				// Highlight current page in nav
-				document.addEventListener('DOMContentLoaded', function() {
+				document.addEventListener("DOMContentLoaded", function () {
 					const currentPath = window.location.pathname;
-					document.querySelectorAll('.nav-item').forEach(item => {
-						if (item.getAttribute('href') === currentPath) {
-							item.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');
+					document.querySelectorAll(".nav-item").forEach((item) => {
+						if (item.getAttribute("href") === currentPath) {
+							item.classList.add(
+								"text-accent",
+								"bg-accent/10",
+								"border-r-2",
+								"border-accent",
+							);
 						}
 					});
 
 					// Initialize syntax highlighting
-					if (typeof hljs !== 'undefined') {
+					if (typeof hljs !== "undefined") {
 						hljs.highlightAll();
 
-					// Add copy buttons to all code blocks
-					document.querySelectorAll('pre code').forEach((block) => {
-						const pre = block.parentElement;
-						const wrapper = document.createElement('div');
-						wrapper.className = 'relative group';
-						pre.parentNode.insertBefore(wrapper, pre);
-						wrapper.appendChild(pre);
-						
-						const button = document.createElement('button');
-						button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
-						button.textContent = 'Copy';
-						button.onclick = async () => {
-							await navigator.clipboard.writeText(block.textContent);
-							button.textContent = 'Copied!';
-							setTimeout(() => {
-								button.textContent = 'Copy';
-							}, 2000);
-						};
-						wrapper.appendChild(button);
-					});
+						// Add copy buttons to all code blocks
+						document.querySelectorAll("pre code").forEach((block) => {
+							const pre = block.parentElement;
+							const wrapper = document.createElement("div");
+							wrapper.className = "relative group";
+							pre.parentNode.insertBefore(wrapper, pre);
+							wrapper.appendChild(pre);
+
+							const button = document.createElement("button");
+							button.className =
+								"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
+							button.textContent = "Copy";
+							button.onclick = async () => {
+								await navigator.clipboard.writeText(block.textContent);
+								button.textContent = "Copied!";
+								setTimeout(() => {
+									button.textContent = "Copy";
+								}, 2000);
+							};
+							wrapper.appendChild(button);
+						});
 					}
 
 					// Add copy buttons to all code blocks
-					document.querySelectorAll('pre code').forEach((block) => {
+					document.querySelectorAll("pre code").forEach((block) => {
 						const pre = block.parentElement;
-						const wrapper = document.createElement('div');
-						wrapper.className = 'relative group';
+						const wrapper = document.createElement("div");
+						wrapper.className = "relative group";
 						pre.parentNode.insertBefore(wrapper, pre);
 						wrapper.appendChild(pre);
-						
-						const button = document.createElement('button');
-						button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
-						button.textContent = 'Copy';
+
+						const button = document.createElement("button");
+						button.className =
+							"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
+						button.textContent = "Copy";
 						button.onclick = async () => {
 							await navigator.clipboard.writeText(block.textContent);
-							button.textContent = 'Copied!';
+							button.textContent = "Copied!";
 							setTimeout(() => {
-								button.textContent = 'Copy';
+								button.textContent = "Copy";
 							}, 2000);
 						};
 						wrapper.appendChild(button);
 					});
 				});
 
-					// Add copy buttons to all code blocks
-					document.querySelectorAll('pre code').forEach((block) => {
-						const pre = block.parentElement;
-						const wrapper = document.createElement('div');
-						wrapper.className = 'relative group';
-						pre.parentNode.insertBefore(wrapper, pre);
-						wrapper.appendChild(pre);
-						
-						const button = document.createElement('button');
-						button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
-						button.textContent = 'Copy';
-						button.onclick = async () => {
-							await navigator.clipboard.writeText(block.textContent);
-							button.textContent = 'Copied!';
-							setTimeout(() => {
-								button.textContent = 'Copy';
-							}, 2000);
-						};
-						wrapper.appendChild(button);
-					});
+				// Add copy buttons to all code blocks
+				document.querySelectorAll("pre code").forEach((block) => {
+					const pre = block.parentElement;
+					const wrapper = document.createElement("div");
+					wrapper.className = "relative group";
+					pre.parentNode.insertBefore(wrapper, pre);
+					wrapper.appendChild(pre);
+
+					const button = document.createElement("button");
+					button.className =
+						"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
+					button.textContent = "Copy";
+					button.onclick = async () => {
+						await navigator.clipboard.writeText(block.textContent);
+						button.textContent = "Copied!";
+						setTimeout(() => {
+							button.textContent = "Copy";
+						}, 2000);
+					};
+					wrapper.appendChild(button);
+				});
 
 				// Search state
 				let idx;
 				let searchDocs = [];
 
 				// Load index on page load
-				fetch('/docs/search-index.json')
-					.then(r => r.json())
-					.then(data => {
-						idx = lunr(function() {
+				fetch("/docs/search-index.json")
+					.then((r) => r.json())
+					.then((data) => {
+						idx = lunr(function () {
 							this.use(lunr.flex);
-							this.ref('id');
-							this.field('title', {boost: 10});
-							this.field('content', {boost: 1});
-							data.forEach(doc => this.add(doc));
+							this.ref("id");
+							this.field("title", { boost: 10 });
+							this.field("content", { boost: 1 });
+							data.forEach((doc) => this.add(doc));
 						});
 						searchDocs = data;
-						console.log('Search index loaded:', data.length, 'documents');
+						console.log("Search index loaded:", data.length, "documents");
 					})
-					.catch(err => console.error('Failed to load search index:', err));
+					.catch((err) => console.error("Failed to load search index:", err));
 
 				// Search input with debounce
-				const searchInput = document.getElementById('docs-search');
-				const searchResultsDiv = document.getElementById('search-results');
+				const searchInput = document.getElementById("docs-search");
+				const searchResultsDiv = document.getElementById("search-results");
 
 				let debounceTimer;
 
-				searchInput.addEventListener('input', (e) => {
+				searchInput.addEventListener("input", (e) => {
 					clearTimeout(debounceTimer);
 					debounceTimer = setTimeout(() => {
 						const query = e.target.value.trim();
 
 						if (query.length < 2) {
-							searchResultsDiv.classList.add('hidden');
+							searchResultsDiv.classList.add("hidden");
 							return;
 						}
 
 						// Search with fuzzy matching
 						const results = idx.search(query, {
-							fields: {title: {boost: 10}, content: 1},
-							expand: true
+							fields: { title: { boost: 10 }, content: 1 },
+							expand: true,
 						});
 
 						// Render results
@@ -461,26 +469,29 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 				// Render search results
 				function renderSearchResults(results, query) {
 					if (results.length === 0) {
-						searchResultsDiv.innerHTML = '<div class="text-center py-8 text-text-secondary">No results found</div>';
-						searchResultsDiv.classList.remove('hidden');
+						searchResultsDiv.innerHTML =
+							'<div class="text-center py-8 text-text-secondary">No results found</div>';
+						searchResultsDiv.classList.remove("hidden");
 						return;
 					}
 
-					searchResultsDiv.innerHTML = results.map(r => {
-						const doc = searchDocs.find(d => d.id === r.ref);
-						if (!doc) return '';
+					searchResultsDiv.innerHTML = results
+						.map((r) => {
+							const doc = searchDocs.find((d) => d.id === r.ref);
+							if (!doc) return "";
 
-						const snippet = getSnippet(doc.content, query);
+							const snippet = getSnippet(doc.content, query);
 
-						return `
+							return `
 							<a href="${doc.url}" class="block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline">
 								<div class="font-semibold mb-2">${doc.title}</div>
 								<div class="text-sm text-text-secondary">${snippet}...</div>
 							</a>
 						`;
-					}).join('');
+						})
+						.join("");
 
-					searchResultsDiv.classList.remove('hidden');
+					searchResultsDiv.classList.remove("hidden");
 				}
 
 				function getSnippet(content, query) {
@@ -492,23 +503,26 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 						if (idx !== -1) {
 							const start = Math.max(0, idx - 50);
 							const end = Math.min(content.length, idx + 100);
-							return '...' + content.substring(start, end) + '...';
+							return "..." + content.substring(start, end) + "...";
 						}
 					}
-					return content.substring(0, 150) + '...';
+					return content.substring(0, 150) + "...";
 				}
 
 				// Close search results when clicking outside
-				document.addEventListener('click', (e) => {
-					if (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {
-						searchResultsDiv.classList.add('hidden');
+				document.addEventListener("click", (e) => {
+					if (
+						!searchResultsDiv.contains(e.target) &&
+						e.target !== searchInput
+					) {
+						searchResultsDiv.classList.add("hidden");
 					}
 				});
 
 				// Close search on Escape key
-				document.addEventListener('keydown', (e) => {
-					if (e.key === 'Escape') {
-						searchResultsDiv.classList.add('hidden');
+				document.addEventListener("keydown", (e) => {
+					if (e.key === "Escape") {
+						searchResultsDiv.classList.add("hidden");
 						searchInput.blur();
 					}
 				});
diff --git a/web/src/api.ts b/web/src/api.ts
index fb7aeb3..bcc8568 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -1,3 +1,6 @@
+import { Alpine } from "./alpine";
+import { showToast } from "./toast";
+
 function getAuthHeader(): string {
   const token = localStorage.getItem("token");
   return token ? `Bearer ${token}` : "";
@@ -82,9 +85,7 @@ function handleError(error: unknown, context: string): void {
   console.error(`${context}:`, error);
   const message =
     error instanceof Error ? error.message : "An unexpected error occurred";
-  if ((window as any).showToast?.error) {
-    (window as any).showToast.error(message);
-  }
+  showToast(message, "error");
 }
 
 export {
@@ -97,3 +98,14 @@ export {
   handleVoidResponse,
   handleError,
 };
+
+Alpine.global("api", {
+  get: apiGet,
+  post: apiPost,
+  put: apiPut,
+  delete: apiDelete,
+  patch: apiPatch,
+  handleResponse: handleResponse,
+  handleVoidResponse: handleVoidResponse,
+  handleError: handleError,
+});
diff --git a/web/src/docs.ts b/web/src/docs.ts
index 26395aa..523e67d 100644
--- a/web/src/docs.ts
+++ b/web/src/docs.ts
@@ -1,3 +1,5 @@
+import { Alpine } from "./alpine";
+
 function toggleSidebar(): void {
   const sidebar = document.getElementById("docs-sidebar");
   const overlay = document.getElementById("docs-overlay");
@@ -91,4 +93,14 @@ document.addEventListener("DOMContentLoaded", () => {
   initializeDocsSearch();
 });
 
-(window as any).toggleSidebar = toggleSidebar;
+Alpine.global("docs", {
+  toggleSidebar,
+  initializeSearch: initializeDocsSearch,
+});
+
+export { toggleSidebar, initializeDocsSearch };
+
+Alpine.global("docs", {
+  toggleSidebar,
+  initializeSearch: initializeDocsSearch,
+});
diff --git a/web/src/password_validation.ts b/web/src/password_validation.ts
index ff020cc..4884718 100644
--- a/web/src/password_validation.ts
+++ b/web/src/password_validation.ts
@@ -1,6 +1,8 @@
 // Password validation for registration form
 // Procedural style - no OOP, passive event listeners for password manager compatibility
 
+import { Alpine } from "./alpine";
+
 // Validation check functions
 function hasMinimumLength(password: string): boolean {
   return password.length >= 8;
@@ -185,4 +187,8 @@ function initPasswordValidation(): void {
 }
 
 // Export for use in template
-(window as any).initPasswordValidation = initPasswordValidation;
+export { initPasswordValidation };
+
+Alpine.global("validation", {
+  initPasswordValidation,
+});

No results found