diff --git a/public/css/alerts.styl b/public/css/alerts.styl
index ceefaf3926..09241bd5f9 100644
--- a/public/css/alerts.styl
+++ b/public/css/alerts.styl
@@ -30,6 +30,8 @@ deathColor = #4E4E4E
 deathText = #ABABAB
 mpColor = #c7d3e9
 mpText = #003aa1
+critColor = #ffe3bf
+critText = #dc5000
 borderDarken = 20%
 
 // alert styles
@@ -64,6 +66,11 @@ borderDarken = 20%
   border-color: darken(mpColor,borderDarken)
   color: mpText
 
+.alert-crit
+  background-color: critColor
+  border-color: darken(critColor,borderDarken)
+  color: critText
+
 // alert icons
 
 .icon-gold
diff --git a/public/js/controllers/notificationCtrl.js b/public/js/controllers/notificationCtrl.js
index 98817ac7bb..db3a6ffc52 100644
--- a/public/js/controllers/notificationCtrl.js
+++ b/public/js/controllers/notificationCtrl.js
@@ -43,7 +43,7 @@ habitrpg.controller('NotificationCtrl',
        var amount = User.user._tmp.crit * 100 - 100;
        // reset the crit counter
        User.user._tmp.crit = undefined;
-       Notification.text("Critical Hit! Bonus: " + amount + "%");
+       Notification.crit(amount);
     });
 
     $rootScope.$watch('user._tmp.drop', function(after, before){
diff --git a/public/js/services/notificationServices.js b/public/js/services/notificationServices.js
index 733f0281e3..9bde458b10 100644
--- a/public/js/services/notificationServices.js
+++ b/public/js/services/notificationServices.js
@@ -6,7 +6,7 @@ angular.module("notificationServices", [])
     function growl(html, type) {
       $.bootstrapGrowl(html, {
         ele: '#notification-area',
-        type: type, //(null, 'text', 'error', 'success', 'gp', 'xp', 'hp', 'lvl', 'death', 'mp')
+        type: type, //(null, 'text', 'error', 'success', 'gp', 'xp', 'hp', 'lvl', 'death', 'mp', 'crit')
         top_offset: 20,
         align: 'right', //('left', 'right', or 'center')
         width: 250, //(integer, or 'auto')
@@ -68,6 +68,9 @@ angular.module("notificationServices", [])
       },
       mp: function(val) {
         growl("<i class='icon-fire'></i> " + sign(val) + " " + round(val) + " MP", 'mp');
+      },
+      crit: function(val) {
+        growl("<i class='icon-certificate'></i> Critical Hit! Bonus: " + val + "%", 'crit');
       }
     };
   }