diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index e3db43e14..386035ea2 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -357,7 +357,7 @@ When("mention {string} in the text", mention => {
 });
 
 Then("the notification gets marked as read", () => {
-  cy.get(".post.createdAt")
+  cy.get(".notifications-menu-popover .notification")
     .first()
     .should("have.class", "read");
 });
diff --git a/webapp/components/notifications/Notification/Notification.vue b/webapp/components/notifications/Notification/Notification.vue
index 31b61be40..33f06d041 100644
--- a/webapp/components/notifications/Notification/Notification.vue
+++ b/webapp/components/notifications/Notification/Notification.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-space :class="[{ read: notification.read }, notification]" margin-bottom="x-small">
+  <ds-space :class="{ read: notification.read, notification: true}" margin-bottom="x-small">
     <client-only>
       <ds-space margin-bottom="x-small">
         <hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 8dc496efc..9059df502 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -46,8 +46,8 @@ export default {
           variables,
         })
         if (!(markAsRead && markAsRead.read === true)) return
-        this.notifications = this.notifications.filter(n => {
-          return n.from.id !== markAsRead.from.id
+        this.notifications = this.notifications.map(n => {
+          return (n.from.id === markAsRead.from.id) ? markAsRead : n
         })
       } catch (err) {
         throw new Error(err)