diff --git a/frontend/index.html b/frontend/index.html
index 1f9b76f..66d0332 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,12 +1,12 @@
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>aramjonghu-site</title>
-  </head>
-  <body class="bg-ctp-base">
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>aramjonghu-site</title>
+    </head>
+    <body class="bg-ctp-base">
+        <div id="root"></div>
+        <script type="module" src="/src/main.jsx"></script>
+    </body>
 </html>
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index a8742d2..a574bb0 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -9,7 +9,7 @@ export default function Footer() {
     };
 
     return (
-        <footer className="flex items-center justify-between px-24 py-6 border-t border-ctp-lavender-800 mt-10">
+        <footer className="bg-ctp-mantle flex items-center justify-between px-24 py-6 border-t border-ctp-lavender-800 mt-10">
             <p className="text-sm text-ctp-text">
                 &copy; {currentYear} AramJonghu. All rights reserved.
             </p>
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 7a31cd3..9ae11e4 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -1,27 +1,14 @@
 import Aku from "../assets/images/aku.png";
 
-export default function Header() {
+export default function Header({ theme }) {
+    const { theme: currentTheme, toggleTheme } = theme;
+
     const navItems = [
-        {
-            label: "Nextcloud",
-            url: "https://aramjonghu.nl/nextcloud",
-        },
-        {
-            label: "Navidrome",
-            url: "https://music.aramjonghu.nl",
-        },
-        {
-            label: "Forgejo Git",
-            url: "https://git.aramjonghu.nl",
-        },
-        {
-            label: "Stream",
-            url: "https://stream.aramjonghu.nl",
-        },
-        {
-            label: "SearXNG",
-            url: "https://xng.aramjonghu.nl",
-        },
+        { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" },
+        { label: "Navidrome", url: "https://music.aramjonghu.nl" },
+        { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },
+        { label: "Stream", url: "https://stream.aramjonghu.nl" },
+        { label: "SearXNG", url: "https://xng.aramjonghu.nl" },
     ];
 
     const goHome = () => {
@@ -29,7 +16,7 @@ export default function Header() {
     };
 
     return (
-        <header className="flex justify-center items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
+        <header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
             <img
                 className="size-16 cursor-pointer"
                 src={Aku}
@@ -48,6 +35,15 @@ export default function Header() {
                     </a>
                 ))}
             </nav>
+
+            <div>
+                <button
+                    className="text-ctp-text hover:text-ctp-green-900 border rounded border-ctp-white-800 hover:border-ctp-green-900 cursor-pointer px-3 py-1"
+                    onClick={toggleTheme}
+                >
+                    {currentTheme === "macchiato" ? "🌙 Dark" : "☀️ Light"}
+                </button>
+            </div>
         </header>
     );
 }
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 34a1dd9..e89db2f 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -1,10 +1,13 @@
 import Footer from "./Footer";
 import Header from "./Header";
+import { useTheme } from "../hooks/useTheme";
 
 export default function Layout({ children }) {
+    const theme = useTheme();
+
     return (
         <div className="flex flex-col w-screen min-h-screen bg-ctp-base">
-            <Header />
+            <Header theme={theme} />
             <main className="flex-1">{children}</main>
             <Footer />
         </div>
diff --git a/frontend/src/hooks/useTheme.js b/frontend/src/hooks/useTheme.js
new file mode 100644
index 0000000..e0e766e
--- /dev/null
+++ b/frontend/src/hooks/useTheme.js
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+import { getInitialTheme, applyTheme, toggleTheme } from "../utils/theme";
+
+export function useTheme() {
+    const [theme, setTheme] = useState(getInitialTheme);
+
+    useEffect(() => {
+        applyTheme(theme);
+    }, [theme]);
+
+    const handleToggle = () => {
+        setTheme((prev) => toggleTheme(prev));
+    };
+
+    return { theme, toggleTheme: handleToggle };
+}
diff --git a/frontend/src/utils/theme.js b/frontend/src/utils/theme.js
new file mode 100644
index 0000000..82fefe6
--- /dev/null
+++ b/frontend/src/utils/theme.js
@@ -0,0 +1,30 @@
+const LIGHT = "latte";
+const DARK = "macchiato";
+
+export function getSystemTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? DARK
+        : LIGHT;
+}
+
+export function getStoredTheme() {
+    return localStorage.getItem("theme");
+}
+
+export function getInitialTheme() {
+    return getStoredTheme() || getSystemTheme();
+}
+
+export function applyTheme(theme) {
+    const root = document.documentElement;
+
+    root.classList.remove(LIGHT, DARK);
+
+    root.classList.add(theme);
+
+    localStorage.setItem("theme", theme);
+}
+
+export function toggleTheme(current) {
+    return current === DARK ? LIGHT : DARK;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..cc1f82e
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,8 @@
+export default {
+  darkMode: "class",
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
