diff --git a/templates/header.templ b/templates/header.templ
index a1b05c7..4c2a79c 100644
--- a/templates/header.templ
+++ b/templates/header.templ
@@ -41,90 +41,101 @@ templ Header(user User, currentPath string) {
 					</div>
 				</div>
 				<!-- Right: Theme Switcher & User Menu -->
-				<div class="flex items-center space-x-4">
+				<div x-data="{ themeDropdownOpen: false, userMenuOpen: false }" class="flex items-center space-x-4">
 					<!-- Theme Switcher -->
 					<div class="relative">
-						<button @click="toggleThemeDropdown()" class="p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
+						<button @click="themeDropdownOpen = !themeDropdownOpen"
+										class="p-2 rounded-lg hover:bg-gray-700 transition-colors"
+										style="background-color: var(--bg-primary);">
 							<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
 							</svg>
 						</button>
-						<div id="theme-dropdown" class="hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
+						<div x-show="themeDropdownOpen"
+								 @click.outside="themeDropdownOpen = false"
+								 x-transition:enter="transition ease-out duration-200"
+								 x-transition:enter-start="opacity-0 scale-95"
+								 x-transition:enter-end="opacity-100 scale-100"
+								 x-transition:leave="transition ease-in duration-150"
+								 x-transition:leave-start="opacity-100 scale-100"
+								 x-transition:leave-end="opacity-0 scale-95"
+								 class="absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50"
+								 style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;">
 							<div class="p-4">
 								<h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">Select Theme</h3>
 								<div class="space-y-2">
-									<button @click="changeThemeTo('tokyo-night')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+									<button @click="header.changeThemeTo('tokyo-night'); themeDropdownOpen = false"
+													class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+													style="color: var(--text-primary); background-color: var(--bg-primary);">
 										<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #7aa2f7;"></span>
 										Tokyo Night
 									</button>
-									<button @click="changeThemeTo('dracula')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+									<button @click="header.changeThemeTo('dracula'); themeDropdownOpen = false"
+													class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+													style="color: var(--text-primary); background-color: var(--bg-primary);">
 										<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #bd93f9;"></span>
 										Dracula
 									</button>
-									<button @click="changeThemeTo('nord')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+									<button @click="header.changeThemeTo('nord'); themeDropdownOpen = false"
+													class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+													style="color: var(--text-primary); background-color: var(--bg-primary);">
 										<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #88c0d0;"></span>
 										Nord
 									</button>
-									<button @click="changeThemeTo('solarized-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+									<button @click="header.changeThemeTo('solarized-dark'); themeDropdownOpen = false"
+													class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+													style="color: var(--text-primary); background-color: var(--bg-primary);">
 										<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #2aa198;"></span>
 										Solarized Dark
 									</button>
-									<button @click="changeThemeTo('monokai')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+									<button @click="header.changeThemeTo('monokai'); themeDropdownOpen = false"
+													class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+													style="color: var(--text-primary); background-color: var(--bg-primary);">
 										<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #a6e22e;"></span>
 										Monokai
 									</button>
-									<button @click="changeThemeTo('one-dark-pro')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+									<button @click="header.changeThemeTo('one-dark-pro'); themeDropdownOpen = false"
+													class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+													style="color: var(--text-primary); background-color: var(--bg-primary);">
 										<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #61dafb;"></span>
 										One Dark Pro
 									</button>
-									<button @click="changeThemeTo('material-dark')" class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity" style="color: var(--text-primary); background-color: var(--bg-primary);">
+									<button @click="header.changeThemeTo('material-dark'); themeDropdownOpen = false"
+													class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+													style="color: var(--text-primary); background-color: var(--bg-primary);">
 										<span class="inline-block w-4 h-4 rounded mr-2" style="background-color: #80cbc4;"></span>
 										Material Dark
 									</button>
 									<div class="border-t pt-2 mt-2" style="border-color: var(--border);">
 										<p class="text-xs mb-2" style="color: var(--text-secondary)">Bookshelf Background</p>
-										<button
-											@click="changeWoodPaneling('none')"
-											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
-											style="color: var(--text-primary);"
-											data-wood="none"
-										>
+										<button @click="woodPaneling.change('none'); themeDropdownOpen = false"
+														class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+														style="color: var(--text-primary);"
+														data-wood="none">
 											None
 										</button>
-										<button
-											@click="changeWoodPaneling('wood-light')"
-											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
-											style="color: var(--text-primary);"
-											data-wood="wood-light"
-										>
-											<span
-												class="inline-block w-4 h-4 rounded mr-2"
-												style="background: url('/static/textures/wood-light.png'); background-size: cover;"
-											></span>
+										<button @click="woodPaneling.change('wood-light'); themeDropdownOpen = false"
+														class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+														style="color: var(--text-primary);"
+														data-wood="wood-light">
+											<span class="inline-block w-4 h-4 rounded mr-2"
+														style="background: url('/static/textures/wood-light.png'); background-size: cover;"></span>
 											Wood Light
 										</button>
-										<button
-											@click="changeWoodPaneling('wood-dark')"
-											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
-											style="color: var(--text-primary);"
-											data-wood="wood-dark"
-										>
-											<span
-												class="inline-block w-4 h-4 rounded mr-2"
-												style="background: url('/static/textures/wood-dark.png'); background-size: cover;"
-											></span>
+										<button @click="woodPaneling.change('wood-dark'); themeDropdownOpen = false"
+														class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+														style="color: var(--text-primary);"
+														data-wood="wood-dark">
+											<span class="inline-block w-4 h-4 rounded mr-2"
+														style="background: url('/static/textures/wood-dark.png'); background-size: cover;"></span>
 											Wood Dark
 										</button>
-										<button
-											@click="changeWoodPaneling('wood-mahogany')"
-											class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
-											style="color: var(--text-primary);"
-											data-wood="wood-mahogany"
-										>
-											<span
-												class="inline-block w-4 h-4 rounded mr-2"
-												style="background: url('/static/textures/wood-mahogany.png'); background-size: cover;"
-											></span>
+										<button @click="woodPaneling.change('wood-mahogany'); themeDropdownOpen = false"
+														class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
+														style="color: var(--text-primary);"
+														data-wood="wood-mahogany">
+											<span class="inline-block w-4 h-4 rounded mr-2"
+														style="background: url('/static/textures/wood-mahogany.png'); background-size: cover;"></span>
 											Wood Mahogany
 										</button>
 									</div>
@@ -136,13 +147,19 @@ templ Header(user User, currentPath string) {
 					<div class="relative">
 						if user.ID != "" {
 							<!-- LOGGED IN: Show user menu with logout -->
-							<button @click="toggleUserMenu()" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
+							<button @click="userMenuOpen = !userMenuOpen"
+											class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors"
+											style="background-color: var(--bg-primary);">
 								<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
 								</svg>
 								<span class="text-sm hidden sm:block" style="color: var(--text-primary)">{ user.Username }</span>
 							</button>
-							<div id="user-menu" class="hidden absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
+							<div x-show="userMenuOpen"
+									 @click.outside="userMenuOpen = false"
+									 x-transition
+									 class="absolute right-0 mt-2 w-48 rounded-lg shadow-lg z-50"
+									 style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;">
 								<div class="py-1">
 									<a href="/profile" class="block px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary); text-decoration: none;">
 										Profile
@@ -153,20 +170,28 @@ templ Header(user User, currentPath string) {
 										</a>
 									}
 									<div class="border-t my-1" style="border-color: var(--border);"></div>
-									<button @click="logout()" class="block w-full text-left px-4 py-2 text-sm hover:opacity-80" style="color: var(--text-primary); background-color: var(--bg-secondary);">
+									<button @click="header.logout(); userMenuOpen = false"
+													class="block w-full text-left px-4 py-2 text-sm hover:opacity-80"
+													style="color: var(--text-primary); background-color: var(--bg-secondary);">
 										Logout
 									</button>
 								</div>
 							</div>
 						} else {
 							<!-- LOGGED OUT: Show login form -->
-							<button @click="toggleUserMenu()" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors" style="background-color: var(--bg-primary);">
+							<button @click="userMenuOpen = !userMenuOpen"
+											class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700 transition-colors"
+											style="background-color: var(--bg-primary);">
 								<svg class="h-6 w-6" style="color: var(--text-primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
 								</svg>
 								<span class="text-sm hidden sm:block" style="color: var(--text-primary)">Login</span>
 							</button>
-							<div id="user-menu" class="hidden absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50 p-4" style="background-color: var(--bg-secondary); border: 1px solid var(--border);">
+							<div x-show="userMenuOpen"
+									 @click.outside="userMenuOpen = false"
+									 x-transition
+									 class="absolute right-0 mt-2 w-64 rounded-lg shadow-lg z-50 p-4"
+									 style="background-color: var(--bg-secondary); border: 1px solid var(--border); display: none;">
 								<form hx-post="/api/auth/login" hx-target="#login-result" hx-swap="innerHTML" class="space-y-3">
 									<input type="hidden" name="redirect" value="{ currentPath }"/>
 									<div>
diff --git a/web/src/header.ts b/web/src/header.ts
index 6134f01..0f72143 100644
--- a/web/src/header.ts
+++ b/web/src/header.ts
@@ -4,32 +4,6 @@ import { Alpine } from "./alpine";
 import { applyTheme } from "./theme";
 import { updateThemeIndicators } from "./themeDropdown";
 
-const toggleThemeDropdown = (): void => {
-  const dropdown = document.getElementById("theme-dropdown");
-  if (dropdown) {
-    dropdown.classList.toggle("hidden");
-
-    // Close user menu if open
-    const userMenu = document.getElementById("user-menu");
-    if (userMenu && !dropdown.classList.contains("hidden")) {
-      userMenu.classList.add("hidden");
-    }
-  }
-};
-
-const toggleUserMenu = (): void => {
-  const menu = document.getElementById("user-menu");
-  if (menu) {
-    menu.classList.toggle("hidden");
-
-    // Close theme dropdown if open
-    const themeDropdown = document.getElementById("theme-dropdown");
-    if (themeDropdown && !menu.classList.contains("hidden")) {
-      themeDropdown.classList.add("hidden");
-    }
-  }
-};
-
 const changeThemeTo = (theme: string): void => {
   // Apply the theme using the consolidated function from theme.ts
   applyTheme(theme);
@@ -47,11 +21,7 @@ const changeThemeTo = (theme: string): void => {
     }).catch((err) => console.log("Theme save failed", err));
   }
 
-  // Close dropdown
-  const dropdown = document.getElementById("theme-dropdown");
-  if (dropdown) {
-    dropdown.classList.add("hidden");
-  }
+  // Alpine closes dropdown automatically via template state
 };
 
 const logout = (): void => {
@@ -60,41 +30,12 @@ const logout = (): void => {
   window.location.href = "/";
 };
 
-// Close dropdowns when clicking outside
-document.addEventListener("click", (e) => {
-  const target = e.target as HTMLElement;
-  const themeDropdown = document.getElementById("theme-dropdown");
-  const userMenu = document.getElementById("user-menu");
-  const themeButton = target?.closest(
-    'button[onclick="toggleThemeDropdown()"]',
-  );
-  const userButton = target?.closest('button[onclick="toggleUserMenu()"]');
-
-  if (
-    !themeButton &&
-    themeDropdown &&
-    !themeDropdown.classList.contains("hidden")
-  ) {
-    if (!themeDropdown.contains(target)) {
-      themeDropdown.classList.add("hidden");
-    }
-  }
-
-  if (!userButton && userMenu && !userMenu.classList.contains("hidden")) {
-    if (!userMenu.contains(target)) {
-      userMenu.classList.add("hidden");
-    }
-  }
-});
-
-export { toggleThemeDropdown, toggleUserMenu, changeThemeTo, logout };
+export { changeThemeTo, logout };
 
 Alpine.global("header", {
   logout,
-  toggleThemeDropdown,
-  toggleUserMenu,
   changeThemeTo: (theme: string) => {
     changeThemeTo(theme);
-    updateThemeIndicators(); // Call themeDropdown function
+    updateThemeIndicators();
   },
 });
diff --git a/web/src/themeDropdown.ts b/web/src/themeDropdown.ts
index b927e0c..1b8e586 100644
--- a/web/src/themeDropdown.ts
+++ b/web/src/themeDropdown.ts
@@ -1,61 +1,27 @@
 // Theme dropdown active indicator management
 
 import { Alpine } from "./alpine";
-import { changeThemeTo, toggleThemeDropdown as originalToggle } from "./header";
 import { updateWoodPanelingIndicators } from "./woodPaneling";
 
 // Update visual indicators for theme buttons
+// Note: With Alpine.js, most theme state is handled reactively in the template
+// This function primarily ensures wood paneling indicators are updated
 const updateThemeIndicators = (): void => {
-  const currentTheme = localStorage.getItem("theme") || "tokyo-night";
-
-  // Update theme buttons (all buttons with changeThemeTo onclick)
-  document.querySelectorAll('[onclick^="changeThemeTo"]').forEach((btn) => {
-    const onclick = btn.getAttribute("onclick") || "";
-    const match = onclick.match(/changeThemeTo\('(.+?)'\)/);
-    if (match) {
-      const theme = match[1];
-      if (theme === currentTheme) {
-        // Active state - use CSS class instead of inline style
-        btn.classList.add("bg-theme-active");
-        btn.classList.remove("bg-theme-inactive");
-      } else {
-        // Inactive state
-        btn.classList.remove("bg-theme-active");
-        btn.classList.add("bg-theme-inactive");
-      }
-    }
-  });
-};
-
-// Update on dropdown toggle
-export function initializeThemeDropdown() {
-  // Call original function
-  originalToggle();
-  // Then update indicators
-  updateThemeIndicators();
   updateWoodPanelingIndicators();
-}
-
-// Update after theme changes
-export function initializeChangeThemeTo(theme: string): void {
-  // Call original function from header.ts
-  changeThemeTo(theme);
-  // Then update indicators
-  updateThemeIndicators();
-}
+};
 
 // Auto-initialize when DOM is ready
 if (typeof document !== "undefined") {
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", updateThemeIndicators);
+    document.addEventListener("DOMContentLoaded", () => {
+      updateThemeIndicators();
+    });
   } else {
     updateThemeIndicators();
   }
 }
 
 Alpine.global("themeDropdown", {
-  initializeDropdown: initializeThemeDropdown,
-  changeTheme: initializeChangeThemeTo,
   updateIndicators: updateThemeIndicators,
 });
 
diff --git a/web/src/woodPaneling.ts b/web/src/woodPaneling.ts
index ac7c8d6..aef0356 100644
--- a/web/src/woodPaneling.ts
+++ b/web/src/woodPaneling.ts
@@ -1,5 +1,7 @@
 // Wood paneling management functionality
 
+import { Alpine } from "./alpine";
+
 type WoodPanelingType = "none" | "wood-light" | "wood-dark" | "wood-mahogany";
 
 const WOOD_STORAGE_KEY = "wood-paneling";
@@ -55,11 +57,7 @@ const changeWoodPaneling = (paneling: WoodPanelingType): void => {
   // Update active indicators
   updateWoodPanelingIndicators();
 
-  // Close dropdown
-  const dropdown = document.getElementById("theme-dropdown");
-  if (dropdown) {
-    dropdown.classList.add("hidden");
-  }
+  // Alpine closes dropdown automatically via template state
 };
 
 // Update visual indicators for wood paneling buttons
@@ -83,6 +81,11 @@ const updateWoodPanelingIndicators = (): void => {
 
 export { changeWoodPaneling, loadWoodPaneling, updateWoodPanelingIndicators };
 
+// Register with Alpine for template access
+Alpine.global("woodPaneling", {
+  change: changeWoodPaneling,
+});
+
 // Auto-initialize when DOM is ready
 if (typeof document !== "undefined") {
   if (document.readyState === "loading") {