--- a/toolkit/content/aboutTelemetry.css
+++ b/toolkit/content/aboutTelemetry.css
@@ -46,19 +46,23 @@ body {
 
 .heading > h3 {
   margin: 0;
   padding-bottom: 12px;
 }
 
 #ping-type {
   align-self: center;
+  pointer-events: all;
+  cursor: pointer;
 }
 
-.older-ping, .newer-ping {
+#older-ping, #newer-ping, #ping-date {
+  pointer-events: all;
+  -moz-user-select: none;
   cursor: pointer;
 }
 
 .controls {
   display: flex;
   justify-content: space-between;
 }
 
@@ -113,16 +117,18 @@ body {
 .category-name {
   pointer-events: none;
 }
 
 .main-content {
   width: 100%;
   font-size: 18px;
   line-height:1.6;
+  z-index: 1;
+  position: relative;
 }
 
 #page-description {
   border: 1px solid threedshadow;
   margin: 0px;
   padding: 10px;
   line-height: 1.2;
 }
@@ -148,21 +154,33 @@ body {
 }
 
 #ping-explanation > span:hover {
   color: var(--in-content-page-color);
   border-bottom-width: 2px;
   border-bottom-style: solid;
 }
 
+#ping-picker.hidden {
+  display: none;
+}
+
 #ping-picker {
+  position: absolute;
+  z-index: 2;
+  top: 40px;
+  right: 40px;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
   display: flex;
+  padding: 24px;
   flex-direction: column;
-  border-top: 1px solid var(--in-content-header-border-color);
-  padding: 12px 0px;
+  background-color: white;
+  border: 1px solid var(--in-content-header-border-color);
+  margin: 12px 0px;
 }
 
 #ping-picker .title {
   margin: 4px 0px;
 }
 
 #ping-source-picker {
   margin-left: 5px;

--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -303,32 +303,43 @@ var PingPicker = {
     });
     document.getElementById("choose-ping-id").addEventListener("change", () => {
       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.addEventListener("click", (ev) => {
+      if (ev.target.querySelector("#ping-picker")) {
+        document.getElementById("ping-picker").classList.add("hidden");
+      }
+    });
     document.getElementById("choose-payload")
             .addEventListener("change", () => displayPingData(gPingData));
     document.getElementById("scalars-processes")
             .addEventListener("change", () => displayPingData(gPingData));
     document.getElementById("keyed-scalars-processes")
             .addEventListener("change", () => displayPingData(gPingData));
     document.getElementById("histograms-processes")
             .addEventListener("change", () => displayPingData(gPingData));
     document.getElementById("keyed-histograms-processes")
             .addEventListener("change", () => displayPingData(gPingData));
     document.getElementById("events-processes")
             .addEventListener("change", () => displayPingData(gPingData));
+    Array.from(document.querySelectorAll(".change-ping")).forEach(el =>
+      el.addEventListener("click", () =>
+        document.getElementById("ping-picker").classList.remove("hidden"))
+    );
   },
 
   onPingSourceChanged() {
     this.update();
   },
 
   onPingDisplayChanged() {
     this.update();
@@ -362,16 +373,19 @@ var PingPicker = {
     }
     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;
+    pingExplanation.querySelector(".change-ping").addEventListener("click", () =>
+      document.getElementById("ping-picker").classList.remove("hidden")
+    );
 
     GenericSubsection.deleteAllSubSections();
   },
 
   async update() {
     let viewCurrent = document.getElementById("ping-source-current").checked;
     let currentChanged = viewCurrent !== this.viewCurrentPingData;
     this.viewCurrentPingData = viewCurrent;

--- a/toolkit/content/aboutTelemetry.xhtml
+++ b/toolkit/content/aboutTelemetry.xhtml
@@ -21,20 +21,20 @@
     <script type="application/javascript"
             src="chrome://global/content/aboutTelemetry.js"/>
   </head>
 
   <body id="body" dir="&locale.dir;">
 
     <div id="categories">
       <div class="heading">
-        <span id="ping-type" hidden="true"></span>
+        <span id="ping-type" hidden="true" class="change-ping"></span>
         <div class="controls">
           <span id="older-ping" hidden="true">&lt;&lt;</span>
-          <span id="ping-date"></span>
+          <span id="ping-date" class="change-ping"></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>
@@ -88,60 +88,61 @@
         <span class="category-name">&aboutTelemetry.lateWritesSection;</span>
       </div>
       <div id="category-raw" class="category has-data" value="raw-ping-data-section">
           <span class="category-name">&aboutTelemetry.raw;</span>
       </div>
     </div>
 
     <div class="main-content">
+
+      <div id="ping-picker" class="hidden">
+        <div id="ping-source-picker">
+          <h4 class="title">&aboutTelemetry.pingDataSource;</h4>
+          <input type="radio" id="ping-source-current" name="choose-ping-source" value="current" checked="checked" />
+          &aboutTelemetry.showCurrentPingData;
+          <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
+          &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">
+          <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>
+      </div>
+
       <div class="header">
           <div id="sectionTitle" class="header-name">
               &aboutTelemetry.pageTitle;
           </div>
       </div>
+
       <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">
-            <h4 class="title">&aboutTelemetry.pingDataSource;</h4>
-            <input type="radio" id="ping-source-current" name="choose-ping-source" value="current" checked="checked" />
-            &aboutTelemetry.showCurrentPingData;
-            <input type="radio" id="ping-source-archive" name="choose-ping-source" value="archive" />
-            &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">
-            <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>
-        </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">
         <input type="checkbox" class="statebox"/>