diff --git a/src/main/resources/static/zuul-status-view.html b/src/main/resources/static/zuul-status-view.html
index a6063b9..e50beab 100644
--- a/src/main/resources/static/zuul-status-view.html
+++ b/src/main/resources/static/zuul-status-view.html
@@ -14,7 +14,7 @@
 
 <dom-module id="zuul-status-view">
   <template>
-    <style>
+    <style include="shared-styles">
       #view-container {
         display: block;
       }
@@ -41,8 +41,8 @@
         overflow: hidden;
         height: 20px;
         margin-bottom: 20px;
-        background-color: #f5f5f5;
-        border-radius: 4px;
+        background-color: #ededed;
+        border-radius: 1px;
         -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
         box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
       }
@@ -50,87 +50,86 @@
         float: left;
         width: 0;
         height: 100%;
-        font-size: 12px;
+        font-size: 11px;
         line-height: 20px;
         color: #fff;
         text-align: center;
-        background-color: #428bca;
+        background-color: #39a5dc;
         -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
         box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
         -webkit-transition: width .6s ease;
+        -o-transition: width .6s ease;
         transition: width .6s ease;
       }
-      .zuul-job-result {
-        float: right;
-        width: 70px;
-        height: 15px;
-        margin: 2px 0 0 0;
-      }
       #progressBar {
         width: var(--progress-bar-width, 0%);
       }
-      .genericList th {
-        white-space: nowrap;
-      }
-      .genericList th,
-      .genericList td {
-        padding-right: 1rem;
-      }
-      .genericList tr th:first-of-type,
-      .genericList tr td:first-of-type {
-        padding-left: 1rem;
-      }
-      .genericList td {
-        flex-shrink: 0;
-      }
-      .genericList .topHeader {
-        color: var(--primary-text-color);
-        font-weight: var(--font-weight-bold);
-        text-align: left;
-        vertical-align: middle
-      }
-      .genericList a {
-        color: var(--primary-text-color);
-        text-decoration: none;
-      }
-      .genericList a:hover {
-        text-decoration: underline;
-      }
       #list {
         padding-bottom: 1em;
       }
-      .zuul-job-result {
-        float: right;
-        width: 70px;
-        height: 15px;
-        margin: 2px 0 0 0;
-      }
-      .label {
+      .labels {
         display: inline;
         padding: .2em .6em .3em;
-        font-size: 75%;
-        font-weight: 700;
+        font-size: 100%;
+        font-weight: 600;
         line-height: 1;
         color: #fff;
         text-align: center;
         white-space: nowrap;
         vertical-align: baseline;
-        border-radius: .25em;
+        border-radius: 0;
       }
       .label-danger {
-        background-color: #d9534f;
+        background-color: #c00;
       }
       .label-default {
-        background-color: #999;
+        background-color: #9c9c9c;
       }
       .label-info {
-        background-color: #5bc0de;
+        background-color: #00659c;
       }
       .label-success {
-        background-color: #5cb85c;
+        background-color: #3f9c35;
       }
       .label-warning {
-        background-color: #f0ad4e;
+        background-color: #ec7a08;
+      }
+      .zuul-job-result {
+        float: right;
+        width: 90px;
+        height: 20px;
+        margin: 2px 5px 0;
+        padding: 4px;
+      }
+      a {
+        color: var(--primary-text-color);
+        cursor: pointer;
+        display: inline-block;
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      .time, {
+        align-items: center;
+        color: #757575;
+        display: flex;
+      }
+      #icon {
+        margin-right: 0.5em;
+      }
+    </style>
+    <style include="gr-change-list-styles">
+      :host {
+        font-size: var(--font-size-normal);
+      }
+      .padding {
+        width: var(--default-horizontal-margin);
+        padding: 0.5em;
+      }
+      #changeList {
+        border-collapse: collapse;
+        width: 100%;
       }
     </style>
     <template is="dom-if" if="[[zuulUrl]]">
@@ -150,51 +149,86 @@
         </div>
         <template is="dom-if" if="[[!zuulDisable]]" restamp="true">
           <div class="bottom container">
-            <table id="list" class="genericList">
-              <tr class="headerRow">
-                <th class="pipeline topHeader">Pipeline</th>
-                <th class="jobName topHeader">Job Name</th>
-                <th class="progressName topHeader">Progress</th>
-              </tr>
-              <tbody>
-                <template is="dom-repeat" items=[[_response]] as="response">
-                  <template is="dom-repeat" items=[[response.jobs]] as="jobs">
-                    <tr class="table">
-                      <td class="pipeline">
-                        [[jobs.pipeline]]
-                      </td>
-                      <td class="jobName">
-                        <a href="[[_computeReportURL(jobs)]]" target="_blank"
-                           hidden$="[[!jobs.name]]">
-                          [[jobs.name]]
-                        </a>
-                      </td>
-                      <td class="progressName">
-                        <template is="dom-if" if="[[_getResults(jobs, 'true', 'in progress')]]">
-                          <div class="progress zuul-job-result">
-                            <div class="progress-bar"
-                              id="progressBar"
-                              role="progressbar"
-                              aria-valuenow$="[[_progressPercent(jobs)]]"
-                              aria-valuemin="0"
-                              aria-valuemax="100"></div>
-                          </div>
-                        </template>
-                        <template is="dom-if" if="[[!_getResults(jobs, 'true', 'in progress')]]">
-                          <span class$="zuul-job-result label [[_renderJobStatusLabel(jobs)]]">
-                            [[_getResults(jobs)]]
-                          </span>
-                        </template>
-                      </td>
-                    </tr>
-                  </template>
+            <table id="changeList">
+              <template is="dom-repeat" items=[[_response]] as="response">
+                <tr class="groupHeader">
+                  <td class="padding">
+                    <template is="dom-if" if="[[!_isFailing(response)]]" restamp="true">
+                      <span class="fullStatus success">
+                        <iron-icon id="icon" icon="gr-icons:check" style="color: #388E3C;"></iron-icon>
+                      </span>
+                    </template>
+                    <template is="dom-if" if="[[_isFailing(response)]]" restamp="true">
+                      <span class="fullStatus failed">
+                        <iron-icon id="icon" icon="gr-icons:close" style="color: #D32F2F;"></iron-icon>
+                      </span>
+                    </template>
+                  </td>
+                  <td class="cell" colspan="15">[[response.name]]</td>
+                </tr>
+                <template is="dom-repeat" items=[[response.results.jobs]] as="jobs">
+                  <tr class="table">
+                    <td class="padding"></td>
+                    <td class="cell jobName">
+                      <iron-icon id="icon" icon="zuul-icons:code"></iron-icon>
+                      <a href="[[_computeReportURL(jobs)]]" target="_blank"
+                         hidden$="[[!jobs.name]]">
+                        [[jobs.name]]
+                      </a>
+                    </td>
+                    <td class="cell">
+                      <div class="time">
+                        <iron-icon id="icon" icon="zuul-icons:query-builder"></iron-icon>
+                        <div class="remainingTime">
+                          [[_getRemainingTime(response.results.remaining_time)]]
+                        </div>
+                      </div>
+                    </td>
+                    <td class="cell">
+                      <div class="time">
+                        <iron-icon id="icon" icon="zuul-icons:today"></iron-icon>
+                        <div class="enqueueTime">
+                          [[_getEnqueueTime(response.results.enqueue_time)]]
+                        </div>
+                      </div>
+                    </td>
+                    <td class="cell progressName">
+                      <template is="dom-if" if="[[_getResults(jobs, 'true', 'in progress')]]" restamp="true">
+                        <div class="progress zuul-job-result">
+                          <div class="progress-bar"
+                            id="progressBar"
+                            role="progressbar"
+                            aria-valuenow$="[[_progressPercent(jobs)]]"
+                            aria-valuemin="0"
+                            aria-valuemax="100"></div>
+                        </div>
+                      </template>
+                      <template is="dom-if" if="[[!_getResults(jobs, 'true', 'in progress')]]" restamp="true">
+                        <span class$="zuul-job-result labels [[_renderJobStatusLabel(jobs)]]">
+                          [[_getResults(jobs)]]
+                        </span>
+                      </template>
+                    </td>
+                  </tr>
                 </template>
-              </tbody>
+              </template>
             </table>
           </div>
         </template>
       </div>
     </template>
+    <iron-iconset-svg name="zuul-icons" size="24">
+      <svg>
+        <defs>
+          <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
+          <g id="code"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></g>
+          <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
+          <g id="query-builder"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></g>
+          <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
+          <g id="today"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"></path></g>
+        </defs>
+      </svg>
+    </iron-iconset-svg>
   </template>
   <script src="zuul-status-view.js"></script>
 </dom-module>
diff --git a/src/main/resources/static/zuul-status-view.js b/src/main/resources/static/zuul-status-view.js
index 34475fa..105ebfe 100644
--- a/src/main/resources/static/zuul-status-view.js
+++ b/src/main/resources/static/zuul-status-view.js
@@ -17,6 +17,9 @@
  (function() {
   'use strict';
 
+  const DEFAULT_UPDATE_INTERVAL_MS = 1000 * 2;
+  const MAX_UPDATE_INTERVAL_MS = 1000 * 30 * 2;
+
   /**
    * Wrapper around localStorage to prevent using it if you have it disabled.
    *
@@ -55,9 +58,6 @@
     }
   }
 
-  const DEFAULT_UPDATE_INTERVAL_MS = 1000 * 2;
-  const MAX_UPDATE_INTERVAL_MS = 1000 * 30 * 2;
-
   Polymer({
     is: 'zuul-status-view',
     properties: {
@@ -156,18 +156,15 @@
     /**
      * Fetch current progress state and update properties.
      *
-     * If not all Tricium analyzers are finished yet, this will
-     * set a timeout to update again later.
-     *
-     * It is assumed that this will only be called if the Tricium
-     * host is configured.
-     *
      * @return {Promise} Resolves upon completion.
      */
     async _update() {
       try {
         const response = await this.getZuulStatus(this.change, this.revision);
-        this._response = response;
+        this._response = response.map((results, i) => ({
+          name: results.jobs[i].pipeline,
+          results,
+        }));
         this._updateIntervalMs = DEFAULT_UPDATE_INTERVAL_MS;
       } catch (err) {
         this._updateIntervalMs = Math.min(
@@ -352,5 +349,61 @@
 
       this.reload();
     },
+
+    _isFailing(results) {
+      if (results && results.results &&
+          results.results.failing_reasons.length !== 0) {
+        return true;
+      }
+
+      return false;
+    },
+
+    _getTime(ms, words) {
+      if (typeof (words) === 'undefined') {
+        words = false;
+      }
+      let seconds = (+ms) / 1000;
+      let minutes = Math.floor(seconds / 60);
+      let hours = Math.floor(minutes / 60);
+      seconds = Math.floor(seconds % 60);
+      minutes = Math.floor(minutes % 60);
+      let r = '';
+      if (words) {
+        if (hours) {
+          r += hours + ' hr ';
+        }
+        r += minutes + ' min';
+      } else {
+        if (hours < 10) {
+          r += '0';
+        }
+        r += hours + ':';
+        if (minutes < 10) {
+          r += '0';
+        }
+        r += minutes + ':';
+        if (seconds < 10) {
+          r += '0';
+        }
+        r += seconds;
+      }
+
+      return r;
+    },
+
+    _getRemainingTime(time) {
+      return time === null ?
+          'unknown' : this._getTime(time, true);
+    },
+
+    _getEnqueueTime(ms) {
+      // Special format case for enqueue time to add style
+      let hours = 60 * 60 * 1000;
+      let now = Date.now();
+      let delta = now - ms;
+
+      return this._getTime(delta, true);
+    },
   });
 })();