diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c19cdc6..da913be 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -85,29 +85,29 @@ export default function Header() {
   ];
 
   return (
-    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${scrolled ? "bg-white/90 dark:bg-slate-950/95 backdrop-blur-lg border-b border-slate-200 dark:border-slate-800 shadow-sm" : "bg-transparent"}`}>
+    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled ? "bg-white/90 dark:bg-slate-950/95 backdrop-blur-lg border-b border-slate-200 dark:border-slate-800 shadow-sm" : "bg-transparent"}`}>
       <div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-4">
         <Link to="/" className="flex items-center gap-2 group">
           <div className="relative">
-            <GraduationCap className={`h-7 w-7 transition-colors \${scrolled ? "text-indigo-600" : "text-white"}`} />
+            <GraduationCap className={`h-7 w-7 transition-colors ${scrolled ? "text-indigo-600" : "text-white"}`} />
           </div>
-          <span className={`text-lg font-bold tracking-tight transition-colors \${scrolled ? "text-slate-900 dark:text-white" : "text-white"}`}>Luminar Academy</span>
+          <span className={`text-lg font-bold tracking-tight transition-colors ${scrolled ? "text-slate-900 dark:text-white" : "text-white"}`}>Luminar Academy</span>
         </Link>
         <nav className="hidden md:flex items-center gap-8">
           {links.map((l) => (
-            <Link key={l.to} to={l.to} className={`text-sm font-medium transition-colors hover:text-indigo-500 \${scrolled ? "text-slate-600 dark:text-slate-300" : "text-white/90"}`}>{l.label}</Link>
+            <Link key={l.to} to={l.to} className={`text-sm font-medium transition-colors hover:text-indigo-500 ${scrolled ? "text-slate-600 dark:text-slate-300" : "text-white/90"}`}>{l.label}</Link>
           ))}
         </nav>
         <div className="hidden md:flex items-center gap-3">
           <ThemeToggle />
-          <AuthDialog trigger={<Button variant="ghost" size="sm" className={`rounded-full \${scrolled ? "text-slate-700 dark:text-slate-200" : "text-white hover:text-white"}`}>Sign In</Button>} />
+          <AuthDialog trigger={<Button variant="ghost" size="sm" className={`rounded-full ${scrolled ? "text-slate-700 dark:text-slate-200" : "text-white hover:text-white"}`}>Sign In</Button>} />
           <Button asChild size="sm" className="bg-indigo-600 hover:bg-indigo-700 text-white rounded-full px-6 shadow-lg shadow-indigo-500/20 active:scale-[0.97] transition-all">
             <Link to="/courses">Enroll Now</Link>
           </Button>
         </div>
         <Sheet open={open} onOpenChange={setOpen}>
           <SheetTrigger asChild className="md:hidden">
-            <Button variant="ghost" size="icon" className={`\${scrolled ? "text-slate-900 dark:text-white" : "text-white"}`}><Menu className="h-5 w-5" /></Button>
+            <Button variant="ghost" size="icon" className={`${scrolled ? "text-slate-900 dark:text-white" : "text-white"}`}><Menu className="h-5 w-5" /></Button>
           </SheetTrigger>
           <SheetContent side="right" className="w-72 bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800">
             <nav className="mt-8 flex flex-col gap-4">