number instruction steps in detail view

frontend/src/App.css

@@ -77,5 +77,9 @@
   .ingredient-group-card {
     @apply py-4 border-b border-gray-400;
   }
+
+  .enumeration-indicator{
+    @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center 
+  }
   
 }

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -123,13 +123,26 @@ export default function RecipeDetailPage() {
       </ul>
 
       {/* Instructions - @todo add reasonable list delegate component*/}
-      <h2 className="section-heading">Zubereitung</h2>
+      {/*<h2 className="section-heading">Zubereitung</h2>
       <ol className="default-list mb-6">
         {recipe.instructionStepList.map((step,j) =>(
           <li key={j}>
             {step.text}
           </li>
         ))}
+      </ol>*/}
+      <ol className="space-y-4">
+        {recipe.instructionStepList.map((step, j) => (
+          <li key={j} className="flex items-start gap-4">
+            {/* Step number circle */}
+            <div className="enumeration-indicator">
+              {j + 1}
+            </div>
+
+            {/* Step text */}
+            <p className="leading-relaxed">{step.text}</p>
+          </li>
+        ))}
       </ol>
 
       {/* Action buttons */}