diff --git a/db_lists.php b/db_lists.php
index 760942c2..f143f559 100644
--- a/db_lists.php
+++ b/db_lists.php
@@ -14,6 +14,9 @@ if(empty($_SESSION['token'])) {
 $token = $_SESSION['token'];
 
 ?>
+<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
+<span class="queries-permitted"></span>
+<span class="queries-blocked"></span>
 <!-- Send PHP info to JS -->
 <div id="token" hidden><?php echo $token ?></div>
 
@@ -22,22 +25,28 @@ $token = $_SESSION['token'];
     <h1>Compute Top Lists from the Pi-hole query database</h1>
 </div>
 
-
 <div class="row">
-    <div class="col-md-12">
-<!-- Date Input -->
-      <div class="form-group">
-        <label>Date and time range:</label>
-
-        <div class="input-group">
-          <div class="input-group-addon">
-            <i class="far fa-clock"></i>
+  <div class="col-md-12">
+    <div class="box">
+      <div class="box-header with-border">
+        <h3 class="box-title">
+          Select date and time range
+        </h3>
+      </div>
+      <div class="box-body">
+        <div class="row">
+          <div class="form-group col-md-12">
+            <div class="input-group">
+              <div class="input-group-addon">
+                <i class="far fa-clock"></i>
+              </div>
+              <input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
+            </div>
           </div>
-          <input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
         </div>
-        <!-- /.input group -->
       </div>
     </div>
+  </div>
 </div>
 
 <div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
diff --git a/db_queries.php b/db_queries.php
index 9775d1ba..bc883e34 100644
--- a/db_queries.php
+++ b/db_queries.php
@@ -22,22 +22,28 @@ $token = $_SESSION['token'];
     <h1>Specify date range to be queried from the Pi-hole query database</h1>
 </div>
 
-
 <div class="row">
-    <div class="col-md-12">
-<!-- Date Input -->
-      <div class="form-group">
-        <label>Date and time range:</label>
-
-        <div class="input-group">
-          <div class="input-group-addon">
-            <i class="far fa-clock"></i>
+  <div class="col-md-12">
+    <div class="box">
+      <div class="box-header with-border">
+        <h3 class="box-title">
+          Select date and time range
+        </h3>
+      </div>
+      <div class="box-body">
+        <div class="row">
+          <div class="form-group col-md-12">
+            <div class="input-group">
+              <div class="input-group-addon">
+                <i class="far fa-clock"></i>
+              </div>
+              <input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
+            </div>
           </div>
-          <input type="button" class="form-control pull-right" id="querytime" value="Click to select date and time range">
         </div>
-        <!-- /.input group -->
       </div>
     </div>
+  </div>
 </div>
 
 <div class="row">
diff --git a/index.php b/index.php
index cb57225e..a111880c 100644
--- a/index.php
+++ b/index.php
@@ -22,6 +22,11 @@
         }
     }
 ?>
+<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
+<span class="queries-permitted"></span>
+<span class="queries-blocked"></span>
+<span class="graphs-grid"></span>
+<span class="graphs-ticks"></span>
 <!-- Small boxes (Stat box) -->
 <div class="row">
     <div class="col-lg-3 col-sm-6">
@@ -82,10 +87,6 @@
     <div class="col-md-12">
     <div class="box" id="queries-over-time">
         <div class="box-header with-border">
-        <span class="queries-permitted"></span>
-        <span class="queries-blocked"></span>
-        <span class="graphs-grid"></span>
-        <span class="graphs-ticks"></span>
           <h3 class="box-title">Total queries over last <?php echo getinterval(); ?> hours</h3>
         </div>
         <div class="box-body">
diff --git a/scripts/pi-hole/js/db_lists.js b/scripts/pi-hole/js/db_lists.js
index 6db4417b..0a18a4e7 100644
--- a/scripts/pi-hole/js/db_lists.js
+++ b/scripts/pi-hole/js/db_lists.js
@@ -66,6 +66,8 @@ function escapeHtml(text) {
     return map[m];
   });
 }
+var blockedColor = $(".queries-blocked").css("background-color");
+var permittedColor = $(".queries-permitted").css("background-color");
 
 function updateTopClientsChart() {
   $("#client-frequency .overlay").show();
@@ -154,7 +156,7 @@ function updateTopDomainsChart() {
             percentage.toFixed(1) +
             "% of " +
             sum +
-            '"> <div class="progress-bar progress-bar-blue" style="width: ' +
+            '"> <div class="progress-bar queries-blocked" style="width: ' +
             percentage +
             '%"></div> </div> </td> </tr> '
         );
@@ -201,7 +203,7 @@ function updateTopAdsChart() {
             percentage.toFixed(1) +
             "% of " +
             sum +
-            '"> <div class="progress-bar progress-bar-blue" style="width: ' +
+            '"> <div class="progress-bar queries-permitted" style="width: ' +
             percentage +
             '%"></div> </div> </td> </tr> '
         );