diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue
index 4345692c1..fb90e4bf7 100644
--- a/site/frontend/src/pages/status_new/collector.vue
+++ b/site/frontend/src/pages/status_new/collector.vue
@@ -1,8 +1,14 @@
 <script setup lang="tsx">
 import {h, ref, Ref} from "vue";
 import {parseISO, differenceInHours} from "date-fns";
-import {formatISODate, shortenTag} from "../../utils/formatting";
-import {CollectorConfig, BenchmarkJobStatus, isJobComplete} from "./data";
+import {formatISODate} from "../../utils/formatting";
+import {
+  CollectorConfig,
+  BenchmarkJobStatus,
+  isJobComplete,
+  BenchmarkJob,
+} from "./data";
+import CommitSha from "./commit-sha.vue";
 
 const props = defineProps<{
   collector: CollectorConfig;
@@ -80,6 +86,21 @@ function ActiveStatus({collector}: {collector: CollectorConfig}) {
 function toggleShowJobs() {
   showJobs.value = !showJobs.value;
 }
+
+function formatBackend(job: BenchmarkJob): string {
+  if (job.kind === "compiletime") {
+    return job.backend;
+  } else {
+    return "";
+  }
+}
+function formatProfile(job: BenchmarkJob): string {
+  if (job.kind === "compiletime") {
+    return job.profile;
+  } else {
+    return "";
+  }
+}
 </script>
 
 <template>
@@ -120,7 +141,10 @@ function toggleShowJobs() {
         </span>
         <span>{{ formatISODate(collector.dateAdded) }}</span>
       </div>
-      <button @click="toggleShowJobs">show jobs</button>
+      <button @click="toggleShowJobs" class="show-jobs">
+        <template v-if="showJobs">Hide jobs</template>
+        <template v-else>Show jobs</template>
+      </button>
     </div>
 
     <div v-if="showJobs" class="table-collector-wrapper">
@@ -130,49 +154,51 @@ function toggleShowJobs() {
           <div class="table-collector-status-filter-btn-wrapper">
             <template v-for="filter in FILTERS">
               <button
-                class="table-collector-status-filter-btn"
+                :class="{
+                  active: ACTIVE_FILTERS[filter],
+                }"
                 @click="filterJobByStatus(filter)"
               >
                 {{ formatJobStatus(filter) }}
-                <input
-                  type="checkbox"
-                  value="filter"
-                  :checked="ACTIVE_FILTERS[filter]"
-                />
               </button>
             </template>
           </div>
         </div>
       </div>
       <table class="table-collector" style="border-collapse: collapse">
-        <caption>
-          current benchmark jobs
-        </caption>
         <thead>
           <tr class="table-header-row">
-            <th class="table-header-padding">Tag / Sha</th>
-            <th class="table-header-padding">State</th>
-            <th class="table-header-padding">Started At</th>
-            <th class="table-header-padding">Backend</th>
-            <th class="table-header-padding">Profile</th>
-            <th class="table-header-padding">Dequeue Counter</th>
+            <th>Tag</th>
+            <th>Status</th>
+            <th>Started at</th>
+            <th>Completed at</th>
+            <th>Kind</th>
+            <th>Backend</th>
+            <th>Profile</th>
+            <th>Attempts</th>
           </tr>
         </thead>
         <tbody>
           <template v-for="job in collector.jobs">
             <tr v-if="ACTIVE_FILTERS[job.status]">
-              <td class="table-cell-padding">
-                {{ shortenTag(job.requestTag) }}
+              <td>
+                <CommitSha :tag="job.requestTag"></CommitSha>
               </td>
-              <td class="table-cell-padding">
+              <td>
                 {{ formatJobStatus(job.status) }}
               </td>
-              <td class="table-cell-padding">
+              <td>
                 {{ formatISODate(job.startedAt) }}
               </td>
-              <td class="table-cell-padding">{{ job.backend }}</td>
-              <td class="table-cell-padding">{{ job.profile }}</td>
-              <td class="table-cell-padding">
+              <td>
+                {{ formatISODate(job.completedAt) }}
+              </td>
+              <td>{{ job.kind }}</td>
+              <td>{{ formatBackend(job) }}</td>
+              <td>
+                {{ formatProfile(job) }}
+              </td>
+              <td>
                 {{ job.dequeCounter }}
               </td>
             </tr>
@@ -180,10 +206,6 @@ function toggleShowJobs() {
         </tbody>
       </table>
     </div>
-
-    <div class="collector-no-work" v-if="collector.jobs.length === 0">
-      <h3>no active benchmarks</h3>
-    </div>
   </div>
 </template>
 
@@ -237,12 +259,28 @@ $sm-radius: 8px;
 }
 
 .table-collector-status-filter-wrapper {
-  padding: $sm-padding 0px;
+  padding: $sm-padding 0;
 }
 
 .table-collector-status-filters {
   display: flex;
   flex-direction: column;
+
+  button {
+    border: 1px solid #333;
+    border-radius: $sm-radius;
+    margin-right: $sm-padding;
+    padding: 5px 10px;
+
+    &.active {
+      font-weight: bold;
+      border-width: 2px;
+      border-color: #1b45e4;
+    }
+    &:hover {
+      box-shadow: inset 0 0 2px #1b45e4;
+    }
+  }
 }
 
 .table-collector-status-filter-btn-wrapper {
@@ -251,20 +289,6 @@ $sm-radius: 8px;
   flex-direction: row;
 }
 
-.table-collector-status-filter-btn {
-  border: 1px solid #333;
-  border-radius: $sm-radius;
-  width: 100%;
-  margin-right: $sm-padding;
-}
-
-.table-collector-status-filter-btn:hover {
-  transition: 250ms;
-}
-
-.status {
-}
-
 .status.benchmarking {
   background: #117411;
   color: white;
@@ -288,7 +312,7 @@ $sm-radius: 8px;
 
 .table-collector-wrapper {
   padding: $sm-padding;
-  margin: $sm-padding 0px;
+  margin: $sm-padding 0;
   background-color: #eee;
   border-radius: $sm-radius;
 
@@ -311,31 +335,18 @@ $sm-radius: 8px;
     border-bottom: 1px solid black;
   }
 
-  .table-header-padding {
-    padding: $sm-padding $sm-padding 0px $sm-padding;
-    text-align: left;
+  th {
+    padding: $sm-padding $sm-padding 0 $sm-padding;
+    text-align: center;
   }
 
-  .table-cell-padding {
-    padding: $sm-padding $sm-padding 1px 0px;
-    text-align: left;
+  td {
+    padding: 5px 1px;
+    text-align: center;
   }
 }
 
-.collector-no-work {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-  background-color: #eee;
-  margin: $sm-padding;
-  padding: $sm-padding;
-  border-radius: $sm-radius;
-
-  h3 {
-    font-variant: small-caps;
-    font-weight: 700;
-    font-size: 1.5em;
-  }
+.show-jobs {
+  margin-top: 10px;
 }
 </style>
diff --git a/site/frontend/src/pages/status_new/commit-sha.vue b/site/frontend/src/pages/status_new/commit-sha.vue
new file mode 100644
index 000000000..44c9361c0
--- /dev/null
+++ b/site/frontend/src/pages/status_new/commit-sha.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {computed} from "vue";
+
+const props = defineProps<{
+  tag: string;
+}>();
+
+const looksLikeSha = computed(() => props.tag.length === 40);
+</script>
+
+<template>
+  <a
+    v-if="looksLikeSha"
+    :href="'https://github.com/rust-lang/rust/commit/' + tag"
+  >
+    {{ tag.substring(0, 13) }}
+  </a>
+  <template v-else>
+    {{ tag }}
+  </template>
+</template>
diff --git a/site/frontend/src/pages/status_new/data.ts b/site/frontend/src/pages/status_new/data.ts
index 7b6d07055..6bee47353 100644
--- a/site/frontend/src/pages/status_new/data.ts
+++ b/site/frontend/src/pages/status_new/data.ts
@@ -14,9 +14,11 @@ export type BenchmarkRequest = {
 };
 
 export type BenchmarkJobStatus = "Queued" | "InProgress" | "Success" | "Failed";
+export type BenchmarkJobKind = "compiletime" | "runtimeInProgress" | "rustc";
 
 export type BenchmarkJob = {
   requestTag: string;
+  kind: BenchmarkJobKind;
   target: string;
   backend: string;
   profile: string;
diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue
index 539cf4fd9..249c35369 100644
--- a/site/frontend/src/pages/status_new/page.vue
+++ b/site/frontend/src/pages/status_new/page.vue
@@ -4,39 +4,33 @@ import {h, ref, Ref} from "vue";
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {
-  formatSecondsAsDuration,
-  formatISODate,
-  shortenTag,
-} from "../../utils/formatting";
+import {formatISODate, formatSecondsAsDuration} from "../../utils/formatting";
 import {useExpandedStore} from "../../utils/expansion";
 import {
   BenchmarkRequest,
   BenchmarkRequestStatus,
   CollectorConfig,
-  StatusResponse,
   isJobComplete,
+  StatusResponse,
 } from "./data";
 import Collector from "./collector.vue";
+import CommitSha from "./commit-sha.vue";
 
 const loading = ref(true);
 
 const data: Ref<{
-  timeline: BenchmarkRequestWithWaterLine[];
+  timeline: BenchmarkRequestRow[];
   queueLength: number;
   collectors: CollectorConfig[];
 } | null> = ref(null);
 
-type BenchmarkRequestWithWaterLine = BenchmarkRequest & {
+type BenchmarkRequestRow = BenchmarkRequest & {
   isLastInProgress: boolean;
   hasPendingJobs: boolean;
 };
 
-function getRequestRowClassName(req: BenchmarkRequestWithWaterLine) {
-  const inProgress = req.status === "InProgress";
-  if (inProgress && req.isLastInProgress) {
-    return "timeline-waterline";
-  } else if (inProgress) {
+function getRequestRowClassName(req: BenchmarkRequestRow) {
+  if (req.status === "InProgress") {
     return "timeline-row-bold";
   }
   return "";
@@ -47,7 +41,7 @@ async function loadStatusData(loading: Ref<boolean>) {
     let resp: StatusResponse = await getJson<StatusResponse>(
       STATUS_DATA_NEW_URL
     );
-    let timeline: BenchmarkRequestWithWaterLine[] = [];
+    let timeline: BenchmarkRequestRow[] = [];
 
     let queueLength = 0;
 
@@ -123,28 +117,43 @@ function PullRequestLink({request}: {request: BenchmarkRequest}) {
   );
 }
 
-function getJobCompletion(
-  req: BenchmarkRequest,
-  collectors: CollectorConfig[]
-) {
+function RequestProgress({
+  request,
+  collectors,
+}: {
+  request: BenchmarkRequest;
+  collectors: CollectorConfig[];
+}): string {
   const jobs = collectors
     .flatMap((c) => c.jobs)
-    .filter((j) => j.requestTag === req.tag);
-  if (jobs.length === 0) {
-    return "";
-  }
+    .filter((j) => j.requestTag === request.tag);
   const completed = jobs.reduce((acc, job) => {
     if (isJobComplete(job)) {
       acc += 1;
     }
     return acc;
   }, 0);
-  return `${completed} / ${jobs.length}`;
+
+  if (request.status === "Completed") {
+    return "✅";
+  } else if (request.status === "Queued") {
+    return "";
+  } else {
+    return (
+      <progress
+        title={`${completed} out of ${jobs.length} job(s) completed`}
+        max={jobs.length}
+        value={completed}
+      ></progress>
+    );
+  }
 }
 
 const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} =
   useExpandedStore();
 
+const tableWidth = 8;
+
 loadStatusData(loading);
 </script>
 
@@ -163,20 +172,21 @@ loadStatusData(loading);
               <th>Kind</th>
               <th>Tag</th>
               <th>Status</th>
-              <th>Jobs Complete</th>
-              <th>Completed At</th>
+              <th>Progress</th>
+              <th>Complete at</th>
               <th>Duration</th>
               <th>Errors</th>
             </tr>
           </thead>
           <tbody>
             <template v-for="req in data.timeline">
+              <tr v-if="req.isLastInProgress">
+                <td :colspan="tableWidth"><hr /></td>
+              </tr>
               <tr :class="getRequestRowClassName(req)">
                 <td><PullRequestLink :request="req" /></td>
                 <td>{{ req.requestType }}</td>
-                <td>
-                  {{ shortenTag(req.tag) }}
-                </td>
+                <td><CommitSha :tag="req.tag"></CommitSha></td>
                 <td>
                   {{ formatStatus(req.status)
                   }}{{
@@ -184,37 +194,44 @@ loadStatusData(loading);
                   }}
                 </td>
                 <td>
-                  {{ getJobCompletion(req, data.collectors) }}
+                  <RequestProgress
+                    :request="req"
+                    :collectors="data.collectors"
+                  />
                 </td>
                 <td>
                   {{ formatISODate(req.completedAt) }}
                   <span v-if="req.endEstimated">(est.)</span>
                 </td>
-                <td>
+                <td style="text-align: right">
                   {{ getDuration(req) }}
                 </td>
 
-                <td v-if="hasErrors(req.errors)">
-                  <button @click="toggleExpandedErrors(req.tag)">
-                    {{ hasExpandedErrors(req.tag) ? "Hide" : "Show" }}
-                    {{ getErrorsLength(req.errors) }}
-                  </button>
+                <td>
+                  <template v-if="hasErrors(req.errors)">
+                    <button @click="toggleExpandedErrors(req.tag)">
+                      {{ getErrorsLength(req.errors) }}
+                      {{ hasExpandedErrors(req.tag) ? "(hide)" : "(show)" }}
+                    </button>
+                  </template>
                 </td>
-                <td v-else></td>
               </tr>
 
               <tr v-if="hasExpandedErrors(req.tag)">
-                <td colspan="7" style="padding: 10px 0">
-                  <div v-for="benchmark in Object.entries(req.errors)">
+                <td :colspan="tableWidth" style="padding: 10px 0">
+                  <div v-for="[context, error] in Object.entries(req.errors)">
                     <div>
-                      <details open>
-                        <summary>{{ benchmark[0] }}</summary>
-                        <pre class="error">{{ benchmark[1] }}</pre>
+                      <details>
+                        <summary>{{ context }}</summary>
+                        <pre class="error">{{ error }}</pre>
                       </details>
                     </div>
                   </div>
                 </td>
               </tr>
+              <tr v-if="req.isLastInProgress">
+                <td :colspan="tableWidth"><hr /></td>
+              </tr>
             </template>
           </tbody>
         </table>
@@ -239,74 +256,49 @@ loadStatusData(loading);
 }
 
 .collector-wrapper {
-  width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
   padding-left: 8px;
 }
 
-.timeline-waterline {
-  border-bottom: 1px solid black;
-  font-weight: bold;
-}
-
 .timeline-row-bold {
   font-weight: bold;
 }
 
 .timeline-wrapper {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: fit-content;
   flex-direction: column;
-  width: 100%;
-  padding-right: 8px;
+  align-items: center;
+  margin-bottom: 50px;
 
   table {
     border-collapse: collapse;
     font-size: 1.1em;
-    width: 100%;
+
+    @media screen and (max-width: 850px) {
+      align-self: start;
+    }
 
     th,
     td {
-      padding: 0.2em;
+      text-align: center;
     }
 
     th {
-      text-align: center;
+      padding: 1em 0.5em;
     }
-    td {
-      text-align: left;
-      padding: 0 0.5em;
 
-      &.centered {
-        text-align: center;
-      }
-      &.right-align {
-        text-align: right;
-      }
+    td {
+      padding: 1px 0.5em;
     }
+
     tr.active {
       font-weight: bold;
     }
   }
-
-  @media screen and (min-width: 1440px) {
-    width: 100%;
-  }
 }
 
-.wrapper {
-  display: grid;
-  column-gap: 100px;
-  grid-template-columns: 1fr;
-
-  @media screen and (min-width: 1440px) {
-    grid-template-columns: 4fr 6fr;
-  }
-}
 .current {
   max-width: 100%;
   width: fit-content;
@@ -350,7 +342,7 @@ loadStatusData(loading);
 .collectors-grid {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(500px, 100%));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
+  grid-gap: 20px;
 }
 </style>
diff --git a/site/frontend/src/utils/formatting.ts b/site/frontend/src/utils/formatting.ts
index 7f32e4eb6..d0b91c292 100644
--- a/site/frontend/src/utils/formatting.ts
+++ b/site/frontend/src/utils/formatting.ts
@@ -27,11 +27,3 @@ export function formatISODate(dateString?: string): string {
   }
   return "";
 }
-
-// Shorten a tag, only commit shas will be truncated
-export function shortenTag(tag: string): string {
-  if (tag.length < 40) {
-    return tag;
-  }
-  return tag.slice(0, 12);
-}
diff --git a/site/src/api.rs b/site/src/api.rs
index a97aba339..67b4b7d9f 100644
--- a/site/src/api.rs
+++ b/site/src/api.rs
@@ -438,6 +438,7 @@ pub mod status_new {
     #[serde(rename_all = "camelCase")]
     pub struct BenchmarkJob {
         pub request_tag: String,
+        pub kind: String,
         pub target: String,
         pub backend: String,
         pub profile: String,
diff --git a/site/src/request_handlers/status_page_new.rs b/site/src/request_handlers/status_page_new.rs
index cd58ae122..3bd785bf2 100644
--- a/site/src/request_handlers/status_page_new.rs
+++ b/site/src/request_handlers/status_page_new.rs
@@ -231,6 +231,7 @@ fn job_to_ui(job: &BenchmarkJob) -> status_new::BenchmarkJob {
 
     status_new::BenchmarkJob {
         request_tag: job.request_tag().to_string(),
+        kind: job.kind().to_string(),
         target: job.target().as_str().to_string(),
         backend: job.backend().as_str().to_string(),
         profile: job.profile().as_str().to_string(),