diff --git a/app/gluons/header/page.tsx b/app/gluons/header/page.tsx
new file mode 100644
index 0000000..4775cd2
--- /dev/null
+++ b/app/gluons/header/page.tsx
@@ -0,0 +1,51 @@
+import { Demo } from "@/components/demo";
+import { Header, HeaderCenter, HeaderContainer, HeaderLeft, HeaderMobileMenuTrigger, HeaderRight } from "@/components/gluons/header";
+import { Button } from "@/components/ui/button";
+import { AlignLeft } from "lucide-react";
+
+const HeaderPage = async () => {
+    
+    return (
+        <Demo
+        title="Header.tsx"
+        lang="tsx"
+        code={`header.tsx`}
+        lineNumbers={true}
+        className="!my-0"
+        >
+            <Header>
+                <HeaderContainer>
+                    <HeaderLeft>
+                        <HeaderMobileMenuTrigger className="@lg:hidden"/>
+                        <img src="/logoipsum.svg" alt="Logo" />
+                    </HeaderLeft>
+                    <HeaderCenter>
+                        Center
+                    </HeaderCenter>
+                    <HeaderRight>
+                        Right
+                    </HeaderRight>
+                </HeaderContainer>
+            </Header>
+            <main className="container mx-auto h-full max-h-[500px] pt-8 px-4 @md:px-6 @lg:px-8">
+                <div className="flex flex-col gap-3 @lg:gap-4">
+                    <div className="flex h-12 bg-muted rounded-md" />
+                    <div className="grid grid-cols-3 gap-3 @lg:gap-4">
+                        {Array.from({ length: 3 }).map((_, i) => (
+                            <div key={i} className="col-span-1 bg-muted justify-center items-center aspect-square rounded-md" />
+                        ))}
+                    </div>
+                    <div className="flex h-64 bg-muted rounded-md" />
+                    <div className="grid grid-cols-2 gap-3 @lg:gap-4">
+                        {Array.from({ length: 4 }).map((_, i) => (
+                            <div key={i} className="col-span-1 bg-muted justify-center items-center aspect-square rounded-md" />
+                        ))}
+                    </div>
+                    <div className="flex h-64 bg-muted rounded-md mb-8" />
+                </div>
+            </main>
+        </Demo>
+    )
+}
+
+export default HeaderPage;
\ No newline at end of file
diff --git a/components/demo-preview.tsx b/components/demo-preview.tsx
index 21047c7..2b04fec 100644
--- a/components/demo-preview.tsx
+++ b/components/demo-preview.tsx
@@ -2,10 +2,9 @@
 
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Laptop, LayoutDashboard, Smartphone, Tablet } from "lucide-react";
+import { Laptop, Smartphone, Tablet } from "lucide-react";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { Sidebar } from "./sidebar";
 
 type DevicePreview = "desktop" | "tablet" | "smartphone"
 
@@ -57,12 +56,12 @@ export const DemoPreview = ({
             </CardHeader>
             <CardContent 
                 className={cn(
-                    "py-8 flex justify-center items-start h-[600px] overflow-scroll",
+                    "py-8 flex justify-center items-start h-full",
                     devicePreview === "desktop" && "px-8",
                 )}
             >
-                <div className={cn(
-                    "@container grow border rounded-md bg-background",
+                <div id="demoPreviewContainer" className={cn(
+                    "@container grow border rounded-md bg-background max-h-full overflow-auto",
                     devicePreview === "desktop" && "w-full",
                     devicePreview === "tablet" && "max-w-lg",
                     devicePreview === "smartphone" && "max-w-sm",
diff --git a/components/demo.tsx b/components/demo.tsx
index 426c358..948fa6e 100644
--- a/components/demo.tsx
+++ b/components/demo.tsx
@@ -41,7 +41,7 @@ export const Demo = ({
                     </DemoPreview>
                 </TabsContent>
                 <TabsContent value="code" className="w-full border rounded-md max-h-[500px] overflow-y-auto">
-                    <DemoCode 
+                    <DemoCode
                         title={title}
                         lang={lang}
                         code={code}
diff --git a/components/gluons/header.tsx b/components/gluons/header.tsx
new file mode 100644
index 0000000..fa24692
--- /dev/null
+++ b/components/gluons/header.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Head } from "react-day-picker";
+import { Button } from "../ui/button";
+import { AlignLeft } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+const Header = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props}, ref) => (
+    <header
+        ref={ref}
+        className={cn(
+            "@container sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+            className
+        )}
+        {...props}
+    />
+
+));
+Header.displayName = "Header";
+
+const HeaderContainer = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "container flex flex-row items-center justify-between h-14 gap-4 py-0 @lg:py-2 mx-auto",
+            className
+        )}
+        {...props}
+    />
+));
+HeaderContainer.displayName = "HeaderContainer";
+
+const HeaderLeft = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "relative flex-1 flex flex-row items-center justify-start h-full gap-4",
+            className
+        )}
+        {...props}
+    />
+));
+HeaderLeft.displayName = "HeaderLeft";
+
+const headerCenterVariants = cva(
+    "relative flex-1 hidden @lg:flex flex-row items-center justify-center h-full gap-4",
+    {
+        variants: {
+            align: {
+                left: "justify-start",
+                center: "justify-center",
+                right: "justify-end",
+            }
+        },
+        defaultVariants: {
+            align: "center",
+        },
+    }
+);
+
+export interface HeaderCenterProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof headerCenterVariants> {
+        asChild?: boolean;
+    }
+
+const HeaderCenter = React.forwardRef<
+    HTMLDivElement,
+    HeaderCenterProps
+>(({ className, align, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div"
+    return (
+        <Comp
+            ref={ref}
+            className={cn(headerCenterVariants({ align, className }))}
+            {...props}
+        />
+    );
+});
+HeaderCenter.displayName = "HeaderCenter";
+
+const HeaderRight = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "relative flex-1 flex flex-row items-center justify-end h-full gap-4",
+            className
+        )}
+        {...props}
+    />
+));
+HeaderRight.displayName = "HeaderRight";
+
+const HeaderMobileMenuTrigger = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+    <Button
+        ref={ref}
+        size="icon"
+        variant="ghost"
+        className={cn(
+            className
+        )}
+        {...props}
+    >
+        <AlignLeft />
+    </Button>
+));
+HeaderMobileMenuTrigger.displayName = "HeaderMobileMenuTrigger";
+
+const HeaderMobileMenu = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        className={cn(
+            "absolute top-14 left-0 w-full h-[300px] bg-background",
+            className
+        )}
+        {...props}
+    />
+));
+HeaderMobileMenu.displayName = "HeaderMobileMenu";
+
+export {
+    Header,
+    HeaderContainer,
+    HeaderLeft,
+    HeaderCenter,
+    headerCenterVariants,
+    HeaderRight,
+    HeaderMobileMenuTrigger,
+    HeaderMobileMenu,
+};
\ No newline at end of file
diff --git a/components/gluons/hover-grid.tsx b/components/gluons/hover-grid.tsx
index e8830b8..725f54f 100644
--- a/components/gluons/hover-grid.tsx
+++ b/components/gluons/hover-grid.tsx
@@ -52,7 +52,11 @@ const HoverGridLeader = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn("uppercase text-sm pb-8 w-full flex flex-row items-center justify-between transition-all ease-in-out duration-500", className)}
+        className={cn(
+            "uppercase text-sm pb-8 w-full flex flex-row items-center justify-between", 
+            "transition-all ease-in-out duration-500", 
+            className
+        )}
         {...props}
     >
         {children}
@@ -66,7 +70,11 @@ const HoverGridContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <div
         ref={ref}
-        className={cn("flex flex-col grow gap-4 group-hover:gap-2 group-hover:pb-6 transition-all ease-in-out duration-500 justify-end", className)}
+        className={cn(
+            "flex flex-col grow gap-4 group-hover:gap-2 group-hover:pb-6", 
+            "transition-all ease-in-out duration-500 justify-end", 
+            className
+        )}
         {...props}
     />
 ));
@@ -90,7 +98,10 @@ const HoverGridDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <p
         ref={ref}
-        className={cn("text-muted-foreground group-hover:text-primary transition-colors duration-500 ease-in-out", className)}
+        className={cn("text-muted-foreground group-hover:text-primary", 
+        "transition-colors duration-500 ease-in-out", 
+        className
+    )}
         {...props}
     />
 ));
@@ -102,7 +113,9 @@ const HoverGridFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <p
         ref={ref}
-        className={cn("text-muted-foreground font-semibold text-lg group-hover:text-primary transition-colors duration-500 ease-in-out", className)}
+        className={cn("text-muted-foreground font-semibold text-lg", 
+        "group-hover:text-primary transition-colors duration-500 ease-in-out",
+         className)}
         {...props}
     />
 ));
diff --git a/components/sidebar/navigation.tsx b/components/sidebar/navigation.tsx
index 2fecb49..e4e7735 100644
--- a/components/sidebar/navigation.tsx
+++ b/components/sidebar/navigation.tsx
@@ -1,34 +1,36 @@
 "use client";
 
-import { Cpu, Laptop, Layout, Tag } from "lucide-react";
-
 import { NavItem } from "./nav-item";
 
 export const Navigation = () => {
   const routes = [
     {
-      label: "Getting Started",
-      href: "#",
+      label: "Carousel",
+      href: "/gluons/carousel",
+    },
+    {
+      label: "Content Accordion",
+      href: "/gluons/content-accordion",
     },
     {
-      label: "Docs",
-      href: "#",
+      label: "Header",
+      href: "/gluons/header",
     },
     {
-      label: "Gluons",
-      href: "#",
+      label: "HoverGrid",
+      href: "/gluons/hover-grid",
     },
     {
-      label: "Components",
-      href: "#",
+      label: "Playground",
+      href: "/gluons/playground",
     },
   ];
 
   return (
     <ul className="flex flex-col gap-2">
-      {routes.map((route) => (
+      {routes.map((route, i) => (
         <NavItem
-          key={route.href}
+          key={i}
           label={route.label}
           href={route.href}
         />
diff --git a/utils/get-demo-preview-id.tsx b/utils/get-demo-preview-id.tsx
new file mode 100644
index 0000000..db2c113
--- /dev/null
+++ b/utils/get-demo-preview-id.tsx
@@ -0,0 +1,10 @@
+"use client"
+
+let demoContainer: HTMLElement | null = null;
+
+if (typeof document !== 'undefined') {
+    demoContainer = document.getElementById("demoPreviewContainer");
+    console.log(demoContainer, "demoContainer");
+}
+
+export const demoPreviewId = demoContainer;
\ No newline at end of file