diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index 786d4e8..9f50c7b 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -5,11 +5,11 @@
     </a>
   </p>
   <p class="header-date notification">
-    <i ng-show="vm.notifications.length > 0" class="badge"></i>
+    <i ng-show="vm.newNotifications.length > 0" class="badge"></i>
     <i class="fa fa-bell" ng-click="showNotification = !showNotification"></i>
     <div class="notification-panel" ng-show="showNotification">
       <ul>
-        <li ng-repeat="n in vm.notifications">
+        <li ng-repeat="n in vm.notifications" ng-click="vm.viewNotification(n)" ng-class="{viewed: n.viewed}">
           <b>{{n.model}}</b><br>
           <i>{{n.msg.object.name}} status is {{n.msg.object.backend_status}}</i>
         </li>
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
index 0df150c..2ff7ce1 100644
--- a/src/app/core/header/header.scss
+++ b/src/app/core/header/header.scss
@@ -17,20 +17,26 @@
 
   .notification-panel {
     position: absolute;
-    background: darken(grey, 20);
-    right: 0;
+    background: darken(grey, 5);
+    right: 10px;
     top: 60px;
     border: 1px solid darken(grey, 35);
+    max-height: 200px;
+    overflow-y: scroll;
 
     ul {
       margin: 0;
-      margin-right: 10px;
+      padding: 0;
       list-style: none;
-      padding: 10px 5px 0;
 
       li {
+        padding: 10px;
         border-bottom: 1px solid darken(grey, 35);
         color: #fff;
+
+        &.viewed {
+          background: darken(grey, 20);
+        }
       }
     }
   }
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index 06c4984..140abff 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -3,10 +3,15 @@
 import {IStoreService} from '../../datasources/stores/slices.store';
 import {IWSEvent} from '../../datasources/websocket/global';
 
+interface INotification extends IWSEvent {
+  viewed?: boolean;
+}
+
 class HeaderController {
   static $inject = ['SynchronizerStore'];
   public title: string;
-  public notifications: IWSEvent[] = [];
+  public notifications: INotification[] = [];
+  public newNotifications: INotification[] = [];
 
   constructor(
     private syncStore: IStoreService
@@ -16,11 +21,22 @@
     this.syncStore.query()
       .subscribe(
         (event: IWSEvent) => {
-          console.log(event);
-          this.notifications.push(event);
+          this.notifications.unshift(event);
+          this.newNotifications = this.getNewNotifications(this.notifications);
         }
       );
   }
+
+  public viewNotification = (notification: INotification) => {
+    notification.viewed = true;
+    this.newNotifications = this.getNewNotifications(this.notifications);
+  };
+
+  private getNewNotifications = (notifications: INotification[]) => {
+    return this.notifications.filter((n: INotification) => {
+      return !n.viewed;
+    });
+  };
 }
 
 export const xosHeader: angular.IComponentOptions = {