diff --git a/app/assets/javascripts/discourse/controllers/badges/show.js.es6 b/app/assets/javascripts/discourse/controllers/badges/show.js.es6
index afe640bc6..ad83dd803 100644
--- a/app/assets/javascripts/discourse/controllers/badges/show.js.es6
+++ b/app/assets/javascripts/discourse/controllers/badges/show.js.es6
@@ -61,8 +61,12 @@ export default Ember.Controller.extend({
     this.set("controllers.application.showFooter", !this.get("canLoadMore"));
   }.observes("canLoadMore"),
 
+  longDescription: function(){
+    return Discourse.Emoji.unescape(this.get('model.long_description'));
+  }.property('model.long_description'),
+
   showLongDescription: function(){
-    return window.location.search.match("long-description");
+    return this.get('model.long_description');
   }.property('userBadges')
 
 });
diff --git a/app/assets/javascripts/discourse/templates/badges/show.hbs b/app/assets/javascripts/discourse/templates/badges/show.hbs
index e41eb32ef..2c30458fa 100644
--- a/app/assets/javascripts/discourse/templates/badges/show.hbs
+++ b/app/assets/javascripts/discourse/templates/badges/show.hbs
@@ -5,6 +5,12 @@
     {{model.displayName}}
   </h1>
 
+  {{#if showLongDescription}}
+  <div class='long-description banner'>
+    {{{longDescription}}}
+  </div>
+  {{/if}}
+
   <div class='badges-listing'>
     <div class='row'>
       <div class='badge'>{{user-badge badge=model}}</div>
@@ -18,11 +24,6 @@
   </div>
 
 
-  {{#if showLongDescription}}
-  <div class='long-description banner'>
-    {{{long_description}}}
-  </div>
-  {{/if}}
 
   {{#if user}}
   <div class='badge-user-info'>
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 0b1df1891..cd475c014 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -241,5 +241,6 @@
 
 .long-description.banner {
   width: 88%;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
+  margin-top: 15px;
 }