diff --git a/toolkit/content/aboutTelemetry.css b/toolkit/content/aboutTelemetry.css
index 6a8ed2e244ea..8b8c030b1078 100644
--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -35,9 +35,31 @@ body {
 }
 
 .heading {
-  padding-inline-start: 15px;
-  padding-inline-end: 21px;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
   color: var(--in-content-category-text);
+  pointer-events: none;
+  padding: 12px 21px 15px 21px;
+  border-bottom: 1px solid var(--in-content-header-border-color);
+}
+
+.heading > h3 {
+  margin: 0;
+  padding-bottom: 12px;
+}
+
+#ping-type {
+  align-self: center;
+}
+
+.older-ping, .newer-ping {
+  cursor: pointer;
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
 }
 
 .category:not(.has-data) {
@@ -132,9 +154,14 @@ body {
 }
 
 #ping-picker {
-  margin-top: 10px;
-  border: 1px solid lightgrey;
-  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--in-content-header-border-color);
+  padding: 12px 0px;
+}
+
+#ping-picker .title {
+  margin: 4px 0px;
 }
 
 #ping-source-picker {
diff --git a/toolkit/content/aboutTelemetry.js b/toolkit/content/aboutTelemetry.js
index 21cca5ceedef..ad2d73f7b567 100644
--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -280,10 +280,11 @@ var Settings = {
 var PingPicker = {
   viewCurrentPingData: null,
   _archivedPings: null,
+  TYPE_ALL: bundle.GetStringFromName("telemetryPingTypeAll"),
 
   attachObservers() {
-    let elements = document.getElementsByName("choose-ping-source");
-    for (let el of elements) {
+    let pingSourceElements = document.getElementsByName("choose-ping-source");
+    for (let el of pingSourceElements) {
       el.addEventListener("change", () => this.onPingSourceChanged());
     }
 
@@ -301,7 +302,10 @@ var PingPicker = {
       this._updateArchivedPingData();
     });
     document.getElementById("choose-ping-id").addEventListener("change", () => {
-      this._updateArchivedPingData()
+      this._updateArchivedPingData();
+    });
+    document.getElementById("choose-ping-type").addEventListener("change", () => {
+      this.filterDisplayedPings();
     });
 
     document.getElementById("newer-ping")
@@ -333,13 +337,37 @@ var PingPicker = {
   render() {
     let pings = bundle.GetStringFromName("pingExplanationLink");
     let pingLink = "<a href=\"http://gecko.readthedocs.io/en/latest/toolkit/components/telemetry/telemetry/concepts/pings.html\">&quot;" + pings + "&quot;</a>";
-    let pingName = "<span class=\"change-ping\">" + this._getSelectedPingName() + "</span>";
+    let pingName = this._getSelectedPingName();
 
-    let explanation = bundle.formatStringFromName("pingExplanation", [pingLink, pingName], 2);
+    let pingDate = document.getElementById("ping-date");
+    pingDate.textContent = pingName;
+    pingDate.setAttribute("title", pingName);
+
+    let pingType = document.getElementById("ping-type");
+    let older = document.getElementById("older-ping");
+    let newer = document.getElementById("newer-ping");
+    if (pingName !== "current") {
+      pingType.hidden = false;
+      older.hidden = false;
+      newer.hidden = false;
+      pingType.textContent = this._getSelectedPingType();
+    } else {
+      pingType.hidden = true;
+      older.hidden = true;
+      newer.hidden = true;
+    }
+
+    if (pingName !== "current") {
+      pingName += ", " + this._getSelectedPingType();
+    }
+    let pingNameHtml = "<span class=\"change-ping\">" + pingName + "</span>";
+
+    let explanation = bundle.formatStringFromName("pingExplanation", [pingLink, pingNameHtml], 2);
     let pingExplanation = document.getElementById("ping-explanation");
 
     // eslint-disable-next-line no-unsanitized/property
     pingExplanation.innerHTML = explanation;
+
     GenericSubsection.deleteAllSubSections();
   },
 
@@ -451,21 +479,56 @@ var PingPicker = {
       (p) => p.timestampCreated >= weekRange.startDate.getTime() &&
              p.timestampCreated < weekRange.endDate.getTime());
 
+    let pingTypes = new Set();
+    pingTypes.add(this.TYPE_ALL);
     for (let p of pings) {
+      pingTypes.add(p.type);
       let date = new Date(p.timestampCreated);
       let text = shortDateString(date)
-                 + " " + shortTimeString(date)
-                 + " - " + p.type;
+                 + " " + shortTimeString(date);
 
       let option = document.createElement("option");
       let content = document.createTextNode(text);
       option.appendChild(content);
       option.setAttribute("value", p.id);
+      option.dataset.type = p.type;
       if (id && p.id == id) {
         option.selected = true;
       }
       pingSelector.appendChild(option);
     }
+    this._renderPingTypes(pingTypes);
+  },
+
+  filterDisplayedPings() {
+    let pingSelector = document.getElementById("choose-ping-id");
+    let typeSelector = document.getElementById("choose-ping-type");
+    let type = typeSelector.selectedOptions.item(0).value;
+    if (type == this.TYPE_ALL) {
+      Array.from(pingSelector.children).forEach((option) => option.hidden = false);
+      pingSelector.children[0].selected = true;
+    } else {
+      let first = true;
+      Array.from(pingSelector.children).forEach((option) => {
+        if (first && option.dataset.type == type) {
+          option.selected = true;
+          first = false;
+        }
+        option.hidden = option.dataset.type != type;
+      });
+    }
+    this._updateArchivedPingData();
+  },
+
+  _renderPingTypes(pingTypes) {
+    let pingTypeSelector = document.getElementById("choose-ping-type");
+    removeAllChildNodes(pingTypeSelector);
+    pingTypes.forEach((type) => {
+      let option = document.createElement("option");
+      option.appendChild(document.createTextNode(type));
+      option.setAttribute("value", type);
+      pingTypeSelector.appendChild(option);
+    });
   },
 
   _getSelectedPingName() {
@@ -476,6 +539,12 @@ var PingPicker = {
     return selected.textContent;
   },
 
+  _getSelectedPingType() {
+    let pingSelector = document.getElementById("choose-ping-id");
+    let selected = pingSelector.selectedOptions.item(0);
+    return selected.dataset.type;
+  },
+
   _getSelectedPingId() {
     let pingSelector = document.getElementById("choose-ping-id");
     let selected = pingSelector.selectedOptions.item(0);
@@ -483,6 +552,9 @@ var PingPicker = {
   },
 
   _movePingIndex(offset) {
+    if (this.viewCurrentPingData) {
+      return;
+    }
     const id = this._getSelectedPingId();
     const index = this._archivedPings.findIndex((p) => p.id == id);
     const newIndex = Math.min(Math.max(index + offset, 0), this._archivedPings.length - 1);
diff --git a/toolkit/content/aboutTelemetry.xhtml b/toolkit/content/aboutTelemetry.xhtml
index 93001895dc14..78b7f8e21a14 100644
--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -26,7 +26,12 @@
 
     <div id="categories">
       <div class="heading">
-        <h3>&aboutTelemetry.pageTitle;</h3>
+        <span id="ping-type" hidden="true"></span>
+        <div class="controls">
+          <span id="older-ping" hidden="true">&lt;&lt;</span>
+          <span id="ping-date"></span>
+          <span id="newer-ping" hidden="true">&gt;&gt;</span>
+        </div>
       </div>
       <div id="category-home" class="category has-data selected" value="home">
         <span class="category-name">Home</span>
@@ -101,47 +106,36 @@
 
         <div id="ping-picker">
           <div id="ping-source-picker">
-            &aboutTelemetry.pingDataSource;<br/>
+            <h4 class="title">&aboutTelemetry.pingDataSource;</h4>
             <input type="radio" id="ping-source-current" name="choose-ping-source" value="current" checked="checked" />
-            &aboutTelemetry.showCurrentPingData;<br />
+            &aboutTelemetry.showCurrentPingData;
             <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
-            &aboutTelemetry.showArchivedPingData;<br />
+            &aboutTelemetry.showArchivedPingData;
           </div>
           <div id="current-ping-picker">
             <input id="show-subsession-data" type="checkbox" checked="checked" />&aboutTelemetry.showSubsessionData;
           </div>
           <div id="archived-ping-picker" class="hidden">
-            &aboutTelemetry.choosePing;<br />
-            <button id="newer-ping" type="button">&aboutTelemetry.showNewerPing;</button>
-            <button id="older-ping" type="button">&aboutTelemetry.showOlderPing;</button><br />
-            <table>
-              <tr>
-                  <th>&aboutTelemetry.archiveWeekHeader;</th>
-                  <th>&aboutTelemetry.archivePingHeader;</th>
-              </tr>
-              <tr>
-                  <td>
-                      <select id="choose-ping-week">
-                      </select>
-                  </td>
-                  <td>
-                      <select id="choose-ping-id">
-                      </select>
-                  </td>
-              </tr>
-            </table>
+            <h4 class="title">&aboutTelemetry.choosePing;</h4>
+            <button class="older-ping" type="button">&aboutTelemetry.showOlderPing;</button>
+            <button class="newer-ping" type="button">&aboutTelemetry.showNewerPing;</button>
+            <div>
+              <h4 class="title">&aboutTelemetry.archiveWeekHeader;</h4>
+              <select id="choose-ping-week"></select>
+            </div>
+            <div>
+              <h4 class="title">&aboutTelemetry.archivePingType;</h4>
+              <select id="choose-ping-type"></select>
+            </div>
+            <div>
+              <h4 class="title">&aboutTelemetry.archivePingHeader;</h4>
+              <select id="choose-ping-id"></select>
+            </div>
+          </div>
+          <div>
+            <h4 class="title">&aboutTelemetry.payloadChoiceHeader;</h4>
+            <select id="choose-payload"></select>
           </div>
-          <table>
-              <tr>
-                  <th>&aboutTelemetry.payloadChoiceHeader;</th>
-              </tr>
-              <tr>
-                  <td>
-                      <select id="choose-payload">
-                      </select>
-                  </td>
-              </tr>
-          </table>
         </div>
       </div>
 
diff --git a/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd b/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
index da94ea5f13aa..9283435dbbdf 100644
--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
@@ -29,17 +29,21 @@ Choose ping:
 ">
 
 <!ENTITY aboutTelemetry.showNewerPing "
-&lt;&lt; Newer ping
+Newer ping &gt;&gt;
 ">
 
 <!ENTITY aboutTelemetry.showOlderPing "
-Older ping &gt;&gt;
+&lt;&lt; Older ping
 ">
 
 <!ENTITY aboutTelemetry.archiveWeekHeader "
 Week
 ">
 
+<!ENTITY aboutTelemetry.archivePingType "
+Ping Type
+">
+
 <!ENTITY aboutTelemetry.archivePingHeader "
 Ping
 ">
diff --git a/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties b/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties
index afc29511fc18..c7abede03505 100644
--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties
@@ -23,6 +23,8 @@ telemetryEnabled = enabled
 
 telemetryDisabled = disabled
 
+telemetryPingTypeAll = all
+
 telemetryLogTitle = Telemetry Log
 
 telemetryLogHeadingId = Id