diff --git a/templates/admin_library_templ.go b/templates/admin_library_templ.go
index 8076701..7037caa 100644
--- a/templates/admin_library_templ.go
+++ b/templates/admin_library_templ.go
@@ -29,14 +29,14 @@ func AdminLibrary(user User) 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\"><title>Library Management - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .btn-primary:hover {\n                opacity: 0.8;\n            }\n        </style></head><body class=\"theme-tokyo-night\"><nav class=\"border-b\" style=\"border-color: var(--border); background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><div class=\"flex items-center\"><h1 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">📚 Bookhoard</h1></div><div class=\"flex items-center space-x-4\"><a href=\"/\" class=\"px-3 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-secondary)\">Library</a> <span style=\"color: var(--text-secondary)\">Welcome, ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Library Management - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\"><nav class=\"border-b\" style=\"border-color: var(--border); background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><div class=\"flex items-center\"><h1 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">📚 Bookhoard</h1></div><div class=\"flex items-center space-x-4\"><a href=\"/\" class=\"px-3 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-secondary)\">Library</a> <span style=\"color: var(--text-secondary)\">Welcome, ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, 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: 55, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_library.templ`, Line: 22, Col: 91}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/admin_profile_templ.go b/templates/admin_profile_templ.go
index 515e114..98e60e0 100644
--- a/templates/admin_profile_templ.go
+++ b/templates/admin_profile_templ.go
@@ -29,14 +29,14 @@ func AdminProfile(user User) 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\"><title>Profile Settings - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .btn-primary:hover {\n                opacity: 0.8;\n            }\n        </style></head><body class=\"theme-tokyo-night\"><nav class=\"border-b\" style=\"border-color: var(--border); background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><div class=\"flex items-center\"><h1 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">📚 Bookhoard</h1></div><div class=\"flex items-center space-x-4\"><a href=\"/\" class=\"px-3 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-secondary)\">Library</a> <span style=\"color: var(--text-secondary)\">Welcome, ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Profile Settings - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\"><nav class=\"border-b\" style=\"border-color: var(--border); background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><div class=\"flex items-center\"><h1 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">📚 Bookhoard</h1></div><div class=\"flex items-center space-x-4\"><a href=\"/\" class=\"px-3 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-secondary)\">Library</a> <span style=\"color: var(--text-secondary)\">Welcome, ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_profile.templ`, Line: 55, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_profile.templ`, Line: 22, Col: 91}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -49,7 +49,7 @@ func AdminProfile(user User) templ.Component {
 		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_profile.templ`, Line: 101, Col: 92}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_profile.templ`, Line: 68, Col: 92}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -62,7 +62,7 @@ func AdminProfile(user User) templ.Component {
 		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_profile.templ`, Line: 110, Col: 87}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin_profile.templ`, Line: 77, Col: 87}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/admin_templ.go b/templates/admin_templ.go
index a26891c..48f655e 100644
--- a/templates/admin_templ.go
+++ b/templates/admin_templ.go
@@ -29,14 +29,14 @@ func Admin(user User) 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\"><title>Admin Dashboard - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .btn-primary:hover {\n                opacity: 0.8;\n            }\n        </style></head><body class=\"theme-tokyo-night\"><nav class=\"border-b\" style=\"border-color: var(--border); background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><div class=\"flex items-center\"><h1 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">📚 Bookhoard</h1></div><div class=\"flex items-center space-x-4\"><a href=\"/\" class=\"px-3 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-secondary)\">Library</a> <span style=\"color: var(--text-secondary)\">Welcome, ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Admin Dashboard - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\"><nav class=\"border-b\" style=\"border-color: var(--border); background-color: var(--bg-secondary)\"><div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"><div class=\"flex justify-between items-center h-16\"><div class=\"flex items-center\"><h1 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">📚 Bookhoard</h1></div><div class=\"flex items-center space-x-4\"><a href=\"/\" class=\"px-3 py-2 text-sm hover:opacity-80\" style=\"color: var(--text-secondary)\">Library</a> <span style=\"color: var(--text-secondary)\">Welcome, ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin.templ`, Line: 55, Col: 91}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/admin.templ`, Line: 22, Col: 91}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
diff --git a/templates/analytics_templ.go b/templates/analytics_templ.go
index 2ca44f8..792cd5b 100644
--- a/templates/analytics_templ.go
+++ b/templates/analytics_templ.go
@@ -29,7 +29,7 @@ func Analytics(user User) 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>Reading Analytics - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><script src=\"/static/theme.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script><style>\n            .stat-card {\n                transition: transform 0.2s ease, box-shadow 0.2s ease;\n            }\n            .stat-card:hover {\n                transform: translateY(-2px);\n                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n            }\n        </style></head><body class=\"theme-{ user.Theme }\">")
+		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>Reading Analytics - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><script src=\"/static/theme.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script></head><body class=\"theme-{ user.Theme }\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -37,7 +37,7 @@ 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=\"max-w-7xl mx-auto 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 onclick=\"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=\"stat-card card p-6 rounded-lg border\" 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=\"stat-card card p-6 rounded-lg border\" 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=\"stat-card card p-6 rounded-lg border\" 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=\"stat-card card p-6 rounded-lg border\" 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><script src=\"/static/analytics.js\"></script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"max-w-7xl mx-auto 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 onclick=\"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><script src=\"/static/analytics.js\"></script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/bookshelf_templ.go b/templates/bookshelf_templ.go
index a14670b..f6b8069 100644
--- a/templates/bookshelf_templ.go
+++ b/templates/bookshelf_templ.go
@@ -29,7 +29,7 @@ func BookShelf(user User) 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>Library - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><script src=\"/static/header.js\"></script><script src=\"/static/search.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-dracula {\n                --bg-primary: #282a36;\n                --bg-secondary: #21222c;\n                --text-primary: #f8f8f2;\n                --text-secondary: #6272a4;\n                --accent: #bd93f9;\n                --border: #44475a;\n            }\n            .theme-nord {\n                --bg-primary: #2e3440;\n                --bg-secondary: #3b4252;\n                --text-primary: #eceff4;\n                --text-secondary: #5e81ac;\n                --accent: #88c0d0;\n                --border: #4c566a;\n            }\n            .theme-solarized-dark {\n                --bg-primary: #002b36;\n                --bg-secondary: #073642;\n                --text-primary: #93a1a1;\n                --text-secondary: #586e75;\n                --accent: #2aa198;\n                --border: #586e75;\n            }\n            .theme-monokai {\n                --bg-primary: #272822;\n                --bg-secondary: #3e3d32;\n                --text-primary: #f8f8f2;\n                --text-secondary: #75715e;\n                --accent: #a6e22e;\n                --border: #49483e;\n            }\n            .theme-one-dark-pro {\n                --bg-primary: #282c34;\n                --bg-secondary: #21252b;\n                --text-primary: #abb2bf;\n                --text-secondary: #5c6370;\n                --accent: #61dafb;\n                --border: #3e4451;\n            }\n            .theme-material-dark {\n                --bg-primary: #263238;\n                --bg-secondary: #37474f;\n                --text-primary: #eeffff;\n                --text-secondary: #546e7a;\n                --accent: #80cbc4;\n                --border: #455a64;\n            }\n            .theme-catppuccin-mocha {\n                --bg-primary: #1e1e2e;\n                --bg-secondary: #181825;\n                --text-primary: #cdd6f4;\n                --text-secondary: #bac2de;\n                --accent: #f38ba8;\n                --border: #313244;\n            }\n            .theme-catppuccin-macchiato {\n                --bg-primary: #24273a;\n                --bg-secondary: #1e2030;\n                --text-primary: #cad3f5;\n                --text-secondary: #b8c0e0;\n                --accent: #f0c6c6;\n                --border: #363a4f;\n            }\n            .theme-catppuccin-frappe {\n                --bg-primary: #303446;\n                --bg-secondary: #292c3c;\n                --text-primary: #c6d0f5;\n                --text-secondary: #b5bfe2;\n                --accent: #f2d5cf;\n                --border: #414559;\n            }\n            .theme-catppuccin-latte {\n                --bg-primary: #eff1f5;\n                --bg-secondary: #e6e9ef;\n                --text-primary: #4c4f69;\n                --text-secondary: #5c5f77;\n                --accent: #d20f39;\n                --border: #bcc0cc;\n            }\n            /* Wood themes */\n            .theme-wood-light {\n                --bg-primary: rgba(222, 184, 135, 0.9);\n                --bg-secondary: rgba(210, 166, 121, 0.95);\n                --text-primary: #2c1810;\n                --text-secondary: #5a3a2a;\n                --accent: #8b5a2b;\n                --border: #6b4423;\n            }\n            .theme-wood-dark {\n                --bg-primary: rgba(139, 115, 85, 0.9);\n                --bg-secondary: rgba(107, 83, 68, 0.95);\n                --text-primary: #f5e6d3;\n                --text-secondary: #d4c4b0;\n                --accent: #deb887;\n                --border: #5a4636;\n            }\n            .theme-wood-mahogany {\n                --bg-primary: rgba(160, 82, 45, 0.9);\n                --bg-secondary: rgba(139, 69, 19, 0.95);\n                --text-primary: #ffe4c4;\n                --text-secondary: #daa520;\n                --accent: #f4a460;\n                --border: #8b4513;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n                min-height: 100vh;\n                transition: background 0.3s ease;\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .shelf {\n                position: relative;\n                background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%);\n                padding: 2rem 1rem;\n                margin-bottom: 1rem;\n                border-radius: 0.5rem;\n            }\n            .shelf::after {\n                content: '';\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                height: 12px;\n                background: linear-gradient(to bottom, \n                    rgba(107, 68, 35, 0.3) 0%, \n                    rgba(107, 68, 35, 0.5) 50%,\n                    rgba(107, 68, 35, 0.3) 100%);\n                border-radius: 0 0 0.5rem 0.5rem;\n                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n            }\n            .book-item {\n                position: relative;\n                transition: transform 0.2s ease, box-shadow 0.2s ease;\n                cursor: pointer;\n            }\n            .book-item:hover {\n                transform: translateY(-8px) rotate(-2deg);\n                box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);\n                z-index: 10;\n            }\n            .book-cover {\n                aspect-ratio: 2/3;\n                overflow: hidden;\n                border-radius: 0.25rem;\n                box-shadow: \n                    2px 2px 4px rgba(0, 0, 0, 0.2),\n                    -1px -1px 2px rgba(255, 255, 255, 0.1) inset;\n                position: relative;\n            }\n            .book-cover::before {\n                content: '';\n                position: absolute;\n                left: 0;\n                top: 0;\n                bottom: 0;\n                width: 4px;\n                background: linear-gradient(to right,\n                    rgba(0, 0, 0, 0.3) 0%,\n                    rgba(255, 255, 255, 0.1) 50%,\n                    transparent 100%);\n            }\n            .library-selector {\n                margin-bottom: 2rem;\n            }\n            .loading-spinner {\n                display: inline-block;\n                width: 40px;\n                height: 40px;\n                border: 4px solid var(--border);\n                border-top-color: var(--accent);\n                border-radius: 50%;\n                animation: spin 1s linear infinite;\n            }\n            @keyframes spin {\n                to { transform: rotate(360deg); }\n            }\n        </style></head><body class=\"theme-tokyo-night\">")
+		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>Library - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><script src=\"/static/header.js\"></script><script src=\"/static/search.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -37,7 +37,7 @@ func BookShelf(user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\"><!-- Library Selector --><div class=\"library-selector\"><div class=\"flex flex-col sm:flex-row gap-4 items-center justify-between\"><div class=\"flex-1 w-full\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Select Library</label> <select id=\"library-select\" onchange=\"selectLibrary()\" class=\"w-full px-4 py-3 border rounded-lg text-lg\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Loading libraries...</option></select></div><div class=\"flex gap-2\"><button onclick=\"loadBookshelf()\" class=\"btn-primary px-6 py-3 rounded-lg font-medium\">Refresh</button></div></div></div><!-- Bookshelf Container --><div id=\"bookshelf-container\"><!-- Loading state --><div id=\"loading\" class=\"text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading your library...</p></div><!-- Empty state --><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 Books Yet</h3><p>Select a library to view your collection</p></div><!-- Books Grid --><div id=\"books-grid\" class=\"hidden\"><!-- Books will be loaded here on shelves --></div></div></div><script src=\"/static/theme.js\"></script><script>\n            let libraries = [];\n            let currentLibrary = null;\n            let mediaItems = [];\n\n            function loadLibraries() {\n                const loading = document.getElementById('loading');\n                const librarySelect = document.getElementById('library-select');\n                \n                loading.style.display = 'block';\n\n                fetch('/api/libraries/visible', {\n                    headers: {\n                        'Authorization': 'Bearer ' + localStorage.getItem('token'),\n                        'Content-Type': 'application/json'\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    loading.style.display = 'none';\n                    libraries = data;\n                    populateLibrarySelect();\n                    \n                    // Auto-select first library if available\n                    if (libraries.length > 0 && !currentLibrary) {\n                        currentLibrary = libraries[0];\n                        librarySelect.value = currentLibrary.id;\n                        loadBookshelf();\n                    }\n                })\n                .catch(error => {\n                    loading.style.display = 'none';\n                    console.error('Error loading libraries:', error);\n                    showToast('Error loading libraries', 'error');\n                });\n            }\n\n            function populateLibrarySelect() {\n                const librarySelect = document.getElementById('library-select');\n                \n                if (libraries.length === 0) {\n                    librarySelect.innerHTML = '<option value=\"\">No libraries available</option>';\n                    return;\n                }\n\n                librarySelect.innerHTML = '<option value=\"\">Select a library...</option>' +\n                    libraries.map(library => {\n                        const icon = getLibraryIcon(library.type_name);\n                        return `<option value=\"${library.id}\">${icon} ${library.name}</option>`;\n                    }).join('');\n            }\n\n            function getLibraryIcon(typeName) {\n                switch (typeName) {\n                    case 'ebooks': return '📚';\n                    case 'comics': return '📖';\n                    case 'manga': return '🗾';\n                    default: return '📁';\n                }\n            }\n\n            function selectLibrary() {\n                const librarySelect = document.getElementById('library-select');\n                const libraryId = librarySelect.value;\n                \n                currentLibrary = libraries.find(l => l.id === libraryId);\n                loadBookshelf();\n            }\n\n            function loadBookshelf() {\n                if (!currentLibrary) {\n                    showEmptyState();\n                    return;\n                }\n\n                const loading = document.getElementById('loading');\n                const booksGrid = document.getElementById('books-grid');\n                const emptyState = document.getElementById('empty-state');\n\n                loading.style.display = 'block';\n                booksGrid.classList.add('hidden');\n                emptyState.classList.add('hidden');\n\n                fetch(`/api/media-items?library_id=${currentLibrary.id}&limit=100&offset=0`, {\n                    headers: {\n                        'Authorization': 'Bearer ' + localStorage.getItem('token'),\n                        'Content-Type': 'application/json'\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    loading.style.display = 'none';\n                    mediaItems = data;\n                    \n                    if (mediaItems.length === 0) {\n                        showEmptyState();\n                    } else {\n                        renderBookshelf();\n                    }\n                })\n                .catch(error => {\n                    loading.style.display = 'none';\n                    console.error('Error loading bookshelf:', error);\n                    showToast('Error loading books', 'error');\n                });\n            }\n\n            function showEmptyState() {\n                const booksGrid = document.getElementById('books-grid');\n                const emptyState = document.getElementById('empty-state');\n                const loading = document.getElementById('loading');\n                \n                loading.style.display = 'none';\n                booksGrid.classList.add('hidden');\n                emptyState.classList.remove('hidden');\n            }\n\n            function renderBookshelf() {\n                const booksGrid = document.getElementById('books-grid');\n                const emptyState = document.getElementById('empty-state');\n                const loading = document.getElementById('loading');\n                \n                loading.style.display = 'none';\n                emptyState.classList.add('hidden');\n                booksGrid.classList.remove('hidden');\n\n                // Group books into shelves (6 books per shelf for better display)\n                const booksPerShelf = 6;\n                const shelves = [];\n                \n                for (let i = 0; i < mediaItems.length; i += booksPerShelf) {\n                    shelves.push(mediaItems.slice(i, i + booksPerShelf));\n                }\n\n                let html = '';\n                shelves.forEach((shelfBooks, index) => {\n                    html += `<div class=\"shelf\">\n                        <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4\">\n                            ${shelfBooks.map(book => renderBookCard(book)).join('')}\n                        </div>\n                    </div>`;\n                });\n\n                booksGrid.innerHTML = html;\n            }\n\n            function renderBookCard(book) {\n                const coverUrl = book.cover_image_path || '/static/placeholder-book.svg';\n                const authorHtml = book.author ? `<p class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</p>` : '';\n                \n                return `<div class=\"book-item\" onclick=\"viewBook('${book.id}')\">\n                    <div class=\"book-cover\">\n                        <img src=\"${coverUrl}\" \n                             alt=\"${book.title}\" \n                             class=\"w-full h-full object-cover\"\n                             onerror=\"this.src='/static/placeholder-book.svg'\"\n                        >\n                    </div>\n                    <div class=\"mt-2\">\n                        <h3 class=\"text-sm font-semibold line-clamp-2\" style=\"color: var(--text-primary)\">${book.title}</h3>\n                        ${authorHtml}\n                    </div>\n                </div>`;\n            }\n\n            function viewBook(bookId) {\n                // TODO: Navigate to book detail view\n                showToast('Book viewer coming soon!', 'info');\n            }\n\n            // Initialize\n            document.addEventListener('DOMContentLoaded', function() {\n                loadTheme();\n                loadLibraries();\n            });\n        </script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\"><!-- Library Selector --><div class=\"mb-8\"><div class=\"flex flex-col sm:flex-row gap-4 items-center justify-between\"><div class=\"flex-1 w-full\"><label class=\"block text-sm font-medium mb-2\" style=\"color: var(--text-secondary)\">Select Library</label> <select id=\"library-select\" onchange=\"selectLibrary()\" class=\"w-full px-4 py-3 border rounded-lg text-lg\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border);\"><option value=\"\">Loading libraries...</option></select></div><div class=\"flex gap-2\"><button onclick=\"loadBookshelf()\" class=\"btn-primary px-6 py-3 rounded-lg font-medium\">Refresh</button></div></div></div><!-- Bookshelf Container --><div id=\"bookshelf-container\"><!-- Loading state --><div id=\"loading\" class=\"text-center py-16\" style=\"color: var(--text-secondary)\"><div class=\"loading-spinner mx-auto mb-4\"></div><p>Loading your library...</p></div><!-- Empty state --><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 Books Yet</h3><p>Select a library to view your collection</p></div><!-- Books Grid --><div id=\"books-grid\" class=\"hidden\"><!-- Books will be loaded here on shelves --></div></div></div><script src=\"/static/theme.js\"></script><script>\n            let libraries = [];\n            let currentLibrary = null;\n            let mediaItems = [];\n\n            function loadLibraries() {\n                const loading = document.getElementById('loading');\n                const librarySelect = document.getElementById('library-select');\n                \n                loading.style.display = 'block';\n\n                fetch('/api/libraries/visible', {\n                    headers: {\n                        'Authorization': 'Bearer ' + localStorage.getItem('token'),\n                        'Content-Type': 'application/json'\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    loading.style.display = 'none';\n                    libraries = data;\n                    populateLibrarySelect();\n                    \n                    // Auto-select first library if available\n                    if (libraries.length > 0 && !currentLibrary) {\n                        currentLibrary = libraries[0];\n                        librarySelect.value = currentLibrary.id;\n                        loadBookshelf();\n                    }\n                })\n                .catch(error => {\n                    loading.style.display = 'none';\n                    console.error('Error loading libraries:', error);\n                    showToast('Error loading libraries', 'error');\n                });\n            }\n\n            function populateLibrarySelect() {\n                const librarySelect = document.getElementById('library-select');\n                \n                if (libraries.length === 0) {\n                    librarySelect.innerHTML = '<option value=\"\">No libraries available</option>';\n                    return;\n                }\n\n                librarySelect.innerHTML = '<option value=\"\">Select a library...</option>' +\n                    libraries.map(library => {\n                        const icon = getLibraryIcon(library.type_name);\n                        return `<option value=\"${library.id}\">${icon} ${library.name}</option>`;\n                    }).join('');\n            }\n\n            function getLibraryIcon(typeName) {\n                switch (typeName) {\n                    case 'ebooks': return '📚';\n                    case 'comics': return '📖';\n                    case 'manga': return '🗾';\n                    default: return '📁';\n                }\n            }\n\n            function selectLibrary() {\n                const librarySelect = document.getElementById('library-select');\n                const libraryId = librarySelect.value;\n                \n                currentLibrary = libraries.find(l => l.id === libraryId);\n                loadBookshelf();\n            }\n\n            function loadBookshelf() {\n                if (!currentLibrary) {\n                    showEmptyState();\n                    return;\n                }\n\n                const loading = document.getElementById('loading');\n                const booksGrid = document.getElementById('books-grid');\n                const emptyState = document.getElementById('empty-state');\n\n                loading.style.display = 'block';\n                booksGrid.classList.add('hidden');\n                emptyState.classList.add('hidden');\n\n                fetch(`/api/media-items?library_id=${currentLibrary.id}&limit=100&offset=0`, {\n                    headers: {\n                        'Authorization': 'Bearer ' + localStorage.getItem('token'),\n                        'Content-Type': 'application/json'\n                    }\n                })\n                .then(response => response.json())\n                .then(data => {\n                    loading.style.display = 'none';\n                    mediaItems = data;\n                    \n                    if (mediaItems.length === 0) {\n                        showEmptyState();\n                    } else {\n                        renderBookshelf();\n                    }\n                })\n                .catch(error => {\n                    loading.style.display = 'none';\n                    console.error('Error loading bookshelf:', error);\n                    showToast('Error loading books', 'error');\n                });\n            }\n\n            function showEmptyState() {\n                const booksGrid = document.getElementById('books-grid');\n                const emptyState = document.getElementById('empty-state');\n                const loading = document.getElementById('loading');\n                \n                loading.style.display = 'none';\n                booksGrid.classList.add('hidden');\n                emptyState.classList.remove('hidden');\n            }\n\n            function renderBookshelf() {\n                const booksGrid = document.getElementById('books-grid');\n                const emptyState = document.getElementById('empty-state');\n                const loading = document.getElementById('loading');\n                \n                loading.style.display = 'none';\n                emptyState.classList.add('hidden');\n                booksGrid.classList.remove('hidden');\n\n                // Group books into shelves (6 books per shelf for better display)\n                const booksPerShelf = 6;\n                const shelves = [];\n                \n                for (let i = 0; i < mediaItems.length; i += booksPerShelf) {\n                    shelves.push(mediaItems.slice(i, i + booksPerShelf));\n                }\n\n                let html = '';\n                shelves.forEach((shelfBooks, index) => {\n                    html += `<div class=\"relative bg-gradient-to-b from-transparent to-black/10 p-8 mb-4 rounded-lg\" style=\"padding-bottom: 3rem;\">\n                        <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4\">\n                            ${shelfBooks.map(book => renderBookCard(book)).join('')}\n                        </div>\n                        <div class=\"absolute bottom-0 left-0 right-0 h-3 rounded-b-lg\" style=\"background: linear-gradient(to bottom, rgba(107, 68, 35, 0.3) 0%, rgba(107, 68, 35, 0.5) 50%, rgba(107, 68, 35, 0.3) 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\"></div>\n                    </div>`;\n                });\n\n                booksGrid.innerHTML = html;\n            }\n\n            function renderBookCard(book) {\n                const coverUrl = book.cover_image_path || '/static/placeholder-book.svg';\n                const authorHtml = book.author ? `<p class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</p>` : '';\n\n                return `<div class=\"relative transition-all duration-200 ease hover:-translate-y-2 hover:-rotate-2 hover:shadow-2xl hover:z-10 cursor-pointer\" onclick=\"viewBook('${book.id}')\">\n                    <div class=\"aspect-[2/3] overflow-hidden rounded shadow-[2px_2px_4px_rgba(0,0,0,0.2),-1px_-1px_2px_rgba(255,255,255,0.1)_inset] relative\">\n                        <div class=\"absolute left-0 top-0 bottom-0 w-1\" style=\"background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);\"></div>\n                        <img src=\"${coverUrl}\"\n                             alt=\"${book.title}\"\n                             class=\"w-full h-full object-cover\"\n                             onerror=\"this.src='/static/placeholder-book.svg'\"\n                        >\n                    </div>\n                    <div class=\"mt-2\">\n                        <h3 class=\"text-sm font-semibold line-clamp-2\" style=\"color: var(--text-primary)\">${book.title}</h3>\n                        ${authorHtml}\n                    </div>\n                </div>`;\n            }\n\n            function viewBook(bookId) {\n                // TODO: Navigate to book detail view\n                showToast('Book viewer coming soon!', 'info');\n            }\n\n            // Initialize\n            document.addEventListener('DOMContentLoaded', function() {\n                loadTheme();\n                loadLibraries();\n            });\n        </script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/conflicts_templ.go b/templates/conflicts_templ.go
index 5138e72..1531949 100644
--- a/templates/conflicts_templ.go
+++ b/templates/conflicts_templ.go
@@ -31,7 +31,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 			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>Sync Conflicts - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><script src=\"/static/theme.js\"></script><style>\n            .conflict-card {\n                border-left: 4px solid #f59e0b;\n            }\n            .conflict-resolved {\n                border-left-color: #10b981;\n                opacity: 0.7;\n            }\n            .progress-bar {\n                height: 8px;\n                border-radius: 4px;\n                background-color: var(--border);\n                overflow: hidden;\n            }\n            .progress-fill {\n                height: 100%;\n                background-color: var(--accent);\n                transition: width 0.3s ease;\n            }\n            .device-badge {\n                display: inline-block;\n                padding: 2px 8px;\n                border-radius: 4px;\n                font-size: 11px;\n                font-weight: 600;\n                text-transform: uppercase;\n            }\n            .device-koreader { background-color: #3b82f6; color: white; }\n            .device-kobo { background-color: #8b5cf6; color: white; }\n            .device-web { background-color: #10b981; color: white; }\n            .device-mobile { background-color: #f59e0b; color: white; }\n        </style></head><body class=\"theme-{ user.Theme }\">")
+		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>Sync Conflicts - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><script src=\"/static/theme.js\"></script></head><body class=\"theme-{ user.Theme }\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -46,7 +46,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		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: 74, Col: 121}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 42, Col: 121}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -59,7 +59,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		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: 75, Col: 120}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 43, Col: 120}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -72,7 +72,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 		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: 76, Col: 126}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 44, Col: 126}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -89,14 +89,14 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 			}
 		}
 		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: 4px solid #f59e0b;\"><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, 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)\">")
 			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: 138, Col: 136}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 106, Col: 137}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -109,7 +109,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 			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: 139, Col: 127}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 107, Col: 128}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -122,7 +122,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(conflict.CreatedAt.Format("2006-01-02 15:04:05"))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 147, Col: 98}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 115, Col: 99}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -140,7 +140,7 @@ func Conflicts(user User, conflicts []handlers.ConflictDetailResponse, total int
 				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: 149, Col: 79}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/conflicts.templ`, Line: 117, Col: 80}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
diff --git a/templates/dashboard_templ.go b/templates/dashboard_templ.go
index 0fc5500..aaa3105 100644
--- a/templates/dashboard_templ.go
+++ b/templates/dashboard_templ.go
@@ -29,7 +29,7 @@ func Dashboard(user User) 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>Dashboard - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><script src=\"/static/header.js\"></script><script src=\"/static/search.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .btn-primary:hover {\n                opacity: 0.8;\n            }\n            .rating-star {\n                display: inline-block;\n                transition: all 0.2s ease;\n                cursor: pointer;\n                position: relative;\n            }\n            .rating-star:hover {\n                transform: scale(1.1);\n            }\n            .half-star {\n                position: relative;\n                display: inline-block;\n            }\n            .half-star::before {\n                content: '★';\n                position: absolute;\n                left: 0;\n                top: 0;\n                width: 50%;\n                overflow: hidden;\n                color: #facc15; /* yellow-400 */\n            }\n            .rating-text {\n                font-size: 0.875rem;\n                margin-left: 0.5rem;\n                opacity: 0.8;\n            }\n        </style></head><body class=\"theme-tokyo-night\">")
+		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>Dashboard - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><script src=\"/static/header.js\"></script><script src=\"/static/search.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/docs_templ.go b/templates/docs_templ.go
index 1e16da2..7c145c7 100644
--- a/templates/docs_templ.go
+++ b/templates/docs_templ.go
@@ -46,7 +46,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Documentation</title><script src=\"https://cdn.tailwindcss.com\"></script><link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css\"><script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr-flex@1.0.5/lunr.flex.min.js\"></script><script>\n\t\t\t\ttailwind.config = {\n\t\t\t\t\tdarkMode: 'class',\n\t\t\t\t\ttheme: {\n\t\t\t\t\t\textend: {\n\t\t\t\t\t\t\tcolors: {\n\t\t\t\t\t\t\t\tbackground: {\n\t\t\t\t\t\t\t\t\tprimary: '#1a1b26',\n\t\t\t\t\t\t\t\t\tsecondary: '#24283b',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ttext: {\n\t\t\t\t\t\t\t\t\tprimary: '#c0caf5',\n\t\t\t\t\t\t\t\t\tsecondary: '#9aa5ce',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tborder: '#414868',\n\t\t\t\t\t\t\t\taccent: '#7aa2f7',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</script><style>\n\t\t\t\t/* Only custom CSS for dynamic values and theming */\n\t\t\t\t.sidebar {\n\t\t\t\t\ttransition: transform 0.3s ease-in-out;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t/* Smooth scroll behavior */\n\t\t\t\thtml {\n\t\t\t\t\tscroll-behavior: smooth;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t/* Custom scrollbar */\n\t\t\t\t::-webkit-scrollbar {\n\t\t\t\t\twidth: 8px;\n\t\t\t\t\theight: 8px;\n\t\t\t\t}\n\t\t\t\t::-webkit-scrollbar-track {\n\t\t\t\t\tbackground: #1a1b26;\n\t\t\t\t}\n\t\t\t\t::-webkit-scrollbar-thumb {\n\t\t\t\t\tbackground: #414868;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t}\n\t\t\t\t::-webkit-scrollbar-thumb:hover {\n\t\t\t\t\tbackground: #7aa2f7;\n\t\t\t\t}\n\n\t\t\t\t/* Search results overlay animation */\n\t\t\t\t#search-results {\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\n\t\t\t\t/* Mobile responsive sidebar */\n\t\t\t\t@media (max-width: 768px) {\n\t\t\t\t\t.sidebar {\n\t\t\t\t\t\ttransform: translateX(-100%);\n\t\t\t\t\t}\n\t\t\t\t\t.sidebar.open {\n\t\t\t\t\t\ttransform: translateX(0);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</style></head><body class=\"bg-background-primary text-text-primary font-sans antialiased\"><!-- 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\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0\"><!-- 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\" oninput=\"searchDocs(this.value)\"></div><!-- Navigation Sections -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Documentation</title><script src=\"https://cdn.tailwindcss.com\"></script><link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css\"><script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr-flex@1.0.5/lunr.flex.min.js\"></script><script>\n\t\t\t\ttailwind.config = {\n\t\t\t\t\tdarkMode: 'class',\n\t\t\t\t\ttheme: {\n\t\t\t\t\t\textend: {\n\t\t\t\t\t\t\tcolors: {\n\t\t\t\t\t\t\t\tbackground: {\n\t\t\t\t\t\t\t\t\tprimary: '#1a1b26',\n\t\t\t\t\t\t\t\t\tsecondary: '#24283b',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ttext: {\n\t\t\t\t\t\t\t\t\tprimary: '#c0caf5',\n\t\t\t\t\t\t\t\t\tsecondary: '#9aa5ce',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tborder: '#414868',\n\t\t\t\t\t\t\t\taccent: '#7aa2f7',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</script></head><body class=\"bg-background-primary text-text-primary font-sans antialiased\"><!-- 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 z-40 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\" oninput=\"searchDocs(this.value)\"></div><!-- Navigation Sections -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -58,7 +58,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 118, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 76, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -81,7 +81,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					var templ_7745c5c3_Var4 templ.SafeURL
 					templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 126, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 84, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 					if templ_7745c5c3_Err != nil {
@@ -94,7 +94,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					var templ_7745c5c3_Var5 string
 					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 127, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 85, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 					if templ_7745c5c3_Err != nil {
@@ -107,7 +107,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					var templ_7745c5c3_Var6 string
 					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 127, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 85, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 					if templ_7745c5c3_Err != nil {
@@ -135,7 +135,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					var templ_7745c5c3_Var7 templ.SafeURL
 					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 134, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 92, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 					if templ_7745c5c3_Err != nil {
@@ -148,7 +148,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					var templ_7745c5c3_Var8 string
 					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 135, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 93, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 					if templ_7745c5c3_Err != nil {
@@ -161,7 +161,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					var templ_7745c5c3_Var9 string
 					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 135, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 93, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 					if templ_7745c5c3_Err != nil {
@@ -205,7 +205,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 				var templ_7745c5c3_Var10 templ.SafeURL
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 153, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 111, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
@@ -218,7 +218,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 153, Col: 91}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 111, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -241,7 +241,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 159, Col: 69}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 117, Col: 69}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
@@ -264,7 +264,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 				var templ_7745c5c3_Var13 templ.SafeURL
 				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 167, Col: 32}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 125, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
@@ -277,7 +277,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, 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: 169, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 127, Col: 66}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 				if templ_7745c5c3_Err != nil {
@@ -290,7 +290,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 171, Col: 20}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 129, Col: 20}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
@@ -350,13 +350,13 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 		var templ_7745c5c3_Var17 string
 		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 342, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 300, Col: 21}
 		}
 		_, 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, 36, " - Bookhoard Documentation</title><script src=\"https://cdn.tailwindcss.com\"></script><link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css\"><script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr-flex@1.0.5/lunr.flex.min.js\"></script><script>\n\t\t\t\ttailwind.config = {\n\t\t\t\t\tdarkMode: 'class',\n\t\t\t\t\ttheme: {\n\t\t\t\t\t\textend: {\n\t\t\t\t\t\t\tcolors: {\n\t\t\t\t\t\t\t\tbackground: {\n\t\t\t\t\t\t\t\t\tprimary: '#1a1b26',\n\t\t\t\t\t\t\t\t\tsecondary: '#24283b',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ttext: {\n\t\t\t\t\t\t\t\t\tprimary: '#c0caf5',\n\t\t\t\t\t\t\t\t\tsecondary: '#9aa5ce',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tborder: '#414868',\n\t\t\t\t\t\t\t\taccent: '#7aa2f7',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</script><style>\n\t\t\t\t/* Only custom CSS for dynamic values and theming */\n\t\t\t\t.sidebar {\n\t\t\t\t\ttransition: transform 0.3s ease-in-out;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t/* Smooth scroll behavior */\n\t\t\t\thtml {\n\t\t\t\t\tscroll-behavior: smooth;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t/* Custom scrollbar */\n\t\t\t\t::-webkit-scrollbar {\n\t\t\t\t\twidth: 8px;\n\t\t\t\t\theight: 8px;\n\t\t\t\t}\n\t\t\t\t::-webkit-scrollbar-track {\n\t\t\t\t\tbackground: #1a1b26;\n\t\t\t\t}\n\t\t\t\t::-webkit-scrollbar-thumb {\n\t\t\t\t\tbackground: #414868;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t}\n\t\t\t\t::-webkit-scrollbar-thumb:hover {\n\t\t\t\t\tbackground: #7aa2f7;\n\t\t\t\t}\n\n\t\t\t\t/* Search results overlay animation */\n\t\t\t\t#search-results {\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\n\t\t\t\t/* Mobile responsive sidebar */\n\t\t\t\t@media (max-width: 1024px) {\n\t\t\t\t\t.sidebar {\n\t\t\t\t\t\ttransform: translateX(-100%);\n\t\t\t\t\t}\n\t\t\t\t\t.sidebar.open {\n\t\t\t\t\t\ttransform: translateX(0);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Mobile TOC */\n\t\t\t\t@media (max-width: 768px) {\n\t\t\t\t\t.toc {\n\t\t\t\t\t\tposition: static;\n\t\t\t\t\t\tmargin-bottom: 1rem;\n\t\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</style></head><body class=\"bg-background-primary text-text-primary font-sans antialiased\"><!-- 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-4 lg:p-8\"></div><!-- Sidebar --><div class=\"sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0\"><!-- 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\" oninput=\"searchDocs(this.value)\"></div><!-- Navigation Sections -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, " - Bookhoard Documentation</title><script src=\"https://cdn.tailwindcss.com\"></script><link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css\"><script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/lunr-flex@1.0.5/lunr.flex.min.js\"></script><script>\n\t\t\t\ttailwind.config = {\n\t\t\t\t\tdarkMode: 'class',\n\t\t\t\t\ttheme: {\n\t\t\t\t\t\textend: {\n\t\t\t\t\t\t\tcolors: {\n\t\t\t\t\t\t\t\tbackground: {\n\t\t\t\t\t\t\t\t\tprimary: '#1a1b26',\n\t\t\t\t\t\t\t\t\tsecondary: '#24283b',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\ttext: {\n\t\t\t\t\t\t\t\t\tprimary: '#c0caf5',\n\t\t\t\t\t\t\t\t\tsecondary: '#9aa5ce',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tborder: '#414868',\n\t\t\t\t\t\t\t\taccent: '#7aa2f7',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</script></head><body class=\"bg-background-primary text-text-primary font-sans antialiased\"><!-- 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-4 lg: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 z-40 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\" oninput=\"searchDocs(this.value)\"></div><!-- Navigation Sections -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -368,7 +368,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 			var templ_7745c5c3_Var18 string
 			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 456, Col: 28}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 363, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 			if templ_7745c5c3_Err != nil {
@@ -391,7 +391,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					var templ_7745c5c3_Var19 templ.SafeURL
 					templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 464, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 371, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 					if templ_7745c5c3_Err != nil {
@@ -404,7 +404,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					var templ_7745c5c3_Var20 string
 					templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 465, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 372, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 					if templ_7745c5c3_Err != nil {
@@ -417,7 +417,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					var templ_7745c5c3_Var21 string
 					templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 465, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 372, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 					if templ_7745c5c3_Err != nil {
@@ -445,7 +445,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					var templ_7745c5c3_Var22 templ.SafeURL
 					templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 472, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 379, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 					if templ_7745c5c3_Err != nil {
@@ -458,7 +458,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					var templ_7745c5c3_Var23 string
 					templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 473, Col: 40}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 380, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 					if templ_7745c5c3_Err != nil {
@@ -471,7 +471,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					var templ_7745c5c3_Var24 string
 					templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 473, Col: 61}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 380, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
 					if templ_7745c5c3_Err != nil {
@@ -515,7 +515,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				var templ_7745c5c3_Var25 templ.SafeURL
 				templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 491, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 398, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
 				if templ_7745c5c3_Err != nil {
@@ -528,7 +528,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				var templ_7745c5c3_Var26 string
 				templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 491, Col: 91}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 398, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
 				if templ_7745c5c3_Err != nil {
@@ -551,7 +551,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 		var templ_7745c5c3_Var27 string
 		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 497, Col: 89}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 404, Col: 89}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
 		if templ_7745c5c3_Err != nil {
@@ -574,7 +574,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				var templ_7745c5c3_Var28 templ.SafeURL
 				templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 505, Col: 32}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 412, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
 				if templ_7745c5c3_Err != nil {
@@ -587,7 +587,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				var templ_7745c5c3_Var29 string
 				templ_7745c5c3_Var29, 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: 507, Col: 66}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 414, Col: 66}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
 				if templ_7745c5c3_Err != nil {
@@ -600,7 +600,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				var templ_7745c5c3_Var30 string
 				templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 509, Col: 20}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 416, Col: 20}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
 				if templ_7745c5c3_Err != nil {
diff --git a/templates/index_templ.go b/templates/index_templ.go
index 125c2d0..e405096 100644
--- a/templates/index_templ.go
+++ b/templates/index_templ.go
@@ -29,7 +29,7 @@ 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 src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-dracula {\n                --bg-primary: #282a36;\n                --bg-secondary: #21222c;\n                --text-primary: #f8f8f2;\n                --text-secondary: #6272a4;\n                --accent: #bd93f9;\n                --border: #44475a;\n            }\n            .theme-nord {\n                --bg-primary: #2e3440;\n                --bg-secondary: #3b4252;\n                --text-primary: #eceff4;\n                --text-secondary: #5e81ac;\n                --accent: #88c0d0;\n                --border: #4c566a;\n            }\n            .theme-solarized-dark {\n                --bg-primary: #002b36;\n                --bg-secondary: #073642;\n                --text-primary: #93a1a1;\n                --text-secondary: #586e75;\n                --accent: #2aa198;\n                --border: #586e75;\n            }\n            .theme-monokai {\n                --bg-primary: #272822;\n                --bg-secondary: #3e3d32;\n                --text-primary: #f8f8f2;\n                --text-secondary: #75715e;\n                --accent: #a6e22e;\n                --border: #49483e;\n            }\n            .theme-one-dark-pro {\n                --bg-primary: #282c34;\n                --bg-secondary: #21252b;\n                --text-primary: #abb2bf;\n                --text-secondary: #5c6370;\n                --accent: #61dafb;\n                --border: #3e4451;\n            }\n            .theme-material-dark {\n                --bg-primary: #263238;\n                --bg-secondary: #37474f;\n                --text-primary: #eeffff;\n                --text-secondary: #546e7a;\n                --accent: #80cbc4;\n                --border: #455a64;\n            }\n            .theme-catppuccin-mocha {\n                --bg-primary: #1e1e2e;\n                --bg-secondary: #181825;\n                --text-primary: #cdd6f4;\n                --text-secondary: #bac2de;\n                --accent: #f38ba8;\n                --border: #313244;\n            }\n            .theme-catppuccin-macchiato {\n                --bg-primary: #24273a;\n                --bg-secondary: #1e2030;\n                --text-primary: #cad3f5;\n                --text-secondary: #b8c0e0;\n                --accent: #f0c6c6;\n                --border: #363a4f;\n            }\n            .theme-catppuccin-frappe {\n                --bg-primary: #303446;\n                --bg-secondary: #292c3c;\n                --text-primary: #c6d0f5;\n                --text-secondary: #b5bfe2;\n                --accent: #f2d5cf;\n                --border: #414559;\n            }\n            .theme-catppuccin-latte {\n                --bg-primary: #eff1f5;\n                --bg-secondary: #e6e9ef;\n                --text-primary: #4c4f69;\n                --text-secondary: #5c5f77;\n                --accent: #d20f39;\n                --border: #bcc0cc;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .btn-primary:hover {\n                opacity: 0.8;\n            }\n        </style></head><body class=\"theme-tokyo-night\"><!-- 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\" class=\"px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><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 src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night\"><!-- 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\" class=\"px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><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 -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/login_templ.go b/templates/login_templ.go
index 8666c62..38ef758 100644
--- a/templates/login_templ.go
+++ b/templates/login_templ.go
@@ -29,7 +29,7 @@ func Login() 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 src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-dracula {\n                --bg-primary: #282a36;\n                --bg-secondary: #21222c;\n                --text-primary: #f8f8f2;\n                --text-secondary: #6272a4;\n                --accent: #bd93f9;\n                --border: #44475a;\n            }\n            .theme-nord {\n                --bg-primary: #2e3440;\n                --bg-secondary: #3b4252;\n                --text-primary: #eceff4;\n                --text-secondary: #5e81ac;\n                --accent: #88c0d0;\n                --border: #4c566a;\n            }\n            .theme-solarized-dark {\n                --bg-primary: #002b36;\n                --bg-secondary: #073642;\n                --text-primary: #93a1a1;\n                --text-secondary: #586e75;\n                --accent: #2aa198;\n                --border: #586e75;\n            }\n            .theme-monokai {\n                --bg-primary: #272822;\n                --bg-secondary: #3e3d32;\n                --text-primary: #f8f8f2;\n                --text-secondary: #75715e;\n                --accent: #a6e22e;\n                --border: #49483e;\n            }\n            .theme-one-dark-pro {\n                --bg-primary: #282c34;\n                --bg-secondary: #21252b;\n                --text-primary: #abb2bf;\n                --text-secondary: #5c6370;\n                --accent: #61dafb;\n                --border: #3e4451;\n            }\n            .theme-material-dark {\n                --bg-primary: #263238;\n                --bg-secondary: #37474f;\n                --text-primary: #eeffff;\n                --text-secondary: #546e7a;\n                --accent: #80cbc4;\n                --border: #455a64;\n            }\n            .theme-catppuccin-mocha {\n                --bg-primary: #1e1e2e;\n                --bg-secondary: #181825;\n                --text-primary: #cdd6f4;\n                --text-secondary: #bac2de;\n                --accent: #f38ba8;\n                --border: #313244;\n            }\n            .theme-catppuccin-macchiato {\n                --bg-primary: #24273a;\n                --bg-secondary: #1e2030;\n                --text-primary: #cad3f5;\n                --text-secondary: #b8c0e0;\n                --accent: #f0c6c6;\n                --border: #363a4f;\n            }\n            .theme-catppuccin-frappe {\n                --bg-primary: #303446;\n                --bg-secondary: #292c3c;\n                --text-primary: #c6d0f5;\n                --text-secondary: #b5bfe2;\n                --accent: #f2d5cf;\n                --border: #414559;\n            }\n            .theme-catppuccin-latte {\n                --bg-primary: #eff1f5;\n                --bg-secondary: #e6e9ef;\n                --text-primary: #4c4f69;\n                --text-secondary: #5c5f77;\n                --accent: #d20f39;\n                --border: #bcc0cc;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .btn-primary:hover {\n                opacity: 0.8;\n            }\n        </style></head><body class=\"theme-tokyo-night min-h-screen\"><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\" class=\"px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><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><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><script>\n            function applyTheme(theme) {\n                document.body.className = `theme-${theme} min-h-screen`;\n                localStorage.setItem('theme', theme);\n            }\n            function loadTheme() {\n                const theme = localStorage.getItem('theme') || 'tokyo-night';\n                applyTheme(theme);\n            }\n            function changeTheme() {\n                const theme = document.getElementById('theme-select').value;\n                applyTheme(theme);\n                const token = localStorage.getItem('token');\n                if (token) {\n                    fetch('/api/auth/theme', {\n                        method: 'PUT',\n                        headers: {\n                            'Content-Type': 'application/json',\n                            'Authorization': 'Bearer ' + token\n                        },\n                        body: JSON.stringify({ theme })\n                    }).catch(err => console.log('Theme save failed', err));\n                }\n            }\n            document.addEventListener('DOMContentLoaded', () => {\n                loadTheme();\n                document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';\n            });\n        </script></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>Login</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\"><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\" class=\"px-3 py-2 border rounded\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><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><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><script>\n            function applyTheme(theme) {\n                document.body.className = `theme-${theme} min-h-screen`;\n                localStorage.setItem('theme', theme);\n            }\n            function loadTheme() {\n                const theme = localStorage.getItem('theme') || 'tokyo-night';\n                applyTheme(theme);\n            }\n            function changeTheme() {\n                const theme = document.getElementById('theme-select').value;\n                applyTheme(theme);\n                const token = localStorage.getItem('token');\n                if (token) {\n                    fetch('/api/auth/theme', {\n                        method: 'PUT',\n                        headers: {\n                            'Content-Type': 'application/json',\n                            'Authorization': 'Bearer ' + token\n                        },\n                        body: JSON.stringify({ theme })\n                    }).catch(err => console.log('Theme save failed', err));\n                }\n            }\n            document.addEventListener('DOMContentLoaded', () => {\n                loadTheme();\n                document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';\n            });\n        </script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/queue_templ.go b/templates/queue_templ.go
index 33d6f7f..201ca9f 100644
--- a/templates/queue_templ.go
+++ b/templates/queue_templ.go
@@ -31,7 +31,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			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>Sync Queue - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><script src=\"/static/theme.js\"></script><style>\n            .status-badge {\n                display: inline-block;\n                padding: 2px 8px;\n                border-radius: 4px;\n                font-size: 11px;\n                font-weight: 600;\n                text-transform: uppercase;\n            }\n            .status-pending { background-color: #f59e0b; color: white; }\n            .status-processing { background-color: #3b82f6; color: white; }\n            .status-completed { background-color: #10b981; color: white; }\n            .status-failed { background-color: #ef4444; color: white; }\n\n            .priority-badge {\n                display: inline-block;\n                padding: 2px 8px;\n                border-radius: 4px;\n                font-size: 10px;\n                font-weight: 600;\n            }\n            .priority-1 { background-color: #ef4444; color: white; }\n            .priority-2 { background-color: #f97316; color: white; }\n            .priority-3 { background-color: #f59e0b; color: white; }\n            .priority-5 { background-color: #10b981; color: white; }\n            .priority-7 { background-color: #6b7280; color: white; }\n            .priority-10 { background-color: #9ca3af; color: white; }\n        </style></head><body class=\"theme-{ user.Theme }\">")
+		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>Sync Queue - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><script src=\"/static/theme.js\"></script></head><body class=\"theme-{ user.Theme }\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -46,7 +46,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		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: 68, Col: 83}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 40, Col: 83}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -59,7 +59,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		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: 72, Col: 86}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 44, Col: 86}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -72,7 +72,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		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: 76, Col: 85}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 48, Col: 85}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -85,7 +85,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 		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: 80, Col: 82}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 52, Col: 82}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -102,14 +102,14 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			}
 		}
 		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=\"status-badge status-{ item.Status }\">")
+			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 }\">")
 			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: 155, Col: 72}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 127, Col: 129}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -122,20 +122,20 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			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: 156, Col: 83}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 128, Col: 84}
 			}
 			_, 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=\"priority-badge priority-{ item.Priority }\">P")
+			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")
 			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: 158, Col: 80}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/queue.templ`, Line: 130, Col: 125}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -148,7 +148,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			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: 161, 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 {
@@ -166,7 +166,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 				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: 163, 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 {
@@ -180,7 +180,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			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: 167, 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 {
@@ -193,7 +193,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			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: 167, 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 {
@@ -206,7 +206,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 			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: 168, 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 {
@@ -224,7 +224,7 @@ func Queue(user User, queueItems []handlers.QueueItemResponse, stats handlers.Qu
 				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: 172, 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 {
diff --git a/templates/register_templ.go b/templates/register_templ.go
index 2ecafe5..161fbba 100644
--- a/templates/register_templ.go
+++ b/templates/register_templ.go
@@ -29,7 +29,7 @@ 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 src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n            :root {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-tokyo-night {\n                --bg-primary: #1a1b26;\n                --bg-secondary: #16161e;\n                --text-primary: #a9b1d6;\n                --text-secondary: #565f89;\n                --accent: #7aa2f7;\n                --border: #414868;\n            }\n            .theme-dracula {\n                --bg-primary: #282a36;\n                --bg-secondary: #21222c;\n                --text-primary: #f8f8f2;\n                --text-secondary: #6272a4;\n                --accent: #bd93f9;\n                --border: #44475a;\n            }\n            .theme-nord {\n                --bg-primary: #2e3440;\n                --bg-secondary: #3b4252;\n                --text-primary: #eceff4;\n                --text-secondary: #5e81ac;\n                --accent: #88c0d0;\n                --border: #4c566a;\n            }\n            .theme-solarized-dark {\n                --bg-primary: #002b36;\n                --bg-secondary: #073642;\n                --text-primary: #93a1a1;\n                --text-secondary: #586e75;\n                --accent: #2aa198;\n                --border: #586e75;\n            }\n            .theme-monokai {\n                --bg-primary: #272822;\n                --bg-secondary: #3e3d32;\n                --text-primary: #f8f8f2;\n                --text-secondary: #75715e;\n                --accent: #a6e22e;\n                --border: #49483e;\n            }\n            .theme-one-dark-pro {\n                --bg-primary: #282c34;\n                --bg-secondary: #21252b;\n                --text-primary: #abb2bf;\n                --text-secondary: #5c6370;\n                --accent: #61dafb;\n                --border: #3e4451;\n            }\n            .theme-material-dark {\n                --bg-primary: #263238;\n                --bg-secondary: #37474f;\n                --text-primary: #eeffff;\n                --text-secondary: #546e7a;\n                --accent: #80cbc4;\n                --border: #455a64;\n            }\n            .theme-catppuccin-mocha {\n                --bg-primary: #1e1e2e;\n                --bg-secondary: #181825;\n                --text-primary: #cdd6f4;\n                --text-secondary: #bac2de;\n                --accent: #f38ba8;\n                --border: #313244;\n            }\n            .theme-catppuccin-macchiato {\n                --bg-primary: #24273a;\n                --bg-secondary: #1e2030;\n                --text-primary: #cad3f5;\n                --text-secondary: #b8c0e0;\n                --accent: #f0c6c6;\n                --border: #363a4f;\n            }\n            .theme-catppuccin-frappe {\n                --bg-primary: #303446;\n                --bg-secondary: #292c3c;\n                --text-primary: #c6d0f5;\n                --text-secondary: #b5bfe2;\n                --accent: #f2d5cf;\n                --border: #414559;\n            }\n            .theme-catppuccin-latte {\n                --bg-primary: #eff1f5;\n                --bg-secondary: #e6e9ef;\n                --text-primary: #4c4f69;\n                --text-secondary: #5c5f77;\n                --accent: #d20f39;\n                --border: #bcc0cc;\n            }\n            body {\n                background-color: var(--bg-primary);\n                color: var(--text-primary);\n            }\n            .card {\n                background-color: var(--bg-secondary);\n                border-color: var(--border);\n            }\n            .btn-primary {\n                background-color: var(--accent);\n                color: var(--bg-primary);\n            }\n            .btn-primary:hover {\n                opacity: 0.8;\n            }\n        </style></head><body class=\"theme-tokyo-night min-h-screen\"><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=\"bg-white p-6 rounded-lg shadow-md\"><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Email</label> <input type=\"email\" name=\"email\" class=\"w-full px-3 py-2 border rounded\" required></div><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Username</label> <input type=\"text\" name=\"username\" class=\"w-full px-3 py-2 border rounded\" required></div><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" required></div><button type=\"submit\" class=\"w-full bg-green-500 text-white py-2 rounded hover:bg-green-600\">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</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\"><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=\"bg-white p-6 rounded-lg shadow-md\"><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Email</label> <input type=\"email\" name=\"email\" class=\"w-full px-3 py-2 border rounded\" required></div><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Username</label> <input type=\"text\" name=\"username\" class=\"w-full px-3 py-2 border rounded\" required></div><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" required></div><button type=\"submit\" class=\"w-full bg-green-500 text-white py-2 rounded hover:bg-green-600\">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>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
