diff --git a/frontend/src/routes/routines/[id]/+page.svelte b/frontend/src/routes/routines/[id]/+page.svelte
index 155fecc..7ddb326 100644
--- a/frontend/src/routes/routines/[id]/+page.svelte
+++ b/frontend/src/routes/routines/[id]/+page.svelte
@@ -93,11 +93,12 @@
 				{#each routine.steps.toSorted((a, b) => a.order_index - b.order_index) as step (step.id)}
 					<div class="flex items-center justify-between rounded-md border border-border px-4 py-3">
 						<div class="flex items-center gap-3">
-							<span class="text-xs text-muted-foreground w-4">{step.order_index + 1}</span>
+							<span class="text-xs text-muted-foreground w-4">{step.order_index}</span>
 							<div>
-								{#if step.product}
-									<p class="text-sm font-medium">{step.product.name}</p>
-									<p class="text-xs text-muted-foreground">{step.product.brand}</p>
+								{#if step.product_id}
+									{@const product = products.find((p) => p.id === step.product_id)}
+									<p class="text-sm font-medium">{product?.name ?? step.product_id}</p>
+									{#if product?.brand}<p class="text-xs text-muted-foreground">{product.brand}</p>{/if}
 								{:else if step.action_type}
 									<p class="text-sm font-medium">{step.action_type.replace(/_/g, ' ')}</p>
 								{:else}