diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index 55d28c5..d659fdc 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import Link from 'next/link'
+import { ProtectedRoute } from '@/components/ProtectedRoute'
+import { Navigation } from '@/components/Navigation'
 
-export default function GeneratePage() {
+function GenerateContent() {
   const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
   const [textInput, setTextInput] = useState('')
   const [extractionType, setExtractionType] = useState<'vocabulary' | 'smart'>('vocabulary')
@@ -109,21 +111,7 @@ export default function GeneratePage() {
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Navigation */}
-      <nav className="bg-white shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center space-x-8">
-              <Link href="/dashboard" className="text-2xl font-bold text-primary">DramaLing</Link>
-              <div className="hidden md:flex space-x-6">
-                <Link href="/dashboard" className="text-gray-600 hover:text-gray-900">儀表板</Link>
-                <Link href="/flashcards" className="text-gray-600 hover:text-gray-900">詞卡</Link>
-                <Link href="/learn" className="text-gray-600 hover:text-gray-900">學習</Link>
-                <Link href="/generate" className="text-gray-900 font-medium">AI 生成</Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
+      <Navigation />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {!showPreview ? (
@@ -561,4 +549,12 @@ export default function GeneratePage() {
       )}
     </div>
   )
+}
+
+export default function GeneratePage() {
+  return (
+    <ProtectedRoute>
+      <GenerateContent />
+    </ProtectedRoute>
+  )
 }
\ No newline at end of file
diff --git a/frontend/components/Navigation.tsx b/frontend/components/Navigation.tsx
index 70a5247..e6b8a5f 100644
--- a/frontend/components/Navigation.tsx
+++ b/frontend/components/Navigation.tsx
@@ -18,7 +18,8 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
   const navItems = [
     { href: '/dashboard', label: '儀表板' },
     { href: '/flashcards', label: '詞卡' },
-    { href: '/learn', label: '學習' }
+    { href: '/learn', label: '學習' },
+    { href: '/generate', label: 'AI 生成' }
   ]
 
   return (