diff --git a/app/styles/_navbar-vertical.less b/app/styles/_navbar-vertical.less
index 6f4d10be53..a473e3a4f0 100644
--- a/app/styles/_navbar-vertical.less
+++ b/app/styles/_navbar-vertical.less
@@ -59,8 +59,8 @@
     .badge {
       margin: 0 !important;
       position: absolute;
-      top: 9px;
       right: 13px;
+      top: 9px;
       @media(min-width: @screen-sm-min) {
         top: 20px;
       }
diff --git a/app/styles/_notifications.less b/app/styles/_notifications.less
index 3f9723bb2a..49601916ea 100644
--- a/app/styles/_notifications.less
+++ b/app/styles/_notifications.less
@@ -5,8 +5,11 @@
 notification-drawer-wrapper {
   .drawer-pf {
     height: calc(100vh ~"-" (@navbar-os-header-height-mobile + @project-bar-height-mobile));
+    opacity: 1;
     position: fixed;
+    right: 0;
     top: (@navbar-os-header-height-mobile + @project-bar-height-mobile);
+    transition: top 150ms ease-in-out, opacity 150ms;
     z-index: @zindex-navbar-fixed - 2; // two less than navbar, one less than project-bar
     @media(max-width: 350px) {
       left: 0;
@@ -22,6 +25,14 @@ notification-drawer-wrapper {
         left: 270px;
       }
     }
+    &.hide {
+      opacity: 0;
+      top: 38px;
+    }
+    &.hide-add,
+    &.hide-remove {
+      display: block !important;
+    }
     .tech-preview & {
       height: calc(100vh ~"-" (@navbar-os-header-height-mobile + @project-bar-height-mobile + @tech-preview-banner-height));
       top: (@navbar-os-header-height-mobile + @project-bar-height-mobile + @tech-preview-banner-height);
@@ -48,34 +59,69 @@ notification-drawer-wrapper {
       }
     }
   }
+  .drawer-pf-notification-info {
+    font-size: @font-size-small;
+  }
   .drawer-pf-notification-inner {
     padding: 15px;
     .pficon-close {
-      color: @color-pf-black;
+      color: @color-pf-black-400;
+      &:hover,&:focus,&:active {
+        color: @color-pf-black-700;
+      }
     }
   }
-  .expanded-notification .drawer-pf-notification-message {
-    max-width: 35%; // keeps flex in check in case of a really long message
+  .drawer-pf-title h3 {
+    font-size: @font-size-base - 1;
+  }
+  .expanded-notification {
+    .drawer-pf-notification-info {
+      .text-muted;
+    }
+    .drawer-pf-notification-message-expanded {
+      font-size: @font-size-base - 1;
+      padding: 10px 10px 10px 42px;
+      .text-muted;
+    }
+    &.unread {
+      .drawer-pf-notification-info {
+        color: inherit;
+      }
+      .drawer-pf-notification-message-expanded {
+        color: inherit;
+        font-weight: normal;
+        .word-break();
+      }
+    }
   }
 }
 
 .panel-heading {
   .panel-title {
+    color: @color-pf-black-700;
+    font-size: @font-size-h4;
+    font-weight: bold;
+    line-height: normal;
     // TODO: hack to eliminate side-to-side wobble
     // There is a hard-coded <h4> that wraps the header:
     //   - https://github.com/patternfly/angular-patternfly/issues/539
     // I'm putting quite a bit of markup inside the header,
     // need to tinker to eliminate this rule.
-    overflow: hidden;
+    overflow:hidden;
     .container-fluid {
       margin-left: 0;
       margin-right: 0;
       padding-left: 0;
       padding-right: 0;
     }
-  }
-  .small {
-    .small();
-    color: @color-pf-black;
+    .panel-counter {
+      font-size: @font-size-small;
+      font-weight: normal;
+      padding: 0;
+      a {
+        display: inline-block;
+        font-style: normal;
+      }
+    }
   }
 }
diff --git a/app/views/directives/notifications/header.html b/app/views/directives/notifications/header.html
index c4d3f3ec85..0d225bef7b 100644
--- a/app/views/directives/notifications/header.html
+++ b/app/views/directives/notifications/header.html
@@ -1,9 +1,12 @@
 <div class="container-fluid">
-  <div class="row">
+  <div class="truncate">
+    {{notificationGroup.heading}}
+  </div>
+  <div class="row mar-top-md panel-counter">
     <div class="col-xs-6">
-      <strong>{{notificationGroup.heading}}</strong>
+      {{notificationGroup.totalUnread}} Unread
     </div>
-    <div class="col-xs-6 text-right small">
+    <div class="col-xs-6 text-right">
       <a
         title="All Events"
         ng-href="project/{{$ctrl.customScope.projectName}}/browse/events"
@@ -12,9 +15,4 @@
       </a>
     </div>
   </div>
-  <div class="row mar-top-md">
-    <div class="col-xs-12">
-      <em>{{notificationGroup.totalUnread}} Unread</em>
-    </div>
-  </div>
 </div>
diff --git a/app/views/directives/notifications/notification-body.html b/app/views/directives/notifications/notification-body.html
index dd0c4227f8..d0467a2b7e 100644
--- a/app/views/directives/notifications/notification-body.html
+++ b/app/views/directives/notifications/notification-body.html
@@ -78,12 +78,12 @@
       </div>
     </div>
 
-    <span ng-if="$ctrl.drawerExpanded" class="drawer-pf-notification-message text-muted small word-break">
-      {{notification.event.message}}
-    </span>
     <div class="drawer-pf-notification-info">
       <span class="date">{{notification.event.lastTimestamp | date:'shortDate'}}</span>
       <span class="time">{{notification.event.lastTimestamp | date:'mediumTime'}}</span>
     </div>
   </div>
+  <div ng-if="$ctrl.drawerExpanded" class="drawer-pf-notification-message drawer-pf-notification-message-expanded">
+    {{notification.event.message}}
+  </div>
 </div>
diff --git a/bower.json b/bower.json
index e0c088d016..2cc66a5072 100644
--- a/bower.json
+++ b/bower.json
@@ -18,7 +18,7 @@
     "uri.js": "1.18.12",
     "moment": "2.14.2",
     "moment-timezone": "0.5.3",
-    "patternfly": "3.26.6",
+    "patternfly": "3.27.1",
     "hawtio-core": "2.0.37",
     "hawtio-extension-service": "2.0.2",
     "jquery": "3.2.1",
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index c5f3cf8b26..b3e2eaba1e 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -7455,21 +7455,19 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $templateCache.put('views/directives/notifications/header.html',
     "<div class=\"container-fluid\">\n" +
-    "<div class=\"row\">\n" +
+    "<div class=\"truncate\">\n" +
+    "{{notificationGroup.heading}}\n" +
+    "</div>\n" +
+    "<div class=\"row mar-top-md panel-counter\">\n" +
     "<div class=\"col-xs-6\">\n" +
-    "<strong>{{notificationGroup.heading}}</strong>\n" +
+    "{{notificationGroup.totalUnread}} Unread\n" +
     "</div>\n" +
-    "<div class=\"col-xs-6 text-right small\">\n" +
+    "<div class=\"col-xs-6 text-right\">\n" +
     "<a title=\"All Events\" ng-href=\"project/{{$ctrl.customScope.projectName}}/browse/events\" ng-click=\"$ctrl.customScope.close()\">\n" +
     "View All Events\n" +
     "</a>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div class=\"row mar-top-md\">\n" +
-    "<div class=\"col-xs-12\">\n" +
-    "<em>{{notificationGroup.totalUnread}} Unread</em>\n" +
-    "</div>\n" +
-    "</div>\n" +
     "</div>"
   );
 
@@ -7512,14 +7510,14 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<duration-until-now timestamp=\"notification.event.firstTimestamp\" omit-single=\"true\" precision=\"1\"></duration-until-now>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<span ng-if=\"$ctrl.drawerExpanded\" class=\"drawer-pf-notification-message text-muted small word-break\">\n" +
-    "{{notification.event.message}}\n" +
-    "</span>\n" +
     "<div class=\"drawer-pf-notification-info\">\n" +
     "<span class=\"date\">{{notification.event.lastTimestamp | date:'shortDate'}}</span>\n" +
     "<span class=\"time\">{{notification.event.lastTimestamp | date:'mediumTime'}}</span>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<div ng-if=\"$ctrl.drawerExpanded\" class=\"drawer-pf-notification-message drawer-pf-notification-message-expanded\">\n" +
+    "{{notification.event.message}}\n" +
+    "</div>\n" +
     "</div>"
   );
 
diff --git a/dist/styles/main.css b/dist/styles/main.css
index 83d66332f1..2bafe4bdda 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -4882,7 +4882,7 @@ h2+.list-view-pf{margin-top:20px}
 @media (min-width:768px){.navbar-pf-vertical .navbar-brand{padding-bottom:10px;padding-top:10px}
 .navbar-pf-vertical .navbar-iconic{margin-right:10px}
 }
-.navbar-pf-vertical .navbar-iconic .badge{margin:0!important;position:absolute;top:9px;right:13px}
+.navbar-pf-vertical .navbar-iconic .badge{margin:0!important;position:absolute;right:13px;top:9px}
 .navbar-pf-vertical .navbar-iconic .drawer-pf-trigger{display:inline-block}
 .navbar-pf-vertical .navbar-iconic .drawer-pf-trigger a{display:block}
 .navbar-pf-vertical .navbar-iconic .dropdown .nav-item-iconic{padding-right:20px}
@@ -5356,7 +5356,7 @@ dl.secret-data pre{margin-bottom:0}
 .events-sidebar .events-sidebar-collapse a{text-decoration:none}
 .events-sidebar .sidebar-header.right-header{align-items:center;display:flex;justify-content:space-between;margin-top:17.5px}
 .events-sidebar .sidebar-header.right-header h2{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin-top:10.5px;margin-bottom:10.5px;font-size:14px;display:inline-block}
-.config-map-table .key,.config-map-table .truncated-content,.edit-yaml .ace_editor.editor,.log-view{font-family:Menlo,Monaco,Consolas,monospace}
+.config-map-table .key,.config-map-table .truncated-content,.log-view{font-family:Menlo,Monaco,Consolas,monospace}
 .events-sidebar .sidebar-header.right-header h2 .small,.events-sidebar .sidebar-header.right-header h2 small{font-weight:400;line-height:1;color:#9c9c9c;font-size:75%}
 .events-sidebar .sidebar-header.right-header .warning-count{white-space:nowrap;margin-left:2px}
 .events-sidebar .sidebar-header.right-header .warning-count .pficon{vertical-align:-1px}
@@ -5426,7 +5426,7 @@ dl.secret-data pre{margin-bottom:0}
 .table-mobile>tbody>tr>td:last-child{border-bottom:none}
 .table-mobile>tbody>tr>td:before{content:attr(data-title);position:absolute;top:8px;left:6px;width:35%;padding-right:10px;white-space:nowrap}
 }
-.tooltip-inner,h1.contains-actions{overflow-wrap:break-word;min-width:0;word-wrap:break-word;word-break:break-word}
+.tooltip-inner,h1.contains-actions{overflow-wrap:break-word;min-width:0;word-break:break-word;word-wrap:break-word}
 .table-responsive{margin-bottom:21px}
 .table-responsive.scroll-shadows-horizontal{border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;background-attachment:scroll;background-color:#fff;background-image:radial-gradient(ellipse at left,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 75%),radial-gradient(ellipse at right,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 75%);background-position:0 0,100% 0;background-repeat:no-repeat;background-size:8px 100%;-ms-overflow-style:auto;overflow-x:auto}
 .table-responsive.scroll-shadows-horizontal .table{background-color:transparent}
@@ -5836,13 +5836,15 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px}
 .membership .content-pane .col-name input{max-width:175px}
 .membership .content-pane .select-role{width:150px}
 }
-notification-drawer-wrapper .drawer-pf{height:calc(100vh - 69px);position:fixed;top:69px;z-index:1028}
+notification-drawer-wrapper .drawer-pf{height:calc(100vh - 69px);opacity:1;position:fixed;right:0;top:69px;transition:top 150ms ease-in-out,opacity 150ms;z-index:1028}
 @media (max-width:350px){notification-drawer-wrapper .drawer-pf{left:0;width:100%}
 }
 notification-drawer-wrapper .drawer-pf.drawer-pf-expanded{left:0}
 @media (min-width:768px){notification-drawer-wrapper .drawer-pf{height:calc(100vh - 99px - 20px);top:99px}
 notification-drawer-wrapper .drawer-pf.drawer-pf-expanded{left:270px}
 }
+notification-drawer-wrapper .drawer-pf.hide{opacity:0;top:38px}
+notification-drawer-wrapper .drawer-pf.hide-add,notification-drawer-wrapper .drawer-pf.hide-remove{display:block!important}
 .tech-preview notification-drawer-wrapper .drawer-pf{height:calc(100vh - 89px);top:89px}
 @media (min-width:768px){.tech-preview notification-drawer-wrapper .drawer-pf{height:calc(100vh - 119px - 20px);top:119px}
 }
@@ -5850,12 +5852,19 @@ notification-drawer-wrapper .drawer-pf-notification,notification-drawer-wrapper
 notification-drawer-wrapper .drawer-pf-notification{padding:0}
 notification-drawer-wrapper .drawer-pf-notification.ng-leave{transition:.25s linear all;opacity:1}
 notification-drawer-wrapper .drawer-pf-notification.ng-leave.ng-leave-active{opacity:0}
+notification-drawer-wrapper .drawer-pf-notification-info{font-size:11px}
 notification-drawer-wrapper .drawer-pf-notification-inner{padding:15px}
-notification-drawer-wrapper .drawer-pf-notification-inner .pficon-close{color:#030303}
-notification-drawer-wrapper .expanded-notification .drawer-pf-notification-message{max-width:35%}
-.panel-heading .panel-title{overflow:hidden}
+notification-drawer-wrapper .drawer-pf-notification-inner .pficon-close{color:#bbb}
+notification-drawer-wrapper .drawer-pf-notification-inner .pficon-close:active,notification-drawer-wrapper .drawer-pf-notification-inner .pficon-close:focus,notification-drawer-wrapper .drawer-pf-notification-inner .pficon-close:hover{color:#4d5258}
+notification-drawer-wrapper .drawer-pf-title h3{font-size:12px}
+notification-drawer-wrapper .expanded-notification .drawer-pf-notification-info{color:#9c9c9c}
+notification-drawer-wrapper .expanded-notification .drawer-pf-notification-message-expanded{font-size:12px;padding:10px 10px 10px 42px;color:#9c9c9c}
+notification-drawer-wrapper .expanded-notification.unread .drawer-pf-notification-info{color:inherit}
+notification-drawer-wrapper .expanded-notification.unread .drawer-pf-notification-message-expanded{color:inherit;font-weight:400;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;min-width:0}
+.panel-heading .panel-title{color:#4d5258;font-size:14px;font-weight:700;line-height:normal;overflow:hidden}
 .panel-heading .panel-title .container-fluid{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
-.panel-heading .small{font-size:84%;color:#030303}
+.panel-heading .panel-title .panel-counter{font-size:11px;font-weight:400;padding:0}
+.panel-heading .panel-title .panel-counter a{display:inline-block;font-style:normal}
 .action-chip{margin:0 5px 2px 0;font-size:12px;display:flex;flex-direction:row}
 .action-chip .item{padding:.2em .6em .3em}
 .action-chip .item:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}
@@ -5885,7 +5894,7 @@ notification-drawer-wrapper .expanded-notification .drawer-pf-notification-messa
 .ace-inline{height:300px}
 .ace-inline-small{height:200px}
 .ace_editor.dockerfile-mode .ace_constant.ace_numeric,.editor.yaml-mode .ace_constant.ace_numeric{color:inherit}
-.edit-yaml .ace_editor.editor{line-height:1.5;width:100%;min-height:140px;height:50vh}
+.edit-yaml .ace_editor.editor{font-family:Menlo,Monaco,Consolas,monospace;line-height:1.5;width:100%;min-height:140px;height:50vh}
 @media (min-height:700px){.edit-yaml .ace_editor.editor{height:60vh}
 }
 .edit-yaml .ace_editor.editor .ace_gutter{color:#8b8d8f}