diff --git a/site/frontend/src/pages/status/page.vue b/site/frontend/src/pages/status/page.vue
index 4633b529c..57261b12d 100644
--- a/site/frontend/src/pages/status/page.vue
+++ b/site/frontend/src/pages/status/page.vue
@@ -2,6 +2,7 @@
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
+import {formatDuration} from "../../utils/formatting";
 import {computed, ref, Ref} from "vue";
 import {
   Artifact,
@@ -26,23 +27,6 @@ async function loadStatus(loading: Ref<boolean>) {
   );
 }
 
-function formatDuration(seconds: number): string {
-  let secs = seconds % 60;
-  let mins = Math.trunc(seconds / 60);
-  let hours = Math.trunc(mins / 60);
-  mins -= hours * 60;
-
-  let s = "";
-  if (hours > 0) {
-    s = `${hours}h ${mins < 10 ? "0" + mins : mins}m ${
-      secs < 10 ? "0" + secs : secs
-    }s`;
-  } else {
-    s = `${mins < 10 ? " " + mins : mins}m ${secs < 10 ? "0" + secs : secs}s`;
-  }
-  return s;
-}
-
 function getArtifactPr(reason: MissingReason): number {
   if (reason.hasOwnProperty("InProgress")) {
     return getArtifactPr(reason["InProgress"]);
diff --git a/site/frontend/src/pages/status_new/collector.vue b/site/frontend/src/pages/status_new/collector.vue
new file mode 100644
index 000000000..5f606f93c
--- /dev/null
+++ b/site/frontend/src/pages/status_new/collector.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import {CollectorConfigAndWork, CollectorConfig} from "./data";
+
+const props = defineProps<{
+  collector: CollectorConfigAndWork;
+}>();
+
+function statusClass(c: CollectorConfig): string {
+  return c.isActive ? "active" : "inactive";
+}
+</script>
+
+<template>
+  <div class="collector-card">
+    <div class="header">
+      <div class="collector-name">
+        <span>
+          <strong class="collector-sm-padding-right">{{
+            props.collector.config.name
+          }}</strong>
+          <span
+            class="collector-sm-padding-left-right collector-left-divider"
+            >{{ collector.config.target }}</span
+          >
+          <span
+            class="collector-sm-padding-left-right status"
+            :class="statusClass(collector.config)"
+          >
+            {{ collector.config.isActive ? "Active" : "Inactive" }}
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <div class="meta">
+      <div class="collector-meta">
+        <span class="collector-meta-name">
+          <strong>Benchmark Set:</strong>
+        </span>
+        <span> #{{ collector.config.benchmarkSet }}</span>
+      </div>
+
+      <div class="collector-meta">
+        <span class="collector-meta-name">
+          <strong>Last Heartbeat:</strong>
+        </span>
+        <span>{{ collector.config.lastHeartbeatAt }}</span>
+      </div>
+
+      <div class="collector-meta">
+        <span class="collector-meta-name">
+          <strong>Date Added:</strong>
+        </span>
+        <span>{{ collector.config.dateAdded }}</span>
+      </div>
+    </div>
+
+    <div v-if="collector.request !== null">
+      <div class="table-collector-wrapper">
+        <table class="table-collector">
+          <caption>
+            current benchmark request
+          </caption>
+          <thead>
+            <tr class="table-header-row">
+              <th class="table-header-padding">Type</th>
+              <th class="table-header-padding">Created At</th>
+              <th class="table-header-padding">Sha / Tag</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="table-cell-padding">{{ collector.request.type }}</td>
+              <td class="table-cell-padding">
+                {{ collector.request.createdAt }}
+              </td>
+              <td class="table-cell-padding">{{ collector.request.tag }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="table-collector-wrapper">
+        <table class="table-collector" style="border-collapse: collapse">
+          <caption>
+            current benchmark jobs
+          </caption>
+          <thead>
+            <tr class="table-header-row">
+              <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>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="j in collector.jobs">
+              <td class="table-cell-padding">{{ j.state }}</td>
+              <td class="table-cell-padding">{{ j.startedAt }}</td>
+              <td class="table-cell-padding">{{ j.backend }}</td>
+              <td class="table-cell-padding">{{ j.profile }}</td>
+              <td class="table-cell-padding">{{ j.dequeCounter }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="collector-no-work" v-if="collector.request === null">
+      <h3>no active benchmarks 🦦</h3>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.collector-card {
+  border-radius: 8px;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px;
+  display: flex;
+  box-shadow: 0 1px 2px #0006;
+  margin: 0px 8px 8px 0px;
+}
+.collector-name {
+  font-size: 1.5em;
+  padding: 8px;
+}
+
+.meta {
+  padding: 8px;
+}
+
+.collector-meta {
+  display: flex;
+}
+
+.collector-meta-name {
+  display: block;
+  min-width: 125px;
+}
+
+.collector-left-divider {
+  border-left: 2px solid black;
+}
+
+.collector-right-divider {
+  border-right: 2px solid black;
+}
+
+.collector-sm-padding-left-right {
+  padding: 0px 8px;
+}
+.collector-sm-padding-left {
+  padding-left: 8px;
+}
+.collector-sm-padding-right {
+  padding-right: 8px;
+}
+
+.status {
+}
+
+.status.active {
+  background: #117411;
+  color: white;
+  font-weight: bold;
+}
+.status.inactive {
+  background: red;
+  color: white;
+  font-weight: bold;
+}
+
+.table-collector-wrapper {
+  padding: 8px;
+  background-color: #eee;
+  margin: 8px 0px;
+  border-radius: 8px;
+
+  table {
+    font-size: 1em;
+    border-collapse: collapse;
+    width: 100%;
+  }
+}
+.table-collector {
+  caption {
+    caption-side: top;
+    text-align: left;
+    font-variant: small-caps;
+    font-weight: bold;
+    font-size: 1.5em;
+  }
+
+  .table-header-row {
+    border-bottom: 1px solid black;
+  }
+
+  .table-header-padding {
+    padding: 8px 8px 0px 0px;
+    text-align: left;
+  }
+
+  .table-cell-padding {
+    padding: 8px 8px 1px 0px;
+    text-align: left;
+  }
+}
+
+.collector-no-work {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  background-color: #eee;
+  margin: 8px;
+  padding: 8px;
+  border-radius: 8px;
+
+  h3 {
+    font-variant: small-caps;
+    font-weight: 700;
+    font-size: 1.5em;
+  }
+}
+</style>
diff --git a/site/frontend/src/pages/status_new/data.ts b/site/frontend/src/pages/status_new/data.ts
index 6347e72c6..c578fc91f 100644
--- a/site/frontend/src/pages/status_new/data.ts
+++ b/site/frontend/src/pages/status_new/data.ts
@@ -1,15 +1,19 @@
+export const BenchmarkRequestCompleteStr = "completed";
+export const BenchmarkRequestInProgressStr = "in_progress";
+export const BenchmarkRequestArtifactsReadyStr = "artifacts_ready";
+
 type BenchmarkRequestStatusComplete = {
-  state: "completed";
+  state: typeof BenchmarkRequestCompleteStr;
   completedAt: string;
   duration: number; // time in milliseconds
 };
 
 type BenchmarkRequestStatusInProgress = {
-  state: "in_progress";
+  state: typeof BenchmarkRequestInProgressStr;
 };
 
 type BenchmarkRequestStatusArtifactsReady = {
-  state: "artifacts_ready";
+  state: typeof BenchmarkRequestArtifactsReadyStr;
 };
 
 export type BenchmarkRequestStatus =
@@ -17,26 +21,35 @@ export type BenchmarkRequestStatus =
   | BenchmarkRequestStatusInProgress
   | BenchmarkRequestStatusArtifactsReady;
 
+export const TryCommit = "Try";
+export const MasterCommit = "Master";
+export const ReleaseCommit = "Release";
+
 type BenchmarkRequestTypeTry = {
-  type: "Try";
+  type: typeof TryCommit;
   tag: string | null;
   parent_sha: string | null;
   pr: number;
 };
 
 type BenchmarkRequestTypeMaster = {
-  type: "Master";
+  type: typeof MasterCommit;
   tag: string;
   parent_sha: string;
   pr: number;
 };
 
 type BenchmarkRequestTypeRelease = {
-  type: "Try";
+  type: typeof ReleaseCommit;
   tag: string;
 };
 
-type BenchmarkRequestType =
+export type BenchmarkRequestTypeStr =
+  | typeof ReleaseCommit
+  | typeof MasterCommit
+  | typeof TryCommit;
+
+export type BenchmarkRequestType =
   | BenchmarkRequestTypeTry
   | BenchmarkRequestTypeMaster
   | BenchmarkRequestTypeRelease;
@@ -76,30 +89,41 @@ export type BenchmarkRequest =
   | BenchmarkRequestInProgress
   | BenchmarkRequestArtifactsReady;
 
+export const BenchmarkJobQueued = "queued";
+export const BenchmarkJobInProgress = "in_progres";
+export const BenchmarkJobFailed = "failed";
+export const BenchmarkJobSuccess = "success";
+
 export type BenchmarkJobStatusQueued = {
-  state: "queued";
+  state: typeof BenchmarkJobQueued;
 };
 
 export type BenchmarkJobStatusInProgress = {
-  state: "in_progress";
+  state: typeof BenchmarkJobInProgress;
   startedAt: string;
   collectorName: string;
 };
 
 export type BenchmarkJobStatusFailed = {
-  state: "failed";
+  state: typeof BenchmarkJobFailed;
   startedAt: string;
   completedAt: string;
   collectorName: string;
 };
 
 export type BenchmarkJobStatusSuccess = {
-  state: "success";
+  state: typeof BenchmarkJobSuccess;
   startedAt: string;
   completedAt: string;
   collectorName: string;
 };
 
+export type BenchmarkJobStatusStr =
+  | typeof BenchmarkJobQueued
+  | typeof BenchmarkJobInProgress
+  | typeof BenchmarkJobFailed
+  | typeof BenchmarkJobSuccess;
+
 export type BenchmarkJobStatus =
   | BenchmarkJobStatusSuccess
   | BenchmarkJobStatusFailed
@@ -137,3 +161,76 @@ export type StatusResponse = {
   collectorConfigs: CollectorConfig[];
   queue: BenchmarkRequest[];
 };
+
+type SimpleJob = {
+  state: BenchmarkJobStatusStr;
+  startedAt: string;
+  backend: string;
+  profile: string;
+  dequeCounter: number;
+};
+
+type SimpleRequest = {
+  type: BenchmarkRequestTypeStr;
+  tag: string;
+  createdAt: string;
+};
+
+export type CollectorConfigAndWork = {
+  jobs: SimpleJob[];
+  config: CollectorConfig;
+  request: SimpleRequest | null;
+};
+
+export type CollectorJobMap = {
+  [key: string]: CollectorConfigAndWork;
+};
+
+/* @TODO; Do this in Rust in the api */
+export function createCollectorJobMap(
+  collectorConfigs: CollectorConfig[],
+  inProgress: StatusResponseInProgress[]
+): CollectorJobMap {
+  const collectorJobMap: CollectorJobMap = {};
+
+  for (const collectorConfig of collectorConfigs) {
+    collectorJobMap[collectorConfig.name] = {
+      request: null,
+      jobs: [],
+      config: collectorConfig,
+    };
+  }
+
+  for (const {request, jobs} of inProgress) {
+    const simpleReq: SimpleRequest = {
+      type: request.requestType.type,
+      tag: request.requestType.tag,
+      createdAt: request.createdAt,
+    };
+    for (const j of jobs) {
+      if (j.status.state !== BenchmarkJobQueued) {
+        const simpleJob: SimpleJob = {
+          state: j.status.state,
+          startedAt: j.status.startedAt,
+          profile: j.profile,
+          backend: j.backend,
+          dequeCounter: j.dequeCounter,
+        };
+        if (collectorJobMap[j.status.collectorName].request == null) {
+          collectorJobMap[j.status.collectorName].request = simpleReq;
+        }
+        /* There will be one in_progress job and a few success/failures*/
+        collectorJobMap[j.status.collectorName].jobs.push(simpleJob);
+      }
+    }
+  }
+  return collectorJobMap;
+}
+
+/* @TODO; Do this in Rust in the api */
+export function createTimeline(
+  completed: BenchmarkRequestComplete[],
+  queue: BenchmarkRequest[]
+) {
+  return queue.concat(<BenchmarkRequest[]>completed);
+}
diff --git a/site/frontend/src/pages/status_new/page.vue b/site/frontend/src/pages/status_new/page.vue
index 6c3a46aab..a0a33c3ed 100644
--- a/site/frontend/src/pages/status_new/page.vue
+++ b/site/frontend/src/pages/status_new/page.vue
@@ -1,21 +1,64 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import {h, ref, Ref} from "vue";
+
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {ref, Ref} from "vue";
-import {StatusResponse, CollectorConfig} from "./data";
+import {formatDuration} from "../../utils/formatting";
+import {
+  StatusResponse,
+  CollectorJobMap,
+  BenchmarkRequestType,
+  BenchmarkRequest,
+  ReleaseCommit,
+  createCollectorJobMap,
+  createTimeline,
+  BenchmarkRequestCompleteStr,
+} from "./data";
+import Collector from "./collector.vue";
 
 async function loadStatusNew(loading: Ref<boolean>) {
-  dataNew.value = await withLoading(loading, () =>
-    getJson<StatusResponse>(STATUS_DATA_NEW_URL)
-  );
+  dataNew.value = await withLoading(loading, async () => {
+    let d: StatusResponse = await getJson<StatusResponse>(STATUS_DATA_NEW_URL);
+    return {
+      queueLength: d.queue.length,
+      collectorJobMap: createCollectorJobMap(d.collectorConfigs, d.inProgress),
+      timeline: createTimeline(d.completed, d.queue),
+    };
+  });
 }
 
 const loading = ref(true);
-const dataNew: Ref<StatusResponse | null> = ref(null);
+/* @TODO; redo type */
+const dataNew: Ref<{
+  queueLength: number;
+  collectorJobMap: CollectorJobMap;
+  timeline: BenchmarkRequest[];
+} | null> = ref(null);
+
+function getCreatedAt(request: BenchmarkRequest): string {
+  if (request.status.state == BenchmarkRequestCompleteStr) {
+    return request.status.completedAt;
+  }
+  return "";
+}
+
+function getDuration(request: BenchmarkRequest): string {
+  if (request.status.state == BenchmarkRequestCompleteStr) {
+    return formatDuration(request.status.duration);
+  }
+  return "";
+}
 
-function statusClass(c: CollectorConfig): string {
-  return c.isActive ? "active" : "inactive";
+function PullRequestLink({requestType}: {requestType: BenchmarkRequestType}) {
+  if (requestType.type === ReleaseCommit) {
+    return "";
+  }
+  return (
+    <a href={`https://github.com/rust-lang/rust/pull/${requestType.pr}`}>
+      #{requestType.pr}
+    </a>
+  );
 }
 
 loadStatusNew(loading);
@@ -23,45 +66,51 @@ loadStatusNew(loading);
 
 <template>
   <div v-if="dataNew !== null">
-    <span>
-      <h2>JSON from the database</h2>
-      <code style="white-space: break-spaces">
-        {{ JSON.stringify(dataNew, null, 2) }}
-      </code>
-    </span>
-    <div id="app" class="container">
-      <h1>Collectors</h1>
-
-      <div class="grid">
-        <div
-          v-for="c in dataNew.collectorConfigs"
-          :key="c.name + c.target"
-          class="card"
-        >
-          <div>
-            <div class="header">
-              <div class="name">
-                <strong>{{ c.name }}</strong>
-              </div>
-              <div>
-                <strong>Status:</strong>
-                <span class="status" :class="statusClass(c)">
-                  {{ c.isActive ? "Active" : "Inactive" }}
-                </span>
-              </div>
-            </div>
-            <div class="meta">
-              <div><strong>Target:</strong> {{ c.target }}</div>
-              <div><strong>Benchmark Set:</strong> #{{ c.benchmarkSet }}</div>
-              <div>
-                <strong>Last Heartbeat:</strong>
-                {{ c.lastHeartbeatAt }}
-              </div>
-              <div>
-                <strong>Date Added:</strong>
-                {{ c.dateAdded }}
-              </div>
-            </div>
+    <div class="status-page-wrapper">
+      <div class="timeline-wrapper">
+        <h1>Timeline</h1>
+        <div style="margin-bottom: 10px">
+          Queue length: {{ dataNew.queueLength }}
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>Pr</th>
+              <th>Kind</th>
+              <th>Sha / Tag</th>
+              <th>Status</th>
+              <th>Completed At</th>
+              <th>Duration</th>
+              <th>Errors</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="req in dataNew.timeline">
+              <tr>
+                <td><PullRequestLink :requestType="req.requestType" /></td>
+                <td>{{ req.requestType.type }}</td>
+                <td>
+                  {{ req.requestType.tag }}
+                </td>
+                <td>{{ req.status.state }}</td>
+                <td v-html="getCreatedAt(req)"></td>
+                <td v-html="getDuration(req)"></td>
+                <td>
+                  <pre>{{ req.errors.join("\n") }}</pre>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+      <div class="collector-wrapper">
+        <h1>Collectors</h1>
+        <div class="collectors-grid">
+          <div
+            :key="cc[0]"
+            v-for="cc in Object.entries(dataNew.collectorJobMap)"
+          >
+            <Collector :collector="cc[1]" />
           </div>
         </div>
       </div>
@@ -70,13 +119,35 @@ loadStatusNew(loading);
 </template>
 
 <style scoped lang="scss">
-.timeline {
-  max-width: 100%;
-  width: fit-content;
+.status-page-wrapper {
+  display: flex;
+  @media screen and (max-width: 1450px) {
+    flex-direction: column;
+  }
+}
+
+.collector-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding-left: 8px;
+}
+
+.timeline-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: fit-content;
+  flex-direction: column;
+  width: 100%;
+  padding-right: 8px;
 
   table {
     border-collapse: collapse;
     font-size: 1.1em;
+    width: 100%;
 
     th,
     td {
@@ -107,23 +178,6 @@ loadStatusNew(loading);
   }
 }
 
-.header {
-}
-
-.status {
-  padding: 2px 8px 2px 0px;
-  border-radius: 20px;
-  font-size: 0.75rem;
-  width: 50px;
-}
-
-.status.active {
-  color: green;
-}
-.status.inactive {
-  color: red;
-}
-
 .wrapper {
   display: grid;
   column-gap: 100px;
@@ -172,18 +226,11 @@ loadStatusNew(loading);
   white-space: pre-wrap;
   word-break: break-word;
 }
-.grid {
+
+.collectors-grid {
+  width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   gap: 20px;
 }
-.card {
-  border-radius: 12px;
-  padding: 16px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  transition: transform 0.2s ease;
-}
 </style>
diff --git a/site/frontend/src/utils/formatting.ts b/site/frontend/src/utils/formatting.ts
new file mode 100644
index 000000000..c2cccad2a
--- /dev/null
+++ b/site/frontend/src/utils/formatting.ts
@@ -0,0 +1,17 @@
+export function formatDuration(milliseconds: number): string {
+  let seconds = milliseconds / 1000;
+  let secs = seconds % 60;
+  let mins = Math.trunc(seconds / 60);
+  let hours = Math.trunc(mins / 60);
+  mins -= hours * 60;
+
+  let s = "";
+  if (hours > 0) {
+    s = `${hours}h ${mins < 10 ? "0" + mins : mins}m ${
+      secs < 10 ? "0" + secs : secs
+    }s`;
+  } else {
+    s = `${mins < 10 ? " " + mins : mins}m ${secs < 10 ? "0" + secs : secs}s`;
+  }
+  return s;
+}