diff --git a/app/assets/javascripts/discourse/components/user_badge_component.js b/app/assets/javascripts/discourse/components/user_badge_component.js
new file mode 100644
index 00000000000..daf3e6d305a
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/user_badge_component.js
@@ -0,0 +1,7 @@
+Discourse.UserBadgeComponent = Ember.Component.extend({
+  tagName: 'span',
+
+  badgeTypeClassName: function() {
+    return "badge-type-" + this.get('badge.badge_type.name').toLowerCase();
+  }.property('badge.badge_type.name')
+});
diff --git a/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars b/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars
new file mode 100644
index 00000000000..b934b3b1faa
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/user-badge.js.handlebars
@@ -0,0 +1,4 @@
+<span {{bind-attr class=":user-badge badgeTypeClassName" data-badge-name="badge.name" title="badge.description"}}>
+  <i class='fa fa-certificate'></i>
+  {{badge.name}}
+</span>
diff --git a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
index 1e9f3e99ed7..874935fda54 100644
--- a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
+++ b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
@@ -10,7 +10,7 @@
     {{#if showBadges}}
       <div class="badge-section">
         {{#each user.featured_user_badges}}
-        <span class="user-badge badge-type-{{unbound badge.badge_type_id}}"><i class='fa fa-certificate'></i> {{badge.name}}</span>
+          {{user-badge badge=badge}}
         {{/each}}
         {{#if showMoreBadges}}
           <span class="btn more-user-badges">{{i18n badges.more_badges count=moreBadgesCount}}</span>
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index 8a90a8694c4..d3a7a566c69 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -102,39 +102,12 @@
         font-size: 14px;
         margin-bottom: -8px;
       }
+    }
 
+    .more-user-badges {
+      @extend .user-badge;
+      padding: 4px 8px;
     }
   }
 }
 
-.user-badge, .more-user-badges {
-  font-size: 12px;
-  margin: 0;
-  line-height: 16px;
-  display: inline-block;
-  .fa {
-    padding-right: 5px;
-    font-size: 16px;
-  }
-}
-
-.user-badge {
-  padding: 3px 8px;
-  border: 1px solid $secondary-border-color;
-}
-
-.more-user-badges {
-  padding: 4px 8px;
-}
-
-.badge-type-1 .fa-certificate {
-  color: #A67D3D;
-}
-
-.badge-type-2 .fa-certificate {
-  color: silver;
-}
-
-.badge-type-1 .fa-certificate {
-  color: gold;
-}
diff --git a/app/assets/stylesheets/desktop/user-badges.scss b/app/assets/stylesheets/desktop/user-badges.scss
new file mode 100644
index 00000000000..66b4ac2024f
--- /dev/null
+++ b/app/assets/stylesheets/desktop/user-badges.scss
@@ -0,0 +1,25 @@
+.user-badge {
+  padding: 3px 8px;
+  border: 1px solid $secondary-border-color;
+  font-size: 12px;
+  line-height: 16px;
+  margin: 0;
+  display: inline-block;
+
+  .fa {
+    padding-right: 5px;
+    font-size: 16px;
+  }
+
+  &.badge-type-gold .fa {
+    color: #ffd700;
+  }
+
+  &.badge-type-silver .fa {
+    color: #c0c0c0;
+  }
+
+  &.badge-type-bronze .fa {
+    color: #cd7f32;
+  }
+}