diff --git a/assets/scripts/app/helpers/handlebars.coffee b/assets/scripts/app/helpers/handlebars.coffee
index 99b8c154..08a59ab5 100644
--- a/assets/scripts/app/helpers/handlebars.coffee
+++ b/assets/scripts/app/helpers/handlebars.coffee
@@ -331,6 +331,14 @@ Ember.Handlebars.helper 'formatMessage', (message, options) ->
 Ember.registerBoundHelper 'formatConfig', (config, options) ->
   safe Travis.Helpers.formatConfig(config)
 
+Ember.registerBoundHelper 'shortCompareShas', (url, options) ->
+  path = Travis.Helpers.pathFrom(url)
+  if path.indexOf('...') >= 0
+    shas = path.split('...')
+    "#{shas[0][0..6]}..#{shas[1][0..6]}"
+  else
+    path
+
 Ember.registerBoundHelper 'formatLog', (log, options) ->
   parentView =  @get 'parentView'
   repo = parentView.get(options.repo)
diff --git a/assets/scripts/app/templates/builds/show.hbs b/assets/scripts/app/templates/builds/show.hbs
index 325cfef2..aee204f7 100644
--- a/assets/scripts/app/templates/builds/show.hbs
+++ b/assets/scripts/app/templates/builds/show.hbs
@@ -1,56 +1,57 @@
 {{#if loading}}
   <span>Loading</span>
 {{else}}
-  <dl id="summary">
-    <div class="left">
-      <dt>Build</dt>
-      <dd class="number">
-        <span class="status"></span>
-        {{#if build.id}}
-          {{#if build.repo.slug}}
-            {{#link-to "build" repo build}}{{build.number}}{{/link-to}}
-          {{/if}}
-        {{/if}}
-      </dd>
-      <dt>State</dt>
-      <dd class="state">{{capitalize build.state}}</dd>
-      <dt class="finished_at_label">Finished</dt>
-      <dd class="finished_at timeago" {{bind-attr title="build.formattedFinishedAt"}}>{{formatTime build.finishedAt}}</dd>
-      <dt>Duration</dt>
-      <dd class="duration" {{bind-attr title="startedAt"}}>{{formatDuration build.duration}}</dd>
+  <div id="new-summary">
+    <div class="right">
+      <div class="build-status">
+        {{#link-to "build" repo build}}#{{build.number}} {{build.state}}{{/link-to}}
+      </div>
+
+      <div class="runtime">
+         ran for {{formatDuration build.duration}} 
+      </div>
+
+      <div class="finished">
+        {{formatTime build.finishedAt}}
+      </div>
+    </div>
+ 
+    <div class="branch" {{bind-attr title="build.commit.branch"}}>
+      {{build.commit.branch}}
+    </div>
+    -
+    <div class="subject">
+      {{formatMessage build.commit.subject repoBinding=build.repo}}
     </div>
 
-    {{#with build}}
-      <div class="right">
-        <dt>Commit</dt>
-        <dd class="commit"><a {{bind-attr href="controller.urlGithubCommit"}}>{{formatCommit commit}}</a></dd>
-        {{#if pullRequest}}
-          <dt>Pull Request</dt>
-          <dd class="pull_request"><a {{bind-attr href="commit.compareUrl"}}>#{{pullRequestNumber}} {{pullRequestTitle}}</a></dd>
-        {{else}}
-          {{#if commit.compareUrl}}
-            <dt>Compare</dt>
-            <dd class="compare"><a {{bind-attr href="commit.compareUrl"}}>{{pathFrom commit.compareUrl}}</a></dd>
-          {{/if}}
-        {{/if}}
+    <pre class="body">
+{{formatMessage build.commit.body repoBinding=build.repo pre=true}}
+    </pre>
+
+    <div class="footer">
+      <div class="author">
         {{#if commit.authorName}}
-          <dt>Author</dt>
-          <dd class="author">{{commit.authorName}}</dd>
+          <div><img src="https://travis-ci.org/images/mailer/mascot-avatar-40px.png"/>{{commit.authorName}} authored</div>
         {{/if}}
         {{#if commit.committerName}}
-          <dt>Committer</dt>
-          <dd class="committer">{{commit.committerName}}</dd>
+          <div><img src="https://travis-ci.org/images/mailer/mascot-avatar-40px.png"/>{{commit.committerName}} committed</div>
         {{/if}}
       </div>
-    {{/with}}
 
-
-    <dt>Message</dt>
-    <dd class="message">
-      {{formatMessage build.commit.subject repoBinding=build.repo}}
-      <pre class="body">{{formatMessage build.commit.body repoBinding=build.repo pre=true}}</pre>
-    </dd>
-  </dl>
+      <div class="commit-changes">
+        <div><a class="commit" {{bind-attr href="controller.urlGithubCommit"}}>Commit {{formatSha commit.sha}}</a></div><img src="/images/icons/github.png"/>
+        <div>
+        {{#if build.pullRequest}}
+          <a class="compare" {{bind-attr href="build.commit.compareUrl"}} >#{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a><img src="/images/icons/github.png"/>
+        {{else}}
+          {{#if build.commit.compareUrl}}
+            <a class="compare" {{bind-attr href="build.commit.compareUrl"}}>Compare {{shortCompareShas build.commit.compareUrl}}</a><img src="/images/icons/github.png"/>
+          {{/if}}
+        {{/if}}
+        </div>
+      </div>
+    </div>
+  </div>
 
   {{#unless build.isMatrix}}
     {{view Travis.AnnotationsView annotationsBinding="build.jobs.firstObject.annotations"}}
diff --git a/assets/scripts/app/templates/jobs/show.hbs b/assets/scripts/app/templates/jobs/show.hbs
index 0a2ad988..c9d8062e 100644
--- a/assets/scripts/app/templates/jobs/show.hbs
+++ b/assets/scripts/app/templates/jobs/show.hbs
@@ -1,53 +1,57 @@
 {{#if job.isLoaded}}
   <div {{bind-attr class="view.color"}}>
-    <dl id="summary">
-      <div class="left">
-        <dt>Job</dt>
-        <dd class="number">
-          <span class="status"></span>
-          {{#if job.id}}
-            {{#if job.repo.slug}}
-              {{#link-to "job" repo job}}{{job.number}}{{/link-to}}
-            {{/if}}
-          {{/if}}
-        </dd>
-        <dt>State</dt>
-        <dd class="state">{{capitalize job.state}}</dd>
-        <dt class="finished_at_label">Finished</dt>
-        <dd class="finished_at timeago" {{bind-attr title="job.formattedFinishedAt"}}>{{formatTime job.finishedAt}}</dd>
-        <dt>Duration</dt>
-        <dd class="duration" {{bind-attr title="startedAt"}}>{{formatDuration job.duration}}</dd>
+    <div id="new-summary">
+      <div class="right">
+        <div class="build-status">
+          {{#link-to "job" repo job}}#{{job.number}} {{job.state}}{{/link-to}}
+        </div>
+
+        <div class="runtime">
+           ran for {{formatDuration job.duration}} 
+        </div>
+
+        <div class="finished">
+          {{formatTime job.finishedAt}}
+        </div>
+      </div>
+   
+      <div class="branch" {{bind-attr title="job.commit.branch"}}>
+        {{job.commit.branch}}
+      </div>
+      -
+      <div class="subject">
+        {{formatMessage job.commit.subject repoBinding=job.repo}}
       </div>
 
-      {{#with job}}
-        <div class="right">
-          <dt>Commit</dt>
-          <dd class="commit"><a {{bind-attr href="controller.urlGithubCommit"}}>{{formatCommit commit}}</a></dd>
-          {{#if build.pullRequest}}
-            <dt></dt>
-            <dd class="pull_request"><a {{bind-attr href="commit.compareUrl"}}>#{{build.pullRequestNumber}} {{build.pullRequestTitle}}</a></dd>
-          {{else}}
-            {{#if commit.compareUrl}}
-              <dt>Compare</dt>
-              <dd class="compare"><a {{bind-attr href="commit.compareUrl"}}>{{pathFrom commit.compareUrl}}</a></dd>
-            {{/if}}
-          {{/if}}
+      <pre class="body">
+{{formatMessage job.commit.body repoBinding=job.repo pre=true}}
+      </pre>
+
+      <div class="footer">
+        <div class="author">
           {{#if commit.authorName}}
-            <dt>Author</dt>
-            <dd class="author">{{commit.authorName}}</dd>
+            <img src="https://travis-ci.org/images/mailer/mascot-avatar-40px.png"/>{{commit.authorName}} authored
           {{/if}}
           {{#if commit.committerName}}
-            <dt>Committer</dt>
-            <dd class="committer">{{commit.committerName}}</dd>
+            <img src="https://travis-ci.org/images/mailer/mascot-avatar-40px.png"/>{{commit.committerName}} committed
           {{/if}}
         </div>
-      {{/with}}
-      <dt>Message</dt>
-      <dd class="message">
-        {{formatMessage job.commit.subject repoBinding=job.repo}}
-        <pre>{{formatMessage job.commit.body repoBinding=job.repo pre=true}}</pre>
-      </dd>
-    </dl>
+
+        <div class="commit-changes">
+          <div><a class="commit" {{bind-attr href="controller.urlGithubCommit"}}>Commit {{formatSha job.commit.sha}}</a><img src="/images/icons/github.png" height="15"/></div>
+          <div>
+          {{#if job.build.pullRequest}}
+            <a class="compare" {{bind-attr href="job.commit.compareUrl"}} >#{{job.build.pullRequestNumber}}: {{job.build.pullRequestTitle}}</a><img src="/images/icons/github.png"/>
+          {{else}}
+            {{#if job.commit.compareUrl}}
+              <a class="compare" {{bind-attr href="job.commit.compareUrl"}}>Compare {{shortCompareShas job.commit.compareUrl}}</a><img src="/images/icons/github.png"/>
+            {{/if}}
+          {{/if}}
+          </div>
+          
+        </div>
+      </div>
+    </div>
 
     {{view Travis.AnnotationsView annotationsBinding="view.annotations"}}
 
diff --git a/assets/scripts/spec/support/expectations.coffee b/assets/scripts/spec/support/expectations.coffee
index b5f168ed..60c3be99 100644
--- a/assets/scripts/spec/support/expectations.coffee
+++ b/assets/scripts/spec/support/expectations.coffee
@@ -9,36 +9,36 @@
     equal($("#tab_#{name}").hasClass('display-inline'), !tab.hidden, "#{name} tab should have class display-inline") if name in ['build', 'job']
 
 @displaysSummaryBuildLink = (link, number) ->
-  element = $('#summary .number a')
+  element = $('#new-summary .build-status a')
   equal( element.attr('href') , link)
-  equal( element.text().trim() , "#{number}")
+  equal( element.text().trim() , "##{number} started")
 
 @displaysSummary = (data) ->
-  element = $('#summary .left:first-child dt:first-child')
-  equal(element.text(), $.camelize(data.type))
-
-  element = $('#summary .number a')
+  element = $('#new-summary .build-status a')
   equal(element.attr('href'), "/#{data.repo}/#{data.type}s/#{data.id}")
 
-  element = $('#summary .finished_at')
-  equal(element.text(), data.finishedAt)
+  element = $('#new-summary .finished')
+  equal(element.text().trim(), data.finishedAt)
 
-  element = $('#summary .duration')
-  equal(element.text(), data.duration)
+  element = $('#new-summary .runtime')
+  equal(element.text().trim(), "ran for #{data.duration}")
 
-  element = $('#summary .commit a')
+  element = $('#new-summary .commit-changes a.commit')
   equal(element.attr('href'), "https://github.com/#{data.repo}/commit/#{data.commit}")
 
-  element = $('#summary .commit a')
-  equal(element.text(), "#{data.commit} (#{data.branch})")
+  element = $('#new-summary .commit-changes a.commit')
+  equal(element.text(), "Commit #{data.commit}")
 
-  element = $('#summary .compare a')
+  element = $('#new-summary .branch')
+  equal(element.text().trim(), data.branch)
+
+  element = $('#new-summary .commit-changes a.compare')
   equal(element.attr('href'), "https://github.com/compare/#{data.compare}")
 
-  element = $('#summary .compare a')
-  equal(element.text(), data.compare)
+  element = $('#new-summary .commit-changes a.compare')
+  equal(element.text(), "Compare #{data.compare}")
 
-  element = $('#summary .message')
+  element = $('#new-summary .subject')
   equal(element.text().trim(), data.message)
 
 @displaysLog = (lines) ->
diff --git a/assets/styles/main/summary.sass b/assets/styles/main/summary.sass
index 783d74a5..ca92f101 100644
--- a/assets/styles/main/summary.sass
+++ b/assets/styles/main/summary.sass
@@ -1,5 +1,124 @@
 @import "_mixins/all"
 
+.green .build-status
+  background-color: #0d8136
+
+.yellow .build-status
+  background-color: #e7d700
+
+.red .build-status
+  background-color: #e10000
+
+.gray .build-status
+  background-color: #a8a8a9
+
+#new-summary
+  @include clearfix
+  @include border-radius(5px)
+  background-color: #fafafa
+  min-height: 30px
+  padding: 5px 15px
+  margin-bottom: 20px
+  padding-bottom: 10px
+
+  .branch
+    font-weight: bold
+    font-size: 16px
+    max-width: 200px
+    display: inline-block
+    margin-top: 10px
+    overflow: hide
+
+  .subject
+    display: inline
+    font-size: 15px
+    overflow: hide
+    margin-top: 10px
+
+  .body
+    min-width: 500px
+    display: block
+    min-height: 30px
+    font-size: 12px
+    font-family: Monaco, 'Liberation Mono', Courier, monospace
+    margin-bottom: 0px
+
+    a
+      text-decoration: underline
+  
+  .build-status
+    @include border-radius(4px)
+    float: right
+    min-height: 30px
+    min-width: 90px
+    color: white
+    padding-top: 5px
+    padding-left: 10px
+    padding-right: 10px
+    font-size: 16px
+    text-align: center
+
+    a
+      color: white
+
+  .runtime
+    float: right
+    font-size: 11px
+    display: block
+    width: 100%
+    text-align: right
+    line-height: 13px
+    margin-top: 5px
+
+  .finished
+    float: right
+    font-size: 11px
+    width: 100%
+    text-align: right
+    line-height: 20px
+
+  .right
+    margin-top: 10px
+    float: right
+    width: 150px
+    font-size: 11px
+
+  .footer
+    a
+      text-decoration: underline
+
+    img
+      vertical-align: middle
+
+    .commit-changes
+      text-align: right
+      width: inherit
+      margin-top: 0px
+      float: right
+
+      div
+        display: inline
+        clear: none
+
+      img
+        margin-right: 2px
+        margin-left: 4px
+        height: 15px
+        width: 15px
+
+    .author
+      float: left
+
+      div
+        display: inline
+        clear: none
+
+      img
+        height: 15px
+        width: 15px
+        margin-right: 4px
+        margin-left: 2px
+
 #summary
   margin: 0 0 0 12px
   @include clearfix