diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index d4ff996ce49..9111392d595 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -25,7 +25,7 @@
   &.bar { //bar category style
     line-height: 1.25;
     margin-right: 5px;
-    
+
     span.badge-category {
       color: $primary !important;
       padding: 3px;
@@ -88,8 +88,10 @@
    span {
      &.badge-category-parent-bg { //subcategory style
        width: 5px;
+       line-height: 1;
        & + .badge-category-bg {
          width: 5px;
+         line-height: 1;
        }
      }
    }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 97231859588..63af52754a6 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -139,7 +139,7 @@ body {
   }
 
   .not-found-topic {
-    a[href] { margin-right: 10px; line-height: 2;}
+    > a { margin-right: 10px; line-height: 2;}
   }
 
   .page-not-found-topics .span8 {
diff --git a/lib/category_badge.rb b/lib/category_badge.rb
index 26ddb74788f..034b12b8262 100644
--- a/lib/category_badge.rb
+++ b/lib/category_badge.rb
@@ -1,5 +1,10 @@
 module CategoryBadge
 
+  def self.category_stripe(color, classes)
+    style = color ? "style='background-color: ##{color};'" : ''
+    "<span class='#{classes}' #{style}></span>"
+  end
+
   def self.html_for(category, opts=nil)
     opts = opts || {}
 
@@ -9,20 +14,24 @@ module CategoryBadge
     # By default hide uncategorized
     return "" if category.uncategorized? && !opts[:show_uncategorized]
 
-    category_url = "#{Discourse.base_url}#{category.url}"
+    extra_classes = "#{opts[:extra_classes]} #{SiteSetting.category_style}"
 
-    result = ""
+    result = ''
 
-    result << "<a href='#{category_url}' style='background-color: ##{category.color}; font-size: 12px; padding: 2px 1px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
-
-    unless category.parent_category_id.nil?
+    unless category.parent_category_id.nil? || opts[:hide_parent]
       parent_category = Category.find_by(id: category.parent_category_id)
-      result << "<a href='#{category_url}' style='background-color: ##{parent_category.color}; font-size: 12px; padding: 2px 1px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
+      result << category_stripe(parent_category.color, 'badge-category-parent-bg')
     end
+    result << category_stripe(category.color, 'badge-category-bg')
 
-    result << "<a href='#{category_url}' style='font-size: 12px; font-weight: bold; margin-left: 3px; color: #222;'>#{category.name}</a>"
+    class_names = 'badge-category clear-badge'
+    text_color = "##{category.text_color}"
+    description = category.description_text ? "title='#{category.description_text.html_safe}'" : ''
 
-    "<span class='badge-wrapper'>#{result}</span>"
+    result << "<span style='color: #{text_color};' data-drop-close='true' class='#{class_names}'
+                 #{description}'>"
+
+    result << category.name.html_safe << '</span>'
+    "<a class='badge-wrapper #{extra_classes}' href='#{Discourse.base_url}#{category.url}'>#{result}</a>"
   end
-
 end