diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js
index 067f241de..ff2d0ad81 100644
--- a/public/javascripts/widgets/notifications-badge.js
+++ b/public/javascripts/widgets/notifications-badge.js
@@ -52,7 +52,9 @@
 
       $.each(self.notifications.notifications, function(index, notifications) {
         $.each(notifications, function(index, notification) {
-          $("<div/>", { "class": "notification_element" })
+          $("<div/>")
+            .addClass("notification_element")
+            .addClass((notification.unread) ? "unread" : "read" )
             .html(notification.translation)
             .prepend($("<img/>", { src: notification.actors[0].avatar }))
             .prependTo(self.dropdownNotifications);
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index 247d030dc..a9b5c6b37 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -3082,6 +3082,10 @@ ul.left_nav
   .notification_element
     :padding 10px 20px
     :min-height 30px
+    .unread
+      :background #CCC
+    .read
+      :background white
 
     img
       :height 30px