From 7b32d1d8a4497f9025ca36cc273efcfa34ade2c9 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Sat, 31 Oct 2020 18:37:10 +0100
Subject: [PATCH] More compact page headers / streamlined new page design for
 all pages

---
 changelog/60_UNRELEASED_2020-xx-xx.md      |  2 +-
 public/css/grocy.css                       |  6 --
 views/about.blade.php                      |  2 +-
 views/barcodescannertesting.blade.php      |  4 +-
 views/batteries.blade.php                  | 18 ++---
 views/batteriesjournal.blade.php           | 13 ++--
 views/batteriesoverview.blade.php          | 25 ++++---
 views/batteriessettings.blade.php          |  4 +-
 views/batteryform.blade.php                |  4 +-
 views/batterytracking.blade.php            |  4 +-
 views/calendar.blade.php                   |  3 +-
 views/choreform.blade.php                  |  4 +-
 views/chores.blade.php                     | 18 ++---
 views/choresjournal.blade.php              | 13 ++--
 views/choresoverview.blade.php             | 43 ++++++-----
 views/choressettings.blade.php             |  4 +-
 views/choretracking.blade.php              |  4 +-
 views/consume.blade.php                    |  3 +-
 views/equipment.blade.php                  | 30 ++++----
 views/equipmentform.blade.php              |  5 +-
 views/inventory.blade.php                  |  4 +-
 views/locationform.blade.php               |  4 +-
 views/locations.blade.php                  | 18 ++---
 views/login.blade.php                      |  4 +-
 views/manageapikeys.blade.php              | 24 +++---
 views/mealplan.blade.php                   |  3 +-
 views/productbarcodesform.blade.php        |  6 +-
 views/productform.blade.php                |  4 +-
 views/productgroupform.blade.php           |  4 +-
 views/productgroups.blade.php              | 16 ++--
 views/products.blade.php                   | 25 +++----
 views/purchase.blade.php                   |  5 +-
 views/quantityunitconversionform.blade.php |  4 +-
 views/quantityunitform.blade.php           |  4 +-
 views/quantityunitpluraltesting.blade.php  |  4 +-
 views/quantityunits.blade.php              | 18 ++---
 views/recipeform.blade.php                 |  4 +-
 views/recipeposform.blade.php              |  4 +-
 views/recipes.blade.php                    | 22 +++---
 views/recipessettings.blade.php            |  4 +-
 views/shoppinglist.blade.php               | 85 ++++++++++------------
 views/shoppinglistform.blade.php           |  4 +-
 views/shoppinglistitemform.blade.php       |  4 +-
 views/shoppinglistsettings.blade.php       |  4 +-
 views/shoppinglocationform.blade.php       |  4 +-
 views/shoppinglocations.blade.php          | 17 ++---
 views/stockentries.blade.php               |  9 ++-
 views/stockentryform.blade.php             |  4 +-
 views/stockjournal.blade.php               | 14 ++--
 views/stockjournalsummary.blade.php        |  4 +-
 views/stockoverview.blade.php              | 57 ++++++++-------
 views/stocksettings.blade.php              |  4 +-
 views/taskcategories.blade.php             | 18 ++---
 views/taskcategoryform.blade.php           |  4 +-
 views/taskform.blade.php                   |  4 +-
 views/tasks.blade.php                      | 43 +++++------
 views/taskssettings.blade.php              |  4 +-
 views/transfer.blade.php                   |  3 +-
 views/userentities.blade.php               | 24 +++---
 views/userentityform.blade.php             |  4 +-
 views/userfieldform.blade.php              |  4 +-
 views/userfields.blade.php                 | 27 +++----
 views/userform.blade.php                   |  4 +-
 views/userobjectform.blade.php             |  4 +-
 views/userobjects.blade.php                | 24 +++---
 views/userpermissions.blade.php            |  6 +-
 views/users.blade.php                      | 24 +++---
 views/usersettings.blade.php               |  4 +-
 68 files changed, 433 insertions(+), 368 deletions(-)

diff --git a/changelog/60_UNRELEASED_2020-xx-xx.md b/changelog/60_UNRELEASED_2020-xx-xx.md
index 2f9c1faa..a2b5e098 100644
--- a/changelog/60_UNRELEASED_2020-xx-xx.md
+++ b/changelog/60_UNRELEASED_2020-xx-xx.md
@@ -136,7 +136,7 @@
 - Fixed (again) that CORS was broken
 
 ### General & other improvements/fixes
-- UI refresh / style improvements (thanks @zsarnett)
+- UI refresh / style improvements (thanks @zsarnett for the idea and initial work on this)
 - The data path (previously fixed to the `data` folder) is now configurable, making it possible to run multiple grocy instances from the same directory (with different `config.php` files / different database, etc.) (thanks @fgrsnau)
   - Via an environment variable `GROCY_DATAPATH` (higher priority)
   - Via an FastCGI parameter `GROCY_DATAPATH` (lower priority)
diff --git a/public/css/grocy.css b/public/css/grocy.css
index 7fcf4004..bd9fae7e 100644
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -474,12 +474,6 @@ canvas.drawingBuffer {
   cursor: pointer;
 }
 
-#info-current-stock {
-  font-size: 1.5em;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
 .related-links .btn {
   font-size: 14px;
 }
diff --git a/views/about.blade.php b/views/about.blade.php
index 55cd3be7..30aa8fff 100644
--- a/views/about.blade.php
+++ b/views/about.blade.php
@@ -7,7 +7,7 @@
 <div class="row">
 	<div class="col-xs-12 col-md-6 text-center">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
+
 		<ul class="nav nav-tabs justify-content-center mt-3">
 			<li class="nav-item">
 				<a class="nav-link active"
diff --git a/views/barcodescannertesting.blade.php b/views/barcodescannertesting.blade.php
index a0fb54c6..e1d2bdc1 100644
--- a/views/barcodescannertesting.blade.php
+++ b/views/barcodescannertesting.blade.php
@@ -13,9 +13,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 
diff --git a/views/batteries.blade.php b/views/batteries.blade.php
index 4fded256..4cdbc2aa 100644
--- a/views/batteries.blade.php
+++ b/views/batteries.blade.php
@@ -10,6 +10,10 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button permission-MASTER_DATA_EDIT"
+					href="{{ $U('/battery/new') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=batteries') }}">
 					{{ $__t('Configure userfields') }}
@@ -18,18 +22,12 @@
 		</div>
 	</div>
 </div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3 permission-MASTER_DATA_EDIT"
-			href="{{ $U('/battery/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/batteriesjournal.blade.php b/views/batteriesjournal.blade.php
index a2478650..da4e0ff8 100644
--- a/views/batteriesjournal.blade.php
+++ b/views/batteriesjournal.blade.php
@@ -11,10 +11,11 @@
 	</div>
 </div>
 
-<hr>
-<div class="row my-3">
+<hr class="my-2 py-1">
+
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -25,9 +26,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Battery') }}</span>
 			</div>
 			<select class="form-control"
 				id="battery-filter">
@@ -40,7 +41,7 @@
 	</div>
 </div>
 
-<div class="row">
+<div class="row mt-2">
 	<div class="col">
 		<table id="batteries-journal-table"
 			class="table table-sm table-striped dt-responsive">
diff --git a/views/batteriesoverview.blade.php b/views/batteriesoverview.blade.php
index 72c0ac94..c30d79eb 100644
--- a/views/batteriesoverview.blade.php
+++ b/views/batteriesoverview.blade.php
@@ -21,20 +21,21 @@
 				</a>
 			</div>
 		</div>
-		<hr>
-		<p id="info-due-batteries"
-			data-status-filter="duesoon"
-			data-next-x-days="{{ $nextXDays }}"
-			class="warning-message status-filter-message responsive-button mr-2"></p>
-		<p id="info-overdue-batteries"
-			data-status-filter="overdue"
-			class="error-message status-filter-message responsive-button"></p>
+		<div class="border-top border-bottom my-2 py-1">
+			<div id="info-due-batteries"
+				data-status-filter="duesoon"
+				data-next-x-days="{{ $nextXDays }}"
+				class="warning-message status-filter-message responsive-button mr-2"></div>
+			<div id="info-overdue-batteries"
+				data-status-filter="overdue"
+				class="error-message status-filter-message responsive-button"></div>
+		</div>
 	</div>
 </div>
 
-<div class="row mt-3">
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -45,9 +46,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
 			</div>
 			<select class="form-control"
 				id="status-filter">
diff --git a/views/batteriessettings.blade.php b/views/batteriessettings.blade.php
index 311ffe54..69fbd859 100644
--- a/views/batteriessettings.blade.php
+++ b/views/batteriessettings.blade.php
@@ -8,9 +8,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<h4 class="mt-2">{{ $__t('Batteries overview') }}</h4>
diff --git a/views/batteryform.blade.php b/views/batteryform.blade.php
index a522a029..340bd794 100644
--- a/views/batteryform.blade.php
+++ b/views/batteryform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 
diff --git a/views/batterytracking.blade.php b/views/batterytracking.blade.php
index 087054d2..7de08b86 100644
--- a/views/batterytracking.blade.php
+++ b/views/batterytracking.blade.php
@@ -8,7 +8,9 @@
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
+
+		<hr class="my-2 py-1">
+
 		<form id="batterytracking-form"
 			novalidate>
 
diff --git a/views/calendar.blade.php b/views/calendar.blade.php
index 7e236223..d85456cc 100644
--- a/views/calendar.blade.php
+++ b/views/calendar.blade.php
@@ -30,7 +30,8 @@
 		</div>
 	</div>
 </div>
-<hr>
+
+<hr class="my-2 py-1">
 
 <script>
 	var fullcalendarEventSources = {!! json_encode(array($fullcalendarEventSources)) !!}
diff --git a/views/choreform.blade.php b/views/choreform.blade.php
index 652a5719..016eb468 100644
--- a/views/choreform.blade.php
+++ b/views/choreform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/chores.blade.php b/views/chores.blade.php
index 1bdb7b14..368ac02f 100644
--- a/views/chores.blade.php
+++ b/views/chores.blade.php
@@ -10,6 +10,10 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/chore/new') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=chores') }}">
 					{{ $__t('Configure userfields') }}
@@ -18,18 +22,12 @@
 		</div>
 	</div>
 </div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/chore/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/choresjournal.blade.php b/views/choresjournal.blade.php
index 691b31de..917194c7 100644
--- a/views/choresjournal.blade.php
+++ b/views/choresjournal.blade.php
@@ -11,10 +11,11 @@
 	</div>
 </div>
 
-<hr>
-<div class="row my-3">
+<hr class="my-2 py-1">
+
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -25,9 +26,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Chore') }}</span>
 			</div>
 			<select class="form-control"
 				id="chore-filter">
@@ -40,7 +41,7 @@
 	</div>
 </div>
 
-<div class="row">
+<div class="row mt-2">
 	<div class="col">
 		<table id="chores-journal-table"
 			class="table table-sm table-striped dt-responsive">
diff --git a/views/choresoverview.blade.php b/views/choresoverview.blade.php
index 94e9ce9b..6978c309 100644
--- a/views/choresoverview.blade.php
+++ b/views/choresoverview.blade.php
@@ -21,25 +21,26 @@
 				</a>
 			</div>
 		</div>
-		<hr>
-		<p id="info-due-chores"
-			data-status-filter="duesoon"
-			data-next-x-days="{{ $nextXDays }}"
-			class="warning-message status-filter-message responsive-message mr-2"></p>
-		<p id="info-overdue-chores"
-			data-status-filter="overdue"
-			class="error-message status-filter-message responsive-button mr-2"></p>
-		@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
-		<p id="info-assigned-to-me-chores"
-			data-user-filter="xx{{ GROCY_USER_ID }}xx"
-			class="normal-message user-filter-message responsive-button"></p>
-		@endif
+		<div class="border-top border-bottom my-2 py-1">
+			<div id="info-due-chores"
+				data-status-filter="duesoon"
+				data-next-x-days="{{ $nextXDays }}"
+				class="warning-message status-filter-message responsive-message mr-2"></div>
+			<div id="info-overdue-chores"
+				data-status-filter="overdue"
+				class="error-message status-filter-message responsive-button mr-2"></div>
+			@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
+			<div id="info-assigned-to-me-chores"
+				data-user-filter="xx{{ GROCY_USER_ID }}xx"
+				class="normal-message user-filter-message responsive-button"></div>
+			@endif
+		</div>
 	</div>
 </div>
 
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-6 col-xl-3 d-flex align-items-end">
-		<div class="input-group mb-3">
+<div class="row">
+	<div class="col-xs-12 col-md-6 col-xl-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -50,10 +51,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="status-filter">{{ $__t('Status') }}</label>
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
 			</div>
 			<select class="form-control"
 				id="status-filter">
@@ -65,10 +65,9 @@
 	</div>
 	@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<label for="user-filter">{{ $__t('Assignment') }}</label>
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Assignment') }}</span>
 			</div>
 			<select class="form-control"
 				id="user-filter">
diff --git a/views/choressettings.blade.php b/views/choressettings.blade.php
index a158cc32..0b1078ba 100644
--- a/views/choressettings.blade.php
+++ b/views/choressettings.blade.php
@@ -8,9 +8,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<h4 class="mt-2">{{ $__t('Chores overview') }}</h4>
diff --git a/views/choretracking.blade.php b/views/choretracking.blade.php
index 9c7c0db3..0fbe044c 100644
--- a/views/choretracking.blade.php
+++ b/views/choretracking.blade.php
@@ -8,7 +8,9 @@
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
+
+		<hr class="my-2 py-1">
+
 		<form id="choretracking-form"
 			novalidate>
 
diff --git a/views/consume.blade.php b/views/consume.blade.php
index 296ec1a8..a4530d63 100644
--- a/views/consume.blade.php
+++ b/views/consume.blade.php
@@ -32,7 +32,8 @@
 				@endif
 			</div>
 		</div>
-		<hr>
+
+		<hr class="my-2 py-1">
 
 		<form id="consume-form"
 			novalidate>
diff --git a/views/equipment.blade.php b/views/equipment.blade.php
index 57062764..f3b13ced 100644
--- a/views/equipment.blade.php
+++ b/views/equipment.blade.php
@@ -7,27 +7,29 @@
 
 @section('content')
 <div class="row">
-
 	<div class="col-xs-12 col-md-4 pb-3">
-		<h2 class="title">@yield('title')</h2>
-		<hr>
-
-		<div class="row">
-			<div class="col-xs-12 col-md-4 col-xl-3">
-				<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
+		<div class="title-related-links border-bottom mb-2 py-1">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
 					href="{{ $U('/equipment/new') }}">
 					{{ $__t('Add') }}
 				</a>
 			</div>
 		</div>
-		<div class="input-group mb-3">
-			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-search"></i></span>
+
+		<div class="row">
+			<div class="col">
+				<div class="input-group">
+					<div class="input-group-prepend">
+						<span class="input-group-text"><i class="fas fa-search"></i></span>
+					</div>
+					<input type="text"
+						id="search"
+						class="form-control"
+						placeholder="{{ $__t('Search') }}">
+				</div>
 			</div>
-			<input type="text"
-				id="search"
-				class="form-control"
-				placeholder="{{ $__t('Search') }}">
 		</div>
 
 		<table id="equipment-table"
diff --git a/views/equipmentform.blade.php b/views/equipmentform.blade.php
index 8838f52a..7ac939bd 100644
--- a/views/equipmentform.blade.php
+++ b/views/equipmentform.blade.php
@@ -12,11 +12,12 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
-<div class="row">
 
+<hr class="my-2 py-1">
+
+<div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
diff --git a/views/inventory.blade.php b/views/inventory.blade.php
index 107fabbd..c9e0d392 100644
--- a/views/inventory.blade.php
+++ b/views/inventory.blade.php
@@ -8,7 +8,9 @@
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
+
+		<hr class="my-2 py-1">
+
 		<form id="inventory-form"
 			novalidate>
 
diff --git a/views/locationform.blade.php b/views/locationform.blade.php
index 46fab59a..adf06659 100644
--- a/views/locationform.blade.php
+++ b/views/locationform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/locations.blade.php b/views/locations.blade.php
index d6deb9fd..d8b1e5ad 100644
--- a/views/locations.blade.php
+++ b/views/locations.blade.php
@@ -10,6 +10,10 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/location/new') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=locations') }}">
 					{{ $__t('Configure userfields') }}
@@ -18,18 +22,12 @@
 		</div>
 	</div>
 </div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/location/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/login.blade.php b/views/login.blade.php
index e32aa3b1..60956f20 100644
--- a/views/login.blade.php
+++ b/views/login.blade.php
@@ -7,7 +7,9 @@
 <div class="row">
 	<div class="col-lg-6 offset-lg-3 col-xs-12">
 		<h2 class="text-center">@yield('title')</h2>
-		<hr>
+
+		<hr class="my-2 py-1">
+
 		<form method="post"
 			action="{{ $U('/login') }}"
 			id="login-form"
diff --git a/views/manageapikeys.blade.php b/views/manageapikeys.blade.php
index 9ad804bd..5182017d 100644
--- a/views/manageapikeys.blade.php
+++ b/views/manageapikeys.blade.php
@@ -16,21 +16,23 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h2 class="title">@yield('title')</h2>
-	</div>
-</div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/manageapikeys/new') }}">
-			{{ $__t('Add') }}
-		</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/manageapikeys/new') }}">
+					{{ $__t('Add') }}
+				</a>
+			</div>
+		</div>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/mealplan.blade.php b/views/mealplan.blade.php
index 77047caf..18fa255a 100644
--- a/views/mealplan.blade.php
+++ b/views/mealplan.blade.php
@@ -31,7 +31,8 @@
 		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
-<hr>
+
+<hr class="my-2 py-1">
 
 <div class="row">
 	<div class="col">
diff --git a/views/productbarcodesform.blade.php b/views/productbarcodesform.blade.php
index ea73c344..5544a068 100644
--- a/views/productbarcodesform.blade.php
+++ b/views/productbarcodesform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 
@@ -38,7 +40,7 @@
 				value="{{ $product->id }}">
 
 			<div class="form-group">
-				<label for="name">{{ $__t('Barcode') }}<i class="fas fa-barcode"></i></label>
+				<label for="name">{{ $__t('Barcode') }}&nbsp;<i class="fas fa-barcode"></i></label>
 				<div class="input-group">
 					<input type="text"
 						class="form-control barcodescanner-input"
diff --git a/views/productform.blade.php b/views/productform.blade.php
index ead54dfb..20b28628 100644
--- a/views/productform.blade.php
+++ b/views/productform.blade.php
@@ -25,9 +25,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/productgroupform.blade.php b/views/productgroupform.blade.php
index f4a88337..09e6ddb5 100644
--- a/views/productgroupform.blade.php
+++ b/views/productgroupform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/productgroups.blade.php b/views/productgroups.blade.php
index 4f3b88d0..7577de9a 100644
--- a/views/productgroups.blade.php
+++ b/views/productgroups.blade.php
@@ -10,6 +10,10 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button show-as-dialog-link"
+					href="{{ $U('/productgroup/new?embedded') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=product_groups') }}">
 					{{ $__t('Configure userfields') }}
@@ -18,15 +22,9 @@
 		</div>
 	</div>
 </div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3 show-as-dialog-link"
-			href="{{ $U('/productgroup/new?embedded') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
 		<div class="input-group mb-3">
diff --git a/views/products.blade.php b/views/products.blade.php
index b6660bab..ab6a593d 100644
--- a/views/products.blade.php
+++ b/views/products.blade.php
@@ -10,31 +10,28 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
-				<a class="btn btn-outline-secondary mb-1"
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/product/new') }}">
+					{{ $__t('Add') }}
+				</a>
+				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=products') }}">
 					{{ $__t('Configure userfields') }}
 				</a>
-				<a class="btn btn-outline-secondary mb-1"
+				<a class="btn btn-outline-secondary"
 					href="{{ $U('/stocksettings#productpresets') }}">
 					{{ $__t('Presets for new products') }}
 				</a>
 			</div>
 		</div>
-		<hr>
 	</div>
 </div>
 
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/product/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -45,9 +42,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Product group') }}</span>
 			</div>
 			<select class="form-control"
 				id="product-group-filter">
diff --git a/views/purchase.blade.php b/views/purchase.blade.php
index eb1b3a32..176208ab 100644
--- a/views/purchase.blade.php
+++ b/views/purchase.blade.php
@@ -10,7 +10,7 @@
 
 @section('content')
 <div class="row">
-	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
+	<div class="col-xs-12 col-md-6 col-xl-4">
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
@@ -32,7 +32,8 @@
 				@endif
 			</div>
 		</div>
-		<hr>
+
+		<hr class="my-2 py-1">
 
 		<form id="purchase-form"
 			novalidate>
diff --git a/views/quantityunitconversionform.blade.php b/views/quantityunitconversionform.blade.php
index 98fb9157..1da3aeaa 100644
--- a/views/quantityunitconversionform.blade.php
+++ b/views/quantityunitconversionform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 
diff --git a/views/quantityunitform.blade.php b/views/quantityunitform.blade.php
index faa210b2..111b94ef 100644
--- a/views/quantityunitform.blade.php
+++ b/views/quantityunitform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/quantityunitpluraltesting.blade.php b/views/quantityunitpluraltesting.blade.php
index 28eeca61..a0e175b0 100644
--- a/views/quantityunitpluraltesting.blade.php
+++ b/views/quantityunitpluraltesting.blade.php
@@ -13,9 +13,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<form id="quantityunitpluraltesting-form"
diff --git a/views/quantityunits.blade.php b/views/quantityunits.blade.php
index 598f9615..4b8ef59e 100644
--- a/views/quantityunits.blade.php
+++ b/views/quantityunits.blade.php
@@ -10,6 +10,10 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/quantityunit/new') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=quantity_units') }}">
 					{{ $__t('Configure userfields') }}
@@ -18,18 +22,12 @@
 		</div>
 	</div>
 </div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/quantityunit/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/recipeform.blade.php b/views/recipeform.blade.php
index 19f1b0bc..35e6f539 100644
--- a/views/recipeform.blade.php
+++ b/views/recipeform.blade.php
@@ -22,7 +22,7 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
+
 		<script>
 			Grocy.EditMode = '{{ $mode }}';
 			Grocy.QuantityUnits = {!! json_encode($quantityunits) !!};
@@ -43,6 +43,8 @@
 	</div>
 </div>
 
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-7 pb-3">
 		<form id="recipe-form"
diff --git a/views/recipeposform.blade.php b/views/recipeposform.blade.php
index 60ebd8ad..08133caf 100644
--- a/views/recipeposform.blade.php
+++ b/views/recipeposform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-5 pb-3">
 		<h3 class="text-muted">{{ $__t('Recipe') }} <strong>{{ $recipe->name }}</strong></h3>
diff --git a/views/recipes.blade.php b/views/recipes.blade.php
index ee100253..f4d3c22a 100644
--- a/views/recipes.blade.php
+++ b/views/recipes.blade.php
@@ -11,24 +11,20 @@
 </script>
 
 <div class="row">
-
-	<div class="col-xs-12 col-md-6 pb-3 d-print-none">
-		<div>
+	<div class="col-xs-12 col-md-6 d-print-none">
+		<div class="title-related-links border-bottom mb-2 py-1">
 			<h2 class="title">@yield('title')</h2>
-		</div>
-		<hr>
-
-		<div class="row">
-			<div class="col-xs-12 col-md-4 col-xl-2">
-				<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
+			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
 					href="{{ $U('/recipe/new') }}">
 					{{ $__t('Add') }}
 				</a>
 			</div>
 		</div>
+
 		<div class="row">
 			<div class="col-xs-12 col-md-6 col-xl-6">
-				<div class="input-group mb-3">
+				<div class="input-group">
 					<div class="input-group-prepend">
 						<span class="input-group-text"><i class="fas fa-search"></i></span>
 					</div>
@@ -40,9 +36,9 @@
 			</div>
 
 			<div class="col-xs-12 col-md-6 col-xl-6">
-				<div class="input-group mb-3">
+				<div class="input-group">
 					<div class="input-group-prepend">
-						<span class="input-group-text"><i class="fas fa-filter"></i></span>
+						<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
 					</div>
 					<select class="form-control"
 						id="status-filter">
@@ -55,7 +51,7 @@
 			</div>
 		</div>
 
-		<ul class="nav nav-tabs mt-3 mb-1 grocy-tabs">
+		<ul class="nav nav-tabs grocy-tabs">
 			<li class="nav-item">
 				<a class="nav-link active"
 					id="list-tab"
diff --git a/views/recipessettings.blade.php b/views/recipessettings.blade.php
index 60809c22..25835aa2 100644
--- a/views/recipessettings.blade.php
+++ b/views/recipessettings.blade.php
@@ -8,9 +8,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<h4 class="mt-2">{{ $__t('Recipe card') }}</h4>
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php
index 523ef3a2..d443319e 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -58,12 +58,11 @@
 						href="#">
 						{{ $__t('Print') }}
 					</a>
-					<!--<div class="dropdown d-inline-block">
-							<button class="btn btn-outline-dark responsive-button dropdown-toggle" data-toggle="dropdown"><i class="fas fa-file-export"></i> {{ $__t('Output') }}</button>
-							<div class="dropdown-menu">
-								<a id="print-shopping-list-button" class="dropdown-item" href="#"><i class="fas fa-print"></i> {{ $__t('Print') }}</a>
-							</div>
-						</div>-->
+					<a id="shopping-list-compact-view-button"
+						class="btn btn-outline-dark btn-sm responsive-button switch-view-mode-button"
+						href="#">
+						{{ $__t('Compact view') }}
+					</a>
 				</div>
 			</div>
 			@else
@@ -73,41 +72,42 @@
 				value="1">
 			@endif
 		</div>
-		<hr>
-		<p data-status-filter="belowminstockamount"
-			class="normal-message status-filter-message responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif">{{ $__n(count($missingProducts), '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') }}</p>
+		<div class="border-top border-bottom my-2 py-1">
+			<div data-status-filter="belowminstockamount"
+				class="normal-message status-filter-message responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif">{{ $__n(count($missingProducts), '%s product is below defined min. stock amount', '%s products are below defined min. stock amount') }}</div>
+			<div class="float-right">
+				<a class="btn btn-primary responsive-button btn-sm mb-1 show-as-dialog-link"
+					href="{{ $U('/shoppinglistitem/new?embedded&list=' . $selectedShoppingListId) }}">
+					{{ $__t('Add item') }}
+				</a>
+				<a id="clear-shopping-list"
+					class="btn btn-outline-danger btn-sm mb-1 responsive-button @if($listItems->count() == 0) disabled @endif"
+					href="#">
+					{{ $__t('Clear list') }}
+				</a>
+				<a id="add-all-items-to-stock-button"
+					class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
+					href="#">
+					{{ $__t('Add all list items to stock') }}
+				</a>
+				<a id="add-products-below-min-stock-amount"
+					class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
+					href="#">
+					{{ $__t('Add products that are below defined min. stock amount') }}
+				</a>
+				<a id="add-expired-products"
+					class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
+					href="#">
+					{{ $__t('Add expired products') }}
+				</a>
+			</div>
+		</div>
 	</div>
 </div>
 
-<div class="row mt-3 d-print-none hide-on-fullscreen-card">
-	<div class="col-md-12 mb-2">
-		<a class="btn btn-primary responsive-button btn-sm mb-1 show-as-dialog-link"
-			href="{{ $U('/shoppinglistitem/new?embedded&list=' . $selectedShoppingListId) }}">
-			{{ $__t('Add item') }}
-		</a>
-		<a id="clear-shopping-list"
-			class="btn btn-outline-danger btn-sm mb-1 responsive-button @if($listItems->count() == 0) disabled @endif"
-			href="#">
-			{{ $__t('Clear list') }}
-		</a>
-		<a id="add-all-items-to-stock-button"
-			class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
-			href="#">
-			{{ $__t('Add all list items to stock') }}
-		</a>
-		<a id="add-products-below-min-stock-amount"
-			class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
-			href="#">
-			{{ $__t('Add products that are below defined min. stock amount') }}
-		</a>
-		<a id="add-expired-products"
-			class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
-			href="#">
-			{{ $__t('Add expired products') }}
-		</a>
-	</div>
+<div class="row d-print-none hide-on-fullscreen-card">
 	<div class="col-xs-12 col-md-5">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -118,9 +118,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-4 col-lg-5">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
 			</div>
 			<select class="form-control"
 				id="status-filter">
@@ -131,13 +131,6 @@
 			</select>
 		</div>
 	</div>
-	<div class="col-xs-12 col-md-3 col-lg-2 mb-3">
-		<a id="shopping-list-compact-view-button"
-			class="btn btn-outline-dark responsive-button switch-view-mode-button w-100"
-			href="#">
-			{{ $__t('Compact view') }}
-		</a>
-	</div>
 </div>
 
 <div id="shoppinglist-main"
diff --git a/views/shoppinglistform.blade.php b/views/shoppinglistform.blade.php
index 2a204bd5..1c1a7c1d 100644
--- a/views/shoppinglistform.blade.php
+++ b/views/shoppinglistform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/shoppinglistitemform.blade.php b/views/shoppinglistitemform.blade.php
index 3f3cb292..28edf5ec 100644
--- a/views/shoppinglistitemform.blade.php
+++ b/views/shoppinglistitemform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<script>
diff --git a/views/shoppinglistsettings.blade.php b/views/shoppinglistsettings.blade.php
index e501a02e..812158cc 100644
--- a/views/shoppinglistsettings.blade.php
+++ b/views/shoppinglistsettings.blade.php
@@ -8,9 +8,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<h4 class="mt-2">{{ $__t('Shopping list') }}</h4>
diff --git a/views/shoppinglocationform.blade.php b/views/shoppinglocationform.blade.php
index 8f95d79c..8e528a61 100644
--- a/views/shoppinglocationform.blade.php
+++ b/views/shoppinglocationform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/shoppinglocations.blade.php b/views/shoppinglocations.blade.php
index 6ad30db8..fe226980 100644
--- a/views/shoppinglocations.blade.php
+++ b/views/shoppinglocations.blade.php
@@ -10,6 +10,10 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/shoppinglocation/new') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=shoppinglocations') }}">
 					{{ $__t('Configure userfields') }}
@@ -18,19 +22,12 @@
 		</div>
 	</div>
 </div>
-<hr>
 
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/shoppinglocation/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/stockentries.blade.php b/views/stockentries.blade.php
index 88b92a57..40b2b159 100644
--- a/views/stockentries.blade.php
+++ b/views/stockentries.blade.php
@@ -17,14 +17,19 @@
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
 	</div>
-	<div class="col">
+</div>
+
+<hr class="my-2 py-1">
+
+<div class="row">
+	<div class="col-xs-12 col-md-6 col-xl-3">
 		@include('components.productpicker', array(
 		'products' => $products,
 		'disallowAllProductWorkflows' => true
 		))
 	</div>
 </div>
-<hr>
+
 <div class="row">
 	<div class="col">
 		<table id="stockentries-table"
diff --git a/views/stockentryform.blade.php b/views/stockentryform.blade.php
index 89397f8d..86ee2428 100644
--- a/views/stockentryform.blade.php
+++ b/views/stockentryform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 
diff --git a/views/stockjournal.blade.php b/views/stockjournal.blade.php
index a98622dd..7d095d46 100644
--- a/views/stockjournal.blade.php
+++ b/views/stockjournal.blade.php
@@ -14,10 +14,12 @@
 		</a>
 	</div>
 </div>
-<hr>
-<div class="row my-3">
+
+<hr class="my-2 py-1">
+
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -28,9 +30,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Product') }}</span>
 			</div>
 			<select class="form-control"
 				id="product-filter">
@@ -43,7 +45,7 @@
 	</div>
 </div>
 
-<div class="row">
+<div class="row mt-2">
 	<div class="col">
 		<table id="stock-journal-table"
 			class="table table-sm table-striped dt-responsive">
diff --git a/views/stockjournalsummary.blade.php b/views/stockjournalsummary.blade.php
index a315679b..b40ec34e 100644
--- a/views/stockjournalsummary.blade.php
+++ b/views/stockjournalsummary.blade.php
@@ -10,7 +10,9 @@
 		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
-<hr>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col">
 		<table id="journal-summary-table"
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index d827f37a..75428490 100644
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -17,7 +17,11 @@
 <div class="row">
 	<div class="col">
 		<div class="title-related-links">
-			<h2 class="title">@yield('title')</h2>
+			<h2 class="title">
+				@yield('title')
+				<span id="info-current-stock"
+					class="text-muted small"></span>
+			</h2>
 			<div class="related-links">
 				<a class="btn btn-outline-dark responsive-button"
 					href="{{ $U('/stockjournal') }}">
@@ -35,31 +39,32 @@
 				@endif
 			</div>
 		</div>
-		<div id="info-current-stock"
-			class="text-muted"></div>
-		<hr>
-		@if (GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
-		<p id="info-expiring-products"
-			data-next-x-days="{{ $nextXDays }}"
-			data-status-filter="expiring"
-			class="warning-message status-filter-message responsive-button mr-2"></p>
-		<p id="info-expired-products"
-			data-status-filter="expired"
-			class="error-message status-filter-message responsive-button mr-2"></p>
-		@endif
-		<p id="info-missing-products"
-			data-status-filter="belowminstockamount"
-			class="normal-message status-filter-message responsive-button"></p>
-		<a id="clear-filter-button"
-			class="btn btn-sm btn-outline-info float-right"
-			href="#">
-			{{ $__t('Clear filter') }}
-		</a>
+		<div class="border-top border-bottom my-2 py-1">
+			@if (GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING)
+			<div id="info-expiring-products"
+				data-next-x-days="{{ $nextXDays }}"
+				data-status-filter="expiring"
+				class="warning-message status-filter-message responsive-button mr-2"></div>
+			<div id="info-expired-products"
+				data-status-filter="expired"
+				class="error-message status-filter-message responsive-button mr-2"></div>
+			@endif
+			<div id="info-missing-products"
+				data-status-filter="belowminstockamount"
+				class="normal-message status-filter-message responsive-button"></div>
+			<div class="float-right">
+				<a id="clear-filter-button"
+					class="btn btn-sm btn-outline-info"
+					href="#">
+					{{ $__t('Clear filter') }}
+				</a>
+			</div>
+		</div>
 	</div>
 </div>
-<div class="row mt-3">
+<div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -71,7 +76,7 @@
 	</div>
 	@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Location') }}</span>
 			</div>
@@ -86,7 +91,7 @@
 	</div>
 	@endif
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Product group') }}</span>
 			</div>
@@ -100,7 +105,7 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
 			</div>
diff --git a/views/stocksettings.blade.php b/views/stocksettings.blade.php
index 86a82748..e45c38ed 100644
--- a/views/stocksettings.blade.php
+++ b/views/stocksettings.blade.php
@@ -8,9 +8,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<div id="productpresets">
diff --git a/views/taskcategories.blade.php b/views/taskcategories.blade.php
index c32c38e1..7b0ea79d 100644
--- a/views/taskcategories.blade.php
+++ b/views/taskcategories.blade.php
@@ -10,6 +10,10 @@
 		<div class="title-related-links">
 			<h2 class="title">@yield('title')</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/taskcategory/new') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary"
 					href="{{ $U('/userfields?entity=task_categories') }}">
 					{{ $__t('Configure userfields') }}
@@ -18,18 +22,12 @@
 		</div>
 	</div>
 </div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/taskcategory/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/taskcategoryform.blade.php b/views/taskcategoryform.blade.php
index dde31c3d..60eb032b 100644
--- a/views/taskcategoryform.blade.php
+++ b/views/taskcategoryform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/taskform.blade.php b/views/taskform.blade.php
index 085bffa7..c359d1c1 100644
--- a/views/taskform.blade.php
+++ b/views/taskform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/tasks.blade.php b/views/tasks.blade.php
index 1a42fccd..ebadb3cc 100644
--- a/views/tasks.blade.php
+++ b/views/tasks.blade.php
@@ -19,29 +19,30 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h2 class="title">@yield('title')</h2>
-		<hr>
-		<p id="info-due-tasks"
-			data-status-filter="duesoon"
-			data-next-x-days="{{ $nextXDays }}"
-			class="warning-message status-filter-message responsive-button mr-2"></p>
-		<p id="info-overdue-tasks"
-			data-status-filter="overdue"
-			class="error-message status-filter-message responsive-button"></p>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/task/new') }}">
+					{{ $__t('Add') }}
+				</a>
+			</div>
+		</div>
+		<div class="border-top border-bottom my-2 py-1">
+			<div id="info-due-tasks"
+				data-status-filter="duesoon"
+				data-next-x-days="{{ $nextXDays }}"
+				class="warning-message status-filter-message responsive-button mr-2"></div>
+			<div id="info-overdue-tasks"
+				data-status-filter="overdue"
+				class="error-message status-filter-message responsive-button"></div>
+		</div>
 	</div>
 </div>
 
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/task/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -52,9 +53,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Status') }}</span>
 			</div>
 			<select class="form-control"
 				id="status-filter">
@@ -65,7 +66,7 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="form-check custom-control form-control-lg custom-checkbox pt-0">
+		<div class="form-check custom-control custom-checkbox">
 			<input class="form-check-input custom-control-input"
 				type="checkbox"
 				id="show-done-tasks">
diff --git a/views/taskssettings.blade.php b/views/taskssettings.blade.php
index bd2a6e12..191f2571 100644
--- a/views/taskssettings.blade.php
+++ b/views/taskssettings.blade.php
@@ -8,9 +8,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 
diff --git a/views/transfer.blade.php b/views/transfer.blade.php
index f5a71756..43d78c92 100644
--- a/views/transfer.blade.php
+++ b/views/transfer.blade.php
@@ -8,7 +8,8 @@
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-4 pb-3">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
+
+		<hr class="my-2 py-1">
 
 		<form id="transfer-form"
 			novalidate>
diff --git a/views/userentities.blade.php b/views/userentities.blade.php
index 1d101b0e..1bf8bc3b 100644
--- a/views/userentities.blade.php
+++ b/views/userentities.blade.php
@@ -7,21 +7,23 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h2 class="title">@yield('title')</h2>
-	</div>
-</div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/userentity/new') }}">
-			{{ $__t('Add') }}
-		</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/userentity/new') }}">
+					{{ $__t('Add') }}
+				</a>
+			</div>
+		</div>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/userentityform.blade.php b/views/userentityform.blade.php
index 69efd26c..7bcc5f85 100644
--- a/views/userentityform.blade.php
+++ b/views/userentityform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/userfieldform.blade.php b/views/userfieldform.blade.php
index 2f24bad3..cd6e5e88 100644
--- a/views/userfieldform.blade.php
+++ b/views/userfieldform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/userfields.blade.php b/views/userfields.blade.php
index d6bfe286..d25ddc81 100644
--- a/views/userfields.blade.php
+++ b/views/userfields.blade.php
@@ -7,22 +7,23 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h2h2 class="title">@yield('title')</h2h2>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/userfield/new') }}">
+					{{ $__t('Add') }}
+				</a>
+			</div>
+		</div>
 	</div>
 </div>
-<hr>
 
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/userfield/new') }}">
-			{{ $__t('Add') }}
-		</a>
-	</div>
-</div>
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
@@ -33,9 +34,9 @@
 		</div>
 	</div>
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
-				<span class="input-group-text"><i class="fas fa-filter"></i></span>
+				<span class="input-group-text"><i class="fas fa-filter"></i>&nbsp;{{ $__t('Entity') }}</span>
 			</div>
 			<select class="form-control"
 				id="entity-filter">
diff --git a/views/userform.blade.php b/views/userform.blade.php
index 81483629..2bfebf76 100644
--- a/views/userform.blade.php
+++ b/views/userform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/userobjectform.blade.php b/views/userobjectform.blade.php
index 500c584b..cb26d6bb 100644
--- a/views/userobjectform.blade.php
+++ b/views/userobjectform.blade.php
@@ -12,9 +12,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">
 		<script>
diff --git a/views/userobjects.blade.php b/views/userobjects.blade.php
index 64228b06..3b75f9c2 100644
--- a/views/userobjects.blade.php
+++ b/views/userobjects.blade.php
@@ -8,29 +8,29 @@
 <div class="row">
 	<div class="col">
 		<div class="title-related-links">
-			<h2 class="title">@yield('title')</h2>
+			<h2 class="title">
+				@yield('title')
+				<span class="text-muted small">{{ $userentity->description }}</span>
+			</h2>
 			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/userobject/' . $userentity->name . '/new') }}">
+					{{ $__t('Add') }}
+				</a>
 				<a class="btn btn-outline-secondary d-print-none"
 					href="{{ $U('/userfields?entity=' . 'userentity-' . $userentity->name) }}">
 					{{ $__t('Configure fields') }}
 				</a>
 			</div>
 		</div>
-		<h5 class="text-muted">{{ $userentity->description }}</h5>
-	</div>
-</div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/userobject/' . $userentity->name . '/new') }}">
-			{{ $__t('Add') }}
-		</a>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/userpermissions.blade.php b/views/userpermissions.blade.php
index 00ff8555..e4dd0a15 100644
--- a/views/userpermissions.blade.php
+++ b/views/userpermissions.blade.php
@@ -16,8 +16,10 @@
 		<h2 class="title">@yield('title')</h2>
 	</div>
 </div>
-<hr>
-<div class="row mt-3">
+
+<hr class="my-2 py-1">
+
+<div class="row">
 	<div class="col">
 		<ul>
 			@foreach($permissions as $perm)
diff --git a/views/users.blade.php b/views/users.blade.php
index 378a7970..849b2fb2 100644
--- a/views/users.blade.php
+++ b/views/users.blade.php
@@ -7,21 +7,23 @@
 @section('content')
 <div class="row">
 	<div class="col">
-		<h2 class="title">@yield('title')</h2>
-	</div>
-</div>
-<hr>
-<div class="row mt-3">
-	<div class="col-xs-12 col-md-2 col-xl-1">
-		<a class="btn btn-primary btn-sm responsive-button w-100 mb-3"
-			href="{{ $U('/user/new') }}">
-			{{ $__t('Add') }}
-		</a>
+		<div class="title-related-links">
+			<h2 class="title">@yield('title')</h2>
+			<div class="related-links">
+				<a class="btn btn-primary responsive-button"
+					href="{{ $U('/user/new') }}">
+					{{ $__t('Add') }}
+				</a>
+			</div>
+		</div>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-xs-12 col-md-6 col-xl-3">
-		<div class="input-group mb-3">
+		<div class="input-group">
 			<div class="input-group-prepend">
 				<span class="input-group-text"><i class="fas fa-search"></i></span>
 			</div>
diff --git a/views/usersettings.blade.php b/views/usersettings.blade.php
index dfb8c15d..e3e15205 100644
--- a/views/usersettings.blade.php
+++ b/views/usersettings.blade.php
@@ -8,9 +8,11 @@
 <div class="row">
 	<div class="col">
 		<h2 class="title">@yield('title')</h2>
-		<hr>
 	</div>
 </div>
+
+<hr class="my-2 py-1">
+
 <div class="row">
 	<div class="col-lg-6 col-xs-12">