diff --git a/.astro/content-assets.mjs b/.astro/content-assets.mjs
index f4a5e5e..99ae6ce 100644
--- a/.astro/content-assets.mjs
+++ b/.astro/content-assets.mjs
@@ -1,10 +1,10 @@
 
+import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_1G57ng from "src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_Z1ESWoO from "src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
 import __ASTRO_IMAGE_IMPORT_rrnp from "src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md";
-import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md";
 import __ASTRO_IMAGE_IMPORT_Zi2DqH from "src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_1OkzEl from "src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
 import __ASTRO_IMAGE_IMPORT_FYQiW from "src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md";
-export default new Map([["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
+export default new Map([["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]);
 		
\ No newline at end of file
diff --git a/src/assets/svg/moon.svg b/src/assets/svg/moon.svg
new file mode 100644
index 0000000..588b57a
--- /dev/null
+++ b/src/assets/svg/moon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#4c4f69" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+</svg>
diff --git a/src/assets/svg/paintbrush.svg b/src/assets/svg/paintbrush.svg
deleted file mode 100644
index a9518d7..0000000
--- a/src/assets/svg/paintbrush.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
-</svg>
diff --git a/src/assets/svg/sun.svg b/src/assets/svg/sun.svg
new file mode 100644
index 0000000..1a161b8
--- /dev/null
+++ b/src/assets/svg/sun.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#cdd6f4" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+</svg>
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index d2544fd..0e2e107 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -1,7 +1,7 @@
 ---
 import Drawer from "./Drawer.astro";
 import Nav from "./Nav.astro";
-import ThemeMenu from "./ThemeMenu.astro";
+import ThemeToggle from "./ThemeToggle.astro";
 ---
 
 <header>
@@ -9,7 +9,7 @@ import ThemeMenu from "./ThemeMenu.astro";
     <a href="/">ghall.space</a>
     <div>
       <Nav />
-      <ThemeMenu />
+      <ThemeToggle />
       <Drawer />
     </div>
   </div>
diff --git a/src/components/Header/ThemeMenu.astro b/src/components/Header/ThemeMenu.astro
deleted file mode 100644
index f1ecd04..0000000
--- a/src/components/Header/ThemeMenu.astro
+++ /dev/null
@@ -1,90 +0,0 @@
----
-import BrushIcon from "../../assets/svg/paintbrush.svg";
----
-
-<div
-  class="container"
-  x-data="{ menuOpen: false }"
-  @keydown.escape="menuOpen = false"
->
-  <button id="theme-button" type="button" @click="menuOpen = ! menuOpen"
-    ><BrushIcon width={24} height={24} /></button
-  >
-  <div class="overlay" @click="menuOpen = !menuOpen" x-show="menuOpen"></div>
-  <div
-    class="theme-menu"
-    x-show="menuOpen"
-    x-transition:enter-start="hidden-menu"
-    x-transition:enter-end="visible-menu"
-    x-transition:leave-start="visible-menu"
-    x-transition:leave-end="hidden-menu"
-  >
-    <legend>Select a theme:</legend>
-    <div>
-      <input
-        type="radio"
-        id="system"
-        name="theme"
-        value="system"
-        x-model="theme"
-      />
-      <label for="system">System</label>
-
-      <input
-        type="radio"
-        id="light"
-        name="theme"
-        value="light"
-        x-model="theme"
-      />
-      <label for="light">Light</label>
-
-      <input type="radio" id="dark" name="theme" value="dark" x-model="theme" />
-      <label for="dark">Dark</label>
-    </div>
-  </div>
-</div>
-
-<style>
-  .container {
-    display: inline;
-  }
-
-  .overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 2;
-  }
-
-  .theme-menu {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background-color: var(--background);
-    padding: 20px;
-    width: 300px;
-    z-index: 4;
-    border: var(--border);
-    transition: var(--transition);
-  }
-
-  .hidden-menu {
-    opacity: 0;
-    scale: 0.9;
-  }
-
-  #theme-button {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    color: var(--text);
-  }
-
-  #theme-button:hover {
-    opacity: 0.75;
-  }
-</style>
diff --git a/src/components/Header/ThemeToggle.astro b/src/components/Header/ThemeToggle.astro
new file mode 100644
index 0000000..6b1e159
--- /dev/null
+++ b/src/components/Header/ThemeToggle.astro
@@ -0,0 +1,28 @@
+---
+import BrushIcon from "../../assets/svg/paintbrush.svg";
+---
+
+<input type="checkbox" x-model="darkMode" />
+
+<style>
+  input {
+    appearance: none;
+    height: 24px;
+    width: 24px;
+    background-image: url(../../assets/svg/moon.svg);
+    background-size: 24px;
+    padding: 10px;
+    border-radius: 100%;
+    transition: var(--transition);
+    transform: rotate(0deg) translateY(-2px);
+  }
+
+  input:hover {
+    opacity: 0.7;
+  }
+
+  input:checked {
+    background-image: url(../../assets/svg/sun.svg);
+    transform: rotate(180deg) translateY(2px);
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 94159a6..c2fade5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -37,16 +37,9 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || "Unknown";
     class="layout-simple"
     x-data="{
       drawerOpen: false,
-      theme: $persist('system'),
-      isDark() {
-        const osIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-        if (this.theme === 'dark' || this.theme === 'system' && osIsDark) return true;
-
-        return false;
-      }
+      darkMode: $persist(false)
     }"
-    :class="{ 'lock-scroll': drawerOpen, 'theme-dark': isDark()}"
+    :class="{ 'lock-scroll': drawerOpen, 'theme-dark': darkMode}"
   >
     <Header />
     <main transition:animate="initial">