diff --git a/frontend/app/learn/page.tsx b/frontend/app/learn/page.tsx
index 15244ae..0e2dd9c 100644
--- a/frontend/app/learn/page.tsx
+++ b/frontend/app/learn/page.tsx
@@ -112,60 +112,149 @@ export default function LearnPage() {
     try {
       setIsLoadingCard(true)
 
-      // 暫時使用mock data，等後端API就緒後替換
+      // Mock data 展示四情境自動適配效果
       const mockDueCards: ExtendedFlashcard[] = [
+        // 情境1: A1學習者 (userLevel ≤ 20) → 基礎3題型
         {
           id: '1',
-          word: 'brought',
-          partOfSpeech: 'verb',
-          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: '他在我們的會議中提出了這件事，但沒有人同意。',
-          masteryLevel: 65,
-          timesReviewed: 3,
-          isFavorite: false,
-          nextReviewDate: new Date().toISOString().split('T')[0], // 今天到期
-          difficultyLevel: 'B1',
-          createdAt: new Date().toISOString(),
-          // 智能複習欄位
-          userLevel: 60,        // 學習者程度
-          wordLevel: 70,        // 詞彙難度 (困難詞彙)
-          baseMasteryLevel: 75,
-          lastReviewDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2天前
-          exampleImages: [],
-          hasExampleImage: true,
-          primaryImageUrl: '/images/examples/bring_up.png',
-          synonyms: ['mentioned', 'raised', 'introduced'],
-          difficulty: 'B1',
-          exampleImage: '/images/examples/bring_up.png'
-        },
-        {
-          id: '2',
-          word: 'simple',
-          partOfSpeech: 'adjective',
-          pronunciation: '/ˈsɪmpəl/',
-          translation: '簡單的',
-          definition: 'Easy to understand or do; not complex',
-          example: 'This is a simple task that anyone can complete.',
-          exampleTranslation: '這是一個任何人都能完成的簡單任務。',
-          masteryLevel: 45,
+          word: 'cat',
+          partOfSpeech: 'noun',
+          pronunciation: '/kæt/',
+          translation: '貓',
+          definition: 'A small animal that people keep as a pet',
+          example: 'The cat is sleeping on the sofa.',
+          exampleTranslation: '這隻貓正在沙發上睡覺。',
+          masteryLevel: 30,
           timesReviewed: 1,
           isFavorite: false,
           nextReviewDate: new Date().toISOString().split('T')[0],
-          difficultyLevel: 'A2',
+          difficultyLevel: 'A1',
           createdAt: new Date().toISOString(),
-          // 智能複習欄位 - A1學習者
+          // A1學習者情境
           userLevel: 15,        // A1學習者
-          wordLevel: 25,
-          baseMasteryLevel: 50,
+          wordLevel: 20,        // 基礎詞彙
+          baseMasteryLevel: 35,
           lastReviewDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
           exampleImages: [],
           hasExampleImage: false,
-          synonyms: ['easy', 'basic', 'straightforward'],
+          synonyms: ['kitty', 'feline'],
+          difficulty: 'A1',
+          exampleImage: '/images/examples/cat.png'
+        },
+
+        // 情境2: 簡單詞彙 (學習者程度 > 詞彙程度) → 應用2題型
+        {
+          id: '2',
+          word: 'happy',
+          partOfSpeech: 'adjective',
+          pronunciation: '/ˈhæpi/',
+          translation: '快樂的',
+          definition: 'Feeling pleasure and contentment',
+          example: 'She looks very happy today because of the good news.',
+          exampleTranslation: '她今天看起來很快樂，因為有好消息。',
+          masteryLevel: 85,
+          timesReviewed: 5,
+          isFavorite: true,
+          nextReviewDate: new Date().toISOString().split('T')[0],
+          difficultyLevel: 'A2',
+          createdAt: new Date().toISOString(),
+          // 簡單詞彙情境 (程度 > 難度)
+          userLevel: 70,        // 中級學習者
+          wordLevel: 35,        // 簡單詞彙 (difficulty = -35)
+          baseMasteryLevel: 90,
+          lastReviewDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+          exampleImages: [],
+          hasExampleImage: true,
+          primaryImageUrl: '/images/examples/happy.png',
+          synonyms: ['joyful', 'glad', 'cheerful'],
           difficulty: 'A2',
-          exampleImage: '/images/examples/simple.png'
+          exampleImage: '/images/examples/happy.png'
+        },
+
+        // 情境3: 適中詞彙 (程度 ≈ 難度) → 全方位3題型
+        {
+          id: '3',
+          word: 'determine',
+          partOfSpeech: 'verb',
+          pronunciation: '/dɪˈtɜːrmɪn/',
+          translation: '決定、確定',
+          definition: 'To decide or establish exactly what something is',
+          example: 'We need to determine the best solution for this problem.',
+          exampleTranslation: '我們需要確定這個問題的最佳解決方案。',
+          masteryLevel: 55,
+          timesReviewed: 3,
+          isFavorite: false,
+          nextReviewDate: new Date().toISOString().split('T')[0],
+          difficultyLevel: 'B1',
+          createdAt: new Date().toISOString(),
+          // 適中詞彙情境 (程度 ≈ 難度)
+          userLevel: 60,        // 中級學習者
+          wordLevel: 65,        // 適中詞彙 (difficulty = +5)
+          baseMasteryLevel: 65,
+          lastReviewDate: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+          exampleImages: [],
+          hasExampleImage: true,
+          primaryImageUrl: '/images/examples/determine.png',
+          synonyms: ['decide', 'establish', 'figure out'],
+          difficulty: 'B1',
+          exampleImage: '/images/examples/determine.png'
+        },
+
+        // 情境4: 困難詞彙 (程度 < 難度) → 基礎2題型
+        {
+          id: '4',
+          word: 'sophisticated',
+          partOfSpeech: 'adjective',
+          pronunciation: '/səˈfɪstɪkeɪtɪd/',
+          translation: '精密的、複雜的',
+          definition: 'Having advanced knowledge, experience, or understanding',
+          example: 'The new software uses sophisticated algorithms to analyze data.',
+          exampleTranslation: '這個新軟體使用精密的算法來分析數據。',
+          masteryLevel: 25,
+          timesReviewed: 1,
+          isFavorite: false,
+          nextReviewDate: new Date().toISOString().split('T')[0],
+          difficultyLevel: 'C1',
+          createdAt: new Date().toISOString(),
+          // 困難詞彙情境 (程度 < 難度)
+          userLevel: 50,        // 中級學習者
+          wordLevel: 85,        // 困難詞彙 (difficulty = +35)
+          baseMasteryLevel: 30,
+          lastReviewDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+          exampleImages: [],
+          hasExampleImage: true,
+          primaryImageUrl: '/images/examples/sophisticated.png',
+          synonyms: ['advanced', 'complex', 'refined'],
+          difficulty: 'C1',
+          exampleImage: '/images/examples/sophisticated.png'
+        },
+
+        // 額外情境: A1學習者遇到困難詞彙 → 自動保護
+        {
+          id: '5',
+          word: 'dog',
+          partOfSpeech: 'noun',
+          pronunciation: '/dɔːg/',
+          translation: '狗',
+          definition: 'A four-legged animal that people keep as a pet',
+          example: 'My dog likes to play in the park.',
+          exampleTranslation: '我的狗喜歡在公園裡玩。',
+          masteryLevel: 20,
+          timesReviewed: 0,
+          isFavorite: false,
+          nextReviewDate: new Date().toISOString().split('T')[0],
+          difficultyLevel: 'A1',
+          createdAt: new Date().toISOString(),
+          // A1學習者保護測試 (即使是簡單詞彙也用基礎題型)
+          userLevel: 12,        // A1初學者
+          wordLevel: 15,        // 簡單詞彙，但A1會被保護
+          baseMasteryLevel: 25,
+          lastReviewDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+          exampleImages: [],
+          hasExampleImage: false,
+          synonyms: ['puppy', 'hound'],
+          difficulty: 'A1',
+          exampleImage: '/images/examples/dog.png'
         }
       ];
 
@@ -555,8 +644,56 @@ export default function LearnPage() {
           </div>
         </div>
 
+        {/* Demo Information Panel */}
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+          <h3 className="text-lg font-semibold text-blue-900 mb-3">🎯 智能適配演示</h3>
+
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-3 text-sm mb-4">
+            <div className="bg-white rounded p-3">
+              <div className="text-blue-700 font-medium">當前情境</div>
+              <div className="text-gray-600">
+                {currentCard && (() => {
+                  const userLevel = currentCard.userLevel || 50;
+                  const wordLevel = currentCard.wordLevel || 50;
+                  const difficulty = wordLevel - userLevel;
+
+                  if (userLevel <= 20) return 'A1學習者';
+                  if (difficulty < -10) return '簡單詞彙';
+                  if (difficulty >= -10 && difficulty <= 10) return '適中詞彙';
+                  return '困難詞彙';
+                })()}
+              </div>
+            </div>
+            <div className="bg-white rounded p-3">
+              <div className="text-blue-700 font-medium">學習者程度</div>
+              <div className="text-gray-600">{currentCard?.userLevel || '--'}</div>
+            </div>
+            <div className="bg-white rounded p-3">
+              <div className="text-blue-700 font-medium">詞彙難度</div>
+              <div className="text-gray-600">{currentCard?.wordLevel || '--'}</div>
+            </div>
+            <div className="bg-white rounded p-3">
+              <div className="text-blue-700 font-medium">難度差異</div>
+              <div className="text-gray-600">
+                {currentCard ? (currentCard.wordLevel || 50) - (currentCard.userLevel || 50) : '--'}
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-lg p-3">
+            <div className="text-blue-700 font-medium mb-2">📚 演示說明</div>
+            <div className="text-gray-600 text-xs">
+              • 點擊「下一張」可看到不同情境下系統自動選擇不同的複習題型<br/>
+              • 卡片1-2: A1學習者 → 只會出現基礎題型 (翻卡、選擇、聽力)<br/>
+              • 卡片3: 簡單詞彙 → 應用題型 (填空、重組)<br/>
+              • 卡片4: 適中詞彙 → 全方位題型 (填空、重組、口說)<br/>
+              • 卡片5: 困難詞彙 → 基礎題型 (翻卡、選擇)
+            </div>
+          </div>
+        </div>
+
         {/* Current Card Mastery Level */}
-        {currentCard.baseMasteryLevel && currentCard.lastReviewDate && (
+        {currentCard?.baseMasteryLevel && currentCard?.lastReviewDate && (
           <div className="mb-4">
             <MasteryIndicator
               level={calculateCurrentMastery(currentCard.baseMasteryLevel, currentCard.lastReviewDate)}