diff --git a/src/components/Detail/StepView.astro b/src/components/Detail/StepView.astro
index a7652b6..7b8df3a 100644
--- a/src/components/Detail/StepView.astro
+++ b/src/components/Detail/StepView.astro
@@ -3,10 +3,10 @@ import { record } from "astro:schema"
 import client from "@/data/pocketbase"
 import StepIngredientSideView from "./StepIngredientSideView.astro"
 
-const { steps } = Astro.props
+const { steps, class: className } = Astro.props
 ---
 
-<div class="md:ml-5 mt-2 md:mt-0">
+<div class={className}>
     <p class="text-[22pt] font-bold md:hidden">Steps</p>
     { steps.map(s => (
         <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
diff --git a/src/pages/recipe/[recipeid].astro b/src/pages/recipe/[recipeid].astro
index 6554145..c91320e 100644
--- a/src/pages/recipe/[recipeid].astro
+++ b/src/pages/recipe/[recipeid].astro
@@ -31,7 +31,7 @@ const ingredients = await Promise.all(
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
             <ImageCarousel class="w-full" recipe={re} />
-            <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
+            <p class="text-[28pt] font-bold leading-none mt-2">{re.name}</p>
 
             <!-- Details -->
             <InfoView re={re} />
@@ -40,11 +40,9 @@ const ingredients = await Promise.all(
             <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
         </div>
         
-        <div class="flex md:flex-2/3 w-full flex-col">
-            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
-
+        <div class="flex mt-4 md:flex-2/3 w-full flex-col">
             <!-- Steps -->
-            <StepView steps={steps} />
+            <StepView class="md:ml-3" steps={steps} />
         </div>
 
     </div>