diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 8c739086f..2726ea1c5 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -13,7 +13,9 @@
             <div *ngFor="let group of groups">
                 <div class="all-caps-label flex-align-items-center">
                     <div>{{ group.date }}</div>
-                    <div [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">View all</div>
+                    <div class="view-all" [hidden]="(hasUnreadNotifications$ | async) === false" (click)="markAllAsRead($event)">
+                        View all
+                    </div>
                 </div>
 
                 <div
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss
index ee9d945fe..ae5488b69 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.scss
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss
@@ -20,6 +20,9 @@
 
             .view-all {
                 cursor: pointer;
+                &:hover {
+                    color: var(--iqser-primary);
+                }
             }
         }
 
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts
index 1a8cfd154..fb91a2e35 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -48,8 +48,13 @@ export class NotificationsComponent implements OnInit {
 
     async markAllAsRead($event): Promise<void> {
         $event.stopPropagation();
-        const notifications = await this._notificationsService.getNotifications(false).toPromise();
-        await this._readNotifications(notifications);
+        const notifications = this._notifications$.getValue();
+        await this._notificationsService
+            .toggleNotificationRead(
+                notifications.map(n => n.id),
+                true,
+            )
+            .toPromise();
         await this._loadData();
     }
 
@@ -59,12 +64,6 @@ export class NotificationsComponent implements OnInit {
         await this._loadData();
     }
 
-    private async _readNotifications(notifications: Notification[]): Promise<void> {
-        for (const notification of notifications) {
-            await this._notificationsService.toggleNotificationRead([notification.id], true).toPromise();
-        }
-    }
-
     private async _loadData(): Promise<void> {
         const notifications = await this._notificationsService.getNotifications(false).toPromise();
         this._notifications$.next(notifications);