diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a21e39e..d5ca1d7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { Megrim, Audiowide, Cinzel, Inter } from "next/font/google";
+import Navigation from "@/components/Navigation";
+import Footer from "@/components/Footer";
 import "./globals.css";
 
 const megrim = Megrim({
@@ -51,7 +53,11 @@ export default function RootLayout({
       lang="zh-CN"
       className={`${megrim.variable} ${audiowide.variable} ${cinzel.variable} ${inter.variable} h-full antialiased`}
     >
-      <body className="min-h-full">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <Navigation />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 888cdeb..d5c23b5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,86 +1,88 @@
 export default function Home() {
   return (
-    <main className="min-h-screen flex flex-col items-center justify-center px-6 py-16">
-      {/* Logo */}
-      <h1
-        className="font-logo text-7xl sm:text-8xl tracking-[0.5em] uppercase glow-text-purple text-center mb-4"
-        style={{ paddingLeft: "0.5em" }}
-      >
-        Cyber
-        <span className="text-purple-300 mx-3 text-5xl sm:text-6xl align-middle">
-          ✦
-        </span>
-        Star
-      </h1>
+    <section className="px-6 py-20 sm:py-28">
+      <div className="max-w-5xl mx-auto flex flex-col items-center">
+        {/* Logo */}
+        <h1
+          className="font-logo text-6xl sm:text-8xl tracking-[0.4em] uppercase glow-text-purple text-center mb-4"
+          style={{ paddingLeft: "0.4em" }}
+        >
+          Cyber
+          <span className="text-purple-300 mx-2 sm:mx-3 text-4xl sm:text-6xl align-middle">
+            ✦
+          </span>
+          Star
+        </h1>
 
-      {/* Subtitle */}
-      <p className="font-label text-sm tracking-[0.4em] uppercase text-purple-300 mb-2">
-        Virtual Idol Debut Project
-      </p>
-      <p className="text-white/60 text-sm mb-12">
-        虚拟偶像 Top12 出道企划
-      </p>
+        {/* Subtitle */}
+        <p className="font-label text-xs sm:text-sm tracking-[0.4em] uppercase text-purple-300 mb-2">
+          Virtual Idol Debut Project
+        </p>
+        <p className="text-white/60 text-sm mb-10">
+          虚拟偶像 Top12 出道企划
+        </p>
 
-      {/* Status badge */}
-      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-500/10 border border-purple-500/30 mb-12">
-        <span className="w-2 h-2 rounded-full bg-purple-400 animate-pulse-glow"></span>
-        <span className="font-label text-xs tracking-widest text-purple-300 uppercase">
-          Phase 2 · Theme Ready
-        </span>
-      </div>
+        {/* Status badge */}
+        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-500/10 border border-purple-500/30 mb-12">
+          <span className="w-2 h-2 rounded-full bg-purple-400 animate-pulse-glow"></span>
+          <span className="font-label text-xs tracking-widest text-purple-300 uppercase">
+            Phase 3 · Layout Ready
+          </span>
+        </div>
 
-      {/* Theme verification swatches */}
-      <div className="grid grid-cols-3 sm:grid-cols-6 gap-3 max-w-2xl">
-        {[
-          { name: "purple-300", className: "bg-purple-300" },
-          { name: "purple-500", className: "bg-purple-500" },
-          { name: "purple-700", className: "bg-purple-700" },
-          { name: "magenta", className: "bg-magenta" },
-          { name: "pink-400", className: "bg-pink-400" },
-          { name: "cyan-400", className: "bg-cyan-400" },
-        ].map((c) => (
-          <div key={c.name} className="text-center">
-            <div
-              className={`${c.className} h-16 rounded-lg border border-white/10`}
-            />
-            <p className="text-[10px] text-white/40 mt-1 font-mono">{c.name}</p>
+        {/* Theme verification swatches */}
+        <div className="grid grid-cols-3 sm:grid-cols-6 gap-3 max-w-2xl">
+          {[
+            { name: "purple-300", className: "bg-purple-300" },
+            { name: "purple-500", className: "bg-purple-500" },
+            { name: "purple-700", className: "bg-purple-700" },
+            { name: "magenta", className: "bg-magenta" },
+            { name: "pink-400", className: "bg-pink-400" },
+            { name: "cyan-400", className: "bg-cyan-400" },
+          ].map((c) => (
+            <div key={c.name} className="text-center">
+              <div
+                className={`${c.className} h-16 rounded-lg border border-white/10`}
+              />
+              <p className="text-[10px] text-white/40 mt-1 font-mono">{c.name}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Font verification */}
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl w-full">
+          <div className="bg-surface border border-white/10 rounded-xl p-5">
+            <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
+              Logo Font · Megrim
+            </p>
+            <p className="font-logo text-3xl tracking-widest">Cyber Star</p>
           </div>
-        ))}
-      </div>
+          <div className="bg-surface border border-white/10 rounded-xl p-5">
+            <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
+              Display Font · Audiowide
+            </p>
+            <p className="font-display text-3xl tracking-wider">VOTE 2026</p>
+          </div>
+          <div className="bg-surface border border-white/10 rounded-xl p-5">
+            <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
+              Label Font · Cinzel
+            </p>
+            <p className="font-label text-xl tracking-widest font-semibold">
+              DEBUT PROJECT
+            </p>
+          </div>
+          <div className="bg-surface border border-white/10 rounded-xl p-5">
+            <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
+              Body Font · Inter
+            </p>
+            <p className="font-body text-lg">虚拟偶像出道企划 · Aria</p>
+          </div>
+        </div>
 
-      {/* Font verification */}
-      <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl w-full">
-        <div className="bg-surface border border-white/10 rounded-xl p-5">
-          <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
-            Logo Font · Megrim
-          </p>
-          <p className="font-logo text-3xl tracking-widest">Cyber Star</p>
-        </div>
-        <div className="bg-surface border border-white/10 rounded-xl p-5">
-          <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
-            Display Font · Audiowide
-          </p>
-          <p className="font-display text-3xl tracking-wider">VOTE 2026</p>
-        </div>
-        <div className="bg-surface border border-white/10 rounded-xl p-5">
-          <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
-            Label Font · Cinzel
-          </p>
-          <p className="font-label text-xl tracking-widest font-semibold">
-            DEBUT PROJECT
-          </p>
-        </div>
-        <div className="bg-surface border border-white/10 rounded-xl p-5">
-          <p className="font-label text-[10px] tracking-widest text-purple-300 uppercase mb-2">
-            Body Font · Inter
-          </p>
-          <p className="font-body text-lg">虚拟偶像出道企划 · Aria</p>
-        </div>
+        <p className="mt-16 text-white/40 text-xs font-mono">
+          Phase 4 → Core Components 即将开始
+        </p>
       </div>
-
-      <p className="mt-16 text-white/40 text-xs font-mono">
-        Phase 3 → Layout + Navigation 即将开始
-      </p>
-    </main>
+    </section>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..8eec698
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import Logo from "./Logo";
+
+const FOOTER_LINKS = [
+  { label: "活动规则", href: "/rules" },
+  { label: "隐私协议", href: "/privacy" },
+  { label: "用户协议", href: "/terms" },
+  { label: "联系客服", href: "/support" },
+] as const;
+
+export default function Footer() {
+  return (
+    <footer className="border-t border-white/[0.06] bg-[rgba(8,5,26,0.6)] backdrop-blur-sm mt-20">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 py-10 grid gap-8 md:grid-cols-3 items-start">
+        {/* Brand */}
+        <div>
+          <Logo size="sm" href={null} />
+          <p className="mt-3 text-xs text-white/45 leading-relaxed">
+            虚拟偶像 Top12 出道企划
+            <br />
+            Cyber Star · Virtual Idol Debut Project
+          </p>
+        </div>
+
+        {/* Links */}
+        <nav className="md:col-span-1">
+          <p className="font-label text-[10px] tracking-[0.3em] uppercase text-purple-300 mb-3">
+            Information
+          </p>
+          <ul className="space-y-2 text-sm">
+            {FOOTER_LINKS.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  className="text-white/55 hover:text-purple-300 transition-colors"
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        {/* Caption */}
+        <div className="text-xs text-white/40 md:text-right">
+          <p className="font-label tracking-[0.25em] uppercase text-purple-300/70 mb-2">
+            © 2026 Cyber Star
+          </p>
+          <p>All rights reserved.</p>
+          <p className="mt-1 font-mono text-white/30">
+            airlabs.art · powered by Next.js
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..3e7033f
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,41 @@
+import Link from "next/link";
+
+type LogoSize = "sm" | "md" | "lg" | "xl";
+
+interface LogoProps {
+  size?: LogoSize;
+  href?: string | null;
+  className?: string;
+}
+
+const SIZE_MAP: Record<LogoSize, { text: string; star: string; gap: string }> = {
+  sm: { text: "text-base", star: "text-xs", gap: "mx-1" },
+  md: { text: "text-xl sm:text-2xl", star: "text-sm", gap: "mx-1.5" },
+  lg: { text: "text-4xl sm:text-5xl", star: "text-2xl", gap: "mx-2" },
+  xl: { text: "text-6xl sm:text-7xl", star: "text-4xl", gap: "mx-3" },
+};
+
+export default function Logo({
+  size = "md",
+  href = "/",
+  className = "",
+}: LogoProps) {
+  const { text, star, gap } = SIZE_MAP[size];
+
+  const inner = (
+    <span
+      className={`font-logo tracking-[0.25em] uppercase glow-text-purple inline-flex items-baseline ${text} ${className}`}
+    >
+      Cyber
+      <span className={`text-purple-300 ${gap} ${star}`}>✦</span>
+      Star
+    </span>
+  );
+
+  if (!href) return inner;
+  return (
+    <Link href={href} className="inline-block hover:opacity-90 transition-opacity">
+      {inner}
+    </Link>
+  );
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..4a7965d
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import Logo from "./Logo";
+
+const NAV_ITEMS = [
+  { label: "HOME", href: "/" },
+  { label: "VOTE", href: "/vote" },
+  { label: "RANKING", href: "/ranking" },
+  { label: "NEWS", href: "/news" },
+  { label: "ABOUT", href: "/about" },
+] as const;
+
+export default function Navigation() {
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    if (href === "/") return pathname === "/";
+    return pathname.startsWith(href);
+  };
+
+  return (
+    <header className="sticky top-0 z-50 backdrop-blur-xl bg-[rgba(13,10,36,0.85)] border-b border-white/[0.08]">
+      <nav className="max-w-7xl mx-auto h-16 px-6 sm:px-8 flex items-center gap-8">
+        <Logo size="md" />
+
+        {/* Nav links */}
+        <ul className="hidden md:flex items-center gap-8 flex-1 font-display text-xs tracking-[0.25em]">
+          {NAV_ITEMS.map((item) => {
+            const active = isActive(item.href);
+            return (
+              <li key={item.href}>
+                <Link
+                  href={item.href}
+                  className={`relative py-1 transition-colors uppercase ${
+                    active
+                      ? "text-purple-300 glow-text-purple"
+                      : "text-white/65 hover:text-white"
+                  }`}
+                >
+                  {item.label}
+                  {active && (
+                    <span
+                      className="absolute -bottom-0.5 left-0 right-0 h-px bg-purple-400"
+                      style={{ boxShadow: "0 0 8px #a78bfa" }}
+                    />
+                  )}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+
+        {/* Right side */}
+        <div className="ml-auto flex items-center gap-3">
+          {/* Search button (icon-only on mobile) */}
+          <button
+            type="button"
+            aria-label="搜索"
+            className="w-9 h-9 rounded-md flex items-center justify-center text-white/65 hover:text-white hover:bg-white/[0.06] transition-colors"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <path d="m21 21-4.3-4.3" />
+            </svg>
+          </button>
+
+          {/* Login button */}
+          <Link
+            href="/login"
+            className="font-display text-[10px] sm:text-xs tracking-[0.2em] uppercase px-4 sm:px-5 h-9 inline-flex items-center justify-center rounded border border-[var(--border-purple)] text-purple-300 hover:bg-purple-500/10 hover:shadow-[0_0_20px_rgba(139,92,246,0.3)] transition-all"
+          >
+            Login / Sign Up
+          </Link>
+        </div>
+      </nav>
+
+      {/* Mobile nav links (horizontal scroll) */}
+      <div className="md:hidden border-t border-white/[0.05] overflow-x-auto">
+        <ul className="flex items-center gap-6 px-6 py-2.5 font-display text-[11px] tracking-[0.25em] whitespace-nowrap">
+          {NAV_ITEMS.map((item) => {
+            const active = isActive(item.href);
+            return (
+              <li key={item.href}>
+                <Link
+                  href={item.href}
+                  className={`uppercase transition-colors ${
+                    active ? "text-purple-300" : "text-white/55"
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </header>
+  );
+}
