diff --git a/flashcards-page-split-plan.md b/flashcards-page-split-plan.md
index 93f5d0b..24f10f4 100644
--- a/flashcards-page-split-plan.md
+++ b/flashcards-page-split-plan.md
@@ -343,10 +343,16 @@ export const useFlashcardImageGeneration = () => {
 - **組件架構整合**: 統一組件管理結構
 - **Day 1部分完成**: 2個核心組件準備就緒
 
-### ⚠️ **待完成工作**
-- **主頁面重構**: 878行代碼的實際拆分整合
-- **內聯邏輯替換**: 將內聯組件替換為模組化組件
-- **完整測試驗證**: 確保功能完整性
+### ✅ **重大突破完成** - 2025-10-01 19:00
+- **主頁面重構**: 878行 → 712行 (減少166行, 19%優化) ✅
+- **FlashcardItem替換**: 成功替換為模組化FlashcardCard ✅
+- **編譯測試**: 100%通過，無錯誤 ✅
+- **功能驗證**: 詞卡顯示正常，組件邏輯正確 ✅
+
+### 🎯 **後續優化機會**
+- 移除未使用的工具函數
+- 優化Props傳遞
+- 繼續拆分其他內聯組件
 
 ### 💡 **後續建議**
 由於主頁面重構是大型工作，建議：
diff --git a/frontend/app/flashcards/page.tsx b/frontend/app/flashcards/page.tsx
index a44ed2c..89336dd 100644
--- a/frontend/app/flashcards/page.tsx
+++ b/frontend/app/flashcards/page.tsx
@@ -549,189 +549,23 @@ function SearchResults({
   return (
     <div className="space-y-2">
       {searchState.flashcards.map((card: Flashcard) => (
-        <FlashcardItem
+        <FlashcardCard
           key={card.id}
-          card={card}
+          flashcard={card}
           searchTerm={searchState.filters.search}
           onEdit={() => onEdit(card)}
           onDelete={() => onDelete(card)}
-          onToggleFavorite={() => onToggleFavorite(card)}
-          getCEFRColor={getCEFRColor}
+          onFavorite={() => onToggleFavorite(card)}
+          onImageGenerate={() => onGenerateExampleImage(card)}
+          isGenerating={generatingCards.has(card.id)}
+          generationProgress={generationProgress[card.id] || ''}
           highlightSearchTerm={highlightSearchTerm}
-          getExampleImage={getExampleImage}
-          hasExampleImage={hasExampleImage}
-          onGenerateExampleImage={() => onGenerateExampleImage(card)}
-          generatingCards={generatingCards}
-          generationProgress={generationProgress}
-          router={router}
         />
       ))}
     </div>
   )
 }
 
-// 詞卡項目組件
-interface FlashcardItemProps {
-  card: Flashcard
-  searchTerm: string
-  onEdit: () => void
-  onDelete: () => void
-  onToggleFavorite: () => void
-  getCEFRColor: (level: string) => string
-  highlightSearchTerm: (text: string, term: string) => React.ReactNode
-  getExampleImage: (card: Flashcard) => string | null
-  hasExampleImage: (card: Flashcard) => boolean
-  onGenerateExampleImage: () => void
-  generatingCards: Set<string>
-  generationProgress: {[cardId: string]: string}
-  router: any
-}
-
-function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, getCEFRColor, highlightSearchTerm, getExampleImage, hasExampleImage, onGenerateExampleImage, generatingCards, generationProgress, router }: FlashcardItemProps) {
-  return (
-    <div className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 relative">
-      <div className="p-4">
-        <div className="flex items-center justify-between">
-          {/* CEFR標註 */}
-          <div className="absolute top-3 right-3">
-            <span className={`text-xs px-2 py-1 rounded-full font-medium border ${getCEFRColor(card.cefr || 'A1')}`}>
-              {card.cefr || 'A1'}
-            </span>
-          </div>
-
-          <div className="flex flex-col md:flex-row md:items-center gap-3 md:gap-4 flex-1">
-            {/* 例句圖片區域 - 響應式設計 */}
-            <div className="w-32 h-20 sm:w-40 sm:h-24 md:w-48 md:h-32 lg:w-54 lg:h-36 bg-gray-100 rounded-lg overflow-hidden border border-gray-200 flex items-center justify-center flex-shrink-0">
-              {hasExampleImage(card) ? (
-                // 有例句圖片時顯示圖片
-                <img
-                  src={getExampleImage(card)!}
-                  alt={`${card.word} example`}
-                  className="w-full h-full object-cover"
-                  onError={(e) => {
-                    const target = e.target as HTMLImageElement
-                    target.style.display = 'none'
-                    target.parentElement!.innerHTML = `
-                      <div class="text-gray-400 text-xs text-center">
-                        <svg class="w-6 h-6 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
-                    `
-                  }}
-                />
-              ) : (
-                // 沒有例句圖片時顯示新增按鈕
-                <div
-                  className="w-full h-full flex items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors group"
-                  onClick={onGenerateExampleImage}
-                  title="點擊生成例句圖片"
-                >
-                  <div className="text-center">
-                    <svg className="w-8 h-8 mx-auto mb-2 text-gray-400 group-hover:text-blue-600 group-hover:scale-110 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-                    </svg>
-                    <span className="text-xs text-gray-500 group-hover:text-blue-600 transition-colors">新增例句圖</span>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* 詞卡信息 */}
-            <div className="flex-1">
-              <div className="flex items-center gap-3">
-                <h3 className="text-xl font-bold text-gray-900">
-                  {searchTerm ? highlightSearchTerm(card.word || '未設定', searchTerm) : (card.word || '未設定')}
-                </h3>
-                <span className="text-sm bg-gray-100 text-gray-700 px-2 py-1 rounded">
-                  {getPartOfSpeechDisplay(card.partOfSpeech)}
-                </span>
-              </div>
-
-              <div className="flex items-center gap-4 mt-1">
-                <span className="text-lg text-gray-900 font-medium">
-                  {searchTerm ? highlightSearchTerm(card.translation || '未設定', searchTerm) : (card.translation || '未設定')}
-                </span>
-                {card.pronunciation && (
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm text-gray-500">{card.pronunciation}</span>
-                  </div>
-                )}
-              </div>
-
-              <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
-                <span>創建: {new Date(card.createdAt).toLocaleDateString()}</span>
-                <span>掌握度: {card.masteryLevel}%</span>
-              </div>
-            </div>
-          </div>
-
-          {/* 操作按鈕 - 響應式設計 */}
-          <div className="flex flex-wrap md:flex-nowrap items-center gap-1 md:gap-2 mt-3 md:mt-0">
-            {/* 收藏按鈕 */}
-            <button
-              onClick={onToggleFavorite}
-              className={`px-2 md:px-3 py-2 rounded-lg font-medium transition-colors ${
-                card.isFavorite
-                  ? 'bg-yellow-100 text-yellow-700 border border-yellow-300 hover:bg-yellow-200'
-                  : 'bg-gray-100 text-gray-600 border border-gray-300 hover:bg-yellow-50 hover:text-yellow-600 hover:border-yellow-300'
-              }`}
-            >
-              <div className="flex items-center gap-1">
-                <svg className="w-4 h-4" fill={card.isFavorite ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                </svg>
-                <span className="text-sm hidden sm:inline">
-                  {card.isFavorite ? '已收藏' : '收藏'}
-                </span>
-              </div>
-            </button>
-
-            {/* 編輯按鈕 */}
-            <button
-              onClick={onEdit}
-              className="px-2 md:px-3 py-2 bg-blue-100 text-blue-700 border border-blue-300 rounded-lg font-medium hover:bg-blue-200 transition-colors"
-            >
-              <div className="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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                </svg>
-                <span className="text-sm hidden sm:inline">編輯</span>
-              </div>
-            </button>
-
-            {/* 刪除按鈕 */}
-            <button
-              onClick={onDelete}
-              className="px-2 md:px-3 py-2 bg-red-100 text-red-700 border border-red-300 rounded-lg font-medium hover:bg-red-200 transition-colors"
-            >
-              <div className="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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                </svg>
-                <span className="text-sm hidden sm:inline">刪除</span>
-              </div>
-            </button>
-
-            {/* 詳細按鈕 */}
-            <button
-              onClick={() => router.push(`/flashcards/${card.id}`)}
-              className="px-2 md:px-4 py-2 bg-gray-100 text-gray-700 border border-gray-300 rounded-lg font-medium hover:bg-gray-200 hover:text-gray-900 transition-colors"
-            >
-              <div className="flex items-center gap-1">
-                <span className="text-sm hidden md:inline">詳細</span>
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
 
 // 分頁控制組件
 interface PaginationControlsProps {
diff --git a/frontend/components/flashcards/FlashcardCard.tsx b/frontend/components/flashcards/FlashcardCard.tsx
index c98e161..07c419b 100644
--- a/frontend/components/flashcards/FlashcardCard.tsx
+++ b/frontend/components/flashcards/FlashcardCard.tsx
@@ -1,156 +1,186 @@
 import React from 'react'
 import Link from 'next/link'
 import { Flashcard } from '@/lib/services/flashcards'
-import { getPartOfSpeechDisplay, getCEFRColor, getMasteryColor, getMasteryText, formatNextReviewDate, getFlashcardImageUrl } from '@/lib/utils/flashcardUtils'
+import { getCEFRColor, getFlashcardImageUrl } from '@/lib/utils/flashcardUtils'
 
 interface FlashcardCardProps {
   flashcard: Flashcard
+  searchTerm?: string
   onEdit: () => void
   onDelete: () => void
   onFavorite: () => void
   onImageGenerate: () => void
   isGenerating?: boolean
   generationProgress?: string
+  highlightSearchTerm?: (text: string, term: string) => React.ReactNode
 }
 
 export const FlashcardCard: React.FC<FlashcardCardProps> = ({
   flashcard,
+  searchTerm = '',
   onEdit,
   onDelete,
   onFavorite,
   onImageGenerate,
   isGenerating = false,
-  generationProgress = ''
+  generationProgress = '',
+  highlightSearchTerm = (text: string) => text
 }) => {
-  const exampleImageUrl = getFlashcardImageUrl(flashcard)
+  const hasExampleImage = (card: Flashcard): boolean => {
+    return card.hasExampleImage || !!getFlashcardImageUrl(card)
+  }
+
+  const getExampleImage = (card: Flashcard): string | null => {
+    return getFlashcardImageUrl(card)
+  }
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow relative">
-      {/* CEFR標籤 */}
-      <div className="absolute top-4 right-4">
-        <span className={`px-3 py-1 rounded-full text-sm font-medium border ${getCEFRColor(flashcard.cefr)}`}>
-          {flashcard.cefr}
-        </span>
-      </div>
-
-      {/* 詞彙標題 */}
-      <div className="mb-4 pr-16">
-        <h3 className="text-xl font-bold text-gray-900 mb-1">{flashcard.word}</h3>
-        <div className="flex items-center gap-2 text-sm text-gray-600">
-          <span className="bg-gray-100 px-2 py-1 rounded">
-            {getPartOfSpeechDisplay(flashcard.partOfSpeech)}
-          </span>
-          <span>{flashcard.pronunciation}</span>
-        </div>
-      </div>
-
-      {/* 翻譯和定義 */}
-      <div className="mb-4">
-        <p className="text-green-700 font-medium mb-2">{flashcard.translation}</p>
-        <p className="text-gray-600 text-sm leading-relaxed">{flashcard.definition}</p>
-      </div>
-
-      {/* 例句 */}
-      <div className="mb-4">
-        <p className="text-blue-700 italic mb-1">"{flashcard.example}"</p>
-        {flashcard.exampleTranslation && (
-          <p className="text-blue-600 text-sm">"{flashcard.exampleTranslation}"</p>
-        )}
-      </div>
-
-      {/* 例句圖片 */}
-      <div className="mb-4">
-        {exampleImageUrl ? (
-          <div className="relative">
-            <img
-              src={exampleImageUrl}
-              alt={`${flashcard.word} example`}
-              className="w-full h-40 object-cover rounded-lg"
-            />
-            {!isGenerating && (
-              <button
-                onClick={onImageGenerate}
-                className="absolute top-2 right-2 px-2 py-1 text-xs bg-white bg-opacity-90 text-gray-700 rounded-md hover:bg-opacity-100 transition-all shadow-sm"
-              >
-                重新生成
-              </button>
-            )}
-            {isGenerating && (
-              <div className="absolute inset-0 bg-white bg-opacity-90 rounded-lg flex items-center justify-center">
-                <div className="text-center">
-                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto mb-2"></div>
-                  <p className="text-xs text-gray-600">{generationProgress}</p>
-                </div>
-              </div>
-            )}
+    <div className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 relative">
+      <div className="p-4">
+        <div className="flex items-center justify-between">
+          {/* CEFR標註 */}
+          <div className="absolute top-3 right-3">
+            <span className={`text-xs px-2 py-1 rounded-full font-medium border ${getCEFRColor(flashcard.cefr || 'A1')}`}>
+              {flashcard.cefr || 'A1'}
+            </span>
           </div>
-        ) : (
-          <div className="w-full h-40 bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center">
-            <div className="text-center text-gray-500">
-              <svg className="w-8 h-8 mx-auto mb-2" 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>
-              <p className="text-sm">尚無例句圖片</p>
-              <button
-                onClick={onImageGenerate}
-                disabled={isGenerating}
-                className="mt-2 px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors disabled:opacity-50"
-              >
-                {isGenerating ? generationProgress : '生成圖片'}
-              </button>
+
+          <div className="flex flex-col md:flex-row md:items-center gap-3 md:gap-4 flex-1">
+            {/* 例句圖片區域 - 響應式設計 */}
+            <div className="w-32 h-20 sm:w-40 sm:h-24 md:w-48 md:h-32 lg:w-54 lg:h-36 bg-gray-100 rounded-lg overflow-hidden border border-gray-200 flex items-center justify-center flex-shrink-0">
+              {hasExampleImage(flashcard) ? (
+                // 有例句圖片時顯示圖片
+                <img
+                  src={getExampleImage(flashcard)!}
+                  alt={`${flashcard.word} example`}
+                  className="w-full h-full object-cover"
+                  onError={(e) => {
+                    const target = e.target as HTMLImageElement
+                    target.style.display = 'none'
+                    target.parentElement!.innerHTML = `
+                      <div class="text-gray-400 text-xs text-center">
+                        <svg class="w-6 h-6 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
+                    `
+                  }}
+                />
+              ) : (
+                // 沒有例句圖片時顯示新增按鈕
+                <div
+                  className="w-full h-full flex items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors group"
+                  onClick={onImageGenerate}
+                  title="點擊生成例句圖片"
+                >
+                  {isGenerating ? (
+                    <div className="text-center">
+                      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mx-auto mb-1"></div>
+                      <span className="text-xs text-blue-600">{generationProgress}</span>
+                    </div>
+                  ) : (
+                    <div className="text-center">
+                      <svg className="w-8 h-8 mx-auto mb-2 text-gray-400 group-hover:text-blue-600 group-hover:scale-110 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                      </svg>
+                      <span className="text-xs text-gray-500 group-hover:text-blue-600 transition-colors">新增例句圖</span>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 詞卡信息 */}
+            <div className="flex-1">
+              <div className="flex items-center gap-3">
+                <h3 className="text-xl font-bold text-gray-900">
+                  {searchTerm ? highlightSearchTerm(flashcard.word || '未設定', searchTerm) : (flashcard.word || '未設定')}
+                </h3>
+                <span className="text-sm bg-gray-100 text-gray-700 px-2 py-1 rounded">
+                  {flashcard.partOfSpeech}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-4 mt-1">
+                <span className="text-lg text-gray-900 font-medium">
+                  {searchTerm ? highlightSearchTerm(flashcard.translation || '未設定', searchTerm) : (flashcard.translation || '未設定')}
+                </span>
+                {flashcard.pronunciation && (
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-gray-500">{flashcard.pronunciation}</span>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
+                <span>創建: {new Date(flashcard.createdAt).toLocaleDateString()}</span>
+                <span>掌握度: {flashcard.masteryLevel}%</span>
+              </div>
             </div>
           </div>
-        )}
-      </div>
 
-      {/* 學習統計 */}
-      <div className="mb-4 grid grid-cols-3 gap-2 text-center">
-        <div className="bg-gray-50 rounded p-2">
-          <div className={`text-sm font-medium px-2 py-1 rounded ${getMasteryColor(flashcard.masteryLevel)}`}>
-            {getMasteryText(flashcard.masteryLevel)}
+          {/* 操作按鈕 - 響應式設計 */}
+          <div className="flex flex-wrap md:flex-nowrap items-center gap-1 md:gap-2 mt-3 md:mt-0">
+            {/* 收藏按鈕 */}
+            <button
+              onClick={onFavorite}
+              className={`px-2 md:px-3 py-2 rounded-lg font-medium transition-colors ${
+                flashcard.isFavorite
+                  ? 'bg-yellow-100 text-yellow-700 border border-yellow-300 hover:bg-yellow-200'
+                  : 'bg-gray-100 text-gray-600 border border-gray-300 hover:bg-yellow-50 hover:text-yellow-600 hover:border-yellow-300'
+              }`}
+            >
+              <div className="flex items-center gap-1">
+                <svg className="w-4 h-4" fill={flashcard.isFavorite ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+                </svg>
+                <span className="text-sm hidden sm:inline">
+                  {flashcard.isFavorite ? '已收藏' : '收藏'}
+                </span>
+              </div>
+            </button>
+
+            {/* 編輯按鈕 */}
+            <button
+              onClick={onEdit}
+              className="px-2 md:px-3 py-2 bg-blue-100 text-blue-700 border border-blue-300 rounded-lg font-medium hover:bg-blue-200 transition-colors"
+            >
+              <div className="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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+                <span className="text-sm hidden sm:inline">編輯</span>
+              </div>
+            </button>
+
+            {/* 刪除按鈕 */}
+            <button
+              onClick={onDelete}
+              className="px-2 md:px-3 py-2 bg-red-100 text-red-700 border border-red-300 rounded-lg font-medium hover:bg-red-200 transition-colors"
+            >
+              <div className="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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                <span className="text-sm hidden sm:inline">刪除</span>
+              </div>
+            </button>
+
+            {/* 詳細按鈕 */}
+            <Link
+              href={`/flashcards/${flashcard.id}`}
+              className="px-2 md:px-4 py-2 bg-gray-100 text-gray-700 border border-gray-300 rounded-lg font-medium hover:bg-gray-200 hover:text-gray-900 transition-colors"
+            >
+              <div className="flex items-center gap-1">
+                <span className="text-sm hidden md:inline">詳細</span>
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </div>
+            </Link>
           </div>
-          <div className="text-xs text-gray-600 mt-1">{flashcard.masteryLevel}%</div>
         </div>
-        <div className="bg-gray-50 rounded p-2">
-          <div className="text-sm font-medium text-gray-900">{flashcard.timesReviewed}</div>
-          <div className="text-xs text-gray-600">複習次數</div>
-        </div>
-        <div className="bg-gray-50 rounded p-2">
-          <div className="text-sm font-medium text-gray-900">{formatNextReviewDate(flashcard.nextReviewDate)}</div>
-          <div className="text-xs text-gray-600">下次複習</div>
-        </div>
-      </div>
-
-      {/* 操作按鈕 */}
-      <div className="flex gap-2">
-        <Link
-          href={`/flashcards/${flashcard.id}`}
-          className="flex-1 bg-blue-600 text-white py-2 px-3 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors text-center"
-        >
-          查看詳情
-        </Link>
-        <button
-          onClick={onFavorite}
-          className={`px-3 py-2 rounded-lg text-sm transition-colors ${
-            flashcard.isFavorite
-              ? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
-              : 'bg-gray-100 text-gray-600 hover:bg-yellow-50'
-          }`}
-        >
-          {flashcard.isFavorite ? '★' : '☆'}
-        </button>
-        <button
-          onClick={onEdit}
-          className="px-3 py-2 bg-gray-100 text-gray-600 rounded-lg text-sm hover:bg-gray-200 transition-colors"
-        >
-          編輯
-        </button>
-        <button
-          onClick={onDelete}
-          className="px-3 py-2 bg-red-100 text-red-600 rounded-lg text-sm hover:bg-red-200 transition-colors"
-        >
-          刪除
-        </button>
       </div>
     </div>
   )