diff --git a/public/css/grocy.css b/public/css/grocy.css
index 937d1586..3ddb9d27 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -61,6 +61,7 @@ a.discrete-link:focus {
 	left: 0;
 	overflow: auto;
 	background-color: #ffffff;
+	width: 100%;
 }
 
  /* Fixes smooth scrolling on iOS */
@@ -498,3 +499,18 @@ canvas.drawingBuffer {
   width: 1.25rem;
   height: 1.25rem;
 }
+
+.recipe-card-name {
+	font-size: 16px;
+	text-align: center;
+	width: 100%;
+}
+
+.recipe-expand {
+	right: 1.25rem;
+	top: .75rem;
+}
+
+.recipe-servings-input {
+	width: 125px;
+}
\ No newline at end of file
diff --git a/public/viewjs/recipeform.js b/public/viewjs/recipeform.js
index f6e6eb2a..ae2d4e33 100644
--- a/public/viewjs/recipeform.js
+++ b/public/viewjs/recipeform.js
@@ -326,13 +326,21 @@ $('#save-recipe-include-button').on('click', function(e)
 	}
 });
 
+$("#recipe-picture").on("change", function (e) {
+  $("#recipe-picture-label").removeClass("d-none");
+  $("#recipe-picture-label-none").addClass("d-none");
+  $("#delete-current-recipe-picture-on-save-hint").addClass("d-none");
+  $("#current-recipe-picture").addClass("d-none");
+  Grocy.DeleteRecipePictureOnSave = false;
+});
+
 Grocy.DeleteRecipePictureOnSave = false;
-$('#delete-current-recipe-picture-button').on('click', function (e)
-{
-	Grocy.DeleteRecipePictureOnSave = true;
-	$("#current-recipe-picture").addClass("d-none");
-	$("#delete-current-recipe-picture-on-save-hint").removeClass("d-none");
-	$("#delete-current-recipe-picture-button").addClass("disabled");
+$("#delete-current-recipe-picture-button").on("click", function (e) {
+  Grocy.DeleteRecipePictureOnSave = true;
+  $("#current-recipe-picture").addClass("d-none");
+  $("#delete-current-recipe-picture-on-save-hint").removeClass("d-none");
+  $("#recipe-picture-label").addClass("d-none");
+  $("#recipe-picture-label-none").removeClass("d-none");
 });
 
 Grocy.Components.UserfieldsForm.Load();
diff --git a/views/recipeform.blade.php b/views/recipeform.blade.php
index 3a71ac30..f9b8d63b 100644
--- a/views/recipeform.blade.php
+++ b/views/recipeform.blade.php
@@ -47,11 +47,26 @@
 				<input type="text" class="form-control" required id="name" name="name" value="@if($mode == 'edit'){{ $recipe->name }}@endif">
 				<div class="invalid-feedback">{{ $__t('A name is required') }}</div>
 			</div>
-
+			
 			<div class="form-group">
-				<label for="description">{{ $__t('Preparation') }}</label>
-				<textarea id="description" class="form-control wysiwyg-editor" name="description">@if($mode == 'edit'){{ $recipe->description }}@endif</textarea>
-			</div>
+					<label for="recipe-picture">
+						{{ $__t('Picture') }}
+					</label>
+					<div class="input-group">
+						<div class="custom-file">
+							<input type="file" class="custom-file-input" id="recipe-picture" accept="image/*">
+							<label id="recipe-picture-label" class="custom-file-label @if(empty($recipe->picture_file_name)) d-none @endif" for="recipe-picture">
+								{{ $recipe->picture_file_name }}
+							</label>
+							<label id="recipe-picture-label-none" class="custom-file-label @if(!empty($recipe->picture_file_name)) d-none @endif" for="recipe-picture">
+								{{ $__t('No file selected') }}
+							</label>
+						</div>
+						<div class="input-group-append">
+							<span class="input-group-text"><i class="fas fa-trash" id="delete-current-recipe-picture-button"></i></span>
+						</div>
+					</div>
+				</div>
 
 			@php if($mode == 'edit') { $value = $recipe->base_servings; } else { $value = 1; } @endphp
 			@include('components.numberpicker', array(
@@ -64,25 +79,18 @@
 			))			
 
 			<div class="form-group">
-				<div class="form-check">
+				<div class="form-check custom-control custom-checkbox pt-0">
 					<input type="hidden" name="not_check_shoppinglist" value="0">
-					<input @if($mode == 'edit' && $recipe->not_check_shoppinglist == 1) checked @endif class="form-check-input" type="checkbox" id="not_check_shoppinglist" name="not_check_shoppinglist" value="1">
-					<label class="form-check-label" for="not_check_shoppinglist">{{ $__t('Do not check against the shopping list when adding missing items to it') }}&nbsp;&nbsp;
-						<span class="small text-muted">{{ $__t('By default the amount to be added to the shopping list is "needed amount - stock amount - shopping list amount" - when this is enabled, it is only checked against the stock amount, not against what is already on the shopping list') }}</span>
+					<input @if($mode == 'edit' && $recipe->not_check_shoppinglist == 1) checked @endif class="form-check-input custom-control-input" type="checkbox" id="not_check_shoppinglist" name="not_check_shoppinglist" value="1">
+					<label class="form-check-label custom-control-label" for="not_check_shoppinglist">
+						{{ $__t('Do not check against the shopping list when adding missing items to it') }}&nbsp;&nbsp;
+						<span class="small text-muted">
+							{{ $__t('By default the amount to be added to the shopping list is "needed amount - stock amount - shopping list amount" - when this is enabled, it is only checked against the stock amount, not against what is already on the shopping list') }}
+						</span>
 					</label>
 				</div>
 			</div>
 
-			<div class="form-group">
-				<label for="recipe-picture">{{ $__t('Picture') }}
-					<span class="text-muted small">{{ $__t('If you don\'t select a file, the current picture will not be altered') }}</span>
-				</label>
-				<div class="custom-file">
-					<input type="file" class="custom-file-input" id="recipe-picture" accept="image/*">
-					<label class="custom-file-label" for="recipe-picture">{{ $__t('No file selected') }}</label>
-				</div>
-			</div>
-
 			@include('components.productpicker', array(
 				'products' => $products,
 				'isRequired' => false,
@@ -96,7 +104,12 @@
 				'entity' => 'recipes'
 			))
 
-			<button id="save-recipe-button" class="btn btn-success">{{ $__t('Save') }}</button>
+			<div class="form-group">
+				<label for="description">{{ $__t('Preparation') }}</label>
+				<textarea id="description" class="form-control wysiwyg-editor" name="description">@if($mode == 'edit'){{ $recipe->description }}@endif</textarea>
+			</div>
+
+			<button id="save-recipe-button" class="btn btn-success mb-2">{{ $__t('Save') }}</button>
 
 		</form>
 	</div>
@@ -104,12 +117,27 @@
 	<div class="col-xs-12 col-md-5 pb-3">
 		<div class="row">
 			<div class="col">
-				<h2>
-					{{ $__t('Ingredients list') }}
-					<a id="recipe-pos-add-button" class="btn btn-outline-dark recipe-pos-add-button" type="button" href="#">
-						<i class="fas fa-plus"></i> {{ $__t('Add') }}
-					</a>
-				</h2>
+				@if(!empty($recipe->picture_file_name))
+					<img id="current-recipe-picture" data-src="{{ $U('/api/files/recipepictures/' . base64_encode($recipe->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" class="img-fluid img-thumbnail mt-2 lazy mb-5">
+					<p id="delete-current-recipe-picture-on-save-hint" class="form-text text-muted font-italic d-none mb-5">{{ $__t('The current picture will be deleted when you save the recipe') }}</p>
+				@else
+					<p id="no-current-recipe-picture-hint" class="form-text text-muted font-italic mb-5">{{ $__t('No picture available') }}</p>
+				@endif
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col">
+				<div class="title-related-links">
+					<h4>
+						{{ $__t('Ingredients list') }}
+					</h4>
+					<div class="related-links">
+						<a id="recipe-pos-add-button" class="btn btn-outline-primary btn-sm recipe-pos-add-button" type="button" href="#">
+							{{ $__t('Add') }}
+						</a>
+					</div>
+				</div>
 				
 				<table id="recipes-pos-table" class="table table-sm table-striped dt-responsive">
 					<thead>
@@ -176,12 +204,16 @@
 
 		<div class="row mt-5">
 			<div class="col">
-				<h2>
-					{{ $__t('Included recipes') }}
-					<a id="recipe-include-add-button" class="btn btn-outline-dark" href="#">
-						<i class="fas fa-plus"></i> {{ $__t('Add') }}
-					</a>
-				</h2>
+				<div class="title-related-links">
+					<h4>
+						{{ $__t('Included recipes') }}
+					</h4>
+					<div class="related-links">
+						<a id="recipe-include-add-button" class="btn btn-outline-primary btn-sm" href="#">
+							{{ $__t('Add') }}
+						</a>
+					</div>
+				</div>
 				<table id="recipes-includes-table" class="table table-sm table-striped dt-responsive">
 					<thead>
 						<tr>
@@ -215,19 +247,6 @@
 				</table>
 			</div>
 		</div>
-
-		<div class="row mt-5">
-			<div class="col">
-				<label class="mt-2">{{ $__t('Picture') }}</label>
-				<button id="delete-current-recipe-picture-button" class="btn btn-sm btn-danger @if(empty($recipe->picture_file_name)) disabled @endif"><i class="fas fa-trash"></i> {{ $__t('Delete') }}</button>
-				@if(!empty($recipe->picture_file_name))
-					<p><img id="current-recipe-picture" data-src="{{ $U('/api/files/recipepictures/' . base64_encode($recipe->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" class="img-fluid img-thumbnail mt-2 lazy"></p>
-					<p id="delete-current-recipe-picture-on-save-hint" class="form-text text-muted font-italic d-none">{{ $__t('The current picture will be deleted when you save the recipe') }}</p>
-				@else
-					<p id="no-current-recipe-picture-hint" class="form-text text-muted font-italic">{{ $__t('No picture available') }}</p>
-				@endif
-			</div>
-		</div>
 	</div>
 
 </div>
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index 26397f37..0c303223 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -143,42 +143,35 @@
 	@if($selectedRecipe !== null)
 	<div class="col-xs-12 col-md-6">
 		<div id="selectedRecipeCard" class="card">
-			<div class="card-header card-header-fullscreen">
-				<i class="fas fa-cocktail"></i> {{ $selectedRecipe->name }}&nbsp;&nbsp;
-				<a id="selectedRecipeConsumeButton" class="btn btn-sm btn-outline-success py-0 hide-when-embedded hide-on-fullscreen-card @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled == 0) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Consume all ingredients needed by this recipe') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
-					<i class="fas fa-utensils"></i>
-				</a>
-				<a class="btn btn-sm btn-outline-primary py-0 recipe-order-missing-button hide-when-embedded hide-on-fullscreen-card @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled_with_shopping_list == 1) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Put missing products on shopping list') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
-					<i class="fas fa-cart-plus"></i>
-				</a>&nbsp;&nbsp;
-				<a id="selectedRecipeEditButton" class="btn btn-sm btn-outline-info hide-when-embedded hide-on-fullscreen-card py-0" href="{{ $U('/recipe/') }}{{ $selectedRecipe->id }}">
-					<i class="fas fa-edit"></i>
-				</a>
-				<a id="selectedRecipeDeleteButton" class="btn btn-sm btn-outline-danger hide-when-embedded hide-on-fullscreen-card py-0" href="#" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
-					<i class="fas fa-trash"></i>
-				</a>
-				<a id="selectedRecipeToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 hide-when-embedded float-right" href="#" data-toggle="tooltip" title="{{ $__t('Expand to fullscreen') }}">
-					<i class="fas fa-expand-arrows-alt"></i>
-				</a>
+			<div class="card-header card-header-fullscreen position-relative">
+				<div class="position-absolute">
+					<a id="selectedRecipeEditButton" class="btn btn-sm btn-outline-info hide-when-embedded hide-on-fullscreen-card py-0" href="{{ $U('/recipe/') }}{{ $selectedRecipe->id }}">
+						<i class="fas fa-edit"></i>
+					</a>
+					<a id="selectedRecipeDeleteButton" class="btn btn-sm btn-outline-danger hide-when-embedded hide-on-fullscreen-card py-0 mr-2" href="#" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
+						<i class="fas fa-trash"></i>
+					</a>
+					<a id="selectedRecipeConsumeButton" class="btn btn-sm btn-outline-success py-0 hide-when-embedded hide-on-fullscreen-card @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled == 0) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Consume all ingredients needed by this recipe') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
+						<i class="fas fa-utensils"></i>
+					</a>
+					<a class="btn btn-sm btn-outline-primary py-0 recipe-order-missing-button hide-when-embedded hide-on-fullscreen-card @if(FindObjectInArrayByPropertyValue($recipesResolved, 'recipe_id', $selectedRecipe->id)->need_fulfilled_with_shopping_list == 1) disabled @endif" href="#" data-toggle="tooltip" title="{{ $__t('Put missing products on shopping list') }}" data-recipe-id="{{ $selectedRecipe->id }}" data-recipe-name="{{ $selectedRecipe->name }}">
+						<i class="fas fa-cart-plus"></i>
+					</a>
+				</div>
+				<div class="recipe-card-name">{{ $selectedRecipe->name }}</div>
+				<div class="recipe-expand position-absolute"> 
+					<a id="selectedRecipeToggleFullscreenButton" class="btn btn-sm btn-outline-secondary py-0 hide-when-embedded" href="#" data-toggle="tooltip" title="{{ $__t('Expand to fullscreen') }}">
+						<i class="fas fa-expand-arrows-alt"></i>
+					</a>
+				</div>
 			</div>
 
 			<div class="card-body mb-0 pb-0">
 
 				<div class="row">
-					<div class="col-4">
-						@include('components.numberpicker', array(
-							'id' => 'servings-scale',
-							'label' => 'Desired servings',
-							'min' => 1,
-							'value' => $selectedRecipe->desired_servings,
-							'invalidFeedback' => $__t('This cannot be lower than %s', '1'),
-							'additionalAttributes' => 'data-recipe-id="' . $selectedRecipe->id . '"',
-							'hint' => $__t('Base: %s', $selectedRecipe->base_servings)
-						))
-					</div>
 					@if(!empty($selectedRecipeTotalCalories) && intval($selectedRecipeTotalCalories) > 0)
 					<div class="col-2">
-						<label>{{ $__t('Energy (kcal)') }}</label>
+						<label>{{ $__t('Calories') }}</label>
 						<p class="mb-0">
 							<h3 class="locale-number locale-number-generic pt-0">{{ $selectedRecipeTotalCalories }}</h3>
 						</p>
@@ -196,6 +189,20 @@
 					@endif
 				</div>
 
+				<div class="row py-3">
+					<div class="col-4">
+						@include('components.numberpicker', array(
+							'id' => 'servings-scale',
+							'label' => 'Desired servings',
+							'min' => 1,
+							'value' => $selectedRecipe->desired_servings,
+							'invalidFeedback' => $__t('This cannot be lower than %s', '1'),
+							'additionalAttributes' => 'data-recipe-id="' . $selectedRecipe->id . '"',
+							'hint' => $__t('Base: %s', $selectedRecipe->base_servings)
+						))
+					</div>
+				</div>
+
 				<!-- Subrecipes first -->
 				@foreach($selectedRecipeSubRecipes as $selectedRecipeSubRecipe)
 					<h3 class="mb-2">{{ $selectedRecipeSubRecipe->name }}</h3>
@@ -265,12 +272,13 @@
 
 				<!-- Selected recipe -->
 				@if(!empty($selectedRecipe->picture_file_name))
-				<p class="w-75 mx-auto text-center"><img src="{{ $U('/api/files/recipepictures/' . base64_encode($selectedRecipe->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" class="img-fluid img-thumbnail lazy"></p>
+				<img src="{{ $U('/api/files/recipepictures/' . base64_encode($selectedRecipe->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" 
+				    class="img-thumbnail lazy mx-auto d-block mb-5">
 				@endif
 
 				@if($selectedRecipePositionsResolved->count() > 0)
-				<h5 class="mb-0">{{ $__t('Ingredients') }}</h5>
-				<ul class="list-group list-group-flush">
+				<h4 class="mb-2">{{ $__t('Ingredients') }}</h4>
+				<ul class="list-group list-group-flush mb-5">
 					@php
 						$lastIngredientGroup = 'undefined';
 						$lastProductGroup = 'undefined';
@@ -321,7 +329,7 @@
 				@endif
 
 				@if(!empty($selectedRecipe->description))
-				<h5 class="mt-4">{{ $__t('Preparation') }}</h5>
+				<h4 class="mt-1 mb-2">{{ $__t('Preparation') }}</h4>
 				{!! $selectedRecipe->description !!}
 				@endif
 			</div>