diff --git a/src/components/ThemeToggler.astro b/src/components/ThemeToggler.astro
index 59eccef..d4007d2 100644
--- a/src/components/ThemeToggler.astro
+++ b/src/components/ThemeToggler.astro
@@ -70,37 +70,27 @@
 
 <script>
   // Theme toggling logic
-  document.addEventListener('DOMContentLoaded', () => {
-    const themeToggle = document.getElementById('theme-toggle');
-    
-    // Check for saved theme preference or prefer-color-scheme
-    const getInitialTheme = () => {
-      const savedTheme = localStorage.getItem('theme');
-      if (savedTheme) {
-        return savedTheme === 'light';
-      }
-      // If no saved preference, check system preference
-      return window.matchMedia('(prefers-color-scheme: light)').matches;
-    };
-    
-    // Function to set theme
-    const setTheme = (isLight) => {
-      if (isLight) {
-        document.documentElement.classList.add('light-mode');
-        localStorage.setItem('theme', 'light');
-      } else {
-        document.documentElement.classList.remove('light-mode');
-        localStorage.setItem('theme', 'dark');
-      }
-    };
-    
-    // Apply initial theme
-    setTheme(getInitialTheme());
-    
-    // Theme toggle click handler
-    themeToggle?.addEventListener('click', () => {
-      const isCurrentlyLight = document.documentElement.classList.contains('light-mode');
-      setTheme(!isCurrentlyLight);
-    });
+  // Theme toggling logic - only handles clicks now
+  const themeToggle = document.getElementById('theme-toggle');
+  
+  // Function to set theme class and save preference
+  const setTheme = (isLight) => {
+    if (isLight) {
+      document.documentElement.classList.add('light-mode');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.documentElement.classList.remove('light-mode');
+      localStorage.setItem('theme', 'dark');
+    }
+  };
+
+  // Theme toggle click handler
+  themeToggle?.addEventListener('click', () => {
+    // Check the current state directly when clicked
+    const isCurrentlyLight = document.documentElement.classList.contains('light-mode');
+    // Toggle to the opposite theme
+    setTheme(!isCurrentlyLight);
   });
+  
+  // No initial theme setting here anymore - moved to BaseLayout <head>
 </script>
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 84a8829..8ada813 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -17,6 +17,30 @@ const {
 
 <!DOCTYPE html>
 <html lang="en">
+{/* Inline script to set initial theme and prevent FOUC */}
+  <script is:inline>
+    const getInitialTheme = () => {
+      if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+        return localStorage.getItem('theme');
+      }
+      if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: light)').matches) {
+        return 'light';
+      }
+      return 'dark'; // Default to dark if no preference found
+    };
+
+    const theme = getInitialTheme();
+
+    if (theme === 'light') {
+      document.documentElement.classList.add('light-mode');
+    } else {
+      // No need to add 'dark-mode' class if dark is the default via CSS
+      // document.documentElement.classList.add('dark-mode'); 
+    }
+    
+    // Optional: Set data attribute for easier CSS targeting if needed
+    // document.documentElement.setAttribute('data-theme', theme);
+  </script>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/src/pages/resources/docker-compose.astro b/src/pages/resources/docker-compose.astro
index bb238be..0525ea0 100644
--- a/src/pages/resources/docker-compose.astro
+++ b/src/pages/resources/docker-compose.astro
@@ -1,4 +1,3 @@
----
 // src/pages/resources/docker-compose.astro
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import Header from '../../components/Header.astro';
