diff --git a/public/scripts/theme-init.js b/public/scripts/theme-init.js
index 57631ceb..217ed505 100644
--- a/public/scripts/theme-init.js
+++ b/public/scripts/theme-init.js
@@ -29,12 +29,37 @@ const mode =
   (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
 
 root.classList.remove("dark", "light");
+
+const stylesToApply = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "border",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "radius",
+];
+
+// element.setAttribute(
+//   `style`,
+//   `${element.getAttribute("style") || ""}--${key}: ${value};`
+// );
+
 if (mode === "dark") {
-  root.classList.add("dark");
-  root.style.setProperty("--background", darkStyles.background);
-  root.style.setProperty("--foreground", darkStyles.foreground);
+  stylesToApply.forEach((style) => {
+    root.setAttribute(
+      `style`,
+      `${root.getAttribute("style") || ""}--${style}: ${darkStyles[style]};`
+    );
+  });
 } else {
-  root.classList.add("light");
-  root.style.setProperty("--background", lightStyles.background);
-  root.style.setProperty("--foreground", lightStyles.foreground);
+  stylesToApply.forEach((style) => {
+    root.setAttribute(
+      `style`,
+      `${root.getAttribute("style") || ""}--${style}: ${lightStyles[style]};`
+    );
+  });
 }
diff --git a/src/components/home/header.tsx b/src/components/home/header.tsx
index e16e1ba7..3ad28043 100644
--- a/src/components/home/header.tsx
+++ b/src/components/home/header.tsx
@@ -6,6 +6,7 @@ import { Menu, Moon, Sun, X, ChevronRight } from "lucide-react";
 import Logo from "@/assets/logo.svg?react";
 import GitHubIcon from "@/assets/github.svg?react";
 import { useGithubStars } from "@/hooks/use-github-stars";
+import { cn } from "@/lib/utils";
 
 interface HeaderProps {
   isScrolled: boolean;
@@ -39,11 +40,12 @@ export function Header({
 
   return (
     <header
-      className={`sticky top-0 z-50 w-full backdrop-blur-lg transition-all duration-300 ${
+      className={cn(
+        "sticky top-0 z-50 w-full backdrop-blur-lg",
         isScrolled
           ? "bg-background/90 shadow-xs border-b border-border/20"
           : "bg-transparent"
-      }`}
+      )}
     >
       <div className="container flex h-16 px-4 min-w-full items-center justify-between">
         <Link to="/">
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
index bd391383..6c5b18e9 100644
--- a/src/components/home/hero.tsx
+++ b/src/components/home/hero.tsx
@@ -2,16 +2,9 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { useEditorStore } from "@/store/editor-store";
-import { motion } from "motion/react";
 import { ArrowRight, Check, Copy, Circle, Eye, Palette } from "lucide-react";
 import { Link } from "react-router";
 
-const ColorBox = ({ color }: { color: string }) => {
-  return (
-    <div className="w-3 h-3 rounded-sm border" style={{ backgroundColor: color }} />
-  );
-};
-
 export function Hero() {
   const { themeState } = useEditorStore();
   const mode = themeState.currentMode;
@@ -19,54 +12,30 @@ export function Hero() {
   return (
     <section className="w-full py-20 md:py-32 lg:py-40 relative">
       <div className="container px-4 md:px-6 z-10 relative">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          className="grid lg:grid-cols-2 gap-12 items-center"
-        >
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
           {/* Left Column - Text Content */}
           <div className="text-left max-w-2xl mx-auto lg:mx-0">
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.5, delay: 0.1 }}
-            >
+            <div>
               <Badge
-                className="mb-4 rounded-full px-4 py-1.5 text-sm font-medium shadow-sm"
+                className="mb-4 rounded-full px-4 py-1.5 text-sm font-medium shadow-sm transition-none"
                 variant="secondary"
               >
                 <span className="mr-1 text-primary">✦</span> Visual Theme Editor
               </Badge>
-            </motion.div>
-            <motion.h1
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.7, delay: 0.2 }}
-              className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70"
-            >
+            </div>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70">
               Design Your Perfect <span className="text-primary">shadcn/ui</span>{" "}
               Theme
-            </motion.h1>
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.7, delay: 0.3 }}
-              className="text-muted-foreground mb-8 text-lg md:text-xl leading-relaxed"
-            >
+            </h1>
+            <p className="text-muted-foreground mb-8 text-lg md:text-xl leading-relaxed">
               Customize colors, typography, and layouts with a real-time preview. No
               signup required.
-            </motion.p>
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.7, delay: 0.4 }}
-              className="flex flex-col sm:flex-row gap-4"
-            >
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4">
               <Link to="/editor/theme">
                 <Button
                   size="lg"
-                  className="rounded-full h-12 px-8 cursor-pointer shadow-md hover:shadow-lg transition-all duration-300 hover:translate-y-[-2px] text-base"
+                  className="rounded-full h-12 px-8 cursor-pointer shadow-md hover:shadow-lg transition-transform duration-300 hover:translate-y-[-2px] text-base"
                 >
                   Start Customizing
                   <ArrowRight className="ml-2 size-4" />
@@ -76,18 +45,13 @@ export function Hero() {
                 <Button
                   size="lg"
                   variant="outline"
-                  className="rounded-full h-12 px-8 cursor-pointer border-primary/20 hover:border-primary/50 transition-all duration-300 hover:translate-y-[-2px] text-base"
+                  className="rounded-full h-12 px-8 cursor-pointer border-primary/20 hover:border-primary/50 transition-transform duration-300 hover:translate-y-[-2px] text-base"
                 >
                   View Examples
                 </Button>
               </a>
-            </motion.div>
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.7, delay: 0.6 }}
-              className="flex flex-wrap items-center gap-6 mt-8"
-            >
+            </div>
+            <div className="flex flex-wrap items-center gap-6 mt-8">
               <div className="flex items-center gap-2 text-sm text-muted-foreground">
                 <Check className="size-5 text-primary" />
                 <span>Real-time Preview</span>
@@ -100,16 +64,11 @@ export function Hero() {
                 <Check className="size-5 text-primary" />
                 <span>Beautiful Presets</span>
               </div>
-            </motion.div>
+            </div>
           </div>
 
           {/* Right Column - Preview Card */}
-          <motion.div
-            initial={{ opacity: 0, x: 20, rotate: 2 }}
-            animate={{ opacity: 1, x: 0, rotate: 0 }}
-            transition={{ duration: 0.4, delay: 0.3 }}
-            className="relative hidden lg:block"
-          >
+          <div className="relative hidden lg:block">
             <Card className="relative overflow-hidden border-border/40 bg-gradient-to-b from-background to-background/95 backdrop-blur shadow-xl rounded-2xl">
               <CardContent className="p-0">
                 {/* Header */}
@@ -159,11 +118,17 @@ export function Hero() {
                     </div>
                     <div className="space-y-3">
                       <div className="flex gap-2">
-                        <Button className="w-full shadow-sm" variant="secondary">
+                        <Button
+                          className="w-full shadow-sm transition-none"
+                          variant="secondary"
+                        >
                           <Copy className="size-4 mr-2" />
                           Copy Code
                         </Button>
-                        <Button className="w-full shadow-sm" variant="outline">
+                        <Button
+                          className="w-full shadow-sm transition-none"
+                          variant="outline"
+                        >
                           <Circle className="size-4 mr-2" />
                           oklch, hsl, rgb, hex
                         </Button>
@@ -186,8 +151,8 @@ export function Hero() {
                 </div>
               </CardContent>
             </Card>
-          </motion.div>
-        </motion.div>
+          </div>
+        </div>
       </div>
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_90%_30%,var(--muted),transparent_35%)] blur-3xl"></div>
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_10%_70%,var(--muted),transparent_10%)] blur-3xl"></div>