--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -30,19 +30,41 @@ body {
   left: 0;
 }
 
 #category-raw.selected {
    background-color: var(--in-content-category-background-active);
 }
 
 .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) {
   display: none;
 }
 
 .category {
   cursor: pointer;
@@ -127,19 +149,24 @@ body {
 
 #ping-explanation > span:hover {
   color: var(--in-content-page-color);
   border-bottom-width: 2px;
   border-bottom-style: solid;
 }
 
 #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 {
   margin-left: 5px;
   margin-bottom: 10px;
 }
 
 .data-section:not(.has-data),

--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -275,20 +275,21 @@ var Settings = {
   convertStringToLink(string) {
     return "<a href=\"\" class=\"change-data-choices-link\">" + string + "</a>";
   },
 };
 
 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());
     }
 
     let displays = document.getElementsByName("choose-ping-display");
     for (let el of displays) {
       el.addEventListener("change", () => this.onPingDisplayChanged());
     }
 
@@ -296,17 +297,20 @@ var PingPicker = {
       this._updateCurrentPingData();
     });
 
     document.getElementById("choose-ping-week").addEventListener("change", () => {
       this._renderPingList();
       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")
             .addEventListener("click", () => this._movePingIndex(-1));
     document.getElementById("older-ping")
             .addEventListener("click", () => this._movePingIndex(1));
     document.getElementById("choose-payload")
             .addEventListener("change", () => displayPingData(gPingData));
@@ -328,23 +332,47 @@ var PingPicker = {
 
   onPingDisplayChanged() {
     this.update();
   },
 
   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 pingDate = document.getElementById("ping-date");
+    pingDate.textContent = pingName;
+    pingDate.setAttribute("title", pingName);
 
-    let explanation = bundle.formatStringFromName("pingExplanation", [pingLink, pingName], 2);
+    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();
   },
 
   async update() {
     let viewCurrent = document.getElementById("ping-source-current").checked;
     let currentChanged = viewCurrent !== this.viewCurrentPingData;
     this.viewCurrentPingData = viewCurrent;
 
@@ -446,48 +474,92 @@ var PingPicker = {
     let pingSelector = document.getElementById("choose-ping-id");
     removeAllChildNodes(pingSelector);
 
     let weekRange = this._getSelectedWeek();
     let pings = this._archivedPings.filter(
       (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() {
     if (this.viewCurrentPingData) return "current";
 
     let pingSelector = document.getElementById("choose-ping-id");
     let selected = pingSelector.selectedOptions.item(0);
     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);
     return selected.getAttribute("value");
   },
 
   _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);
     const ping = this._archivedPings[newIndex];
 
     const weekIndex = this._weeks.findIndex(
       (week) => ping.timestampCreated >= week.startDate.getTime() &&
                 ping.timestampCreated < week.endDate.getTime());

--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -21,17 +21,22 @@
     <script type="application/javascript"
             src="chrome://global/content/aboutTelemetry.js"/>
   </head>
 
   <body id="body" dir="&locale.dir;">
 
     <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>
       </div>
       <div class="category" value="general-data-section">
         <span class="category-name">&aboutTelemetry.generalDataSection;</span>
       </div>
       <div class="category" value="environment-data-section">
@@ -96,57 +101,46 @@
       <div id="home" class="tab active">
 
         <h3 id="page-subtitle"></h3>
         <p id="home-explanation"></p>
         <p id="ping-explanation"></p>
 
         <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>
-          <table>
-              <tr>
-                  <th>&aboutTelemetry.payloadChoiceHeader;</th>
-              </tr>
-              <tr>
-                  <td>
-                      <select id="choose-payload">
-                      </select>
-                  </td>
-              </tr>
-          </table>
+          <div>
+            <h4 class="title">&aboutTelemetry.payloadChoiceHeader;</h4>
+            <select id="choose-payload"></select>
+          </div>
         </div>
       </div>
 
       <div id="raw-ping-data-section" class="tab" hidden="true">
         <pre id="raw-ping-data"></pre>
       </div>
 
       <section id="general-data-section" class="tab data-section expanded" hidden="true">

--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.dtd
@@ -24,27 +24,31 @@ Raw JSON
 Show subsession data
 ">
 
 <!ENTITY aboutTelemetry.choosePing "
 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
 ">
 
 <!ENTITY aboutTelemetry.generalDataSection "
   General Data
 ">
 

--- a/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties
+++ b/toolkit/locales/en-US/chrome/global/aboutTelemetry.properties
@@ -18,16 +18,18 @@ homeExplanation = Telemetry is %1$S and 
 pingExplanation = Each piece of information is sent bundled into %1$S. You are looking at the %2$S ping.
 
 pingExplanationLink = pings
 
 telemetryEnabled = enabled
 
 telemetryDisabled = disabled
 
+telemetryPingTypeAll = all
+
 telemetryLogTitle = Telemetry Log
 
 telemetryLogHeadingId = Id
 
 telemetryLogHeadingTimestamp = Timestamp
 
 telemetryLogHeadingData = Data