diff --git a/app/Models/Recipe.php b/app/Models/Recipe.php
index 00e9c1e..ad6089e 100644
--- a/app/Models/Recipe.php
+++ b/app/Models/Recipe.php
@@ -10,6 +10,7 @@ use ElasticScoutDriverPlus\QueryDsl;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Support\Collection;
 use Laravel\Scout\Searchable;
 use Spatie\Image\Manipulations;
 use Spatie\MediaLibrary\HasMedia;
@@ -73,6 +74,7 @@ use Spatie\Tags\HasTags;
  * @property-read int|null $ingredient_separators_count
  * @method static \Database\Factories\RecipeFactory factory(...$parameters)
  * @method static \Illuminate\Database\Eloquent\Builder|Recipe whereTimeCook($value)
+ * @property-read Collection $ingredients_list
  */
 final class Recipe extends Model implements HasMedia
 {
@@ -162,6 +164,16 @@ final class Recipe extends Model implements HasMedia
         return round($this->weight / $this->servings, 2);
     }
 
+    /**
+     * Get the ingredients list (ingredient amounts and separators).
+     */
+    public function getIngredientsListAttribute(): Collection {
+        return new Collection([
+            ...$this->ingredientAmounts,
+            ...$this->ingredientSeparators,
+        ]);
+    }
+
     /**
      * Get the steps for this Recipe.
      */
diff --git a/resources/views/recipes/show.blade.php b/resources/views/recipes/show.blade.php
index 78254c0..f60d833 100644
--- a/resources/views/recipes/show.blade.php
+++ b/resources/views/recipes/show.blade.php
@@ -52,23 +52,34 @@
                 </h1>
                 <div class="prose prose-lg">
                     <ul class="space-y-2">
-                        @foreach($recipe->ingredientAmounts as $ia)
-                            <li>
-                                <span>
-                                    {{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}
-                                    @if($ia->unitFormatted){{ $ia->unitFormatted }}@endif
-                                    @if($ia->ingredient->type === \App\Models\Recipe::class)
-                                        <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                                           href="{{ route('recipes.show', $ia->ingredient) }}">
-                                            {{ $ia->ingredient->name }}
-                                        </a>
-                                    @else
-                                        {{ $ia->ingredient->name }}@if($ia->ingredient->detail), {{ $ia->ingredient->detail }}@endif
-                                    @endif
-                                    @if($ia->detail)<span class="text-gray-500">{{ $ia->detail }}</span>@endif
-                                    <div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div>
-                                </span>
-                            </li>
+                        @foreach($recipe->ingredientsList->sortBy('weight') as $item)
+                            @if($item::class === \App\Models\IngredientAmount::class)
+                                <li>
+                                    <span>
+                                        {{ \App\Support\Number::fractionStringFromFloat($item->amount) }}
+                                        @if($item->unitFormatted){{ $item->unitFormatted }}@endif
+                                        @if($item->ingredient->type === \App\Models\Recipe::class)
+                                            <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                                               href="{{ route('recipes.show', $item->ingredient) }}">
+                                                {{ $item->ingredient->name }}
+                                            </a>
+                                        @else
+                                            {{ $item->ingredient->name }}@if($item->ingredient->detail), {{ $item->ingredient->detail }}@endif
+                                        @endif
+                                        @if($item->detail)<span class="text-gray-500">{{ $item->detail }}</span>@endif
+                                        <div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $item->nutrients_summary }}</div>
+                                    </span>
+                                </li>
+                            @elseif($item::class === \App\Models\RecipeSeparator::class)
+                                </ul></div>
+                                @if($item->text)
+                                    <h2 class="mt-3 font-bold">{{ $item->text }}</h2>
+                                @else
+                                    <hr class="mt-3 lg:w-1/2" />
+                                @endif
+                                <div class="prose prose-lg">
+                                <ul class="space-y-2">
+                            @endif
                         @endforeach
                     </ul>
                 </div>