diff --git a/frontend/components/Navigation.tsx b/frontend/components/Navigation.tsx
new file mode 100644
index 0000000..68574fc
--- /dev/null
+++ b/frontend/components/Navigation.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useAuth } from '@/contexts/AuthContext'
+
+export function Navigation() {
+ const { user, logout } = useAuth()
+ const pathname = usePathname()
+
+ const navItems = [
+ { href: '/dashboard', label: '儀表板' },
+ { href: '/flashcards', label: '詞卡' },
+ { href: '/learn', label: '學習' },
+ { href: '/generate', label: 'AI 生成' },
+ ]
+
+ return (
+
+ )
+}
\ No newline at end of file