diff --git a/marketing-site/pages/read/recipe/[id].jsx b/marketing-site/pages/read/recipe/[id].jsx
index e7a81ad..d4e3529 100644
--- a/marketing-site/pages/read/recipe/[id].jsx
+++ b/marketing-site/pages/read/recipe/[id].jsx
@@ -5,7 +5,7 @@ import ReaderNav from "../../../components/reader/ReaderNav";
 import ReaderFooter from "../../../components/reader/ReaderFooter";
 import WorkflowBlock from "../../../components/reader/WorkflowBlock";
 import useActivation from "../../../components/reader/useActivation";
-import { RECIPES_BY_ID } from "../../../data/sample-chapter";
+import { RECIPES, RECIPES_BY_ID } from "../../../data/sample-chapter";
 
 export default function RecipeFocus() {
   const router = useRouter();
@@ -76,6 +76,8 @@ export default function RecipeFocus() {
           </p>
           <WorkflowBlock
             recipe={recipe}
+            index={Math.max(RECIPES.findIndex((r) => r.id === recipe.id) + 1, 1)}
+            total={RECIPES.length}
             complete={!!complete[recipe.id]}
             onToggleComplete={toggle}
             focused