diff --git a/src/components/NotificationsCenter/Notification.tsx b/src/components/NotificationsCenter/Notification.tsx
index 3d9fc44d1..456e14d80 100644
--- a/src/components/NotificationsCenter/Notification.tsx
+++ b/src/components/NotificationsCenter/Notification.tsx
@@ -7,10 +7,29 @@ import { ReadNotificationDocument } from './ReadNotification.graphql';
 
 interface NotificationProps {
   notification: NotificationFragment;
+  onReadComplete?: () => void;
 }
 
-export function Notification({ notification }: NotificationProps) {
-  const [markAsRead] = useMutation(ReadNotificationDocument);
+export function Notification({
+  notification,
+  onReadComplete,
+}: NotificationProps) {
+  const [markAsRead] = useMutation(ReadNotificationDocument, {
+    onCompleted: () => {
+      onReadComplete?.();
+    },
+    // update: onUpdateChangeFragment({
+    //   id: 'notifications',
+    //   fragment: NotificationListFragmentDoc,
+    //   updater: (cached) => {
+    //     return {
+    //       ...cached,
+    //       totalUnread: 11,
+    //     };
+    //   },
+    // }),
+  });
+
   const { id, unread, content, createdAt } = notification;
 
   return (
diff --git a/src/components/NotificationsCenter/NotificationList.graphql b/src/components/NotificationsCenter/NotificationList.graphql
index 90cec0c7f..0cd7acad2 100644
--- a/src/components/NotificationsCenter/NotificationList.graphql
+++ b/src/components/NotificationsCenter/NotificationList.graphql
@@ -1,9 +1,13 @@
 query NotificationList($input: NotificationListInput) {
   notifications(input: $input) {
-    ...Pagination
-    totalUnread
-    items {
-      ...notification
-    }
+    ...notificationList
+  }
+}
+
+fragment notificationList on NotificationList {
+  ...Pagination
+  totalUnread
+  items {
+    ...notification
   }
 }
diff --git a/src/components/NotificationsCenter/NotificationsCenter.tsx b/src/components/NotificationsCenter/NotificationsCenter.tsx
index 7e05464ba..2dba33382 100644
--- a/src/components/NotificationsCenter/NotificationsCenter.tsx
+++ b/src/components/NotificationsCenter/NotificationsCenter.tsx
@@ -17,10 +17,13 @@ export const NotificationCenter = () => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const isPopoverOpen = Boolean(anchorEl);
 
-  const { data, loadMore, loading } = useListQuery(NotificationListDocument, {
-    pollInterval: 60_000,
-    listAt: (data) => data.notifications,
-  });
+  const { data, loadMore, loading, refetch } = useListQuery(
+    NotificationListDocument,
+    {
+      pollInterval: 60_000,
+      listAt: (data) => data.notifications,
+    }
+  );
 
   const notifications = useMemo(() => (data ? data.items : []), [data]);
 
@@ -62,7 +65,11 @@ export const NotificationCenter = () => {
           }}
         >
           {notifications.map((notification) => (
-            <Notification key={notification.id} notification={notification} />
+            <Notification
+              key={notification.id}
+              notification={notification}
+              onReadComplete={() => void refetch()}
+            />
           ))}
           {data?.hasMore && (
             <ProgressButton progress={loading} onClick={() => loadMore()}>