diff --git a/app/components/build-header.coffee b/app/components/build-header.coffee
new file mode 100644
index 00000000..8f85adb8
--- /dev/null
+++ b/app/components/build-header.coffee
@@ -0,0 +1,19 @@
+`import Ember from 'ember'`
+`import { gravatarImage } from 'travis/utils/urls'`
+`import GithubUrlPropertievs from 'travis/mixins/github-url-properties'`
+
+BuildHeaderComponent = Ember.Component.extend
+
+  tagName: 'section'
+  classNames: ['build-header']
+  classNameBindings: ['item.state']
+
+  urlCommitterGravatarImage: (->
+    gravatarImage(@get('commit.committerEmail'), 40)
+  ).property('commit.committerEmail')
+
+  urlAuthorGravatarImage: (->
+    gravatarImage(@get('commit.authorEmail'), 40)
+  ).property('commit.authorEmail')
+
+`export default BuildHeaderComponent`
diff --git a/app/controllers/build.coffee b/app/controllers/build.coffee
index b25d61b1..6470f9a0 100644
--- a/app/controllers/build.coffee
+++ b/app/controllers/build.coffee
@@ -21,14 +21,6 @@ Controller = Ember.Controller.extend GithubUrlPropertievs,
     @get('build.isLoading')
   ).property('build.isLoading')
 
-  urlCommitterGravatarImage: (->
-    gravatarImage(@get('commit.committerEmail'), 40)
-  ).property('commit.committerEmail')
-
-  urlAuthorGravatarImage: (->
-    gravatarImage(@get('commit.authorEmail'), 40)
-  ).property('commit.authorEmail')
-
   buildStateDidChange: (->
     if @get('sendFaviconStateChanges')
       @send('faviconStateDidChange', @get('build.state'))
diff --git a/app/templates/build.hbs b/app/templates/build.hbs
index 1210c06c..41e53594 100644
--- a/app/templates/build.hbs
+++ b/app/templates/build.hbs
@@ -2,70 +2,7 @@
   {{loading-indicator}}
 {{else}}
 
-  <section class="build-header {{build.state}}">
-    <div class="build-commit">
-      <h2 class="build-title {{build.state}}">
-        {{status-icon status=build.state}}
-        {{#if build.pullRequest}}
-          <small class="commit-branch" title={{build.pullRequestTitle}}>Pull Request #{{build.pullRequestNumber}}</small>
-          {{build.pullRequestTitle}}
-        {{else}}
-          <small class="commit-branch" title={{build.commit.branch}}>{{build.commit.branch}}</small>
-          {{format-message build.commit.subject repo=build.repo}}
-        {{/if}}
-      </h2>
-      <div class="commit-info">
-        <p class="commit-description">
-          {{#if build.pullRequest}}
-            {{format-message build.commit.subject repo=build.repo}}<br>
-          {{/if}}
-          <span class="monospace">{{format-message build.commit.body repo=build.repo pre=true}}</span>
-        </p>
-        <ul class="list-icon">
-          <li>
-            <a class="commit-commit" href={{urlGithubCommit}}>
-              Commit {{format-sha commit.sha}}</a>
-          </li>
-          <li>
-            {{#if build.pullRequest}}
-              <a class="commit-compare" title="See the commit on GitHub" href={{build.commit.compareUrl}}>#{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a>
-            {{else}}
-              {{#if build.commit.compareUrl}}
-                <a class="commit-compare" title="See the diff on GitHub" href={{build.commit.compareUrl}}>
-                Compare {{short-compare-shas build.commit.compareUrl}}</a>
-              {{/if}}
-            {{/if}}
-          </li>
-        </ul>
-        <p class="commit-author">
-          {{#if commit.authorName}}
-            <img src={{urlAuthorGravatarImage}}>{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
-          {{/if}}
-          {{#unless commit.authorIsCommitter}}
-            {{#if commit.committerName}}
-              <img src={{urlCommitterGravatarImage}}>{{commit.committerName}} committed
-            {{/if}}
-          {{/unless}}
-        </p>
-      </div>
-    </div>
-
-    <div class="build-info">
-      <h3 class="build-status {{build.state}}">
-        {{#link-to "build" repo build}}
-          {{status-icon status=build.state}} #{{build.number}} {{humanize-state build.state}}{{/link-to}}
-      </h3>
-      <ul class="list-icon">
-        <li><span title="{{format-duration build.duration}}" class="commit-clock">{{#if build.isFinished}}ran{{else}}running{{/if}} for {{format-duration build.duration}}</span></li>
-        {{!-- <li><span>Elapsed time</span></li> --}}
-        <li><span title="{{pretty-date build.finishedAt}}" class="commit-calendar">{{format-time build.finishedAt}}</span></li>
-      </ul>
-    </div>
-
-    <div class="build-tools">
-      {{repo-actions build=build repo=build.repo user=auth.currentUser}}
-    </div>
-  </section>
+  {{build-header item=build user=auth.currentUser commit=commit}}
 
   {{#unless build.isMatrix}}
     {{view 'annotations' annotations=build.jobs.firstObject.annotations}}
diff --git a/app/templates/components/build-header.hbs b/app/templates/components/build-header.hbs
new file mode 100644
index 00000000..05133880
--- /dev/null
+++ b/app/templates/components/build-header.hbs
@@ -0,0 +1,62 @@
+<div class="build-commit">
+  <h2 class="build-title {{item.state}}">
+    {{status-icon status=item.state}}
+    {{#if item.pullRequest}}
+      <small class="commit-branch" title={{item.pullRequestTitle}}>Pull Request #{{item.pullRequestNumber}}</small>
+      {{item.pullRequestTitle}}
+    {{else}}
+      <small class="commit-branch" title={{item.commit.branch}}>{{item.commit.branch}}</small>
+      {{format-message item.commit.subject repo=item.repo}}
+    {{/if}}
+  </h2>
+  <div class="commit-info">
+    <p class="commit-description">
+      {{#if item.pullRequest}}
+        {{format-message item.commit.subject repo=item.repo}}<br>
+      {{/if}}
+      <span class="monospace">{{format-message item.commit.body repo=item.repo pre=true}}</span>
+    </p>
+    <ul class="list-icon">
+      <li>
+        <a class="commit-commit" href={{urlGithubCommit}}>
+          Commit {{format-sha commit.sha}}</a>
+      </li>
+      <li>
+        {{#if item.pullRequest}}
+          <a class="commit-compare" title="See the commit on GitHub" href={{item.commit.compareUrl}}>#{{item.pullRequestNumber}}: {{item.pullRequestTitle}}</a>
+        {{else}}
+          {{#if item.commit.compareUrl}}
+            <a class="commit-compare" title="See the diff on GitHub" href={{item.commit.compareUrl}}>
+            Compare {{short-compare-shas item.commit.compareUrl}}</a>
+          {{/if}}
+        {{/if}}
+      </li>
+    </ul>
+    <p class="commit-author">
+      {{#if commit.authorName}}
+        <img src={{urlAuthorGravatarImage}}>{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
+      {{/if}}
+      {{#unless commit.authorIsCommitter}}
+        {{#if commit.committerName}}
+          <img src={{urlCommitterGravatarImage}}>{{commit.committerName}} committed
+        {{/if}}
+      {{/unless}}
+    </p>
+  </div>
+</div>
+
+<div class="build-info">
+  <h3 class="build-status {{item.state}}">
+    {{#link-to "build" repo item}}
+      {{status-icon status=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}}
+  </h3>
+  <ul class="list-icon">
+    <li><span title="{{format-duration item.duration}}" class="commit-clock">{{#if item.isFinished}}ran{{else}}running{{/if}} for {{format-duration item.duration}}</span></li>
+    {{!-- <li><span>Elapsed time</span></li> --}}
+    <li><span title="{{pretty-date item.finishedAt}}" class="commit-calendar">{{format-time item.finishedAt}}</span></li>
+  </ul>
+</div>
+
+<div class="build-tools">
+  {{repo-actions build=item repo=item.repo user=user}}
+</div>