diff --git a/data.jai b/data.jai
index 9a9ff8b..05de79f 100644
--- a/data.jai
+++ b/data.jai
@@ -8,8 +8,20 @@ get_id :: () -> string {
     return sprint("REF-%", state.idTicker);
 }
 
+Slot :: struct {
+    id : string;
+    tags : [..]string;
+}
+
+Ingredient :: struct {
+    name : string;
+    amount : float;
+}
+
 Component :: struct {
-    
+    isSlot : bool;
+    slot : Slot;
+    ingredient : Ingredient;
 }
 
 Recipe :: struct {
@@ -18,12 +30,27 @@ Recipe :: struct {
     category : string = "Breakfast";
     image : string = "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=500&auto=format&fit=crop";
     duration : int = 5;
+    components: [..]Component;
+    steps : [..]string;
 }
 
 state : State;
 
 init_data :: () {
     recipe := Recipe.{};
+
+    array_add(*recipe.steps, "Testi 1");
+    array_add(*recipe.steps, "Testi 2");
+    array_add(*recipe.steps, "Testi 3");
+
+    tags : [..]string;
+    array_add(*tags, "vegetable side");
+    array_add(*tags, "asia");
+    
+
+    array_add(*recipe.components, .{false, .{}, .{"suola (g)", 5}});
+    array_add(*recipe.components, .{true, .{"", tags}, .{}});
+    
     recipe.id = get_id();
     array_add(*state.recipes, recipe);
     recipe.id = get_id();
diff --git a/pages/recipe.jai b/pages/recipe.jai
index ff8b72b..d6e6273 100644
--- a/pages/recipe.jai
+++ b/pages/recipe.jai
@@ -11,10 +11,82 @@ get_recipe_page :: (req: Request) -> string {
     add_navbar(*builder);
 
     print_to_builder(*builder, recipeHero, curRecipe.image);
+    print_to_builder(*builder, "<div class=\"content-wrapper\">");
+    print_to_builder(*builder, recipeHeroCard, curRecipe.id, curRecipe.category, curRecipe.name, curRecipe.duration, curRecipe.duration);
+    print_to_builder(*builder, "</div>");
+    print_to_builder(*builder, "<div class=\"layout\">");
+    add_ingredients(curRecipe, *builder);
+    add_steps(curRecipe, *builder);
+    print_to_builder(*builder, "</div>");
+
     
     return builder_to_string(*builder);
 }
 
+add_ingredients :: (recipe: Recipe, builder: *String_Builder) {
+    print_to_builder(builder, "<div>");
+    print_to_builder(builder, "<div class=\"mono\" style=\"margin-bottom: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem;\">Ingredients</div>");
+
+    ingredientHtml : string = #string DONE
+    <div class="component-row">
+        <div class="component-name">%</div>
+        <div class="mono">%</div>
+    </div>
+    DONE
+
+    slotHtml : string = #string DONE
+    <div class="component-row">
+        <div>
+            <div class="component-name" style="text-decoration: underline; text-decoration-color: var(--gold);">Component slot</div>
+            <div class="mono" style="font-size: 0.6rem; color: var(--gold);">%</div>
+        </div>
+        <div class="mono">1</div>
+    </div>
+    DONE
+    
+    for recipe.components {
+        b : String_Builder;
+        if !it.isSlot {
+            print_to_builder(builder, ingredientHtml, it.ingredient.name, it.ingredient.amount);
+        } else {
+            for t : it.slot.tags {
+                print_to_builder(*b, "[%] ", t);
+            }
+            print_to_builder(builder, slotHtml, builder_to_string(*b));
+        }
+    }
+    print_to_builder(builder, "</div>");
+    
+}
+
+add_steps :: (recipe: Recipe, builder: *String_Builder) {
+    stepHtml : string = #string DONE
+    <div class="step">
+        <div class="step-num">%</div>
+        <div class="step-text">%</div>
+    </div>
+    DONE
+
+    print_to_builder(builder, "<div>");
+    print_to_builder(builder, "<div class=\"mono\" style=\"margin-bottom: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem;\">Steps</div>");
+    for it, i : recipe.steps {
+        print_to_builder(builder, stepHtml, i+1, it);
+    }
+    print_to_builder(builder, "</div>");
+}
+
+recipeHeroCard : string = #string DONE
+<header class="header-card">
+    <div class="mono" style="margin-bottom: 1rem; color: var(--gold);">% &bull; % &bull; HIGH PROTEIN</div>
+    <h1 class="recipe-title">%</h1>
+    
+    <div class="specs">
+        <div><span class="mono">Time</span><br><span class="spec-val">% minutes</span></div>
+        <div><span class="mono">Yield</span><br><span class="spec-val">% servings</span></div>
+    </div>
+</header>
+DONE
+
 recipeHero : string = #string DONE
 <div class="recipe-hero">
     <img id="parallax-img" src="%" alt="Steak">
diff --git a/style.jai b/style.jai
index a9a7e17..f24ae2d 100644
--- a/style.jai
+++ b/style.jai
@@ -98,7 +98,7 @@ nav { padding: 1rem var(--space); display: flex; justify-content: space-between;
 .specs { display: flex; gap: 3rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gold-dim); }
 .spec-val { font-family: 'Playfair Display', serif; font-size: 1.5rem; }
 
-.layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; max-width: 1200px; margin: 0 auto; padding-bottom: 100px; }
+.layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; max-width: 1200px; margin: 0 auto; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; }
 
 .component-row { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--gold-dim); }
 .component-name { font-weight: 500; font-size: 1.1rem; }