diff --git a/src/components/theme/Provider.tsx b/src/components/theme/Provider.tsx
index 43e2714..efac152 100644
--- a/src/components/theme/Provider.tsx
+++ b/src/components/theme/Provider.tsx
@@ -7,7 +7,7 @@ const ThemeProviderComponent = ({
   children: React.ReactNode;
 }) => {
   return (
-    <ThemeProvider attribute="class" enableSystem={false} defaultTheme="dark">
+    <ThemeProvider attribute="class" enableSystem={true} defaultTheme="system">
       {children}
     </ThemeProvider>
   );
diff --git a/src/components/theme/Switcher.tsx b/src/components/theme/Switcher.tsx
index b1e7371..63cd897 100644
--- a/src/components/theme/Switcher.tsx
+++ b/src/components/theme/Switcher.tsx
@@ -20,24 +20,6 @@ const ThemeSwitcher = ({ className }: { className?: string }) => {
     setMounted(true);
   }, []);
 
-  useEffect(() => {
-    if (isTheme('system')) {
-      const preferDarkScheme = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      );
-
-      const detectThemeChange = (event: MediaQueryListEvent) => {
-        const theme: Theme = event.matches ? 'dark' : 'light';
-        setTheme(theme);
-      };
-
-      preferDarkScheme.addEventListener('change', detectThemeChange);
-
-      return () => {
-        preferDarkScheme.removeEventListener('change', detectThemeChange);
-      };
-    }
-  }, [isTheme, setTheme, theme]);
 
   // Avoid Hydration Mismatch
   if (!mounted) {
@@ -52,6 +34,7 @@ const ThemeSwitcher = ({ className }: { className?: string }) => {
       options={[
         { value: 'light', label: 'Light' },
         { value: 'dark', label: 'Dark' },
+        { value: 'system', label: 'System' },
       ]}
     />
   );