diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index d777cfe5f..0cc643516 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -12,7 +12,7 @@
         <counter-icon icon="bell" :count="unreadNotificationsCount" danger />
       </base-button>
     </template>
-    <template #popover>
+    <template #popover="{ closeMenu }">
       <div class="notifications-menu-popover">
         <notification-list :notifications="notifications" @markAsRead="markAsRead" />
       </div>
@@ -25,7 +25,12 @@
           </nuxt-link>
         </ds-flex-item>
         <ds-flex-item class="notifications-link-container-item" :width="{ base: '100%' }" centered>
-          <base-button ghost primary @click="markAllAsRead" data-test="markAllAsRead-button">
+          <base-button
+            ghost
+            primary
+            @click="markAllAsRead(closeMenu)"
+            data-test="markAllAsRead-button"
+          >
             {{ $t('notifications.markAllAsRead') }}
           </base-button>
         </ds-flex-item>
@@ -74,11 +79,12 @@ export default {
         this.$toast.error(error.message)
       }
     },
-    async markAllAsRead() {
+    async markAllAsRead(closeMenu) {
       if (!this.hasNotifications) {
         return
       }
 
+      closeMenu()
       try {
         await this.$apollo.mutate({
           mutation: markAllAsReadMutation(this.$i18n),