diff --git a/templates/docs.templ b/templates/docs.templ
index 49f5fa7..ecece5d 100644
--- a/templates/docs.templ
+++ b/templates/docs.templ
@@ -37,48 +37,6 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 					}
 				}
 			</script>
-			<style>
-				/* Only custom CSS for dynamic values and theming */
-				.sidebar {
-					transition: transform 0.3s ease-in-out;
-				}
-				
-				/* Smooth scroll behavior */
-				html {
-					scroll-behavior: smooth;
-				}
-				
-				/* Custom scrollbar */
-				::-webkit-scrollbar {
-					width: 8px;
-					height: 8px;
-				}
-				::-webkit-scrollbar-track {
-					background: #1a1b26;
-				}
-				::-webkit-scrollbar-thumb {
-					background: #414868;
-					border-radius: 4px;
-				}
-				::-webkit-scrollbar-thumb:hover {
-					background: #7aa2f7;
-				}
-
-				/* Search results overlay animation */
-				#search-results {
-					transition: opacity 0.2s ease-in-out;
-				}
-
-				/* Mobile responsive sidebar */
-				@media (max-width: 768px) {
-					.sidebar {
-						transform: translateX(-100%);
-					}
-					.sidebar.open {
-						transform: translateX(0);
-					}
-				}
-			</style>
 		</head>
 		<body class="bg-background-primary text-text-primary font-sans antialiased">
 			<!-- Mobile Menu Button -->
@@ -93,10 +51,10 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 			</button>
 
 			<!-- Search Results Overlay -->
-			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8"></div>
+			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out"></div>
 
 			<!-- Sidebar -->
-			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0">
+			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out">
 				<!-- Search -->
 				<div class="p-4 border-b border-border">
 					<input 
@@ -366,57 +324,6 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 					}
 				}
 			</script>
-			<style>
-				/* Only custom CSS for dynamic values and theming */
-				.sidebar {
-					transition: transform 0.3s ease-in-out;
-				}
-				
-				/* Smooth scroll behavior */
-				html {
-					scroll-behavior: smooth;
-				}
-				
-				/* Custom scrollbar */
-				::-webkit-scrollbar {
-					width: 8px;
-					height: 8px;
-				}
-				::-webkit-scrollbar-track {
-					background: #1a1b26;
-				}
-				::-webkit-scrollbar-thumb {
-					background: #414868;
-					border-radius: 4px;
-				}
-				::-webkit-scrollbar-thumb:hover {
-					background: #7aa2f7;
-				}
-
-				/* Search results overlay animation */
-				#search-results {
-					transition: opacity 0.2s ease-in-out;
-				}
-
-				/* Mobile responsive sidebar */
-				@media (max-width: 1024px) {
-					.sidebar {
-						transform: translateX(-100%);
-					}
-					.sidebar.open {
-						transform: translateX(0);
-					}
-				}
-
-				/* Mobile TOC */
-				@media (max-width: 768px) {
-					.toc {
-						position: static;
-						margin-bottom: 1rem;
-						padding: 1rem;
-					}
-				}
-			</style>
 		</head>
 		<body class="bg-background-primary text-text-primary font-sans antialiased">
 			<!-- Mobile Menu Button -->
@@ -431,10 +338,10 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 			</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>
+			<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-4 lg:p-8 transition-opacity duration-200 ease-in-out"></div>
 
 			<!-- Sidebar -->
-			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0">
+			<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto z-40 lg:translate-x-0 transition-transform duration-300 ease-in-out">
 				<!-- Search -->
 				<div class="p-4 border-b border-border">
 					<input 
