diff --git a/ui/shared/NotificationList.jsx b/ui/shared/NotificationList.jsx
index 0516d60c438..f0ad6780110 100644
--- a/ui/shared/NotificationList.jsx
+++ b/ui/shared/NotificationList.jsx
@@ -25,10 +25,21 @@ class NotificationList extends React.Component {
   }
 
   render() {
-    const { notifications, clearNotification } = this.props;
+    const { notifications, clearNotification, clearAllNotifications } = this.props;
 
     return (
       <ul id="notification-box" className="list-unstyled">
+        {notifications.length > 0 && (
+          <li>
+            <Button
+              onClick={() => clearAllNotifications()}
+              className="clear-all-notifications w-100 mb-1"
+              size="sm"
+            >
+              Clear all notifications
+            </Button>
+          </li>
+        )}
         {notifications.map((notification, idx) => (
           <li key={notification.created}>
             <Alert variant={notification.severity}>
@@ -73,6 +84,7 @@ NotificationList.propTypes = {
     }),
   ).isRequired,
   clearNotification: PropTypes.func.isRequired,
+  clearAllNotifications: PropTypes.func.isRequired,
 };
 
 export default NotificationList;
diff --git a/ui/shared/Notifications.jsx b/ui/shared/Notifications.jsx
index adcee624fe6..55cbe0e40b6 100644
--- a/ui/shared/Notifications.jsx
+++ b/ui/shared/Notifications.jsx
@@ -7,11 +7,15 @@ const Notifications = () => {
   const clearNotification = useNotificationStore(
     (state) => state.clearNotification,
   );
+  const clearAllNotifications = useNotificationStore(
+    (state) => state.clearAllOnScreenNotifications,
+  );
 
   return (
     <NotificationList
       notifications={notifications}
       clearNotification={clearNotification}
+      clearAllNotifications={clearAllNotifications}
     />
   );
 };