diff --git a/changelog/70_UNRELEASED_xxxx.xx.xx.md b/changelog/70_UNRELEASED_xxxx.xx.xx.md
index 1e4133ed..1591c8b3 100644
--- a/changelog/70_UNRELEASED_xxxx.xx.xx.md
+++ b/changelog/70_UNRELEASED_xxxx.xx.xx.md
@@ -33,6 +33,7 @@
 
 - Added a new entry "Add to meal plan" in the context/more menu per recipe to directly add a recipe to the meal plan from the recipes page
 - Changed that when a ingredient has a "Variable amount" set, the text entered there now also replaces the unit when displaying the recipe (not only the amount as before)
+- When displaying a recipe in fullscreen mode, the ingredients and preparation is now shown side by side (or below each other on small screens) instead of in tabs
 - Fixed that hiding the "Requirements fulfilled" column (table options) on the recipes page didn't work
 - Fixed that ingredient costs and calories were wrong when product substitution and unit conversions were involved at the same time
 
diff --git a/public/viewjs/recipes.js b/public/viewjs/recipes.js
index 830b8f90..e2bba809 100644
--- a/public/viewjs/recipes.js
+++ b/public/viewjs/recipes.js
@@ -351,6 +351,10 @@ $(".recipe-fullscreen").on('click', function(e)
 	$("body").toggleClass("fullscreen-card");
 	$("#selectedRecipeCard .card-header").toggleClass("fixed-top");
 	$("#selectedRecipeCard .card-body").toggleClass("mt-5");
+	$(".recipe-content-container").toggleClass("row");
+	$(".recipe-content-container .ingredients").toggleClass("tab-pane").toggleClass("col-12 col-md-6 col-xl-4");
+	$(".recipe-content-container .preparation").toggleClass("tab-pane").toggleClass("col-12 col-md-6 col-xl-8");
+	$(".recipe-headline").toggleClass("d-none");
 
 	if ($("body").hasClass("fullscreen-card"))
 	{
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 47ced616..23c6f45e 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -428,7 +428,7 @@
 						$recipePositionsFiltered = FindAllObjectsInArrayByPropertyValue($allRecipePositions[$recipe->id], 'recipe_id', $recipe->id);
 						@endphp
 
-						<ul class="nav nav-tabs grocy-tabs mb-3 d-print-none"
+						<ul class="nav nav-tabs grocy-tabs mb-3 d-print-none hide-on-fullscreen-card"
 							role="tablist">
 							@if(count($recipePositionsFiltered) > 0)
 							<li class="nav-item">
@@ -448,12 +448,12 @@
 							@endif
 						</ul>
 
-						<div class="tab-content grocy-tabs p-2 print">
+						<div class="tab-content grocy-tabs p-2 print recipe-content-container">
 							@if(count($recipePositionsFiltered) > 0)
-							<div class="tab-pane active"
+							<div class="tab-pane active ingredients"
 								id="ingredients-{{ $index }}"
 								role="tabpanel">
-								<div class="mb-2 mt-3 d-none d-print-block">
+								<div class="mb-2 d-none d-print-block recipe-headline">
 									<h3 class="mb-0">{{ $__t('Ingredients') }}</h3>
 								</div>
 								<ul class="list-group list-group-flush mb-5">
@@ -535,10 +535,10 @@
 								</ul>
 							</div>
 							@endif
-							<div class="tab-pane @if(count($recipePositionsFiltered) == 0) active @endif"
+							<div class="tab-pane @if(count($recipePositionsFiltered) == 0) active @endif preparation"
 								id="prep-{{ $index }}"
 								role="tabpanel">
-								<div class="mb-2 d-none d-print-block">
+								<div class="mb-2 d-none d-print-block recipe-headline">
 									<h3 class="mb-0">{{ $__t('Preparation') }}</h3>
 								</div>
 								@if(!empty($recipe->description))