diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 43a54d6..ca85d6b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -11,7 +11,8 @@
       "Bash(xargs:*)",
       "Bash(npm init:*)",
       "Bash(npm run dev:*)",
-      "Bash(npm uninstall:*)"
+      "Bash(npm uninstall:*)",
+      "Bash(git push:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/app/generate/page.tsx b/app/generate/page.tsx
index f565836..55d28c5 100644
--- a/app/generate/page.tsx
+++ b/app/generate/page.tsx
@@ -4,57 +4,83 @@ import { useState } from 'react'
 import Link from 'next/link'
 
 export default function GeneratePage() {
-  const [mode, setMode] = useState<'text' | 'theme'>('text')
+  const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
   const [textInput, setTextInput] = useState('')
-  const [selectedTheme, setSelectedTheme] = useState('')
-  const [difficulty, setDifficulty] = useState('intermediate')
+  const [extractionType, setExtractionType] = useState<'vocabulary' | 'smart'>('vocabulary')
   const [cardCount, setCardCount] = useState(10)
   const [isGenerating, setIsGenerating] = useState(false)
   const [generatedCards, setGeneratedCards] = useState<any[]>([])
   const [showPreview, setShowPreview] = useState(false)
-
-  const themes = [
-    { id: 'daily', name: '日常對話', icon: '🗣️' },
-    { id: 'business', name: '商務英語', icon: '💼' },
-    { id: 'tv', name: '美劇經典', icon: '📺' },
-    { id: 'movie', name: '電影台詞', icon: '🎬' },
-    { id: 'academic', name: '學術英語', icon: '🎓' },
-    { id: 'travel', name: '旅遊英語', icon: '✈️' },
-  ]
+  const [isPremium] = useState(false) // Mock premium status
+  const [showImageForCard, setShowImageForCard] = useState<{ [key: number]: boolean }>({}) // Track which cards show images
+  const [modalImage, setModalImage] = useState<string | null>(null) // Track modal image
 
   const mockGeneratedCards = [
     {
       id: 1,
-      word: 'negotiate',
+      word: 'brought',
       partOfSpeech: 'verb',
-      pronunciation: '/nɪˈɡoʊʃieɪt/',
-      translation: '協商、談判',
-      definition: 'To discuss something with someone in order to reach an agreement',
-      example: 'We need to negotiate a better deal with our suppliers.',
-      exampleTranslation: '我們需要與供應商協商更好的交易。',
-      difficulty: 'intermediate'
+      pronunciation: {
+        us: '/brɔːt/',
+        uk: '/brɔːt/'
+      },
+      translation: '提出、帶來',
+      definition: 'Past tense of bring; to mention or introduce a topic in conversation',
+      synonyms: ['mentioned', 'raised', 'introduced'],
+      antonyms: ['concealed', 'withheld'],
+      originalExample: 'He brought this thing up during our meeting and no one agreed.',
+      originalExampleTranslation: '他在我們的會議中提出了這件事，但沒有人同意。',
+      generatedExample: {
+        sentence: 'She brought up an interesting point about the budget.',
+        translation: '她提出了一個關於預算的有趣觀點。',
+        imageUrl: '/images/examples/bring_up.png',
+        audioUrl: '#'
+      },
+      difficulty: 'B1'
     },
     {
       id: 2,
-      word: 'perspective',
+      word: 'instincts',
       partOfSpeech: 'noun',
-      pronunciation: '/pərˈspektɪv/',
-      translation: '觀點、看法',
-      definition: 'A particular way of considering something',
-      example: 'From my perspective, this is the best solution.',
-      exampleTranslation: '從我的角度來看，這是最好的解決方案。',
-      difficulty: 'intermediate'
+      pronunciation: {
+        us: '/ˈɪnstɪŋkts/',
+        uk: '/ˈɪnstɪŋkts/'
+      },
+      translation: '本能、直覺',
+      definition: 'Natural abilities that help living things survive without learning',
+      synonyms: ['intuition', 'impulse', 'tendency'],
+      antonyms: ['logic', 'reasoning'],
+      originalExample: 'Animals use their instincts to find food and stay safe.',
+      originalExampleTranslation: '動物利用本能來尋找食物並保持安全。',
+      generatedExample: {
+        sentence: 'Trust your instincts when making important decisions.',
+        translation: '在做重要決定時要相信你的直覺。',
+        imageUrl: '/images/examples/instinct.png',
+        audioUrl: '#'
+      },
+      difficulty: 'B2'
     },
     {
       id: 3,
-      word: 'accomplish',
-      partOfSpeech: 'verb',
-      pronunciation: '/əˈkɒmplɪʃ/',
-      translation: '完成、達成',
-      definition: 'To finish something successfully or to achieve something',
-      example: 'She accomplished her goal of running a marathon.',
-      exampleTranslation: '她完成了跑馬拉松的目標。',
-      difficulty: 'intermediate'
+      word: 'warrants',
+      partOfSpeech: 'noun',
+      pronunciation: {
+        us: '/ˈwɔːrənts/',
+        uk: '/ˈwɒrənts/'
+      },
+      translation: '搜查令、授權令',
+      definition: 'Official documents that give police permission to do something',
+      synonyms: ['authorization', 'permit', 'license'],
+      antonyms: ['prohibition', 'ban'],
+      originalExample: 'The police obtained warrants to search the building.',
+      originalExampleTranslation: '警方取得了搜查令來搜查這棟建築物。',
+      generatedExample: {
+        sentence: 'The judge issued arrest warrants for three suspects.',
+        translation: '法官對三名嫌疑人發出了逮捕令。',
+        imageUrl: '/images/examples/warrant.png',
+        audioUrl: '#'
+      },
+      difficulty: 'C1'
     }
   ]
 
@@ -73,6 +99,13 @@ export default function GeneratePage() {
     alert('詞卡已保存到您的卡組！')
   }
 
+  const toggleImageForCard = (cardId: number) => {
+    setShowImageForCard(prev => ({
+      ...prev,
+      [cardId]: !prev[cardId]
+    }))
+  }
+
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Navigation */}
@@ -97,42 +130,81 @@ export default function GeneratePage() {
           <div className="max-w-4xl mx-auto">
             <h1 className="text-3xl font-bold mb-8">AI 智能生成詞卡</h1>
 
-            {/* Mode Selection */}
+            {/* Input Mode Selection */}
             <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
-              <h2 className="text-lg font-semibold mb-4">選擇生成模式</h2>
+              <h2 className="text-lg font-semibold mb-4">原始例句類型</h2>
               <div className="grid grid-cols-2 gap-4">
                 <button
-                  onClick={() => setMode('text')}
+                  onClick={() => setMode('manual')}
                   className={`p-4 rounded-lg border-2 transition-all ${
-                    mode === 'text' 
-                      ? 'border-primary bg-primary-light' 
+                    mode === 'manual'
+                      ? 'border-primary bg-primary-light'
                       : 'border-gray-200 hover:border-gray-300'
                   }`}
                 >
-                  <div className="text-2xl mb-2">📄</div>
-                  <div className="font-semibold">文字輸入</div>
-                  <div className="text-sm text-gray-600 mt-1">貼上影劇對話或文章</div>
+                  <div className="text-2xl mb-2">✍️</div>
+                  <div className="font-semibold">手動輸入</div>
+                  <div className="text-sm text-gray-600 mt-1">貼上或輸入英文文本</div>
                 </button>
                 <button
-                  onClick={() => setMode('theme')}
+                  onClick={() => setMode('screenshot')}
+                  disabled={!isPremium}
+                  className={`p-4 rounded-lg border-2 transition-all relative ${
+                    mode === 'screenshot'
+                      ? 'border-primary bg-primary-light'
+                      : isPremium
+                      ? 'border-gray-200 hover:border-gray-300'
+                      : 'border-gray-200 bg-gray-100 cursor-not-allowed opacity-60'
+                  }`}
+                >
+                  <div className="text-2xl mb-2">📷</div>
+                  <div className="font-semibold">影劇截圖</div>
+                  <div className="text-sm text-gray-600 mt-1">上傳影劇截圖 (Phase 2)</div>
+                  {!isPremium && (
+                    <div className="absolute top-2 right-2 px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">
+                      訂閱功能
+                    </div>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Extraction Type Selection */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">萃取方式</h2>
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={() => setExtractionType('vocabulary')}
                   className={`p-4 rounded-lg border-2 transition-all ${
-                    mode === 'theme' 
-                      ? 'border-primary bg-primary-light' 
+                    extractionType === 'vocabulary'
+                      ? 'border-primary bg-primary-light'
                       : 'border-gray-200 hover:border-gray-300'
                   }`}
                 >
-                  <div className="text-2xl mb-2">🎨</div>
-                  <div className="font-semibold">主題選擇</div>
-                  <div className="text-sm text-gray-600 mt-1">選擇預設學習主題</div>
+                  <div className="text-2xl mb-2">📖</div>
+                  <div className="font-semibold">詞彙萃取</div>
+                  <div className="text-sm text-gray-600 mt-1">查詢字典 API 並標記 CEFR</div>
+                </button>
+                <button
+                  onClick={() => setExtractionType('smart')}
+                  className={`p-4 rounded-lg border-2 transition-all ${
+                    extractionType === 'smart'
+                      ? 'border-primary bg-primary-light'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="text-2xl mb-2">🤖</div>
+                  <div className="font-semibold">智能萃取</div>
+                  <div className="text-sm text-gray-600 mt-1">AI 分析片語和俚語</div>
                 </button>
               </div>
             </div>
 
             {/* Content Input */}
             <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
-              {mode === 'text' ? (
+              {mode === 'manual' ? (
                 <div>
-                  <h2 className="text-lg font-semibold mb-4">輸入文本內容</h2>
+                  <h2 className="text-lg font-semibold mb-4">輸入英文文本</h2>
                   <textarea
                     value={textInput}
                     onChange={(e) => setTextInput(e.target.value)}
@@ -142,25 +214,44 @@ export default function GeneratePage() {
                   <div className="mt-2 text-sm text-gray-600">
                     最多 5000 字元 • 目前：{textInput.length} 字元
                   </div>
+
+                  {/* Extraction Type Info */}
+                  {extractionType === 'vocabulary' ? (
+                    <div className="mt-4 p-3 bg-blue-50 rounded-lg">
+                      <div className="text-sm text-blue-800">
+                        <strong>📖 詞彙萃取模式</strong>
+                        <ul className="mt-2 space-y-1 text-xs">
+                          <li>• 將每個單字查詢字典 API</li>
+                          <li>• 自動標記 CEFR 難度等級</li>
+                          <li>• 提供完整定義和例句</li>
+                        </ul>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="mt-4 p-3 bg-purple-50 rounded-lg">
+                      <div className="text-sm text-purple-800">
+                        <strong>🤖 智能萃取模式</strong>
+                        <ul className="mt-2 space-y-1 text-xs">
+                          <li>• AI 分析常用片語和俚語</li>
+                          <li>• 生成相關詞彙內容</li>
+                          <li>• 提供文化背景說明</li>
+                        </ul>
+                      </div>
+                    </div>
+                  )}
                 </div>
               ) : (
                 <div>
-                  <h2 className="text-lg font-semibold mb-4">選擇學習主題</h2>
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                    {themes.map((theme) => (
-                      <button
-                        key={theme.id}
-                        onClick={() => setSelectedTheme(theme.id)}
-                        className={`p-4 rounded-lg border-2 transition-all ${
-                          selectedTheme === theme.id
-                            ? 'border-primary bg-primary-light'
-                            : 'border-gray-200 hover:border-gray-300'
-                        }`}
-                      >
-                        <div className="text-2xl mb-1">{theme.icon}</div>
-                        <div className="font-medium text-sm">{theme.name}</div>
-                      </button>
-                    ))}
+                  <h2 className="text-lg font-semibold mb-4">上傳影劇截圖</h2>
+                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+                    <div className="text-4xl mb-3">📷</div>
+                    <div className="text-gray-600 mb-2">點擊或拖拳上傳截圖</div>
+                    <div className="text-sm text-gray-500">支持 JPG, PNG 格式，最大 10MB</div>
+                    <div className="mt-4">
+                      <span className="inline-block px-4 py-2 bg-gray-100 text-gray-400 rounded-lg">
+                        Phase 2 功能開發中
+                      </span>
+                    </div>
                   </div>
                 </div>
               )}
@@ -172,21 +263,7 @@ export default function GeneratePage() {
               <div className="space-y-4">
                 <div>
                   <label className="block text-sm font-medium text-gray-700 mb-2">
-                    難度等級
-                  </label>
-                  <select
-                    value={difficulty}
-                    onChange={(e) => setDifficulty(e.target.value)}
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none"
-                  >
-                    <option value="beginner">初級</option>
-                    <option value="intermediate">中級</option>
-                    <option value="advanced">高級</option>
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    生成數量：{cardCount} 個
+                    生成數量：{cardCount} 個詞卡
                   </label>
                   <input
                     type="range"
@@ -198,16 +275,44 @@ export default function GeneratePage() {
                   />
                   <div className="flex justify-between text-xs text-gray-500 mt-1">
                     <span>5</span>
+                    <span>預設 10</span>
                     <span>20</span>
                   </div>
                 </div>
+
+                {/* User Limits */}
+                <div className="p-3 bg-gray-50 rounded-lg">
+                  <div className="text-sm">
+                    {isPremium ? (
+                      <div className="text-green-700">
+                        <strong>🌟 訂閱用戶</strong>
+                        <div className="text-xs mt-1">
+                          • 每天最多生成 50 張例句圖
+                          <br />
+                          • 今日已使用：0/50
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="text-gray-700">
+                        <strong>🆓 免費用戶</strong>
+                        <div className="text-xs mt-1">
+                          • 無法自行生成例句圖
+                          <br />
+                          • 可使用系統現成例句圖
+                          <br />
+                          • 每日學習數量無限制
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
               </div>
             </div>
 
             {/* Generate Button */}
             <button
               onClick={handleGenerate}
-              disabled={isGenerating || (mode === 'text' && !textInput) || (mode === 'theme' && !selectedTheme)}
+              disabled={isGenerating || (mode === 'manual' && !textInput) || (mode === 'screenshot')}
               className="w-full bg-primary text-white py-4 rounded-lg font-semibold hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isGenerating ? (
@@ -216,10 +321,12 @@ export default function GeneratePage() {
                     <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                     <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                   </svg>
-                  AI 正在生成中...
+                  正在萃取詞彙中...
                 </span>
+              ) : extractionType === 'vocabulary' ? (
+                '📖 開始詞彙萃取'
               ) : (
-                '🤖 開始生成詞卡'
+                '🤖 開始智能萃取'
               )}
             </button>
           </div>
@@ -252,37 +359,163 @@ export default function GeneratePage() {
                 </div>
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                 {generatedCards.map((card) => (
-                  <div key={card.id} className="border rounded-lg p-4 hover:shadow-md transition-shadow">
-                    <div className="flex items-start justify-between mb-3">
-                      <div>
-                        <h3 className="text-lg font-semibold">{card.word}</h3>
-                        <div className="text-sm text-gray-600">
-                          {card.partOfSpeech} • {card.pronunciation}
+                  <div key={card.id} className="border rounded-lg p-5 hover:shadow-lg transition-shadow">
+                    <div className="flex items-start justify-between mb-4">
+                      <div className="flex-1">
+                        <h3 className="text-xl font-bold">{card.word}</h3>
+                        <div className="flex items-center gap-4 mt-1">
+                          <span className="text-sm text-gray-600">{card.partOfSpeech}</span>
+                          <div className="flex items-center gap-2">
+                            <button className="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
+                              🇺🇸 {card.pronunciation.us}
+                            </button>
+                            <button className="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
+                              🇬🇧 {card.pronunciation.uk}
+                            </button>
+                            <button className="text-primary hover:text-primary-hover">
+                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                              </svg>
+                            </button>
+                          </div>
                         </div>
                       </div>
-                      <button className="text-red-500 hover:text-red-700">
-                        ×
-                      </button>
+                      <button className="text-red-500 hover:text-red-700 text-2xl">×</button>
                     </div>
-                    <div className="space-y-2">
+
+                    <div className="space-y-3">
                       <div>
-                        <div className="text-sm font-medium text-gray-700">翻譯</div>
-                        <div className="text-sm">{card.translation}</div>
+                        <div className="text-sm font-semibold text-gray-700">翻譯</div>
+                        <div className="text-base font-medium">{card.translation}</div>
                       </div>
+
                       <div>
-                        <div className="text-sm font-medium text-gray-700">定義</div>
+                        <div className="text-sm font-semibold text-gray-700">定義</div>
                         <div className="text-sm text-gray-600">{card.definition}</div>
                       </div>
+
+                      {card.synonyms.length > 0 && (
+                        <div>
+                          <div className="text-sm font-semibold text-gray-700">同義詞</div>
+                          <div className="flex flex-wrap gap-2 mt-1">
+                            {card.synonyms.map((syn, idx) => (
+                              <span key={idx} className="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">
+                                {syn}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {card.antonyms.length > 0 && (
+                        <div>
+                          <div className="text-sm font-semibold text-gray-700">反義詞</div>
+                          <div className="flex flex-wrap gap-2 mt-1">
+                            {card.antonyms.map((ant, idx) => (
+                              <span key={idx} className="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">
+                                {ant}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
                       <div>
-                        <div className="text-sm font-medium text-gray-700">例句</div>
-                        <div className="text-sm text-gray-600">{card.example}</div>
-                        <div className="text-sm text-gray-500 mt-1">{card.exampleTranslation}</div>
+                        <div className="text-sm font-semibold text-gray-700 mb-2">例句</div>
+                        <div className="space-y-3">
+                          {/* 原始例句 */}
+                          <div className="border-l-2 border-gray-400 pl-3">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <div className="text-xs text-gray-500 mb-1">原始例句（來自輸入文本）</div>
+                                <div className="text-sm text-gray-800">
+                                  {card.originalExample.split(card.word).map((part, i) => (
+                                    <span key={i}>
+                                      {part}
+                                      {i < card.originalExample.split(card.word).length - 1 && (
+                                        <span className="font-bold text-primary">{card.word}</span>
+                                      )}
+                                    </span>
+                                  ))}
+                                </div>
+                                <div className="text-sm text-gray-500 mt-1">{card.originalExampleTranslation}</div>
+                              </div>
+                              <div className="flex items-center gap-1 ml-2">
+                                <button className="text-gray-400 hover:text-primary" title="播放例句">
+                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                  </svg>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 生成例句 */}
+                          <div className="border-l-2 border-primary pl-3">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <div className="text-xs text-primary mb-1">AI 生成例句</div>
+                                <div className="text-sm text-gray-800">
+                                  {card.generatedExample.sentence.split(card.word).map((part, i) => (
+                                    <span key={i}>
+                                      {part}
+                                      {i < card.generatedExample.sentence.split(card.word).length - 1 && (
+                                        <span className="font-bold text-primary">{card.word}</span>
+                                      )}
+                                    </span>
+                                  ))}
+                                </div>
+                                <div className="text-sm text-gray-500 mt-1">{card.generatedExample.translation}</div>
+                              </div>
+                              <div className="flex items-center gap-1 ml-2">
+                                <button className="text-gray-400 hover:text-primary" title="播放例句">
+                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                  </svg>
+                                </button>
+                                <button
+                                  onClick={() => toggleImageForCard(card.id)}
+                                  className={`${showImageForCard[card.id] ? 'text-primary' : 'text-gray-400'} hover:text-primary`}
+                                  title={showImageForCard[card.id] ? "隱藏例句圖" : "查看例句圖"}
+                                >
+                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                  </svg>
+                                </button>
+                              </div>
+                            </div>
+
+                            {/* Example Image Display */}
+                            {showImageForCard[card.id] && card.generatedExample.imageUrl && (
+                              <div className="mt-3 p-2 bg-gray-50 rounded-lg">
+                                <div className="text-xs text-gray-600 mb-2 flex items-center gap-1">
+                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                  </svg>
+                                  例句情境圖
+                                </div>
+                                <img
+                                  src={card.generatedExample.imageUrl}
+                                  alt="Example context"
+                                  className="w-full rounded-md shadow-sm cursor-pointer hover:shadow-lg transition-shadow"
+                                  style={{ maxHeight: '250px', objectFit: 'contain', backgroundColor: 'white' }}
+                                  onClick={() => setModalImage(card.generatedExample.imageUrl)}
+                                />
+                                <div className="text-xs text-gray-500 mt-2 text-center">點擊圖片可放大查看</div>
+                              </div>
+                            )}
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div className="mt-3 pt-3 border-t">
-                      <button className="text-primary text-sm hover:text-primary-hover">
+
+                    <div className="mt-4 pt-3 border-t flex justify-between items-center">
+                      <span className="text-xs text-gray-500">難度：CEFR {card.difficulty}</span>
+                      <button className="text-primary text-sm hover:text-primary-hover font-medium">
                         編輯詞卡
                       </button>
                     </div>
@@ -293,6 +526,39 @@ export default function GeneratePage() {
           </div>
         )}
       </div>
+
+      {/* Image Modal */}
+      {modalImage && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4"
+          onClick={() => setModalImage(null)}
+        >
+          <div
+            className="relative max-w-4xl max-h-[90vh] bg-white rounded-lg overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Close Button */}
+            <button
+              onClick={() => setModalImage(null)}
+              className="absolute top-2 right-2 z-10 p-2 bg-white bg-opacity-90 rounded-full hover:bg-opacity-100 transition-all shadow-lg"
+            >
+              <svg className="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            {/* Image */}
+            <div className="p-4">
+              <img
+                src={modalImage}
+                alt="Example context enlarged"
+                className="w-full h-full object-contain"
+                style={{ maxHeight: 'calc(90vh - 2rem)' }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
\ No newline at end of file
diff --git a/app/learn/page.tsx b/app/learn/page.tsx
index 01fb797..78f309e 100644
--- a/app/learn/page.tsx
+++ b/app/learn/page.tsx
@@ -6,60 +6,70 @@ import Link from 'next/link'
 export default function LearnPage() {
   const [currentCardIndex, setCurrentCardIndex] = useState(0)
   const [isFlipped, setIsFlipped] = useState(false)
-  const [mode, setMode] = useState<'flip' | 'quiz'>('flip')
+  const [mode, setMode] = useState<'flip' | 'quiz' | 'fill' | 'listening' | 'speaking'>('flip')
   const [score, setScore] = useState({ correct: 0, total: 0 })
   const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
   const [showResult, setShowResult] = useState(false)
+  const [fillAnswer, setFillAnswer] = useState('')
+  const [showHint, setShowHint] = useState(false)
+  const [isRecording, setIsRecording] = useState(false)
+  const [audioPlaying, setAudioPlaying] = useState(false)
+  const [modalImage, setModalImage] = useState<string | null>(null)
 
-  // Mock data
+  // Mock data with real example images
   const cards = [
     {
       id: 1,
-      word: 'negotiate',
+      word: 'brought',
       partOfSpeech: 'verb',
-      pronunciation: '/nɪˈɡoʊʃieɪt/',
-      translation: '協商、談判',
-      definition: 'To discuss something with someone in order to reach an agreement',
-      example: 'We need to negotiate a better deal with our suppliers.',
-      exampleTranslation: '我們需要與供應商協商更好的交易。',
-      synonyms: ['bargain', 'discuss', 'mediate'],
-      difficulty: 'intermediate'
+      pronunciation: '/brɔːt/',
+      translation: '提出、帶來',
+      definition: 'Past tense of bring; to mention or introduce a topic in conversation',
+      example: 'He brought this thing up during our meeting and no one agreed.',
+      exampleTranslation: '他在我們的會議中提出了這件事，但沒有人同意。',
+      exampleImage: '/images/examples/bring_up.png',
+      synonyms: ['mentioned', 'raised', 'introduced'],
+      difficulty: 'B1'
     },
     {
       id: 2,
-      word: 'perspective',
+      word: 'instincts',
       partOfSpeech: 'noun',
-      pronunciation: '/pərˈspektɪv/',
-      translation: '觀點、看法',
-      definition: 'A particular way of considering something',
-      example: 'From my perspective, this is the best solution.',
-      exampleTranslation: '從我的角度來看，這是最好的解決方案。',
-      synonyms: ['viewpoint', 'outlook', 'stance'],
-      difficulty: 'intermediate'
+      pronunciation: '/ˈɪnstɪŋkts/',
+      translation: '本能、直覺',
+      definition: 'Natural abilities that help living things survive without learning',
+      example: 'Animals use their instincts to find food and stay safe.',
+      exampleTranslation: '動物利用本能來尋找食物並保持安全。',
+      exampleImage: '/images/examples/instinct.png',
+      synonyms: ['intuition', 'impulse', 'tendency'],
+      difficulty: 'B2'
     },
     {
       id: 3,
-      word: 'accomplish',
-      partOfSpeech: 'verb',
-      pronunciation: '/əˈkɒmplɪʃ/',
-      translation: '完成、達成',
-      definition: 'To finish something successfully or to achieve something',
-      example: 'She accomplished her goal of running a marathon.',
-      exampleTranslation: '她完成了跑馬拉松的目標。',
-      synonyms: ['achieve', 'complete', 'fulfill'],
-      difficulty: 'intermediate'
+      word: 'warrants',
+      partOfSpeech: 'noun',
+      pronunciation: '/ˈwɔːrənts/',
+      translation: '搜查令、授權令',
+      definition: 'Official documents that give police permission to do something',
+      example: 'The police obtained warrants to search the building.',
+      exampleTranslation: '警方取得了搜查令來搜查這棟建築物。',
+      exampleImage: '/images/examples/warrant.png',
+      synonyms: ['authorization', 'permit', 'license'],
+      difficulty: 'C1'
     }
   ]
 
   const currentCard = cards[currentCardIndex]
 
-  // Quiz mode options
+  // Quiz mode options - dynamically generate from current cards
   const quizOptions = [
-    '協商、談判',
-    '觀點、看法',
-    '完成、達成',
-    '建議、提議'
-  ]
+    cards[currentCardIndex].translation,
+    ...cards
+      .filter((_, idx) => idx !== currentCardIndex)
+      .map(card => card.translation)
+      .slice(0, 2),
+    '建議、提議' // additional wrong option
+  ].sort(() => Math.random() - 0.5) // shuffle options
 
   const handleFlip = () => {
     setIsFlipped(!isFlipped)
@@ -71,6 +81,8 @@ export default function LearnPage() {
       setIsFlipped(false)
       setSelectedAnswer(null)
       setShowResult(false)
+      setFillAnswer('')
+      setShowHint(false)
     }
   }
 
@@ -80,6 +92,8 @@ export default function LearnPage() {
       setIsFlipped(false)
       setSelectedAnswer(null)
       setShowResult(false)
+      setFillAnswer('')
+      setShowHint(false)
     }
   }
 
@@ -143,10 +157,10 @@ export default function LearnPage() {
 
         {/* Mode Toggle */}
         <div className="flex justify-center mb-6">
-          <div className="bg-white rounded-lg shadow-sm p-1 inline-flex">
+          <div className="bg-white rounded-lg shadow-sm p-1 inline-flex flex-wrap">
             <button
               onClick={() => setMode('flip')}
-              className={`px-4 py-2 rounded-md transition-colors ${
+              className={`px-3 py-2 rounded-md transition-colors ${
                 mode === 'flip'
                   ? 'bg-primary text-white'
                   : 'text-gray-600 hover:text-gray-900'
@@ -156,13 +170,43 @@ export default function LearnPage() {
             </button>
             <button
               onClick={() => setMode('quiz')}
-              className={`px-4 py-2 rounded-md transition-colors ${
+              className={`px-3 py-2 rounded-md transition-colors ${
                 mode === 'quiz'
                   ? 'bg-primary text-white'
                   : 'text-gray-600 hover:text-gray-900'
               }`}
             >
-              測驗模式
+              選擇題
+            </button>
+            <button
+              onClick={() => setMode('fill')}
+              className={`px-3 py-2 rounded-md transition-colors ${
+                mode === 'fill'
+                  ? 'bg-primary text-white'
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
+            >
+              填空題
+            </button>
+            <button
+              onClick={() => setMode('listening')}
+              className={`px-3 py-2 rounded-md transition-colors ${
+                mode === 'listening'
+                  ? 'bg-primary text-white'
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
+            >
+              聽力測試
+            </button>
+            <button
+              onClick={() => setMode('speaking')}
+              className={`px-3 py-2 rounded-md transition-colors ${
+                mode === 'speaking'
+                  ? 'bg-primary text-white'
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}
+            >
+              口說測試
             </button>
           </div>
         </div>
@@ -269,13 +313,17 @@ export default function LearnPage() {
               </div>
             )}
           </div>
-        ) : (
-          /* Quiz Mode */
+        ) : mode === 'quiz' ? (
+          /* Quiz Mode - 選擇題：英文定義選中文翻譯 */
           <div className="bg-white rounded-2xl shadow-xl p-8">
             <div className="mb-6">
-              <div className="text-sm text-gray-600 mb-2">選擇正確的翻譯</div>
-              <div className="text-3xl font-bold text-gray-900">{currentCard.word}</div>
-              <div className="text-lg text-gray-500 mt-1">{currentCard.pronunciation}</div>
+              <div className="text-sm text-gray-600 mb-2">根據定義選擇正確的中文翻譯</div>
+              <div className="text-xl text-gray-800 leading-relaxed">
+                {currentCard.definition}
+              </div>
+              <div className="text-sm text-gray-500 mt-2">
+                ({currentCard.partOfSpeech})
+              </div>
             </div>
 
             <div className="space-y-3">
@@ -318,15 +366,263 @@ export default function LearnPage() {
                 <div className="text-gray-500 text-sm mt-1">{currentCard.exampleTranslation}</div>
               </div>
             )}
+          </div>
+        ) : mode === 'fill' ? (
+          /* Fill in the Blank Mode - 填空題 */
+          <div className="bg-white rounded-2xl shadow-xl p-8">
+            <div className="mb-6">
+              <div className="text-sm text-gray-600 mb-4">根據例句圖片和句子填入正確的詞彙</div>
 
-            <div className="mt-6 text-center">
-              <div className="text-sm text-gray-600">
-                正確率：{score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0}% 
-                ({score.correct}/{score.total})
+              {/* Example Image */}
+              {currentCard.exampleImage && (
+                <div className="mb-4">
+                  <img
+                    src={currentCard.exampleImage}
+                    alt="Example context"
+                    className="w-full rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow"
+                    style={{ maxHeight: '400px', objectFit: 'contain' }}
+                    onClick={() => setModalImage(currentCard.exampleImage)}
+                  />
+                  <div className="text-xs text-gray-500 mt-2 text-center">點擊圖片可放大查看</div>
+                </div>
+              )}
+
+              {/* Example Sentence with Blank */}
+              <div className="text-lg text-gray-800 mb-4">
+                {currentCard.example.split(currentCard.word).map((part, i) => (
+                  <span key={i}>
+                    {part}
+                    {i < currentCard.example.split(currentCard.word).length - 1 && (
+                      <span className="inline-block w-32 border-b-2 border-gray-400 mx-1"></span>
+                    )}
+                  </span>
+                ))}
               </div>
+
+              {/* Hint Button */}
+              {!showHint && (
+                <button
+                  onClick={() => setShowHint(true)}
+                  className="text-sm text-primary hover:text-primary-hover flex items-center gap-1"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  點擊查看提示
+                </button>
+              )}
+
+              {/* Definition Hint */}
+              {showHint && (
+                <div className="mt-3 p-3 bg-blue-50 rounded-lg">
+                  <div className="text-sm text-blue-800">
+                    <strong>定義提示：</strong> {currentCard.definition}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Answer Input */}
+            <div className="mb-6">
+              <input
+                type="text"
+                value={fillAnswer}
+                onChange={(e) => setFillAnswer(e.target.value)}
+                placeholder="輸入答案..."
+                className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-primary focus:outline-none text-lg"
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter' && fillAnswer) {
+                    setShowResult(true)
+                  }
+                }}
+              />
+            </div>
+
+            {/* Submit Button */}
+            {!showResult && (
+              <button
+                onClick={() => fillAnswer && setShowResult(true)}
+                disabled={!fillAnswer}
+                className="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                提交答案
+              </button>
+            )}
+
+            {/* Result Display */}
+            {showResult && (
+              <div className={`p-4 rounded-lg ${
+                fillAnswer.toLowerCase() === currentCard.word.toLowerCase()
+                  ? 'bg-green-50 border-2 border-green-500'
+                  : 'bg-red-50 border-2 border-red-500'
+              }`}>
+                <div className="flex items-center justify-between mb-2">
+                  <span className={`font-semibold ${
+                    fillAnswer.toLowerCase() === currentCard.word.toLowerCase()
+                      ? 'text-green-700'
+                      : 'text-red-700'
+                  }`}>
+                    {fillAnswer.toLowerCase() === currentCard.word.toLowerCase() ? '✓ 正確！' : '✗ 錯誤'}
+                  </span>
+                </div>
+                {fillAnswer.toLowerCase() !== currentCard.word.toLowerCase() && (
+                  <div className="text-sm text-gray-700">
+                    正確答案：<span className="font-bold">{currentCard.word}</span>
+                  </div>
+                )}
+                <div className="mt-3 text-sm text-gray-600">
+                  <div className="font-semibold mb-1">完整例句：</div>
+                  <div>{currentCard.example}</div>
+                  <div className="text-gray-500 mt-1">{currentCard.exampleTranslation}</div>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : mode === 'listening' ? (
+          /* Listening Test Mode - 聽力測試 */
+          <div className="bg-white rounded-2xl shadow-xl p-8">
+            <div className="mb-6 text-center">
+              <div className="text-sm text-gray-600 mb-4">聽音頻，選擇正確的單字</div>
+
+              {/* Audio Play Button */}
+              <button
+                onClick={() => {
+                  setAudioPlaying(true)
+                  // Simulate audio playing
+                  setTimeout(() => setAudioPlaying(false), 2000)
+                }}
+                className="mx-auto mb-6 p-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"
+              >
+                {audioPlaying ? (
+                  <svg className="w-16 h-16 text-primary animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                  </svg>
+                ) : (
+                  <svg className="w-16 h-16 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                )}
+              </button>
+
+              <div className="text-sm text-gray-500">點擊播放按鈕聽發音</div>
+            </div>
+
+            {/* Word Options */}
+            <div className="grid grid-cols-2 gap-3">
+              {[currentCard.word, 'determine', 'achieve', 'consider'].map((word) => (
+                <button
+                  key={word}
+                  onClick={() => !showResult && handleQuizAnswer(word)}
+                  disabled={showResult}
+                  className={`p-4 text-lg font-medium rounded-lg border-2 transition-all ${
+                    showResult && word === currentCard.word
+                      ? 'border-green-500 bg-green-50'
+                      : showResult && word === selectedAnswer && word !== currentCard.word
+                      ? 'border-red-500 bg-red-50'
+                      : selectedAnswer === word
+                      ? 'border-primary bg-primary-light'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  {word}
+                </button>
+              ))}
+            </div>
+
+            {/* Result Display */}
+            {showResult && (
+              <div className="mt-6 p-4 bg-gray-50 rounded-lg">
+                <div className="text-sm font-semibold text-gray-700 mb-2">單字詳情</div>
+                <div className="space-y-2">
+                  <div>
+                    <span className="font-semibold">{currentCard.word}</span> - {currentCard.translation}
+                  </div>
+                  <div className="text-sm text-gray-600">{currentCard.definition}</div>
+                  <div className="text-sm text-gray-500 italic">"{currentCard.example}"</div>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : mode === 'speaking' ? (
+          /* Speaking Test Mode - 口說測試 */
+          <div className="bg-white rounded-2xl shadow-xl p-8">
+            <div className="mb-6">
+              <div className="text-sm text-gray-600 mb-4">念出以下例句</div>
+
+              {/* Target Sentence */}
+              <div className="p-6 bg-gray-50 rounded-lg mb-6">
+                <div className="text-xl text-gray-800 leading-relaxed mb-3">
+                  {currentCard.example}
+                </div>
+                <div className="text-gray-600">
+                  {currentCard.exampleTranslation}
+                </div>
+              </div>
+
+              {/* Pronunciation Guide */}
+              <div className="mb-6">
+                <div className="text-sm text-gray-600 mb-2">重點單字發音：</div>
+                <div className="flex items-center gap-4">
+                  <span className="font-semibold text-lg">{currentCard.word}</span>
+                  <span className="text-gray-500">{currentCard.pronunciation}</span>
+                  <button className="text-primary hover:text-primary-hover">
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              {/* Recording Button */}
+              <div className="text-center">
+                <button
+                  onClick={() => {
+                    setIsRecording(!isRecording)
+                    if (!isRecording) {
+                      // Start recording
+                      setTimeout(() => {
+                        setIsRecording(false)
+                        setShowResult(true)
+                      }, 3000)
+                    }
+                  }}
+                  className={`p-6 rounded-full transition-all ${
+                    isRecording
+                      ? 'bg-red-500 hover:bg-red-600 animate-pulse'
+                      : 'bg-primary hover:bg-primary-hover'
+                  }`}
+                >
+                  {isRecording ? (
+                    <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
+                    </svg>
+                  ) : (
+                    <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
+                    </svg>
+                  )}
+                </button>
+                <div className="mt-3 text-sm text-gray-600">
+                  {isRecording ? '錄音中... 點擊停止' : '點擊開始錄音'}
+                </div>
+              </div>
+
+              {/* Result Display */}
+              {showResult && (
+                <div className="mt-6 p-4 bg-green-50 border-2 border-green-500 rounded-lg">
+                  <div className="text-green-700 font-semibold mb-2">
+                    ✓ 完成口說練習！
+                  </div>
+                  <div className="text-sm text-gray-600">
+                    提示：持續練習可以提高發音準確度和流暢度
+                  </div>
+                </div>
+              )}
             </div>
           </div>
-        )}
+        ) : null}
 
         {/* Navigation Buttons */}
         <div className="flex justify-between mt-8">
@@ -353,6 +649,39 @@ export default function LearnPage() {
           </button>
         </div>
       </div>
+
+      {/* Image Modal */}
+      {modalImage && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4"
+          onClick={() => setModalImage(null)}
+        >
+          <div
+            className="relative max-w-4xl max-h-[90vh] bg-white rounded-lg overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Close Button */}
+            <button
+              onClick={() => setModalImage(null)}
+              className="absolute top-2 right-2 z-10 p-2 bg-white bg-opacity-90 rounded-full hover:bg-opacity-100 transition-all shadow-lg"
+            >
+              <svg className="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            {/* Image */}
+            <div className="p-4">
+              <img
+                src={modalImage}
+                alt="Example context enlarged"
+                className="w-full h-full object-contain"
+                style={{ maxHeight: 'calc(90vh - 2rem)' }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
\ No newline at end of file
diff --git a/docs/01_requirement/functional-requirements.md b/docs/01_requirement/functional-requirements.md
index 8b29d75..b6dc455 100644
--- a/docs/01_requirement/functional-requirements.md
+++ b/docs/01_requirement/functional-requirements.md
@@ -60,26 +60,34 @@
     - 電影台詞（Movie Quotes）
     - 學術英語（Academic English）
   - 自定義主題輸入
-  - 難度選擇：初級/中級/高級
+  - 難度選擇：A1, A2, B1, B2, C1, C2
 
 #### 1.2.2 AI 生成規格
+- **生成方式**
+  1. 原始例句類型
+    - 影劇截圖(訂閱功能, phase2)
+    - 手動輸入
+  2. 詞彙萃取：把每個單字拿去查詢字典API，並標記CEFR    
+  3. 智能萃取(訂閱功能)：將原始例句拿去問AI有無常用片語或俚語，並直接生成相關詞彙內容
+
 - **生成數量**
   - 預設：10個詞卡
   - 範圍：5-20個（用戶可調）
-  - 免費用戶：每日50個限制
-  - 付費用戶：無限制
+  - 免費用戶：
+    - 無法自行生成例句圖，但若系統中匹配到現成例句圖，可直接使用
+    - 每日學習數量無限制
+  - 訂閱用戶：每天最多生成50張例句圖
 
 - **生成內容詳情**
   - **單字/片語**
     - 原形展示
-    - 詞性標註（n./v./adj./adv./phrase）
-    - 同義詞（最多3個）
+    - 詞性標註（n./v./adj./adv./phrase/slang）
+    - 英文定義 (程度應維持在A1-A2)
+    - 同義詞（最多3個且程度應維持在A1-A2）
     - 反義詞（如適用）
 
   - **翻譯**
     - 繁體中文翻譯
-    - 多義詞說明
-    - 慣用語解釋
 
   - **發音**
     - IPA 國際音標
@@ -88,19 +96,11 @@
 
   - **例句**
     - 原始例句（來自輸入文本）
-    - 生成例句（2-3個）
+    - 生成例句（1個）
     - 例句中文翻譯
     - 重點標示（highlight目標詞）
-
-  - **使用情境**
-    - 正式/非正式場合
-    - 使用頻率（常用/進階/罕見）
-    - 文化背景說明（如有）
-
-  - **記憶提示**
-    - 詞根詞綴分析
-    - 聯想記憶法
-    - 圖像記憶（未來功能）
+    - 例句圖
+    - 例句發音
 
 - **生成後處理**
   - 預覽所有生成詞卡
@@ -170,12 +170,12 @@
 
 #### 1.4.1 間隔重複算法（SM-2）
 - **算法參數**
-  - 初始間隔：1天、3天、7天、14天、30天
+  - 初始間隔：2^0天、2^1天...依此類推
   - 難度係數：0.8-2.5
   - 最小間隔：1天
   - 最大間隔：365天
 
-- **評分系統**
+- **評分及間隔時間**
   - 1分：完全不記得（重置進度）
   - 2分：有印象但錯誤（間隔×0.6）
   - 3分：困難但正確（間隔×0.8）
@@ -189,17 +189,20 @@
 
 #### 1.4.2 學習模式
 - **翻卡模式**
-  - 正面：英文單字
-  - 背面：翻譯、例句、發音
+  - 正面：英文詞彙
+  - 背面：英文定義、例句、發音、例句圖
   - 手勢操作：左滑（不記得）、右滑（記得）、上滑（收藏）
   - 鍵盤快捷鍵支援
 
 - **測驗模式**
-  - 選擇題（4選1）
-  - 填空題（例句挖空）
-  - 拼寫測試
+  - 選擇題（題目是英文定義，答案中文翻譯4選1）
+  - 填空題
+    - 題目是顯示例句圖和挖空的例句
+    - 點擊提示，會出現詞彙的英文定義
+    - 答案就是詞彙，但是不是原型，而是例句挖空的部分
+  - 拼寫測試 (phase 2)
   - 聽力測試（聽音選詞）
-  - 即時反饋和解釋
+  - 口說測試 (念例句)
 
 - **沉浸模式**
   - 全螢幕學習
diff --git a/docs/03_development/api/api-endpoints-detailed.md b/docs/03_development/api/api-endpoints-detailed.md
new file mode 100644
index 0000000..476aaf7
--- /dev/null
+++ b/docs/03_development/api/api-endpoints-detailed.md
@@ -0,0 +1,742 @@
+# DramaLing API 端點詳細規格
+
+## 🌐 API 基礎設定
+
+### Base URL
+```
+Development: http://localhost:3000/api
+Production: https://api.dramaling.com
+```
+
+### 認證方式
+```http
+Authorization: Bearer <JWT_TOKEN>
+```
+
+### 響應格式
+```typescript
+interface ApiResponse<T> {
+  success: boolean
+  data?: T
+  error?: {
+    code: string
+    message: string
+    details?: any
+  }
+  meta?: {
+    pagination?: {
+      page: number
+      limit: number
+      total: number
+      totalPages: number
+    }
+  }
+}
+```
+
+## 🔐 認證 API
+
+### POST /api/auth/register
+**註冊新用戶**
+
+```typescript
+// Request
+interface RegisterRequest {
+  email: string
+  username: string
+  password: string
+  confirmPassword: string
+}
+
+// Response
+interface RegisterResponse {
+  user: {
+    id: string
+    email: string
+    username: string
+  }
+  message: string
+}
+
+// Validation
+- email: valid email format
+- username: 3-20 characters, alphanumeric and underscore
+- password: min 8 chars, must contain uppercase, lowercase, number
+- confirmPassword: must match password
+```
+
+### POST /api/auth/login
+**用戶登入**
+
+```typescript
+// Request
+interface LoginRequest {
+  email: string
+  password: string
+  rememberMe?: boolean
+}
+
+// Response
+interface LoginResponse {
+  user: User
+  accessToken: string
+  refreshToken: string
+  expiresIn: number
+}
+
+// Error codes
+- INVALID_CREDENTIALS: 帳號或密碼錯誤
+- ACCOUNT_LOCKED: 帳號被鎖定
+- EMAIL_NOT_VERIFIED: Email 未驗證
+```
+
+### POST /api/auth/logout
+**登出**
+
+```typescript
+// Request
+interface LogoutRequest {
+  refreshToken?: string
+  allDevices?: boolean
+}
+
+// Response
+interface LogoutResponse {
+  message: string
+}
+```
+
+### POST /api/auth/refresh
+**更新 Token**
+
+```typescript
+// Request
+interface RefreshRequest {
+  refreshToken: string
+}
+
+// Response
+interface RefreshResponse {
+  accessToken: string
+  refreshToken: string
+  expiresIn: number
+}
+```
+
+### POST /api/auth/verify-email
+**驗證 Email**
+
+```typescript
+// Request
+interface VerifyEmailRequest {
+  token: string
+}
+
+// Response
+interface VerifyEmailResponse {
+  message: string
+  user: User
+}
+```
+
+### POST /api/auth/forgot-password
+**忘記密碼**
+
+```typescript
+// Request
+interface ForgotPasswordRequest {
+  email: string
+}
+
+// Response
+interface ForgotPasswordResponse {
+  message: string
+}
+```
+
+### POST /api/auth/reset-password
+**重設密碼**
+
+```typescript
+// Request
+interface ResetPasswordRequest {
+  token: string
+  newPassword: string
+  confirmPassword: string
+}
+
+// Response
+interface ResetPasswordResponse {
+  message: string
+}
+```
+
+### POST /api/auth/google
+**Google OAuth**
+
+```typescript
+// Request
+interface GoogleAuthRequest {
+  idToken: string
+}
+
+// Response
+interface GoogleAuthResponse {
+  user: User
+  accessToken: string
+  refreshToken: string
+  isNewUser: boolean
+}
+```
+
+## 🎃 用戶 API
+
+### GET /api/users/profile
+**獲取用戶資料**
+
+```typescript
+// Response
+interface ProfileResponse {
+  user: User
+  profile: UserProfile
+  stats: UserStats
+}
+```
+
+### PUT /api/users/profile
+**更新用戶資料**
+
+```typescript
+// Request
+interface UpdateProfileRequest {
+  username?: string
+  displayName?: string
+  bio?: string
+  avatar?: File
+  preferredLanguage?: string
+  timezone?: string
+}
+
+// Response
+interface UpdateProfileResponse {
+  user: User
+  message: string
+}
+```
+
+### PUT /api/users/settings
+**更新用戶設定**
+
+```typescript
+// Request
+interface UpdateSettingsRequest {
+  dailyGoal?: number
+  reminderEnabled?: boolean
+  reminderTime?: string
+  emailNotifications?: boolean
+  pushNotifications?: boolean
+  theme?: 'light' | 'dark' | 'auto'
+  studyMode?: 'flip' | 'quiz' | 'typing'
+}
+```
+
+### DELETE /api/users/account
+**刪除帳號**
+
+```typescript
+// Request
+interface DeleteAccountRequest {
+  password: string
+  reason?: string
+}
+
+// Response
+interface DeleteAccountResponse {
+  message: string
+}
+```
+
+## 🎓 詞卡 API
+
+### GET /api/flashcard-sets
+**獲取卡組列表**
+
+```typescript
+// Query parameters
+interface GetSetsQuery {
+  page?: number
+  limit?: number
+  search?: string
+  tags?: string[]
+  orderBy?: 'created' | 'updated' | 'name' | 'progress'
+  order?: 'asc' | 'desc'
+}
+
+// Response
+interface GetSetsResponse {
+  sets: FlashcardSet[]
+  pagination: Pagination
+}
+```
+
+### POST /api/flashcard-sets
+**創建卡組**
+
+```typescript
+// Request
+interface CreateSetRequest {
+  name: string
+  description?: string
+  color?: string
+  tags?: string[]
+  isPublic?: boolean
+}
+
+// Response
+interface CreateSetResponse {
+  set: FlashcardSet
+}
+```
+
+### GET /api/flashcard-sets/:setId
+**獲取卡組詳情**
+
+```typescript
+// Response
+interface GetSetDetailResponse {
+  set: FlashcardSet
+  cards: Flashcard[]
+  stats: SetStats
+}
+```
+
+### PUT /api/flashcard-sets/:setId
+**更新卡組**
+
+```typescript
+// Request
+interface UpdateSetRequest {
+  name?: string
+  description?: string
+  color?: string
+  tags?: string[]
+  isPublic?: boolean
+}
+```
+
+### DELETE /api/flashcard-sets/:setId
+**刪除卡組**
+
+```typescript
+// Response
+interface DeleteSetResponse {
+  message: string
+  deletedCount: number
+}
+```
+
+### GET /api/flashcards
+**獲取詞卡列表**
+
+```typescript
+// Query parameters
+interface GetCardsQuery {
+  setId?: string
+  search?: string
+  tags?: string[]
+  difficulty?: 'beginner' | 'intermediate' | 'advanced'
+  mastered?: boolean
+  favorite?: boolean
+  dueForReview?: boolean
+  page?: number
+  limit?: number
+}
+
+// Response
+interface GetCardsResponse {
+  cards: Flashcard[]
+  pagination: Pagination
+}
+```
+
+### POST /api/flashcards
+**創建詞卡**
+
+```typescript
+// Request
+interface CreateCardRequest {
+  setId: string
+  word: string
+  translation: string
+  partOfSpeech?: string
+  pronunciation?: string
+  definition?: string
+  exampleSentence?: string
+  exampleTranslation?: string
+  synonyms?: string[]
+  tags?: string[]
+  difficulty?: 'beginner' | 'intermediate' | 'advanced'
+}
+
+// Response
+interface CreateCardResponse {
+  card: Flashcard
+}
+```
+
+### PUT /api/flashcards/:cardId
+**更新詞卡**
+
+```typescript
+// Request - same as CreateCardRequest but all fields optional
+```
+
+### DELETE /api/flashcards/:cardId
+**刪除詞卡**
+
+### POST /api/flashcards/batch
+**批量操作**
+
+```typescript
+// Request
+interface BatchOperationRequest {
+  operation: 'create' | 'update' | 'delete' | 'move'
+  cardIds?: string[]
+  data?: any
+  targetSetId?: string
+}
+
+// Response
+interface BatchOperationResponse {
+  success: number
+  failed: number
+  errors?: any[]
+}
+```
+
+## 🤖 AI 生成 API
+
+### POST /api/ai/generate
+**AI 生成詞卡**
+
+```typescript
+// Request
+interface GenerateRequest {
+  mode: 'text' | 'theme'
+  input: string // text content or theme name
+  difficulty: 'beginner' | 'intermediate' | 'advanced'
+  count: number // 5-20
+  includeExamples?: boolean
+  includeSynonyms?: boolean
+}
+
+// Response
+interface GenerateResponse {
+  cards: GeneratedCard[]
+  usage: {
+    promptTokens: number
+    completionTokens: number
+    totalTokens: number
+  }
+}
+
+interface GeneratedCard {
+  word: string
+  translation: string
+  partOfSpeech: string
+  pronunciation: string
+  definition: string
+  example: string
+  exampleTranslation: string
+  synonyms: string[]
+  difficulty: string
+  confidence: number // 0-1
+}
+```
+
+### POST /api/ai/analyze-text
+**分析文本難度**
+
+```typescript
+// Request
+interface AnalyzeTextRequest {
+  text: string
+}
+
+// Response
+interface AnalyzeTextResponse {
+  difficulty: 'beginner' | 'intermediate' | 'advanced'
+  wordCount: number
+  uniqueWords: number
+  averageSentenceLength: number
+  readabilityScore: number
+  suggestedWords: string[]
+}
+```
+
+### GET /api/ai/quota
+**查詢 AI 使用額度**
+
+```typescript
+// Response
+interface QuotaResponse {
+  used: number
+  limit: number
+  resetAt: string
+  isPremium: boolean
+}
+```
+
+## 📚 學習 API
+
+### GET /api/learning/due
+**獲取待複習詞卡**
+
+```typescript
+// Query parameters
+interface GetDueCardsQuery {
+  setId?: string
+  limit?: number
+}
+
+// Response
+interface GetDueCardsResponse {
+  cards: StudyCard[]
+  totalDue: number
+}
+
+interface StudyCard extends Flashcard {
+  learningRecord: LearningRecord
+}
+```
+
+### POST /api/learning/review
+**提交評分**
+
+```typescript
+// Request
+interface ReviewRequest {
+  cardId: string
+  rating: 1 | 2 | 3 | 4 | 5
+  responseTime: number // milliseconds
+  mode: 'flip' | 'quiz' | 'typing'
+}
+
+// Response
+interface ReviewResponse {
+  nextReviewDate: string
+  interval: number
+  easeFactor: number
+  masteryLevel: number
+}
+```
+
+### GET /api/learning/stats
+**獲取學習統計**
+
+```typescript
+// Query parameters
+interface GetStatsQuery {
+  period: 'today' | 'week' | 'month' | 'year' | 'all'
+  setId?: string
+}
+
+// Response
+interface StatsResponse {
+  cardsReviewed: number
+  cardsLearned: number
+  cardsMastered: number
+  studyTime: number // minutes
+  accuracy: number // percentage
+  streak: number
+  dailyGoalProgress: number
+  chart: {
+    dates: string[]
+    values: number[]
+  }
+}
+```
+
+### POST /api/learning/session/start
+**開始學習會話**
+
+```typescript
+// Request
+interface StartSessionRequest {
+  mode: 'review' | 'learn' | 'cram'
+  setId?: string
+}
+
+// Response
+interface StartSessionResponse {
+  sessionId: string
+  cards: StudyCard[]
+}
+```
+
+### POST /api/learning/session/end
+**結束學習會話**
+
+```typescript
+// Request
+interface EndSessionRequest {
+  sessionId: string
+}
+
+// Response
+interface EndSessionResponse {
+  duration: number
+  cardsStudied: number
+  accuracy: number
+  xpEarned: number
+  achievements: Achievement[]
+}
+```
+
+## 🏆 成就 API
+
+### GET /api/achievements
+**獲取成就列表**
+
+```typescript
+// Response
+interface GetAchievementsResponse {
+  unlocked: Achievement[]
+  locked: Achievement[]
+  recent: Achievement[]
+}
+```
+
+### POST /api/achievements/:achievementId/claim
+**領取成就獎勵**
+
+```typescript
+// Response
+interface ClaimAchievementResponse {
+  xpEarned: number
+  totalXp: number
+  newLevel?: number
+}
+```
+
+## 🔔 通知 API
+
+### GET /api/notifications
+**獲取通知**
+
+```typescript
+// Query parameters
+interface GetNotificationsQuery {
+  unreadOnly?: boolean
+  type?: string
+  page?: number
+  limit?: number
+}
+
+// Response
+interface GetNotificationsResponse {
+  notifications: Notification[]
+  unreadCount: number
+  pagination: Pagination
+}
+```
+
+### PUT /api/notifications/:notificationId/read
+**標記已讀**
+
+### PUT /api/notifications/read-all
+**全部標記已讀**
+
+### DELETE /api/notifications/:notificationId
+**刪除通知**
+
+## 📁 匯出/匯入 API
+
+### GET /api/export/cards
+**匯出詞卡**
+
+```typescript
+// Query parameters
+interface ExportQuery {
+  format: 'csv' | 'json' | 'anki'
+  setId?: string
+  cardIds?: string[]
+}
+
+// Response: File download
+```
+
+### POST /api/import/cards
+**匯入詞卡**
+
+```typescript
+// Request: FormData with file
+interface ImportRequest {
+  file: File
+  setId: string
+  format: 'csv' | 'json' | 'anki'
+  duplicateStrategy: 'skip' | 'replace' | 'create'
+}
+
+// Response
+interface ImportResponse {
+  imported: number
+  skipped: number
+  errors: any[]
+}
+```
+
+## 🔒 錯誤碼規範
+
+```typescript
+enum ErrorCode {
+  // Authentication
+  AUTH_INVALID_TOKEN = 'AUTH001',
+  AUTH_TOKEN_EXPIRED = 'AUTH002',
+  AUTH_UNAUTHORIZED = 'AUTH003',
+  
+  // Validation
+  VALIDATION_ERROR = 'VAL001',
+  INVALID_INPUT = 'VAL002',
+  
+  // Resource
+  NOT_FOUND = 'RES001',
+  ALREADY_EXISTS = 'RES002',
+  
+  // Rate Limit
+  RATE_LIMIT_EXCEEDED = 'RATE001',
+  QUOTA_EXCEEDED = 'RATE002',
+  
+  // Server
+  INTERNAL_ERROR = 'SRV001',
+  SERVICE_UNAVAILABLE = 'SRV002',
+}
+```
+
+## 📊 Rate Limiting
+
+| Endpoint | Free User | Premium User |
+|----------|-----------|-------------|
+| AI Generate | 50/day | Unlimited |
+| API Calls | 1000/hour | 10000/hour |
+| File Upload | 10MB | 50MB |
+| Export | 5/day | Unlimited |
+
+## 🔧 Webhooks
+
+### 可用 Webhooks
+1. `user.created` - 新用戶註冊
+2. `user.deleted` - 用戶刪除
+3. `subscription.created` - 訂閱創建
+4. `subscription.updated` - 訂閱更新
+5. `achievement.unlocked` - 成就解鎖
+
+### Webhook Payload
+```typescript
+interface WebhookPayload {
+  event: string
+  timestamp: string
+  data: any
+  signature: string
+}
+```
\ No newline at end of file
diff --git a/docs/03_development/backend-development-plan.md b/docs/03_development/backend-development-plan.md
new file mode 100644
index 0000000..6287e4f
--- /dev/null
+++ b/docs/03_development/backend-development-plan.md
@@ -0,0 +1,381 @@
+# DramaLing 後端開發計劃
+
+## 📋 現況評估
+
+### ✅ 已完成項目
+1. **前端 Prototype** - 完整的 UI/UX 流程
+2. **功能需求文檔** - 詳細的功能規格
+3. **資料模型設計** - 基本的數據結構
+4. **API 規格** - 初步的 API 端點設計
+5. **用戶流程** - 完整的業務邏輯流程
+
+### ❌ 缺失項目
+1. **詳細的資料庫 Schema**
+2. **API 認證與授權機制細節**
+3. **第三方服務整合規格**
+4. **錯誤處理與日誌規範**
+5. **效能與擴展性要求**
+6. **部署與 DevOps 流程**
+
+## 🎯 後端開發計劃
+
+### Phase 1: 基礎架構設置 (第1週)
+
+#### 1.1 專案初始化
+```bash
+# 技術棧
+- Framework: Next.js 14 API Routes
+- Database: Supabase (PostgreSQL)
+- Authentication: NextAuth.js + Supabase Auth
+- ORM: Prisma
+- Validation: Zod
+- API Documentation: Swagger/OpenAPI
+```
+
+#### 1.2 需要完成的規格文檔
+- [ ] **資料庫 Schema 詳細設計**
+  - 所有表格結構
+  - 索引設計
+  - 關聯關係
+  - 資料遷移策略
+
+- [ ] **環境配置規格**
+  - 開發/測試/生產環境變數
+  - 資料庫連接配置
+  - 第三方服務 API Keys
+
+#### 1.3 實作任務
+- [ ] 設置 Supabase 專案
+- [ ] 配置 Prisma ORM
+- [ ] 建立資料庫 Schema
+- [ ] 設置環境變數管理
+- [ ] 配置 TypeScript 類型定義
+
+### Phase 2: 認證系統 (第1-2週)
+
+#### 2.1 需要的規格
+- [ ] **認證流程詳細設計**
+  ```typescript
+  interface AuthSpec {
+    // Email/Password 註冊流程
+    emailRegistration: {
+      validation: ValidationRules
+      emailVerification: VerificationProcess
+      welcomeEmail: EmailTemplate
+    }
+    
+    // OAuth 整合
+    googleOAuth: {
+      scopes: string[]
+      dataMapping: UserDataMapping
+      errorHandling: ErrorScenarios
+    }
+    
+    // Session 管理
+    sessionManagement: {
+      tokenExpiry: TokenExpiryRules
+      refreshStrategy: RefreshTokenStrategy
+      deviceManagement: MultiDevicePolicy
+    }
+  }
+  ```
+
+- [ ] **安全性規格**
+  - 密碼加密策略
+  - Rate limiting 規則
+  - CORS 設定
+  - CSRF 保護
+
+#### 2.2 實作任務
+- [ ] 實作註冊 API
+- [ ] 實作登入/登出 API
+- [ ] 整合 Google OAuth
+- [ ] 實作 Email 驗證
+- [ ] 實作忘記密碼功能
+- [ ] Session/Token 管理
+
+### Phase 3: 核心業務邏輯 (第2-3週)
+
+#### 3.1 AI 詞卡生成系統
+
+**需要的規格：**
+- [ ] **Gemini API 整合規格**
+  ```typescript
+  interface GeminiIntegration {
+    apiKey: string
+    model: 'gemini-pro' | 'gemini-pro-vision'
+    
+    prompts: {
+      textAnalysis: PromptTemplate
+      vocabularyExtraction: PromptTemplate
+      exampleGeneration: PromptTemplate
+    }
+    
+    rateLimit: {
+      requestsPerMinute: number
+      tokensPerRequest: number
+      retryStrategy: RetryPolicy
+    }
+    
+    errorHandling: {
+      apiErrors: ErrorMapping
+      fallbackStrategy: FallbackOptions
+    }
+  }
+  ```
+
+- [ ] **詞卡生成邏輯**
+  - 文本分析算法
+  - 難度評估規則
+  - 重複詞彙處理
+  - 批量生成優化
+
+#### 3.2 學習系統
+
+**需要的規格：**
+- [ ] **SM-2 算法實現細節**
+  ```typescript
+  interface SM2Algorithm {
+    // 初始參數
+    initialInterval: number
+    easinessFactor: number
+    
+    // 計算規則
+    calculateNextReview: (rating: 1-5, currentInterval: number) => Date
+    updateEasinessFactor: (rating: 1-5, currentEF: number) => number
+    
+    // 特殊情況處理
+    handleOverdue: (daysOverdue: number) => Adjustment
+    handleStreaks: (consecutiveCorrect: number) => Bonus
+  }
+  ```
+
+- [ ] **學習進度追蹤**
+  - 學習記錄存儲結構
+  - 統計數據計算方法
+  - 成就系統規則
+
+#### 3.3 實作任務
+- [ ] Gemini API 整合
+- [ ] 詞卡生成 API
+- [ ] 卡組管理 CRUD API
+- [ ] SM-2 算法實現
+- [ ] 學習記錄 API
+- [ ] 統計數據 API
+
+### Phase 4: 資料管理 (第3-4週)
+
+#### 4.1 需要的規格
+
+- [ ] **資料驗證規則**
+  ```typescript
+  // 每個 API 端點的輸入驗證
+  const schemas = {
+    createFlashcard: z.object({
+      word: z.string().min(1).max(100),
+      translation: z.string().min(1).max(200),
+      example: z.string().max(500),
+      // ...
+    }),
+    // 其他 schemas...
+  }
+  ```
+
+- [ ] **資料存取層設計**
+  - Repository Pattern 實現
+  - 查詢優化策略
+  - 快取策略
+
+- [ ] **批量操作規格**
+  - 批量導入限制
+  - 批量更新策略
+  - 事務處理規則
+
+#### 4.2 實作任務
+- [ ] 實作資料驗證中間件
+- [ ] 建立 Repository 層
+- [ ] 實作快取機制
+- [ ] 批量操作 API
+- [ ] 資料導出功能
+
+### Phase 5: 第三方整合 (第4週)
+
+#### 5.1 需要的規格
+
+- [ ] **Email 服務整合**
+  ```typescript
+  interface EmailService {
+    provider: 'Resend' | 'SendGrid'
+    templates: {
+      welcome: EmailTemplate
+      verification: EmailTemplate
+      passwordReset: EmailTemplate
+      learningReminder: EmailTemplate
+    }
+    sendingRules: {
+      retryPolicy: RetryPolicy
+      bounceHandling: BounceStrategy
+    }
+  }
+  ```
+
+- [ ] **支付系統整合** (未來功能)
+  - Stripe/綠界設置
+  - 訂閱方案邏輯
+  - 支付 Webhook 處理
+
+- [ ] **分析服務整合**
+  - Google Analytics 事件
+  - 自定義指標追蹤
+  - 用戶行為分析
+
+#### 5.2 實作任務
+- [ ] Email 服務設置
+- [ ] Email 模板實作
+- [ ] 分析事件追蹤
+- [ ] 錯誤追蹤 (Sentry)
+
+### Phase 6: 效能與安全 (第5週)
+
+#### 6.1 需要的規格
+
+- [ ] **API Rate Limiting**
+  ```typescript
+  interface RateLimiting {
+    rules: {
+      global: { requests: number, window: string }
+      perUser: { requests: number, window: string }
+      perEndpoint: Map<string, LimitRule>
+    }
+    storage: 'memory' | 'redis'
+    response: {
+      headers: RateLimitHeaders
+      errorMessage: string
+    }
+  }
+  ```
+
+- [ ] **安全性措施**
+  - SQL Injection 防護
+  - XSS 防護
+  - Input Sanitization
+  - API Key 管理
+
+- [ ] **效能優化**
+  - 資料庫查詢優化
+  - N+1 問題解決
+  - API Response 壓縮
+  - CDN 設置
+
+#### 6.2 實作任務
+- [ ] 實作 Rate Limiting
+- [ ] 安全中間件設置
+- [ ] 查詢優化
+- [ ] 快取策略實作
+- [ ] 監控設置
+
+### Phase 7: 測試與部署 (第5-6週)
+
+#### 7.1 需要的規格
+
+- [ ] **測試策略**
+  ```typescript
+  interface TestStrategy {
+    unitTests: {
+      coverage: number // 目標: 80%
+      framework: 'Jest'
+    }
+    integrationTests: {
+      apiEndpoints: string[]
+      scenarios: TestScenario[]
+    }
+    e2eTests: {
+      userFlows: string[]
+      framework: 'Cypress' | 'Playwright'
+    }
+  }
+  ```
+
+- [ ] **部署流程**
+  - CI/CD Pipeline
+  - 環境變數管理
+  - 資料庫遷移策略
+  - 零停機部署
+
+- [ ] **監控與日誌**
+  - 錯誤監控
+  - 效能監控
+  - 日誌聚合
+  - 告警設置
+
+#### 7.2 實作任務
+- [ ] 撰寫單元測試
+- [ ] 撰寫整合測試
+- [ ] 設置 CI/CD
+- [ ] 部署到 Vercel
+- [ ] 監控系統設置
+
+## 📊 資源需求
+
+### 技術資源
+- **Supabase**: Free tier → Pro ($25/月)
+- **Gemini API**: Free tier (60 requests/minute)
+- **Vercel**: Free tier → Pro ($20/月)
+- **Email Service**: Resend free tier (100/day)
+- **Monitoring**: Sentry free tier
+
+### 時間預估
+- **總開發時間**: 5-6 週
+- **每週工時**: 40 小時
+- **總工時**: 200-240 小時
+
+### 風險評估
+1. **Gemini API 限制**: 需要實作 queue 系統
+2. **資料庫效能**: 需要適當的索引設計
+3. **成本控制**: 監控 API 使用量
+4. **安全風險**: 定期安全審計
+
+## 🚀 下一步行動
+
+### 立即需要完成的規格文檔
+1. **資料庫 Schema 完整設計** (2天)
+2. **API 端點詳細規格** (2天)
+3. **Gemini API 整合規格** (1天)
+4. **認證流程詳細設計** (1天)
+5. **錯誤處理規範** (1天)
+
+### 開發優先順序
+1. 🔴 **必要**: 認證系統、基本 CRUD、AI 生成
+2. 🟡 **重要**: 學習系統、統計功能
+3. 🟢 **可選**: 進階功能、優化
+
+## 📝 檢查清單
+
+### Week 1
+- [ ] 完成所有規格文檔
+- [ ] 設置開發環境
+- [ ] 建立資料庫
+- [ ] 實作認證 API
+
+### Week 2-3
+- [ ] 完成核心 API
+- [ ] 整合 Gemini
+- [ ] 實作學習邏輯
+
+### Week 4-5
+- [ ] 第三方服務整合
+- [ ] 效能優化
+- [ ] 安全加固
+
+### Week 6
+- [ ] 完整測試
+- [ ] 部署上線
+- [ ] 監控設置
+
+## 🎯 成功指標
+
+1. **功能完整性**: 100% 核心功能實作
+2. **效能指標**: API 響應 < 200ms
+3. **可靠性**: 99.9% uptime
+4. **安全性**: 通過 OWASP 基本檢查
+5. **測試覆蓋**: > 80% 代碼覆蓋率
\ No newline at end of file
diff --git a/docs/03_development/claude-code-development-sop.md b/docs/03_development/claude-code-development-sop.md
new file mode 100644
index 0000000..0bd5ff5
--- /dev/null
+++ b/docs/03_development/claude-code-development-sop.md
@@ -0,0 +1,312 @@
+# Claude Code 開發 SOP 流程
+
+## 🎯 目標
+確保使用 Claude Code 進行開發時，能夠穩定、有序地修正和增強現有功能。
+
+## 📋 標準作業流程
+
+### 1️⃣ 需求分析階段
+
+#### 1.1 明確定義需求
+```markdown
+## 修改需求
+- **功能名稱**: [例如: 登入流程]
+- **現況問題**: [描述現有問題]
+- **期望結果**: [描述預期行為]
+- **影響範圍**: [列出可能受影響的檔案/功能]
+- **優先級**: [高/中/低]
+```
+
+#### 1.2 需求模板
+```markdown
+# 需求：[功能名稱]
+
+## 現況
+- 現有行為：
+- 問題描述：
+- 相關檔案：
+
+## 期望
+- 新行為：
+- 成功標準：
+- 測試案例：
+
+## 限制
+- 必須保留：
+- 不可更動：
+- 效能要求：
+```
+
+### 2️⃣ 開發前準備
+
+#### 2.1 環境檢查
+```bash
+# 1. 確認開發伺服器狀態
+npm run dev
+
+# 2. 確認 Git 狀態
+git status
+
+# 3. 創建新分支
+git checkout -b feature/[功能名稱]
+```
+
+#### 2.2 備份關鍵檔案
+```bash
+# 備份將要修改的檔案
+cp app/[檔案名].tsx app/[檔案名].tsx.backup
+```
+
+### 3️⃣ 與 Claude Code 協作流程
+
+#### 3.1 初始對話模板
+```markdown
+我需要修改 [功能名稱]，請幫我：
+
+1. 先讀取相關檔案：
+   - [檔案路徑1]
+   - [檔案路徑2]
+
+2. 分析現有實作
+
+3. 確認修改方案
+
+4. 實施修改
+
+要求：
+- 保持現有功能不受影響
+- 遵循現有程式碼風格
+- 加入適當的錯誤處理
+```
+
+#### 3.2 階段性確認
+```markdown
+## 檢查點
+- [ ] 需求理解正確
+- [ ] 影響範圍評估完成
+- [ ] 修改方案確認
+- [ ] 程式碼修改完成
+- [ ] 功能測試通過
+- [ ] 無破壞現有功能
+```
+
+### 4️⃣ 實作階段
+
+#### 4.1 修改優先順序
+1. **資料模型** (types, interfaces)
+2. **API 邏輯** (API routes, services)
+3. **狀態管理** (stores, contexts)
+4. **UI 組件** (components)
+5. **樣式調整** (CSS, Tailwind)
+
+#### 4.2 程式碼修改原則
+```typescript
+// ❌ 避免：直接覆蓋整個檔案
+// ✅ 建議：精準修改特定函數或區塊
+
+// ❌ 避免：刪除未使用的程式碼
+// ✅ 建議：先註解，確認無誤後再刪除
+
+// ❌ 避免：一次修改多個功能
+// ✅ 建議：單一功能逐步修改
+```
+
+#### 4.3 安全修改策略
+```markdown
+## 修改策略
+1. **增量修改**：先新增，後替換，最後刪除舊代碼
+2. **功能開關**：使用 feature flag 控制新舊功能
+3. **漸進式重構**：保持功能可用的前提下逐步改進
+```
+
+### 5️⃣ 測試驗證
+
+#### 5.1 功能測試清單
+```markdown
+## 測試項目
+- [ ] 正常流程測試
+- [ ] 邊界條件測試
+- [ ] 錯誤處理測試
+- [ ] 響應式設計測試
+- [ ] 效能測試
+```
+
+#### 5.2 測試指令
+```bash
+# 1. 本地測試
+npm run dev
+# 手動測試各項功能
+
+# 2. 建置測試
+npm run build
+# 確認無編譯錯誤
+
+# 3. TypeScript 檢查
+npx tsc --noEmit
+
+# 4. Lint 檢查
+npm run lint
+```
+
+### 6️⃣ 版本控制
+
+#### 6.1 提交規範
+```bash
+# 提交格式
+git add [修改的檔案]
+git commit -m "[type]: [description]"
+
+# Type 類型：
+# feat: 新功能
+# fix: 修復錯誤
+# refactor: 重構
+# style: 樣式修改
+# docs: 文檔更新
+# test: 測試相關
+# chore: 其他修改
+```
+
+#### 6.2 提交前檢查
+```markdown
+## 提交前確認
+- [ ] 功能正常運作
+- [ ] 無 console.log 遺留
+- [ ] 無敏感資訊外洩
+- [ ] 程式碼已格式化
+- [ ] 註解已更新
+```
+
+### 7️⃣ 問題處理
+
+#### 7.1 常見問題與解決
+```markdown
+## 編譯錯誤
+1. 清除快取：rm -rf .next
+2. 重新安裝：rm -rf node_modules && npm install
+3. 重啟開發伺服器
+
+## 樣式不生效
+1. 檢查 Tailwind 類名
+2. 清除瀏覽器快取
+3. 檢查 CSS 載入順序
+
+## 狀態不同步
+1. 檢查 useState/useEffect
+2. 確認資料流向
+3. 使用 React DevTools 調試
+```
+
+#### 7.2 回滾策略
+```bash
+# 方法 1：使用備份
+cp app/[檔案名].tsx.backup app/[檔案名].tsx
+
+# 方法 2：Git 回滾
+git checkout -- [檔案路徑]
+
+# 方法 3：回到上一個提交
+git reset --hard HEAD^
+```
+
+### 8️⃣ 最佳實踐
+
+#### 8.1 與 Claude Code 溝通技巧
+```markdown
+## 有效溝通
+1. **具體明確**：提供檔案路徑、行號、函數名
+2. **分步進行**：複雜修改分解為多個小步驟
+3. **即時反饋**：發現問題立即告知
+4. **保存對話**：重要決策和方案記錄下來
+```
+
+#### 8.2 開發習慣
+```markdown
+## 良好習慣
+- ✅ 每完成一個小功能就測試
+- ✅ 定期提交到 Git
+- ✅ 保持開發伺服器運行
+- ✅ 使用瀏覽器開發工具監控
+- ✅ 記錄修改日誌
+```
+
+### 9️⃣ 文檔維護
+
+#### 9.1 修改記錄模板
+```markdown
+# 修改記錄
+
+## [日期] - [功能名稱]
+### 修改內容
+- 檔案：[路徑]
+- 改動：[描述]
+- 原因：[為什麼修改]
+
+### 測試結果
+- [x] 功能測試通過
+- [x] 無副作用
+- [x] 效能正常
+
+### 備註
+[任何特殊說明]
+```
+
+#### 9.2 知識累積
+```markdown
+## 經驗總結
+- 問題：[遇到的問題]
+- 解決：[解決方案]
+- 學習：[獲得的經驗]
+- 建議：[未來改進建議]
+```
+
+## 🔄 持續改進
+
+### 定期檢視
+- 每週回顧開發流程
+- 記錄痛點和改進點
+- 更新 SOP 文檔
+
+### 工具優化
+- 建立程式碼片段庫
+- 自動化重複任務
+- 優化開發環境配置
+
+## 📊 檢查清單總覽
+
+```markdown
+# 快速檢查清單
+
+## 開始前
+- [ ] 需求明確
+- [ ] 環境就緒
+- [ ] 分支創建
+
+## 開發中
+- [ ] 讀取相關檔案
+- [ ] 分析影響範圍
+- [ ] 逐步實施修改
+- [ ] 即時測試驗證
+
+## 完成後
+- [ ] 全面功能測試
+- [ ] 程式碼檢查
+- [ ] Git 提交
+- [ ] 文檔更新
+```
+
+## 🚀 快速開始指令
+
+```bash
+# 1. 開始新功能
+git checkout -b feature/new-feature
+npm run dev
+
+# 2. 測試修改
+npm run build
+npx tsc --noEmit
+
+# 3. 提交更改
+git add .
+git commit -m "feat: add new feature"
+git push origin feature/new-feature
+```
\ No newline at end of file
diff --git a/docs/03_development/database-schema-detailed.md b/docs/03_development/database-schema-detailed.md
new file mode 100644
index 0000000..e185105
--- /dev/null
+++ b/docs/03_development/database-schema-detailed.md
@@ -0,0 +1,465 @@
+# DramaLing 資料庫 Schema 詳細設計
+
+## 🗄️ 資料庫架構
+
+### 技術棧
+- **Database**: PostgreSQL 15+ (via Supabase)
+- **ORM**: Prisma
+- **Migration Tool**: Prisma Migrate
+- **Backup**: Daily automated backups via Supabase
+
+## 📦 資料表設計
+
+### 1. 用戶相關表
+
+#### users
+```sql
+CREATE TABLE users (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  email VARCHAR(255) UNIQUE NOT NULL,
+  username VARCHAR(50) UNIQUE NOT NULL,
+  password_hash VARCHAR(255), -- NULL for OAuth users
+  provider VARCHAR(20) DEFAULT 'email', -- email, google, facebook
+  provider_id VARCHAR(255),
+  email_verified BOOLEAN DEFAULT FALSE,
+  avatar_url TEXT,
+  display_name VARCHAR(100),
+  bio TEXT,
+  preferred_language VARCHAR(10) DEFAULT 'zh-TW',
+  timezone VARCHAR(50) DEFAULT 'Asia/Taipei',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  last_login_at TIMESTAMP WITH TIME ZONE,
+  is_active BOOLEAN DEFAULT TRUE,
+  is_premium BOOLEAN DEFAULT FALSE,
+  premium_expires_at TIMESTAMP WITH TIME ZONE,
+  
+  -- Indexes
+  INDEX idx_users_email (email),
+  INDEX idx_users_username (username),
+  INDEX idx_users_provider (provider, provider_id)
+);
+```
+
+#### user_profiles
+```sql
+CREATE TABLE user_profiles (
+  user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+  daily_goal INTEGER DEFAULT 10,
+  reminder_enabled BOOLEAN DEFAULT TRUE,
+  reminder_time TIME DEFAULT '20:00:00',
+  study_streak INTEGER DEFAULT 0,
+  longest_streak INTEGER DEFAULT 0,
+  total_study_time INTEGER DEFAULT 0, -- in minutes
+  total_words_learned INTEGER DEFAULT 0,
+  experience_points INTEGER DEFAULT 0,
+  level INTEGER DEFAULT 1,
+  achievements JSONB DEFAULT '[]',
+  preferences JSONB DEFAULT '{}',
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### sessions
+```sql
+CREATE TABLE sessions (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  token VARCHAR(255) UNIQUE NOT NULL,
+  refresh_token VARCHAR(255) UNIQUE,
+  device_info JSONB,
+  ip_address INET,
+  user_agent TEXT,
+  expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  last_activity TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  
+  INDEX idx_sessions_token (token),
+  INDEX idx_sessions_user (user_id),
+  INDEX idx_sessions_expires (expires_at)
+);
+```
+
+### 2. 詞卡相關表
+
+#### flashcard_sets
+```sql
+CREATE TABLE flashcard_sets (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  name VARCHAR(200) NOT NULL,
+  description TEXT,
+  cover_image_url TEXT,
+  color VARCHAR(20) DEFAULT '#3B82F6',
+  is_public BOOLEAN DEFAULT FALSE,
+  is_system BOOLEAN DEFAULT FALSE,
+  tags TEXT[] DEFAULT '{}',
+  source_type VARCHAR(50), -- 'manual', 'ai_generated', 'imported'
+  source_content TEXT, -- Original text for AI generated sets
+  card_count INTEGER DEFAULT 0,
+  completed_count INTEGER DEFAULT 0,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  last_studied_at TIMESTAMP WITH TIME ZONE,
+  
+  INDEX idx_sets_user (user_id),
+  INDEX idx_sets_public (is_public),
+  INDEX idx_sets_tags (tags) USING GIN
+);
+```
+
+#### flashcards
+```sql
+CREATE TABLE flashcards (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  set_id UUID NOT NULL REFERENCES flashcard_sets(id) ON DELETE CASCADE,
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  
+  -- Core content
+  word VARCHAR(200) NOT NULL,
+  part_of_speech VARCHAR(50),
+  pronunciation VARCHAR(200),
+  audio_url TEXT,
+  
+  -- Translations
+  translation VARCHAR(500) NOT NULL,
+  definition TEXT,
+  definition_cn TEXT,
+  
+  -- Examples
+  example_sentence TEXT,
+  example_translation TEXT,
+  additional_examples JSONB DEFAULT '[]',
+  
+  -- Learning aids
+  synonyms TEXT[] DEFAULT '{}',
+  antonyms TEXT[] DEFAULT '{}',
+  related_words TEXT[] DEFAULT '{}',
+  memory_tips TEXT,
+  notes TEXT,
+  image_url TEXT,
+  
+  -- Metadata
+  difficulty_level VARCHAR(20) DEFAULT 'intermediate',
+  frequency_rank INTEGER,
+  tags TEXT[] DEFAULT '{}',
+  context_tags TEXT[] DEFAULT '{}', -- 'business', 'casual', 'academic', etc.
+  
+  -- Learning data
+  is_favorite BOOLEAN DEFAULT FALSE,
+  is_mastered BOOLEAN DEFAULT FALSE,
+  mastery_level INTEGER DEFAULT 0, -- 0-100
+  
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  
+  INDEX idx_cards_set (set_id),
+  INDEX idx_cards_user (user_id),
+  INDEX idx_cards_word (word),
+  INDEX idx_cards_mastery (mastery_level),
+  INDEX idx_cards_tags (tags) USING GIN,
+  UNIQUE(set_id, word)
+);
+```
+
+### 3. 學習系統表
+
+#### learning_records
+```sql
+CREATE TABLE learning_records (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  flashcard_id UUID NOT NULL REFERENCES flashcards(id) ON DELETE CASCADE,
+  
+  -- SM-2 Algorithm fields
+  ease_factor DECIMAL(3,2) DEFAULT 2.5,
+  interval INTEGER DEFAULT 1, -- days
+  repetitions INTEGER DEFAULT 0,
+  
+  -- Review data
+  last_reviewed_at TIMESTAMP WITH TIME ZONE,
+  next_review_at TIMESTAMP WITH TIME ZONE,
+  
+  -- Performance tracking
+  total_reviews INTEGER DEFAULT 0,
+  correct_reviews INTEGER DEFAULT 0,
+  incorrect_reviews INTEGER DEFAULT 0,
+  average_rating DECIMAL(2,1),
+  
+  -- Time tracking
+  total_study_time INTEGER DEFAULT 0, -- seconds
+  last_study_duration INTEGER DEFAULT 0,
+  
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  
+  INDEX idx_learning_user (user_id),
+  INDEX idx_learning_card (flashcard_id),
+  INDEX idx_learning_next_review (next_review_at),
+  UNIQUE(user_id, flashcard_id)
+);
+```
+
+#### review_logs
+```sql
+CREATE TABLE review_logs (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  flashcard_id UUID NOT NULL REFERENCES flashcards(id) ON DELETE CASCADE,
+  learning_record_id UUID REFERENCES learning_records(id) ON DELETE CASCADE,
+  
+  -- Review details
+  rating INTEGER NOT NULL CHECK (rating >= 1 AND rating <= 5),
+  response_time INTEGER, -- milliseconds
+  review_type VARCHAR(20), -- 'scheduled', 'practice', 'cram'
+  mode VARCHAR(20), -- 'flip', 'quiz', 'typing'
+  
+  -- Context
+  session_id UUID,
+  device_type VARCHAR(20),
+  
+  reviewed_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  
+  INDEX idx_review_user (user_id),
+  INDEX idx_review_card (flashcard_id),
+  INDEX idx_review_date (reviewed_at)
+);
+```
+
+#### study_sessions
+```sql
+CREATE TABLE study_sessions (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  
+  -- Session info
+  start_time TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  end_time TIMESTAMP WITH TIME ZONE,
+  duration INTEGER, -- seconds
+  
+  -- Performance
+  cards_studied INTEGER DEFAULT 0,
+  cards_mastered INTEGER DEFAULT 0,
+  correct_count INTEGER DEFAULT 0,
+  incorrect_count INTEGER DEFAULT 0,
+  accuracy_rate DECIMAL(5,2),
+  
+  -- Context
+  study_mode VARCHAR(20), -- 'review', 'learn', 'cram'
+  set_id UUID REFERENCES flashcard_sets(id) ON DELETE SET NULL,
+  device_type VARCHAR(20),
+  
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  
+  INDEX idx_sessions_user_date (user_id, start_time)
+);
+```
+
+### 4. AI 生成相關表
+
+#### ai_generation_logs
+```sql
+CREATE TABLE ai_generation_logs (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  
+  -- Request info
+  input_text TEXT,
+  input_type VARCHAR(50), -- 'text', 'theme'
+  theme VARCHAR(100),
+  difficulty_level VARCHAR(20),
+  card_count INTEGER,
+  
+  -- Generation details
+  model_used VARCHAR(50),
+  prompt_tokens INTEGER,
+  completion_tokens INTEGER,
+  total_tokens INTEGER,
+  generation_time INTEGER, -- milliseconds
+  
+  -- Results
+  generated_cards JSONB,
+  cards_saved INTEGER,
+  set_id UUID REFERENCES flashcard_sets(id) ON DELETE SET NULL,
+  
+  -- Status
+  status VARCHAR(20), -- 'pending', 'completed', 'failed'
+  error_message TEXT,
+  
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  
+  INDEX idx_ai_gen_user (user_id),
+  INDEX idx_ai_gen_date (created_at)
+);
+```
+
+### 5. 統計與分析表
+
+#### daily_stats
+```sql
+CREATE TABLE daily_stats (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  date DATE NOT NULL,
+  
+  -- Learning metrics
+  cards_reviewed INTEGER DEFAULT 0,
+  cards_learned INTEGER DEFAULT 0,
+  cards_mastered INTEGER DEFAULT 0,
+  study_time INTEGER DEFAULT 0, -- minutes
+  sessions_count INTEGER DEFAULT 0,
+  
+  -- Performance
+  average_accuracy DECIMAL(5,2),
+  average_ease_factor DECIMAL(3,2),
+  
+  -- Streaks
+  streak_maintained BOOLEAN DEFAULT FALSE,
+  
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  
+  UNIQUE(user_id, date),
+  INDEX idx_daily_stats_user_date (user_id, date)
+);
+```
+
+#### achievements
+```sql
+CREATE TABLE achievements (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  name VARCHAR(100) UNIQUE NOT NULL,
+  description TEXT,
+  icon_url TEXT,
+  category VARCHAR(50),
+  points INTEGER DEFAULT 0,
+  requirement_type VARCHAR(50), -- 'streak', 'total_words', 'accuracy', etc.
+  requirement_value INTEGER,
+  is_active BOOLEAN DEFAULT TRUE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### user_achievements
+```sql
+CREATE TABLE user_achievements (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  achievement_id UUID NOT NULL REFERENCES achievements(id) ON DELETE CASCADE,
+  unlocked_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  progress INTEGER DEFAULT 0,
+  
+  UNIQUE(user_id, achievement_id),
+  INDEX idx_user_achievements (user_id)
+);
+```
+
+### 6. 通知與設定表
+
+#### notifications
+```sql
+CREATE TABLE notifications (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  
+  type VARCHAR(50) NOT NULL, -- 'reminder', 'achievement', 'streak', etc.
+  title VARCHAR(200) NOT NULL,
+  message TEXT,
+  data JSONB,
+  
+  is_read BOOLEAN DEFAULT FALSE,
+  read_at TIMESTAMP WITH TIME ZONE,
+  
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  expires_at TIMESTAMP WITH TIME ZONE,
+  
+  INDEX idx_notifications_user (user_id),
+  INDEX idx_notifications_unread (user_id, is_read)
+);
+```
+
+#### user_settings
+```sql
+CREATE TABLE user_settings (
+  user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
+  
+  -- Notification settings
+  email_notifications BOOLEAN DEFAULT TRUE,
+  push_notifications BOOLEAN DEFAULT TRUE,
+  reminder_notifications BOOLEAN DEFAULT TRUE,
+  achievement_notifications BOOLEAN DEFAULT TRUE,
+  
+  -- Learning preferences
+  default_study_mode VARCHAR(20) DEFAULT 'flip',
+  auto_play_audio BOOLEAN DEFAULT TRUE,
+  show_pronunciation BOOLEAN DEFAULT TRUE,
+  review_order VARCHAR(20) DEFAULT 'due_date', -- 'due_date', 'random', 'difficulty'
+  
+  -- Display preferences
+  theme VARCHAR(20) DEFAULT 'light',
+  font_size VARCHAR(20) DEFAULT 'medium',
+  card_layout VARCHAR(20) DEFAULT 'standard',
+  
+  -- Privacy
+  profile_visibility VARCHAR(20) DEFAULT 'private',
+  share_progress BOOLEAN DEFAULT FALSE,
+  
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+## 🔗 關聯關係
+
+### 主要關係
+1. **users → flashcard_sets**: 一對多 (用戶擁有多個卡組)
+2. **flashcard_sets → flashcards**: 一對多 (卡組包含多個詞卡)
+3. **users → learning_records**: 一對多 (用戶的學習記錄)
+4. **flashcards → learning_records**: 一對多 (每個詞卡的學習記錄)
+5. **learning_records → review_logs**: 一對多 (學習記錄的詳細日誌)
+
+## 🔑 索引策略
+
+### 主要索引
+1. **用戶查詢**: email, username
+2. **詞卡查詢**: word, set_id, user_id
+3. **學習查詢**: next_review_at, user_id
+4. **統計查詢**: user_id + date
+5. **全文搜索**: 使用 PostgreSQL 的 GIN 索引於 tags 和 JSONB 欄位
+
+## 🔄 資料遷移策略
+
+### 版本控制
+```bash
+# Prisma migration commands
+npx prisma migrate dev --name init
+npx prisma migrate deploy
+npx prisma migrate status
+```
+
+### 備份策略
+1. **自動備份**: 每日 02:00 UTC
+2. **保留期限**: 30 天
+3. **地理位置**: 跨區域複製
+4. **恢復測試**: 每季度一次
+
+## 📊 效能優化
+
+### 查詢優化
+1. **分頁**: 使用 cursor-based pagination
+2. **快取**: Redis 快取熱門查詢
+3. **預載**: Eager loading 避免 N+1 問題
+4. **分區**: 考慮將 review_logs 按月份分區
+
+### 容量規劃
+- **預期用戶數**: 10,000
+- **平均詞卡/用戶**: 1,000
+- **平均評論/詞卡**: 50
+- **總資料量**: ~10GB
+
+## 🔒 安全考慮
+
+1. **Row Level Security (RLS)**: Supabase 提供
+2. **加密**: 敏感資料加密存儲
+3. **稽核**: 所有資料變更記錄
+4. **資料遮罩**: 個人資訊不外洩
\ No newline at end of file
diff --git a/docs/03_development/simple-dev-workflow.md b/docs/03_development/simple-dev-workflow.md
new file mode 100644
index 0000000..2fb2c8e
--- /dev/null
+++ b/docs/03_development/simple-dev-workflow.md
@@ -0,0 +1,169 @@
+# 🚀 簡化開發流程 (開發階段專用)
+
+## 核心原則：快速迭代、立即看結果
+
+---
+
+## 📝 超簡單三步驟流程
+
+### 1️⃣ 告訴我要改什麼
+```markdown
+「我要修改 [功能名稱]」
+「現在是 [A]，我要改成 [B]」
+```
+
+### 2️⃣ 我幫你改
+- 我會先看檔案
+- 直接修改
+- 告訴你改了什麼
+
+### 3️⃣ 你測試確認
+- 瀏覽器看結果
+- OK → 繼續下一個
+- 不OK → 告訴我，馬上修
+
+---
+
+## 💬 對話範例
+
+### 範例 1：改文字
+```
+你：「Dashboard 的標題要改成『學習中心』」
+我：改好了
+你：看瀏覽器確認
+```
+
+### 範例 2：改功能
+```
+你：「登入成功後要跳到 /dashboard 不是 /home」
+我：改好了，在 login/page.tsx 第 XX 行
+你：測試 OK
+```
+
+### 範例 3：改樣式
+```
+你：「按鈕太小，改大一點，顏色改成綠色」
+我：改好了
+你：「再大一點」
+我：調整了
+```
+
+---
+
+## 🔧 常用需求快速指令
+
+### UI 調整
+- 「把 X 改成 Y」
+- 「這個太小/太大」
+- 「顏色改成 #XXXXXX」
+- 「加個按鈕做 XXX」
+
+### 流程修改
+- 「點擊後要跳到 XXX 頁」
+- 「這個欄位要必填」
+- 「加個 loading 狀態」
+- 「錯誤訊息改成 XXX」
+
+### 資料調整
+- 「這個假資料改成 XXX」
+- 「多加幾筆測試資料」
+- 「預設值改成 XXX」
+
+---
+
+## ⚡ 快速修復
+
+### 頁面壞了
+```
+你：「/flashcards 打不開」
+我：馬上修復
+```
+
+### 樣式跑版
+```
+你：「手機版跑版了」
+我：調整 responsive
+```
+
+### 功能失效
+```
+你：「按鈕點了沒反應」
+我：檢查並修復
+```
+
+---
+
+## 📁 檔案位置速查
+
+```
+頁面 → /app/[頁面名]/page.tsx
+樣式 → /app/globals.css 或 Tailwind classes
+設定 → /next.config.mjs, /tailwind.config.ts
+```
+
+---
+
+## 🎯 一句話原則
+
+**「先做出來，能動就好，之後再優化」**
+
+---
+
+## 💡 小技巧
+
+1. **不用管 Git**：開發階段改了再說，最後再整理 commit
+2. **不用寫文檔**：先把功能做出來
+3. **不用完美**：70% 完成度就可以繼續下一個
+4. **隨時問**：卡住就問，不要糾結
+
+---
+
+## 🔄 每日收尾（可選）
+
+結束前跟我說：
+```
+「今天改完了，幫我 git add + commit」
+```
+
+我會幫你：
+- 整理今天的修改
+- 寫 commit message
+- 推上 Git
+
+---
+
+## ⚠️ 唯一要注意的
+
+**開發伺服器要開著**
+```bash
+npm run dev
+```
+
+如果壞了：
+1. Ctrl+C 停止
+2. `npm run dev` 重開
+3. 還是壞了就叫我
+
+---
+
+## 🚫 不用管的事
+
+- ❌ 測試
+- ❌ 文檔
+- ❌ Code Review  
+- ❌ 效能優化
+- ❌ TypeScript 錯誤（如果能動）
+- ❌ Console 警告（如果能動）
+
+**這些等要上線前再處理**
+
+---
+
+## 📢 記住
+
+> 現在是開發階段，目標是：
+> 1. 快速看到結果
+> 2. 快速調整
+> 3. 快速迭代
+
+**完美是上線前的事！**
\ No newline at end of file
diff --git a/public/images/examples/bring_up.png b/public/images/examples/bring_up.png
new file mode 100644
index 0000000..ad2a08f
Binary files /dev/null and b/public/images/examples/bring_up.png differ
diff --git a/public/images/examples/instinct.png b/public/images/examples/instinct.png
new file mode 100644
index 0000000..1593e5c
Binary files /dev/null and b/public/images/examples/instinct.png differ
diff --git a/public/images/examples/warrant.png b/public/images/examples/warrant.png
new file mode 100644
index 0000000..f59f864
Binary files /dev/null and b/public/images/examples/warrant.png differ