diff --git a/public/language/en-GB/admin/settings/navigation.json b/public/language/en-GB/admin/settings/navigation.json
index 7baca85096..32b2722074 100644
--- a/public/language/en-GB/admin/settings/navigation.json
+++ b/public/language/en-GB/admin/settings/navigation.json
@@ -12,7 +12,7 @@
 	"groups": "Groups:",
 	"open-new-window": "Open in a new window",
 	"dropdown": "Dropdown",
-	"dropdown-placeholder": "Place your dropdown menu items below, ie: <br/>&lt;li&gt;&lt;a href&#x3D;&quot;https://myforum.com&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;",
+	"dropdown-placeholder": "Place your dropdown menu items below, ie: <br/>&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href&#x3D;&quot;https://myforum.com&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;",
 
 	"btn.delete": "Delete",
 	"btn.disable": "Disable",
diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss
index b978990f8b..05df1f8df5 100644
--- a/public/scss/admin/admin.scss
+++ b/public/scss/admin/admin.scss
@@ -106,7 +106,7 @@ body {
 		@include box-header-font;
 	}
 
-	.dashboard .card:not([data-container-html]) {
+	.card:not([data-container-html]) {
 		background-color: #FFF;
 		box-sizing: border-box;
 		border-radius: 3px;
@@ -158,20 +158,7 @@ body {
     }
 
     .navbar-nav {
-        margin-top: 0;
-        margin-bottom: 0;
-
-        >li {
-            >a {
-                padding-top: 15px;
-                padding-bottom: 15px;
-            }
-
-            >a:hover, >a:focus {
-                color: $gray-300;
-                background-color: $gray-700;
-            }
-
+	    >li {
             >#reconnect {
                 color: $gray-700;
             }
diff --git a/public/scss/admin/general/navigation.scss b/public/scss/admin/general/navigation.scss
index 9d0316ee3a..ada36aeeea 100644
--- a/public/scss/admin/general/navigation.scss
+++ b/public/scss/admin/general/navigation.scss
@@ -24,6 +24,10 @@
 
 		li {
 			display: inline-block;
+			>a:hover, >a:focus {
+                color: $gray-300;
+                background-color: $gray-700;
+            }
 		}
 	}
 
diff --git a/public/scss/admin/header.scss b/public/scss/admin/header.scss
index b331d6a2a3..7aa0c9a212 100644
--- a/public/scss/admin/header.scss
+++ b/public/scss/admin/header.scss
@@ -131,7 +131,7 @@
 		list-style-type: none;
 		padding: 0px;
 		position: absolute;
-		bottom: -11px;
+		bottom: -16px;
 		left: 50px;
 
 		> li {
diff --git a/public/scss/admin/vars.scss b/public/scss/admin/vars.scss
index 6b7a5a4c3a..b37e4041a7 100644
--- a/public/scss/admin/vars.scss
+++ b/public/scss/admin/vars.scss
@@ -20,4 +20,4 @@ $font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", R
 $font-family-sans-serif: font-family-system;
 
 
-$light: #e9ecef;
\ No newline at end of file
+$light: #f5f5f5;
\ No newline at end of file
diff --git a/public/src/admin/settings/navigation.js b/public/src/admin/settings/navigation.js
index fe54beb2a4..7709acf855 100644
--- a/public/src/admin/settings/navigation.js
+++ b/public/src/admin/settings/navigation.js
@@ -55,16 +55,20 @@ define('admin/settings/navigation', [
 
 	function onSelect() {
 		const clickedIndex = $(this).attr('data-index');
-		$('#active-navigation li').removeClass('active');
-		$(this).addClass('active');
+		selectIndex(clickedIndex);
+		return false;
+	}
 
-		const detailsForm = $('#enabled').children('[data-index="' + clickedIndex + '"]');
+	function selectIndex(index) {
+		$('#active-navigation li').removeClass('active');
+		$('#active-navigation [data-index="' + index + '"]').addClass('active');
+
+		const detailsForm = $('#enabled').children('[data-index="' + index + '"]');
 		$('#enabled li').addClass('hidden');
 
 		if (detailsForm.length) {
 			detailsForm.removeClass('hidden');
 		}
-		return false;
 	}
 
 	function drop(ev, ui) {
@@ -80,20 +84,32 @@ define('admin/settings/navigation', [
 		data.title = translator.escape(data.title);
 		data.text = translator.escape(data.text);
 		data.groups = ajaxify.data.groups;
-		Benchpress.parse('admin/settings/navigation', 'navigation', { navigation: [data] }, function (li) {
-			translator.translate(li, function (li) {
-				li = $(translator.unescape(li));
-				el.after(li);
-				el.remove();
+
+		const renderNav = new Promise((resolve) => {
+			Benchpress.parse('admin/settings/navigation', 'navigation', { navigation: [data] }, function (li) {
+				translator.translate(li, function (li) {
+					li = $(translator.unescape(li));
+					el.after(li);
+					el.remove();
+					resolve();
+				});
 			});
 		});
-		Benchpress.parse('admin/settings/navigation', 'enabled', { enabled: [data] }, function (li) {
-			translator.translate(li, function (li) {
-				li = $(translator.unescape(li));
-				$('#enabled').append(li);
-				componentHandler.upgradeDom();
+		const renderForm = new Promise((resolve) => {
+			Benchpress.parse('admin/settings/navigation', 'enabled', { enabled: [data] }, function (li) {
+				translator.translate(li, function (li) {
+					li = $(translator.unescape(li));
+					$('#enabled').append(li);
+					componentHandler.upgradeDom();
+					resolve();
+				});
 			});
 		});
+
+		Promise.all([
+			renderNav,
+			renderForm,
+		]).then(() => selectIndex(data.index));
 	}
 
 	function save() {
diff --git a/src/views/admin/settings/navigation.tpl b/src/views/admin/settings/navigation.tpl
index ff76b337e5..99e0114b78 100644
--- a/src/views/admin/settings/navigation.tpl
+++ b/src/views/admin/settings/navigation.tpl
@@ -1,10 +1,10 @@
 <div class="row" id="navigation">
 	<div class="col-lg-9">
 		<div class="clearfix">
-			<ul id="active-navigation" class="nav navbar-nav">
+			<ul id="active-navigation" class="nav">
 				<!-- BEGIN navigation -->
-				<li data-index="{navigation.index}" class="{navigation.class} {{{ if navigation.selected }}} active {{{ end }}}">
-					<a href="#" title="{navigation.route}" id="{navigation.id}" class="{{{ if !navigation.enabled }}}text-muted{{{ end }}}">
+				<li data-index="{navigation.index}" class="float-start nav-item {navigation.class} {{{ if navigation.selected }}} active {{{ end }}}">
+					<a href="#" title="{navigation.route}" id="{navigation.id}" class="nav-link p-3 {{{ if !navigation.enabled }}}text-muted{{{ end }}}">
 						<i class="nav-icon fa fa-fw {{{ if navigation.iconClass }}}{navigation.iconClass}{{{ end }}}"></i><i class="dropdown-icon fa fa-caret-down{{{ if !navigation.dropdown }}} hidden{{{ end }}}"></i>
 					</a>
 				</li>
@@ -16,10 +16,10 @@
 
 		<ul id="enabled">
 			{{{ each enabled }}}
-			<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
+			<li data-index="{enabled.index}" class="card card-body text-bg-light border-0 <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
 				<form>
 					<div class="row">
-						<div class="col-sm-12 text-right">
+						<div class="col-sm-12 text-end">
 							{{{ if enabled.enabled }}}
 							<button class="btn btn-warning toggle">[[admin/settings/navigation:btn.disable]]</button>
 							{{{ else }}}
@@ -29,68 +29,58 @@
 							<input type="hidden" name="enabled" value="{{{ if enabled.enabled }}}on{{{ end}}}" />
 						</div>
 					</div>
-					<div class="row">
+					<div class="row mb-3">
 						<div class="col-sm-1">
-							<div class="form-group">
-								<label>[[admin/settings/navigation:icon]]</label>
-								<br/>
-								<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
-									<a class="change-icon-link <!-- IF enabled.iconClass -->hidden<!-- ENDIF enabled.iconClass -->" href="#">[[admin/settings/navigation:change-icon]]</a>
-									<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
-								</span>
-							</div>
+							<label class="form-label">[[admin/settings/navigation:icon]]</label>
+							<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
+								<a class="change-icon-link <!-- IF enabled.iconClass -->hidden<!-- ENDIF enabled.iconClass -->" href="#">[[admin/settings/navigation:change-icon]]</a>
+								<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
+							</span>
 						</div>
 
 						<div class="col-sm-3">
-							<div class="form-group">
-								<label for="nav:route">[[admin/settings/navigation:route]]</label>
-								<input id="nav:route" class="form-control" type="text" name="route" value="{enabled.route}" />
-							</div>
+							<label class="form-label" for="nav:route">[[admin/settings/navigation:route]]</label>
+							<input id="nav:route" class="form-control" type="text" name="route" value="{enabled.route}" />
 						</div>
 
 						<div class="col-sm-4">
-							<div class="form-group">
-								<label for="nav:class">[[admin/settings/navigation:class]]</label>
-								<input id="nav:class" class="form-control" type="text" name="class" value="{enabled.class}" />
-							</div>
+							<label class="form-label" for="nav:class">[[admin/settings/navigation:class]]</label>
+							<input id="nav:class" class="form-control" type="text" name="class" value="{enabled.class}" />
 						</div>
 
 						<div class="col-sm-4">
-							<div class="form-group">
-								<label for="nav:id">[[admin/settings/navigation:id]]</label>
-								<input id="nav:id" class="form-control" type="text" name="id" value="{enabled.id}" />
-							</div>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-4">
-							<div class="form-group">
-								<label for="nav:text">[[admin/settings/navigation:text]]</label>
-								<input id="nav:text" class="form-control unescape" type="text" name="text" value="{enabled.text}" />
-							</div>
-						</div>
-						<div class="col-sm-4">
-							<div class="form-group">
-								<label for="nav:text-class">[[admin/settings/navigation:text-class]]</label>
-								<input id="nav:text-class" class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
-							</div>
-						</div>
-
-						<div class="col-sm-4">
-							<div class="form-group">
-								<label for="nav:tooltip">[[admin/settings/navigation:tooltip]]</label>
-								<input id="nav:tooltip" class="form-control unescape" type="text" name="title" value="{enabled.title}" />
-							</div>
+							<label class="form-label" for="nav:id">[[admin/settings/navigation:id]]</label>
+							<input id="nav:id" class="form-control" type="text" name="id" value="{enabled.id}" />
 						</div>
 					</div>
 
-					<strong>[[admin/settings/navigation:groups]]</strong>
-					<div>
-						<select name="groups" class="form-control" size="10" multiple>
-							{{{ each enabled.groups }}}
-							<option value="{enabled.groups.displayName}"<!-- IF enabled.groups.selected --> selected<!-- ENDIF enabled.groups.selected -->>{enabled.groups.displayName}</option>
-							{{{ end }}}
-						</select>
+					<div class="row mb-3">
+						<div class="col-sm-4">
+							<label class="form-label" for="nav:text">[[admin/settings/navigation:text]]</label>
+							<input id="nav:text" class="form-control unescape" type="text" name="text" value="{enabled.text}" />
+						</div>
+
+						<div class="col-sm-4">
+							<label class="form-label" for="nav:text-class">[[admin/settings/navigation:text-class]]</label>
+							<input id="nav:text-class" class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
+						</div>
+
+						<div class="col-sm-4">
+							<label class="form-label" for="nav:tooltip">[[admin/settings/navigation:tooltip]]</label>
+							<input id="nav:tooltip" class="form-control unescape" type="text" name="title" value="{enabled.title}" />
+						</div>
+					</div>
+
+					<div class="row mb-3">
+						<div class="col-12">
+							<label class="form-label">[[admin/settings/navigation:groups]]</label>
+
+							<select name="groups" class="form-select" size="10" multiple>
+								{{{ each enabled.groups }}}
+								<option value="{enabled.groups.displayName}"<!-- IF enabled.groups.selected --> selected<!-- ENDIF enabled.groups.selected -->>{enabled.groups.displayName}</option>
+								{{{ end }}}
+							</select>
+						</div>
 					</div>
 
 					<div class="checkbox">
@@ -107,7 +97,7 @@
 						</label>
 					</div>
 					<div>
-						<p class="help-block">
+						<p class="form-text">
 							[[admin/settings/navigation:dropdown-placeholder]]
 						</p>
 						<textarea name="dropdownContent" rows="5" class="form-control">{enabled.dropdownContent}</textarea>
@@ -119,9 +109,9 @@
 	</div>
 
 	<div class="col-lg-3">
-		<div class="panel panel-default">
-			<div class="panel-heading">[[admin/settings/navigation:available-menu-items]]</div>
-			<div class="panel-body">
+		<div class="card">
+			<div class="card-header">[[admin/settings/navigation:available-menu-items]]</div>
+			<div class="card-body">
 				<ul id="available">
 					<li data-id="custom" class="clearfix">
 						<div data-id="custom" class="drag-item alert alert-success pull-left">