diff --git a/frontend/index.html b/frontend/index.html
index 676852c..33d48ed 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,108 +1,128 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+        />
+        <title>VibeTorrent</title>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
-  <title>VibeTorrent</title>
+        <!-- PWA & Mobile Capable -->
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="theme-color" content="#111827" />
+        <link rel="manifest" href="manifest.json" />
+        <link rel="apple-touch-icon" href="icon-192.png" />
 
-  <!-- PWA & Mobile Capable -->
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="theme-color" content="#111827" />
-  <link rel="manifest" href="manifest.json" />
-  <link rel="apple-touch-icon" href="icon-192.png" />
+        <!-- Trunk Assets -->
+        <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
+        <link data-trunk rel="css" href="public/tailwind.css" />
+        <link data-trunk rel="copy-file" href="manifest.json" />
+        <link data-trunk rel="copy-file" href="icon-192.png" />
+        <script>
+            (function () {
+                var localTheme = localStorage.getItem("vibetorrent_theme");
+                var t = localTheme || "dark";
+                if (t === "Amoled") t = "black";
+                if (t === "Light") t = "light";
+                if (t === "Dark" || t === "Midnight") t = "dark";
 
-  <!-- Trunk Assets -->
-  <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
-  <link data-trunk rel="css" href="public/tailwind.css" />
-  <link data-trunk rel="copy-file" href="manifest.json" />
-  <link data-trunk rel="copy-file" href="icon-192.png" />
-  <script>
-    (function () {
-      var localTheme = localStorage.getItem("vibetorrent_theme");
-      var t = localTheme || "dark";
-      if (t === "Amoled") t = "black";
-      if (t === "Light") t = "light";
-      if (t === "Dark" || t === "Midnight") t = "dark";
+                var theme = t.toLowerCase();
+                document.documentElement.setAttribute("data-theme", theme);
+                if (!localTheme) {
+                    localStorage.setItem("vibetorrent_theme", "dark");
+                }
 
-      var theme = t.toLowerCase();
-      document.documentElement.setAttribute("data-theme", theme);
-      if (!localTheme) {
-        localStorage.setItem("vibetorrent_theme", "Dark");
-      }
+                var meta = document.querySelector('meta[name="theme-color"]');
+                if (meta) {
+                    var colorMap = {
+                        light: "#ffffff",
+                        cupcake: "#faf7f5",
+                        bumblebee: "#ffffff",
+                        emerald: "#ffffff",
+                        corporate: "#ffffff",
+                        synthwave: "#2d1b69",
+                        retro: "#ece3ca",
+                        cyberpunk: "#ffee00",
+                        valentine: "#f0d6e8",
+                        halloween: "#212121",
+                        garden: "#e9e7e7",
+                        forest: "#171212",
+                        aqua: "#345da7",
+                        lofi: "#ffffff",
+                        pastel: "#ffffff",
+                        fantasy: "#ffffff",
+                        wireframe: "#ffffff",
+                        black: "#000000",
+                        luxury: "#09090b",
+                        dracula: "#282a36",
+                        cmyk: "#ffffff",
+                        autumn: "#8C0327",
+                        business: "#202020",
+                        acid: "#fafafa",
+                        lemonade: "#F1F8E8",
+                        night: "#0f1729",
+                        coffee: "#20161f",
+                        winter: "#ffffff",
+                        dark: "#1d232a",
+                    };
+                    var color = colorMap[theme] || "#1d232a";
+                    meta.setAttribute("content", color);
+                }
+            })();
+        </script>
+    </head>
 
-      var meta = document.querySelector('meta[name="theme-color"]');
-      if (meta) {
-        var colorMap = {
-          "light": "#ffffff",
-          "cupcake": "#faf7f5",
-          "bumblebee": "#ffffff",
-          "emerald": "#ffffff",
-          "corporate": "#ffffff",
-          "synthwave": "#2d1b69",
-          "retro": "#ece3ca",
-          "cyberpunk": "#ffee00",
-          "valentine": "#f0d6e8",
-          "halloween": "#212121",
-          "garden": "#e9e7e7",
-          "forest": "#171212",
-          "aqua": "#345da7",
-          "lofi": "#ffffff",
-          "pastel": "#ffffff",
-          "fantasy": "#ffffff",
-          "wireframe": "#ffffff",
-          "black": "#000000",
-          "luxury": "#09090b",
-          "dracula": "#282a36",
-          "cmyk": "#ffffff",
-          "autumn": "#8C0327",
-          "business": "#202020",
-          "acid": "#fafafa",
-          "lemonade": "#F1F8E8",
-          "night": "#0f1729",
-          "coffee": "#20161f",
-          "winter": "#ffffff",
-          "dark": "#1d232a"
-        };
-        var color = colorMap[theme] || "#1d232a";
-        meta.setAttribute("content", color);
-      }
-    })();
-  </script>
-</head>
+    <body>
+        <div
+            id="app-loading"
+            style="
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100vh;
+            "
+        >
+            <div
+                style="
+                    width: 40px;
+                    height: 40px;
+                    border: 3px solid currentColor;
+                    border-top-color: transparent;
+                    border-radius: 50%;
+                    animation: spin 0.8s linear infinite;
+                    opacity: 0.5;
+                "
+            ></div>
+        </div>
+        <style>
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
 
-<body>
-  <div id="app-loading" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
-    <div
-      style="width: 40px; height: 40px; border: 3px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; opacity: 0.5;">
-    </div>
-  </div>
-  <style>
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    body.app-loaded #app-loading {
-      display: none !important;
-    }
-  </style>
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/sw.js')
-          .then(registration => {
-            console.log('SW registered: ', registration);
-          })
-          .catch(registrationError => {
-            console.log('SW registration failed: ', registrationError);
-          });
-      });
-    }
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+            body.app-loaded #app-loading {
+                display: none !important;
+            }
+        </style>
+        <script>
+            if ("serviceWorker" in navigator) {
+                window.addEventListener("load", () => {
+                    navigator.serviceWorker
+                        .register("/sw.js")
+                        .then((registration) => {
+                            console.log("SW registered: ", registration);
+                        })
+                        .catch((registrationError) => {
+                            console.log(
+                                "SW registration failed: ",
+                                registrationError,
+                            );
+                        });
+                });
+            }
+        </script>
+    </body>
+</html>
diff --git a/frontend/src/components/layout/statusbar.rs b/frontend/src/components/layout/statusbar.rs
index 96f40b5..58a813b 100644
--- a/frontend/src/components/layout/statusbar.rs
+++ b/frontend/src/components/layout/statusbar.rs
@@ -27,18 +27,31 @@ pub fn StatusBar() -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
     let stats = store.global_stats;
 
-    let (current_theme, set_current_theme) = create_signal("light".to_string());
+    let initial_theme = if let Some(win) = web_sys::window() {
+        if let Some(doc) = win.document() {
+            doc.document_element()
+                .and_then(|el| el.get_attribute("data-theme"))
+                .unwrap_or_else(|| "dark".to_string())
+        } else {
+            "dark".to_string()
+        }
+    } else {
+        "dark".to_string()
+    };
+
+    let (current_theme, set_current_theme) = create_signal(initial_theme);
 
     create_effect(move |_| {
         if let Some(win) = web_sys::window() {
             if let Some(storage) = win.local_storage().ok().flatten() {
                 if let Ok(Some(stored_theme)) = storage.get_item("vibetorrent_theme") {
-                    set_current_theme.set(stored_theme.clone());
+                    let theme = stored_theme.to_lowercase();
+                    set_current_theme.set(theme.clone());
                     if let Some(doc) = win.document() {
                         let _ = doc
                             .document_element()
                             .unwrap()
-                            .set_attribute("data-theme", &stored_theme);
+                            .set_attribute("data-theme", &theme);
                     }
                 }
             }
