diff --git a/backend/data/recipes.db-shm b/backend/data/recipes.db-shm
index ebe1263..373dff3 100644
Binary files a/backend/data/recipes.db-shm and b/backend/data/recipes.db-shm differ
diff --git a/backend/data/recipes.db-wal b/backend/data/recipes.db-wal
index 8dcab29..6094a2e 100644
Binary files a/backend/data/recipes.db-wal and b/backend/data/recipes.db-wal differ
diff --git a/frontend/src/components/recipe/RecipeCard.tsx b/frontend/src/components/recipe/RecipeCard.tsx
index 7d5fde3..cbf74e5 100644
--- a/frontend/src/components/recipe/RecipeCard.tsx
+++ b/frontend/src/components/recipe/RecipeCard.tsx
@@ -43,11 +43,11 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
             </span>
           )}
           <button
-            onClick={(e) => { e.preventDefault(); favMutation.mutate() }}
-            className="ml-auto"
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); favMutation.mutate() }}
+            className="ml-auto p-2 -mr-2 min-w-[44px] min-h-[44px] flex items-center justify-center active:scale-125 transition-transform"
           >
             <Heart
-              size={20}
+              size={22}
               className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-warm-grey'}
             />
           </button>
diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
index 74db2a1..a390887 100644
--- a/frontend/src/pages/RecipePage.tsx
+++ b/frontend/src/pages/RecipePage.tsx
@@ -126,8 +126,8 @@ export function RecipePage() {
           <Link to={`/recipe/${recipe.slug}/edit`} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center">
             <Pencil size={20} className="text-espresso" />
           </Link>
-          <button onClick={() => favMutation.mutate()} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center">
-            <Heart size={20} className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-espresso'} />
+          <button onClick={() => favMutation.mutate()} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center active:scale-125 transition-transform">
+            <Heart size={22} className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-espresso'} />
           </button>
         </div>
       </div>