diff --git a/src/components/Header.astro b/src/components/Header.astro
index ad3ea51..352d007 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -59,3 +59,18 @@
     @apply w-6 h-6 fill-skin-base hover:fill-skin-accent;
   }
 </style>
+
+<script>
+  const themeBtn = document.querySelector("#theme-btn");
+  const htmlClassList = document.querySelector("html")?.classList;
+
+  themeBtn?.addEventListener("click", function () {
+    if (htmlClassList?.contains("theme-dark")) {
+      localStorage.setItem("theme", "light");
+      htmlClassList?.remove("theme-dark");
+    } else {
+      localStorage.setItem("theme", "dark");
+      htmlClassList?.add("theme-dark");
+    }
+  });
+</script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f20f8dd..3d731bc 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -35,8 +35,19 @@ const { title } = Astro.props;
       href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
       rel="stylesheet"
     />
+
+    <script is:inline>
+      // Get theme data from local storage
+      const currentTheme = localStorage.getItem("theme");
+
+      // Set theme to 'theme-dark' if currentTheme is 'dark'
+      const theme = currentTheme === "dark" ? "theme-dark" : "";
+
+      // Put dark class on html tag to enable dark mode
+      document.querySelector("html").className = theme;
+    </script>
   </head>
-  <body>
+  <body class="font-mono bg-skin-fill text-skin-base">
     <slot />
   </body>
 </html>
diff --git a/src/styles/base.css b/src/styles/base.css
index cad8e28..8620e85 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -19,6 +19,14 @@
     --color-card: 63, 75, 90;
     --color-border: 236, 233, 233;
   }
+  #sun-svg,
+  .theme-dark #moon-svg {
+    display: none;
+  }
+  #moon-svg,
+  .theme-dark #sun-svg {
+    display: block;
+  }
 }
 
 @layer components {
