diff --git a/app/root.jsx b/app/root.jsx
index 1808fe7..167ee17 100644
--- a/app/root.jsx
+++ b/app/root.jsx
@@ -6,6 +6,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import { useState } from "react";
 
 import styles from "./styles/app.css";
 
@@ -20,13 +21,48 @@ export const meta = () => ({
 });
 
 export default function App() {
+  const [darkMode, setDarkMode] = useState();
+
   return (
-    <html className="dark" lang="en">
+    <html className={`${darkMode ? "dark" : ""}`} lang="en">
       <head>
         <Meta />
         <Links />
       </head>
       <body className="dark:ctp-mocha dark:bg-ctp-base">
+        <button className="sticky top-0" onClick={() => setDarkMode(!darkMode)}>
+          {darkMode ? (
+            <svg
+              className="w-8 h-8 md:w-10 md:h-10"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="white"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+              />
+            </svg>
+          ) : (
+            <svg
+              className="w-8 h-8 md:w-10 md:h-10"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="black"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+              />
+            </svg>
+          )}
+        </button>
         <Outlet />
         <Scripts />
         <LiveReload />
diff --git a/tailwind.config.js b/tailwind.config.js
index e995c75..64f63d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,16 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: 'class',
+  content: ["./app/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
   theme: {
     extend: {},
   },
   plugins: [
     require("@catppuccin/tailwindcss")({
-			prefix: "ctp",
-			defaultFlavour: "latte",
-		}),
+      prefix: "ctp",
+      defaultFlavour: "latte",
+    }),
   ],
-}
+};
