diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index 9f50c7b..8359ab3 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.newNotifications.length > 0" class="badge"></i>
-    <i class="fa fa-bell" ng-click="showNotification = !showNotification"></i>
-    <div class="notification-panel" ng-show="showNotification">
+    <i ng-if="vm.newNotifications.length > 0" class="badge"></i>
+    <i class="fa fa-bell" ng-click="vm.showNotification = !vm.showNotification"></i>
+    <div class="notification-panel" ng-show="vm.showNotification">
       <ul>
-        <li ng-repeat="n in vm.notifications" ng-click="vm.viewNotification(n)" ng-class="{viewed: n.viewed}">
+        <li ng-repeat="n in vm.notifications track by $index" 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.spec.ts b/src/app/core/header/header.spec.ts
index 0191a87..1f2c1aa 100644
--- a/src/app/core/header/header.spec.ts
+++ b/src/app/core/header/header.spec.ts
@@ -1,29 +1,107 @@
 /// <reference path="../../../../typings/index.d.ts" />
 
+import * as $ from 'jquery';
+import 'jasmine-jquery';
 import * as angular from 'angular';
 import 'angular-mocks';
-import {xosHeader} from './header';
+import {xosHeader, INotification} from './header';
 import {StyleConfig} from '../../config/style.config';
 import {Subject} from 'rxjs';
 
+let element, scope: angular.IRootScopeService, compile: ng.ICompileService, isolatedScope;
+const events = new Subject();
+const sendEvent = (event: INotification): void => {
+  events.next(event);
+};
+const MockStore = function() {
+  this.query = () => {
+    return events.asObservable();
+  };
+};
+const sampleNotification = {
+  model: 'TestModel',
+  msg: {
+    changed_fields: ['backend_status'],
+    pk: 1,
+    object: {
+      name: 'TestName',
+      backend_status: 'Test Status'
+    }
+  }
+};
+
 describe('header component', () => {
   beforeEach(() => {
     angular
       .module('xosHeader', ['app/core/header/header.html'])
       .component('xosHeader', xosHeader)
-      .service('SynchronizerStore', function(){
-        const events = new Subject();
-        this.query = () => {
-          return events.asObservable();
-        };
-      });
+      .service('SynchronizerStore', MockStore);
     angular.mock.module('xosHeader');
   });
 
-  it('should render the appropriate title', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
-    const element = $compile('<xos-header></xos-header>')($rootScope);
+  beforeEach(angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
+    scope = $rootScope;
+    compile = $compile;
+    element = $compile('<xos-header></xos-header>')($rootScope);
     $rootScope.$digest();
+    isolatedScope = element.isolateScope();
+
+    // clear notifications
+    isolatedScope.notifications = [];
+  }));
+
+  it('should render the appropriate title', () => {
     const header = element.find('a');
     expect(header.html().trim()).toEqual(StyleConfig.projectName);
-  }));
+
+    const badge = $('i.badge', element);
+    expect(badge.length).toBe(0);
+  });
+
+  it('should display a badge if there are unread notifications', () => {
+    sendEvent(sampleNotification);
+    scope.$digest();
+
+    const badge = $('i.badge', element);
+    expect(badge.length).toBe(1);
+  });
+
+  it('should not display a badge if there are notifications have been read', () => {
+    sendEvent(angular.extend({viewed: true}, sampleNotification));
+    scope.$digest();
+
+    const badge = $('i.badge', element);
+    expect(badge.length).toBe(0);
+  });
+
+  it('should display a list of notifications', () => {
+    isolatedScope.showNotification = true;
+    sendEvent(angular.extend({viewed: true}, sampleNotification));
+    sendEvent(angular.extend({viewed: false}, sampleNotification));
+    scope.$digest();
+
+    const badge = $('i.badge', element);
+    expect(badge.length).toBe(1);
+    const notificationPanel = $('.notification-panel', element);
+    expect(notificationPanel.length).toBe(1);
+
+    expect($('.notification-panel li', element).length).toBe(2);
+  });
+
+  it('should add the viewed class to an readed notification', () => {
+    isolatedScope.showNotification = true;
+    sendEvent(angular.extend({viewed: true}, sampleNotification));
+    scope.$digest();
+    expect($('.notification-panel li:first-child', element)).toHaveClass('viewed');
+    scope.$digest();
+  });
+
+  it('should not add the viewed class to an unread notification', () => {
+    isolatedScope.showNotification = true;
+    sendEvent(angular.extend({viewed: false}, sampleNotification));
+    scope.$digest();
+    expect($('.notification-panel li:first-child', element)).not.toHaveClass('viewed');
+    scope.$digest();
+  });
+
 });
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index c91ef5f..20fbc3c 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -3,7 +3,7 @@
 import {IWSEvent} from '../../datasources/websocket/global';
 import {IStoreService} from '../../datasources/stores/synchronizer.store';
 
-interface INotification extends IWSEvent {
+export interface INotification extends IWSEvent {
   viewed?: boolean;
 }