diff --git a/tone-page-web/app/components/Footer.tsx b/tone-page-web/app/components/Footer.tsx
new file mode 100644
index 0000000..c34cb01
--- /dev/null
+++ b/tone-page-web/app/components/Footer.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+async function handleCopy(text: string) {
+    try {
+        await navigator.clipboard.writeText(text);
+        toast.success("复制成功");
+    } catch (error) {
+        toast.error("复制失败");
+    }
+}
+
+export default function Footer() {
+    return (
+        <footer className="border-t h-3 relative">
+            <div className="h-20 flex sm:justify-between justify-center items-center px-20 flex-col sm:flex-row">
+                <div className="flex flex-col items-center sm:block">
+                    <a href="https://beian.miit.gov.cn/" className="text-sm text-zinc-500 hover:border-zinc-500 border-b border-transparent">备案号：渝ICP备2023009516号-1</a>
+                    <div className="text-sm text-zinc-500 cursor-default">© 2025 TONE Page. All rights reserved.</div>
+                </div>
+                <div>
+                    <Popover>
+                        <PopoverTrigger>
+                            <div className="cursor-pointer text-zinc-600 hover:border-zinc-600 border-b border-transparent">联系我</div>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-60 mr-5">
+                            <div className="flex items-center">
+                                <div className="text-sm">电子邮箱:</div>
+                                <Button variant="link" className="cursor-pointer select-text" onClick={() => handleCopy('tone@ctbu.net.cn')}>tone@ctbu.net.cn</Button>
+                            </div>
+                        </PopoverContent>
+                    </Popover>
+                </div>
+            </div>
+        </footer>
+    )
+}
+
diff --git a/tone-page-web/app/components/Header.tsx b/tone-page-web/app/components/Header.tsx
new file mode 100644
index 0000000..49f03ca
--- /dev/null
+++ b/tone-page-web/app/components/Header.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function Header() {
+    const pathname = usePathname();
+
+    const menuItems = [
+        { name: '特恩(TONE)', href: '/' },
+        { name: '资源', href: '/resource' },
+        { name: '博客', href: '/blog' },
+        { name: '账户', href: '/account' },
+    ]
+
+    return (
+        <header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 shadow">
+            <div className="flex items-center justify-between px-10 md:h-18 h-14 duration-300">
+                <Link
+                    href="/"
+                    className={cn(
+                        "cursor-pointer text-lg font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
+                        pathname === "/" && "text-zinc-800"
+                    )}
+                >
+                    {pathname === "/"
+                        ? <div className="text-2xl"> 🍭</div>
+                        : <div> 特恩(TONE)</div>}
+                </Link>
+
+                <div className="flex items-center gap-12">
+                    {menuItems.slice(1).map((item) => (
+                        <Link
+                            key={item.href}
+                            href={item.href}
+                            className={cn(
+                                "cursor-pointer text-lg font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
+                                pathname === item.href && "text-zinc-800 border-b-pink-500"
+                            )}
+                        >
+                            {item.name}
+                        </Link>
+                    ))}
+                </div>
+            </div>
+        </header>
+    )
+}
+