diff --git a/scripts/pi-hole/js/debug.js b/scripts/pi-hole/js/debug.js
index 1ed17b3bf..14ed46be3 100644
--- a/scripts/pi-hole/js/debug.js
+++ b/scripts/pi-hole/js/debug.js
@@ -40,6 +40,8 @@ function eventsource() {
     "message",
     function (e) {
       ta.append(e.data);
+      // scroll page to the bottom (to the last received data)
+      $("html, body").scrollTop($(document).height());
     },
     false
   );
@@ -49,6 +51,7 @@ function eventsource() {
     "error",
     function () {
       source.close();
+      $("#output").removeClass("loading");
     },
     false
   );
@@ -57,5 +60,6 @@ function eventsource() {
 $("#debugBtn").on("click", function () {
   $("#debugBtn").prop("disabled", true);
   $("#upload").prop("disabled", true);
+  $("#output").addClass("loading");
   eventsource();
 });
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 996cb3abd..2388325bc 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -758,7 +758,31 @@ table.dataTable tbody > tr > .selected {
 }
 
 #output {
+  position: relative;
   margin: 5px 0;
   min-height: 36px;
   padding: 4px 8px;
 }
+
+.loading::before {
+  content: " ";
+  position: absolute;
+  padding: 1em;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  line-height: 1;
+  background: rgba(35, 60, 85, 0.8);
+  box-shadow: 0 0 6px -3px rgba(0, 0, 0, 0.5);
+}
+.loading::after {
+  content: "\1F553\FE0E  Loading...";
+  position: absolute;
+  padding: 1em;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  color: #fff;
+  line-height: 1;
+  animation: 2s infinite Pulse steps(20);
+}
diff --git a/style/themes/default-light.css b/style/themes/default-light.css
index 5e3abc4ca..5ba436c4c 100644
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -220,8 +220,7 @@
   color: #093;
 }
 .log-yellow {
-  color: #e90;
-  font-weight: bold;
+  color: #f69600;
 }
 .log-blue {
   color: #04d;