diff --git a/src/components/themeToggleBtn.jsx b/src/components/themeToggleBtn.jsx
new file mode 100644
index 0000000..7b8d6c2
--- /dev/null
+++ b/src/components/themeToggleBtn.jsx
@@ -0,0 +1,30 @@
+import { useTheme } from 'next-themes'
+import Image from 'next/image'
+
+export default function ThemeToggleButton() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  const toggleThemeHandler = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <button className="w-fit mx-auto" onClick={toggleThemeHandler}>
+      {resolvedTheme === 'light' ? (
+        <Image
+          src="/icons/moon.svg"
+          width={28}
+          height={28}
+          alt="Dark Theme Icon"
+        />
+      ) : (
+        <Image
+          src="/icons/sun.svg"
+          width={28}
+          height={28}
+          alt="Light Theme Icon"
+        />
+      )}
+    </button>
+  )
+}