diff --git a/framework/core/js/forum/src/components/NotificationsDropdown.js b/framework/core/js/forum/src/components/NotificationsDropdown.js
index 8e6bacbb2..f6704aa34 100644
--- a/framework/core/js/forum/src/components/NotificationsDropdown.js
+++ b/framework/core/js/forum/src/components/NotificationsDropdown.js
@@ -27,11 +27,12 @@ export default class NotificationsDropdown extends Dropdown {
   }
 
   getButton() {
-    const unread = this.getUnreadCount();
+    const newNotifications = this.getNewCount();
     const vdom = super.getButton();
 
     vdom.attrs.title = this.props.label;
-    vdom.attrs.className += (unread ? ' unread' : '');
+
+    vdom.attrs.className += (newNotifications ? ' new' : '');
     vdom.attrs.onclick = this.onclick.bind(this);
 
     return vdom;
@@ -69,6 +70,12 @@ export default class NotificationsDropdown extends Dropdown {
   }
 
   getUnreadCount() {
+    return app.cache.notifications ?
+        app.cache.notifications.filter(notification => !notification.isRead()).length :
+        0;
+  }
+
+  getNewCount() {
     return app.session.user.unreadNotificationsCount();
   }
 
diff --git a/framework/core/less/forum/NotificationsDropdown.less b/framework/core/less/forum/NotificationsDropdown.less
index 3b7d04e06..712c927c3 100644
--- a/framework/core/less/forum/NotificationsDropdown.less
+++ b/framework/core/less/forum/NotificationsDropdown.less
@@ -24,14 +24,15 @@
   }
 }
 
-.NotificationsDropdown .Dropdown-toggle.unread .Button-icon {
+.NotificationsDropdown .Dropdown-toggle.new .Button-icon {
   color: @header-color;
 }
+
 .NotificationsDropdown-unread {
   position: absolute;
   top: 1px;
   left: 17px;
-  background: @header-color;
+  background: @control-color;
   color: @header-bg;
   font-size: 11px;
   font-weight: bold;
@@ -41,4 +42,8 @@
   border: 1px solid @header-bg;
   min-width: 18px;
   height: 18px;
+
+  .new & {
+    background: @header-color;
+  }
 }