diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 9a870dd..1b9085e 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,11 +1,13 @@
 import Title from "./Title";
 import styles from "../styles/Navbar.module.sass";
+import ThemeToggle from "./toggle/theme";
 
 const Navbar = () => {
   return (
     <>
       <div className={styles.center}>
         <Title />
+        <ThemeToggle/>
       </div>
     </>
   );
diff --git a/components/toggle/theme.tsx b/components/toggle/theme.tsx
new file mode 100644
index 0000000..b651fcd
--- /dev/null
+++ b/components/toggle/theme.tsx
@@ -0,0 +1,26 @@
+import styles from "styles/ThemeToggle.module.sass";
+import { useTheme } from "next-themes";
+import Icon from "components/Icon";
+
+function the(t) {
+    switch (t) {
+        case "light":
+            return "dark";
+        case "dark":
+            return "light";
+    }
+}
+
+const ThemeToggle = () => {
+    const { resolvedTheme: theme, setTheme } = useTheme();
+
+    return (
+        <>
+            <button data-theme={theme} onClick={() => setTheme(the(theme))} className={styles.button}>
+                <Icon icon="asterisk" />
+            </button>
+        </>
+    );
+};
+
+export default ThemeToggle;
diff --git a/styles/ThemeToggle.module.sass b/styles/ThemeToggle.module.sass
new file mode 100644
index 0000000..5907460
--- /dev/null
+++ b/styles/ThemeToggle.module.sass
@@ -0,0 +1,10 @@
+@import "./_variables"
+
+
+.button
+    color: $text-dark-buttons
+    background: $background-dark-buttons
+    border: none
+    &[data-theme="light"]
+        background: $background-light-buttons
+        color: $text-light-buttons
\ No newline at end of file