diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss
index ef6d94a86a..88d02bc9eb 100644
--- a/public/scss/admin/admin.scss
+++ b/public/scss/admin/admin.scss
@@ -13,16 +13,9 @@
 @import "./extend/plugins";
 @import "./extend/rewards";
 @import "./extend/widgets";
-// @import "./advanced/database";
-// @import "./advanced/events";
-// @import "./advanced/logs";
-// @import "./advanced/errors";
-// @import "./advanced/hooks";
-// @import "./development/info";
+@import "./advanced/database";
 @import "./settings";
 
-// @import "../flags";
-
 @import "./modules/alerts";
 @import "./modules/selectable";
 @import "./modules/nprogress";
diff --git a/public/scss/admin/advanced/database.scss b/public/scss/admin/advanced/database.scss
new file mode 100644
index 0000000000..a68332708c
--- /dev/null
+++ b/public/scss/admin/advanced/database.scss
@@ -0,0 +1,6 @@
+.database-info {
+	span {
+		display:inline-block;
+		width:220px;
+	}
+}
diff --git a/public/src/admin/advanced/logs.js b/public/src/admin/advanced/logs.js
index 15705bb8a0..9d3be96752 100644
--- a/public/src/admin/advanced/logs.js
+++ b/public/src/admin/advanced/logs.js
@@ -7,8 +7,6 @@ define('admin/advanced/logs', ['alerts'], function (alerts) {
 	Logs.init = function () {
 		const logsEl = $('.logs pre');
 		logsEl.scrollTop(logsEl.prop('scrollHeight'));
-		// Affix menu
-		$('.affix').affix();
 
 		$('.logs').find('button[data-action]').on('click', function () {
 			const btnEl = $(this);
@@ -16,21 +14,14 @@ define('admin/advanced/logs', ['alerts'], function (alerts) {
 
 			switch (action) {
 				case 'reload':
-					socket.emit('admin.logs.get', function (err, logs) {
-						if (!err) {
-							logsEl.text(logs);
-							logsEl.scrollTop(logsEl.prop('scrollHeight'));
-						} else {
-							alerts.error(err);
-						}
-					});
+					loadLogs();
 					break;
 
 				case 'clear':
 					socket.emit('admin.logs.clear', function (err) {
 						if (!err) {
 							alerts.success('[[admin/advanced/logs:clear-success]]');
-							btnEl.prev().click();
+							loadLogs();
 						} else {
 							alerts.error(err);
 						}
@@ -40,5 +31,17 @@ define('admin/advanced/logs', ['alerts'], function (alerts) {
 		});
 	};
 
+	function loadLogs() {
+		const logsEl = $('.logs pre');
+		socket.emit('admin.logs.get', function (err, logs) {
+			if (!err) {
+				logsEl.text(logs);
+				logsEl.scrollTop(logsEl.prop('scrollHeight'));
+			} else {
+				alerts.error(err);
+			}
+		});
+	}
+
 	return Logs;
 });
diff --git a/src/controllers/admin/hooks.js b/src/controllers/admin/hooks.js
index 0f68a7e47e..c3511ebaf3 100644
--- a/src/controllers/admin/hooks.js
+++ b/src/controllers/admin/hooks.js
@@ -20,7 +20,7 @@ hooksController.get = function (req, res) {
 				id: hookData.id,
 				priority: hookData.priority,
 				method: hookData.method ? validator.escape(hookData.method.toString()) : 'No plugin function!',
-				index: `${hookIndex}-code-${methodIndex}`,
+				index: `hook-${hookIndex}-code-${methodIndex}`,
 			});
 		});
 		hooks.push(current);
diff --git a/src/views/admin/advanced/cache.tpl b/src/views/admin/advanced/cache.tpl
index c5a2dc2143..ae4c4cde32 100644
--- a/src/views/admin/advanced/cache.tpl
+++ b/src/views/admin/advanced/cache.tpl
@@ -4,41 +4,50 @@
 		<div class="row">
 			{{{each caches}}}
 			<div class="col-lg-3">
-				<div class="panel panel-default">
-					<div class="panel-heading">[[admin/advanced/cache:{@key}-cache]]</div>
-					<div class="panel-body">
-						<div class="checkbox" data-name="{@key}">
+				<div class="card">
+					<div class="card-header">[[admin/advanced/cache:{@key}-cache]]</div>
+					<div class="card-body">
+						<div class="checkbox mb-3" data-name="{@key}">
 							<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
 								<input class="mdl-switch__input" type="checkbox" {{{if caches.enabled}}}checked{{{end}}}>
+								<span class="mdl-switch__label"></span>
 							</label>
 						</div>
 
-						<span>{{{if ../length}}}{../length}{{{else}}}{../itemCount}{{{end}}} / {{{if ../max}}}{../max}{{{else}}}{../maxSize}{{{end}}}</span><br/>
-
-						<div class="progress">
+						<div class="mb-3">{{{if ../length}}}{../length}{{{else}}}{../itemCount}{{{end}}} / {{{if ../max}}}{../max}{{{else}}}{../maxSize}{{{end}}}</div>
+						<div class="progress mb-3">
 							<div class="progress-bar" role="progressbar" aria-valuenow="{../percentFull}" aria-valuemin="0" aria-valuemax="100" style="width: {../percentFull}%;">
 								[[admin/advanced/cache:percent-full, {../percentFull}]]
 							</div>
 						</div>
+						<div class="mb-2">
+							<label>Hits:</label> <span>{../hits}</span>
+						</div>
+						<div class="mb-2">
+							<label>Misses:</label> <span>{../misses}</span>
+						</div>
+						<div class="mb-2">
+							<label>Hit Ratio:</label> <span>{../hitRatio}</span>
+						</div>
 
-						<label>Hits:</label> <span>{../hits}</span><br/>
-						<label>Misses:</label> <span>{../misses}</span><br/>
-						<label>Hit Ratio:</label> <span>{../hitRatio}</span><br/>
-						{{{if ../ttl}}}<label>TTL:</label> <span>{../ttl}</span></br>{{{end}}}
+						{{{if ../ttl}}}
+						<div class="mb-2">
+							<label>TTL:</label> <span>{../ttl}</span>
+						</div>
+						{{{end}}}
 						{{{if (@key == "post")}}}
 						<hr/>
-						<div class="form-group">
+						<div class="mb-3">
 							<label for="postCacheSize">[[admin/advanced/cache:post-cache-size]]</label>
 							<input id="postCacheSize" type="text" class="form-control" value="" data-field="postCacheSize">
 						</div>
 						{{{end}}}
-						<a href="{config.relative_path}/api/admin/advanced/cache/dump?name={@key}" class="btn btn-sm btn-default"><i class="fa fa-download"></i></a>
+						<a href="{config.relative_path}/api/admin/advanced/cache/dump?name={@key}" class="btn btn-sm"><i class="fa fa-download"></i></a>
 						<a class="btn btn-sm btn-danger clear" data-name="{@key}"><i class="fa fa-trash"></i></a>
 					</div>
 				</div>
 			</div>
 			{{{end}}}
-			
 		</div>
 	</div>
 </div>
diff --git a/src/views/admin/advanced/database.tpl b/src/views/admin/advanced/database.tpl
index f63b77cb86..6646cc984f 100644
--- a/src/views/admin/advanced/database.tpl
+++ b/src/views/admin/advanced/database.tpl
@@ -7,32 +7,32 @@
 			{mongo.serverStatusError}
 		</div>
 		{{{ end }}}
-		<div class="panel panel-default">
-			<div class="panel-heading"><i class="fa fa-hdd-o"></i> [[admin/advanced/database:mongo]]</div>
-			<div class="panel-body">
+		<div class="card">
+			<div class="card-header"><i class="fa fa-hdd-o"></i> [[admin/advanced/database:mongo]]</div>
+			<div class="card-body">
 				<div class="database-info">
-					<span>[[admin/advanced/database:mongo.version]]</span> <span class="text-right">{mongo.version}</span><br/>
+					<span>[[admin/advanced/database:mongo.version]]</span> <span class="text-end">{mongo.version}</span><br/>
 					<hr/>
-					<span>[[admin/advanced/database:uptime-seconds]]</span> <span class="text-right formatted-number">{mongo.uptime}</span><br/>
-					<span>[[admin/advanced/database:mongo.storage-engine]]</span> <span class="text-right">{mongo.storageEngine}</span><br/>
-					<span>[[admin/advanced/database:mongo.collections]]</span> <span class="text-right formatted-number">{mongo.collections}</span><br/>
-					<span>[[admin/advanced/database:mongo.objects]]</span> <span class="text-right formatted-number">{mongo.objects}</span><br/>
-					<span>[[admin/advanced/database:mongo.avg-object-size]]</span> <span class="text-right">[[admin/advanced/database:x-b, {mongo.avgObjSize}]]</span><br/>
+					<span>[[admin/advanced/database:uptime-seconds]]</span> <span class="text-end formatted-number">{mongo.uptime}</span><br/>
+					<span>[[admin/advanced/database:mongo.storage-engine]]</span> <span class="text-end">{mongo.storageEngine}</span><br/>
+					<span>[[admin/advanced/database:mongo.collections]]</span> <span class="text-end formatted-number">{mongo.collections}</span><br/>
+					<span>[[admin/advanced/database:mongo.objects]]</span> <span class="text-end formatted-number">{mongo.objects}</span><br/>
+					<span>[[admin/advanced/database:mongo.avg-object-size]]</span> <span class="text-end">[[admin/advanced/database:x-b, {mongo.avgObjSize}]]</span><br/>
 					<hr/>
-					<span>[[admin/advanced/database:mongo.data-size]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.dataSize}]]</span><br/>
-					<span>[[admin/advanced/database:mongo.storage-size]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.storageSize}]]</span><br/>
-					<span>[[admin/advanced/database:mongo.index-size]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.indexSize}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.data-size]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.dataSize}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.storage-size]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.storageSize}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.index-size]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.indexSize}]]</span><br/>
 					<!-- IF mongo.fileSize -->
-					<span>[[admin/advanced/database:mongo.file-size]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.fileSize}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.file-size]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.fileSize}]]</span><br/>
 					<!-- ENDIF mongo.fileSize -->
 					<hr/>
-					<span>[[admin/advanced/database:mongo.resident-memory]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.mem.resident}]]</span><br/>
-					<span>[[admin/advanced/database:mongo.virtual-memory]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.mem.virtual}]]</span><br/>
-					<span>[[admin/advanced/database:mongo.mapped-memory]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.mem.mapped}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.resident-memory]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.mem.resident}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.virtual-memory]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.mem.virtual}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.mapped-memory]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.mem.mapped}]]</span><br/>
 					<hr/>
-					<span>[[admin/advanced/database:mongo.bytes-in]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.network.bytesIn}]]</span><br/>
-					<span>[[admin/advanced/database:mongo.bytes-out]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {mongo.network.bytesOut}]]</span><br/>
-					<span>[[admin/advanced/database:mongo.num-requests]]</span> <span class="text-right">{mongo.network.numRequests}</span><br/>
+					<span>[[admin/advanced/database:mongo.bytes-in]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.network.bytesIn}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.bytes-out]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {mongo.network.bytesOut}]]</span><br/>
+					<span>[[admin/advanced/database:mongo.num-requests]]</span> <span class="text-end">{mongo.network.numRequests}</span><br/>
 				</div>
 			</div>
 		</div>
@@ -41,38 +41,38 @@
 
 	{{{ if redis }}}
 	<div class="col-lg-6">
-		<div class="panel panel-default">
-			<div class="panel-heading"><i class="fa fa-hdd-o"></i> [[admin/advanced/database:redis]]</div>
-			<div class="panel-body">
+		<div class="card">
+			<div class="card-header"><i class="fa fa-hdd-o"></i> [[admin/advanced/database:redis]]</div>
+			<div class="card-body">
 				<div class="database-info">
-					<span>[[admin/advanced/database:redis.version]]</span> <span class="text-right">{redis.redis_version}</span><br/>
+					<span>[[admin/advanced/database:redis.version]]</span> <span class="text-end">{redis.redis_version}</span><br/>
 					<hr/>
-					<span>[[admin/advanced/database:uptime-seconds]]</span> <span class="text-right formatted-number">{redis.uptime_in_seconds}</span><br/>
-					<span>[[admin/advanced/database:uptime-days]]</span> <span class="text-right">{redis.uptime_in_days}</span><br/>
+					<span>[[admin/advanced/database:uptime-seconds]]</span> <span class="text-end formatted-number">{redis.uptime_in_seconds}</span><br/>
+					<span>[[admin/advanced/database:uptime-days]]</span> <span class="text-end">{redis.uptime_in_days}</span><br/>
 					<hr/>
-					<span>[[admin/advanced/database:redis.keys]]</span> <span class="text-right formatted-number">{redis.keys}</span><br/>
-					<span>[[admin/advanced/database:redis.expires]]</span> <span class="text-right formatted-number">{redis.expires}</span><br/>
-					<span>[[admin/advanced/database:redis.avg-ttl]]</span> <span class="text-right formatted-number">{redis.avg_ttl}</span><br/>
-					<span>[[admin/advanced/database:redis.connected-clients]]</span> <span class="text-right">{redis.connected_clients}</span><br/>
-					<span>[[admin/advanced/database:redis.connected-slaves]]</span> <span class="text-right">{redis.connected_slaves}</span><br/>
-					<span>[[admin/advanced/database:redis.blocked-clients]]</span> <span class="text-right">{redis.blocked_clients}</span><br/>
+					<span>[[admin/advanced/database:redis.keys]]</span> <span class="text-end formatted-number">{redis.keys}</span><br/>
+					<span>[[admin/advanced/database:redis.expires]]</span> <span class="text-end formatted-number">{redis.expires}</span><br/>
+					<span>[[admin/advanced/database:redis.avg-ttl]]</span> <span class="text-end formatted-number">{redis.avg_ttl}</span><br/>
+					<span>[[admin/advanced/database:redis.connected-clients]]</span> <span class="text-end">{redis.connected_clients}</span><br/>
+					<span>[[admin/advanced/database:redis.connected-slaves]]</span> <span class="text-end">{redis.connected_slaves}</span><br/>
+					<span>[[admin/advanced/database:redis.blocked-clients]]</span> <span class="text-end">{redis.blocked_clients}</span><br/>
 					<hr/>
 
-					<span>[[admin/advanced/database:redis.used-memory]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {redis.used_memory_human}]]</span><br/>
-					<span>[[admin/advanced/database:redis.memory-frag-ratio]]</span> <span class="text-right">{redis.mem_fragmentation_ratio}</span><br/>
+					<span>[[admin/advanced/database:redis.used-memory]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {redis.used_memory_human}]]</span><br/>
+					<span>[[admin/advanced/database:redis.memory-frag-ratio]]</span> <span class="text-end">{redis.mem_fragmentation_ratio}</span><br/>
 					<hr/>
-					<span>[[admin/advanced/database:redis.total-connections-recieved]]</span> <span class="text-right formatted-number">{redis.total_connections_received}</span><br/>
-					<span>[[admin/advanced/database:redis.total-commands-processed]]</span> <span class="text-right formatted-number">{redis.total_commands_processed}</span><br/>
-					<span>[[admin/advanced/database:redis.iops]]</span> <span class="text-right formatted-number">{redis.instantaneous_ops_per_sec}</span><br/>
+					<span>[[admin/advanced/database:redis.total-connections-recieved]]</span> <span class="text-end formatted-number">{redis.total_connections_received}</span><br/>
+					<span>[[admin/advanced/database:redis.total-commands-processed]]</span> <span class="text-end formatted-number">{redis.total_commands_processed}</span><br/>
+					<span>[[admin/advanced/database:redis.iops]]</span> <span class="text-end formatted-number">{redis.instantaneous_ops_per_sec}</span><br/>
 
-					<span>[[admin/advanced/database:redis.iinput]]</span> <span class="text-right">[[admin/advanced/database:x-mb, {redis.instantaneous_input}]]</span><br/>
-					<span>[[admin/advanced/database:redis.ioutput]]</span> <span class="text-right">[[admin/advanced/database:x-mb, {redis.instantaneous_output}]]</span><br/>
-					<span>[[admin/advanced/database:redis.total-input]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {redis.total_net_input}]]</span><br/>
-					<span>[[admin/advanced/database:redis.total-output]]</span> <span class="text-right">[[admin/advanced/database:x-gb, {redis.total_net_output}]]</span><br/>
+					<span>[[admin/advanced/database:redis.iinput]]</span> <span class="text-end">[[admin/advanced/database:x-mb, {redis.instantaneous_input}]]</span><br/>
+					<span>[[admin/advanced/database:redis.ioutput]]</span> <span class="text-end">[[admin/advanced/database:x-mb, {redis.instantaneous_output}]]</span><br/>
+					<span>[[admin/advanced/database:redis.total-input]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {redis.total_net_input}]]</span><br/>
+					<span>[[admin/advanced/database:redis.total-output]]</span> <span class="text-end">[[admin/advanced/database:x-gb, {redis.total_net_output}]]</span><br/>
 
 					<hr/>
-					<span>[[admin/advanced/database:redis.keyspace-hits]]</span> <span class="text-right formatted-number">{redis.keyspace_hits}</span><br/>
-					<span>[[admin/advanced/database:redis.keyspace-misses]]</span> <span class="text-right formatted-number">{redis.keyspace_misses}</span><br/>
+					<span>[[admin/advanced/database:redis.keyspace-hits]]</span> <span class="text-end formatted-number">{redis.keyspace_hits}</span><br/>
+					<span>[[admin/advanced/database:redis.keyspace-misses]]</span> <span class="text-end formatted-number">{redis.keyspace_misses}</span><br/>
 				</div>
 			</div>
 		</div>
@@ -81,13 +81,13 @@
 
 	{{{ if postgres }}}
 	<div class="col-lg-6">
-		<div class="panel panel-default">
-			<div class="panel-heading"><i class="fa fa-hdd-o"></i> [[admin/advanced/database:postgres]]</div>
-			<div class="panel-body">
+		<div class="card">
+			<div class="card-header"><i class="fa fa-hdd-o"></i> [[admin/advanced/database:postgres]]</div>
+			<div class="card-body">
 				<div class="database-info">
-					<span>[[admin/advanced/database:postgres.version]]</span> <span class="text-right">{postgres.version}</span><br/>
+					<span>[[admin/advanced/database:postgres.version]]</span> <span class="text-end">{postgres.version}</span><br/>
 					<hr/>
-					<span>[[admin/advanced/database:uptime-seconds]]</span> <span class="text-right formatted-number">{postgres.uptime}</span><br/>
+					<span>[[admin/advanced/database:uptime-seconds]]</span> <span class="text-end formatted-number">{postgres.uptime}</span><br/>
 				</div>
 			</div>
 		</div>
@@ -98,12 +98,12 @@
 <div class="row database">
 	{{{ if mongo }}}
 	<div class="col-lg-6">
-		<div class="panel panel-default">
-			<div class="panel-heading" data-toggle="collapse" data-target=".mongodb-raw">
-				<h3 class="panel-title"><i class="fa fa-caret-down"></i> [[admin/advanced/database:mongo.raw-info]]</h3>
-			</div>
+		<div class="card">
+			<h5 class="card-header" data-bs-toggle="collapse" data-bs-target=".mongodb-raw">
+				<i class="fa fa-caret-down"></i> [[admin/advanced/database:mongo.raw-info]]
+			</h5>
 
-			<div class="panel-body mongodb-raw collapse">
+			<div class="card-body mongodb-raw collapse">
 				<div class="highlight">
 					<pre>{mongo.raw}</pre>
 				</div>
@@ -114,12 +114,12 @@
 
 	{{{ if redis }}}
 	<div class="col-lg-6">
-		<div class="panel panel-default">
-			<div class="panel-heading" data-toggle="collapse" data-target=".redis-raw">
-				<h3 class="panel-title"><i class="fa fa-caret-down"></i> [[admin/advanced/database:redis.raw-info]]</h3>
-			</div>
+		<div class="card">
+			<h5 class="card-header" data-bs-toggle="collapse" data-bs-target=".redis-raw">
+				<i class="fa fa-caret-down"></i> [[admin/advanced/database:redis.raw-info]]
+			</h5>
 
-			<div class="panel-body redis-raw collapse">
+			<div class="card-body redis-raw collapse">
 				<div class="highlight">
 					<pre>{redis.raw}</pre>
 				</div>
@@ -130,12 +130,12 @@
 
 	{{{ if postgres }}}
 	<div class="col-lg-6">
-		<div class="panel panel-default">
-			<div class="panel-heading" data-toggle="collapse" data-target=".postgresql-raw">
-				<h3 class="panel-title"><i class="fa fa-caret-down"></i> [[admin/advanced/database:postgres.raw-info]]</h3>
-			</div>
+		<div class="card">
+			<h5 class="card-header" data-bs-toggle="collapse" data-bs-target=".postgresql-raw">
+				<i class="fa fa-caret-down"></i> [[admin/advanced/database:postgres.raw-info]]
+			</h5>
 
-			<div class="panel-body postgresql-raw collapse">
+			<div class="card-body postgresql-raw collapse">
 				<div class="highlight">
 					<pre>{postgres.raw}</pre>
 				</div>
diff --git a/src/views/admin/advanced/errors.tpl b/src/views/admin/advanced/errors.tpl
index f5f0838c31..5b84d04aeb 100644
--- a/src/views/admin/advanced/errors.tpl
+++ b/src/views/admin/advanced/errors.tpl
@@ -2,23 +2,23 @@
 	<div class="col-lg-9">
 		<div class="row">
 			<div class="col-sm-6 text-center">
-				<div class="panel panel-default">
-					<div class="panel-body">
+				<div class="card">
+					<div class="card-body">
 						<div><canvas id="not-found" height="250"></canvas></div>
 					</div>
-					<div class="panel-footer"><small>
-						<strong>[[admin/advanced/errors:figure-x, 1]]</strong> &ndash; 
+					<div class="card-footer"><small>
+						<strong>[[admin/advanced/errors:figure-x, 1]]</strong> &ndash;
 						[[admin/advanced/errors:error-events-per-day, [[admin/advanced/errors:error.404]]]]
 					</small></div>
 				</div>
 			</div>
 			<div class="col-sm-6 text-center">
-				<div class="panel panel-default">
-					<div class="panel-body">
+				<div class="card">
+					<div class="card-body">
 						<div><canvas id="toobusy" height="250"></canvas></div>
 					</div>
-					<div class="panel-footer"><small>
-						<strong>[[admin/advanced/errors:figure-x, 2]]</strong> &ndash; 
+					<div class="card-footer"><small>
+						<strong>[[admin/advanced/errors:figure-x, 2]]</strong> &ndash;
 						[[admin/advanced/errors:error-events-per-day, [[admin/advanced/errors:error.503]]]]
 					</small></div>
 				</div>
@@ -26,10 +26,10 @@
 		</div>
 	</div>
 	<div class="col-lg-3 acp-sidebar">
-		<div class="panel panel-default">
-			<div class="panel-heading">[[admin/advanced/errors:manage-error-log]]</div>
-			<div class="panel-body">
-				<div class="btn-group-vertical btn-block" role="group">
+		<div class="card">
+			<div class="card-header">[[admin/advanced/errors:manage-error-log]]</div>
+			<div class="card-body">
+				<div class="d-grid gap-2" role="group">
 					<a class="btn btn-info" target="_top" href="{config.relative_path}/admin/advanced/errors/export">
 						<i class="fa fa-download"></i> [[admin/advanced/errors:export-error-log]]
 					</a>
@@ -43,12 +43,12 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-12">
-		<div class="panel panel-default">
-			<div class="panel-heading">
+	<div class="col-12">
+		<div class="card">
+			<div class="card-header">
 				<i class="fa fa-exclamation-triangle"></i> [[admin/advanced/errors:error.404]]
 			</div>
-			<div class="panel-body">
+			<div class="card-body">
 				<table class="table table-striped">
 					<thead>
 						<th>[[admin/advanced/errors:route]]</th>
diff --git a/src/views/admin/advanced/events.tpl b/src/views/admin/advanced/events.tpl
index ccaca544b6..5e3403c158 100644
--- a/src/views/admin/advanced/events.tpl
+++ b/src/views/admin/advanced/events.tpl
@@ -1,68 +1,72 @@
 <div class="row events">
 	<div class="col-lg-9">
-		<div class="panel panel-default">
-			<div class="panel-heading"><i class="fa fa-calendar-o"></i> [[admin/advanced/events:events]]</div>
-			<div class="panel-body">
-				<!-- IF !events.length -->
-				<div class="alert alert-info">[[admin/advanced/events:no-events]]</div>
-				<!-- ENDIF !events.length -->
-				<div class="events-list">
-				<!-- BEGIN events -->
-				<div data-eid="{events.eid}">
-					<span class="label label-default">#{events.eid}</span>
-					<span class="label label-info">{events.type}</span>
-					<span class="label label-default">uid {events.uid}</span>
-					<!-- IF events.ip --><span class="label label-default">{events.ip}</span><!-- END -->
-					<a href="{config.relative_path}/user/{events.user.userslug}" target="_blank">
-						<!-- IF events.user.picture -->
-						<img class="avatar avatar-xs" src="{events.user.picture}" alt="" />
-						<!-- ELSE -->
-						<div class="avatar avatar-xs" style="background-color: {events.user.icon:bgColor};">{events.user.icon:text}</div>
-						<!-- ENDIF events.user.picture -->
-					</a>
-					<a href="{config.relative_path}/user/{events.user.userslug}" target="_blank">{events.user.username}</a>
-					<span class="pull-right delete-event"><i class="fa fa-trash-o"></i></span>
-					<span class="pull-right">{events.timestampISO}</span>
-					<pre class="well">{events.jsonString}</pre>
-				</div>
-				<!-- END events -->
-				<!-- IMPORT partials/paginator.tpl -->
+		<h5><i class="fa fa-calendar-o"></i> [[admin/advanced/events:events]]</h5>
+		{{{ if !events.length }}}
+		<div class="alert alert-info">[[admin/advanced/events:no-events]]</div>
+		{{{ end }}}
+		<div class="events-list">
+			{{{ each events }}}
+			<div class="card mb-3">
+				<div class="card-body">
+					<div data-eid="{events.eid}">
+						<div class="mb-3">
+							<span class="badge bg-primary">#{events.eid}</span>
+							<span class="badge bg-info">{events.type}</span>
+							<span class="badge bg-info">uid {events.uid}</span>
+							<!-- IF events.ip --><span class="badge bg-info">{events.ip}</span><!-- END -->
+							<a href="{config.relative_path}/user/{events.user.userslug}" target="_blank">
+								<!-- IF events.user.picture -->
+								<img class="avatar avatar-xs" src="{events.user.picture}" alt="" />
+								<!-- ELSE -->
+								<div class="avatar avatar-xs" style="background-color: {events.user.icon:bgColor};">{events.user.icon:text}</div>
+								<!-- ENDIF events.user.picture -->
+							</a>
+							<a href="{config.relative_path}/user/{events.user.userslug}" target="_blank">{events.user.username}</a>
+							<span class="float-end delete-event ms-2 pointer"><i class="fa fa-trash-o"></i></span>
+							<span class="float-end">{events.timestampISO}</span>
+						</div>
+						<pre class="text-bg-light p-3">{events.jsonString}</pre>
+					</div>
 				</div>
 			</div>
+			{{{ end }}}
+			<!-- IMPORT partials/paginator.tpl -->
 		</div>
 	</div>
 	<div class="col-lg-3 acp-sidebar">
-		<div class="panel panel-default">
-			<div class="panel-heading">[[admin/advanced/events:filters]]</div>
-			<div class="panel-body">
+		<div class="card">
+			<h5 class="card-header">[[admin/advanced/events:filters]]</h5>
+			<div class="card-body">
 				<form role="form" id="filters">
-					<div class="form-group">
-						<label for="type">[[admin/advanced/events:filter-type]]</label>
-						<select id="type" name="type" class="form-control">
+					<div class="mb-3">
+						<label class="form-label" for="type">[[admin/advanced/events:filter-type]]</label>
+						<select id="type" name="type" class="form-select">
 							<!-- BEGIN types -->
 							<option value="{types.value}" <!-- IF types.selected -->selected<!-- ENDIF types.selected -->>{types.name} - ({types.count}) </option>
 							<!-- END types -->
 						</select>
 					</div>
-					<div class="form-group">
-						<label for="start">[[admin/advanced/events:filter-start]]</label>
+					<div class="mb-3">
+						<label class="form-label" for="start">[[admin/advanced/events:filter-start]]</label>
 						<input type="date" id="start" name="start" value="{query.start}" class="form-control" />
 					</div>
-					<div class="form-group">
-						<label for="end">[[admin/advanced/events:filter-end]]</label>
+					<div class="mb-3">
+						<label class="form-label" for="end">[[admin/advanced/events:filter-end]]</label>
 						<input type="date" id="end" name="end" value="{query.end}" class="form-control" />
 					</div>
-					<div class="form-group">
-						<label for="perPage">[[admin/advanced/events:filter-perPage]]</label>
+					<div class="mb-3">
+						<label class="form-label" for="perPage">[[admin/advanced/events:filter-perPage]]</label>
 						<input type="text" id="perPage" name="perPage" value="{query.perPage}" class="form-control" />
 					</div>
-					<button type="submit" class="btn btn-primary btn-block" id="apply">[[admin/advanced/events:filters-apply]]</button>
+					<div class="d-grid">
+						<button type="submit" class="btn btn-primary" id="apply">[[admin/advanced/events:filters-apply]]</button>
+					</div>
 				</form>
 			</div>
 		</div>
-		<div class="panel panel-default">
-			<div class="panel-body">
-				<button class="btn btn-block btn-danger" data-action="clear">
+		<div class="card">
+			<div class="card-body d-grid">
+				<button class="btn btn-danger" data-action="clear">
 					<i class="fa fa-eraser"></i> [[admin/advanced/events:delete-events]]
 				</button>
 			</div>
diff --git a/src/views/admin/advanced/hooks.tpl b/src/views/admin/advanced/hooks.tpl
index b9b2493b88..d137038ef6 100644
--- a/src/views/admin/advanced/hooks.tpl
+++ b/src/views/admin/advanced/hooks.tpl
@@ -1,27 +1,25 @@
 <div class="hooks-list panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 	{{{ each hooks }}}
-	<div class="panel panel-default">
-		<div class="panel-heading" role="tab">
-		<div class="panel-title">
-			<a role="button" data-toggle="collapse" data-parent="#accordion" data-target="#{hooks.index}" aria-expanded="true" aria-controls="{hooks.index}">
-			{hooks.hookName}
-			</a>
-			<span class="pull-right">{hooks.count} hooks</span>
+	<div class="card">
+		<div class="card-header" role="tab">
+			<h6 class="mb-0">
+				<a style="text-transform: none;" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#{hooks.index}" aria-expanded="true" aria-controls="{hooks.index}">{hooks.hookName}</a>
+				<span class="float-end">{hooks.count} hooks</span>
+			</h6>
 		</div>
-		</div>
-		<div id="{hooks.index}" class="panel-collapse collapse" role="tabpanel">
-		<div class="panel-body clearfix">
+		<div id="{hooks.index}" class="accordion-collapse collapse" role="tabpanel">
+		<div class="card-body">
 			{{{ each hooks.methods }}}
-			<div class="clearfix">
+			<div class="mb-3">
 				<strong>{hooks.methods.id}</strong>
 				Priority: {hooks.methods.priority}
 
-				<button class="btn btn-primary btn-sm pull-right" type="button" data-toggle="collapse" data-target="#{hooks.methods.index}" aria-expanded="false" aria-controls="{hooks.methods.index}">
+				<button class="btn btn-primary btn-sm float-end" type="button" data-bs-toggle="collapse" data-bs-target="#{hooks.methods.index}" aria-expanded="false" aria-controls="{hooks.methods.index}">
 					Show Code <i class="fa fa-eye"></i>
 				</button>
 			</div>
 			<div class="collapse" id="{hooks.methods.index}">
-				<pre>{hooks.methods.method}</pre>
+				<pre class="p-3 text-bg-light border border-secondary rounded">{hooks.methods.method}</pre>
 			</div>
 			{{{ end }}}
 		</div>
diff --git a/src/views/admin/advanced/logs.tpl b/src/views/admin/advanced/logs.tpl
index 4f7772bd22..73bd209486 100644
--- a/src/views/admin/advanced/logs.tpl
+++ b/src/views/admin/advanced/logs.tpl
@@ -1,16 +1,16 @@
 <div class="row logs">
 	<div class="col-lg-9">
-		<div class="panel panel-default">
-			<div class="panel-heading"><i class="fa fa-file-text-o"></i> [[admin/advanced/logs:logs]]</div>
-			<div class="panel-body">
-				<pre>{data}</pre>
+		<div class="card">
+			<div class="card-header"><i class="fa fa-file-text-o"></i> [[admin/advanced/logs:logs]]</div>
+			<div class="card-body">
+				<pre style="height: 600px;">{data}</pre>
 			</div>
 		</div>
 	</div>
 	<div class="col-lg-3 acp-sidebar">
-		<div class="panel panel-default">
-			<div class="panel-heading">[[admin/advanced/logs:control-panel]]</div>
-			<div class="panel-body">
+		<div class="card">
+			<div class="card-header">[[admin/advanced/logs:control-panel]]</div>
+			<div class="card-body d-grid gap-2">
 				<button class="btn btn-primary" data-action="reload">
 					<i class="fa fa-refresh"></i> [[admin/advanced/logs:reload]]
 				</button>
diff --git a/src/views/admin/development/info.tpl b/src/views/admin/development/info.tpl
index bb113ab0d9..44cd32b1f6 100644
--- a/src/views/admin/development/info.tpl
+++ b/src/views/admin/development/info.tpl
@@ -1,10 +1,10 @@
 <div class="info">
-	<div class="panel panel-default">
-		<div class="panel-heading">
-			<h3 class="panel-title">[[admin/development/info:you-are-on, {host}, {port}]] &bull; [[admin/development/info:ip, {ip}]]</h3>
-		</div>
+	<div class="card">
+		<h5 class="card-header">
+			[[admin/development/info:you-are-on, {host}, {port}]] &bull; [[admin/development/info:ip, {ip}]]
+		</h5>
 
-		<div class="panel-body">
+		<div class="card-body">
 			<span>[[admin/development/info:nodes-responded, {nodeCount}, {timeout}]]</span>
 
 			<table class="table table-striped">
@@ -57,13 +57,12 @@
 		</div>
 	</div>
 
-	<div class="panel panel-default">
-		<div class="panel-heading">
-			<h3 class="panel-title">[[admin/development/info:info]]</h3>
-		</div>
-
-		<div class="panel-body">
-			<div class="highlight">
+	<div class="card">
+		<h5 class="card-header">
+			[[admin/development/info:info]]
+		</h5>
+		<div class="card-body">
+			<div class="p-3 text-bg-light border border-secondary rounded">
 				<pre>{infoJSON}</pre>
 			</div>
 		</div>
diff --git a/src/views/admin/development/logger.tpl b/src/views/admin/development/logger.tpl
index 04e2004154..b5f6d658a4 100644
--- a/src/views/admin/development/logger.tpl
+++ b/src/views/admin/development/logger.tpl
@@ -1,9 +1,9 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 <div class="row logger">
 	<div class="col-lg-12">
-		<div class="panel panel-default">
-			<div class="panel-heading">[[admin/development/logger:logger-settings]]</div>
-			<div class="panel-body">
+		<div class="card">
+			<div class="card-header">[[admin/development/logger:logger-settings]]</div>
+			<div class="card-body">
 				<p>
 					[[admin/development/logger:description]]
 				</p>
@@ -14,7 +14,6 @@
 				<br/>
 
 				<form>
-
 					<label>
 						<input type="checkbox" data-field="loggerStatus"> <strong>[[admin/development/logger:enable-http]]</strong>
 					</label>