diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 03bc7b3608c..58219c1dda0 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -205,6 +205,29 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
     this.dispatch("search-autocomplete:after-complete", "search-term");
 
     this.appEvents.on("dom:clean", this, "_cleanDom");
+
+    // Allow first notification to be dismissed on a click anywhere
+    if (
+      !this.get("currentUser.read_first_notification") &&
+      !this.get("currentUser.enforcedSecondFactor")
+    ) {
+      this._dismissFirstNotification = e => {
+        if (
+          !e.target.closest("#current-user") &&
+          !e.target.closest(".ring-backdrop") &&
+          !this.currentUser.get("read_first_notification") &&
+          !this.currentUser.get("enforcedSecondFactor")
+        ) {
+          this.eventDispatched(
+            "header:dismiss-first-notification-mask",
+            "header"
+          );
+        }
+      };
+      document.addEventListener("click", this._dismissFirstNotification, {
+        once: true
+      });
+    }
   },
 
   _cleanDom() {
@@ -225,6 +248,8 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
 
     cancel(this._scheduledRemoveAnimate);
     window.cancelAnimationFrame(this._scheduledMovingAnimation);
+
+    document.removeEventListener("click", this._dismissFirstNotification);
   },
 
   buildArgs() {
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 4910913a4eb..65caab48103 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -532,6 +532,24 @@ export default createWidget("header", {
     }
   },
 
+  headerDismissFirstNotificationMask() {
+    // Dismiss notifications
+    this.store
+      .findStale(
+        "notification",
+        {
+          recent: true,
+          silent: this.currentUser.enforcedSecondFactor,
+          limit: 5
+        },
+        { cacheKey: "recent-notifications" }
+      )
+      .refresh();
+    // Update UI
+    this.state.ringBackdrop = false;
+    this.scheduleRerender();
+  },
+
   headerKeyboardTrigger(msg) {
     switch (msg.type) {
       case "search":