diff --git a/db_graph.php b/db_graph.php
index c010ef33..55d72d97 100644
--- a/db_graph.php
+++ b/db_graph.php
@@ -17,49 +17,60 @@ $token = $_SESSION['token'];
 <!-- Send PHP info to JS -->
 <div id="token" hidden><?php echo $token ?></div>
 
-<!-- Title -->
 <div class="page-header">
     <h1>Compute graphical statistics 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 id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
-    Depending on how large of a range you specified, the request may time out while Pi-hole tries to retrieve all the data.<br/><span id="err"></span>
+  </div>
 </div>
 
 <div class="row">
-    <div class="col-md-12">
+  <div class="col-md-12">
+    <div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
+        Depending on how large of a range you specified, the request may time out while Pi-hole tries to retrieve all the data.<br/><span id="err"></span>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
     <div class="box" id="queries-over-time">
-        <div class="box-header with-border">
-          <h3 class="box-title">Queries over the selected time period</h3>
-        </div>
-        <div class="box-body">
-          <div class="chart">
-            <canvas id="queryOverTimeChart" width="800" height="250"></canvas>
+      <div class="box-header with-border">
+        <h3 class="box-title">
+          Queries over the selected time period
+        </h3>
+      </div>
+      <div class="box-body">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="chart">
+              <canvas id="queryOverTimeChart" width="800" height="250"></canvas>
+            </div>
           </div>
         </div>
-        <div class="overlay" hidden="true">
-          <i class="fa fa-sync fa-spin"></i>
-        </div>
-        <!-- /.box-body -->
       </div>
     </div>
+  </div>
 </div>
 
 <script src="scripts/vendor/daterangepicker.js"></script>
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
index 14c46de7..c9ef5839 100644
--- a/scripts/pi-hole/js/queries.js
+++ b/scripts/pi-hole/js/queries.js
@@ -257,12 +257,14 @@ $(document).ready(function () {
           break;
         default:
           blocked = false;
-          colorClass = "text-black";
+          colorClass = false;
           fieldtext = "Unknown (" + parseInt(data[4]) + ")";
           buttontext = "";
       }
 
-      $(row).addClass(colorClass);
+      if(colorClass !== false) {
+        $("td:eq(4)", row).addClass(colorClass);
+      }
       $("td:eq(4)", row).html(fieldtext);
       $("td:eq(6)", row).html(buttontext);
 
@@ -344,7 +346,6 @@ $(document).ready(function () {
         replytext = "-";
       }
 
-      $("td:eq(5)", row).addClass("text-black");
       $("td:eq(5)", row).html(replytext);
 
       if (data.length > 7 && data[7] > 0) {
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 8714c134..116f3e99 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -254,34 +254,6 @@
     text-decoration: underline;
 }
 
-.text-black {
-    color: #000 !important;
-}
-
-.text-green-light {
-    color: #7fff00 !important;
-}
-
-.text-green {
-    color: #080 !important;
-}
-
-.text-orange {
-    color: #ffa500 !important;
-}
-
-.text-red {
-    color: #f00 !important;
-}
-
-.text-vivid-blue {
-    color: #36f !important;
-}
-
-td.highlight {
-    background-color: #ff0 !important;
-}
-
 code.breakall {
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
index db2db37a..8bb78da5 100644
--- a/style/themes/default-dark.css
+++ b/style/themes/default-dark.css
@@ -39,6 +39,7 @@ h4 {
 .table > tfoot > tr.even:hover {
   background-color: #1e2226;
 }
+.table-bordered,
 .table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
 .table-bordered > tfoot > tr > th,
@@ -53,12 +54,6 @@ h4 {
   border: 0;
   color: #bec5cb;
 }
-.dataTables_wrapper select {
-  border-radius: 4px;
-  background-color: #353c42;
-  border: 0;
-  color: #bec5cb;
-}
 .dataTables_paginate .pagination li > a {
   background-color: #353c42;
   border-color: #353c42;
@@ -385,4 +380,70 @@ code {
 	color: #bec5cb;
 	background-color: #353c42;
 	border-radius: 4px;
+}
+
+/* Used in the Query Log table */
+.text-green-light {
+  color: #5ca314 !important;
+}
+.text-green {
+  color: #007e47 !important;
+}
+.text-orange {
+  color: #b1720c !important;
+}
+.text-red {
+  color: #bd2c19 !important;
+}
+.text-vivid-blue {
+  color: #007997 !important;
+}
+td.highlight {
+  background-color: yellow;
+}
+.btn-default {
+  box-shadow: none;
+  background-color: #3e464c;
+  color: #bec5cb;
+  border: 1px solid #353c42;
+}
+
+/* Used by the long-term pages */
+.daterangepicker {
+	background-color: #3e464c;
+	border-radius: 4px;
+	border: 1px solid #353c42;
+}
+.daterangepicker .ranges li:hover {
+	background-color: #353c42;
+}
+.daterangepicker .ranges li.active {
+	background-color: #1e2226; /* Color also used in table pagination */
+}
+.daterangepicker .calendar-table {
+	background-color: #3e464c;
+	border-radius: 4px;
+	border: 1px solid #353c42;
+}
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+	background-color: #485158;
+}
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+	background-color: #1e2226;
+}
+.daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.in-range:hover {
+	background-color: #225e92;
+}
+.daterangepicker td.in-range {
+	background-color: #1e2226;
+	color: #bec5cb;
+}
+select, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+	width: 50px;
+	margin: 0 auto;
+	background: #eee;
+	border: 1px solid #eee;
+	padding: 2px;
+	outline: 0;
+	font-size: 12px;
 }
\ No newline at end of file
diff --git a/style/themes/default-light.css b/style/themes/default-light.css
index c13b40a4..7b60c670 100644
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -171,3 +171,32 @@
 .progress {
   background-color: #eee;
 }
+
+/* Used in the Query Log table */
+.text-black {
+  color: #000 !important;
+}
+
+.text-green-light {
+  color: #7fff00 !important;
+}
+
+.text-green {
+  color: #080 !important;
+}
+
+.text-orange {
+  color: #ffa500 !important;
+}
+
+.text-red {
+  color: #f00 !important;
+}
+
+.text-vivid-blue {
+  color: #36f !important;
+}
+
+td.highlight {
+  background-color: #ff0 !important;
+}
\ No newline at end of file