diff --git a/components/home/header.tsx b/components/home/header.tsx
index 5a26ad18..53e976a0 100644
--- a/components/home/header.tsx
+++ b/components/home/header.tsx
@@ -57,7 +57,7 @@ export function Header({
             <span>tweakcn</span>
           </div>
         </Link>
-        <nav className="hidden md:flex gap-8">
+        <nav className="hidden md:flex gap-4 lg:gap-8 items-center">
           {["Examples", "Features", "How It Works", "Roadmap", "FAQ"].map(
             (item, i) => (
               <motion.a
@@ -67,7 +67,7 @@ export function Header({
                 transition={{ duration: 0.3, delay: 0.1 + i * 0.05 }}
                 href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
                 onClick={handleScrollToSection}
-                className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground relative group"
+                className="text-xs lg:text-sm font-medium text-muted-foreground transition-colors hover:text-foreground relative group"
               >
                 {item}
                 <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
@@ -160,7 +160,7 @@ export function Header({
           exit={{ opacity: 0, y: -20 }}
           className="md:hidden absolute top-16 inset-x-0 bg-background/95 backdrop-blur-lg border-b"
         >
-          <div className="container py-4 flex flex-col gap-4 px-4">
+          <div className="container mx-auto py-4 flex flex-col gap-4 px-4">
             {["Examples", "Features", "How It Works", "Roadmap", "FAQ"].map(
               (item, i) => (
                 <motion.a