diff --git a/app/assets/javascripts/discourse/components/badge-card.js.es6 b/app/assets/javascripts/discourse/components/badge-card.js.es6
index 72037d969f9..90013f17135 100644
--- a/app/assets/javascripts/discourse/components/badge-card.js.es6
+++ b/app/assets/javascripts/discourse/components/badge-card.js.es6
@@ -3,7 +3,7 @@ import DiscourseURL from 'discourse/lib/url';
 
 export default Ember.Component.extend({
   size: 'medium',
-  classNameBindings: [':badge-card', 'size', 'navigateOnClick:hyperlink'],
+  classNameBindings: [':badge-card', 'size', 'badge.slug', 'navigateOnClick:hyperlink'],
 
   click(e){
     if (e.target && e.target.nodeName === "A") {
diff --git a/app/assets/javascripts/discourse/templates/badges/show.hbs b/app/assets/javascripts/discourse/templates/badges/show.hbs
index 9ba1115e0eb..792f193b15c 100644
--- a/app/assets/javascripts/discourse/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/templates/badges/show.hbs
@@ -1,4 +1,4 @@
-<div class='container show-badge'>
+<div class='container show-badge {{model.slug}}'>
   <h1>
     {{#link-to 'badges.index'}}{{i18n 'badges.title'}}{{/link-to}}
      /
@@ -20,7 +20,7 @@
   </div>
 
   {{#if userBadges}}
-    <div class="user-badges">
+    <div class="user-badges {{model.slug}}">
       {{#load-more selector=".badge-info" action="loadMore"}}
         {{#each userBadges as |ub|}}
           {{#user-info user=ub.user size="medium" class="badge-info" date=ub.granted_at}}