diff --git a/src/app/core/components/navigation/nav-item/nav-item.component.html b/src/app/core/components/navigation/nav-item/nav-item.component.html
index c1e83d88..2767e8dd 100644
--- a/src/app/core/components/navigation/nav-item/nav-item.component.html
+++ b/src/app/core/components/navigation/nav-item/nav-item.component.html
@@ -1,5 +1,6 @@
 <a class="nav-link" md-ripple
    [routerLink]="[item.url]" routerLinkActive="active">
     <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
-    <span>{{item.title}}</span>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
 </a>
diff --git a/src/app/core/components/navigation/nav-item/nav-item.component.scss b/src/app/core/components/navigation/nav-item/nav-item.component.scss
index 948c48d2..1efc651a 100644
--- a/src/app/core/components/navigation/nav-item/nav-item.component.scss
+++ b/src/app/core/components/navigation/nav-item/nav-item.component.scss
@@ -4,10 +4,11 @@
 
         .nav-link {
 
-            > span {
+            > .nav-link-title,
+            > .nav-link-badge {
                 opacity: 0;
                 transition: opacity 200ms ease;
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts
index c136c723..7e3ea57c 100644
--- a/src/app/core/components/navigation/navigation.model.ts
+++ b/src/app/core/components/navigation/navigation.model.ts
@@ -31,13 +31,23 @@ export class FuseNavigation
                 'title': 'Mail',
                 'type' : 'nav-item',
                 'icon' : 'email',
-                'url'  : '/apps/mail'
+                'url'  : '/apps/mail',
+                'badge': {
+                    'title': 25,
+                    'bg'   : '#F44336',
+                    'fg'   : '#FFFFFF'
+                }
             },
             {
                 'title': 'Chat',
                 'type' : 'nav-item',
                 'icon' : 'chat',
-                'url'  : '/apps/chat'
+                'url'  : '/apps/chat',
+                'badge': {
+                    'title': 13,
+                    'bg'   : '#09d261',
+                    'fg'   : '#FFFFFF'
+                }
             },
             {
                 'title': 'File Manager',
@@ -55,7 +65,12 @@ export class FuseNavigation
                 'title': 'To-Do',
                 'type' : 'nav-item',
                 'icon' : 'check_box',
-                'url'  : '/apps/todo'
+                'url'  : '/apps/todo',
+                'badge': {
+                    'title': 3,
+                    'bg'   : '#FF6F00',
+                    'fg'   : '#FFFFFF'
+                }
             },
             {
                 'title': 'PAGES',
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss
index 29265dec..05ecae0a 100644
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -14,7 +14,7 @@
     .nav-item {
 
         .nav-link {
-            text-decoration: none!important;
+            text-decoration: none !important;
             display: flex;
             align-items: center;
             height: 48px;
@@ -25,11 +25,22 @@
             user-select: none;
             color: currentColor;
 
-            > span {
+            > .nav-link-title {
                 flex: 1;
                 white-space: nowrap;
             }
 
+            .nav-link-badge {
+                min-width: 20px;
+                height: 20px;
+                line-height: 20px;
+                padding: 0 7px;
+                font-size: 11px;
+                font-weight: 500;
+                border-radius: 20px;
+                transition: opacity 0.2s ease-in-out 0.1s;
+            }
+
             &:hover {
                 background-color: map-get($background, hover);
             }
@@ -48,6 +59,11 @@
                 &, .nav-link-icon {
                     color: mat-color($accent, default-contrast);
                 }
+
+                .nav-link-badge {
+                    background: #FFFFFF !important;
+                    color: rgba(0, 0, 0, 0.87) !important;
+                }
             }
 
             .nav-link-icon {