diff --git a/templates/api_explorer.templ b/templates/api_explorer.templ
index b2b0afc..f2b8973 100644
--- a/templates/api_explorer.templ
+++ b/templates/api_explorer.templ
@@ -3,60 +3,64 @@ package templates
 templ APIExplorer(explorer APIExplorerData) {
 	if !explorer.IsLoggedIn {
 		// Show mode toggle and mock data
-		<div class="api-explorer">
-			<div class="api-mode-toggle">
-				<button class="mode-btn active">Mock Data</button>
-				<button class="mode-btn" disabled>Login to Try Real</button>
+		<div class="border border-border rounded-lg p-6 mt-8 bg-background-secondary">
+			<div class="flex gap-2 mb-4">
+				<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer bg-accent text-white">Mock Data</button>
+				<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary opacity-50 cursor-not-allowed" disabled>Login to Try Real</button>
 			</div>
-			<div class="api-request-editor">
-				<div class="method-selector">
-					<select disabled>
+			<div class="mb-4">
+				<div class="mb-4">
+					<select disabled class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
 						<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
 						<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
 						<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
 						<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
 					</select>
 				</div>
-				<h4>Request Body (Example)</h4>
-				<pre><code>{ explorer.Endpoint.RequestBody }</code></pre>
+				<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body (Example)</h4>
+				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.RequestBody }</code></pre>
 			</div>
-			<div class="api-response">
-				<h4>Response (Mock)</h4>
-				<pre><code>{ explorer.Endpoint.Response }</code></pre>
+			<div class="mt-4">
+				<h4 class="text-text-secondary mb-2 text-sm font-medium">Response (Mock)</h4>
+				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.Response }</code></pre>
+			</div>
+			<div class="flex gap-2 mt-4">
+				<button onclick="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
+				<button onclick="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
 			</div>
-			<button onclick="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))">Copy Request</button>
-			<button onclick="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))">Copy Response</button>
 		</div>
 	} else {
 		// Show interactive explorer with real execution
-		<div class="api-explorer">
-			<div class="api-mode-toggle">
-				<button class="mode-btn" id="mock-btn">Mock Data</button>
-				<button class="mode-btn active" id="real-btn">Try It Out</button>
+		<div class="border border-border rounded-lg p-6 mt-8 bg-background-secondary">
+			<div class="flex gap-2 mb-4">
+				<button class="mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm" id="mock-btn">Mock Data</button>
+				<button class="mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm" id="real-btn">Try It Out</button>
 			</div>
-			<div class="api-request-editor">
-				<div class="method-selector">
-					<select id="http-method">
+			<div class="mb-4">
+				<div class="mb-4">
+					<select id="http-method" class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
 						<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
 						<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
 						<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
 						<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
 					</select>
 				</div>
-				<h4>Request Body</h4>
-				<textarea id="request-body" placeholder="Edit request body...">{ explorer.Endpoint.RequestBody }</textarea>
+				<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body</h4>
+				<textarea id="request-body" placeholder="Edit request body..." class="w-full min-h-[150px] px-3 py-2 font-mono text-sm bg-background-primary text-text-primary border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent">{ explorer.Endpoint.RequestBody }</textarea>
 			</div>
-			<button id="try-it-out">Try It Out</button>
-			<div class="api-response" style="display:none">
-				<div class="response-header">
-					<span id="response-status"></span>
-					<span id="response-time"></span>
+			<button id="try-it-out" class="bg-accent text-white px-6 py-3 rounded cursor-pointer mt-4 hover:opacity-90">Try It Out</button>
+			<div class="api-response mt-4 hidden">
+				<div class="flex justify-between mb-2 text-sm">
+					<span id="response-status" class="font-semibold"></span>
+					<span id="response-time" class="text-text-secondary"></span>
 				</div>
-				<pre><code id="response-body"></code></pre>
+				<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code id="response-body" class="text-text-primary text-sm"></code></pre>
+			</div>
+			<div class="flex gap-2 mt-4 flex-wrap">
+				<button onclick="copyRequest()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
+				<button onclick="copyResponse()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
+				<button onclick="generateCURL()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Generate cURL</button>
 			</div>
-			<button onclick="copyRequest()">Copy Request</button>
-			<button onclick="copyResponse()">Copy Response</button>
-			<button onclick="generateCURL()">Generate cURL</button>
 		</div>
 	}
 
@@ -70,17 +74,36 @@ templ APIExplorer(explorer APIExplorerData) {
 		document.getElementById('real-btn')?.addEventListener('click', () => showMode('real'));
 
 		function showMode(mode) {
+			const mockBtn = document.getElementById('mock-btn');
+			const realBtn = document.getElementById('real-btn');
+			const responseBody = document.getElementById('response-body');
+			const responseStatus = document.getElementById('response-status');
+			const responseTime = document.getElementById('response-time');
+			const apiResponse = document.querySelector('.api-response');
+			const requestBody = document.getElementById('request-body');
+			const tryItOut = document.getElementById('try-it-out');
+
 			if (mode === 'mock') {
-				document.querySelector('.api-response').style.display = 'block';
-				document.getElementById('request-body').readOnly = true;
-				document.getElementById('try-it-out').style.display = 'none';
-				document.getElementById('response-body').textContent = JSON.stringify(exampleResponse, null, 2);
-				document.getElementById('response-status').textContent = '200 OK';
-				document.getElementById('response-time').textContent = 'Mock';
+				mockBtn.classList.add('bg-accent', 'text-white');
+				mockBtn.classList.remove('bg-background-primary', 'text-text-primary');
+				realBtn.classList.remove('bg-accent', 'text-white');
+				realBtn.classList.add('bg-background-primary', 'text-text-primary');
+				
+				apiResponse.classList.remove('hidden');
+				requestBody.readOnly = true;
+				tryItOut.classList.add('hidden');
+				responseBody.textContent = JSON.stringify(exampleResponse, null, 2);
+				responseStatus.textContent = '200 OK';
+				responseTime.textContent = 'Mock';
 			} else {
-				document.querySelector('.api-response').style.display = 'none';
-				document.getElementById('request-body').readOnly = false;
-				document.getElementById('try-it-out').style.display = 'block';
+				realBtn.classList.add('bg-accent', 'text-white');
+				realBtn.classList.remove('bg-background-primary', 'text-text-primary');
+				mockBtn.classList.remove('bg-accent', 'text-white');
+				mockBtn.classList.add('bg-background-primary', 'text-text-primary');
+				
+				apiResponse.classList.add('hidden');
+				requestBody.readOnly = false;
+				tryItOut.classList.remove('hidden');
 			}
 		}
 
@@ -106,11 +129,11 @@ templ APIExplorer(explorer APIExplorerData) {
 				document.getElementById('response-status').textContent = `${response.status} (${response.statusText})`;
 				document.getElementById('response-time').textContent = `${duration}ms`;
 				document.getElementById('response-body').textContent = JSON.stringify(data, null, 2);
-				document.querySelector('.api-response').style.display = 'block';
+				document.querySelector('.api-response').classList.remove('hidden');
 			} catch (error) {
 				document.getElementById('response-status').textContent = 'Error';
 				document.getElementById('response-body').textContent = error.message;
-				document.querySelector('.api-response').style.display = 'block';
+				document.querySelector('.api-response').classList.remove('hidden');
 			}
 		});
 
@@ -144,126 +167,6 @@ templ APIExplorer(explorer APIExplorerData) {
 			navigator.clipboard.writeText(curl);
 		}
 	</script>
-
-	<style>
-		.api-explorer {
-			border: 1px solid var(--border);
-			border-radius: 8px;
-			padding: 1.5rem;
-			margin-top: 2rem;
-			background: var(--bg-secondary);
-		}
-
-		.api-mode-toggle {
-			display: flex;
-			gap: 0.5rem;
-			margin-bottom: 1rem;
-		}
-
-		.mode-btn {
-			padding: 0.5rem 1rem;
-			border: 1px solid var(--border);
-			border-radius: 4px;
-			background: var(--bg-primary);
-			color: var(--text-primary);
-			cursor: pointer;
-		}
-
-		.mode-btn.active {
-			background: var(--accent);
-			color: white;
-		}
-
-		.mode-btn:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-
-		.api-request-editor {
-			margin-bottom: 1rem;
-		}
-
-		.method-selector select {
-			padding: 0.5rem;
-			border-radius: 4px;
-			background: var(--bg-primary);
-			color: var(--text-primary);
-			border: 1px solid var(--border);
-			margin-bottom: 1rem;
-		}
-
-		.api-request-editor h4 {
-			margin-bottom: 0.5rem;
-			color: var(--text-secondary);
-		}
-
-		textarea#request-body {
-			width: 100%;
-			min-height: 150px;
-			padding: 0.75rem;
-			font-family: 'Monaco', 'Consolas', monospace;
-			font-size: 0.875rem;
-			background: var(--bg-primary);
-			color: var(--text-primary);
-			border: 1px solid var(--border);
-			border-radius: 4px;
-		}
-
-		.api-response {
-			margin-top: 1rem;
-		}
-
-		.response-header {
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: 0.5rem;
-			font-size: 0.875rem;
-		}
-
-		#response-status {
-			font-weight: 600;
-		}
-
-		#response-time {
-			color: var(--text-secondary);
-		}
-
-		.api-response pre {
-			background: var(--bg-primary);
-			padding: 1rem;
-			border-radius: 4px;
-			overflow-x: auto;
-		}
-
-		.api-response code {
-			color: var(--text-primary);
-		}
-
-		.api-explorer button {
-			padding: 0.5rem 1rem;
-			margin-right: 0.5rem;
-			margin-top: 1rem;
-			border: 1px solid var(--border);
-			border-radius: 4px;
-			background: var(--bg-primary);
-			color: var(--text-primary);
-			cursor: pointer;
-		}
-
-		#try-it-out {
-			background: var(--accent);
-			color: white;
-			padding: 0.75rem 1.5rem;
-			border: none;
-			border-radius: 4px;
-			cursor: pointer;
-			margin-top: 1rem;
-		}
-
-		#try-it-out:hover {
-			opacity: 0.9;
-		}
-	</style>
 }
 
 // APIExplorerData holds data for the API explorer component
diff --git a/templates/api_explorer_templ.go b/templates/api_explorer_templ.go
index bb0a306..4bd3e47 100644
--- a/templates/api_explorer_templ.go
+++ b/templates/api_explorer_templ.go
@@ -30,7 +30,7 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !explorer.IsLoggedIn {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <div class=\"api-explorer\"><div class=\"api-mode-toggle\"><button class=\"mode-btn active\">Mock Data</button> <button class=\"mode-btn\" disabled>Login to Try Real</button></div><div class=\"api-request-editor\"><div class=\"method-selector\"><select disabled><option value=\"GET\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <div class=\"border border-border rounded-lg p-6 mt-8 bg-background-secondary\"><div class=\"flex gap-2 mb-4\"><button class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer bg-accent text-white\">Mock Data</button> <button class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary opacity-50 cursor-not-allowed\" disabled>Login to Try Real</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select disabled class=\"w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent\"><option value=\"GET\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -70,38 +70,38 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">DELETE</option></select></div><h4>Request Body (Example)</h4><pre><code>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">DELETE</option></select></div><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Request Body (Example)</h4><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code class=\"text-text-primary text-sm\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var2 string
 			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.RequestBody)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 21, Col: 46}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 21, Col: 141}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</code></pre></div><div class=\"api-response\"><h4>Response (Mock)</h4><pre><code>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</code></pre></div><div class=\"mt-4\"><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Response (Mock)</h4><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code class=\"text-text-primary text-sm\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.Response)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 25, Col: 43}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 25, Col: 138}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</code></pre></div><button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))\">Copy Request</button> <button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))\">Copy Response</button></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</code></pre></div><div class=\"flex gap-2 mt-4\"><button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Request</button> <button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Response</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " <div class=\"api-explorer\"><div class=\"api-mode-toggle\"><button class=\"mode-btn\" id=\"mock-btn\">Mock Data</button> <button class=\"mode-btn active\" id=\"real-btn\">Try It Out</button></div><div class=\"api-request-editor\"><div class=\"method-selector\"><select id=\"http-method\"><option value=\"GET\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " <div class=\"border border-border rounded-lg p-6 mt-8 bg-background-secondary\"><div class=\"flex gap-2 mb-4\"><button class=\"mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm\" id=\"mock-btn\">Mock Data</button> <button class=\"mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm\" id=\"real-btn\">Try It Out</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select id=\"http-method\" class=\"w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent\"><option value=\"GET\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -141,25 +141,25 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">DELETE</option></select></div><h4>Request Body</h4><textarea id=\"request-body\" placeholder=\"Edit request body...\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">DELETE</option></select></div><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Request Body</h4><textarea id=\"request-body\" placeholder=\"Edit request body...\" class=\"w-full min-h-[150px] px-3 py-2 font-mono text-sm bg-background-primary text-text-primary border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.RequestBody)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 47, Col: 98}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 49, Col: 274}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</textarea></div><button id=\"try-it-out\">Try It Out</button><div class=\"api-response\" style=\"display:none\"><div class=\"response-header\"><span id=\"response-status\"></span> <span id=\"response-time\"></span></div><pre><code id=\"response-body\"></code></pre></div><button onclick=\"copyRequest()\">Copy Request</button> <button onclick=\"copyResponse()\">Copy Response</button> <button onclick=\"generateCURL()\">Generate cURL</button></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</textarea></div><button id=\"try-it-out\" class=\"bg-accent text-white px-6 py-3 rounded cursor-pointer mt-4 hover:opacity-90\">Try It Out</button><div class=\"api-response mt-4 hidden\"><div class=\"flex justify-between mb-2 text-sm\"><span id=\"response-status\" class=\"font-semibold\"></span> <span id=\"response-time\" class=\"text-text-secondary\"></span></div><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code id=\"response-body\" class=\"text-text-primary text-sm\"></code></pre></div><div class=\"flex gap-2 mt-4 flex-wrap\"><button onclick=\"copyRequest()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Request</button> <button onclick=\"copyResponse()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Response</button> <button onclick=\"generateCURL()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Generate cURL</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<script>\n\t\tconst endpointPath = '{ explorer.Endpoint.Path }';\n\t\tconst exampleRequest = { explorer.Endpoint.RequestBody };\n\t\tconst exampleResponse = { explorer.Endpoint.Response };\n\n\t\t// Mode toggle logic\n\t\tdocument.getElementById('mock-btn')?.addEventListener('click', () => showMode('mock'));\n\t\tdocument.getElementById('real-btn')?.addEventListener('click', () => showMode('real'));\n\n\t\tfunction showMode(mode) {\n\t\t\tif (mode === 'mock') {\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'block';\n\t\t\t\tdocument.getElementById('request-body').readOnly = true;\n\t\t\t\tdocument.getElementById('try-it-out').style.display = 'none';\n\t\t\t\tdocument.getElementById('response-body').textContent = JSON.stringify(exampleResponse, null, 2);\n\t\t\t\tdocument.getElementById('response-status').textContent = '200 OK';\n\t\t\t\tdocument.getElementById('response-time').textContent = 'Mock';\n\t\t\t} else {\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'none';\n\t\t\t\tdocument.getElementById('request-body').readOnly = false;\n\t\t\t\tdocument.getElementById('try-it-out').style.display = 'block';\n\t\t\t}\n\t\t}\n\n\t\t// Try it out logic\n\t\tdocument.getElementById('try-it-out')?.addEventListener('click', async () => {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\n\t\t\tconst startTime = Date.now();\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(endpointPath, {\n\t\t\t\t\tmethod: method,\n\t\t\t\t\theaders: {\n\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t'Authorization': 'Bearer ' + localStorage.getItem('token')\n\t\t\t\t\t},\n\t\t\t\t\tbody: ['GET', 'DELETE'].includes(method) ? undefined : body\n\t\t\t\t});\n\n\t\t\t\tconst duration = Date.now() - startTime;\n\t\t\t\tconst data = await response.json();\n\n\t\t\t\tdocument.getElementById('response-status').textContent = `${response.status} (${response.statusText})`;\n\t\t\t\tdocument.getElementById('response-time').textContent = `${duration}ms`;\n\t\t\t\tdocument.getElementById('response-body').textContent = JSON.stringify(data, null, 2);\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'block';\n\t\t\t} catch (error) {\n\t\t\t\tdocument.getElementById('response-status').textContent = 'Error';\n\t\t\t\tdocument.getElementById('response-body').textContent = error.message;\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'block';\n\t\t\t}\n\t\t});\n\n\t\tfunction copyToClipboard(text) {\n\t\t\tnavigator.clipboard.writeText(text);\n\t\t}\n\n\t\tfunction copyRequest() {\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction copyResponse() {\n\t\t\tconst body = document.getElementById('response-body').textContent;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction generateCURL() {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tconst token = localStorage.getItem('token');\n\n\t\t\tlet curl = `curl -X ${method} \\\\n  -H \"Content-Type: application/json\" \\\\n  -H \"Authorization: Bearer ${token}\"`;\n\t\t\t\n\t\t\tif (!['GET', 'DELETE'].includes(method) && body.trim()) {\n\t\t\t\tcurl += ` \\\\n  -d '${body}'`;\n\t\t\t}\n\t\t\t\n\t\t\tcurl += ` \\\\n  ${endpointPath}`;\n\t\t\t\n\t\t\tnavigator.clipboard.writeText(curl);\n\t\t}\n\t</script><style>\n\t\t.api-explorer {\n\t\t\tborder: 1px solid var(--border);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 1.5rem;\n\t\t\tmargin-top: 2rem;\n\t\t\tbackground: var(--bg-secondary);\n\t\t}\n\n\t\t.api-mode-toggle {\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.5rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t.mode-btn {\n\t\t\tpadding: 0.5rem 1rem;\n\t\t\tborder: 1px solid var(--border);\n\t\t\tborder-radius: 4px;\n\t\t\tbackground: var(--bg-primary);\n\t\t\tcolor: var(--text-primary);\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t.mode-btn.active {\n\t\t\tbackground: var(--accent);\n\t\t\tcolor: white;\n\t\t}\n\n\t\t.mode-btn:disabled {\n\t\t\topacity: 0.5;\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t.api-request-editor {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t.method-selector select {\n\t\t\tpadding: 0.5rem;\n\t\t\tborder-radius: 4px;\n\t\t\tbackground: var(--bg-primary);\n\t\t\tcolor: var(--text-primary);\n\t\t\tborder: 1px solid var(--border);\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t.api-request-editor h4 {\n\t\t\tmargin-bottom: 0.5rem;\n\t\t\tcolor: var(--text-secondary);\n\t\t}\n\n\t\ttextarea#request-body {\n\t\t\twidth: 100%;\n\t\t\tmin-height: 150px;\n\t\t\tpadding: 0.75rem;\n\t\t\tfont-family: 'Monaco', 'Consolas', monospace;\n\t\t\tfont-size: 0.875rem;\n\t\t\tbackground: var(--bg-primary);\n\t\t\tcolor: var(--text-primary);\n\t\t\tborder: 1px solid var(--border);\n\t\t\tborder-radius: 4px;\n\t\t}\n\n\t\t.api-response {\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t.response-header {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t\tmargin-bottom: 0.5rem;\n\t\t\tfont-size: 0.875rem;\n\t\t}\n\n\t\t#response-status {\n\t\t\tfont-weight: 600;\n\t\t}\n\n\t\t#response-time {\n\t\t\tcolor: var(--text-secondary);\n\t\t}\n\n\t\t.api-response pre {\n\t\t\tbackground: var(--bg-primary);\n\t\t\tpadding: 1rem;\n\t\t\tborder-radius: 4px;\n\t\t\toverflow-x: auto;\n\t\t}\n\n\t\t.api-response code {\n\t\t\tcolor: var(--text-primary);\n\t\t}\n\n\t\t.api-explorer button {\n\t\t\tpadding: 0.5rem 1rem;\n\t\t\tmargin-right: 0.5rem;\n\t\t\tmargin-top: 1rem;\n\t\t\tborder: 1px solid var(--border);\n\t\t\tborder-radius: 4px;\n\t\t\tbackground: var(--bg-primary);\n\t\t\tcolor: var(--text-primary);\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t#try-it-out {\n\t\t\tbackground: var(--accent);\n\t\t\tcolor: white;\n\t\t\tpadding: 0.75rem 1.5rem;\n\t\t\tborder: none;\n\t\t\tborder-radius: 4px;\n\t\t\tcursor: pointer;\n\t\t\tmargin-top: 1rem;\n\t\t}\n\n\t\t#try-it-out:hover {\n\t\t\topacity: 0.9;\n\t\t}\n\t</style>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<script>\n\t\tconst endpointPath = '{ explorer.Endpoint.Path }';\n\t\tconst exampleRequest = { explorer.Endpoint.RequestBody };\n\t\tconst exampleResponse = { explorer.Endpoint.Response };\n\n\t\t// Mode toggle logic\n\t\tdocument.getElementById('mock-btn')?.addEventListener('click', () => showMode('mock'));\n\t\tdocument.getElementById('real-btn')?.addEventListener('click', () => showMode('real'));\n\n\t\tfunction showMode(mode) {\n\t\t\tconst mockBtn = document.getElementById('mock-btn');\n\t\t\tconst realBtn = document.getElementById('real-btn');\n\t\t\tconst responseBody = document.getElementById('response-body');\n\t\t\tconst responseStatus = document.getElementById('response-status');\n\t\t\tconst responseTime = document.getElementById('response-time');\n\t\t\tconst apiResponse = document.querySelector('.api-response');\n\t\t\tconst requestBody = document.getElementById('request-body');\n\t\t\tconst tryItOut = document.getElementById('try-it-out');\n\n\t\t\tif (mode === 'mock') {\n\t\t\t\tmockBtn.classList.add('bg-accent', 'text-white');\n\t\t\t\tmockBtn.classList.remove('bg-background-primary', 'text-text-primary');\n\t\t\t\trealBtn.classList.remove('bg-accent', 'text-white');\n\t\t\t\trealBtn.classList.add('bg-background-primary', 'text-text-primary');\n\t\t\t\t\n\t\t\t\tapiResponse.classList.remove('hidden');\n\t\t\t\trequestBody.readOnly = true;\n\t\t\t\ttryItOut.classList.add('hidden');\n\t\t\t\tresponseBody.textContent = JSON.stringify(exampleResponse, null, 2);\n\t\t\t\tresponseStatus.textContent = '200 OK';\n\t\t\t\tresponseTime.textContent = 'Mock';\n\t\t\t} else {\n\t\t\t\trealBtn.classList.add('bg-accent', 'text-white');\n\t\t\t\trealBtn.classList.remove('bg-background-primary', 'text-text-primary');\n\t\t\t\tmockBtn.classList.remove('bg-accent', 'text-white');\n\t\t\t\tmockBtn.classList.add('bg-background-primary', 'text-text-primary');\n\t\t\t\t\n\t\t\t\tapiResponse.classList.add('hidden');\n\t\t\t\trequestBody.readOnly = false;\n\t\t\t\ttryItOut.classList.remove('hidden');\n\t\t\t}\n\t\t}\n\n\t\t// Try it out logic\n\t\tdocument.getElementById('try-it-out')?.addEventListener('click', async () => {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\n\t\t\tconst startTime = Date.now();\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(endpointPath, {\n\t\t\t\t\tmethod: method,\n\t\t\t\t\theaders: {\n\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t'Authorization': 'Bearer ' + localStorage.getItem('token')\n\t\t\t\t\t},\n\t\t\t\t\tbody: ['GET', 'DELETE'].includes(method) ? undefined : body\n\t\t\t\t});\n\n\t\t\t\tconst duration = Date.now() - startTime;\n\t\t\t\tconst data = await response.json();\n\n\t\t\t\tdocument.getElementById('response-status').textContent = `${response.status} (${response.statusText})`;\n\t\t\t\tdocument.getElementById('response-time').textContent = `${duration}ms`;\n\t\t\t\tdocument.getElementById('response-body').textContent = JSON.stringify(data, null, 2);\n\t\t\t\tdocument.querySelector('.api-response').classList.remove('hidden');\n\t\t\t} catch (error) {\n\t\t\t\tdocument.getElementById('response-status').textContent = 'Error';\n\t\t\t\tdocument.getElementById('response-body').textContent = error.message;\n\t\t\t\tdocument.querySelector('.api-response').classList.remove('hidden');\n\t\t\t}\n\t\t});\n\n\t\tfunction copyToClipboard(text) {\n\t\t\tnavigator.clipboard.writeText(text);\n\t\t}\n\n\t\tfunction copyRequest() {\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction copyResponse() {\n\t\t\tconst body = document.getElementById('response-body').textContent;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction generateCURL() {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tconst token = localStorage.getItem('token');\n\n\t\t\tlet curl = `curl -X ${method} \\\\n  -H \"Content-Type: application/json\" \\\\n  -H \"Authorization: Bearer ${token}\"`;\n\t\t\t\n\t\t\tif (!['GET', 'DELETE'].includes(method) && body.trim()) {\n\t\t\t\tcurl += ` \\\\n  -d '${body}'`;\n\t\t\t}\n\t\t\t\n\t\t\tcurl += ` \\\\n  ${endpointPath}`;\n\t\t\t\n\t\t\tnavigator.clipboard.writeText(curl);\n\t\t}\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/docs.templ b/templates/docs.templ
index 07c54cc..49f5fa7 100644
--- a/templates/docs.templ
+++ b/templates/docs.templ
@@ -2,253 +2,137 @@ package templates
 
 import (
 	"fmt"
-	"html/template"
 )
 
 templ DocsLayout(nav Navigation, doc Document, user User) {
 	<!DOCTYPE html>
-	<html lang="en">
+	<html lang="en" class="dark">
 		<head>
 			<meta charset="UTF-8">
 			<meta name="viewport" content="width=device-width, initial-scale=1.0">
 			<title>{ doc.Title } - 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>
+				tailwind.config = {
+					darkMode: 'class',
+					theme: {
+						extend: {
+							colors: {
+								background: {
+									primary: '#1a1b26',
+									secondary: '#24283b',
+								},
+								text: {
+									primary: '#c0caf5',
+									secondary: '#9aa5ce',
+								},
+								border: '#414868',
+								accent: '#7aa2f7',
+							}
+						}
+					}
+				}
+			</script>
 			<style>
-				:root {
-					--bg-primary: #1a1b26;
-					--bg-secondary: #24283b;
-					--text-primary: #c0caf5;
-					--text-secondary: #9aa5ce;
-					--border: #414868;
-					--accent: #7aa2f7;
-				}
-				body {
-					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-					background-color: var(--bg-primary);
-					color: var(--text-primary);
-					margin: 0;
-					padding: 0;
-				}
+				/* Only custom CSS for dynamic values and theming */
 				.sidebar {
-					position: fixed;
-					left: 0;
-					top: 0;
-					bottom: 0;
-					width: 280px;
-					background-color: var(--bg-secondary);
-					border-right: 1px solid var(--border);
-					overflow-y: auto;
-					z-index: 50;
+					transition: transform 0.3s ease-in-out;
 				}
-				.main-content {
-					margin-left: 280px;
-					padding: 2rem;
-					max-width: 900px;
+				
+				/* Smooth scroll behavior */
+				html {
+					scroll-behavior: smooth;
 				}
-				.nav-section {
-					margin-bottom: 1.5rem;
+				
+				/* Custom scrollbar */
+				::-webkit-scrollbar {
+					width: 8px;
+					height: 8px;
 				}
-				.nav-section-title {
-					font-weight: 600;
-					font-size: 0.875rem;
-					text-transform: uppercase;
-					letter-spacing: 0.05em;
-					color: var(--text-secondary);
-					padding: 0.75rem 1rem;
-					cursor: pointer;
-					user-select: none;
+				::-webkit-scrollbar-track {
+					background: #1a1b26;
 				}
-				.nav-item {
-					display: block;
-					padding: 0.5rem 1rem 0.5rem 2rem;
-					color: var(--text-secondary);
-					text-decoration: none;
-					font-size: 0.875rem;
-					transition: color 0.2s;
+				::-webkit-scrollbar-thumb {
+					background: #414868;
+					border-radius: 4px;
 				}
-				.nav-item:hover {
-					color: var(--accent);
+				::-webkit-scrollbar-thumb:hover {
+					background: #7aa2f7;
 				}
-				.nav-item.active {
-					color: var(--accent);
-					background-color: rgba(122, 162, 247, 0.1);
-					border-right: 2px solid var(--accent);
-				}
-				pre {
-					background-color: var(--bg-secondary);
-					border: 1px solid var(--border);
-					border-radius: 0.5rem;
-					padding: 1rem;
-					overflow-x: auto;
-				}
-				code {
-					background-color: rgba(122, 162, 247, 0.1);
-					padding: 0.125rem 0.25rem;
-					border-radius: 0.25rem;
-					font-size: 0.875em;
-				}
-				.breadcrumb {
-					display: flex;
-					gap: 0.5rem;
-					font-size: 0.875rem;
-					color: var(--text-secondary);
-					margin-bottom: 2rem;
-				}
-				.breadcrumb a {
-					color: var(--accent);
-					text-decoration: none;
-				}
-				.toc {
-					background-color: var(--bg-secondary);
-					padding: 1rem;
-					border-radius: 0.5rem;
-					margin-bottom: 2rem;
-					border: 1px solid var(--border);
-				}
-				.toc-item {
-					padding: 0.25rem 0;
-					display: block;
-					color: var(--text-secondary);
-					text-decoration: none;
-					font-size: 0.875rem;
-				}
-				.toc-item:hover {
-					color: var(--accent);
-				}
-				.search-box {
-					padding: 1rem;
-					border-bottom: 1px solid var(--border);
-				}
-				.search-input {
-					width: 100%;
-					padding: 0.5rem 0.75rem;
-					border-radius: 0.375rem;
-					background-color: var(--bg-primary);
-					color: var(--text-primary);
-					border: 1px solid var(--border);
-					font-size: 0.875rem;
-				}
-				.search-input:focus {
-					outline: none;
-					border-color: var(--accent);
-				}
-				.mobile-menu-button {
-					display: none;
-					position: fixed;
-					top: 1rem;
-					left: 1rem;
-					z-index: 100;
-					background-color: var(--bg-secondary);
-					border: 1px solid var(--border);
-					border-radius: 0.375rem;
-					padding: 0.5rem;
-					color: var(--text-primary);
-					cursor: pointer;
+
+				/* Search results overlay animation */
+				#search-results {
+					transition: opacity 0.2s ease-in-out;
 				}
+
+				/* Mobile responsive sidebar */
 				@media (max-width: 768px) {
 					.sidebar {
 						transform: translateX(-100%);
-						transition: transform 0.3s;
-					}
-					#search-results {
-						padding: 1rem;
-						padding-top: 4rem;
 					}
 					.sidebar.open {
 						transform: translateX(0);
 					}
-					.main-content {
-						margin-left: 0;
-						padding: 1rem;
-					}
-					.mobile-menu-button {
-						display: block;
-					}
-				}
-				#search-results {
-					position: fixed;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					background: rgba(0, 0, 0, 0.95);
-					overflow-y: auto;
-					padding: 2rem;
-					z-index: 1000;
-					display: none;
-				}
-				.search-result {
-					display: block;
-					padding: 1rem;
-					border-bottom: 1px solid var(--border);
-					color: var(--text-primary);
-					text-decoration: none;
-				}
-				.search-result:hover {
-					background: var(--bg-secondary);
-				}
-				.result-title {
-					font-weight: 600;
-					margin-bottom: 0.5rem;
-				}
-				.result-snippet {
-					font-size: 0.875rem;
-					color: var(--text-secondary);
-				}
-				.no-results {
-					text-align: center;
-					padding: 2rem;
-					color: var(--text-secondary);
-				}
-				mark {
-					background: var(--accent);
-					color: white;
-					padding: 0 0.2rem;
-					border-radius: 2px;
 				}
 			</style>
 		</head>
-		<body>
-			<button class="mobile-menu-button" onclick="toggleSidebar()">
+		<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"></div>
+			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8"></div>
 
-			</button>
-			
 			<!-- Sidebar -->
-			<div class="sidebar" id="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="search-box">
-					<input type="text" 
-						   class="search-input" 
-						   placeholder="Search documentation..."
-						   id="docs-search"
-						   oninput="searchDocs(this.value)">
+				<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 -->
 				for _, section := range nav.Sections {
-					<div class="nav-section">
-						<div class="nav-section-title" onclick="toggleSection(this)">
-							{ section.Title }
+					<div class="nav-section mb-6">
+						<div 
+							class="nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between"
+							onclick="toggleSection(this)"
+						>
+							<span>{ section.Title }</span>
+							<svg class="w-4 h-4 transform transition-transform section-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+							</svg>
 						</div>
 						if section.Collapsed {
-							<div class="nav-items" style="display: none;">
+							<div class="nav-items hidden" data-collapsed="true">
 								for _, item := range section.Items {
-									<a href={ item.URL } class="nav-item">
-										{ item.Icon } { item.Title }
+									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline">
+										<span class="mr-2">{ item.Icon }</span>{ item.Title }
 									</a>
 								}
 							</div>
 						} else {
-							<div class="nav-items">
+							<div class="nav-items" data-collapsed="false">
 								for _, item := range section.Items {
-									<a href={ item.URL } class="nav-item">
-										{ item.Icon } { item.Title }
+									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline">
+										<span class="mr-2">{ item.Icon }</span>{ item.Title }
 									</a>
 								}
 							</div>
@@ -256,88 +140,110 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 					</div>
 				}
 			</div>
-			
+
 			<!-- Main Content -->
-			<div class="main-content">
+			<main class="main-content lg:ml-72 p-8 max-w-4xl mx-auto">
 				<!-- Breadcrumb -->
 				if len(doc.Breadcrumb) > 0 {
-					<div class="breadcrumb">
+					<nav class="breadcrumb flex gap-2 text-sm text-text-secondary mb-8" aria-label="Breadcrumb">
 						for i, crumb := range doc.Breadcrumb {
 							if i > 0 {
-								<span>›</span>
+								<span class="text-text-secondary/50">›</span>
 							}
-							<a href={ crumb.URL }>{ crumb.Title }</a>
+							<a href={ crumb.URL } class="text-accent hover:underline no-underline">{ crumb.Title }</a>
 						}
-					</div>
+					</nav>
 				}
-				
+
 				<!-- Title -->
-				<h1 style="margin-bottom: 2rem;">{ doc.Title }</h1>
-				
+				<h1 class="text-4xl font-bold mb-8 text-text-primary">{ doc.Title }</h1>
+
 				<!-- Table of Contents -->
 				if len(doc.TOC) > 0 {
-					<div class="toc">
-						<strong style="display: block; margin-bottom: 0.5rem; color: var(--text-primary);">On this page</strong>
+					<div class="toc bg-background-secondary p-4 rounded-lg mb-8 border border-border">
+						<strong class="block mb-2 text-text-primary font-semibold">On this page</strong>
 						for _, item := range doc.TOC {
-							<a href={ "#" + item.Anchor } class="toc-item" style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) }>
+							<a 
+								href={ "#" + item.Anchor } 
+								class="toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline"
+								style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) }
+							>
 								{ item.Title }
 							</a>
 						}
 					</div>
 				}
-				
+
 				<!-- Content -->
-				<div>
+				<div class="prose prose-invert max-w-none">
 					@UnsafeHTML(doc.Content).ToComponent()
 				</div>
-			</div>
-			
+			</main>
+
 			<script>
 				// Toggle sidebar section
 				function toggleSection(el) {
 					const items = el.nextElementSibling;
-					if (items.style.display === 'none') {
-						items.style.display = 'block';
+					const arrow = el.querySelector('.section-arrow');
+					const isCollapsed = items.getAttribute('data-collapsed') === 'true';
+
+					if (isCollapsed) {
+						items.classList.remove('hidden');
+						items.setAttribute('data-collapsed', 'false');
+						arrow.style.transform = 'rotate(0deg)';
 					} else {
-						items.style.display = 'none';
+						items.classList.add('hidden');
+						items.setAttribute('data-collapsed', 'true');
+						arrow.style.transform = 'rotate(-90deg)';
 					}
 				}
-				
+
 				// Toggle sidebar on mobile
 				function toggleSidebar() {
-					document.getElementById('sidebar').classList.toggle('open');
+					const sidebar = document.querySelector('.sidebar');
+					sidebar.classList.toggle('open');
 				}
-				
+
+				// Close sidebar when clicking main content on mobile
+				document.querySelector('.main-content')?.addEventListener('click', () => {
+					const sidebar = document.querySelector('.sidebar');
+					if (window.innerWidth < 1024) {
+						sidebar.classList.remove('open');
+					}
+				});
+
 				// Highlight current page in nav
 				document.addEventListener('DOMContentLoaded', function() {
 					const currentPath = window.location.pathname;
 					document.querySelectorAll('.nav-item').forEach(item => {
 						if (item.getAttribute('href') === currentPath) {
-							item.classList.add('active');
+							item.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');
 						}
 					});
-					
+
 					// Initialize syntax highlighting
-					hljs.highlightAll();
+					if (typeof hljs !== 'undefined') {
+						hljs.highlightAll();
+					}
 				});
 
 				// Search state
 				let idx;
-				let searchResults = [];
+				let searchDocs = [];
 
 				// Load index on page load
 				fetch('/docs/search-index.json')
 					.then(r => r.json())
 					.then(data => {
-						// Initialize Lunr with fuzzy matching
 						idx = lunr(function() {
-							this.use(lunr.flex)
-							this.ref('id')
-							this.field('title', {boost: 10})
-							this.field('content', {boost: 1})
-							data.forEach(doc => this.add(doc))
-						})
-						console.log('Search index loaded:', data.length, 'documents')
+							this.use(lunr.flex);
+							this.ref('id');
+							this.field('title', {boost: 10});
+							this.field('content', {boost: 1});
+							data.forEach(doc => this.add(doc));
+						});
+						searchDocs = data;
+						console.log('Search index loaded:', data.length, 'documents');
 					})
 					.catch(err => console.error('Failed to load search index:', err));
 
@@ -353,7 +259,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 						const query = e.target.value.trim();
 
 						if (query.length < 2) {
-							searchResultsDiv.style.display = 'none';
+							searchResultsDiv.classList.add('hidden');
 							return;
 						}
 
@@ -363,9 +269,6 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 							expand: true
 						});
 
-						// Store results for highlighting
-						searchResults = results;
-
 						// Render results
 						renderSearchResults(results, query);
 					}, 150);
@@ -374,36 +277,29 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 				// Render search results
 				function renderSearchResults(results, query) {
 					if (results.length === 0) {
-						searchResultsDiv.innerHTML = '<div class="no-results">No results found</div>';
-						searchResultsDiv.style.display = 'block';
+						searchResultsDiv.innerHTML = '<div class="text-center py-8 text-text-secondary">No results found</div>';
+						searchResultsDiv.classList.remove('hidden');
 						return;
 					}
 
 					searchResultsDiv.innerHTML = results.map(r => {
-						const doc = getDocById(r.ref);
+						const doc = searchDocs.find(d => d.id === r.ref);
 						if (!doc) return '';
 
 						const snippet = getSnippet(doc.content, query);
 
 						return `
-							<a href="${doc.url}" class="search-result">
-								<div class="result-title">${doc.title}</div>
-								<div class="result-snippet">${snippet}...</div>
+							<a href="${doc.url}" class="block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline">
+								<div class="font-semibold mb-2">${doc.title}</div>
+								<div class="text-sm text-text-secondary">${snippet}...</div>
 							</a>
 						`;
 					}).join('');
 
-					searchResultsDiv.style.display = 'block';
-				}
-
-				function getDocById(id) {
-					// This would be populated from the index
-					// For now, return a placeholder
-					return {title: id, url: '/docs/' + id.replace('.md', ''), content: ''};
+					searchResultsDiv.classList.remove('hidden');
 				}
 
 				function getSnippet(content, query) {
-					// Simple snippet extraction
 					const words = query.toLowerCase().split(/\s+/);
 					const contentLower = content.toLowerCase();
 
@@ -421,7 +317,15 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 				// Close search results when clicking outside
 				document.addEventListener('click', (e) => {
 					if (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {
-						searchResultsDiv.style.display = 'none';
+						searchResultsDiv.classList.add('hidden');
+					}
+				});
+
+				// Close search on Escape key
+				document.addEventListener('keydown', (e) => {
+					if (e.key === 'Escape') {
+						searchResultsDiv.classList.add('hidden');
+						searchInput.blur();
 					}
 				});
 			</script>
@@ -431,248 +335,142 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 
 templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer APIExplorerData) {
 	<!DOCTYPE html>
-	<html lang="en">
+	<html lang="en" class="dark">
 		<head>
 			<meta charset="UTF-8">
 			<meta name="viewport" content="width=device-width, initial-scale=1.0">
 			<title>{ doc.Title } - 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 src="https://cdn.jsdelivr.net/npm/lunr-flex@1.0.5/lunr.flex.min.js"></script>
+			<script>
+				tailwind.config = {
+					darkMode: 'class',
+					theme: {
+						extend: {
+							colors: {
+								background: {
+									primary: '#1a1b26',
+									secondary: '#24283b',
+								},
+								text: {
+									primary: '#c0caf5',
+									secondary: '#9aa5ce',
+								},
+								border: '#414868',
+								accent: '#7aa2f7',
+							}
+						}
+					}
+				}
+			</script>
 			<style>
-				:root {
-					--bg-primary: #1a1b26;
-					--bg-secondary: #24283b;
-					--text-primary: #c0caf5;
-					--text-secondary: #9aa5ce;
-					--border: #414868;
-					--accent: #7aa2f7;
-				}
-				body {
-					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-					background-color: var(--bg-primary);
-					color: var(--text-primary);
-					margin: 0;
-					padding: 0;
-				}
+				/* Only custom CSS for dynamic values and theming */
 				.sidebar {
-					position: fixed;
-					left: 0;
-					top: 0;
-					bottom: 0;
-					width: 280px;
-					background-color: var(--bg-secondary);
-					border-right: 1px solid var(--border);
-					overflow-y: auto;
-					z-index: 50;
+					transition: transform 0.3s ease-in-out;
 				}
-				.main-content {
-					margin-left: 280px;
-					padding: 2rem;
-					max-width: 900px;
+				
+				/* Smooth scroll behavior */
+				html {
+					scroll-behavior: smooth;
 				}
-				.nav-section {
-					margin-bottom: 1.5rem;
+				
+				/* Custom scrollbar */
+				::-webkit-scrollbar {
+					width: 8px;
+					height: 8px;
 				}
-				.nav-section-title {
-					font-weight: 600;
-					font-size: 0.875rem;
-					text-transform: uppercase;
-					letter-spacing: 0.05em;
-					color: var(--text-secondary);
-					padding: 0.75rem 1rem;
-					cursor: pointer;
-					user-select: none;
+				::-webkit-scrollbar-track {
+					background: #1a1b26;
 				}
-				.nav-item {
-					display: block;
-					padding: 0.5rem 1rem 0.5rem 2rem;
-					color: var(--text-secondary);
-					text-decoration: none;
-					font-size: 0.875rem;
-					transition: color 0.2s;
+				::-webkit-scrollbar-thumb {
+					background: #414868;
+					border-radius: 4px;
 				}
-				.nav-item:hover {
-					color: var(--accent);
+				::-webkit-scrollbar-thumb:hover {
+					background: #7aa2f7;
 				}
-				.nav-item.active {
-					color: var(--accent);
-					background-color: rgba(122, 162, 247, 0.1);
-					border-right: 2px solid var(--accent);
+
+				/* Search results overlay animation */
+				#search-results {
+					transition: opacity 0.2s ease-in-out;
 				}
-				pre {
-					background-color: var(--bg-secondary);
-					border: 1px solid var(--border);
-					border-radius: 0.5rem;
-					padding: 1rem;
-					overflow-x: auto;
-				}
-				code {
-					background-color: rgba(122, 162, 247, 0.1);
-					padding: 0.125rem 0.25rem;
-					border-radius: 0.25rem;
-					font-size: 0.875em;
-				}
-				.breadcrumb {
-					display: flex;
-					gap: 0.5rem;
-					font-size: 0.875rem;
-					color: var(--text-secondary);
-					margin-bottom: 2rem;
-				}
-				.breadcrumb a {
-					color: var(--accent);
-					text-decoration: none;
-				}
-				.toc {
-					background-color: var(--bg-secondary);
-					padding: 1rem;
-					border-radius: 0.5rem;
-					margin-bottom: 2rem;
-					border: 1px solid var(--border);
-				}
-				.toc-item {
-					padding: 0.25rem 0;
-					display: block;
-					color: var(--text-secondary);
-					text-decoration: none;
-					font-size: 0.875rem;
-				}
-				.toc-item:hover {
-					color: var(--accent);
-				}
-				.search-box {
-					padding: 1rem;
-					border-bottom: 1px solid var(--border);
-				}
-				.search-input {
-					width: 100%;
-					padding: 0.5rem 0.75rem;
-					border-radius: 0.375rem;
-					background-color: var(--bg-primary);
-					color: var(--text-primary);
-					border: 1px solid var(--border);
-					font-size: 0.875rem;
-				}
-				.search-input:focus {
-					outline: none;
-					border-color: var(--accent);
-				}
-				.mobile-menu-button {
-					display: none;
-					position: fixed;
-					top: 1rem;
-					left: 1rem;
-					z-index: 100;
-					background-color: var(--bg-secondary);
-					border: 1px solid var(--border);
-					border-radius: 0.375rem;
-					padding: 0.5rem;
-					color: var(--text-primary);
-					cursor: pointer;
-				}
-				@media (max-width: 768px) {
+
+				/* Mobile responsive sidebar */
+				@media (max-width: 1024px) {
 					.sidebar {
 						transform: translateX(-100%);
-						transition: transform 0.3s;
-					}
-					#search-results {
-						padding: 1rem;
-						padding-top: 4rem;
 					}
 					.sidebar.open {
 						transform: translateX(0);
 					}
-					.main-content {
-						margin-left: 0;
+				}
+
+				/* Mobile TOC */
+				@media (max-width: 768px) {
+					.toc {
+						position: static;
+						margin-bottom: 1rem;
 						padding: 1rem;
 					}
-					.mobile-menu-button {
-						display: block;
-					}
-				}
-				#search-results {
-					position: fixed;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					background: rgba(0, 0, 0, 0.95);
-					overflow-y: auto;
-					padding: 2rem;
-					z-index: 1000;
-					display: none;
-				}
-				.search-result {
-					display: block;
-					padding: 1rem;
-					border-bottom: 1px solid var(--border);
-					color: var(--text-primary);
-					text-decoration: none;
-				}
-				.search-result:hover {
-					background: var(--bg-secondary);
-				}
-				.result-title {
-					font-weight: 600;
-					margin-bottom: 0.5rem;
-				}
-				.result-snippet {
-					font-size: 0.875rem;
-					color: var(--text-secondary);
-				}
-				.no-results {
-					text-align: center;
-					padding: 2rem;
-					color: var(--text-secondary);
-				}
-				mark {
-					background: var(--accent);
-					color: white;
-					padding: 0 0.2rem;
-					border-radius: 2px;
 				}
 			</style>
 		</head>
-		<body>
-			<button class="mobile-menu-button" onclick="toggleSidebar()">
+		<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"></div>
+			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-4 lg:p-8"></div>
 
-			</button>
-			
 			<!-- Sidebar -->
-			<div class="sidebar" id="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="search-box">
-					<input type="text" 
-						   class="search-input" 
-						   placeholder="Search documentation..."
-						   id="docs-search"
-						   oninput="searchDocs(this.value)">
+				<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 -->
 				for _, section := range nav.Sections {
-					<div class="nav-section">
-						<div class="nav-section-title" onclick="toggleSection(this)">
-							{ section.Title }
+					<div class="nav-section mb-6">
+						<div 
+							class="nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between"
+							onclick="toggleSection(this)"
+						>
+							<span>{ section.Title }</span>
+							<svg class="w-4 h-4 transform transition-transform section-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+							</svg>
 						</div>
 						if section.Collapsed {
-							<div class="nav-items" style="display: none;">
+							<div class="nav-items hidden" data-collapsed="true">
 								for _, item := range section.Items {
-									<a href={ item.URL } class="nav-item">
-										{ item.Icon } { item.Title }
+									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline">
+										<span class="mr-2">{ item.Icon }</span>{ item.Title }
 									</a>
 								}
 							</div>
 						} else {
-							<div class="nav-items">
+							<div class="nav-items" data-collapsed="false">
 								for _, item := range section.Items {
-									<a href={ item.URL } class="nav-item">
-										{ item.Icon } { item.Title }
+									<a href={ item.URL } class="nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline">
+										<span class="mr-2">{ item.Icon }</span>{ item.Title }
 									</a>
 								}
 							</div>
@@ -680,91 +478,113 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 					</div>
 				}
 			</div>
-			
+
 			<!-- Main Content -->
-			<div class="main-content">
+			<main class="main-content lg:ml-72 p-4 lg:p-8 max-w-4xl mx-auto">
 				<!-- Breadcrumb -->
 				if len(doc.Breadcrumb) > 0 {
-					<div class="breadcrumb">
+					<nav class="breadcrumb flex flex-wrap gap-2 text-sm text-text-secondary mb-8" aria-label="Breadcrumb">
 						for i, crumb := range doc.Breadcrumb {
 							if i > 0 {
-								<span>›</span>
+								<span class="text-text-secondary/50">›</span>
 							}
-							<a href={ crumb.URL }>{ crumb.Title }</a>
+							<a href={ crumb.URL } class="text-accent hover:underline no-underline">{ crumb.Title }</a>
 						}
-					</div>
+					</nav>
 				}
-				
+
 				<!-- Title -->
-				<h1 style="margin-bottom: 2rem;">{ doc.Title }</h1>
-				
+				<h1 class="text-3xl lg:text-4xl font-bold mb-6 lg:mb-8 text-text-primary">{ doc.Title }</h1>
+
 				<!-- Table of Contents -->
 				if len(doc.TOC) > 0 {
-					<div class="toc">
-						<strong style="display: block; margin-bottom: 0.5rem; color: var(--text-primary);">On this page</strong>
+					<div class="toc bg-background-secondary p-4 rounded-lg mb-6 lg:mb-8 border border-border lg:static">
+						<strong class="block mb-2 text-text-primary font-semibold">On this page</strong>
 						for _, item := range doc.TOC {
-							<a href={ "#" + item.Anchor } class="toc-item" style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) }>
+							<a 
+								href={ "#" + item.Anchor } 
+								class="toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline"
+								style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) }
+							>
 								{ item.Title }
 							</a>
 						}
 					</div>
 				}
-				
+
 				<!-- Content -->
-				<div>
+				<div class="prose prose-invert prose-sm lg:prose-base max-w-none">
 					@UnsafeHTML(doc.Content).ToComponent()
 				</div>
 
 				<!-- API Explorer -->
 				@APIExplorer(explorer)
-			</div>
-			
+			</main>
+
 			<script>
 				// Toggle sidebar section
 				function toggleSection(el) {
 					const items = el.nextElementSibling;
-					if (items.style.display === 'none') {
-						items.style.display = 'block';
+					const arrow = el.querySelector('.section-arrow');
+					const isCollapsed = items.getAttribute('data-collapsed') === 'true';
+
+					if (isCollapsed) {
+						items.classList.remove('hidden');
+						items.setAttribute('data-collapsed', 'false');
+						arrow.style.transform = 'rotate(0deg)';
 					} else {
-						items.style.display = 'none';
+						items.classList.add('hidden');
+						items.setAttribute('data-collapsed', 'true');
+						arrow.style.transform = 'rotate(-90deg)';
 					}
 				}
-				
+
 				// Toggle sidebar on mobile
 				function toggleSidebar() {
-					document.getElementById('sidebar').classList.toggle('open');
+					const sidebar = document.querySelector('.sidebar');
+					sidebar.classList.toggle('open');
 				}
-				
+
+				// Close sidebar when clicking main content on mobile
+				document.querySelector('.main-content')?.addEventListener('click', () => {
+					const sidebar = document.querySelector('.sidebar');
+					if (window.innerWidth < 1024) {
+						sidebar.classList.remove('open');
+					}
+				});
+
 				// Highlight current page in nav
 				document.addEventListener('DOMContentLoaded', function() {
 					const currentPath = window.location.pathname;
 					document.querySelectorAll('.nav-item').forEach(item => {
 						if (item.getAttribute('href') === currentPath) {
-							item.classList.add('active');
+							item.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');
 						}
 					});
 
 					// Initialize syntax highlighting
-					hljs.highlightAll();
+					if (typeof hljs !== 'undefined') {
+						hljs.highlightAll();
+					}
 				});
 
 				// Search state
 				let idx;
-				let searchResults = [];
+				let searchDocs = [];
 
 				// Load index on page load
 				fetch('/docs/search-index.json')
 					.then(r => r.json())
 					.then(data => {
-						// Initialize Lunr with fuzzy matching
 						idx = lunr(function() {
-							this.use(lunr.flex)
-							this.ref('id')
-							this.field('title', {boost: 10})
-							this.field('content', {boost: 1})
-							data.forEach(doc => this.add(doc))
-						})
-						console.log('Search index loaded:', data.length, 'documents')
+							this.use(lunr.flex);
+							this.ref('id');
+							this.field('title', {boost: 10});
+							this.field('content', {boost: 1});
+							data.forEach(doc => this.add(doc));
+						});
+						searchDocs = data;
+						console.log('Search index loaded:', data.length, 'documents');
 					})
 					.catch(err => console.error('Failed to load search index:', err));
 
@@ -780,7 +600,7 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 						const query = e.target.value.trim();
 
 						if (query.length < 2) {
-							searchResultsDiv.style.display = 'none';
+							searchResultsDiv.classList.add('hidden');
 							return;
 						}
 
@@ -790,9 +610,6 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 							expand: true
 						});
 
-						// Store results for highlighting
-						searchResults = results;
-
 						// Render results
 						renderSearchResults(results, query);
 					}, 150);
@@ -801,36 +618,29 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 				// Render search results
 				function renderSearchResults(results, query) {
 					if (results.length === 0) {
-						searchResultsDiv.innerHTML = '<div class="no-results">No results found</div>';
-						searchResultsDiv.style.display = 'block';
+						searchResultsDiv.innerHTML = '<div class="text-center py-8 text-text-secondary">No results found</div>';
+						searchResultsDiv.classList.remove('hidden');
 						return;
 					}
 
 					searchResultsDiv.innerHTML = results.map(r => {
-						const doc = getDocById(r.ref);
+						const doc = searchDocs.find(d => d.id === r.ref);
 						if (!doc) return '';
 
 						const snippet = getSnippet(doc.content, query);
 
 						return `
-							<a href="${doc.url}" class="search-result">
-								<div class="result-title">${doc.title}</div>
-								<div class="result-snippet">${snippet}...</div>
+							<a href="${doc.url}" class="block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline">
+								<div class="font-semibold mb-2">${doc.title}</div>
+								<div class="text-sm text-text-secondary">${snippet}...</div>
 							</a>
 						`;
 					}).join('');
 
-					searchResultsDiv.style.display = 'block';
-				}
-
-				function getDocById(id) {
-					// This would be populated from the index
-					// For now, return a placeholder
-					return {title: id, url: '/docs/' + id.replace('.md', ''), content: ''};
+					searchResultsDiv.classList.remove('hidden');
 				}
 
 				function getSnippet(content, query) {
-					// Simple snippet extraction
 					const words = query.toLowerCase().split(/\s+/);
 					const contentLower = content.toLowerCase();
 
@@ -848,7 +658,15 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 				// Close search results when clicking outside
 				document.addEventListener('click', (e) => {
 					if (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {
-						searchResultsDiv.style.display = 'none';
+						searchResultsDiv.classList.add('hidden');
+					}
+				});
+
+				// Close search on Escape key
+				document.addEventListener('keydown', (e) => {
+					if (e.key === 'Escape') {
+						searchResultsDiv.classList.add('hidden');
+						searchInput.blur();
 					}
 				});
 			</script>
diff --git a/templates/docs_templ.go b/templates/docs_templ.go
index c869b46..1e16da2 100644
--- a/templates/docs_templ.go
+++ b/templates/docs_templ.go
@@ -33,43 +33,43 @@ func DocsLayout(nav Navigation, doc Document, 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>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\" class=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 14, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 13, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Documentation</title><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><style>\n\t\t\t\t:root {\n\t\t\t\t\t--bg-primary: #1a1b26;\n\t\t\t\t\t--bg-secondary: #24283b;\n\t\t\t\t\t--text-primary: #c0caf5;\n\t\t\t\t\t--text-secondary: #9aa5ce;\n\t\t\t\t\t--border: #414868;\n\t\t\t\t\t--accent: #7aa2f7;\n\t\t\t\t}\n\t\t\t\tbody {\n\t\t\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\t\t\t\t\tbackground-color: var(--bg-primary);\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\t\t\t\t.sidebar {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\twidth: 280px;\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tborder-right: 1px solid var(--border);\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\tz-index: 50;\n\t\t\t\t}\n\t\t\t\t.main-content {\n\t\t\t\t\tmargin-left: 280px;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t\tmax-width: 900px;\n\t\t\t\t}\n\t\t\t\t.nav-section {\n\t\t\t\t\tmargin-bottom: 1.5rem;\n\t\t\t\t}\n\t\t\t\t.nav-section-title {\n\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\ttext-transform: uppercase;\n\t\t\t\t\tletter-spacing: 0.05em;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\tpadding: 0.75rem 1rem;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tuser-select: none;\n\t\t\t\t}\n\t\t\t\t.nav-item {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tpadding: 0.5rem 1rem 0.5rem 2rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\ttransition: color 0.2s;\n\t\t\t\t}\n\t\t\t\t.nav-item:hover {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t}\n\t\t\t\t.nav-item.active {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t\tbackground-color: rgba(122, 162, 247, 0.1);\n\t\t\t\t\tborder-right: 2px solid var(--accent);\n\t\t\t\t}\n\t\t\t\tpre {\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t\tborder-radius: 0.5rem;\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\toverflow-x: auto;\n\t\t\t\t}\n\t\t\t\tcode {\n\t\t\t\t\tbackground-color: rgba(122, 162, 247, 0.1);\n\t\t\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\t\t\tborder-radius: 0.25rem;\n\t\t\t\t\tfont-size: 0.875em;\n\t\t\t\t}\n\t\t\t\t.breadcrumb {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tgap: 0.5rem;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\tmargin-bottom: 2rem;\n\t\t\t\t}\n\t\t\t\t.breadcrumb a {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t\t.toc {\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder-radius: 0.5rem;\n\t\t\t\t\tmargin-bottom: 2rem;\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t}\n\t\t\t\t.toc-item {\n\t\t\t\t\tpadding: 0.25rem 0;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t}\n\t\t\t\t.toc-item:hover {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t}\n\t\t\t\t.search-box {\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder-bottom: 1px solid var(--border);\n\t\t\t\t}\n\t\t\t\t.search-input {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tpadding: 0.5rem 0.75rem;\n\t\t\t\t\tborder-radius: 0.375rem;\n\t\t\t\t\tbackground-color: var(--bg-primary);\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t}\n\t\t\t\t.search-input:focus {\n\t\t\t\t\toutline: none;\n\t\t\t\t\tborder-color: var(--accent);\n\t\t\t\t}\n\t\t\t\t.mobile-menu-button {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: 1rem;\n\t\t\t\t\tleft: 1rem;\n\t\t\t\t\tz-index: 100;\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t\tborder-radius: 0.375rem;\n\t\t\t\t\tpadding: 0.5rem;\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\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\ttransition: transform 0.3s;\n\t\t\t\t\t}\n\t\t\t\t\t#search-results {\n\t\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\t\tpadding-top: 4rem;\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\t.main-content {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\t}\n\t\t\t\t\t.mobile-menu-button {\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t#search-results {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\tbackground: rgba(0, 0, 0, 0.95);\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t.search-result {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder-bottom: 1px solid var(--border);\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t\t.search-result:hover {\n\t\t\t\t\tbackground: var(--bg-secondary);\n\t\t\t\t}\n\t\t\t\t.result-title {\n\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\tmargin-bottom: 0.5rem;\n\t\t\t\t}\n\t\t\t\t.result-snippet {\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t}\n\t\t\t\t.no-results {\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t}\n\t\t\t\tmark {\n\t\t\t\t\tbackground: var(--accent);\n\t\t\t\t\tcolor: white;\n\t\t\t\t\tpadding: 0 0.2rem;\n\t\t\t\t\tborder-radius: 2px;\n\t\t\t\t}\n\t\t\t</style></head><body><button class=\"mobile-menu-button\" onclick=\"toggleSidebar()\"><!-- Search Results Overlay --><div id=\"search-results\"></div></button><!-- Sidebar --><div class=\"sidebar\" id=\"sidebar\"><!-- Search --><div class=\"search-box\"><input type=\"text\" class=\"search-input\" 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><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 -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, section := range nav.Sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"nav-section\"><div class=\"nav-section-title\" onclick=\"toggleSection(this)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" onclick=\"toggleSection(this)\"><span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			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: 237, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 118, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if section.Collapsed {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"nav-items\" style=\"display: none;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -81,33 +81,33 @@ 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: 242, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 126, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" class=\"nav-item\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 243, Col: 21}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 127, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 243, Col: 36}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 127, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 					if templ_7745c5c3_Err != nil {
@@ -123,7 +123,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"nav-items\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"nav-items\" data-collapsed=\"false\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -135,33 +135,33 @@ 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: 250, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 134, Col: 27}
 					}
 					_, 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, 13, "\" class=\"nav-item\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 251, Col: 21}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 135, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 251, Col: 36}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 135, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 					if templ_7745c5c3_Err != nil {
@@ -182,18 +182,18 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div><!-- Main Content --><div class=\"main-content\"><!-- Breadcrumb -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.Breadcrumb) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<div class=\"breadcrumb\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<nav class=\"breadcrumb flex gap-2 text-sm text-text-secondary mb-8\" aria-label=\"Breadcrumb\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for i, crumb := range doc.Breadcrumb {
 				if i > 0 {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<span>›</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<span class=\"text-text-secondary/50\">›</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -205,20 +205,20 @@ 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: 269, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 153, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\" class=\"text-accent hover:underline no-underline\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				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: 269, Col: 42}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 153, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -229,19 +229,19 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</nav>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<!-- Title --><h1 style=\"margin-bottom: 2rem;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<!-- Title --><h1 class=\"text-4xl font-bold mb-8 text-text-primary\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		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: 275, Col: 48}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 159, Col: 69}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
@@ -252,7 +252,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.TOC) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<div class=\"toc\"><strong style=\"display: block; margin-bottom: 0.5rem; color: var(--text-primary);\">On this page</strong> ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<div class=\"toc bg-background-secondary p-4 rounded-lg mb-8 border border-border\"><strong class=\"block mb-2 text-text-primary font-semibold\">On this page</strong> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -264,20 +264,20 @@ 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: 282, Col: 34}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 167, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" class=\"toc-item\" style=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" class=\"toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline\" style=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				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: 282, Col: 112}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 169, 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: 283, Col: 20}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 171, Col: 20}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
@@ -306,7 +306,7 @@ func DocsLayout(nav Navigation, doc Document, user User) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<!-- Content --><div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<!-- Content --><div class=\"prose prose-invert max-w-none\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -314,7 +314,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, 34, "</div></div><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tif (items.style.display === 'none') {\n\t\t\t\t\t\titems.style.display = 'block';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.style.display = 'none';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tdocument.getElementById('sidebar').classList.toggle('open');\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('active');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\t\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\thljs.highlightAll();\n\t\t\t\t});\n\n\t\t\t\t// Search state\n\t\t\t\tlet idx;\n\t\t\t\tlet searchResults = [];\n\n\t\t\t\t// Load index on page load\n\t\t\t\tfetch('/docs/search-index.json')\n\t\t\t\t\t.then(r => r.json())\n\t\t\t\t\t.then(data => {\n\t\t\t\t\t\t// Initialize Lunr with fuzzy matching\n\t\t\t\t\t\tidx = lunr(function() {\n\t\t\t\t\t\t\tthis.use(lunr.flex)\n\t\t\t\t\t\t\tthis.ref('id')\n\t\t\t\t\t\t\tthis.field('title', {boost: 10})\n\t\t\t\t\t\t\tthis.field('content', {boost: 1})\n\t\t\t\t\t\t\tdata.forEach(doc => this.add(doc))\n\t\t\t\t\t\t})\n\t\t\t\t\t\tconsole.log('Search index loaded:', data.length, 'documents')\n\t\t\t\t\t})\n\t\t\t\t\t.catch(err => console.error('Failed to load search index:', err));\n\n\t\t\t\t// Search input with debounce\n\t\t\t\tconst searchInput = document.getElementById('docs-search');\n\t\t\t\tconst searchResultsDiv = document.getElementById('search-results');\n\n\t\t\t\tlet debounceTimer;\n\n\t\t\t\tsearchInput.addEventListener('input', (e) => {\n\t\t\t\t\tclearTimeout(debounceTimer);\n\t\t\t\t\tdebounceTimer = setTimeout(() => {\n\t\t\t\t\t\tconst query = e.target.value.trim();\n\n\t\t\t\t\t\tif (query.length < 2) {\n\t\t\t\t\t\t\tsearchResultsDiv.style.display = 'none';\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Search with fuzzy matching\n\t\t\t\t\t\tconst results = idx.search(query, {\n\t\t\t\t\t\t\tfields: {title: {boost: 10}, content: 1},\n\t\t\t\t\t\t\texpand: true\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t// Store results for highlighting\n\t\t\t\t\t\tsearchResults = results;\n\n\t\t\t\t\t\t// Render results\n\t\t\t\t\t\trenderSearchResults(results, query);\n\t\t\t\t\t}, 150);\n\t\t\t\t});\n\n\t\t\t\t// Render search results\n\t\t\t\tfunction renderSearchResults(results, query) {\n\t\t\t\t\tif (results.length === 0) {\n\t\t\t\t\t\tsearchResultsDiv.innerHTML = '<div class=\"no-results\">No results found</div>';\n\t\t\t\t\t\tsearchResultsDiv.style.display = 'block';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tsearchResultsDiv.innerHTML = results.map(r => {\n\t\t\t\t\t\tconst doc = getDocById(r.ref);\n\t\t\t\t\t\tif (!doc) return '';\n\n\t\t\t\t\t\tconst snippet = getSnippet(doc.content, query);\n\n\t\t\t\t\t\treturn `\n\t\t\t\t\t\t\t<a href=\"${doc.url}\" class=\"search-result\">\n\t\t\t\t\t\t\t\t<div class=\"result-title\">${doc.title}</div>\n\t\t\t\t\t\t\t\t<div class=\"result-snippet\">${snippet}...</div>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t`;\n\t\t\t\t\t}).join('');\n\n\t\t\t\t\tsearchResultsDiv.style.display = 'block';\n\t\t\t\t}\n\n\t\t\t\tfunction getDocById(id) {\n\t\t\t\t\t// This would be populated from the index\n\t\t\t\t\t// For now, return a placeholder\n\t\t\t\t\treturn {title: id, url: '/docs/' + id.replace('.md', ''), content: ''};\n\t\t\t\t}\n\n\t\t\t\tfunction getSnippet(content, query) {\n\t\t\t\t\t// Simple snippet extraction\n\t\t\t\t\tconst words = query.toLowerCase().split(/\\s+/);\n\t\t\t\t\tconst contentLower = content.toLowerCase();\n\n\t\t\t\t\tfor (const word of words) {\n\t\t\t\t\t\tconst idx = contentLower.indexOf(word);\n\t\t\t\t\t\tif (idx !== -1) {\n\t\t\t\t\t\t\tconst start = Math.max(0, idx - 50);\n\t\t\t\t\t\t\tconst end = Math.min(content.length, idx + 100);\n\t\t\t\t\t\t\treturn '...' + content.substring(start, end) + '...';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn content.substring(0, 150) + '...';\n\t\t\t\t}\n\n\t\t\t\t// Close search results when clicking outside\n\t\t\t\tdocument.addEventListener('click', (e) => {\n\t\t\t\t\tif (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {\n\t\t\t\t\t\tsearchResultsDiv.style.display = 'none';\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t</script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</div></main><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tconst arrow = el.querySelector('.section-arrow');\n\t\t\t\t\tconst isCollapsed = items.getAttribute('data-collapsed') === 'true';\n\n\t\t\t\t\tif (isCollapsed) {\n\t\t\t\t\t\titems.classList.remove('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'false');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(0deg)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.classList.add('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'true');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(-90deg)';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tsidebar.classList.toggle('open');\n\t\t\t\t}\n\n\t\t\t\t// Close sidebar when clicking main content on mobile\n\t\t\t\tdocument.querySelector('.main-content')?.addEventListener('click', () => {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tif (window.innerWidth < 1024) {\n\t\t\t\t\t\tsidebar.classList.remove('open');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\tif (typeof hljs !== 'undefined') {\n\t\t\t\t\t\thljs.highlightAll();\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Search state\n\t\t\t\tlet idx;\n\t\t\t\tlet searchDocs = [];\n\n\t\t\t\t// Load index on page load\n\t\t\t\tfetch('/docs/search-index.json')\n\t\t\t\t\t.then(r => r.json())\n\t\t\t\t\t.then(data => {\n\t\t\t\t\t\tidx = lunr(function() {\n\t\t\t\t\t\t\tthis.use(lunr.flex);\n\t\t\t\t\t\t\tthis.ref('id');\n\t\t\t\t\t\t\tthis.field('title', {boost: 10});\n\t\t\t\t\t\t\tthis.field('content', {boost: 1});\n\t\t\t\t\t\t\tdata.forEach(doc => this.add(doc));\n\t\t\t\t\t\t});\n\t\t\t\t\t\tsearchDocs = data;\n\t\t\t\t\t\tconsole.log('Search index loaded:', data.length, 'documents');\n\t\t\t\t\t})\n\t\t\t\t\t.catch(err => console.error('Failed to load search index:', err));\n\n\t\t\t\t// Search input with debounce\n\t\t\t\tconst searchInput = document.getElementById('docs-search');\n\t\t\t\tconst searchResultsDiv = document.getElementById('search-results');\n\n\t\t\t\tlet debounceTimer;\n\n\t\t\t\tsearchInput.addEventListener('input', (e) => {\n\t\t\t\t\tclearTimeout(debounceTimer);\n\t\t\t\t\tdebounceTimer = setTimeout(() => {\n\t\t\t\t\t\tconst query = e.target.value.trim();\n\n\t\t\t\t\t\tif (query.length < 2) {\n\t\t\t\t\t\t\tsearchResultsDiv.classList.add('hidden');\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Search with fuzzy matching\n\t\t\t\t\t\tconst results = idx.search(query, {\n\t\t\t\t\t\t\tfields: {title: {boost: 10}, content: 1},\n\t\t\t\t\t\t\texpand: true\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t// Render results\n\t\t\t\t\t\trenderSearchResults(results, query);\n\t\t\t\t\t}, 150);\n\t\t\t\t});\n\n\t\t\t\t// Render search results\n\t\t\t\tfunction renderSearchResults(results, query) {\n\t\t\t\t\tif (results.length === 0) {\n\t\t\t\t\t\tsearchResultsDiv.innerHTML = '<div class=\"text-center py-8 text-text-secondary\">No results found</div>';\n\t\t\t\t\t\tsearchResultsDiv.classList.remove('hidden');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tsearchResultsDiv.innerHTML = results.map(r => {\n\t\t\t\t\t\tconst doc = searchDocs.find(d => d.id === r.ref);\n\t\t\t\t\t\tif (!doc) return '';\n\n\t\t\t\t\t\tconst snippet = getSnippet(doc.content, query);\n\n\t\t\t\t\t\treturn `\n\t\t\t\t\t\t\t<a href=\"${doc.url}\" class=\"block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline\">\n\t\t\t\t\t\t\t\t<div class=\"font-semibold mb-2\">${doc.title}</div>\n\t\t\t\t\t\t\t\t<div class=\"text-sm text-text-secondary\">${snippet}...</div>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t`;\n\t\t\t\t\t}).join('');\n\n\t\t\t\t\tsearchResultsDiv.classList.remove('hidden');\n\t\t\t\t}\n\n\t\t\t\tfunction getSnippet(content, query) {\n\t\t\t\t\tconst words = query.toLowerCase().split(/\\s+/);\n\t\t\t\t\tconst contentLower = content.toLowerCase();\n\n\t\t\t\t\tfor (const word of words) {\n\t\t\t\t\t\tconst idx = contentLower.indexOf(word);\n\t\t\t\t\t\tif (idx !== -1) {\n\t\t\t\t\t\t\tconst start = Math.max(0, idx - 50);\n\t\t\t\t\t\t\tconst end = Math.min(content.length, idx + 100);\n\t\t\t\t\t\t\treturn '...' + content.substring(start, end) + '...';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn content.substring(0, 150) + '...';\n\t\t\t\t}\n\n\t\t\t\t// Close search results when clicking outside\n\t\t\t\tdocument.addEventListener('click', (e) => {\n\t\t\t\t\tif (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {\n\t\t\t\t\t\tsearchResultsDiv.classList.add('hidden');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Close search on Escape key\n\t\t\t\tdocument.addEventListener('keydown', (e) => {\n\t\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\t\tsearchResultsDiv.classList.add('hidden');\n\t\t\t\t\t\tsearchInput.blur();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t</script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -343,43 +343,43 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 			templ_7745c5c3_Var16 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<!doctype html><html lang=\"en\" class=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		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: 438, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 342, 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><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><style>\n\t\t\t\t:root {\n\t\t\t\t\t--bg-primary: #1a1b26;\n\t\t\t\t\t--bg-secondary: #24283b;\n\t\t\t\t\t--text-primary: #c0caf5;\n\t\t\t\t\t--text-secondary: #9aa5ce;\n\t\t\t\t\t--border: #414868;\n\t\t\t\t\t--accent: #7aa2f7;\n\t\t\t\t}\n\t\t\t\tbody {\n\t\t\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\t\t\t\t\tbackground-color: var(--bg-primary);\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\t\t\t\t.sidebar {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\twidth: 280px;\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tborder-right: 1px solid var(--border);\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\tz-index: 50;\n\t\t\t\t}\n\t\t\t\t.main-content {\n\t\t\t\t\tmargin-left: 280px;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t\tmax-width: 900px;\n\t\t\t\t}\n\t\t\t\t.nav-section {\n\t\t\t\t\tmargin-bottom: 1.5rem;\n\t\t\t\t}\n\t\t\t\t.nav-section-title {\n\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\ttext-transform: uppercase;\n\t\t\t\t\tletter-spacing: 0.05em;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\tpadding: 0.75rem 1rem;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tuser-select: none;\n\t\t\t\t}\n\t\t\t\t.nav-item {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tpadding: 0.5rem 1rem 0.5rem 2rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\ttransition: color 0.2s;\n\t\t\t\t}\n\t\t\t\t.nav-item:hover {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t}\n\t\t\t\t.nav-item.active {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t\tbackground-color: rgba(122, 162, 247, 0.1);\n\t\t\t\t\tborder-right: 2px solid var(--accent);\n\t\t\t\t}\n\t\t\t\tpre {\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t\tborder-radius: 0.5rem;\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\toverflow-x: auto;\n\t\t\t\t}\n\t\t\t\tcode {\n\t\t\t\t\tbackground-color: rgba(122, 162, 247, 0.1);\n\t\t\t\t\tpadding: 0.125rem 0.25rem;\n\t\t\t\t\tborder-radius: 0.25rem;\n\t\t\t\t\tfont-size: 0.875em;\n\t\t\t\t}\n\t\t\t\t.breadcrumb {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tgap: 0.5rem;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\tmargin-bottom: 2rem;\n\t\t\t\t}\n\t\t\t\t.breadcrumb a {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t\t.toc {\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder-radius: 0.5rem;\n\t\t\t\t\tmargin-bottom: 2rem;\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t}\n\t\t\t\t.toc-item {\n\t\t\t\t\tpadding: 0.25rem 0;\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t}\n\t\t\t\t.toc-item:hover {\n\t\t\t\t\tcolor: var(--accent);\n\t\t\t\t}\n\t\t\t\t.search-box {\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder-bottom: 1px solid var(--border);\n\t\t\t\t}\n\t\t\t\t.search-input {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tpadding: 0.5rem 0.75rem;\n\t\t\t\t\tborder-radius: 0.375rem;\n\t\t\t\t\tbackground-color: var(--bg-primary);\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t}\n\t\t\t\t.search-input:focus {\n\t\t\t\t\toutline: none;\n\t\t\t\t\tborder-color: var(--accent);\n\t\t\t\t}\n\t\t\t\t.mobile-menu-button {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: 1rem;\n\t\t\t\t\tleft: 1rem;\n\t\t\t\t\tz-index: 100;\n\t\t\t\t\tbackground-color: var(--bg-secondary);\n\t\t\t\t\tborder: 1px solid var(--border);\n\t\t\t\t\tborder-radius: 0.375rem;\n\t\t\t\t\tpadding: 0.5rem;\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\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\ttransition: transform 0.3s;\n\t\t\t\t\t}\n\t\t\t\t\t#search-results {\n\t\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\t\tpadding-top: 4rem;\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\t.main-content {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\t}\n\t\t\t\t\t.mobile-menu-button {\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t#search-results {\n\t\t\t\t\tposition: fixed;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\tbackground: rgba(0, 0, 0, 0.95);\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t\tz-index: 1000;\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t\t.search-result {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tpadding: 1rem;\n\t\t\t\t\tborder-bottom: 1px solid var(--border);\n\t\t\t\t\tcolor: var(--text-primary);\n\t\t\t\t\ttext-decoration: none;\n\t\t\t\t}\n\t\t\t\t.search-result:hover {\n\t\t\t\t\tbackground: var(--bg-secondary);\n\t\t\t\t}\n\t\t\t\t.result-title {\n\t\t\t\t\tfont-weight: 600;\n\t\t\t\t\tmargin-bottom: 0.5rem;\n\t\t\t\t}\n\t\t\t\t.result-snippet {\n\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t}\n\t\t\t\t.no-results {\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tpadding: 2rem;\n\t\t\t\t\tcolor: var(--text-secondary);\n\t\t\t\t}\n\t\t\t\tmark {\n\t\t\t\t\tbackground: var(--accent);\n\t\t\t\t\tcolor: white;\n\t\t\t\t\tpadding: 0 0.2rem;\n\t\t\t\t\tborder-radius: 2px;\n\t\t\t\t}\n\t\t\t</style></head><body><button class=\"mobile-menu-button\" onclick=\"toggleSidebar()\"><!-- Search Results Overlay --><div id=\"search-results\"></div></button><!-- Sidebar --><div class=\"sidebar\" id=\"sidebar\"><!-- Search --><div class=\"search-box\"><input type=\"text\" class=\"search-input\" 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><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 -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		for _, section := range nav.Sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<div class=\"nav-section\"><div class=\"nav-section-title\" onclick=\"toggleSection(this)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<div class=\"nav-section mb-6\"><div class=\"nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between\" onclick=\"toggleSection(this)\"><span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			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: 661, Col: 22}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 456, Col: 28}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</span> <svg class=\"w-4 h-4 transform transition-transform section-arrow\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"></path></svg></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if section.Collapsed {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"nav-items\" style=\"display: none;\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -391,33 +391,33 @@ 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: 666, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 464, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\" class=\"nav-item\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 667, Col: 21}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 465, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, " ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 667, Col: 36}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 465, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
 					if templ_7745c5c3_Err != nil {
@@ -433,7 +433,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					return templ_7745c5c3_Err
 				}
 			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div class=\"nav-items\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div class=\"nav-items\" data-collapsed=\"false\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -445,33 +445,33 @@ 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: 674, Col: 27}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 472, Col: 27}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "\" class=\"nav-item\">")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "\" class=\"nav-item block py-2 px-4 pl-8 text-text-secondary hover:text-accent text-sm transition-colors no-underline\"><span class=\"mr-2\">")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 675, Col: 21}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 473, Col: 40}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, " ")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
 					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: 675, Col: 36}
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 473, Col: 61}
 					}
 					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
 					if templ_7745c5c3_Err != nil {
@@ -492,18 +492,18 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "</div><!-- Main Content --><div class=\"main-content\"><!-- Breadcrumb -->")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "</div><!-- Main Content --><main class=\"main-content lg:ml-72 p-4 lg:p-8 max-w-4xl mx-auto\"><!-- Breadcrumb -->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.Breadcrumb) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "<div class=\"breadcrumb\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "<nav class=\"breadcrumb flex flex-wrap gap-2 text-sm text-text-secondary mb-8\" aria-label=\"Breadcrumb\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for i, crumb := range doc.Breadcrumb {
 				if i > 0 {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<span>›</span>")
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<span class=\"text-text-secondary/50\">›</span>")
 					if templ_7745c5c3_Err != nil {
 						return templ_7745c5c3_Err
 					}
@@ -515,20 +515,20 @@ 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: 693, Col: 26}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 491, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\" class=\"text-accent hover:underline no-underline\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				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: 693, Col: 42}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 491, Col: 91}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
 				if templ_7745c5c3_Err != nil {
@@ -539,19 +539,19 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</nav>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "<!-- Title --><h1 style=\"margin-bottom: 2rem;\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "<!-- Title --><h1 class=\"text-3xl lg:text-4xl font-bold mb-6 lg:mb-8 text-text-primary\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		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: 699, Col: 48}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 497, Col: 89}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
 		if templ_7745c5c3_Err != nil {
@@ -562,7 +562,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 			return templ_7745c5c3_Err
 		}
 		if len(doc.TOC) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "<div class=\"toc\"><strong style=\"display: block; margin-bottom: 0.5rem; color: var(--text-primary);\">On this page</strong> ")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "<div class=\"toc bg-background-secondary p-4 rounded-lg mb-6 lg:mb-8 border border-border lg:static\"><strong class=\"block mb-2 text-text-primary font-semibold\">On this page</strong> ")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -574,20 +574,20 @@ 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: 706, Col: 34}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 505, Col: 32}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\" class=\"toc-item\" style=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\" class=\"toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline\" style=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				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: 706, Col: 112}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 507, 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: 707, Col: 20}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 509, Col: 20}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
 				if templ_7745c5c3_Err != nil {
@@ -616,7 +616,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "<!-- Content --><div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "<!-- Content --><div class=\"prose prose-invert prose-sm lg:prose-base max-w-none\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -632,7 +632,7 @@ func DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer AP
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "</div><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tif (items.style.display === 'none') {\n\t\t\t\t\t\titems.style.display = 'block';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.style.display = 'none';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tdocument.getElementById('sidebar').classList.toggle('open');\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('active');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\thljs.highlightAll();\n\t\t\t\t});\n\n\t\t\t\t// Search state\n\t\t\t\tlet idx;\n\t\t\t\tlet searchResults = [];\n\n\t\t\t\t// Load index on page load\n\t\t\t\tfetch('/docs/search-index.json')\n\t\t\t\t\t.then(r => r.json())\n\t\t\t\t\t.then(data => {\n\t\t\t\t\t\t// Initialize Lunr with fuzzy matching\n\t\t\t\t\t\tidx = lunr(function() {\n\t\t\t\t\t\t\tthis.use(lunr.flex)\n\t\t\t\t\t\t\tthis.ref('id')\n\t\t\t\t\t\t\tthis.field('title', {boost: 10})\n\t\t\t\t\t\t\tthis.field('content', {boost: 1})\n\t\t\t\t\t\t\tdata.forEach(doc => this.add(doc))\n\t\t\t\t\t\t})\n\t\t\t\t\t\tconsole.log('Search index loaded:', data.length, 'documents')\n\t\t\t\t\t})\n\t\t\t\t\t.catch(err => console.error('Failed to load search index:', err));\n\n\t\t\t\t// Search input with debounce\n\t\t\t\tconst searchInput = document.getElementById('docs-search');\n\t\t\t\tconst searchResultsDiv = document.getElementById('search-results');\n\n\t\t\t\tlet debounceTimer;\n\n\t\t\t\tsearchInput.addEventListener('input', (e) => {\n\t\t\t\t\tclearTimeout(debounceTimer);\n\t\t\t\t\tdebounceTimer = setTimeout(() => {\n\t\t\t\t\t\tconst query = e.target.value.trim();\n\n\t\t\t\t\t\tif (query.length < 2) {\n\t\t\t\t\t\t\tsearchResultsDiv.style.display = 'none';\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Search with fuzzy matching\n\t\t\t\t\t\tconst results = idx.search(query, {\n\t\t\t\t\t\t\tfields: {title: {boost: 10}, content: 1},\n\t\t\t\t\t\t\texpand: true\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t// Store results for highlighting\n\t\t\t\t\t\tsearchResults = results;\n\n\t\t\t\t\t\t// Render results\n\t\t\t\t\t\trenderSearchResults(results, query);\n\t\t\t\t\t}, 150);\n\t\t\t\t});\n\n\t\t\t\t// Render search results\n\t\t\t\tfunction renderSearchResults(results, query) {\n\t\t\t\t\tif (results.length === 0) {\n\t\t\t\t\t\tsearchResultsDiv.innerHTML = '<div class=\"no-results\">No results found</div>';\n\t\t\t\t\t\tsearchResultsDiv.style.display = 'block';\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tsearchResultsDiv.innerHTML = results.map(r => {\n\t\t\t\t\t\tconst doc = getDocById(r.ref);\n\t\t\t\t\t\tif (!doc) return '';\n\n\t\t\t\t\t\tconst snippet = getSnippet(doc.content, query);\n\n\t\t\t\t\t\treturn `\n\t\t\t\t\t\t\t<a href=\"${doc.url}\" class=\"search-result\">\n\t\t\t\t\t\t\t\t<div class=\"result-title\">${doc.title}</div>\n\t\t\t\t\t\t\t\t<div class=\"result-snippet\">${snippet}...</div>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t`;\n\t\t\t\t\t}).join('');\n\n\t\t\t\t\tsearchResultsDiv.style.display = 'block';\n\t\t\t\t}\n\n\t\t\t\tfunction getDocById(id) {\n\t\t\t\t\t// This would be populated from the index\n\t\t\t\t\t// For now, return a placeholder\n\t\t\t\t\treturn {title: id, url: '/docs/' + id.replace('.md', ''), content: ''};\n\t\t\t\t}\n\n\t\t\t\tfunction getSnippet(content, query) {\n\t\t\t\t\t// Simple snippet extraction\n\t\t\t\t\tconst words = query.toLowerCase().split(/\\s+/);\n\t\t\t\t\tconst contentLower = content.toLowerCase();\n\n\t\t\t\t\tfor (const word of words) {\n\t\t\t\t\t\tconst idx = contentLower.indexOf(word);\n\t\t\t\t\t\tif (idx !== -1) {\n\t\t\t\t\t\t\tconst start = Math.max(0, idx - 50);\n\t\t\t\t\t\t\tconst end = Math.min(content.length, idx + 100);\n\t\t\t\t\t\t\treturn '...' + content.substring(start, end) + '...';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn content.substring(0, 150) + '...';\n\t\t\t\t}\n\n\t\t\t\t// Close search results when clicking outside\n\t\t\t\tdocument.addEventListener('click', (e) => {\n\t\t\t\t\tif (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {\n\t\t\t\t\t\tsearchResultsDiv.style.display = 'none';\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t</script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "</main><script>\n\t\t\t\t// Toggle sidebar section\n\t\t\t\tfunction toggleSection(el) {\n\t\t\t\t\tconst items = el.nextElementSibling;\n\t\t\t\t\tconst arrow = el.querySelector('.section-arrow');\n\t\t\t\t\tconst isCollapsed = items.getAttribute('data-collapsed') === 'true';\n\n\t\t\t\t\tif (isCollapsed) {\n\t\t\t\t\t\titems.classList.remove('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'false');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(0deg)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\titems.classList.add('hidden');\n\t\t\t\t\t\titems.setAttribute('data-collapsed', 'true');\n\t\t\t\t\t\tarrow.style.transform = 'rotate(-90deg)';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Toggle sidebar on mobile\n\t\t\t\tfunction toggleSidebar() {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tsidebar.classList.toggle('open');\n\t\t\t\t}\n\n\t\t\t\t// Close sidebar when clicking main content on mobile\n\t\t\t\tdocument.querySelector('.main-content')?.addEventListener('click', () => {\n\t\t\t\t\tconst sidebar = document.querySelector('.sidebar');\n\t\t\t\t\tif (window.innerWidth < 1024) {\n\t\t\t\t\t\tsidebar.classList.remove('open');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Highlight current page in nav\n\t\t\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\t\t\tconst currentPath = window.location.pathname;\n\t\t\t\t\tdocument.querySelectorAll('.nav-item').forEach(item => {\n\t\t\t\t\t\tif (item.getAttribute('href') === currentPath) {\n\t\t\t\t\t\t\titem.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\t// Initialize syntax highlighting\n\t\t\t\t\tif (typeof hljs !== 'undefined') {\n\t\t\t\t\t\thljs.highlightAll();\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Search state\n\t\t\t\tlet idx;\n\t\t\t\tlet searchDocs = [];\n\n\t\t\t\t// Load index on page load\n\t\t\t\tfetch('/docs/search-index.json')\n\t\t\t\t\t.then(r => r.json())\n\t\t\t\t\t.then(data => {\n\t\t\t\t\t\tidx = lunr(function() {\n\t\t\t\t\t\t\tthis.use(lunr.flex);\n\t\t\t\t\t\t\tthis.ref('id');\n\t\t\t\t\t\t\tthis.field('title', {boost: 10});\n\t\t\t\t\t\t\tthis.field('content', {boost: 1});\n\t\t\t\t\t\t\tdata.forEach(doc => this.add(doc));\n\t\t\t\t\t\t});\n\t\t\t\t\t\tsearchDocs = data;\n\t\t\t\t\t\tconsole.log('Search index loaded:', data.length, 'documents');\n\t\t\t\t\t})\n\t\t\t\t\t.catch(err => console.error('Failed to load search index:', err));\n\n\t\t\t\t// Search input with debounce\n\t\t\t\tconst searchInput = document.getElementById('docs-search');\n\t\t\t\tconst searchResultsDiv = document.getElementById('search-results');\n\n\t\t\t\tlet debounceTimer;\n\n\t\t\t\tsearchInput.addEventListener('input', (e) => {\n\t\t\t\t\tclearTimeout(debounceTimer);\n\t\t\t\t\tdebounceTimer = setTimeout(() => {\n\t\t\t\t\t\tconst query = e.target.value.trim();\n\n\t\t\t\t\t\tif (query.length < 2) {\n\t\t\t\t\t\t\tsearchResultsDiv.classList.add('hidden');\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Search with fuzzy matching\n\t\t\t\t\t\tconst results = idx.search(query, {\n\t\t\t\t\t\t\tfields: {title: {boost: 10}, content: 1},\n\t\t\t\t\t\t\texpand: true\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\t// Render results\n\t\t\t\t\t\trenderSearchResults(results, query);\n\t\t\t\t\t}, 150);\n\t\t\t\t});\n\n\t\t\t\t// Render search results\n\t\t\t\tfunction renderSearchResults(results, query) {\n\t\t\t\t\tif (results.length === 0) {\n\t\t\t\t\t\tsearchResultsDiv.innerHTML = '<div class=\"text-center py-8 text-text-secondary\">No results found</div>';\n\t\t\t\t\t\tsearchResultsDiv.classList.remove('hidden');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tsearchResultsDiv.innerHTML = results.map(r => {\n\t\t\t\t\t\tconst doc = searchDocs.find(d => d.id === r.ref);\n\t\t\t\t\t\tif (!doc) return '';\n\n\t\t\t\t\t\tconst snippet = getSnippet(doc.content, query);\n\n\t\t\t\t\t\treturn `\n\t\t\t\t\t\t\t<a href=\"${doc.url}\" class=\"block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline\">\n\t\t\t\t\t\t\t\t<div class=\"font-semibold mb-2\">${doc.title}</div>\n\t\t\t\t\t\t\t\t<div class=\"text-sm text-text-secondary\">${snippet}...</div>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t`;\n\t\t\t\t\t}).join('');\n\n\t\t\t\t\tsearchResultsDiv.classList.remove('hidden');\n\t\t\t\t}\n\n\t\t\t\tfunction getSnippet(content, query) {\n\t\t\t\t\tconst words = query.toLowerCase().split(/\\s+/);\n\t\t\t\t\tconst contentLower = content.toLowerCase();\n\n\t\t\t\t\tfor (const word of words) {\n\t\t\t\t\t\tconst idx = contentLower.indexOf(word);\n\t\t\t\t\t\tif (idx !== -1) {\n\t\t\t\t\t\t\tconst start = Math.max(0, idx - 50);\n\t\t\t\t\t\t\tconst end = Math.min(content.length, idx + 100);\n\t\t\t\t\t\t\treturn '...' + content.substring(start, end) + '...';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn content.substring(0, 150) + '...';\n\t\t\t\t}\n\n\t\t\t\t// Close search results when clicking outside\n\t\t\t\tdocument.addEventListener('click', (e) => {\n\t\t\t\t\tif (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {\n\t\t\t\t\t\tsearchResultsDiv.classList.add('hidden');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t// Close search on Escape key\n\t\t\t\tdocument.addEventListener('keydown', (e) => {\n\t\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\t\tsearchResultsDiv.classList.add('hidden');\n\t\t\t\t\t\tsearchInput.blur();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t</script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}