diff --git a/frontend/src/lib/planner/DayMealCard.svelte b/frontend/src/lib/planner/DayMealCard.svelte
index 26eae34..df39f4b 100644
--- a/frontend/src/lib/planner/DayMealCard.svelte
+++ b/frontend/src/lib/planner/DayMealCard.svelte
@@ -48,6 +48,15 @@
 	);
 </script>
 
+{#snippet recipeInfo()}
+	<h3 class="font-[var(--font-display)] text-[20px] font-[300] leading-tight text-[var(--color-text)]">
+		{slot.recipe?.name ?? ''}
+	</h3>
+	{#if metadata}
+		<p class="mt-1 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">{metadata}</p>
+	{/if}
+{/snippet}
+
 {#if actionSheetMode}
 	<button
 		type="button"
@@ -57,12 +66,7 @@
 		onclick={onactionsheet}
 		class="w-full text-left rounded-[var(--radius-lg)] border-2 p-4 transition-colors {borderClass}"
 	>
-		<h3 class="font-[var(--font-display)] text-[20px] font-[300] leading-tight text-[var(--color-text)]">
-			{slot.recipe!.name}
-		</h3>
-		{#if metadata}
-			<p class="mt-1 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">{metadata}</p>
-		{/if}
+		{@render recipeInfo()}
 	</button>
 {:else}
 	<div
@@ -72,12 +76,7 @@
 		class="rounded-[var(--radius-lg)] border-2 p-4 transition-colors {borderClass}"
 	>
 		{#if slot.recipe}
-			<h3 class="font-[var(--font-display)] text-[20px] font-[300] leading-tight text-[var(--color-text)]">
-				{slot.recipe.name}
-			</h3>
-			{#if metadata}
-				<p class="mt-1 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">{metadata}</p>
-			{/if}
+			{@render recipeInfo()}
 
 			{#if !readonly}
 				<div class="mt-3 flex gap-2">