diff --git a/extensions/tags/js/bootstrap.js b/extensions/tags/js/bootstrap.js
index 2a6c7cd3b..b9f12782e 100644
--- a/extensions/tags/js/bootstrap.js
+++ b/extensions/tags/js/bootstrap.js
@@ -133,7 +133,7 @@ app.initializers.add('categories', function() {
   extend(DiscussionHero.prototype, 'items', function(items) {
     var category = this.props.discussion.category();
     if (category) {
-      items.add('category', m('span.category-label', category.title()), {before: 'title'});
+      items.add('category', categoryLabel(category, {inverted: true}), {before: 'title'});
       items.title.content.wrapperClass = 'block-item';
     }
   });
diff --git a/extensions/tags/js/src/helpers/category-label.js b/extensions/tags/js/src/helpers/category-label.js
index 3128136be..8b97723b0 100644
--- a/extensions/tags/js/src/helpers/category-label.js
+++ b/extensions/tags/js/src/helpers/category-label.js
@@ -3,7 +3,7 @@ export default function categoryLabel(category, attrs) {
 
   if (category) {
     attrs.style = attrs.style || {};
-    attrs.style.backgroundColor = category.color();
+    attrs.style[attrs.inverted ? 'color' : 'backgroundColor'] = category.color();
   } else {
     attrs.className = (attrs.className || '')+' uncategorized';
   }
diff --git a/extensions/tags/less/categories.less b/extensions/tags/less/categories.less
index b6cd78c60..7a4950097 100644
--- a/extensions/tags/less/categories.less
+++ b/extensions/tags/less/categories.less
@@ -19,6 +19,8 @@
 
   .discussion-hero & {
     font-size: 14px;
+    background: #fff;
+    padding: 2px 6px;
   }
 
   .post-discussion-moved & {