diff --git a/src/App.scss b/src/App.scss
index 9d1ce77a..c38c2e53 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -748,6 +748,13 @@ option {
     margin-left: 0.7em;
     margin-top: -1em;
   }
+
+  &.badge-neutral {
+    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral, $fallback--cGreen);
+    color: white;
+    color: var(--badgeNeutralText, white);
+  }
 }
 
 .alert {
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index c3071c8c..c16fe6dc 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -56,6 +56,7 @@ export const ROOT_ITEMS = {
     route: 'chats',
     icon: 'comments',
     label: 'nav.chats',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadChatCount',
     criteria: ['chats']
   },
@@ -63,6 +64,7 @@ export const ROOT_ITEMS = {
     route: 'friend-requests',
     icon: 'user-plus',
     label: 'nav.friend_requests',
+    badgeStyle: 'notification',
     criteria: ['lockedUser'],
     badgeGetter: 'followRequestCount'
   },
@@ -76,6 +78,7 @@ export const ROOT_ITEMS = {
     route: 'announcements',
     icon: 'bullhorn',
     label: 'nav.announcements',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadAnnouncementCount',
     criteria: ['announcements']
   },
@@ -83,6 +86,7 @@ export const ROOT_ITEMS = {
     route: 'drafts',
     icon: 'file-pen',
     label: 'nav.drafts',
+    badgeStyle: 'neutral',
     badgeGetter: 'draftCount'
   }
 }
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 4ea54ee3..990209c1 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -35,6 +35,7 @@
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -notification"
+        :class="[`badge-${item.badgeStyle}`]"
       >
         {{ getters[item.badgeGetter] }}
       </div>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index decd1c04..ce9f18e7 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -20,6 +20,7 @@
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="badge -dot -notification"
+        :class="[`alert-dot-${item.badgeStyle}`]"
       />
     </router-link>
   </span>
@@ -34,6 +35,16 @@
   overflow: hidden;
   height: 100%;
 
+  &.alert-dot-notification {
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
+  &.alert-dot-neutral {
+    background-color: $fallback--cGreen;
+    background-color: var(--badgeNeutral, $fallback--cGreen);
+  }
+
   .pinned-item {
     position: relative;
     flex: 1 0 3em;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c9830d1..f6382520 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -255,7 +255,7 @@
             /> {{ $t('nav.drafts') }}
             <span
               v-if="draftCount"
-              class="badge badge-notification"
+              class="badge badge-neutral"
             >
               {{ draftCount }}
             </span>