diff --git a/framework/core/js/forum/src/components/discussion-hero.js b/framework/core/js/forum/src/components/discussion-hero.js
new file mode 100644
index 000000000..ba1fc6732
--- /dev/null
+++ b/framework/core/js/forum/src/components/discussion-hero.js
@@ -0,0 +1,27 @@
+import Component from 'flarum/component';
+import ItemList from 'flarum/utils/item-list';
+import listItems from 'flarum/helpers/list-items';
+
+export default class DiscussionHero extends Component {
+  view() {
+    var discussion = this.props.discussion;
+
+    return m('header.hero.discussion-hero', [
+      m('div.container', m('ul.discussion-hero-items', listItems(this.items().toArray())))
+    ]);
+  }
+
+  items() {
+    var items = new ItemList();
+    var discussion = this.props.discussion;
+
+    var badges = discussion.badges().toArray();
+    if (badges.length) {
+      items.add('badges', m('ul.badges', listItems(badges)));
+    }
+
+    items.add('title', m('h2.discussion-title', discussion.title()));
+
+    return items;
+  }
+}
diff --git a/framework/core/js/forum/src/components/discussion-page.js b/framework/core/js/forum/src/components/discussion-page.js
index 12ec4e96c..b98384a34 100644
--- a/framework/core/js/forum/src/components/discussion-page.js
+++ b/framework/core/js/forum/src/components/discussion-page.js
@@ -3,6 +3,7 @@ import ItemList from 'flarum/utils/item-list';
 import IndexPage from 'flarum/components/index-page';
 import PostStream from 'flarum/utils/post-stream';
 import DiscussionList from 'flarum/components/discussion-list';
+import DiscussionHero from 'flarum/components/discussion-hero';
 import StreamContent from 'flarum/components/stream-content';
 import StreamScrubber from 'flarum/components/stream-scrubber';
 import ComposerReply from 'flarum/components/composer-reply';
@@ -125,12 +126,7 @@ export default class DiscussionPage extends Component {
     return m('div', {config: this.onload.bind(this)}, [
       app.cache.discussionList ? m('div.index-area.paned', {config: this.configIndex.bind(this)}, app.cache.discussionList.view()) : '',
       m('div.discussion-area', discussion ? [
-        m('header.hero.discussion-hero', [
-          m('div.container', [
-            m('ul.badges', listItems(discussion.badges().toArray())), ' ',
-            m('h2.discussion-title', discussion.title())
-          ])
-        ]),
+        DiscussionHero.component({discussion}),
         m('div.container', [
           m('nav.discussion-nav', [
             m('ul', listItems(this.sidebarItems().toArray()))
diff --git a/framework/core/less/forum/discussion.less b/framework/core/less/forum/discussion.less
index ddf8b0dd8..9c4451bdb 100644
--- a/framework/core/less/forum/discussion.less
+++ b/framework/core/less/forum/discussion.less
@@ -5,6 +5,18 @@
   & .badges {
     margin-right: 5px;
   }
+  & .discussion-hero-items {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    & > li {
+      display: inline-block;
+    }
+    & .block-item {
+      display: block;
+    }
+  }
 }
 .discussion-title {
   display: inline;