diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 921391a..b06ab37 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -823,6 +823,11 @@ section { position: relative; padding: 120px 40px; }
   font-weight: 600;
   font-size: 13px;
 }
+.notif-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 .notif-mark-all {
   background: transparent;
   border: none;
diff --git a/frontend/components/NotificationsBell.tsx b/frontend/components/NotificationsBell.tsx
index 85cc489..80e1964 100644
--- a/frontend/components/NotificationsBell.tsx
+++ b/frontend/components/NotificationsBell.tsx
@@ -22,6 +22,7 @@ import {
   fetchNotifications,
   fetchUnreadCount,
   markAllRead,
+  clearNotifications,
   markNotificationRead,
   type Notification,
 } from "@/lib/notifications";
@@ -115,6 +116,18 @@ export function NotificationsBell({ userId }: { userId: string }) {
     await markAllRead(supabase, userId);
   }
 
+  async function onClearAll() {
+    const confirmed = window.confirm(
+      "Clear all notifications? This cannot be undone.",
+    );
+    if (!confirmed) return;
+
+    setItems([]);
+    setUnread(0);
+    const supabase = createClient();
+    await clearNotifications(supabase, userId);
+  }
+
   const hasItems = items.length > 0;
   const badge = unread > 99 ? "99+" : unread > 0 ? String(unread) : null;
 
@@ -146,15 +159,26 @@ export function NotificationsBell({ userId }: { userId: string }) {
         <div className="notif-panel" role="menu">
           <div className="notif-panel-head">
             <span className="notif-panel-title">Notifications</span>
-            {unread > 0 && (
-              <button
-                type="button"
-                className="notif-mark-all"
-                onClick={onMarkAll}
-              >
-                Mark all read
-              </button>
-            )}
+            <span className="notif-panel-actions">
+              {unread > 0 && (
+                <button
+                  type="button"
+                  className="notif-mark-all"
+                  onClick={onMarkAll}
+                >
+                  Mark all read
+                </button>
+              )}
+              {hasItems && (
+                <button
+                  type="button"
+                  className="notif-mark-all"
+                  onClick={onClearAll}
+                >
+                  Clear all
+                </button>
+              )}
+            </span>
           </div>
 
           {loading && <div className="notif-state">Loading…</div>}
diff --git a/frontend/lib/notifications.ts b/frontend/lib/notifications.ts
index 6176ddd..19bda2d 100644
--- a/frontend/lib/notifications.ts
+++ b/frontend/lib/notifications.ts
@@ -178,6 +178,18 @@ export async function markAllRead(
   if (error) console.warn("[markAllRead]", error);
 }
 
+/** Delete all notifications for the current user. */
+export async function clearNotifications(
+  supabase: DBClient,
+  userId: string,
+): Promise<void> {
+  const { error } = await supabase
+    .from("notifications" as never)
+    .delete()
+    .eq("user_id", userId);
+  if (error) console.warn("[clearNotifications]", error);
+}
+
 /* ---------------------------------------------------------------- */
 /* Writers — call from the action that produced the event.           */
 /* ---------------------------------------------------------------- */