diff --git a/css/style.css b/css/style.css
index 18f4230..a3847b7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -15,6 +15,20 @@
     --border: #1f2a44;
 }
 
+/* Light Mode */
+.light-mode {
+    --bg: #f8fafc;
+    --surface: #ffffff;
+    --surface-light: #e2e8f0;
+
+    --primary: #16a34a;
+    --accent: #2563eb;
+
+    --text: #1e293b;
+    --muted: #64748b;
+
+    --border: #cbd5e1;
+}
 /* =========================
    GLOBAL RESET
 ========================= */
@@ -70,6 +84,15 @@ nav a:hover {
     color: #0b1220;
     transform: translateY(-2px);
 }
+/* =========================
+   Bottom light Version
+========================= */
+.theme-switch-container {
+    position: fixed;
+    top: 80px;
+    right: 20px;
+    z-index: 1100;
+}
 
 /* =========================
    MAIN LAYOUT
diff --git a/eis_projekt.html b/eis_projekt.html
index f8f86cc..a822ecb 100644
--- a/eis_projekt.html
+++ b/eis_projekt.html
@@ -46,6 +46,10 @@
     </nav>
 </header>
 
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main>
     <h1>Sneaky Snack Snakes</h1>
 
diff --git a/impressum.html b/impressum.html
index c922973..b01c2d2 100644
--- a/impressum.html
+++ b/impressum.html
@@ -23,6 +23,10 @@
     </nav>
 </header>
 
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main class="impressum">
 
     <h1>Impressum</h1>
diff --git a/index.html b/index.html
index c98b659..fc68ef1 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,10 @@
     </nav>
 </header>
 
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main>
     <h1>Sneaky Snack Snakes</h1>
 	<img src="img/Sneaky_Snack_Snakes.png" alt="Sneaky Snack Snakes">
diff --git a/js/script.js b/js/script.js
index df418f7..ab9dcba 100644
--- a/js/script.js
+++ b/js/script.js
@@ -70,4 +70,28 @@ function startNotenrechner() {
 
     ausgabe.textContent =
         `${punkte} von ${max} Punkten (${prozent} %) = ${berechneNote(prozent)}`;
-}
\ No newline at end of file
+}
+// Light-/Dark-Mode
+
+document.addEventListener("DOMContentLoaded", () => {
+    const themeButton = document.getElementById("theme-toggle");
+
+    if (!themeButton) return;
+
+    if (localStorage.getItem("theme") === "light") {
+        document.body.classList.add("light-mode");
+        themeButton.textContent = "🌙 Dark Mode";
+    }
+
+    themeButton.addEventListener("click", () => {
+        document.body.classList.toggle("light-mode");
+
+        if (document.body.classList.contains("light-mode")) {
+            localStorage.setItem("theme", "light");
+            themeButton.textContent = "🌙 Dark Mode";
+        } else {
+            localStorage.setItem("theme", "dark");
+            themeButton.textContent = "☀️ Light Mode";
+        }
+    });
+});
\ No newline at end of file
diff --git a/kontakt.html b/kontakt.html
index f60d9d9..af0a3f5 100644
--- a/kontakt.html
+++ b/kontakt.html
@@ -13,6 +13,11 @@
 		<a href="impressum.html">Impressum</a>
 	</nav>
 </header>
+
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main> 
 <h1>Sneaky Snack Snakes</h1>
 <p>Hier wird demnächst ein Kontaktformular eingefügt</p>
diff --git a/notenrechner.html b/notenrechner.html
index 330dddd..8bc5278 100644
--- a/notenrechner.html
+++ b/notenrechner.html
@@ -17,6 +17,11 @@
         <a href="impressum.html">Impressum</a>
     </nav>
 </header>
+
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main>
     <section id="notenrechner">
 
diff --git a/ueber_uns.html b/ueber_uns.html
index 0403e88..1689d07 100644
--- a/ueber_uns.html
+++ b/ueber_uns.html
@@ -13,6 +13,11 @@
 		<a href="impressum.html">Impressum</a>
 	</nav>
 </header>
+
+<div class="theme-switch-container">
+    <button id="theme-toggle">☀️ Light Mode</button>
+</div>
+
 <main> 
     <h1>Über uns</h1>