diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index b327754..786d4e8 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -4,4 +4,16 @@
       {{vm.title}}
     </a>
   </p>
+  <p class="header-date notification">
+    <i ng-show="vm.notifications.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">
+          <b>{{n.model}}</b><br>
+          <i>{{n.msg.object.name}} status is {{n.msg.object.backend_status}}</i>
+        </li>
+      </ul>
+    </div>
+  </p>
 </header>
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
new file mode 100644
index 0000000..0df150c
--- /dev/null
+++ b/src/app/core/header/header.scss
@@ -0,0 +1,37 @@
+xos-header {
+  .badge {
+    display: block;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    border: 4px solid red;
+    background: transparent;
+    position: absolute;
+    right: 15px;
+    top: 18px;
+  }
+
+  .fa {
+    cursor: pointer;
+  }
+
+  .notification-panel {
+    position: absolute;
+    background: darken(grey, 20);
+    right: 0;
+    top: 60px;
+    border: 1px solid darken(grey, 35);
+
+    ul {
+      margin: 0;
+      margin-right: 10px;
+      list-style: none;
+      padding: 10px 5px 0;
+
+      li {
+        border-bottom: 1px solid darken(grey, 35);
+        color: #fff;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/core/header/header.spec.ts b/src/app/core/header/header.spec.ts
index 7c00602..0191a87 100644
--- a/src/app/core/header/header.spec.ts
+++ b/src/app/core/header/header.spec.ts
@@ -4,12 +4,19 @@
 import 'angular-mocks';
 import {xosHeader} from './header';
 import {StyleConfig} from '../../config/style.config';
+import {Subject} from 'rxjs';
 
 describe('header component', () => {
   beforeEach(() => {
     angular
       .module('xosHeader', ['app/core/header/header.html'])
-      .component('xosHeader', xosHeader);
+      .component('xosHeader', xosHeader)
+      .service('SynchronizerStore', function(){
+        const events = new Subject();
+        this.query = () => {
+          return events.asObservable();
+        };
+      });
     angular.mock.module('xosHeader');
   });
 
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index c2e4c41..06c4984 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -1,10 +1,25 @@
+import './header.scss';
 import {StyleConfig} from '../../config/style.config';
+import {IStoreService} from '../../datasources/stores/slices.store';
+import {IWSEvent} from '../../datasources/websocket/global';
 
 class HeaderController {
+  static $inject = ['SynchronizerStore'];
   public title: string;
+  public notifications: IWSEvent[] = [];
 
-  constructor() {
+  constructor(
+    private syncStore: IStoreService
+  ) {
     this.title = StyleConfig.projectName;
+
+    this.syncStore.query()
+      .subscribe(
+        (event: IWSEvent) => {
+          console.log(event);
+          this.notifications.push(event);
+        }
+      );
   }
 }
 
diff --git a/src/app/datasources/helpers/store.helpers.ts b/src/app/datasources/helpers/store.helpers.ts
index dfb1e7a..1a2b0ab 100644
--- a/src/app/datasources/helpers/store.helpers.ts
+++ b/src/app/datasources/helpers/store.helpers.ts
@@ -10,6 +10,7 @@
   public updateCollection(event: IWSEvent, subject: BehaviorSubject<any>): BehaviorSubject<any> {
     const collection: any[] = subject.value;
     const index: number = _.findIndex(collection, (i) => {
+      // NOTE evaluate to use event.msg.pk
       return i.id === event.msg.object.id;
     });
     const exist: boolean = index > -1;
diff --git a/src/app/datasources/index.ts b/src/app/datasources/index.ts
index 4473541..535937b 100644
--- a/src/app/datasources/index.ts
+++ b/src/app/datasources/index.ts
@@ -4,6 +4,7 @@
 import {WebSocketEvent} from './websocket/global';
 import {SliceStore} from './stores/slices.store';
 import {StoreHelpers} from './helpers/store.helpers';
+import {SynchronizerStore} from './stores/synchronizer.store';
 
 export const xosRest = 'xosDataSources';
 
@@ -17,4 +18,5 @@
 angular
   .module('xosDataSources')
   .service('StoreHelpers', StoreHelpers)
+  .service('SynchronizerStore', SynchronizerStore)
   .service('SlicesStore', SliceStore);
diff --git a/src/app/datasources/stores/synchronizer.store.ts b/src/app/datasources/stores/synchronizer.store.ts
new file mode 100644
index 0000000..598d23c
--- /dev/null
+++ b/src/app/datasources/stores/synchronizer.store.ts
@@ -0,0 +1,26 @@
+/// <reference path="../../../../typings/index.d.ts"/>
+
+import {Subject} from 'rxjs/Rx';
+import {IWSEvent, IWSEventService} from '../websocket/global';
+
+export class SynchronizerStore {
+  static $inject = ['WebSocket'];
+  private _notifications: Subject<IWSEvent> = new Subject();
+  constructor(
+    private webSocket: IWSEventService
+  ) {
+    this.webSocket.list()
+      .filter((e: IWSEvent) => {
+        return e.msg.changed_fields.indexOf('backend_status') > -1;
+      })
+      .subscribe(
+        (event: IWSEvent) => {
+          this._notifications.next(event);
+        }
+      );
+  }
+
+  query() {
+    return this._notifications.asObservable();
+  }
+}
diff --git a/src/index.html b/src/index.html
index 591a249..0034022 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
     <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
   </head>
 
   <body ng-app="app">
diff --git a/src/index.scss b/src/index.scss
index 3d155ca..8813c49 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,3 @@
-
-
 html, body, #root {
   margin: 0;
   height: 100%;
@@ -51,6 +49,13 @@
   margin: 1rem;
 }
 
+.header-date {
+  flex: 1;
+  text-align: right;
+  margin: 1rem;
+  color: white;
+}
+
 .footer {
   padding: 0.5rem;
   font-size: 1rem;
diff --git a/src/index.spec.js b/src/index.spec.js
index 8c19f76..3aaa277 100644
--- a/src/index.spec.js
+++ b/src/index.spec.js
@@ -1,4 +1,5 @@
 const context = require.context('./app', true, /\.(js|ts|tsx)$/);
 context.keys().forEach(function(f) {
+  // console.log(f);
   context(f);
 });