diff --git a/app/javascript/vue/navigation/notifications/notification_item.vue b/app/javascript/vue/navigation/notifications/notification_item.vue
index 9ab899648..15aea8d55 100644
--- a/app/javascript/vue/navigation/notifications/notification_item.vue
+++ b/app/javascript/vue/navigation/notifications/notification_item.vue
@@ -1,15 +1,17 @@
 <template>
-  <div class="sci-navigation--notificaitons-flyout-notification">
+  <div class="sci-navigation--notificaitons-flyout-notification hover:bg-sn-super-light-grey !px-2 !-mx-2">
     <div class="flex item-center">
-      <div class="sci-navigation--notificaitons-flyout-notification-date">
-        {{ notification.attributes.created_at }}
-      </div>
+      <a :href="lastBreadcrumbUrl" @click="toggleRead(true); closeFlyout()" class="hover:no-underline text-black hover:text-black grow">
+        <div class="sci-navigation--notificaitons-flyout-notification-date">
+          {{ notification.attributes.created_at }}
+        </div>
+      </a>
       <div class="ml-auto cursor-pointer" @click="toggleRead()">
         <div v-if="!notification.attributes.checked" class="w-2.5 h-2.5 bg-sn-coral rounded-full cursor-pointer"></div>
-        <div v-else class="w-2.5 h-2.5 border-2 border-sn-grey rounded-full border-solid cursor-pointer"></div>
+        <div v-else class="w-2.5 h-2.5 border-2 border-sn-grey rounded-full border-solid cursor-pointer hover:border-sn-coral"></div>
       </div>
     </div>
-    <a :href="lastBreadcrumbUrl" @click="toggleRead(true)" class="hover:no-underline text-black hover:text-black">
+    <a :href="lastBreadcrumbUrl" @click="toggleRead(true); closeFlyout()" class="hover:no-underline text-black hover:text-black">
       <div class="sci-navigation--notificaitons-flyout-notification-title"
           v-html="notification.attributes.title"
           :data-seen="notification.attributes.checked"></div>
@@ -42,6 +44,9 @@ export default {
     }
   },
   methods: {
+    closeFlyout() {
+      this.$emit('close');
+    },
     toggleRead(check = false) {
       const params = {};
       if (!this.notification.attributes.checked || check) {
diff --git a/app/javascript/vue/navigation/notifications/notifications_flyout.vue b/app/javascript/vue/navigation/notifications/notifications_flyout.vue
index 8f21e3c0d..880aa6133 100644
--- a/app/javascript/vue/navigation/notifications/notifications_flyout.vue
+++ b/app/javascript/vue/navigation/notifications/notifications_flyout.vue
@@ -28,7 +28,7 @@
       >
       {{ i18n.t('nav.notifications.read') }}
       </div>
-      <div class="py-4 ml-auto cursor-pointer" @click="markAllNotificationsAsRead">
+      <div v-if="activeTab !== 'read'" class="py-2 ml-auto cursor-pointer" @click="markAllNotificationsAsRead">
         {{ i18n.t('nav.notifications.read_all') }}
       </div>
     </div>
@@ -39,12 +39,14 @@
       </div>
       <NotificationItem v-for="notification in todayNotifications" :key="notification.type_of + '-' + notification.id"
         @updateNotification="updateNotification"
+        @close="$emit('close')"
         :notification="notification" />
       <div class="sci-navigation--notificaitons-flyout-subtitle" v-if="olderNotifications.length">
         {{ i18n.t('nav.notifications.older') }}
       </div>
       <NotificationItem v-for="notification in olderNotifications" :key="notification.type_of + '-' + notification.id"
         @updateNotification="updateNotification"
+        @close="$emit('close')"
         :notification="notification" />
       <div class="next-page-loader">
         <img src="/images/medium/loading.svg" v-if="loadingPage" />