diff --git a/app/assets/javascripts/navigation.js b/app/assets/javascripts/navigation.js
index 885dfb400..08ee772ab 100644
--- a/app/assets/javascripts/navigation.js
+++ b/app/assets/javascripts/navigation.js
@@ -21,12 +21,14 @@
           url: button.attr('data-href'),
           type: 'GET',
           dataType: 'json',
+          beforeSend: animateSpinner($('.notifications-dropdown-header'), true),
           success: function(data) {
             $('.notifications-dropdown-header')
               .nextAll('li.notification')
               .remove();
             $('.notifications-dropdown-header')
               .after(data.html);
+            animateSpinner($('.notifications-dropdown-header'), false)
           }
         });
       });
@@ -40,7 +42,13 @@
       dataType: 'json',
       success: function(data) {
         notificationCount.html('');
-        notificationCount.html(data.notificationNmber);
+        if ( data.notificationNmber > 0 ) {
+          notificationCount.html(data.notificationNmber);
+          notificationCount.show();
+        } else {
+          notificationCount.hide()
+        }
+
       }
     });
   }
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 7bb363f70..527f577df 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -89,6 +89,7 @@ table {
     padding-right: 4px;
     position: fixed;
     z-index: 999999;
+    display: none;
   }
 }
 
@@ -109,14 +110,35 @@ table {
     border-bottom: 1px solid $color-alto;
     padding-bottom: 10px;
     padding-top: 10px;
+
+    &:hover{
+      background-color: $color-concrete;
+    }
+  }
+
+  .unseen {
+    border-left: 4px solid $color-theme-primary;
   }
 
   .text-center {
+    margin-left: 10px;
     padding-top: 10px;
   }
 
   .assignment {
-    
+    background-color: $color-theme-primary;
+    border-radius: 50%;
+    color: $color-wild-sand;
+    font-size: 15px;
+    padding: 7px;
+  }
+
+  .system_message {
+    background-color: $color-theme-secondary;
+    border-radius: 50%;
+    color: $color-wild-sand;
+    font-size: 13px;
+    padding: 7px 10px;
   }
 
   .notifications-dropdown-header {
diff --git a/app/controllers/user_notifications_controller.rb b/app/controllers/user_notifications_controller.rb
index 21d3d43df..2f952703a 100644
--- a/app/controllers/user_notifications_controller.rb
+++ b/app/controllers/user_notifications_controller.rb
@@ -11,10 +11,11 @@ class UserNotificationsController < ApplicationController
         }
       end
     end
+    mark_seen_notification @recent_notifications
   end
 
   def unseen_notification
-    @number = UserNotification.unseen_notification(current_user)
+    @number = UserNotification.unseen_notification_count(current_user)
 
     respond_to do |format|
       format.json do
@@ -24,4 +25,12 @@ class UserNotificationsController < ApplicationController
       end
     end
   end
+
+  private
+
+  def mark_seen_notification(notifications)
+    notifications.each do |notification|
+      notification.seen_by_user(current_user)
+    end
+  end
 end
diff --git a/app/models/notification.rb b/app/models/notification.rb
index ec73d99c1..8e1fac34f 100644
--- a/app/models/notification.rb
+++ b/app/models/notification.rb
@@ -4,4 +4,17 @@ class Notification < ActiveRecord::Base
   belongs_to :generator_user, class_name: 'User'
 
   enum type_of: [:assignment, :recent_changes, :system_message]
+
+  def already_seen(user)
+    UserNotification.where(notification: self, user: user)
+                    .pluck(:checked)
+                    .first
+  end
+
+  def seen_by_user(user)
+    user_notification = UserNotification.where(notification: self, user: user)
+                                        .first
+    user_notification.checked = true
+    user_notification.save
+  end
 end
diff --git a/app/models/user_notification.rb b/app/models/user_notification.rb
index 89af38f84..72e0b76f0 100644
--- a/app/models/user_notification.rb
+++ b/app/models/user_notification.rb
@@ -9,7 +9,7 @@ class UserNotification < ActiveRecord::Base
                 .limit(10)
   end
 
-  def self.unseen_notification(user)
+  def self.unseen_notification_count(user)
     where('user_id = ? AND checked = false', user.id).count
   end
 end
diff --git a/app/views/user_notifications/_recent_notifications.html.erb b/app/views/user_notifications/_recent_notifications.html.erb
index ed57ce053..a8f52712c 100644
--- a/app/views/user_notifications/_recent_notifications.html.erb
+++ b/app/views/user_notifications/_recent_notifications.html.erb
@@ -1,10 +1,10 @@
 <% @recent_notifications.each do |notification| %>
-<li class="notification">
+<li class="notification <%= 'unseen' unless notification.already_seen(current_user) %>">
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-xs-2">
       <% if notification.type_of == 'recent_changes' %>
       <div class="text-center">
-        <%= image_tag avatar_path(notification.generator_user, :icon_small), class: "avatar" %>
+        <%= image_tag avatar_path(notification.generator_user, :icon_small), class: 'avatar' %>
       </div>
       <% end %>
       <% if notification.type_of == 'assignment' %>
@@ -12,8 +12,13 @@
         <span class="assignment"><%= fa_icon 'newspaper-o' %></span>
       </div>
       <% end %>
+      <% if notification.type_of == 'system_message' %>
+      <div class="text-center">
+        <span class="system_message"><i class="glyphicon glyphicon-tower" aria-hidden="true"></i></span>
+      </div>
+      <% end %>
     </div>
-    <div class="col-md-9">
+    <div class="col-xs-10">
       <strong><%= notification.title %></strong> <br>
       <%= l(notification.created_at, format: :full) %> | <%= notification.message %>
     </div>