diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 096d3b935..861799d01 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -542,7 +542,7 @@ import {
   fetchNotifications,
   fetchUnreadCount,
   isLoadingMessage,
-  markRead,
+  markRead as markNotificationRead,
   notifications,
   markAllRead,
   hasMore,
@@ -597,6 +597,14 @@ const togglePref = async (pref) => {
   }
 }
 
+const markRead = async (id) => {
+  await markNotificationRead(id)
+  if (selectedTab.value === 'unread') {
+    const index = notifications.value.findIndex((n) => n.id === id)
+    if (index !== -1) notifications.value.splice(index, 1)
+  }
+}
+
 const approve = async (id, nid) => {
   const token = getToken()
   if (!token) return