diff --git a/app/index.html b/app/index.html
index 1b40ef9b2a..0a061ce95c 100644
--- a/app/index.html
+++ b/app/index.html
@@ -38,6 +38,9 @@
     <!-- Add your site or application content here -->
 
     <toast-notifications></toast-notifications>
+    <div class="navbar-pf-vertical">
+      <notification-drawer-wrapper></notification-drawer-wrapper>
+    </div>
     <div ng-view>
       <!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
       <nav class="navbar navbar-pf-alt top-header" role="navigation">
diff --git a/app/scripts/constants.js b/app/scripts/constants.js
index 1dfcc84f35..322e49e33a 100644
--- a/app/scripts/constants.js
+++ b/app/scripts/constants.js
@@ -90,7 +90,8 @@ angular.extend(window.OPENSHIFT_CONSTANTS, {
     service_catalog_landing_page: false,
     // Set to `true` when the template service broker is enabled for the cluster in master-config.yaml
     template_service_broker: false,
-    pod_presets: false
+    pod_presets: false,
+    events_in_notification_drawer: false
   },
 
   SAMPLE_PIPELINE_TEMPLATE: {
diff --git a/app/scripts/directives/notifications/notificationCounter.js b/app/scripts/directives/notifications/notificationCounter.js
index 7e0529b67f..f03c9ebb75 100644
--- a/app/scripts/directives/notifications/notificationCounter.js
+++ b/app/scripts/directives/notifications/notificationCounter.js
@@ -2,40 +2,94 @@
 
 angular
   .module('openshiftConsole')
-  .directive('notificationCounter', function() {
-    return {
-      restrict: 'AE',
-      scope: {},
-      controller:
-        function($scope, $routeParams, $rootScope, notifications) {
-        $scope.count = 0;
-        $scope.countDisplay = $scope.count;
+  .component('notificationCounter', {
+    templateUrl: 'views/directives/notifications/notification-counter.html',
+    bindings: {},
+    controller: [
+      '$routeParams',
+      '$rootScope',
+      'Constants',
+      'DataService',
+      function($routeParams, $rootScope, Constants, DataService) {
+        var ENABLE_EVENTS = _.get(Constants, 'ENABLE_TECH_PREVIEW_FEATURE.events_in_notification_drawer');
+        var counter = this;
         var drawerHidden = true;
 
-        $scope.onClick = function() {
-          $scope.$applyAsync(function() {
-            $scope.count = 0;
+        var rootScopeWatches = [];
+        // this one is treated separately from the rootScopeWatches as
+        // it may need to be updated outside of the lifecycle of init/destroy
+        var notificationListener;
+
+        var eventsWatcher;
+
+        var deregisterEventsWatch = function() {
+          if(eventsWatcher) {
+            DataService.unwatch(eventsWatcher);
+          }
+        };
+
+        var watchEvents = function(projectName, cb) {
+          if(projectName && ENABLE_EVENTS) {
+            eventsWatcher = DataService.watch('events', {namespace: projectName}, _.debounce(cb, 50), { skipDigest: true });
+          }
+        };
+
+        var watchNotifications = function(projectName, cb) {
+          if(!projectName) {
+            return;
+          }
+          notificationListener = $rootScope.$on('NotificationsService.onNotificationAdded', cb);
+        };
+
+        var deregisterNotificationListener = function() {
+          notificationListener && notificationListener();
+        };
+
+        var deregisterRootScopeWatches = function() {
+          _.each(rootScopeWatches, function(deregister) {
+            deregister();
           });
+        };
+
+        var toggleVisibility = function(projectName) {
+          if(!projectName) {
+            counter.hideCounter = true;
+          }
+          counter.showNewNotificationIndicator = true;
+        };
+
+        counter.onClick = function() {
           drawerHidden = !drawerHidden;
+          counter.showNewNotificationIndicator = false;
           $rootScope.$emit('notification-drawer:show', {
             drawerHidden: drawerHidden
           });
         };
 
-        // TODO: just need to know if there is a "new" notification worth viewing,
-        // don't need to give the user a ping for every time the watch returns data
-        var subscription = notifications.subscribe($routeParams.project, function(groups) {
-          $scope.groups = groups;
-          $scope.count++;
-          $scope.countDisplay = $scope.count < 100 ?
-                                  $scope.count:
-                                  '! !'; // TODO: a "too many!" indicator
-        });
-
-        $scope.$on('$destroy', function() {
-          notifications.unsubscribe(subscription);
-        });
-      },
-      templateUrl: 'views/directives/notifications/notification-counter.html'
-    };
+        var genericEventCallback = function() {
+          counter.showNewNotificationIndicator = true;
+        };
+
+        var reset = function() {
+          deregisterEventsWatch();
+          deregisterNotificationListener();
+          watchEvents($routeParams.project, genericEventCallback);
+          watchNotifications($routeParams.project, genericEventCallback);
+          toggleVisibility($routeParams.project);
+        };
+
+        counter.$onInit = function() {
+          reset();
+          rootScopeWatches.push($rootScope.$on("$routeChangeSuccess", function () {
+            reset();
+          }));
+        };
+
+        counter.$onDestroy = function() {
+          deregisterEventsWatch();
+          deregisterNotificationListener();
+          deregisterRootScopeWatches();
+        };
+      }
+    ]
   });
diff --git a/app/scripts/directives/notifications/notificationDrawerWrapper.js b/app/scripts/directives/notifications/notificationDrawerWrapper.js
index 896164cc1f..5719237934 100644
--- a/app/scripts/directives/notifications/notificationDrawerWrapper.js
+++ b/app/scripts/directives/notifications/notificationDrawerWrapper.js
@@ -3,35 +3,172 @@
 angular
   .module('openshiftConsole')
   // shim for communicationg with pfNotificationDrawer
-  .directive('notificationDrawerWrapper', function() {
-
-    var statusClasses = {
-      info: 'pficon pficon-info',
-      error: 'pficon pficon-error-circle-o',
-      warning: 'pficon pficon-warning-triangle-o',
-      ok: 'pficon pficon-ok'
-    };
-
-    var statuses = {
-      Normal: statusClasses.info,
-      Warning: statusClasses.warning
-      // more...
-    };
-
-    return {
-      restrict: 'AE',
-      scope: {},
-      controller: function($interval, $routeParams, $scope, $rootScope, DataService, notifications) {
-
-        angular.extend($scope, {
+  .component('notificationDrawerWrapper', {
+    templateUrl: 'views/directives/notifications/notification-drawer-wrapper.html',
+    controller: [
+      '$interval',
+      '$timeout',
+      '$routeParams',
+      '$rootScope',
+      'Constants',
+      'DataService',
+      'NotificationsService',
+      'EventCache',
+      function(
+        $interval,
+        $timeout,
+        $routeParams,
+        $rootScope,
+        Constants,
+        DataService,
+        NotificationsService,
+        EventCache) {
+
+        var ENABLE_EVENTS = _.get(Constants, 'ENABLE_TECH_PREVIEW_FEATURE.events_in_notification_drawer');
+        var drawer = this;
+
+        // global event watches
+        var rootScopeWatches = [];
+        // this one is treated separately from the rootScopeWatches as
+        // it may need to be updated outside of the lifecycle of init/destroy
+        var notificationListener;
+
+        var eventsWatcher;
+        var eventsFromWatch = [];
+        var internalNotifications = [];
+
+        var notificationGroupsMap = {};
+        var notificationGroups = [];
+
+        var addProjectToNotificationGroups = function(projectName) {
+          if(projectName && !notificationGroupsMap[projectName]) {
+            notificationGroupsMap[projectName] = {
+              heading: projectName,
+              notifications: []
+            };
+          }
+        };
+
+        var deregisterEventsWatch = function() {
+          if(eventsWatcher) {
+            DataService.unwatch(eventsWatcher);
+          }
+        };
+
+        var watchEvents = function(projectName, cb) {
+          if(projectName && ENABLE_EVENTS) {
+            eventsWatcher = DataService.watch('events', {namespace: projectName}, _.debounce(cb, 50), { skipDigest: true });
+          }
+        };
+
+        // NotificationService notifications are minimal, they do no necessarily contain projectName info.
+        // ATM tacking this on via watching the current project.
+        var watchNotifications = function(projectName, cb) {
+          if(!projectName) {
+            return;
+          }
+          notificationListener = $rootScope.$on('NotificationsService.onNotificationAdded', cb);
+        };
+
+        var deregisterNotificationListener = function() {
+          notificationListener && notificationListener();
+        };
+
+        var isImportantEvent = function(event) {
+          return event.type === 'Warning';
+          return true;
+        };
+
+        // notificationGroups[projectName]
+        var eventWatchCallback = function(eventData) {
+          var eventsByName = eventData.by('metadata.name');
+          console.log('events by name', eventsByName);
+          // process into the map
+          // TODO: Get NotificationService.onNotificationAdded in here.
+          _.each(eventsByName, function(event) {
+            if(isImportantEvent(event)) {
+              // TODO: deduplicate events?
+              // events in etcd should be deduplicated already, having the count incremented,
+              // however, we probably have to further deduplicate them.
+              notificationGroupsMap[event.metadata.namespace].notifications.push({
+                // TODO: will need cache to track read/unread
+                unread:  false, // !_.get(cachedUserActions, [namespace, uid, 'read'])
+                message: event.message,
+                timestamp: event.lastTimestamp,
+                metadata: event.metadata,
+                involvedObject: event.involvedObject,
+                status: event.type,
+                reason: event.reason,
+                actions: null
+              });
+            }
+          });
+          // sort map into array
+          notificationGroups = _.sortBy(notificationGroupsMap, function(group) {
+            group.open = false;
+            return group.heading;
+          });
+          _.first(notificationGroups).open = true;
+
+          $rootScope.$apply(function () {
+            drawer.notificationGroups = notificationGroups;
+          });
+        };
+
+        var notificationWatchCallback = function(event, notification) {
+          internalNotifications.push(notification);
+          console.log('Compare all notifications to the ones cached here');
+          console.log('local cache:', internalNotifications);
+          console.log('service cache', NotificationsService.getNotifications());
+          drawer.notificationGroups = [{
+            heading: 'Notifications 1 for (no proj!)',
+            notifications: internalNotifications
+          }, {
+            heading: 'Notifications 2 for (no proj!)',
+            notifications: NotificationsService.getNotifications()
+          }];
+        };
+
+        var deregisterRootScopeWatches = function() {
+          _.each(rootScopeWatches, function(deregister) {
+            deregister();
+          });
+        };
+
+        var toggleDrawerVisibility = function(projectName) {
+          if(!projectName) {
+            drawer.drawerHidden = true;
+          }
+        };
+
+        var statusClasses = {
+          info: 'pficon pficon-info',
+          error: 'pficon pficon-error-circle-o',
+          warning: 'pficon pficon-warning-triangle-o',
+          ok: 'pficon pficon-ok'
+        };
+
+        var statuses = {
+          Normal: statusClasses.info,
+          Warning: statusClasses.warning
+          // more...
+        };
+
+        angular.extend(drawer, {
           drawerHidden: true,
-          allowExpand: false, // doesnt seem necessary
+          allowExpand: true,
           drawerExpanded: false,
           drawerTitle: 'Notifications',
+          onClose: function() {
+            drawer.drawerHidden = true;
+          },
+          onClearAll: function() {
+            console.log('onClearAll');
+          },
           toggleShowDrawer: function() {
-            $scope.hideDrawer = !$scope.hideDrawer;
+            drawer.hideDrawer = !drawer.hideDrawer;
           },
-          notificationGroups: [],
+          notificationGroups: notificationGroups,
           headingInclude: 'views/directives/notifications/heading.html',
           subheadingInclude: 'views/directives/notifications/subheading.html',
           notificationBodyInclude: 'views/directives/notifications/notification-body.html',
@@ -39,12 +176,14 @@ angular
           // essentially functions to pass to the notification-body
           customScope: {
             clearAll: function(group) {
-              _.each(group.notifications, function(notification) {
-                notifications.markUnread(notification);
-              });
+              console.log('clearAll', group);
+              // _.each(group.notifications, function(notification) {
+              //   notifications.markUnread(notification);
+              // });
             },
             markRead: function(notification) {
-              notifications.markRead(notification);
+              console.log('markUnread', notification);
+              // notifications.markRead(notification);
             },
             getNotficationStatusIconClass: function(notification) {
               return statuses[notification.status] || statusClasses.info;
@@ -52,21 +191,37 @@ angular
           }
         });
 
-        // event from other nodes (counter) to signal the drawer to open/close
-        $rootScope.$on('notification-drawer:show', function(evt, data) {
-          $scope.$applyAsync(function() {
-            $scope.drawerHidden = data.drawerHidden;
-          });
-        });
+        var reset = function() {
+          addProjectToNotificationGroups($routeParams.project);
+          deregisterEventsWatch();
+          deregisterNotificationListener();
+          watchEvents($routeParams.project, eventWatchCallback);
+          watchNotifications($routeParams.project, notificationWatchCallback);
+          toggleDrawerVisibility($routeParams.project);
+        };
 
-        var subscription = notifications.subscribe($routeParams.project, function(notificationGroups) {
-          $scope.notificationGroups = notificationGroups[$routeParams.project] || [];
-        });
+        drawer.$onInit = function() {
+          reset();
+          // $routeChangeSuccess seems more reliable than $locationChangeSuccess:
+          // - it fires once on initial load. $locationChangeSuccess does not.
+          // - it waits for more object resolution (not a huge deal in this use case)
+          // - tracks route data instead of urls (args to callback fn)
+          rootScopeWatches.push($rootScope.$on("$routeChangeSuccess", function () {
+            reset();
+          }));
 
-        $scope.$on('$destroy', function() {
-          notifications.unsubscribe(subscription);
-        });
-      },
-      templateUrl: 'views/directives/notifications/notification-drawer-wrapper.html'
-    };
+          // event from other nodes (counter) to signal the drawer to open/close
+          rootScopeWatches.push($rootScope.$on('notification-drawer:show', function(evt, data) {
+            drawer.drawerHidden = data.drawerHidden;
+          }));
+        };
+
+        drawer.$onDestroy = function() {
+          deregisterNotificationListener();
+          deregisterEventsWatch();
+          deregisterRootScopeWatches();
+        };
+
+      }
+    ]
   });
diff --git a/app/scripts/services/notifications.js b/app/scripts/services/notifications.js
index bf50d03344..53ec1870cf 100644
--- a/app/scripts/services/notifications.js
+++ b/app/scripts/services/notifications.js
@@ -14,6 +14,7 @@ angular
       var save = function(data) {
         window[storageType].setItem(cacheKey, JSON.stringify(data));
       };
+      var debounceSave = _.debounce(save, 100);
 
       var cachedEvents = load();
       // pod  (kind)
@@ -21,7 +22,7 @@ angular
       //   - "(Normal) nodejs-mongo-8: Need to kill pod "  (type) name: message
       return {
         sort: function(type, reason, kind, name, message) {
-          var msg = `${name}: ${message}`;
+          var msg =  name + ': ' + message;  //`${name}: ${message}`;
           //var tier1 = `${kind} ${reason}`;
           cachedEvents[kind] = cachedEvents[kind] || {};
           cachedEvents[kind][reason] = cachedEvents[kind][reason] || {};
@@ -39,7 +40,7 @@ angular
           // if(!_.contains(cachedEvents[tier1][type], msg)) {
           //   cachedEvents[tier1][type].push(msg);
           // }
-          save(cachedEvents);
+          debounceSave(cachedEvents);
         }
       };
     })
@@ -55,28 +56,29 @@ angular
         window[storageType].setItem(cachedUserActionsKey, JSON.stringify(data));
       };
       var cachedProcessedEvents = {};
+      // TODO: verify these are correct
+      // this just sorts events by object type
+      var indexes = {
+        // Applications
+        DeploymentConfig: 0,
+        ReplicationController: 0,
+        ReplicaSet: 0,
+        Deployment: 0,
+        StatefulSet: 0,
+        Pod: 0,
+        Service: 0,
+        Route: 0,
+        HorizontalPodAutoscaler: 0,
+        Binding: 0,
+        // Builds
+        BuildConfig: 1,
+        Build: 1,
+        Pipeline: 1,
+        ImageStream: 1,
+        // Storage
+        PersistentVolumeClaim: 2
+      };
       var getTypeIndex = function(type) {
-        // TODO: verify these are correct
-        var indexes = {
-          // Applications
-          DeploymentConfig: 0,
-          ReplicationController: 0,
-          ReplicaSet: 0,
-          Deployment: 0,
-          StatefulSet: 0,
-          Pod: 0,
-          Service: 0,
-          Route: 0,
-          HorizontalPodAutoscaler: 0,
-          Binding: 0,
-          // Builds
-          BuildConfig: 1,
-          Build: 1,
-          Pipeline: 1,
-          ImageStream: 1,
-          // Storage
-          PersistentVolumeClaim: 2
-        };
         var index = indexes[type];
         if(typeof index !== 'number') {
           console.warn('MISSING INDEX:', type, APIService.kindToResource(type));
@@ -85,7 +87,8 @@ angular
         }
         return indexes[type];
       };
-      var isImportantEvent = function(event) {
+      // TODO: this will be used to filter out the events we don't need to care about.
+      var isImportantEvent = function() {
         console.log('isImportantEvent');
         return true;
       };
@@ -114,9 +117,9 @@ angular
         console.log('cache', cachedProcessedEvents);
         _.each(data.by('metadata.name'), function(event) {
           var namespace = event.involvedObject.namespace;
-          var type = event.type;
+          //var type = event.type;
           // TODO: type, reason, kind....
-          var name = event.involvedObject.name;
+          //var name = event.involvedObject.name;
           var uid = event.metadata.uid;
           var kind = event.involvedObject.kind;
           var index = getTypeIndex(kind);
@@ -140,7 +143,7 @@ angular
           if(!isImportantEvent(event)) {
             return;
           }
-          console.log('event to push', namespace, index, uid, event.message, event.lastTimestamp, event.metadata);
+          //console.log('event to push', namespace, index, uid, event.message, event.lastTimestamp, event.metadata);
           cachedProcessedEvents[namespace][index].notifications.push({
             unread:  !_.get(cachedUserActions, [namespace, uid, 'read']),
             message: event.message,
diff --git a/app/views/_project-page.html b/app/views/_project-page.html
index 6aa2d0dfd7..3cb68ae613 100644
--- a/app/views/_project-page.html
+++ b/app/views/_project-page.html
@@ -1,7 +1,3 @@
-<div class="navbar-pf-vertical">
-  <notification-drawer-wrapper></notification-drawer-wrapper>
-</div>
-
 <div ng-class="{'show-sidebar-right': renderOptions.showEventsSidebar}" class="wrap">
   <div class="sidebar-left collapse navbar-collapse navbar-collapse-1">
     <sidebar></sidebar>
diff --git a/app/views/directives/notifications/notification-body.html b/app/views/directives/notifications/notification-body.html
index fb034a4579..16a6ad8c89 100644
--- a/app/views/directives/notifications/notification-body.html
+++ b/app/views/directives/notifications/notification-body.html
@@ -1,8 +1,10 @@
-<div ng-class="{'expanded' : drawerExpanded}">
+<div ng-if="!drawerExpanded">
   <div
+    uib-dropdown
     class="dropdown pull-right dropdown-kebab-pf"
     ng-if="notification.actions && notification.actions.length > 0">
     <button
+      uib-dropdown-toggle
       class="btn btn-link dropdown-toggle"
       type="button"
       id="dropdownKebabRight"
@@ -11,30 +13,83 @@
       aria-expanded="true">
       <span class="fa fa-ellipsis-v"></span>
     </button>
-    <!--
-      actions go here if we want to use them
-      <ul class="dropdown-menu dropdown-menu-right">
-    -->
+    <ul
+      class="dropdown-menu dropdown-menu-right"
+      aria-labelledby="dropdownKebabRight">
+      <li
+        ng-repeat="action in notification.actions"
+        role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
+        ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
+        <a
+          ng-if="action.isSeparator !== true"
+          class="secondary-action"
+          title="{{action.title}}"
+          ng-click="$ctrl.customScope.handleAction(notification, action)">
+          {{action.name}}
+        </a>
+      </li>
+    </ul>
   </div>
   <span
-    ng-if="notification.status"
-    class="{{'pull-left ' + customScope.getNotficationStatusIconClass(notification)}}"
-    ng-click="customScope.markRead(notification)"></span>
+    class="{{'pull-left ' + $ctrl.customScope.getNotficationStatusIconClass(notification)}}"
+    ng-click="$ctrl.customScope.markRead(notification)"></span>
   <span
     class="drawer-pf-notification-message"
-    ng-click="customScope.markRead(notification)">{{notification.message}}</span>
-    <br />
-    <!-- TODO: eliminate, this is for filtering -->
-  <span style="font-size: 0.8em; color: #666;">
-    {{notification.status}},
-    {{notification.reason}},
-    {{notification.involvedObject.kind}},
-    {{notification.involvedObject.name}}
-  </span>
+    ng-click="$ctrl.customScope.markRead(notification)">{{notification.message}}</span>
   <div
     class="drawer-pf-notification-info"
-    ng-click="customScope.markRead(notification)">
+    ng-click="$ctrl.customScope.markRead(notification)">
     <span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>
     <span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
   </div>
 </div>
+<div ng-if="drawerExpanded" class="container-fluid">
+  <div class="row">
+    <div class="col-sm-6">
+      <span class="pull-left {{$ctrl.customScope.getNotficationStatusIconClass(notification)}}"></span>
+      <span
+        class="drawer-pf-notification-message notification-message"
+        tooltip-append-to-body="true"
+        tooltip-popup-delay="500"
+        tooltip-placement="bottom"
+        tooltip="{{notification.message}}">
+            {{notification.message}}
+      </span>
+    </div>
+    <div class="col-sm-6">
+      <div class="drawer-pf-notification-info">
+        <span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>
+        <span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
+      </div>
+      <div
+        class="dropdown pull-right dropdown-kebab-pf"
+        ng-if="notification.actions && notification.actions.length > 0">
+        <button
+          class="btn btn-link dropdown-toggle"
+          type="button"
+          id="dropdownKebabRight"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="true">
+          <span class="fa fa-ellipsis-v"></span>
+        </button>
+        <ul
+          class="dropdown-menu dropdown-menu-right"
+          aria-labelledby="dropdownKebabRight">
+          <li
+            ng-repeat="action in notification.actions"
+            role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
+            ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
+            <a
+              ng-if="action.isSeparator !== true"
+              class="secondary-action"
+              title="{{action.title}}"
+              ng-click="$ctrl.customScope.handleAction(notification, action)">
+              {{action.name}}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/directives/notifications/notification-drawer-wrapper.html b/app/views/directives/notifications/notification-drawer-wrapper.html
index a7d30f0133..6c8b3e9723 100644
--- a/app/views/directives/notifications/notification-drawer-wrapper.html
+++ b/app/views/directives/notifications/notification-drawer-wrapper.html
@@ -11,5 +11,6 @@
   subheading-include="{{subheadingInclude}}"
   notification-body-include="{{notificationBodyInclude}}"
   notification-footer-include="{{notificationFooterInclude}}"
-  custom-scope="customScope">
-</pf-notification-drawer>
+  on-close="onClose"
+  on-clear-all="onClearAll"
+  custom-scope="customScope"></pf-notification-drawer>