diff --git a/frontend/app/flashcards/page.tsx b/frontend/app/flashcards/page.tsx
index b257c2b..4bd230c 100644
--- a/frontend/app/flashcards/page.tsx
+++ b/frontend/app/flashcards/page.tsx
@@ -579,16 +579,18 @@ function FlashcardItem({ card, searchTerm, onEdit, onDelete, onToggleFavorite, g
                 />
               ) : (
                 // 沒有例句圖片時顯示新增按鈕
-                <button
+                <div
+                  className="w-full h-full flex items-center justify-center cursor-pointer hover:bg-blue-50 transition-colors group"
                   onClick={onGenerateExampleImage}
-                  className="w-full h-full flex flex-col items-center justify-center text-gray-500 hover:text-blue-600 hover:bg-blue-50 transition-colors group"
                   title="點擊生成例句圖片"
                 >
-                  <svg className="w-8 h-8 mb-2 group-hover:scale-110 transition-transform" 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 font-medium">新增例句圖</span>
-                </button>
+                  <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>