diff --git a/src/components/ButtonSwitchTheme.tsx b/src/components/ButtonSwitchTheme.tsx
new file mode 100644
index 0000000..3da4b50
--- /dev/null
+++ b/src/components/ButtonSwitchTheme.tsx
@@ -0,0 +1,17 @@
+import { FC } from "react";
+import Button from "./Button";
+import useTheme from "@/hooks/useTheme";
+import { Icon } from "@radix-ui/react-select";
+import { IoIosMoon, IoIosSunny } from "react-icons/io";
+
+const ButtonSwitchTheme: FC = () => {
+  const { toggleTheme, theme } = useTheme();
+
+  return (
+    <Button onClick={toggleTheme} variant="ghost" size="icon">
+      <Icon>{theme === "dark" ? <IoIosSunny /> : <IoIosMoon />}</Icon>
+    </Button>
+  );
+};
+
+export default ButtonSwitchTheme;
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
new file mode 100644
index 0000000..d8d3563
--- /dev/null
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from "react";
+
+export const THEME_KEY = "theme_mode";
+
+const DARK_MODE = "dark";
+const LIGHT_MODE = "light";
+const savedTheme = localStorage.getItem(THEME_KEY);
+
+const useTheme = () => {
+  const [theme, setTheme] = useState(savedTheme ?? LIGHT_MODE);
+
+  useEffect(() => {
+    document.documentElement.className = theme;
+    localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === DARK_MODE ? LIGHT_MODE : DARK_MODE);
+  }, [theme]);
+
+  return { toggleTheme, theme };
+};
+
+export default useTheme;