diff --git a/app/web/src/App.svelte b/app/web/src/App.svelte
index 768fda0..b07849d 100644
--- a/app/web/src/App.svelte
+++ b/app/web/src/App.svelte
@@ -818,13 +818,19 @@
         ? escapeHtml(userProfile.about).replace(/\n{2,}/g, "<br>")
         : "";
 
-    // Load theme preference from localStorage on component initialization
-    if (typeof localStorage !== "undefined") {
-        const savedTheme = localStorage.getItem("isDarkTheme");
-        if (savedTheme !== null) {
-            isDarkTheme = JSON.parse(savedTheme);
-        }
+    // Detect system theme preference and listen for changes
+    if (typeof window !== "undefined" && window.matchMedia) {
+        const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        isDarkTheme = darkModeQuery.matches;
 
+        // Listen for system theme changes
+        darkModeQuery.addEventListener("change", (e) => {
+            isDarkTheme = e.matches;
+        });
+    }
+
+    // Load state from localStorage
+    if (typeof localStorage !== "undefined") {
         // Check for existing authentication
         const storedAuthMethod = localStorage.getItem("nostr_auth_method");
         const storedPubkey = localStorage.getItem("nostr_pubkey");
@@ -1717,14 +1723,6 @@
         savePersistentState();
     }
 
-    function toggleTheme() {
-        isDarkTheme = !isDarkTheme;
-        // Save theme preference to localStorage
-        if (typeof localStorage !== "undefined") {
-            localStorage.setItem("isDarkTheme", JSON.stringify(isDarkTheme));
-        }
-    }
-
     function openLoginModal() {
         if (!isLoggedIn) {
             showLoginModal = true;
@@ -2726,7 +2724,6 @@
     {currentEffectiveRole}
     {userProfile}
     {userPubkey}
-    on:toggleTheme={toggleTheme}
     on:openSettingsDrawer={openSettingsDrawer}
     on:openLoginModal={openLoginModal}
 />
diff --git a/app/web/src/Header.svelte b/app/web/src/Header.svelte
index fd07fe0..3add844 100644
--- a/app/web/src/Header.svelte
+++ b/app/web/src/Header.svelte
@@ -10,10 +10,6 @@
     import { createEventDispatcher } from "svelte";
     const dispatch = createEventDispatcher();
 
-    function toggleTheme() {
-        dispatch("toggleTheme");
-    }
-
     function openSettingsDrawer() {
         dispatch("openSettingsDrawer");
     }
@@ -37,9 +33,6 @@
             </span>
         </div>
         <div class="header-buttons">
-            <button class="theme-toggle-btn" on:click={toggleTheme}>
-                {isDarkTheme ? "☀️" : "🌙"}
-            </button>
             {#if isLoggedIn}
                 <button class="user-profile-btn" on:click={openSettingsDrawer}>
                     {#if userProfile?.picture}
@@ -126,7 +119,6 @@
         margin-left: auto;
     }
 
-    .theme-toggle-btn,
     .login-btn,
     .user-profile-btn {
         background: transparent;
@@ -144,7 +136,6 @@
         justify-content: center;
     }
 
-    .theme-toggle-btn:hover,
     .login-btn:hover,
     .user-profile-btn:hover {
         background: var(--card-bg);
diff --git a/pkg/version/version b/pkg/version/version
index 6b8706c..a34a479 100644
--- a/pkg/version/version
+++ b/pkg/version/version
@@ -1 +1 @@
-v0.36.3
+v0.36.4