diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index b1602b7..7bf6f40 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -15,7 +15,7 @@ function Navigation() {
   }
 
   return (
-    <nav className="fixed top-0 w-full bg-white dark:bg-slate-900/90 border-b border-slate-200 dark:border-slate-800 z-50">
+    <nav className="fixed top-0 w-full bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           <Link to="/" className="flex items-center space-x-2">
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
index b605f85..125f692 100644
--- a/src/components/ThemeToggle.jsx
+++ b/src/components/ThemeToggle.jsx
@@ -4,7 +4,7 @@ const ThemeToggle = () => {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
 
   useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
+    document.documentElement.classList.toggle('dark', theme === 'dark');
     localStorage.setItem('theme', theme);
   }, [theme]);
 
diff --git a/src/styles/App.css b/src/styles/App.css
index 72252b5..b7b6933 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,5 +1,5 @@
 
-@custom-variant dark (&:is(.dark *));
+/* @custom-variant dark (&:is(.dark *)); */
 
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
diff --git a/tailwind.config.js b/tailwind.config.js
index 2fb198f..4ad321a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,7 @@ import typography from '@tailwindcss/typography';
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: ['attribute', '[data-theme="dark"]'],
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",