diff --git a/src/index.html b/src/index.html
index b476f27c..8642c551 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,21 +14,20 @@
 </head>
 <body id="checker" class="sans-serif charcoal bg-snow-muted">
   <div class="hidden js-metrics-notification-decline-warning metrics-notification-wrapper">
-    <button id="metrics-notification-warning-close" class="js-metrics-notification-warning-close">✕</button>
-    <span id="metrics-notification-decline-warning" class="metrics-notification-text">
-      We will limit collection of metrics to only "necessary" features:
-      <ul>
-        <li><bold>sessions</bold> - tracks when, how often, and how long users use your website</li>
-        <li><bold>views</bold> - allows for the views/pages accessed by a user to be tracked</li>
-      </ul>
-      See <a href="https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#features-for-consent">Countly's group_features</a> for more information.
-    </span>
+    <div class="metrics-notification-container">
+      <span id="metrics-notification-decline-warning" class="metrics-notification-text">
+        We will limit collection of metrics to only necessary features, 'sessions' and 'views'. See <a href="https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#features-for-consent">Countly's group_features</a> for more information.
+      </span>
+      <div class="metrics-notification-buttons">
+        <button id="metrics-notification-warning-close" class="js-metrics-notification-warning-close">✕&nbsp;Close</button>
+      </div>
+    </div>
   </div>
   <div class="hidden js-metrics-notification metrics-notification-wrapper">
-    <div id="metrics-notification-container">
+    <div class="metrics-notification-container">
       <span class="metrics-notification-text">We're collecting <a href="https://github.com/ipfs/ipfs-gui/issues/125">web-vitals, pageview, and other metrics</a> in order to improve and prioritize our work on IPFS and its public gateways.
         Please consent to the collection of these metrics to assist in our efforts!</span>
-      <div id="metrics-notification-buttons">
+      <div class="metrics-notification-buttons">
         <button id="metrics-notification-accept" class="js-metrics-notification-accept">☑&nbsp;Agree</button>
         <button id="metrics-notification-decline" class="js-metrics-notification-decline">Decline</button>
       </div>
@@ -66,7 +65,24 @@ <h1 class='f3 fw2 montserrat aqua ttu ma0'>Public Gateways</h1>
         </li>
       </ul>
     </div>
-		<div id="checker.stats" class="Stats monospace f6"></div>
+		<div id="checker.stats" class="Stats monospace f6">
+      <button class="cookieConsentToggle js-cookie-banner-toggle" aria-label="Edit cookie settings">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path d="M510.52 255.82c-69.97-.85-126.47-57.69-126.47-127.86-70.17
+            0-127-56.49-127.86-126.45-27.26-4.14-55.13.3-79.72 12.82l-69.13
+            35.22a132.221 132.221 0 0 0-57.79 57.81l-35.1 68.88a132.645 132.645 0 0
+            0-12.82 80.95l12.08 76.27a132.521 132.521 0 0 0 37.16 72.96l54.77
+            54.76a132.036 132.036 0 0 0 72.71 37.06l76.71 12.15c27.51 4.36 55.7-.11
+            80.53-12.76l69.13-35.21a132.273 132.273 0 0 0
+            57.79-57.81l35.1-68.88c12.56-24.64 17.01-52.58 12.91-79.91zM176
+            368c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32
+            32zm32-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33
+            32-32 32zm160 128c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32
+            32-14.33 32-32 32z"
+          />
+        </svg>
+      </button>
+    </div>
 		<div id="checker.results" class="Results monospace f6">
 			<div class="Node Header">
 				<div class="Status" title="Online status: is it possible to read data?" style="cursor: help">Online</div>
diff --git a/src/metrics.ts b/src/metrics.ts
index c0ddb1b6..ed16cffd 100644
--- a/src/metrics.ts
+++ b/src/metrics.ts
@@ -7,9 +7,10 @@ const declineWarning = document.querySelector('.js-metrics-notification-decline-
 const acceptButton = document.querySelector('.js-metrics-notification-accept')
 const declineButton = document.querySelector('.js-metrics-notification-decline')
 const declineWarningClose = document.querySelector('.js-metrics-notification-warning-close')
+const bannerToggle = document.querySelector('.js-cookie-banner-toggle')
 
 function addConsent (consent: string[]): void {
-  banner?.classList.add('hidden')
+  hideConsentBanner()
   Countly.add_consent(consent)
 
   if (Array.isArray(consent)) {
@@ -26,28 +27,46 @@ function addConsentEventHandler (): void {
 }
 
 function declineConsentEventHandler (): void {
-  acceptButton?.removeEventListener('click', addConsentEventHandler)
-  banner?.classList.add('hidden')
-  declineWarning?.classList.remove('hidden')
-
   addConsent(['necessary'])
+  hideConsentBanner()
+  displayDeclineWarning()
+}
+
+function displayDeclineWarning (): void {
+  declineWarning?.classList.remove('hidden')
+  bannerToggle?.setAttribute('disabled', '')
 }
 
 function declineWarningCloseEventHandler (): void {
   declineWarningClose?.removeEventListener('click', declineWarningCloseEventHandler)
   declineWarning?.classList.add('hidden')
+  bannerToggle?.removeAttribute('disabled')
+}
+
+function hideConsentBanner (): void {
+  acceptButton?.removeEventListener('click', addConsentEventHandler)
+  declineButton?.removeEventListener('click', declineConsentEventHandler)
+  banner?.classList.add('hidden')
+  bannerToggle?.removeAttribute('disabled')
 }
 
 /**
  * Display the consent banner and handle the user's choice
  */
 function displayConsentBanner (): void {
-  banner?.classList.remove('hidden')
-}
-function loadCountly (): void {
   acceptButton?.addEventListener('click', addConsentEventHandler)
   declineButton?.addEventListener('click', declineConsentEventHandler)
   declineWarningClose?.addEventListener('click', declineWarningCloseEventHandler)
+  banner?.classList.remove('hidden')
+  bannerToggle?.setAttribute('disabled', '')
+  declineWarning?.classList.add('hidden')
+}
+
+function bannerToggleEventHandler (): void {
+  displayConsentBanner()
+}
+function loadCountly (): void {
+  bannerToggle?.addEventListener('click', bannerToggleEventHandler)
   Countly.init({
     app_key: '3c2c0819434074fc4d339ddd8e112a1e741ecb72',
     url: 'https://countly.ipfs.io',
diff --git a/src/styles.css b/src/styles.css
index d64e242c..f3d062b6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -139,7 +139,7 @@ div.metrics-notification-wrapper {
   max-width: 1024px;
 }
 
-div#metrics-notification-container {
+div.metrics-notification-container {
   display: flex;
   align-items: center;
   gap: 0.5rem 5rem;
@@ -154,7 +154,8 @@ div.metrics-notification-wrapper .metrics-notification-text {
   order: 1;
   align-self: flex-start;
 }
-div.metrics-notification-wrapper #metrics-notification-buttons {
+
+div.metrics-notification-wrapper .metrics-notification-buttons {
   order: 3;
   align-self: center;
   align-items: center;
@@ -162,6 +163,7 @@ div.metrics-notification-wrapper #metrics-notification-buttons {
   display: flex;
   gap: 1rem;
 }
+
 div.metrics-notification-wrapper a {
   color: rgba(107, 196, 206, 1);
 }
@@ -178,18 +180,11 @@ div.metrics-notification-wrapper button {
 
 .metrics-notification-wrapper button#metrics-notification-accept {
   border: 1pt solid rgba(107, 196, 206, 1);
-  /* grid-column-start: 3; */
-}
-
-#metrics-notification-decline-warning ul {
-  list-style-type: none;
 }
 
 button#metrics-notification-warning-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 10px;
+  border: 1pt solid rgba(107, 196, 206, 1);
+  /* color: rgba(7, 58, 83, 1); */
 }
 
 @media (max-width: 1002px) {
@@ -201,8 +196,40 @@ button#metrics-notification-warning-close {
 	  padding: 0 2rem;
 	}
 
-  #metrics-notification-container {
+  .metrics-notification-container {
     display: flex;
     flex-direction: column;
   }
 }
+
+/**
+ * From https://unpkg.com/@beyonk/gdpr-cookie-consent-banner@9.1.0/dist/style.css
+ */
+.cookieConsentToggle {
+  width: 40px;
+  height: 40px;
+  will-change: transform;
+  padding: 9px;
+  border: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  background: white;
+  border-radius: 50%;
+  transition: 200ms;
+  opacity: 1;
+  z-index: 99980;
+  cursor: pointer;
+  margin: 0 1em 0 0;
+}
+
+.cookieConsentToggle:disabled {
+  cursor: default;
+}
+
+.cookieConsentToggle:hover:not(:disabled) {
+  color: white;
+  background: #69c4cd;
+}
+
+.cookieConsentToggle * {
+  fill: currentColor;
+}
