diff --git a/frontend/components/Navigation.tsx b/frontend/components/Navigation.tsx
index 2dabe4b..c6e4e11 100644
--- a/frontend/components/Navigation.tsx
+++ b/frontend/components/Navigation.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useAuth } from '@/contexts/AuthContext'
@@ -12,6 +13,7 @@ interface NavigationProps {
 export function Navigation({ showExitLearning = false, onExitLearning }: NavigationProps = {}) {
   const { user, logout } = useAuth()
   const pathname = usePathname()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
   const navItems = [
     { href: '/dashboard', label: '儀表板' },
@@ -42,6 +44,20 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
                 </Link>
               ))}
             </div>
+
+            {/* 手機版漢堡選單按鈕 */}
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              className="md:hidden p-2 text-gray-600 hover:text-gray-900"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                {isMobileMenuOpen ? (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                ) : (
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                )}
+              </svg>
+            </button>
           </div>
 
           <div className="flex items-center space-x-4">
@@ -67,6 +83,47 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
             </div>
           </div>
         </div>
+
+        {/* 手機版下拉選單 */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden border-t border-gray-200">
+            <div className="px-4 py-4 space-y-2">
+              {navItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className={`block py-2 px-3 rounded-lg font-medium transition-colors ${
+                    pathname === item.href
+                      ? 'bg-primary text-white'
+                      : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+
+              {/* 手機版用戶區域 */}
+              <div className="pt-4 border-t border-gray-200 mt-4">
+                <div className="flex items-center space-x-3 px-3 py-2">
+                  <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-semibold">
+                    {user?.username?.[0]?.toUpperCase() || 'U'}
+                  </div>
+                  <span className="text-sm font-medium">{user?.displayName || user?.username}</span>
+                </div>
+                <button
+                  onClick={() => {
+                    logout()
+                    setIsMobileMenuOpen(false)
+                  }}
+                  className="w-full text-left py-2 px-3 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg"
+                >
+                  登出
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </nav>
   )