diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
index 1a8a773c91..61cab3b477 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
@@ -61,9 +61,12 @@
   padding: 2px;
   line-height: 16px;
 
-  &.-alert {
+  &.-type-alert {
     background-color: @red-l1;
   }
+  &.-type-warning {
+    background-color: @yellow-d2;
+  }
 }
 
 .umb-sub-views-nav-item-text {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
index c7dfa26b3c..1f973ea2f6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html
@@ -12,7 +12,7 @@
                ng-class="{'is-active': item.active, '-has-error': item.hasError}">
                 <i class="icon {{ item.icon }}"></i>
                 <span class="umb-sub-views-nav-item-text">{{ item.name }}</span>
-                <div ng-show="item.badge && item.badge.count" class="badge" ng-class="{'-alert': item.badge.alert}">{{item.badge.count}}</div>
+                <div ng-show="item.badge && item.badge.count" class="badge -type-{{item.badge.type}}">{{item.badge.count}}</div>
             </a>
         </div>
     </li>