diff --git a/astro.config.mjs b/astro.config.mjs
index 4a8064d..8c22eb0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -82,5 +82,16 @@ export default defineConfig({
   },
   devToolbar: {
     enabled: false
-  }
+  },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `
+            @use "astro-color-mode/use-color-mode.scss" as *;
+          `,
+        },
+      },
+    },
+  },
 });
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index 6434efc..c33cc60 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index c7c8d17..d2b2050 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@minpluto/zorn": "^0.4.5",
     "astro": "^4.14.5",
     "astro-auto-import": "^0.4.2",
+    "astro-color-mode": "^0.7.1",
     "astro-json-element": "^1.1.4",
     "astro-robots-txt": "^1.0.0",
     "astro-tooltips": "^0.6.2",
diff --git a/src/components/global/Head.astro b/src/components/global/Head.astro
index 18dc77a..3278ba3 100644
--- a/src/components/global/Head.astro
+++ b/src/components/global/Head.astro
@@ -2,6 +2,7 @@
 const { Title, Description } = Astro.props;
 import { ViewTransitions } from 'astro:transitions';
 import { Tooltips } from 'astro-tooltips';
+import { ColorMode } from 'astro-color-mode';
 ---
 
 <head>
@@ -39,4 +40,7 @@ import { Tooltips } from 'astro-tooltips';
 
   <!-- Tooltip -->
   <Tooltips interactive={false} delay={[15, 14000]} />
+
+  <!-- Color Mode -->
+   <ColorMode/>
 </head>
diff --git a/src/components/global/Header.astro b/src/components/global/Header.astro
index 4ba061e..eb9225f 100644
--- a/src/components/global/Header.astro
+++ b/src/components/global/Header.astro
@@ -22,7 +22,9 @@ import SudoVanilla from "@components/global/SudoVanillaLogo.astro";
 
 // Icons
 import {
-  MenuScale
+HalfMoon,
+  MenuScale,
+SunLight
 } from '@iconoir/vue'
 
 ---
@@ -58,6 +60,10 @@ import {
         </noscript>
 
         <a title={StatusText} class="header-link-item" href="https://status.sudovanilla.org/">Status</a>
+        
+        <button id="toggle-da-theme" data-color-mode-switch style="display: none;"></button>
+        <button onclick="document.querySelector('#toggle-da-theme').click()" data-color-mode-switch class="theme-toggle-button theme-is-light"><SunLight/></button>
+        <button onclick="document.querySelector('#toggle-da-theme').click()" data-color-mode-switch class="theme-toggle-button theme-is-dark"><HalfMoon/></button>
       </div>
     </div>
     {
@@ -101,9 +107,9 @@ import {
             function () {
               if (window.scrollY > 50) {
                 document.querySelector(".header-row-bottom").style.position = "fixed";
-                document.querySelector(".header-row-bottom").style.boxShadow = "0px -40px 19px 20px black";
+                document.querySelector(".header-row-bottom").style.boxShadow = "0px -40px 19px 20px var(--box-shadow-color)";
                 document.getElementById("show-w-scroll").style.opacity = "1";
-                document.getElementById("show-w-scroll").style.width = "96px";
+                document.getElementById("show-w-scroll").style.width = "100px";
               } else {
                 document.querySelector(".header-row-bottom").style.position = "inherit";
                 document.querySelector(".header-row-bottom").style.boxShadow = "none";
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ddc9a26..a1ecbe4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -56,9 +56,7 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
       Title="Ennie and Yoyki: Non-Girly Games"
       Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
       Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
-      CustomControlsWithMenu
       Milieu
-      SettingsMenu
     ></Zorn>
     </LargeCard>
     <LargeCard
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 483edbc..96160f7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -98,4 +98,78 @@ a {
     margin-top: 151px;
     max-width: 1200px;
     width: 100%;
+}
+
+.theme-toggle-button {
+    color: gray;
+    background: transparent;
+    border: none;
+}
+
+:is(body) {
+    @include color-mode(light) {
+      color: black !important;
+      background-color: white !important;
+      :root {
+        --box-shadow-color: white;
+      }
+      .theme-is-light {display: inherit}
+      .theme-is-dark {display: none}
+      .service-links a {
+        color: black !important;
+      }
+      header {
+        a {
+            color: black !important;
+        }
+        .sudovanilla-logo img {
+            filter: invert(1);
+        }
+      }
+      .large-card {
+        a {
+            background: rgb(234, 234, 234) !important;
+            color: black !important;
+        }
+      }
+      .sidebar {
+        * {
+            color: black !important;
+        }
+      }
+    }
+    @include color-mode(dark) {
+      color: white !important;
+      background-color: black !important;
+      :root {
+        --box-shadow-color: black;
+      }
+      .theme-is-light {display: none}
+      .theme-is-dark {display: inherit}
+      .service-links a {
+        color: white !important;
+      }
+      header {
+        .header-row-bottom {
+            backdrop-filter: blur(24px) brightness(0.7);
+        }
+        a {
+            color: white !important;
+        }
+        .sudovanilla-logo img {
+            filter: invert(0);
+        }
+      }
+      .large-card {
+          a {
+              background: transparent !important;
+              color: white !important;
+          }
+      }
+      .sidebar {
+        * {
+            color: white !important;
+        }
+      }
+    }
 }
\ No newline at end of file
