diff --git a/client/src/components/notification-center/notification-center.container.jsx b/client/src/components/notification-center/notification-center.container.jsx
index b73c12688..ae12552f3 100644
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -132,15 +132,22 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
     markAllNotificationsRead()
       .then(() => {
         const timestamp = new Date().toISOString();
-        setNotifications((prev) =>
-          prev.map((notif) =>
-            notif.read === null && notif.associationid === userAssociationId ? { ...notif, read: timestamp } : notif
-          )
-        );
+        setNotifications((prev) => {
+          const updatedNotifications = prev.map((notif) =>
+            notif.read === null && notif.associationid === userAssociationId
+              ? {
+                  ...notif,
+                  read: timestamp
+                }
+              : notif
+          );
+          // Filter out read notifications if in unread only mode
+          return showUnreadOnly ? updatedNotifications.filter((notif) => !notif.read) : updatedNotifications;
+        });
       })
       .catch((e) => console.error(`Error marking all notifications read: ${e?.message || ""}`))
       .finally(() => setIsLoading(false));
-  }, [markAllNotificationsRead, userAssociationId]);
+  }, [markAllNotificationsRead, userAssociationId, showUnreadOnly]);
 
   const handleNotificationClick = useCallback(
     (notificationId) => {
@@ -148,14 +155,18 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
       markNotificationRead({ variables: { id: notificationId } })
         .then(() => {
           const timestamp = new Date().toISOString();
-          setNotifications((prev) =>
-            prev.map((notif) => (notif.id === notificationId && !notif.read ? { ...notif, read: timestamp } : notif))
-          );
+          setNotifications((prev) => {
+            const updatedNotifications = prev.map((notif) =>
+              notif.id === notificationId && !notif.read ? { ...notif, read: timestamp } : notif
+            );
+            // Filter out the read notification if in unread only mode
+            return showUnreadOnly ? updatedNotifications.filter((notif) => !notif.read) : updatedNotifications;
+          });
         })
         .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`))
         .finally(() => setIsLoading(false));
     },
-    [markNotificationRead]
+    [markNotificationRead, showUnreadOnly]
   );
 
   useEffect(() => {