diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index e4a7339491a..ccb4e5381b7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -77,6 +77,7 @@ $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
 $link-underline-blue: #4a8bee;
 $layout-link-gray: #7e7c7c;
+$todo-alert-blue: #428bca;
 
 /*
  * Color schema
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 75f78569e3c..e51c3491dae 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -6,9 +6,16 @@
 .navbar-nav {
   li {
     .badge.todos-pending-count {
-      background-color: $gl-icon-color;
       margin-top: -5px;
       font-weight: normal;
+      background: $todo-alert-blue;
+      margin-left: -17px;
+      font-size: 11px;
+      color: white;
+      padding: 3px;
+      padding-top: 1px;
+      padding-bottom: 1px;
+      border-radius: 3px;
     }
   }
 }
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index cde9e1b918b..86930d4eaaf 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -23,6 +23,7 @@
                   = icon('wrench fw')
             %li
               = link_to dashboard_todos_path, title: 'Todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = icon('bell fw')
                 %span.badge.todos-pending-count
                   = todos_pending_count
             - if current_user.can_create_project?