diff --git a/src/components/ThemeToggle.js b/src/components/ThemeToggle.js
new file mode 100644
index 0000000..5309a94
--- /dev/null
+++ b/src/components/ThemeToggle.js
@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from 'react';
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+    return savedTheme ? savedTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  });
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return <button onClick={toggleTheme}>{theme === 'light' ? '🌙' : '☀️'}</button>;
+};
+
+export default ThemeToggle;
\ No newline at end of file