diff --git a/frontend/app/flashcards/page.tsx b/frontend/app/flashcards/page.tsx
index b2644bb..6fe323e 100644
--- a/frontend/app/flashcards/page.tsx
+++ b/frontend/app/flashcards/page.tsx
@@ -126,7 +126,7 @@ function FlashcardsContent({ showForm, setShowForm }: { showForm: boolean; setSh
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       {/* Navigation */}
       <Navigation />
 
diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index 613da61..a9e2ae1 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -6,7 +6,7 @@ import { Navigation } from '@/components/shared/Navigation'
 import { WordPopup } from '@/components/word/WordPopup'
 import { useToast } from '@/components/shared/Toast'
 import { flashcardsService } from '@/lib/services/flashcards'
-import { compareCEFRLevels, getLevelIndex, getTargetLearningRange } from '@/lib/utils/cefrUtils'
+import { getLevelIndex, getTargetLearningRange } from '@/lib/utils/cefrUtils'
 import { useWordAnalysis } from '@/hooks/word/useWordAnalysis'
 import { API_CONFIG } from '@/lib/config/api'
 import Link from 'next/link'
@@ -34,7 +34,7 @@ interface GrammarCorrection {
 
 function GenerateContent() {
   const toast = useToast()
-  const { findWordAnalysis, getWordClass, shouldShowStar } = useWordAnalysis()
+  const { findWordAnalysis, getWordClass } = useWordAnalysis()
   const [textInput, setTextInput] = useState('')
   const [isAnalyzing, setIsAnalyzing] = useState(false)
   const [showAnalysisView, setShowAnalysisView] = useState(false)
@@ -232,13 +232,13 @@ function GenerateContent() {
   }, [])
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Navigation />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {!showAnalysisView ? (
-          <div className="max-w-4xl mx-auto">
-            <h1 className="text-3xl font-bold mb-8">AI 智能生成詞卡</h1>
+          <>
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">AI 智能生成詞卡</h1>
 
             {/* Content Input */}
             <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 mb-6">
@@ -316,10 +316,10 @@ function GenerateContent() {
                 })()}
               </div>
             </div>
-          </div>
+          </>
         ) : (
           /* 重新設計的句子分析視圖 - 簡潔流暢 */
-          <div className="max-w-4xl mx-auto">
+          <>
             {/* 語法修正面板 - 如果需要的話 */}
             {grammarCorrection && grammarCorrection.hasErrors && (
               <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6 mb-6">
@@ -490,7 +490,7 @@ function GenerateContent() {
                 <span>分析新句子</span>
               </button>
             </div>
-          </div>
+          </>
         )}
 
         {/* 慣用語彈窗 - 使用統一的 WordPopup */}
diff --git a/frontend/app/profile/page.tsx b/frontend/app/profile/page.tsx
index 5c06c25..356daa5 100644
--- a/frontend/app/profile/page.tsx
+++ b/frontend/app/profile/page.tsx
@@ -338,10 +338,10 @@ export default function ProfilePage() {
       <Navigation />
 
       <div className="py-8">
-        <div className="max-w-6xl mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           {/* 頁面標題 */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">個人檔案</h1>
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">個人檔案</h1>
             <p className="text-gray-600">管理您的帳戶資訊和學習偏好設定</p>
           </div>
 
diff --git a/frontend/app/review/page.tsx b/frontend/app/review/page.tsx
index ab5bb75..bfdd99d 100644
--- a/frontend/app/review/page.tsx
+++ b/frontend/app/review/page.tsx
@@ -44,7 +44,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
               <h2 className="text-xl font-semibold text-gray-700">載入詞卡中...</h2>
@@ -64,7 +64,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               <div className={`text-4xl mb-4 ${isAuthError ? 'text-yellow-500' : 'text-red-500'}`}>
                 {isAuthError ? '🔒' : '⚠️'}
@@ -111,7 +111,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               {/* 歡迎圖標 */}
               <div className="mb-6">
@@ -190,7 +190,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               {/* 慶祝圖標 */}
               <div className="mb-6">
@@ -278,7 +278,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <QuizResult
               score={score}
               totalCards={flashcards.length}