diff --git a/public/index.html b/public/index.html
index 71a3834..2710de2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,15 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/css/style.css">
+  <script>
+    // Prevent theme flicker
+    (function() {
+      const savedTheme = localStorage.getItem('theme');
+      if (savedTheme === 'light') {
+        document.documentElement.classList.add('light-theme');
+      }
+    })();
+  </script>
 </head>
 <body>
   <!-- Animated Background -->
diff --git a/public/js/app.js b/public/js/app.js
index 3d5b17a..3da1588 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -129,6 +129,11 @@
     fetchMetrics();
     fetchNetworkHistory();
     loadSiteSettings();
+
+    // Initial icon check based on early head script
+    const currentTheme = document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
+    updateThemeIcons(currentTheme);
+
     setInterval(fetchMetrics, REFRESH_INTERVAL);
     setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL);
   }
