diff --git a/app/globals.css b/app/globals.css
index 8484040..425d188 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 :root {
   --background: oklch(0.98 0.01 260);
diff --git a/app/layout.tsx b/app/layout.tsx
index 2d44398..7c9ceeb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import type { Metadata } from 'next'
 import { Analytics } from '@vercel/analytics/next'
 import './globals.css'
+import { ThemeProvider } from "@/components/theme-provider" 
 
 export const metadata: Metadata = {
   title: 'TaskChain',
@@ -32,10 +33,16 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
       <body className={`font-sans antialiased`}>
-        {children}
-        <Analytics />
+        <ThemeProvider
+          attribute="class"
+          enableSystem={false}
+          disableTransitionOnChange
+        >
+          {children}
+          <Analytics />
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/components/how-it-works.tsx b/components/how-it-works.tsx
index d545541..aee3f63 100644
--- a/components/how-it-works.tsx
+++ b/components/how-it-works.tsx
@@ -47,7 +47,7 @@ export function HowItWorks() {
               <div key={step.title} className="relative">
                 <div className="flex flex-col items-center text-center space-y-4">
                   <div className="relative">
-                    <div className="absolute -top-4 -left-4 text-6xl font-bold text-primary/10">
+                    <div className="absolute -top-4 -left-4 text-6xl font-bold text-primary/20">
                       {step.number}
                     </div>
                     <div className="relative h-16 w-16 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center">
diff --git a/components/ui/ThemeToggle.tsx b/components/ui/ThemeToggle.tsx
index 3b6676f..561b2c2 100644
--- a/components/ui/ThemeToggle.tsx
+++ b/components/ui/ThemeToggle.tsx
@@ -1,42 +1,17 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Sun, Moon } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
 export function ThemeToggle() {
-  // 1. Initialize state properly to avoid cascading renders
-  const [dark, setDark] = useState(() => {
-    if (typeof window !== "undefined") {
-      return localStorage.getItem("theme") === "dark";
-    }
-    return false;
-  });
-
-  // 2. Synchronize the HTML class with the state
-  useEffect(() => {
-    if (dark) {
-      document.documentElement.classList.add("dark");
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setDark(true);
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
-  }, [dark]);
-
-  const toggleTheme = () => {
-    setDark((prev) => {
-      const newDark = !prev;
-      localStorage.setItem("theme", newDark ? "dark" : "light");
-      return newDark;
-    });
-  };
+  const { theme, setTheme } = useTheme();
 
   return (
     <button
-      onClick={toggleTheme}
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
       className="p-2 rounded-lg bg-muted hover:bg-muted/80 transition"
     >
-      {dark ? <Sun size={18} /> : <Moon size={18} />}
+      {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index b5ea4ab..0ca3558 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -9,13 +9,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/85",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-primary-foreground hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
