diff --git a/index.html b/index.html
index 9dbe302..d50e5bb 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,10 @@
 <body>
     <header>
         <div class="logo">FumbleUpon</div>
-        <button id="fumbleButton">Fumble!</button>
+        <div class="header-buttons">
+            <button id="darkModeToggle">🌙</button>
+            <button id="fumbleButton">Fumble!</button>
+        </div>
     </header>
     <main>
         <iframe id="contentFrame" src="about:blank" title="Content"></iframe>
@@ -21,6 +24,23 @@
             // Open wiby.me/surprise directly in the iframe
             frame.src = 'https://wiby.me/surprise/';
         });
+
+        // Dark mode toggle
+        const darkModeToggle = document.getElementById('darkModeToggle');
+        const body = document.body;
+        
+        // Check for saved preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            body.classList.add('dark-mode');
+            darkModeToggle.textContent = '☀️';
+        }
+
+        darkModeToggle.addEventListener('click', () => {
+            body.classList.toggle('dark-mode');
+            const isDark = body.classList.contains('dark-mode');
+            darkModeToggle.textContent = isDark ? '☀️' : '🌙';
+            localStorage.setItem('darkMode', isDark);
+        });
     </script>
 </body>
 </html> 
\ No newline at end of file
diff --git a/styles.css b/styles.css
index c72e423..8b1bbb9 100644
--- a/styles.css
+++ b/styles.css
@@ -60,4 +60,61 @@ main {
     width: 100%;
     height: 100%;
     border: none;
+}
+
+.header-buttons {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+#darkModeToggle {
+    padding: 8px;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+}
+
+#darkModeToggle:hover {
+    transform: scale(1.1);
+}
+
+/* Dark mode styles - simplified to only affect header */
+.dark-mode header {
+    background-color: #1a1a1a;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+}
+
+.dark-mode .logo {
+    color: #ff6b4a;
+}
+
+.dark-mode #fumbleButton {
+    background-color: #ff6b4a;
+}
+
+.dark-mode #fumbleButton:hover {
+    background-color: #ff7c5c;
+}
+
+/* Remove these styles */
+body {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+    /* Remove transition since we're not changing body background */
+}
+
+/* Remove the general dark mode style that was affecting the whole body */
+.dark-mode {
+    /* Remove these styles */
+    /* background-color: #1a1a1a; */
+    /* color: #ffffff; */
 } 
\ No newline at end of file
