diff --git a/src/components/Detail/StepIngredientSideView.astro b/src/components/Detail/StepIngredientSideView.astro
index 5b6c7dd..b4cdc49 100644
--- a/src/components/Detail/StepIngredientSideView.astro
+++ b/src/components/Detail/StepIngredientSideView.astro
@@ -10,7 +10,7 @@ const ings = await Promise.all(
 
 <div class={className}>
     {ings.map(i => (
-        <div>
+        <div class="text-sm">
             <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
         </div>
     ))}
diff --git a/src/components/Detail/StepView.astro b/src/components/Detail/StepView.astro
index 7b8df3a..1860721 100644
--- a/src/components/Detail/StepView.astro
+++ b/src/components/Detail/StepView.astro
@@ -15,7 +15,7 @@ const { steps, class: className } = Astro.props
             <div class="flex flex-col md:flex-row md:items-stretch">
                 <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
                 {s.ingredients && s.ingredients.length > 0 && (
-                    <div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
+                    <div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
                         <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
                     </div>
                 )}