diff --git a/apps/www/app/_components/demo-card.tsx b/apps/www/app/_components/demo-card.tsx
index 2e735a5..61ac3ab 100644
--- a/apps/www/app/_components/demo-card.tsx
+++ b/apps/www/app/_components/demo-card.tsx
@@ -17,7 +17,7 @@ export default function DemoCard({ name, Component }: FormDemoItem) {
         className="absolute inset-0 z-10"
       />
       <div className="bg-secondary/25 group-hover:bg-secondary/35 relative grid h-64 place-items-center transition-colors">
-        <div className="absolute inset-0 -z-10 bg-[url(/ui/media/bg-noise.png)] opacity-10"></div>
+        <div className="absolute inset-0 -z-10 bg-[url(/media/bg-noise.png)] opacity-10"></div>
         {Component}
       </div>
       <span className="text-sm font-semibold">{name}</span>
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 52c9837..cf3858b 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -22,12 +22,8 @@ export const metadata: Metadata = {
     },
   ],
   icons: {
-    icon: [
-      { url: "/ui/favicon-16x16.png", sizes: "16x16", type: "image/png" },
-      { url: "/ui/favicon-32x32.png", sizes: "32x32", type: "image/png" },
-    ],
-    shortcut: "/ui/favicon.ico",
-    apple: "/ui/apple-touch-icon.png",
+    icon: "/favicon.ico",
+    // TODO: add more icons
   },
   manifest: "/ui/site.webmanifest",
 }
@@ -40,9 +36,9 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <body className={cn(inter.className, "relative bg-black antialiased")}>
-        <div className="absolute inset-0 top-0 -z-20 bg-[url(/ui/media/bg-top.jpg)] bg-position-[35%_top] bg-no-repeat sm:bg-position-[38%_top] md:bg-position-[40%_top] lg:bg-position-[44%_top] xl:bg-top forced-colors:hidden"></div>
-        <div className="absolute inset-0 -z-10 bg-[url(/ui/media/bg-noise.png)] opacity-10 forced-colors:hidden"></div>
-        <div className="absolute inset-0 bottom-0 -z-30 bg-[url(/ui/media/bg-bottom.jpg)] bg-position-[35%_bottom] bg-no-repeat mix-blend-screen sm:bg-position-[38%_bottom] md:bg-position-[40%_bottom] lg:bg-position-[44%_bottom] xl:bg-bottom forced-colors:hidden"></div>
+        <div className="absolute inset-0 top-0 -z-20 bg-[url(/media/bg-top.jpg)] bg-position-[35%_top] bg-no-repeat sm:bg-position-[38%_top] md:bg-position-[40%_top] lg:bg-position-[44%_top] xl:bg-top forced-colors:hidden"></div>
+        <div className="absolute inset-0 -z-10 bg-[url(/media/bg-noise.png)] opacity-10 forced-colors:hidden"></div>
+        <div className="absolute inset-0 bottom-0 -z-30 bg-[url(/media/bg-bottom.jpg)] bg-position-[35%_bottom] bg-no-repeat mix-blend-screen sm:bg-position-[38%_bottom] md:bg-position-[40%_bottom] lg:bg-position-[44%_bottom] xl:bg-bottom forced-colors:hidden"></div>
 
         <main className="flex flex-col">
           <SiteHeader />
diff --git a/apps/www/components/header.tsx b/apps/www/components/header.tsx
new file mode 100644
index 0000000..a5656fe
--- /dev/null
+++ b/apps/www/components/header.tsx
@@ -0,0 +1,33 @@
+import { TagIcon } from "@heroicons/react/16/solid"
+import Link from "next/link"
+
+import GitHubIcon from "@/components/icons/github"
+
+export default function Header() {
+  return (
+    <header className="relative px-6">
+      <div className="mx-auto flex max-w-325 items-center justify-between gap-4 px-2 py-6">
+        <div className="flex items-center gap-4">
+          <Link href={"/"} className="flex items-center gap-3">
+            <img
+              src={"/media/logo.png"}
+              alt="logo"
+              width={30}
+              height={30}
+            />
+            <h2 className="hidden text-2xl font-semibold sm:block">
+              Headcn<span className="font-light">UI</span>
+            </h2>
+          </Link>
+          <span className="bg-accent-foreground/10 text-accent-foreground inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-mono text-xs font-medium">
+            v0.1
+            <TagIcon className="text-muted-foreground size-3.5" />
+          </span>
+        </div>
+        <a href="https://github.com/headcn/ui" target="_blank" rel="noreferrer">
+          <GitHubIcon className="fill-foreground size-6" />
+        </a>
+      </div>
+    </header>
+  )
+}
diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx
index 383db31..ab3928e 100644
--- a/apps/www/components/site-header.tsx
+++ b/apps/www/components/site-header.tsx
@@ -8,7 +8,12 @@ export default function SiteHeader() {
       <div className="mx-auto flex max-w-325 items-center justify-between gap-4 px-2 py-6">
         <div className="flex items-center gap-4">
           <Link href={"/"} className="flex items-center gap-3">
-            <Icons.logo className="size-5" />
+            <img
+              src={"/media/logo.png"}
+              alt="logo"
+              width={30}
+              height={30}
+            />
             <h2 className="hidden text-2xl font-semibold sm:block">
               Headcn<span className="font-light">UI</span>
             </h2>
