diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 7ebb7ca..88ed7bd 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import Link from "next/link";
+import Navbar from "@/components/Navbar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,46 +28,8 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-slate-900 text-slate-100`}
       >
-        {/* Top nav */}
-        <nav className="border-b border-slate-700 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
-          <div className="max-w-6xl mx-auto px-4 h-14 flex items-center gap-8">
-            <span className="font-bold text-cyan-400 tracking-tight text-lg">
-              ⚡ Arbitrage Engine
-            </span>
-            <div className="flex gap-6 text-sm">
-              <Link
-                href="/"
-                className="text-slate-300 hover:text-cyan-400 transition-colors"
-              >
-                仪表盘
-              </Link>
-              <Link
-                href="/history"
-                className="text-slate-300 hover:text-cyan-400 transition-colors"
-              >
-                历史
-              </Link>
-              <Link
-                href="/signals"
-                className="text-slate-300 hover:text-cyan-400 transition-colors"
-              >
-                信号
-              </Link>
-              <Link
-                href="/about"
-                className="text-slate-300 hover:text-cyan-400 transition-colors"
-              >
-                说明
-              </Link>
-            </div>
-            <div className="ml-auto flex gap-3 text-sm">
-              <Link href="/login" className="text-slate-400 hover:text-slate-200 transition-colors">登录</Link>
-              <Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-3 py-1 rounded-lg transition-colors">注册</Link>
-            </div>
-          </div>
-        </nav>
-
-        <main className="max-w-6xl mx-auto px-4 py-8">{children}</main>
+        <Navbar />
+        <main className="max-w-6xl mx-auto px-4 py-6">{children}</main>
       </body>
     </html>
   );
diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx
new file mode 100644
index 0000000..4e6d651
--- /dev/null
+++ b/frontend/components/Navbar.tsx
@@ -0,0 +1,74 @@
+"use client";
+import Link from "next/link";
+import { useState } from "react";
+
+const navLinks = [
+  { href: "/", label: "仪表盘" },
+  { href: "/history", label: "历史" },
+  { href: "/signals", label: "信号" },
+  { href: "/about", label: "说明" },
+];
+
+export default function Navbar() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <nav className="border-b border-slate-700 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
+      <div className="max-w-6xl mx-auto px-4 h-14 flex items-center">
+        <Link href="/" className="font-bold text-cyan-400 tracking-tight text-lg shrink-0">
+          ⚡ Arbitrage Engine
+        </Link>
+
+        {/* Desktop nav */}
+        <div className="hidden md:flex items-center gap-6 text-sm ml-8">
+          {navLinks.map(l => (
+            <Link key={l.href} href={l.href} className="text-slate-300 hover:text-cyan-400 transition-colors">
+              {l.label}
+            </Link>
+          ))}
+        </div>
+        <div className="hidden md:flex items-center gap-3 text-sm ml-auto">
+          <Link href="/login" className="text-slate-400 hover:text-slate-200 transition-colors">登录</Link>
+          <Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-3 py-1 rounded-lg transition-colors">注册</Link>
+        </div>
+
+        {/* Mobile: right side buttons + hamburger */}
+        <div className="md:hidden ml-auto flex items-center gap-2">
+          <Link href="/login" className="text-slate-400 hover:text-slate-200 text-sm transition-colors">登录</Link>
+          <Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-2 py-1 rounded text-sm transition-colors">注册</Link>
+          <button
+            onClick={() => setOpen(!open)}
+            className="ml-1 p-2 text-slate-400 hover:text-slate-200"
+            aria-label="菜单"
+          >
+            {open ? (
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            ) : (
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile dropdown */}
+      {open && (
+        <div className="md:hidden border-t border-slate-700 bg-slate-900 px-4 py-3 space-y-1">
+          {navLinks.map(l => (
+            <Link
+              key={l.href}
+              href={l.href}
+              onClick={() => setOpen(false)}
+              className="block py-2 text-slate-300 hover:text-cyan-400 transition-colors text-sm"
+            >
+              {l.label}
+            </Link>
+          ))}
+        </div>
+      )}
+    </nav>
+  );
+}
