diff --git a/app/assets/javascripts/discourse/components/notification-item.js.es6 b/app/assets/javascripts/discourse/components/notification-item.js.es6
index 81d8629cf..40bf11f02 100644
--- a/app/assets/javascripts/discourse/components/notification-item.js.es6
+++ b/app/assets/javascripts/discourse/components/notification-item.js.es6
@@ -12,7 +12,8 @@ export default Ember.Component.extend({
 
   render: function(buffer) {
     var notification = this.get('notification'),
-        text = I18n.t(this.get('scope'), Em.getProperties(notification, 'link', 'username'));
-    buffer.push('<span>' + text + '</span>');
+        text = I18n.t(this.get('scope'), Em.getProperties(notification, 'description', 'username'));
+
+    buffer.push('<a href="' + notification.get('url') + '">' + text + '</a>');
   }
 });
diff --git a/app/assets/javascripts/discourse/controllers/notification.js.es6 b/app/assets/javascripts/discourse/controllers/notification.js.es6
index eaf9d8354..f4d6e970d 100644
--- a/app/assets/javascripts/discourse/controllers/notification.js.es6
+++ b/app/assets/javascripts/discourse/controllers/notification.js.es6
@@ -1,33 +1,31 @@
 export default Discourse.ObjectController.extend({
-  scope: function() {
+
+  scope: function () {
     return "notifications." + Discourse.Site.currentProp("notificationLookup")[this.get("notification_type")];
-  }.property(),
+  }.property("notification_type"),
 
-  username: function() {
-    return this.get("data.display_username");
-  }.property(),
+  username: Em.computed.alias("data.display_username"),
 
-  safe: function(prop){
+  safe: function (prop) {
     var val = this.get(prop);
-    if(val) {
-      val = Handlebars.Utils.escapeExpression(val);
-    }
+    if (val) { val = Handlebars.Utils.escapeExpression(val); }
     return val;
   },
 
-  link: function() {
-
-    var badgeId = this.safe('data.badge_id');
+  url: function () {
+    var badgeId = this.safe("data.badge_id");
     if (badgeId) {
-      var badgeName = this.safe('data.badge_name');
-      return '<a href="/badges/' + badgeId + '/' + badgeName.replace(/[^A-Za-z0-9_]+/g, '-').toLowerCase() + '">' + badgeName + '</a>';
+      var badgeName = this.safe("data.badge_name");
+      return '/badges/' + badgeId + '/' + badgeName.replace(/[^A-Za-z0-9_]+/g, '-').toLowerCase();
+    } else {
+      return Discourse.Utilities.postUrl(this.safe("slug"), this.safe("topic_id"), this.safe("post_number"));
     }
+  }.property("data.@{badge_id, badge_name}", "slug", "topic_id", "post_number"),
 
-    if (this.blank("data.topic_title")) {
-      return "";
-    }
+  description: function () {
+    var badgeName = this.safe("data.badge_name");
+    if (badgeName) { return badgeName; }
+    return this.blank("data.topic_title") ? "" : this.safe("data.topic_title");
+  }.property("data.@{badge_name, topic_title}")
 
-    var url = Discourse.Utilities.postUrl(this.safe("slug"), this.safe("topic_id"), this.safe("post_number"));
-    return '<a href="' + url + '">' + this.safe("data.topic_title") + '</a>';
-  }.property()
 });
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 37f6ec11c..b26a78e3a 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -196,16 +196,21 @@
 
   // Notifications
   &#notifications-dropdown {
-    .fa {
-      color: scale-color($primary, $lightness: 50%);
-    }
+    .fa { color: scale-color($primary, $lightness: 50%); }
+    .icon { color: scale-color($primary, $lightness: 30%); }
     li {
       background-color: scale-color($tertiary, $lightness: 90%);
-      padding: 5px;
-      &:hover a {background: transparent;}
-    a {
-      display: inline;
-      padding: 1px;
+      padding: 5px 0 0 5px;
+      i {
+        float: left;
+        margin-right: 5px;
+      }
+      span { color: $primary; }
+      &:hover a { background: transparent; }
+      a { padding: 1px; }
+      p {
+        margin: 0;
+        overflow: hidden;
       }
     }
     .read {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 8277d4fde..1c44a2e94 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -671,19 +671,19 @@ en:
       title: "notifications of @name mentions, replies to your posts and topics, private messages, etc"
       none: "You have no notifications right now."
       more: "view older notifications"
-      mentioned: "<span title='mentioned' class='icon'>@</span> {{username}} {{link}}"
-      quoted: "<i title='quoted' class='fa fa-quote-right'></i> {{username}} {{link}}"
-      replied: "<i title='replied' class='fa fa-reply'></i> {{username}} {{link}}"
-      posted: "<i title='replied' class='fa fa-reply'></i> {{username}} {{link}}"
-      edited: "<i title='edited' class='fa fa-pencil'></i> {{username}} {{link}}"
-      liked: "<i title='liked' class='fa fa-heart'></i> {{username}} {{link}}"
-      private_message: "<i class='fa fa-envelope-o' title='private message'></i> {{username}} {{link}}"
-      invited_to_private_message: "<i class='fa fa-envelope-o' title='private message'></i> {{username}} {{link}}"
-      invitee_accepted: "<i title='accepted your invitation' class='fa fa-user'></i> {{username}} accepted your invitation"
-      moved_post: "<i title='moved post' class='fa fa-sign-out'></i> {{username}} moved {{link}}"
       total_flagged: "total flagged posts"
-      linked: "<i title='linked post' class='fa fa-arrow-left'></i> {{username}} {{link}}"
-      granted_badge: "<i title='badge granted' class='fa fa-certificate'></i> You were granted {{link}}"
+      mentioned: "<i title='mentioned' class='icon'>@</i><p><span>{{username}}</span> {{description}}</p>"
+      quoted: "<i title='quoted' class='fa fa-quote-right'></i><p><span>{{username}}</span> {{description}}</p>"
+      replied: "<i title='replied' class='fa fa-reply'></i><p><span>{{username}}</span> {{description}}</p>"
+      posted: "<i title='replied' class='fa fa-reply'></i><p><span>{{username}}</span> {{description}}</p>"
+      edited: "<i title='edited' class='fa fa-pencil'></i><p><span>{{username}}</span> {{description}}</p>"
+      liked: "<i title='liked' class='fa fa-heart'></i><p><span>{{username}}</span> {{description}}</p>"
+      private_message: "<i title='private message' class='fa fa-envelope-o'></i><p><span>{{username}}</span> {{description}}</p>"
+      invited_to_private_message: "<i title='private message' class='fa fa-envelope-o'></i><p><span>{{username}}</span> {{description}}</p>"
+      invitee_accepted: "<i title='accepted your invitation' class='fa fa-user'></i><p><span>{{username}}</span> accepted your invitation</p>"
+      moved_post: "<i title='moved post' class='fa fa-sign-out'></i><p><span>{{username}}</span> moved {{description}}</p>"
+      linked: "<i title='linked post' class='fa fa-arrow-left'></i><p><span>{{username}}</span> {{description}}</p>"
+      granted_badge: "<i title='badge granted' class='fa fa-certificate'></i><p>You were granted {{description}}</p>"
 
     upload_selector:
       title: "Add an image"
diff --git a/test/javascripts/controllers/notification-test.js.es6 b/test/javascripts/controllers/notification-test.js.es6
index 1481593ee..45efb0992 100644
--- a/test/javascripts/controllers/notification-test.js.es6
+++ b/test/javascripts/controllers/notification-test.js.es6
@@ -21,14 +21,31 @@ test("username property is correct", function() {
   equal(controller.get("username"), "velesin");
 });
 
-test("link property returns empty string when there is no topic title", function() {
-  var fixtureWithEmptyTopicTitle = _.extend({}, notificationFixture, {data: {topic_title: ""}});
-  var controller = this.subject(fixtureWithEmptyTopicTitle);
-  equal(controller.get("link"), "");
+test("description property returns badge name when there is one", function() {
+  var fixtureWithBadgeName = _.extend({}, notificationFixture, { data: { badge_name: "badge" } });
+  var controller = this.subject(fixtureWithBadgeName);
+  equal(controller.get("description"), "badge");
 });
 
-test("link property returns correctly built link when there is a topic title", function() {
-  var controller = this.subject(notificationFixture);
-  ok(controller.get("link").indexOf('/t/a-slug/1234') !== -1, 'has the correct URL');
-  ok(controller.get("link").indexOf('some title') !== -1, 'has the correct title');
+test("description property returns empty string when there is no topic title", function() {
+  var fixtureWithEmptyTopicTitle = _.extend({}, notificationFixture, { data: { topic_title: "" } });
+  var controller = this.subject(fixtureWithEmptyTopicTitle);
+  equal(controller.get("description"), "");
+});
+
+test("description property returns topic title", function() {
+  var fixtureWithTopicTitle = _.extend({}, notificationFixture, { data: { topic_title: "topic" } });
+  var controller = this.subject(fixtureWithTopicTitle);
+  equal(controller.get("description"), "topic");
+});
+
+test("url property returns badge's url when there is a badge", function() {
+  var fixtureWithBadge = _.extend({}, notificationFixture, { data: { badge_id: 1, badge_name: "Badge Name"} });
+  var controller = this.subject(fixtureWithBadge);
+  equal(controller.get("url"), "/badges/1/badge-name");
+});
+
+test("url property returns topic's url when there is a topic", function() {
+  var controller = this.subject(notificationFixture);
+  equal(controller.get("url"), "/t/a-slug/1234");
 });