diff --git a/pom.xml b/pom.xml
index 2860985..34c61b0 100644
--- a/pom.xml
+++ b/pom.xml
@@ -4,7 +4,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>de.champonthis</groupId>
   <artifactId>abi</artifactId>
-  <version>0.2.3</version>
+  <version>0.2.4</version>
   <name>abi</name>
 
   <parent>
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index b391fd9..c80afbc 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -118,7 +118,13 @@ footer {
 }
 
 [data-bs-theme="dark"] .dark-mode-toggle {
-    color: #dba50e;
+    color: #ab810e;
+    background-color: #adb5bd;
+}
+
+[data-bs-theme="light"] .dark-mode-toggle {
+    color: var(--bs-body-bg);
+    background-color: #495057;
 }
 
 [data-bs-theme="dark"] .btn-outline-dark {
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 3f5af3d..89c9caa 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -1,5 +1,16 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
+<script>
+(() => {
+    const isDark = localStorage.getItem('darkMode') === 'true' || 
+                   (localStorage.getItem('darkMode') === null && 
+                    window.matchMedia('(prefers-color-scheme: dark)').matches);
+    
+    if (isDark) {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+    }
+})();
+</script>
 
 <head>
     <title>20 Jahre Abitur 2007</title>
@@ -430,13 +441,9 @@
 
                 // Initialize dark mode
                 init() {
-                    // Check for saved preference or default to system preference
-                    const savedTheme = localStorage.getItem('darkMode');
-                    if (savedTheme !== null) {
-                        this.darkMode = savedTheme === 'true';
-                    } else {
-                        this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                    }
+                    // Sync with the theme already applied to prevent mismatch
+                    const isDarkApplied = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+                    this.darkMode = isDarkApplied;
 
                     // Listen for system theme changes
                     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
