diff --git a/scripts/pi-hole/js/auditlog.js b/scripts/pi-hole/js/auditlog.js
index 0374d6de..7afd1437 100644
--- a/scripts/pi-hole/js/auditlog.js
+++ b/scripts/pi-hole/js/auditlog.js
@@ -33,8 +33,8 @@ function updateTopLists() {
             "</td> <td>" +
             data.top_queries[domain] +
             "</td> <td>" +
-            '<button type="button" class="btn btn-default btn-xs text-red"><i class="fa fa-ban"></i> Blacklist</button>' +
-            '<button type="button" class="btn btn-default btn-xs text-orange"><i class="fa fa-balance-scale"></i> Audit</button>' +
+            '<button type="button" class="btn btn-default btn-xs text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>' +
+            '<button type="button" class="btn btn-default btn-xs text-orange btn-audit"><i class="fa fa-balance-scale"></i> Audit</button>' +
             "</td> </tr> "
         );
       }
@@ -58,7 +58,7 @@ function updateTopLists() {
               "</td> <td>" +
               data.top_ads[domain] +
               "</td> <td>" +
-              '<button type="button" class="btn btn-default btn-sm text-orange"><i class="fa fa-balance-scale"></i> Audit</button>' +
+              '<button type="button" class="btn btn-default btn-sm text-orange btn-audit"><i class="fa fa-balance-scale"></i> Audit</button>' +
               "</td> </tr> "
           );
         } else {
@@ -69,8 +69,8 @@ function updateTopLists() {
               "</td> <td>" +
               data.top_ads[domain] +
               "</td> <td>" +
-              '<button type="button" class="btn btn-default btn-xs text-green"><i class="fas fa-check"></i> Whitelist</button>' +
-              '<button type="button" class="btn btn-default btn-xs text-orange"><i class="fa fa-balance-scale"></i> Audit</button>' +
+              '<button type="button" class="btn btn-default btn-xs text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>' +
+              '<button type="button" class="btn btn-default btn-xs text-orange btn-audit"><i class="fa fa-balance-scale"></i> Audit</button>' +
               "</td> </tr> "
           );
         }
diff --git a/scripts/pi-hole/js/db_queries.js b/scripts/pi-hole/js/db_queries.js
index efa85074..535d38ac 100644
--- a/scripts/pi-hole/js/db_queries.js
+++ b/scripts/pi-hole/js/db_queries.js
@@ -265,7 +265,7 @@ $(function () {
         case 1:
           fieldtext = "<span class='text-red'>Blocked (gravity)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 2:
@@ -275,24 +275,24 @@ $(function () {
               : "<span class='text-green'>OK</span> (answered by <br class='hidden-lg'>";
           fieldtext += (data.length > 5 && data[5] !== "N/A" ? data[5] : "") + ")" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 3:
           fieldtext =
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(cache)" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 4:
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist)";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 5:
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist)";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 6:
@@ -313,21 +313,21 @@ $(function () {
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(gravity, CNAME)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 10:
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist, CNAME)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 11:
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist, CNAME)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 12:
@@ -341,7 +341,7 @@ $(function () {
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(already forwarded)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 15:
           fieldtext =
@@ -358,7 +358,7 @@ $(function () {
             "<span class='text-orange'>OK</span> <br class='hidden-lg'>(stale cache)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         default:
           fieldtext = "Unknown (" + parseInt(data[4], 10) + ")";
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
index 163d282b..708db6e8 100644
--- a/scripts/pi-hole/js/queries.js
+++ b/scripts/pi-hole/js/queries.js
@@ -124,7 +124,7 @@ $(function () {
         case "1":
           fieldtext = "<span class='text-red'>Blocked (gravity)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case "2":
@@ -135,25 +135,25 @@ $(function () {
           fieldtext +=
             (data.length > 10 && data[10] !== "N/A" ? data[10] : "") + ")" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case "3":
           fieldtext =
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(cache)" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case "4":
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist)";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           break;
         case "5":
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist)";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           break;
         case "6":
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(external, IP)";
@@ -177,7 +177,7 @@ $(function () {
             "<span class='text-red'>Blocked <br class='hidden-lg'>(gravity, CNAME)</span>";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           isCNAME = true;
           break;
         case "10":
@@ -185,7 +185,7 @@ $(function () {
             "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist, CNAME)</span>";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           isCNAME = true;
           break;
         case "11":
@@ -193,7 +193,7 @@ $(function () {
             "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist, CNAME)</span>";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           isCNAME = true;
           break;
         case "12":
@@ -207,7 +207,7 @@ $(function () {
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(already forwarded)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case "15":
           fieldtext =
@@ -224,7 +224,7 @@ $(function () {
             "<span class='text-orange'>OK</span> <br class='hidden-lg'>(stale cache)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         default:
           fieldtext = "Unknown (" + parseInt(data[4], 10) + ")";
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
index e0619177..563101e5 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -26,21 +26,13 @@ $hostname = gethostname() ? gethostname() : '';
     <link rel="icon" href="img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
     <link rel="icon" href="img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
     <link rel="manifest" href="img/favicons/manifest.json">
-    <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#367fa9">
+    <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="<?php echo $theme_color; ?>">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
-    <meta name="msapplication-TileColor" content="#367fa9">
+    <meta name="msapplication-TileColor" content="<?php echo $theme_color; ?>">
     <meta name="msapplication-TileImage" content="img/favicons/mstile-150x150.png">
 
     <!-- Theme styles -->
-<?php if ($theme == 'default-light') { ?>
-    <meta name="theme-color" content="#367fa9">
-<?php } elseif ($theme == 'default-dark') { ?>
-    <meta name="theme-color" content="#272c30">
-<?php } elseif ($theme == 'default-darker') { ?>
-    <meta name="theme-color" content="#2e6786">
-<?php } elseif ($theme == 'lcars') { ?>
-    <meta name="theme-color" content="#4488FF">
-<?php } ?>
+    <meta name="theme-color" content="<?php echo $theme_color; ?>">
 
 <?php if ($darkmode) { ?>
     <style>
diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php
index b022d4a6..22847a38 100644
--- a/scripts/pi-hole/php/header_authenticated.php
+++ b/scripts/pi-hole/php/header_authenticated.php
@@ -206,7 +206,7 @@ if ($auth) {
                         <ul class="dropdown-menu">
                             <!-- User image -->
                             <li class="user-header">
-                                <img src="img/logo.svg" alt="Pi-hole Logo" style="border: 0" width="90" height="90">
+                                <img class="logo-img" src="img/logo.svg" alt="Pi-hole Logo" style="border: 0" width="90" height="90">
                                 <p>
                                     Open Source Ad Blocker
                                 </p>
diff --git a/scripts/pi-hole/php/sidebar.php b/scripts/pi-hole/php/sidebar.php
index 1d474901..43aeceef 100644
--- a/scripts/pi-hole/php/sidebar.php
+++ b/scripts/pi-hole/php/sidebar.php
@@ -5,7 +5,7 @@
             <!-- Sidebar user panel -->
             <div class="user-panel">
                 <div class="pull-left image">
-                    <img src="img/logo.svg" alt="Pi-hole logo">
+                    <img class="logo-img" src="img/logo.svg" alt="Pi-hole logo">
                 </div>
                 <div class="pull-left info">
                     <p>Status</p>