--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -232,22 +232,28 @@ body {
 }
 
 #histograms, #thread-hang-stats>div {
   overflow: hidden;
 }
 
 .histogram {
   float: left;
-  border: 1px solid gray;
   white-space: nowrap;
   padding: 10px;
   position: relative; /* required for position:absolute of the contained .copy-node */
+  padding: 12px 20px 12px 20px;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 2px;
+  margin-bottom: 24px;
+  margin-right: 24px;
+  min-height: 284px;
 }
 
+
 body[dir="rtl"] .histogram {
   float: right;
 }
 
 .histogram-title {
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
@@ -278,18 +284,23 @@ body[dir="rtl"] .histogram {
   font-family: monospace;
 }
 
 body[dir="rtl"] .bar {
   float: right;
 }
 
 .bar-inner {
-  background-color: DeepSkyBlue;
-  border: 1px solid #0000b0;
+  background-color: #0095DD;
+  border: 1px solid #00539F;
+  border-radius: 2px;
+}
+
+.bar:nth-child(even) .long-label  {
+  margin-bottom: 1em;
 }
 
 th, td, table {
   text-align: start;
   border-collapse: collapse;
 }
 
 table {

--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -24,17 +24,17 @@ XPCOMUtils.defineLazyModuleGetter(this, 
 
 const Telemetry = Services.telemetry;
 const bundle = Services.strings.createBundle(
   "chrome://global/locale/aboutTelemetry.properties");
 const brandBundle = Services.strings.createBundle(
   "chrome://branding/locale/brand.properties");
 
 // Maximum height of a histogram bar (in em for html, in chars for text)
-const MAX_BAR_HEIGHT = 18;
+const MAX_BAR_HEIGHT = 8;
 const MAX_BAR_CHARS = 25;
 const PREF_TELEMETRY_SERVER_OWNER = "toolkit.telemetry.server_owner";
 const PREF_TELEMETRY_ENABLED = "toolkit.telemetry.enabled";
 const PREF_DEBUG_SLOW_SQL = "toolkit.telemetry.debugSlowSql";
 const PREF_SYMBOL_SERVER_URI = "profiler.symbolicationUrl";
 const DEFAULT_SYMBOL_SERVER_URI = "http://symbolapi.mozilla.org";
 const PREF_FHR_UPLOAD_ENABLED = "datareporting.healthreport.uploadEnabled";
 
@@ -1316,21 +1316,22 @@ var Histogram = {
     // If the last label is not the longest string, alignment will break a little
     let labelPadTo = 0;
     if (aHgram.values.length) {
       labelPadTo = String(aHgram.values[aHgram.values.length - 1][0]).length;
     }
     let maxBarValue = aOptions.exponential ? this.getLogValue(aHgram.max) : aHgram.max;
 
     for (let [label, value] of aHgram.values) {
+      label = String(label);
       let barValue = aOptions.exponential ? this.getLogValue(value) : value;
 
       // Create a text representation: <right-aligned-label> |<bar-of-#><value>  <percentage>
       text += EOL
-              + " ".repeat(Math.max(0, labelPadTo - String(label).length)) + label // Right-aligned label
+              + " ".repeat(Math.max(0, labelPadTo - label.length)) + label // Right-aligned label
               + " |" + "#".repeat(Math.round(MAX_BAR_CHARS * barValue / maxBarValue)) // Bar
               + "  " + value // Value
               + "  " + Math.round(100 * value / aHgram.sample_count) + "%"; // Percentage
 
       // Construct the HTML labels + bars
       let belowEm = Math.round(MAX_BAR_HEIGHT * (barValue / maxBarValue) * 10) / 10;
       let aboveEm = MAX_BAR_HEIGHT - belowEm;
 
@@ -1342,16 +1343,20 @@ var Histogram = {
       barDiv.appendChild(document.createTextNode(value ? value : "\u00A0"));
 
       // Create the blue bar
       let bar = document.createElement("div");
       bar.className = "bar-inner";
       bar.style.height = belowEm + "em";
       barDiv.appendChild(bar);
 
+      // Add a special class to move the text down to prevent text overlap
+      if (label.length > 3) {
+          bar.classList.add("long-label");
+      }
       // Add bucket label
       barDiv.appendChild(document.createTextNode(label));
 
       aDiv.appendChild(barDiv);
     }
 
     return text.substr(EOL.length); // Trim the EOL before the first line
   },
@@ -2355,18 +2360,16 @@ function displayRichPingData(ping, updat
   let payloadSelect = document.getElementById("choose-payload");
   let payloadOption = payloadSelect.selectedOptions.item(0);
   let payloadIndex = payloadOption.getAttribute("value");
 
   if (payloadIndex > 0) {
     payload = ping.payload.childPayloads[payloadIndex - 1];
   }
 
-  console.log(payload);
-
   // Show chrome hang stacks
   ChromeHangs.render(payload);
 
   // Show telemetry log.
   TelLog.render(payload);
 
   // Show thread hang stats
   ThreadHangStats.render(payload);