diff --git a/.circleci/workflows.yml b/.circleci/workflows.yml
index 93344e11c8be..091f0bff0468 100644
--- a/.circleci/workflows.yml
+++ b/.circleci/workflows.yml
@@ -593,7 +593,7 @@ commands:
               if [[ <<parameters.type>> == 'ct' ]]; then
                 # component tests are located side by side with the source codes.
                 # for the app component tests, ignore specs that are known to cause failures on contributor PRs (see https://discuss.circleci.com/t/how-to-exclude-certain-files-from-circleci-test-globbing/41028)
-                TESTFILES=$(find src -regextype posix-extended -name '*.cy.*' -not -regex '.*(FileMatch|PromoAction|SelectorPlayground|useDurationFormat|useTestingType|SpecPatterns).cy.*' | circleci tests split --total=$CIRCLE_NODE_TOTAL)
+                TESTFILES=$(find src -regextype posix-extended -name '*.cy.*' -not -regex '.*(FileMatch|PromoAction|SelectorPlayground|useDurationFormat|useTestingType|SpecPatterns|DebugPendingRunCounts).cy.*' | circleci tests split --total=$CIRCLE_NODE_TOTAL)
               else
                 GLOB="cypress/e2e/**/*cy.*"
                 TESTFILES=$(circleci tests glob "$GLOB" | circleci tests split --total=$CIRCLE_NODE_TOTAL)
@@ -2896,7 +2896,6 @@ linux-x64-contributor-workflow: &linux-x64-contributor-workflow
   jobs:
     - node_modules_install
     - build:
-        # context: test-runner:env-canary
         requires:
           - node_modules_install
     - check-ts:
diff --git a/.github/workflows/report_weekly_app_kpis.yml b/.github/workflows/report_weekly_app_kpis.yml
index d9a1a82be7d6..de727b058be5 100644
--- a/.github/workflows/report_weekly_app_kpis.yml
+++ b/.github/workflows/report_weekly_app_kpis.yml
@@ -96,6 +96,18 @@ jobs:
           script: |
             const script = require('./scripts/reports/triage_feature_requests_metrics.js')
             await script.getFeatureRequestMetrics(github, context, core, "${{ env.START_DATE }}", "${{ env.END_DATE }}", "${{ env.PROJECT_BOARD_NUMBER }}");
+      - name: Generate Feature Review KPIs
+        id: feature-review-metrics
+        uses: actions/github-script@v6
+        env:
+          START_DATE: ${{ github.event.inputs.start-date }}
+          END_DATE: ${{ github.event.inputs.end-date }}
+          PROJECT_BOARD_NUMBER: 9
+        with:
+          github-token: ${{ secrets.TRIAGE_BOARD_TOKEN }}
+          script: |
+            const script = require('./scripts/reports/triage_feature_review_metrics.js')
+            await script.getFeatureReviewMetrics(github, context, core, "${{ env.START_DATE }}", "${{ env.END_DATE }}", "${{ env.PROJECT_BOARD_NUMBER }}");
       - name: Generate KPI Report
         id: generate-report
         uses: actions/github-script@v6
@@ -107,5 +119,5 @@ jobs:
           github-token: ${{ secrets.TRIAGE_BOARD_TOKEN }}
           script: |
             const script = require('./scripts/reports/generate_kpi_report.js')
-            await script.generateKPIReport(github, context, core, ${{ steps.non-mono-repo-open-closed-metrics.outputs.results }}, ${{ steps.mono-repo-open-closed-metrics.outputs.results }}, ${{ steps.triage-metrics.outputs.results }}, ${{ steps.mitigation-metrics.outputs.results }}, ${{ steps.feature-metrics.outputs.results }} );
+            await script.generateKPIReport(github, context, core, ${{ steps.non-mono-repo-open-closed-metrics.outputs.results }}, ${{ steps.mono-repo-open-closed-metrics.outputs.results }}, ${{ steps.triage-metrics.outputs.results }}, ${{ steps.mitigation-metrics.outputs.results }}, ${{ steps.feature-metrics.outputs.results }}, ${{ steps.feature-review-metrics.outputs.results }} );
       
\ No newline at end of file
diff --git a/.github/workflows/update-browser-versions.yml b/.github/workflows/update-browser-versions.yml
index b85b8eb89c4e..1f13316f7731 100644
--- a/.github/workflows/update-browser-versions.yml
+++ b/.github/workflows/update-browser-versions.yml
@@ -1,5 +1,7 @@
 name: Update Browser Versions
 on:
+  workflow_dispatch:
+
   schedule:
     - cron: '0 8 * * *' #  every day at 8am UTC (3/4am EST/EDT)
 jobs:
@@ -104,6 +106,7 @@ jobs:
             })
       # Update available and a PR doesn't already exist
       - name: Create Pull Request
+        id: create-pr
         if: ${{ steps.check-need-for-pr.outputs.needs_pr == 'true' }}
         uses: actions/github-script@v6
         with:
@@ -117,4 +120,5 @@ jobs:
               branchName: '${{ steps.check-branch.outputs.branch_name }}',
               description: '${{ steps.get-versions.outputs.description }}',
               body: 'This PR was auto-generated to update the version(s) of Chrome for driver tests',
+              addToProjectBoard: true,
             })
diff --git a/.vscode/launch.json b/.vscode/launch.json
index ff2618c4bf7d..2142cdfd3ce2 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -8,6 +8,21 @@
       "processId": "${command:PickProcess}",
       "continueOnAttach": true
     },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to port 5566",
+      "port": 5566,
+      "continueOnAttach": true,
+    },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to Docker",
+      "port": 5566,
+      "continueOnAttach": true,
+      "remoteRoot": "/opt/cypress",
+    },
     {
       "type": "node",
       "request": "attach",
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 85ddc536a838..3f562577b436 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -396,6 +396,20 @@ $ yarn add https://cdn.cypress.io/beta/npm/.../cypress.tgz
 
 Note that unzipping the Linux binary inside a Docker container onto a mapped volume drive is *slow*. But once this is done you can modify the application resource folder in the local folder `/tmp/test-folder/node_modules/cypress/cypress-cache/3.3.0/Cypress/resources/app` to debug issues.
 
+#### Docker as a performance constrained environment
+
+Sometimes performance issues are easier to reproduce in performance constrained environments. A docker container can be a good way to simulate this locally and allow for quick iteration.
+
+In a fresh cypress repository run the following command:
+
+```shell
+docker compose run --service-port dev
+```
+
+This will spin up a docker container based off cypress/browsers:latest and start up the bash terminal. From here you can yarn install and develop as normal, although slower. It's recommend that you run this in a fresh repo because node modules may differ between an install on your local device and from within a linux docker image.
+
+Ports 5566 and 5567 are available to attach debuggers to, please note that docker compose run only maps ports if the `--service-port` command is used.
+
 ### Packages
 
 Generally when making contributions, you are typically making them to a small number of packages. Most of your local development work will be inside a single package at a time.
diff --git a/browser-versions.json b/browser-versions.json
index eb4bb16309d3..a123031782e8 100644
--- a/browser-versions.json
+++ b/browser-versions.json
@@ -1,5 +1,5 @@
 {
-  "chrome:beta": "115.0.5790.13",
-  "chrome:stable": "114.0.5735.106",
+  "chrome:beta": "118.0.5993.11",
+  "chrome:stable": "117.0.5938.88",
   "chrome:minimum": "64.0.3282.0"
 }
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index d413af3445ba..6418a505b6e8 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.3.0
+
+_Released 09/19/2023 (PENDING)_
+
+**Features:**
+
+ - Introduces new layout for Runs page providing additional run information. Addresses [#27203](https://github.com/cypress-io/cypress/issues/27203).
+
 ## 13.2.0
 
 _Released 09/12/2023_
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 000000000000..83fd12748ddd
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,51 @@
+version: '3'
+
+services:
+  dev:
+    image: cypress/browsers:latest
+    ports:
+      # Share debugging ports
+      - 5566:5566
+      - 5567:5567
+    environment:
+      # Use Hist file from shared volume
+      HISTFILE: /root/hist/.bash_history
+      # Setup inspect to use the more permissive address when debugging so
+      # that we can connect to it from ouside the docker container
+      CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE: '0.0.0.0:5566'
+      # This disables CI mode which causes cypress to build differently
+      CI: ''
+    command: /bin/bash
+    working_dir: /opt/cypress
+    volumes:
+      # Copy Cypress source to docker container
+      - .:/opt/cypress
+      - bash-history:/root/hist
+  watch:
+    image: cypress/browsers:latest
+    environment:
+      # This disables CI mode which causes cypress to build differently
+      CI: ''
+    command: yarn watch
+    working_dir: /opt/cypress
+    volumes:
+      # Copy Cypress source to docker container
+      - .:/opt/cypress
+  ci:
+    # This should mirror the image used in workflows.yml
+    image: cypress/browsers-internal:node18.15.0-chrome114-ff115
+    ports:
+      - 5566:5566
+      - 5567:5567
+    command: /bin/bash
+    environment:
+      HISTFILE: /root/hist/.bash_history
+      CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE: '0.0.0.0:5566'
+    working_dir: /opt/cypress
+    volumes:
+      - .:/opt/cypress
+      - bash-history:/root/hist
+
+# persist terminal history between runs in a virtual volume
+volumes:
+  bash-history:
diff --git a/package.json b/package.json
index 7caf82b86302..103b98f2fcd1 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "gulp:debug": "node --inspect-brk ./node_modules/.bin/gulp",
     "dev-debug": "node ./scripts/debug.js dev",
     "docker": "./scripts/run-docker-local.sh",
+    "docker-dev": "./scripts/run-docker-local.sh dev",
     "ensure-deps": "./scripts/ensure-dependencies.sh",
     "get-next-version": "node scripts/get-next-version.js",
     "postinstall": "node ./scripts/run-postInstall.js",
diff --git a/packages/app/cypress/e2e/debug.cy.ts b/packages/app/cypress/e2e/debug.cy.ts
index a5252b99eb56..c2c39129028b 100644
--- a/packages/app/cypress/e2e/debug.cy.ts
+++ b/packages/app/cypress/e2e/debug.cy.ts
@@ -75,7 +75,7 @@ describe('App - Debug Page', () => {
     .contains('View in Cypress Cloud')
     .should('have.attr', 'href', 'https://cloud.cypress.io/projects/7p5uce/runs/2?utm_medium=Debug+Tab&utm_campaign=View+in+Cypress+Cloud&utm_source=Binary%3A+App')
 
-    cy.findByTestId('debug-runNumber-PASSED').contains('#2')
+    cy.findByTestId('runNumber-status-PASSED').contains('#2')
     cy.findByTestId('debug-commitsAhead').contains('You are 1 commit ahead')
 
     cy.findByTestId('metadata').within(() => {
@@ -136,7 +136,7 @@ describe('App - Debug Page', () => {
 
     cy.findByLabelText('Relevant run had 1 test failure').should('be.visible').contains('1')
 
-    cy.findByTestId('debug-runNumber-FAILED').contains('#136')
+    cy.findByTestId('runNumber-status-FAILED').contains('#136')
     cy.findByTestId('debug-commitsAhead').contains('You are 1 commit ahead')
 
     cy.findByTestId('metadata').within(() => {
diff --git a/packages/app/cypress/e2e/runs.cy.ts b/packages/app/cypress/e2e/runs.cy.ts
index d89a684b872d..5e6efb766d58 100644
--- a/packages/app/cypress/e2e/runs.cy.ts
+++ b/packages/app/cypress/e2e/runs.cy.ts
@@ -60,7 +60,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.visitApp()
       cy.findByTestId('sidebar-link-runs-page').click()
-      cy.get('[data-cy="runs-loader"]')
+      cy.get('[data-cy*="runsSkeleton-"]')
       cy.get('[data-cy="runs"]')
     })
   })
@@ -103,7 +103,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.visitApp()
 
       moveToRunsPage()
-      cy.contains('a', 'OVERLIMIT').click()
+      cy.findByTestId('runNumber-status-OVERLIMIT').click()
 
       cy.withCtx((ctx, o) => {
         expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/4')
@@ -666,29 +666,25 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
         moveToRunsPage()
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().within(() => {
-          cy.findByText('fix: make gql work CANCELLED')
-          cy.get('[data-cy="run-card-icon-CANCELLED"]')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-CANCELLED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/1"]').first().within(() => {
-          cy.findByText('fix: make gql work ERRORED')
-          cy.get('[data-cy="run-card-icon-ERRORED"]')
+        cy.get('[data-cy="runCard-status-ERRORED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-ERRORED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/2"]').first().within(() => {
-          cy.findByText('fix: make gql work FAILED')
-          cy.get('[data-cy="run-card-icon-FAILED"]')
+        cy.get('[data-cy="runCard-status-FAILED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-FAILED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().as('firstRun')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().as('firstRun')
 
         cy.get('@firstRun').within(() => {
-          cy.get('[data-cy="run-card-author"]').contains('John Appleseed')
-          cy.get('[data-cy="run-card-avatar"]')
-          cy.get('[data-cy="run-card-branch"]').contains('main')
-          cy.get('[data-cy="run-card-created-at"]').contains('an hour ago')
-          cy.get('[data-cy="run-card-duration"]').contains('01:00')
+          cy.get('[data-cy="runCard-author"]').contains('John Appleseed')
+          cy.get('[data-cy="runCard-avatar"]')
+          cy.get('[data-cy="runCard-branchName"]').contains('main')
+          cy.get('[data-cy="runCard-createdAt"]').contains('01m 00s (an hour ago)')
 
           cy.contains('span', 'skipped')
           cy.get('span').contains('pending')
@@ -702,7 +698,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
 
         moveToRunsPage()
-        cy.get('[data-cy^="runCard-"]').first().click()
+        cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
 
         cy.withCtx((ctx) => {
           expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/0')
@@ -765,19 +761,18 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
         moveToRunsPage()
 
+        cy.findByText('fix: using Git data CANCELLED')
         cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().within(() => {
-          cy.findByText('fix: using Git data CANCELLED')
-          cy.get('[data-cy="run-card-icon-CANCELLED"]')
+          cy.get('[data-cy="runNumber-status-CANCELLED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().as('firstRun')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().as('firstRun')
 
         cy.get('@firstRun').within(() => {
-          cy.get('[data-cy="run-card-author"]').contains('John Appleseed')
-          cy.get('[data-cy="run-card-avatar"]')
-          cy.get('[data-cy="run-card-branch"]').contains('main')
-          cy.get('[data-cy="run-card-created-at"]').contains('an hour ago')
-          cy.get('[data-cy="run-card-duration"]').contains('01:00')
+          cy.get('[data-cy="runCard-author"]').contains('John Appleseed')
+          cy.get('[data-cy="runCard-avatar"]')
+          cy.get('[data-cy="runCard-branchName"]').contains('main')
+          cy.get('[data-cy="runCard-createdAt"]').contains('01m 00s (an hour ago)')
 
           cy.contains('span', 'skipped')
           cy.get('span').contains('pending')
@@ -791,7 +786,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
 
         moveToRunsPage()
-        cy.get('[data-cy^="runCard-"]').first().click()
+        cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
 
         cy.withCtx((ctx) => {
           expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/0')
@@ -955,7 +950,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     const itSkipIfWindows = Cypress.platform === 'win32' ? it.skip : it
 
     itSkipIfWindows('should re-query for executing runs', () => {
-      cy.get('[data-cy="run-card-icon-RUNNING"]').should('have.length', RUNNING_COUNT).should('be.visible')
+      cy.get('[data-cy="runNumber-status-RUNNING"]').should('have.length', RUNNING_COUNT).should('be.visible')
 
       cy.remoteGraphQLIntercept(async (obj) => {
         await new Promise((resolve) => setTimeout(resolve, 100))
@@ -976,7 +971,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       function completeNext (passed) {
-        cy.get('[data-cy="run-card-icon-PASSED"]').should('have.length', passed).should('be.visible')
+        cy.get('[data-cy="runNumber-status-PASSED"]').should('have.length', passed).should('be.visible')
         if (passed < RUNNING_COUNT) {
           completeNext(passed + 1)
         }
diff --git a/packages/app/package.json b/packages/app/package.json
index c4a45f225676..e2c9505defcf 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -21,7 +21,7 @@
   "dependencies": {},
   "devDependencies": {
     "@cypress-design/vue-button": "^0.10.1",
-    "@cypress-design/vue-icon": "^0.25.0",
+    "@cypress-design/vue-icon": "^0.26.0",
     "@cypress-design/vue-statusicon": "^0.5.0",
     "@cypress-design/vue-tabs": "^0.5.1",
     "@graphql-typed-document-node/core": "^3.1.0",
diff --git a/packages/app/src/debug/DebugPageHeader.cy.tsx b/packages/app/src/debug/DebugPageHeader.cy.tsx
index 20a5b574ebb2..b5de9ddd2260 100644
--- a/packages/app/src/debug/DebugPageHeader.cy.tsx
+++ b/packages/app/src/debug/DebugPageHeader.cy.tsx
@@ -43,11 +43,11 @@ describe('<DebugPageHeader />', {
 
     cy.findByTestId('debug-results').should('be.visible')
 
-    cy.findByTestId('debug-runNumber-FAILED')
+    cy.findByTestId('runNumber-status-FAILED')
     .should('have.text', '#432')
     .children().should('have.length', 2)
 
-    cy.findByTestId('debug-flaky-badge')
+    cy.findByTestId('runResults-flakyBadge')
     .should('not.exist')
 
     defaults.forEach((obj) => {
@@ -73,7 +73,7 @@ describe('<DebugPageHeader />', {
       },
     })
 
-    cy.findByTestId('debug-flaky-badge')
+    cy.findByTestId('runResults-flakyBadge')
     .contains(defaultMessages.specPage.flaky.badgeLabel)
 
     cy.findByTestId('total-flaky-tests')
@@ -97,7 +97,7 @@ describe('<DebugPageHeader />', {
         },
       })
 
-      cy.findByTestId(`debug-runNumber-${status}`).should('be.visible')
+      cy.findByTestId(`runNumber-status-${status}`).should('be.visible')
     })
   })
 
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index 020eaffac4be..ee5f734d598b 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -51,12 +51,12 @@
         <li
           class="flex flex-row text-sm gap-x-2 items-center justify-center"
         >
-          <DebugRunNumber
+          <RunNumber
             v-if="(debug.runNumber && debug.status)"
             :status="debug.status"
             :value="debug.runNumber"
           />
-          <DebugResults
+          <RunResults
             :gql="props.gql"
             data-cy="debug-results"
           />
@@ -92,7 +92,7 @@
           v-if="debug.createdAt"
           data-cy="debug-header-createdAt"
         >
-          <IconTimeStopwatch
+          <IconTimeClock
             size="16"
             class="mr-2"
             stroke-color="gray-500"
@@ -106,14 +106,14 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue'
-import DebugResults from './DebugResults.vue'
+import RunResults from '../runs/RunResults.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
 import type { DebugPageHeaderFragment } from '../generated/graphql'
-import { IconTimeStopwatch } from '@cypress-design/vue-icon'
+import { IconTimeClock } from '@cypress-design/vue-icon'
 import CommitIcon from '~icons/cy/commit_x14'
 import { gql } from '@urql/core'
 import { useI18n } from 'vue-i18n'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunNumber from '../runs/RunNumber.vue'
 import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 import { useRunDateTimeInterval } from './useRunDateTimeInterval'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
diff --git a/packages/app/src/debug/DebugResults.cy.tsx b/packages/app/src/debug/DebugResults.cy.tsx
deleted file mode 100644
index 70b0ee565706..000000000000
--- a/packages/app/src/debug/DebugResults.cy.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import DebugResults from './DebugResults.vue'
-import { DebugResultsFragmentDoc } from '../generated/graphql-test'
-import { defaultMessages } from '@cy/i18n'
-import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
-
-describe('<DebugResults />', () => {
-  it('shows the failed icon and the number of passed, skipped, pending, failed tests passed through gql props', () => {
-    const cloudRuns = Object.values(CloudRunStubs)
-
-    cy.mount(() => cloudRuns.map((cloudRun, i) => (<DebugResults data-cy={`run-result-${i}`} gql={cloudRun} />)))
-
-    cloudRuns.forEach((cloudRun, i) => {
-      cy.findByTestId(`run-result-${i}`).within(() => {
-        cy.get(`[title=${defaultMessages.runs.results.passed}]`).should('contain.text', cloudRun.totalPassed)
-        cy.get(`[title=${defaultMessages.runs.results.failed}]`).should('contain.text', cloudRun.totalFailed)
-        cy.get(`[title=${defaultMessages.runs.results.skipped}]`).should('contain.text', cloudRun.totalSkipped)
-        cy.get(`[title=${defaultMessages.runs.results.pending}]`).should('contain.text', cloudRun.totalPending)
-      })
-    })
-  })
-})
-
-describe('Flaky badge tests', () => {
-  const mountingFragment = (flakyTests: number) => {
-    return (
-      cy.mountFragment(DebugResultsFragmentDoc, {
-        onResult (result) {
-          if (result) {
-            result.totalFlakyTests = flakyTests
-          }
-        },
-        render: (gqlVal) => {
-          return (
-            <DebugResults gql={gqlVal} />
-          )
-        },
-      })
-    )
-  }
-
-  it('does not show flaky component when flakyTests are < 1', () => {
-    mountingFragment(0)
-    cy.contains('Flaky').should('not.exist')
-  })
-
-  it('contains flaky badge', () => {
-    mountingFragment(4)
-    cy.findByTestId('debug-flaky-badge').contains(defaultMessages.specPage.flaky.badgeLabel)
-    cy.findByTestId('total-flaky-tests').contains(4)
-  })
-})
diff --git a/packages/app/src/debug/DebugResults.vue b/packages/app/src/debug/DebugResults.vue
deleted file mode 100644
index 0d4b2ea042c3..000000000000
--- a/packages/app/src/debug/DebugResults.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div
-    class="flex gap-[8px] items-center bg-transparent"
-    data-cy="debug-results-holder"
-  >
-    <ResultCounts
-      :total-passed="results.totalPassed"
-      :total-failed="results.totalFailed"
-      :total-skipped="results.totalSkipped"
-      :total-pending="results.totalPending"
-      :order="['PASSED', 'FAILED', 'SKIPPED', 'PENDING']"
-    />
-    <div
-      v-if="results?.totalFlakyTests"
-      data-cy="debug-flaky-badge"
-      class="border rounded flex flex-row gap-[8px] items-center h-6 bg-orange-50 border-orange-200 text-sm text-orange-600 px-2 gap-x-1 border"
-    >
-      <span
-        data-cy="total-flaky-tests"
-        class="font-medium pr-1 opacity-70"
-      >
-        {{ results.totalFlakyTests }}
-      </span>
-      <div class="w-px my-[6px] h-6 border-orange-200 border" />
-      <span class="font-semibold pl-1">
-        {{ t('specPage.flaky.badgeLabel') }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { DebugResultsFragment } from '../generated/graphql'
-import { gql } from '@urql/core'
-import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
-import { useI18n } from '@cy/i18n'
-
-const { t } = useI18n()
-
-gql`
-fragment DebugResults on CloudRun {
-  id
-  totalPassed
-  totalFailed
-  totalPending
-  totalSkipped
-  totalFlakyTests
-}
-`
-
-const props = defineProps<{
-  gql: DebugResultsFragment
-}>()
-
-const results = computed(() => {
-  return props.gql
-})
-</script>
diff --git a/packages/app/src/debug/DebugRunNavigation.vue b/packages/app/src/debug/DebugRunNavigation.vue
index ff2a1c4a260f..7bd9be4e92d2 100644
--- a/packages/app/src/debug/DebugRunNavigation.vue
+++ b/packages/app/src/debug/DebugRunNavigation.vue
@@ -38,12 +38,12 @@
           </LightText>
 
           <template v-else-if="latest?.status && latest.runNumber">
-            <DebugRunNumber
+            <RunNumber
               :status="latest.status"
               :value="latest.runNumber"
               class="mx-[8px]"
             />
-            <DebugResults
+            <RunResults
               v-if="latest"
               :gql="latest"
               class="bg-white mr-[12px]"
@@ -135,8 +135,8 @@ import Button from '@packages/frontend-shared/src/components/Button.vue'
 import { compact, groupBy } from 'lodash'
 import { computed, FunctionalComponent, h } from 'vue'
 import { DebugRunNavigationFragment, DebugRunNavigationRunInfoFragment, DebugRunNavigation_MoveToRunDocument } from '../generated/graphql'
-import DebugResults from './DebugResults.vue'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunResults from '../runs/RunResults.vue'
+import RunNumber from '../runs/RunNumber.vue'
 import DebugCommitIcon from './DebugCommitIcon.vue'
 import DebugRunNavigationLimitMessage from './DebugRunNavigationLimitMessage.vue'
 import { IconChevronRightSmall } from '@cypress-design/vue-icon'
@@ -149,7 +149,7 @@ const { t } = useI18n()
 
 gql`
 fragment DebugRunNavigationRunInfo on CloudRun {
-  ...DebugResults
+  ...RunResults
   ...DebugProgress_DebugTests
   __typename
   runNumber
diff --git a/packages/app/src/debug/DebugRunNavigationRow.vue b/packages/app/src/debug/DebugRunNavigationRow.vue
index aa8e5490527f..f5efed254b03 100644
--- a/packages/app/src/debug/DebugRunNavigationRow.vue
+++ b/packages/app/src/debug/DebugRunNavigationRow.vue
@@ -20,13 +20,13 @@
         class="flex items-center justify-between w-full"
       >
         <div class="flex items-center min-w-0">
-          <DebugRunNumber
+          <RunNumber
             v-if="props.gql.status && props.gql.runNumber"
             :status="props.gql.status"
             :value="props.gql.runNumber"
             class="mr-[8px]"
           />
-          <DebugResults
+          <RunResults
             v-if="props.gql"
             :gql="props.gql"
           />
@@ -46,11 +46,11 @@
 
 <script lang="ts" setup>
 import { gql } from '@urql/vue'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunNumber from '../runs/RunNumber.vue'
+import RunResults from '../runs/RunResults.vue'
 import DebugCurrentRunIcon from './DebugCurrentRunIcon.vue'
 import type { DebugProgress_DebugTestsFragment } from '../generated/graphql'
 import { computed, FunctionalComponent, h } from 'vue'
-import DebugResults from './DebugResults.vue'
 import { useDebugRunSummary } from './useDebugRunSummary'
 import { useRunDateTimeInterval } from './useRunDateTimeInterval'
 import { useI18n } from '@cy/i18n'
@@ -75,7 +75,7 @@ fragment DebugProgress_DebugTests on CloudRun {
   status
   completedInstanceCount
   totalInstanceCount
-  ...DebugResults
+  ...RunResults
 }`
 
 const Dot: FunctionalComponent = () => {
diff --git a/packages/app/src/debug/DebugRunNumber.cy.tsx b/packages/app/src/debug/DebugRunNumber.cy.tsx
deleted file mode 100644
index 8cdbb0d1a18f..000000000000
--- a/packages/app/src/debug/DebugRunNumber.cy.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { CloudRunStatus } from '../generated/graphql-test'
-import DebugRunNumber from './DebugRunNumber.vue'
-
-const STATUSES: CloudRunStatus[] = ['PASSED', 'FAILED', 'CANCELLED', 'RUNNING', 'ERRORED']
-
-describe('<DebugRunNumber />', () => {
-  describe('playground', () => {
-    STATUSES.forEach((status) => {
-      it(`status = '${status}'`, () => {
-        cy.mount(<DebugRunNumber status={status} value={123} />)
-      })
-    })
-  })
-})
diff --git a/packages/app/src/debug/DebugRunNumber.vue b/packages/app/src/debug/DebugRunNumber.vue
deleted file mode 100644
index eda2561aab9c..000000000000
--- a/packages/app/src/debug/DebugRunNumber.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div
-    class="border rounded flex flex-row font-semibold bg-gray-50 border-gray-200 h-6 text-sm px-2 gap-x-1 items-center justify-center"
-    :data-cy="`debug-runNumber-${props.status}`"
-  >
-    <SolidStatusIcon
-      size="16"
-      :status="ICON_MAP[props.status].type"
-    />
-    <span :class="runNumberColor">
-      {{ `#${props.value}` }}
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CloudRunStatus } from '../generated/graphql'
-import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
-
-const props = defineProps<{
-  status: CloudRunStatus
-  value: number
-}>()
-
-const ICON_MAP: Record<CloudRunStatus, { textColor: string, type: StatusType }> = {
-  PASSED: { textColor: 'text-jade-400', type: 'passed' },
-  FAILED: { textColor: 'text-red-400', type: 'failed' },
-  CANCELLED: { textColor: 'text-gray-500', type: 'cancelled' },
-  ERRORED: { textColor: 'text-orange-400', type: 'errored' },
-  RUNNING: { textColor: 'text-indigo-500', type: 'running' },
-  NOTESTS: { textColor: 'text-indigo-500', type: 'noTests' },
-  OVERLIMIT: { textColor: 'text-indigo-500', type: 'overLimit' },
-  TIMEDOUT: { textColor: 'text-indigo-500', type: 'timedOut' },
-} as const
-
-const runNumberColor = computed(() => {
-  if (props.status) {
-    return ICON_MAP[props.status].textColor
-  }
-
-  return ''
-})
-
-</script>
diff --git a/packages/app/src/debug/StatsMetadata.vue b/packages/app/src/debug/StatsMetadata.vue
index 2692c056cfdf..c61edb1db0be 100644
--- a/packages/app/src/debug/StatsMetadata.vue
+++ b/packages/app/src/debug/StatsMetadata.vue
@@ -49,7 +49,8 @@ import { computed } from 'vue'
 import { useI18n } from '@cy/i18n'
 import type { SpecDataAggregate } from '@packages/data-context/src/gen/graphcache-config.gen'
 import type { TestingTypeEnum, StatsMetadata_GroupsFragment } from '../generated/graphql'
-import { IconTimeStopwatch,
+import {
+  IconTimeClock,
   IconOsLinux,
   IconOsApple,
   IconOsGeneric,
@@ -154,7 +155,7 @@ const ORDER_MAP = computed<Record<StatType, Metadata>>(() => {
   return {
     'DURATION': {
       value: props.specDuration,
-      icon: IconTimeStopwatch,
+      icon: IconTimeClock,
       name: 'spec-duration',
     },
     'OS': {
diff --git a/packages/app/src/pages/Runs.vue b/packages/app/src/pages/Runs.vue
index 6edb245b75d7..d36419918dbb 100644
--- a/packages/app/src/pages/Runs.vue
+++ b/packages/app/src/pages/Runs.vue
@@ -1,13 +1,18 @@
 <template>
   <div class="h-full p-[24px] relative">
     <TransitionQuickFade mode="out-in">
-      <RunsSkeleton v-if="query.fetching.value || !query.data.value" />
+      <RunsSkeleton
+        v-if="query.fetching.value || !query.data.value"
+        :is-using-git="isUsingGit"
+      />
       <RunsContainer
         v-else
         :gql="query.data.value"
         :runs="runs"
         :online="isOnlineRef"
         data-cy="runs-container"
+        :all-run-ids="allRunIds"
+        :current-commit-info="currentCommitInfo"
         @re-execute-runs-query="reExecuteRunsQuery"
       />
     </TransitionQuickFade>
@@ -38,7 +43,7 @@ if (isUsingGit) {
   runComposable = useProjectRuns
 }
 
-const { runs, reExecuteRunsQuery, query } = runComposable(isOnlineRef)
+const { runs, reExecuteRunsQuery, query, allRunIds, currentCommitInfo } = runComposable(isOnlineRef)
 
 watchEffect(() => {
   // We want to keep track of the previous state to refetch the query
diff --git a/packages/app/src/runs/RunCard.cy.tsx b/packages/app/src/runs/RunCard.cy.tsx
index 0b1a8f46f81e..530932b51e20 100644
--- a/packages/app/src/runs/RunCard.cy.tsx
+++ b/packages/app/src/runs/RunCard.cy.tsx
@@ -1,6 +1,7 @@
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 import { RunCardFragmentDoc } from '../generated/graphql-test'
 import RunCard from './RunCard.vue'
+import _ from 'lodash'
 
 const SECOND = 1000
 const MINUTE = 60 * SECOND
@@ -9,43 +10,87 @@ const HOUR = 60 * MINUTE
 const generateTags = (num): any => new Array(num).fill(null).map((_, i) => ({ id: `${i}`, name: `tag${i}`, __typename: 'CloudRunTag' }))
 
 describe('<RunCard />', { viewportHeight: 400 }, () => {
-  it('renders with all run information', () => {
-    cy.mountFragment(RunCardFragmentDoc, {
-      onResult (result) {
-        result.tags = generateTags(3)
-        result.totalFlakyTests = 1
-      },
-      render: (gqlVal) => {
-        return (
-          <div class="h-screen bg-gray-100 p-3">
-            <RunCard gql={gqlVal} />
-          </div>
-        )
-      },
-    })
+  context('when there is all run information', () => {
+    [1600, 1536, 1280, 1024, 768, 600].forEach((viewportWidth) => {
+      it(`renders at viewport - ${viewportWidth}`, { viewportWidth }, () => {
+        cy.mountFragment(RunCardFragmentDoc, {
+          onResult (result) {
+            result.tags = generateTags(3)
+            result.totalFlakyTests = 1
+          },
+          render: (gqlVal) => {
+            const withLongBranchName = _.cloneDeep(gqlVal)
 
-    cy.percySnapshot()
-  })
+            if (withLongBranchName.commitInfo) {
+              withLongBranchName.commitInfo.branch = 'user/this-is-a-really-long-branch-name-that-should-truncate'
+            }
 
-  it('renders with all run information on small viewport', { viewportWidth: 600 }, () => {
-    cy.mountFragment(RunCardFragmentDoc, {
-      onResult (result) {
-        result.tags = [1, 2, 3].map((i) => ({ id: `${i}`, name: `tag${i}`, __typename: 'CloudRunTag' }))
-        result.totalFlakyTests = 1
-      },
-      render: (gqlVal) => {
-        return (
-          <div class="h-screen bg-gray-100 p-3">
-            <RunCard gql={gqlVal} />
-          </div>
-        )
-      },
-    })
+            return (
+              //left margins mimic the app sidebar
+              //min width mimics the overall grid layout
+              <div class="p-3 ml-[64px] lg:ml-[248px] min-w-[728px]">
+                <RunCard gql={gqlVal} showDebug debugEnabled />
+                <RunCard gql={gqlVal} showDebug />
+                <RunCard gql={gqlVal} />
+                <RunCard gql={withLongBranchName} showDebug debugEnabled />
+              </div>
+            )
+          },
+        })
+
+        let countTagIndex = 0
+
+        switch (viewportWidth) {
+          case 600:
+          case 768:
+          case 1024:
+            countTagIndex = 2
+            break
+          case 1280:
+            countTagIndex = 1
+            break
+          default:
+            break
+        }
+
+        cy.get('[data-cy="runTagCount"]').eq(countTagIndex).realHover()
 
-    cy.percySnapshot()
+        if (countTagIndex === 0) {
+          cy.get('[data-cy="runTagCount-tooltip"]')
+          .should('be.visible')
+          .and('not.contain', 'Flaky')
+          .and('not.contain', 'main')
+          .and('not.contain', 'tag0')
+          .and('contain', 'tag1')
+          .and('contain', 'tag2')
+        }
+
+        if (countTagIndex === 1) {
+          cy.get('[data-cy="runTagCount-tooltip"]')
+          .should('be.visible')
+          .and('not.contain', 'Flaky')
+          .and('not.contain', 'main')
+          .and('contain', 'tag0')
+          .and('contain', 'tag1')
+          .and('contain', 'tag2')
+        }
+
+        if (countTagIndex === 2) {
+          cy.get('[data-cy="runTagCount-tooltip"]')
+          .should('be.visible')
+          .and('contain', 'Flaky')
+          .and('contain', 'main')
+          .and('contain', 'tag0')
+          .and('contain', 'tag1')
+          .and('contain', 'tag2')
+        }
+
+        cy.percySnapshot()
+      })
+    })
   })
 
-  context('when there is full commit info', () => {
+  context('when there is full commit info', { viewportWidth: 1536 }, () => {
     it('displays last commit info', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
@@ -55,7 +100,7 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -69,15 +114,12 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
       cy.contains(CloudRunStubs.allPassing.commitInfo.authorName as string)
       .should('be.visible')
 
-      cy.contains(CloudRunStubs.allPassing.commitInfo.summary as string)
-      .should('be.visible')
-
       cy.contains(CloudRunStubs.allPassing.commitInfo.branch as string)
       .should('be.visible')
     })
   })
 
-  context('when there is missing commit info', () => {
+  context('when there is missing commit info', { viewportWidth: 1536 }, () => {
     it('renders without errors', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
@@ -89,7 +131,7 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -98,18 +140,20 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
 
       // this is the human readable commit time from the stub
       cy.contains('an hour ago').should('be.visible')
+      cy.findByTestId('runCard-avatar').should('not.exist')
+      cy.findByTestId('runCard-branchName').should('not.exist')
     })
   })
 
   context('run timing', () => {
-    it('displays HH:mm:ss format for run duration', () => {
+    it('displays  HH[h] mm[m] ss[s] format for run duration', { viewportWidth: 1536 }, () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
           result.totalDuration = HOUR + MINUTE + SECOND
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -117,17 +161,17 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
       })
 
       // this is the human readable commit time from the stub
-      cy.contains('01:01:01').should('be.visible')
+      cy.contains('01h 01m 01s').should('be.visible')
     })
 
-    it('displays mm:ss format for run duration if duration is less than an hour', () => {
+    it('displays mm[m] ss[s] format for run duration if duration is less than an hour', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
           result.totalDuration = MINUTE + SECOND
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -135,43 +179,89 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
       })
 
       // this is the human readable commit time from the stub
-      cy.contains('01:01').should('be.visible')
+      cy.contains('01m 01s').should('be.visible')
     })
   })
 
-  context('tags', () => {
-    it('renders all tags if >= 2', () => {
+  context('tags', { viewportWidth: 1536 }, () => {
+    it('renders all tags if >= 1 with commitInfo', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
-          result.tags = generateTags(2)
+          result.tags = generateTags(1)
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
         },
       })
 
-      cy.get('[data-cy="run-tag"]').should('have.length', 2).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
+      cy.get('[data-cy="runCard-branchName"]').should('be.visible')
+      cy.get('[data-cy="runTagCount"]').should('not.be.visible')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => {
+        cy.wrap($el).contains(`tag${i}`)
+      })
     })
 
-    it('truncates tags if > 2', () => {
+    it('truncates tags if > 1  with commitInfo', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
           result.tags = generateTags(6)
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
+              <RunCard gql={gqlVal} />
+            </div>
+          )
+        },
+      })
+
+      cy.get('[data-cy="runCard-branchName"]').should('be.visible')
+      cy.get('[data-cy="runTagCount"]').should('be.visible').contains('+5')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
+    })
+
+    it('renders all tags if >= 1', () => {
+      cy.mountFragment(RunCardFragmentDoc, {
+        onResult (result) {
+          result.tags = generateTags(1)
+
+          result.commitInfo = null
+        },
+        render: (gqlVal) => {
+          return (
+            <div class="p-3">
+              <RunCard gql={gqlVal} />
+            </div>
+          )
+        },
+      })
+
+      cy.get('[data-cy="runTagCount"]').should('not.be.visible')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
+    })
+
+    it('truncates tags if > 1', () => {
+      cy.mountFragment(RunCardFragmentDoc, {
+        onResult (result) {
+          result.tags = generateTags(6)
+
+          result.commitInfo = null
+        },
+        render: (gqlVal) => {
+          return (
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
         },
       })
 
-      cy.get('[data-cy="run-tag"]').should('have.length', 3).last().contains('+4')
+      cy.get('[data-cy="runTagCount"]').should('be.visible').contains('+5')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
     })
   })
 })
diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
index 177f015d8b5c..a40a19a72a88 100644
--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -1,83 +1,165 @@
 <template>
-  <ExternalLink
+  <div
     :data-cy="`runCard-${run.id}`"
-    class="border rounded bg-light-50 border-gray-100 w-full block overflow-hidden hocus-default"
-    :href="runUrl"
-    :use-default-hocus="false"
   >
-    <ListRowHeader
-      :data-cy="`run-card-icon-${run.status}`"
+    <div
+      class="flex justify-between p-[16px] gap-[8px] text-sm text-gray-700 items-center"
+      :data-cy="`runCard-status-${run.status}`"
     >
-      <template #icon>
-        <SolidStatusIcon
-          size="24"
-          :status="STATUS_MAP[run.status!]"
-        />
-      </template>
-      <template #header>
-        <span class="font-semibold mr-[8px] whitespace-pre-wrap">{{ run.commitInfo?.summary }}</span>
-        <span
-          v-for="tag in tags"
-          :key="tag"
-          class="rounded-md font-semibold border-gray-200 border-[1px] text-xs mr-[8px] px-[4px] text-gray-700"
-          data-cy="run-tag"
-        >{{ tag }}</span>
-      </template>
-      <template #description>
-        <ul class="flex flex-wrap text-sm text-gray-700 gap-[8px] items-center whitespace-nowrap children:flex children:items-center">
-          <li
-            v-if="run.commitInfo?.authorName"
-            data-cy="run-card-author"
+      <div
+        class="flex items-center gap-[8px] min-w-0"
+      >
+        <div>
+          <ExternalLink
+            :data-cy="`runNumberLink-${run.id}`"
+            class="group focus-visible:outline-none hover:underline-transparent"
+            :href="runUrl"
+            :use-default-hocus="false"
           >
-            <i-cy-general-user_x16
-              class="mr-1 icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200"
-              data-cy="run-card-avatar"
+            <RunNumber
+              v-if="props.gql.status && props.gql.runNumber"
+              :status="props.gql.status"
+              :value="props.gql.runNumber"
+              :is-actionable="true"
             />
-            <span class="sr-only">Commit Author:</span>{{ run.commitInfo.authorName }}
-          </li>
-
-          <li
+          </ExternalLink>
+        </div>
+        <div
+          class="flex gap-[8px] min-w-0"
+        >
+          <RunResults
+            :gql="props.gql"
+            :use-breakpoint-display="true"
+          />
+          <RunTag
             v-if="run.commitInfo?.branch"
-            data-cy="run-card-branch"
-          >
-            <i-cy-tech-branch-h_x16 class="mr-1 icon-dark-gray-300" />
-            <span class="sr-only">Branch Name:</span>{{ run.commitInfo.branch }}
-          </li>
-
+            :label="run.commitInfo?.branch"
+            :title="run.commitInfo?.branch"
+            :icon="IconTechnologyBranchH"
+            :icon-label="t('runs.card.branchName')"
+            class="hidden xl:inline-flex min-w-0"
+            data-cy="runCard-branchName"
+          />
+          <RunTag
+            v-for="tag in tagData?.tags"
+            :key="tag"
+            :label="tag"
+            :title="tag"
+            class="hidden 2xl:inline-flex max-w-[100px]"
+          />
+          <RunTagCount
+            v-for="tagCount in tagData?.tagCounts"
+            :key="tagCount.value"
+            :value="tagCount.value"
+            :class="tagCount.class"
+            :tooltip-data="{
+              flaky: tagCount.flaky,
+              branchName: tagCount.branchName,
+              tags: tagCount.tags,
+            }"
+          />
+        </div>
+      </div>
+      <div
+        class="flex gap-[16px] items-center"
+      >
+        <ul
+          class="flex gap-2 2xl:gap-4 w-[80px] lg:w-auto lg:max-w-[160px] 2xl:max-w-none justify-end text-sm text-gray-700 items-center whitespace-nowrap children:flex children:items-center"
+        >
           <li
-            v-if="run.createdAt"
-            data-cy="run-card-created-at"
+            v-if="run.commitInfo?.authorName"
+            data-cy="runCard-author"
+            class="gap-2 shrink-0 xl:max-w-[160px] overflow-hidden"
+            :title="run.commitInfo.authorName"
           >
-            <span class="sr-only">Run Created At:</span>{{ relativeCreatedAt }}
+            <UserAvatar
+              aria-hidden="true"
+              data-cy="runCard-avatar"
+              class="h-[16px] w-[16px] shrink-0 icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200"
+              :email="run.commitInfo?.authorEmail"
+            />
+            <span class="sr-only">{{ t('runs.card.commitAuthor') }}</span>
+            <div
+              class="hidden 2xl:block truncate"
+              role="none"
+            >
+              {{ run.commitInfo.authorName }}
+            </div>
           </li>
-
           <li
-            v-if="run.totalDuration"
-            data-cy="run-card-duration"
+            v-if="run.createdAt"
+            data-cy="runCard-createdAt"
+            class="gap-2 2xl:w-[200px] overflow-hidden"
+            :title="`${totalDuration} ${relativeCreatedAt}`"
           >
-            <span class="sr-only">Run Total Duration:</span>{{ totalDuration }}
+            <IconTimeClock
+              size="16"
+              class="hidden 2xl:inline-block shrink-0"
+              stroke-color="gray-500"
+              fill-color="gray-50"
+              aria-hidden="true"
+            />
+            <span class="sr-only">{{ t('runs.card.totalDuration') }}</span>
+            <div
+              class="truncate"
+              role="none"
+            >
+              {{ totalDuration }} ({{ relativeCreatedAt }})
+            </div>
           </li>
         </ul>
-      </template>
-      <template #middle>
-        <RunResults :gql="props.gql" />
-      </template>
-    </ListRowHeader>
-  </ExternalLink>
+        <Tooltip
+          v-if="props.showDebug && run.runNumber"
+          tab-index="0"
+          :disabled="props.debugEnabled"
+          placement="bottom"
+        >
+          <Button
+            data-cy="open-debug"
+            variant="outline-light"
+            :disabled="!props.debugEnabled"
+            size="24"
+            :aria-label="t(props.debugEnabled ? 'runs.card.debugDescription' : 'runs.card.noDebugAvailable', { runNumber: run.runNumber })"
+            @click="onDebugClick"
+          >
+            <IconTechnologyDebugger
+              aria-hidden="true"
+              class="h-[16px] w-[16px] mr-2 shrink-0"
+            />
+            {{ t('runs.card.debugLabel') }}
+          </Button>
+          <template #popper>
+            <div
+              class="max-w-full break-words whitespace-normal"
+            >
+              {{ t('runs.card.noDebugAvailable') }}
+            </div>
+          </template>
+        </Tooltip>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import ListRowHeader from '@cy/components/ListRowHeader.vue'
+import { useI18n } from '@cy/i18n'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
-import { gql, useSubscription } from '@urql/vue'
+import { gql, useSubscription, useMutation } from '@urql/vue'
+import RunTag from './RunTag.vue'
+import RunTagCount from './RunTagCount.vue'
 import RunResults from './RunResults.vue'
-import { CloudRunStatus, RunCardFragment, RunCard_ChangeDocument } from '../generated/graphql'
-import { dayjs } from './utils/day.js'
-import { useDurationFormat } from '../composables/useDurationFormat'
-import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
+import RunNumber from './RunNumber.vue'
+import Button from '@cypress-design/vue-button'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
+import { RunCardFragment, RunCard_ChangeDocument, RunCard_ShowDebugForCloudRunDocument } from '../generated/graphql'
+import { useRunDateTimeInterval } from '../debug/useRunDateTimeInterval'
+import { IconTechnologyDebugger, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 
+const { t } = useI18n()
+
 gql`
 fragment RunCard on CloudRun {
 	id
@@ -85,6 +167,7 @@ fragment RunCard on CloudRun {
 	status
   totalDuration
   url
+  runNumber
   tags {
     id
     name
@@ -95,6 +178,7 @@ fragment RunCard on CloudRun {
 		authorEmail
 		summary
 		branch
+		sha
 	}
 }
 `
@@ -108,19 +192,16 @@ subscription RunCard_Change($id: ID!) {
 }
 `
 
-const STATUS_MAP: Record<CloudRunStatus, StatusType> = {
-  PASSED: 'passed',
-  FAILED: 'failed',
-  CANCELLED: 'cancelled',
-  ERRORED: 'errored',
-  RUNNING: 'running',
-  NOTESTS: 'noTests',
-  OVERLIMIT: 'overLimit',
-  TIMEDOUT: 'timedOut',
-} as const
+gql`
+mutation RunCard_showDebugForCloudRun($runNumber: Int!) {
+  showDebugForCloudRun(runNumber: $runNumber)
+}
+`
 
 const props = defineProps<{
   gql: RunCardFragment
+  showDebug?: boolean
+  debugEnabled?: boolean
 }>()
 
 const run = computed(() => props.gql)
@@ -147,21 +228,72 @@ const runUrl = computed(() => {
   })
 })
 
-const relativeCreatedAt = computed(() => dayjs(new Date(run.value.createdAt!)).fromNow())
+const { relativeCreatedAt, totalDuration } = useRunDateTimeInterval(run)
 
-const totalDuration = useDurationFormat(run.value.totalDuration ?? 0)
+const showDebugForCloudRun = useMutation(RunCard_ShowDebugForCloudRunDocument)
 
-const tags = computed(() => {
-  const tags = (props.gql.tags ?? []).map((tag) => tag?.name).filter(Boolean) as string[]
+async function showDebugForRun () {
+  if (run.value.runNumber) {
+    await showDebugForCloudRun.executeMutation({ runNumber: run.value.runNumber })
+  }
+}
 
-  return tags.length <= 2 ? tags : tags.slice(0, 2).concat(`+${tags.length - 2}`)
+const tagData = computed(() => {
+  const tempTags = (props.gql.tags ?? []).map((tag) => tag?.name).filter(Boolean) as string[]
+
+  const baseCount = 1
+  const branchCount = run.value.commitInfo?.branch ? 1 : 0
+  const flakyCount = (run.value.totalFlakyTests || 0) > 0 ? 1 : 0
+  const tagCount = tempTags.length > 0 ? 1 : 0
+  const initialCount = tempTags.length > 0 ? tempTags.length - baseCount : 0
+  const secondCount = initialCount + tagCount
+  const thirdCount = initialCount + tagCount + branchCount + flakyCount
+
+  const tagCounts: {
+    value: number
+    flaky?: number
+    branchName?: string
+    tags?: string[]
+    class: string
+  }[] = []
+
+  // initial display
+  if (initialCount > 0) {
+    tagCounts.push({
+      value: initialCount,
+      tags: tempTags.slice(baseCount, tempTags.length),
+      class: 'hidden 2xl:inline-flex',
+    })
+  }
+
+  // first collapse
+  if (secondCount > 0) {
+    tagCounts.push({
+      value: initialCount + tagCount,
+      tags: tempTags,
+      class: 'hidden xl:inline-flex 2xl:hidden',
+    })
+  }
+
+  // second collapse
+  if (thirdCount > 0) {
+    tagCounts.push({
+      value: thirdCount,
+      branchName: run.value.commitInfo?.branch ?? undefined,
+      flaky: run.value.totalFlakyTests ?? undefined,
+      tags: tempTags,
+      class: 'inline-flex xl:hidden',
+    })
+  }
+
+  return { tags: tempTags.slice(0, baseCount), tagCounts }
 })
 
-</script>
+const onDebugClick = (event) => {
+  event.preventDefault()
+  event.stopPropagation()
 
-<style scoped>
-li:not(:first-child)::before {
-  content: '•';
-  @apply text-lg text-gray-400 pr-[8px]
+  showDebugForRun()
 }
-</style>
+
+</script>
diff --git a/packages/app/src/runs/RunNumber.cy.tsx b/packages/app/src/runs/RunNumber.cy.tsx
new file mode 100644
index 000000000000..54a4b2d58201
--- /dev/null
+++ b/packages/app/src/runs/RunNumber.cy.tsx
@@ -0,0 +1,34 @@
+import type { CloudRunStatus } from '../generated/graphql-test'
+import RunNumber from './RunNumber.vue'
+
+const STATUSES: CloudRunStatus[] = ['PASSED', 'FAILED', 'CANCELLED', 'RUNNING', 'ERRORED']
+
+describe('<RunNumber />', () => {
+  describe('playground', () => {
+    STATUSES.forEach((status) => {
+      it(`status = '${status}'`, () => {
+        cy.mount(() => (
+          <div class="flex m-2">
+            <RunNumber status={status} value={123} />
+          </div>
+        ))
+
+        cy.findByTestId(`runNumber-status-${status}`).should('be.visible').should('not.have.class', 'group-focus-visible:outline')
+      })
+    })
+  })
+
+  describe('with hover', () => {
+    STATUSES.forEach((status) => {
+      it(`status = '${status}'`, () => {
+        cy.mount(() => (
+          <div class="flex m-2 group">
+            <RunNumber status={status} value={123} is-actionable={true} />
+          </div>
+        ))
+
+        cy.findByTestId(`runNumber-status-${status}`).should('be.visible').should('have.class', 'group-focus-visible:outline')
+      })
+    })
+  })
+})
diff --git a/packages/app/src/runs/RunNumber.vue b/packages/app/src/runs/RunNumber.vue
new file mode 100644
index 000000000000..7705618c03ef
--- /dev/null
+++ b/packages/app/src/runs/RunNumber.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="border rounded flex flex-row font-semibold bg-gray-50 border-gray-200 h-6 text-sm px-2 gap-x-1 items-center justify-center"
+    :class="hocusStyles"
+    :data-cy="`runNumber-status-${props.status}`"
+  >
+    <SolidStatusIcon
+      size="16"
+      :status="ICON_MAP[props.status].type"
+    />
+    <span :class="runNumberColor">
+      {{ `#${props.value}` }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CloudRunStatus } from '../generated/graphql'
+import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
+
+const props = defineProps<{
+  status: CloudRunStatus
+  value: number
+  isActionable?: boolean
+}>()
+
+const ICON_MAP: Record<CloudRunStatus, { textColor: string, type: StatusType, hocusStyles: readonly string[] }> = {
+  PASSED: { textColor: 'text-jade-400', type: 'passed', hocusStyles: ['group-hover:border-jade-400', 'group-focus-visible:border-jade-400', 'group-focus-visible:outline-jade-400'] },
+  FAILED: { textColor: 'text-red-400', type: 'failed', hocusStyles: ['group-hover:border-red-400', 'group-focus-visible:border-red-400', 'group-focus-visible:outline-red-400'] },
+  CANCELLED: { textColor: 'text-gray-500', type: 'cancelled', hocusStyles: ['group-hover:border-gray-500', 'group-focus-visible:border-gray-500', 'group-focus-visible:outline-gray-500'] },
+  ERRORED: { textColor: 'text-orange-400', type: 'errored', hocusStyles: ['group-hover:border-orange-400', 'group-focus-visible:border-orange-400', 'group-focus-visible:outline-orange-400'] },
+  RUNNING: { textColor: 'text-indigo-500', type: 'running', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+  NOTESTS: { textColor: 'text-indigo-500', type: 'noTests', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+  OVERLIMIT: { textColor: 'text-indigo-500', type: 'overLimit', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+  TIMEDOUT: { textColor: 'text-indigo-500', type: 'timedOut', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+} as const
+
+const icon = computed(() => {
+  return ICON_MAP[props.status]
+})
+
+const runNumberColor = computed(() => {
+  return icon.value.textColor
+})
+
+const hocusStyles = computed(() => {
+  if (!props.isActionable) {
+    return
+  }
+
+  return [
+    'group-focus-visible:outline',
+    ...icon.value.hocusStyles,
+  ]
+})
+
+</script>
diff --git a/packages/app/src/runs/RunResults.cy.tsx b/packages/app/src/runs/RunResults.cy.tsx
index 140a9ec5daa2..885ab7fa26fe 100644
--- a/packages/app/src/runs/RunResults.cy.tsx
+++ b/packages/app/src/runs/RunResults.cy.tsx
@@ -1,16 +1,16 @@
+import RunResults from './RunResults.vue'
+import { RunResultsFragmentDoc } from '../generated/graphql-test'
 import { defaultMessages } from '@cy/i18n'
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
-import { RunCardFragmentDoc } from '../generated/graphql-test'
-import RunResults from './RunResults.vue'
 
-describe('<RunResults />', { viewportHeight: 150, viewportWidth: 250 }, () => {
-  it('shows number of passed, skipped, pending and failed tests', () => {
+describe('<RunResults />', () => {
+  it('shows the failed icon and the number of passed, skipped, pending, failed tests passed through gql props', () => {
     const cloudRuns = Object.values(CloudRunStubs)
 
     cy.mount(() => cloudRuns.map((cloudRun, i) => (<RunResults data-cy={`run-result-${i}`} gql={cloudRun} />)))
 
     cloudRuns.forEach((cloudRun, i) => {
-      cy.get(`[data-cy=run-result-${i}]`).within(() => {
+      cy.findByTestId(`run-result-${i}`).within(() => {
         cy.get(`[title=${defaultMessages.runs.results.passed}]`).should('contain.text', cloudRun.totalPassed)
         cy.get(`[title=${defaultMessages.runs.results.failed}]`).should('contain.text', cloudRun.totalFailed)
         cy.get(`[title=${defaultMessages.runs.results.skipped}]`).should('contain.text', cloudRun.totalSkipped)
@@ -18,17 +18,44 @@ describe('<RunResults />', { viewportHeight: 150, viewportWidth: 250 }, () => {
       })
     })
   })
+})
 
-  it('renders flaky ribbon', () => {
-    cy.mountFragment(RunCardFragmentDoc, {
-      onResult (result) {
-        result.totalFlakyTests = 4
-      },
-      render (gql) {
-        return <RunResults gql={gql} />
-      },
-    })
+describe('Flaky badge tests', () => {
+  const mountingFragment = (flakyTests: number, useBreakpoint?: boolean) => {
+    return (
+      cy.mountFragment(RunResultsFragmentDoc, {
+        onResult (result) {
+          if (result) {
+            result.totalFlakyTests = flakyTests
+          }
+        },
+        render: (gqlVal) => {
+          return (
+            <RunResults gql={gqlVal} useBreakpointDisplay={useBreakpoint} />
+          )
+        },
+      })
+    )
+  }
+
+  it('does not show flaky component when flakyTests are < 1', () => {
+    mountingFragment(0)
+    cy.contains('Flaky').should('not.exist')
+  })
+
+  it('contains flaky badge', () => {
+    mountingFragment(4)
+    cy.findByTestId('runResults-flakyBadge').contains(defaultMessages.specPage.flaky.badgeLabel)
+    cy.findByTestId('total-flaky-tests').contains(4)
+  })
+
+  it('responds to breakpoint with ', { viewportWidth: 1279 }, () => {
+    mountingFragment(4, false)
+    cy.findByTestId('runResults-flakyBadge').contains(defaultMessages.specPage.flaky.badgeLabel).should('be.visible')
+    cy.findByTestId('total-flaky-tests').contains(4)
 
-    cy.contains('4 Flaky')
+    mountingFragment(4, true)
+    cy.findByTestId('runResults-flakyBadge').contains(defaultMessages.specPage.flaky.badgeLabel).should('not.be.visible')
+    cy.findByTestId('total-flaky-tests').contains(4)
   })
 })
diff --git a/packages/app/src/runs/RunResults.vue b/packages/app/src/runs/RunResults.vue
index 85e91002c1e9..8beb0f5060d2 100644
--- a/packages/app/src/runs/RunResults.vue
+++ b/packages/app/src/runs/RunResults.vue
@@ -1,22 +1,43 @@
 <template>
-  <div class="flex gap-[8px] items-center">
-    <span
-      v-if="props.gql.totalFlakyTests"
-      class="rounded-md font-semibold bg-warning-100 text-sm py-[2px] px-[4px] text-warning-600 whitespace-nowrap"
-    >{{ props.gql.totalFlakyTests }} Flaky</span>
+  <div
+    class="flex gap-[8px] items-center bg-transparent"
+    data-cy="runResults-holder"
+  >
     <ResultCounts
-      :total-failed="props.gql.totalFailed"
-      :total-passed="props.gql.totalPassed"
-      :total-pending="props.gql.totalPending"
-      :total-skipped="props.gql.totalSkipped"
+      :total-passed="results.totalPassed"
+      :total-failed="results.totalFailed"
+      :total-skipped="results.totalSkipped"
+      :total-pending="results.totalPending"
+      :order="['PASSED', 'FAILED', 'SKIPPED', 'PENDING']"
     />
+    <div
+      v-if="results?.totalFlakyTests"
+      data-cy="runResults-flakyBadge"
+      class="border rounded flex-row gap-[8px] items-center h-6 bg-orange-50 border-orange-200 text-sm text-orange-600 px-2 gap-x-1"
+      :class="useBreakpointDisplay ? 'hidden xl:flex' : 'flex'"
+    >
+      <span
+        data-cy="total-flaky-tests"
+        class="font-medium pr-1 opacity-70"
+      >
+        {{ results.totalFlakyTests }}
+      </span>
+      <div class="w-px my-[6px] h-6 border-orange-200 border" />
+      <span class="font-semibold pl-1">
+        {{ t('specPage.flaky.badgeLabel') }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import type { RunResultsFragment } from '../generated/graphql'
 import { gql } from '@urql/core'
 import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 gql`
 fragment RunResults on CloudRun {
@@ -31,6 +52,10 @@ fragment RunResults on CloudRun {
 
 const props = defineProps<{
   gql: RunResultsFragment
+  useBreakpointDisplay?: boolean
 }>()
 
+const results = computed(() => {
+  return props.gql
+})
 </script>
diff --git a/packages/app/src/runs/RunTag.cy.tsx b/packages/app/src/runs/RunTag.cy.tsx
new file mode 100644
index 000000000000..2db3ed2e8490
--- /dev/null
+++ b/packages/app/src/runs/RunTag.cy.tsx
@@ -0,0 +1,37 @@
+import RunTag from './RunTag.vue'
+
+describe('<RunTag />', () => {
+  it('should show a normal tag', () => {
+    cy.mount({
+      name: 'RunTag',
+      render () {
+        return (
+          <RunTag
+            label="test-label"
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('test-label')
+  })
+
+  it('should show a icon tag', () => {
+    cy.mount({
+      name: 'RunTag',
+      render () {
+        return (
+          <RunTag
+            label="test-label"
+            icon={<span data-cy="test-dummy-icon">z</span>}
+            iconLabel="test-sr-text"
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('test-label')
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('test-sr-text')
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('z')
+  })
+})
diff --git a/packages/app/src/runs/RunTag.vue b/packages/app/src/runs/RunTag.vue
new file mode 100644
index 000000000000..f5884e0a2e56
--- /dev/null
+++ b/packages/app/src/runs/RunTag.vue
@@ -0,0 +1,34 @@
+<template>
+  <div
+    v-if="label"
+    class="inline-flex rounded-md bg-gray-50 border-gray-200 border-[1px] text-sm px-[8px] text-gray-700 items-center py-[2px]"
+    data-cy="runTag"
+  >
+    <component
+      :is="icon"
+      class="mr-2 icon-dark-gray-600 shrink-0"
+    />
+    <span
+      class="sr-only"
+    >
+      {{ iconLabel }}
+    </span>
+    <span
+      class="truncate"
+      role="none"
+    >
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Component } from 'vue'
+
+defineProps<{
+  label: string
+  iconLabel?: string
+  icon?: Component
+}>()
+
+</script>
diff --git a/packages/app/src/runs/RunTagCount.cy.tsx b/packages/app/src/runs/RunTagCount.cy.tsx
new file mode 100644
index 000000000000..976814ffab49
--- /dev/null
+++ b/packages/app/src/runs/RunTagCount.cy.tsx
@@ -0,0 +1,81 @@
+import RunTagCount from './RunTagCount.vue'
+
+describe('<RunTagCount />', () => {
+  it('should show all information', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              flaky: 1,
+              branchName: 'test-branch',
+              tags: ['tag-one', 'tag-two'],
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('1 Flaky Branch Name: test-branch tag-one tag-two').should('exist')
+  })
+
+  it('should show tags only', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              tags: ['tag-one', 'tag-two'],
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('tag-one tag-two').should('exist')
+  })
+
+  it('should show flaky only', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              flaky: 1,
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('1 Flaky').should('exist')
+  })
+
+  it('should show branch only', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              branchName: 'test-branch',
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('Branch Name: test-branch').should('exist')
+  })
+})
diff --git a/packages/app/src/runs/RunTagCount.vue b/packages/app/src/runs/RunTagCount.vue
new file mode 100644
index 000000000000..7ac2156ec33c
--- /dev/null
+++ b/packages/app/src/runs/RunTagCount.vue
@@ -0,0 +1,126 @@
+<template>
+  <Tooltip
+    tab-index="0"
+    placement="bottom"
+  >
+    <RunTag
+      :aria-label="ariaLabel"
+      :title="`+${value}`"
+      :label="`+${value}`"
+      data-cy="runTagCount"
+    />
+    <template
+      v-if="tooltipData"
+      #popper
+    >
+      <ul
+        class="flex gap-[8px] flex-col max-w-full children:flex text-gray-300"
+        data-cy="runTagCount-tooltip"
+      >
+        <li
+          v-if="(tooltipData.flaky || 0 > 0)"
+          class="items-center overflow-hidden"
+        >
+          <div
+            class="flex border rounded flex-row gap-[8px] items-center h-6 border-white/20 text-orange-300 text-sm px-2 gap-x-1"
+          >
+            <span
+              class="font-medium pr-1 opacity-70"
+            >
+              {{ tooltipData.flaky }}
+            </span>
+            <div class="w-px my-[6px] h-6 border-white/20 border" />
+            <span class="font-semibold pl-1">
+              {{ t('specPage.flaky.badgeLabel') }}
+            </span>
+          </div>
+        </li>
+        <li
+          v-if="tooltipData.branchName"
+          class="items-center overflow-hidden text-sm"
+        >
+          <IconTechnologyBranchH
+            aria-hidden="true"
+            class="shrink-0 mr-2 icon-dark-gray-500"
+          />
+          <span
+            class="sr-only"
+          >
+            {{ t('runs.card.branchName') }}
+          </span>
+          <div class="grow-1 max-w-full overflow-hidden">
+            <div class="max-w-full break-words whitespace-normal">
+              {{ tooltipData.branchName }}
+            </div>
+            <div />
+          </div>
+        </li>
+        <li
+          v-if="tooltipData.tags && tooltipData.tags?.length > 0"
+          class="flex-col items-start max-w-full  text-sm gap-[8px]"
+        >
+          <span class="font-medium">Tags</span>
+          <ul
+            class="flex flex-col gap-[8px] children:flex children:items-center w-full"
+          >
+            <li
+              v-for="tag in tooltipData.tags"
+              :key="tag"
+              class="relative overflow-hidden max-w-full"
+            >
+              <div
+                aria-hidden="true"
+                class=" shrink-0 pr-[8px]"
+              >
+                <IconDotOutlineSmall class="icon-dark-gray-500 icon-light-gray-500" />
+              </div>
+              <div class="grow-1 max-w-full overflow-hidden">
+                <div class="max-w-full break-words whitespace-normal">
+                  {{ tag }}
+                </div>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </template>
+  </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import { IconTechnologyBranchH, IconDotOutlineSmall } from '@cypress-design/vue-icon'
+import RunTag from './RunTag.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  value: number
+  tooltipData: {
+    flaky?: number
+    branchName?: string
+    tags?: string[]
+  }
+}>()
+
+const ariaLabel = computed(() => {
+  let labelArray: string[] = []
+
+  if (props.tooltipData.flaky) {
+    labelArray.push(`${props.tooltipData.flaky}`, t('specPage.flaky.badgeLabel'))
+  }
+
+  if (props.tooltipData.branchName) {
+    labelArray.push(t('runs.card.branchName'), props.tooltipData.branchName)
+  }
+
+  if (props.tooltipData.tags) {
+    labelArray = labelArray.concat(props.tooltipData.tags)
+  }
+
+  return labelArray.join(' ')
+})
+
+</script>
diff --git a/packages/app/src/runs/RunsComposable.ts b/packages/app/src/runs/RunsComposable.ts
index 74de6a22efbb..533dfea788b2 100644
--- a/packages/app/src/runs/RunsComposable.ts
+++ b/packages/app/src/runs/RunsComposable.ts
@@ -5,4 +5,6 @@ export type RunsComposable = {
   runs: Ref<RunCardFragment[] | undefined>
   reExecuteRunsQuery: () => void
   query: any
+  allRunIds?: Ref<string[] | undefined>
+  currentCommitInfo?: Ref<{ sha: string, message: string } | null | undefined>
 }
diff --git a/packages/app/src/runs/RunsContainer.cy.tsx b/packages/app/src/runs/RunsContainer.cy.tsx
index f120d782f49b..d296e3f48624 100644
--- a/packages/app/src/runs/RunsContainer.cy.tsx
+++ b/packages/app/src/runs/RunsContainer.cy.tsx
@@ -16,15 +16,16 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
       cy.mountFragment(RunsContainerFragmentDoc, {
         render (gqlVal) {
           const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+          const runIds: string[] = runs?.[0]?.id ? [runs?.[0]?.id] : [] as string[]
 
-          return <RunsContainer gql={gqlVal} runs={runs} online />
+          return <RunsContainer gql={gqlVal} runs={runs} online allRunIds={runIds} />
         },
       })
 
       const statuses = ['CANCELLED', 'ERRORED', 'FAILED', 'NOTESTS', 'OVERLIMIT', 'PASSED', 'RUNNING', 'TIMEDOUT']
 
       cy.wrap(statuses).each((status: string) => {
-        cy.contains(`fix: make gql work ${ status}`).should('be.visible')
+        cy.get(`[data-cy="runCard-status-${status}"]`).should('exist')
       })
 
       cy.percySnapshot()
diff --git a/packages/app/src/runs/RunsContainer.vue b/packages/app/src/runs/RunsContainer.vue
index 4b0c9a7ec11d..5e4a2972ea36 100644
--- a/packages/app/src/runs/RunsContainer.vue
+++ b/packages/app/src/runs/RunsContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full ">
+  <div class="h-full">
     <NoInternetConnection v-if="!online">
       {{ t('launchpadErrors.noInternet.connectProject') }}
     </NoInternetConnection>
@@ -60,10 +60,12 @@
       >
         {{ t('runs.empty.ensureGitSetupCorrectly') }}
       </TrackedBanner>
-      <RunCard
-        v-for="run of runs"
-        :key="run.id"
-        :gql="run"
+      <RunsLayout
+        :runs="runs"
+        :all-run-ids="allRunIds"
+        :is-using-git="userProjectStatusStore.project.isUsingGit"
+        :latest-run-url="latestRunUrl"
+        :current-commit-info="props.currentCommitInfo"
       />
     </div>
   </div>
@@ -73,10 +75,10 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from '@cy/i18n'
 import NoInternetConnection from '@packages/frontend-shared/src/components/NoInternetConnection.vue'
-import RunCard from './RunCard.vue'
 import RunsConnect from './RunsConnect.vue'
 import RunsConnectSuccessAlert from './RunsConnectSuccessAlert.vue'
 import RunsEmpty from './RunsEmpty.vue'
+import RunsLayout from './RunsLayout.vue'
 import Warning from '@packages/frontend-shared/src/warning/Warning.vue'
 import RunsErrorRenderer from './RunsErrorRenderer.vue'
 import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
@@ -104,11 +106,28 @@ const props = defineProps<{
   gql: RunsContainerFragment | RunsGitTreeQuery
   runs?: RunCardFragment[]
   online: boolean
+  allRunIds?: string[]
+  currentCommitInfo?: { sha: string, message: string } | null
 }>()
 
 const showConnectSuccessAlert = ref(false)
 const connectionFailed = computed(() => !props.gql.currentProject?.cloudProject && props.online)
 
+const latestRunUrl = computed(() => {
+  if (props.gql.currentProject?.cloudProject?.__typename !== 'CloudProject') {
+    return '#'
+  }
+
+  return getUrlWithParams({
+    url: props.gql.currentProject?.cloudProject?.cloudProjectUrl,
+    params: {
+      utm_source: getUtmSource(),
+      utm_medium: RUNS_TAB_MEDIUM,
+      utm_campaign: 'View runs in Cypress Cloud',
+    },
+  })
+})
+
 const noRunsForBranchMessage = computed(() => {
   const learnMoreLink = getUrlWithParams({
     url: 'https://on.cypress.io/git-info',
diff --git a/packages/app/src/runs/RunsLayout.cy.tsx b/packages/app/src/runs/RunsLayout.cy.tsx
new file mode 100644
index 000000000000..fb9102d41d70
--- /dev/null
+++ b/packages/app/src/runs/RunsLayout.cy.tsx
@@ -0,0 +1,171 @@
+import RunsLayout from './RunsLayout.vue'
+import { RunsContainerFragmentDoc } from '../generated/graphql-test'
+
+const statuses = ['CANCELLED', 'ERRORED', 'FAILED', 'NOTESTS', 'OVERLIMIT', 'PASSED', 'RUNNING', 'TIMEDOUT']
+
+describe('<RunsLayout />', () => {
+  context('grouped runs when isUsingGit is true', () => {
+    it('displays commits grouped by sha', () => {
+      const shas: string[] = []
+
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          for (let i = 0; i < statuses.length; i += 1) {
+            const runSha = runs?.[i]?.commitInfo?.sha
+
+            if (runSha) {
+              shas.push(runSha)
+            }
+          }
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={{ sha: 'new-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get(`[data-cy="runsLayout-git"`).should('be.visible')
+      cy.get(`[data-cy="runsLayout-no-git"`).should('not.exist')
+      cy.get(`[data-cy="runsLayout-git"`).children('li').should('have.length', 21).each((item, index) => {
+        if (index === 0) {
+          cy.wrap(item).should('be.visible').contains('a message')
+        } else {
+          cy.wrap(item).should('be.visible').contains(`fix: make gql work ${statuses[(index - 1) % statuses.length]}`).should('be.visible')
+        }
+      })
+    })
+
+    it('hides View Runs button when latestRunUrl not present', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+              isUsingGit={true}
+              currentCommitInfo={{ sha: 'new-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get('[data-cy="open-cloud-latest').should('not.exist')
+    })
+
+    it('displays newer commit checked out', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={{ sha: 'new-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get('[data-cy="commit-new-sha"]').should('exist').contains('Checked out')
+      cy.get('[data-cy="open-cloud-latest').should('be.visible').contains('View runs in Cypress Cloud')
+    })
+
+    it('displays first commit checked out', () => {
+      let firstRunSha: string | null | undefined = null
+
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          firstRunSha = runs?.[0].commitInfo?.sha
+          const commitInfo = firstRunSha ? { sha: firstRunSha, message: 'a message' } : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={[]}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={commitInfo}
+            />
+          )
+        },
+      })
+
+      cy.then(() => {
+        cy.get(`[data-cy="commit-${firstRunSha}"`).should('exist').contains('Checked out')
+      })
+
+      cy.get(`[data-cy="open-cloud-latest"`).should('be.visible').contains('View runs in Cypress Cloud')
+    })
+
+    it('displays debug button enabled when allRunIds populated', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          const firstRunId = runs?.[0].id
+          const secondRunId = runs?.[1].id
+          const runIds = firstRunId && secondRunId ? [firstRunId, secondRunId] : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={runIds}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={{ sha: 'some-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get(`[data-cy="open-cloud-latest"`).should('be.visible').contains('View runs in Cypress Cloud')
+      cy.get(`[data-cy="runsLayout-git"`).children('li').should('have.length', 21).each((item, index) => {
+        if (index === 0) return
+
+        if (index < 3) {
+          cy.wrap(item).should('be.visible').contains('Debug').should('be.enabled')
+        } else {
+          cy.wrap(item).should('be.visible').contains('Debug').should('not.be.enabled')
+        }
+      })
+    })
+  })
+
+  context('block runs when isUsingGit is false', () => {
+    it('displays in block layout', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+            />
+          )
+        },
+      })
+
+      cy.get(`[data-cy="runsLayout-git"`).should('not.exist')
+      cy.get(`[data-cy="runsLayout-no-git"`).should('be.visible')
+      cy.get(`[data-cy="runsLayout-no-git"`).children('li').should('have.length', 20).each((item, index) => {
+        cy.wrap(item).should('be.visible').find(`[data-cy="runCard-status-${statuses[index % statuses.length]}"]`).should('be.visible')
+      })
+    })
+  })
+})
diff --git a/packages/app/src/runs/RunsLayout.vue b/packages/app/src/runs/RunsLayout.vue
new file mode 100644
index 000000000000..f944d4419690
--- /dev/null
+++ b/packages/app/src/runs/RunsLayout.vue
@@ -0,0 +1,157 @@
+<template>
+  <div
+    v-if="isUsingGit"
+    class="flex flex-col gap-[24px]"
+  >
+    <ul
+      data-cy="runsLayout-git"
+      class="flex flex-col gap-[16px] relative before:content-[''] before:absolute before:top-[20px] before:bottom-[10px] before:w-[2px] before:border-2 before:border-dashed before:border-l-0 before:border-y-0 before:border-r-gray-100 before:left-[7px]"
+    >
+      <li
+        v-for="(sha,index) of Object.keys(groupByCommit)"
+        :key="sha"
+        :data-cy="`commit-${sha}`"
+        :class="{ 'mb-[-24px]': !groupByCommit[sha].runs }"
+      >
+        <div
+          class="flex items-center my-[10px] [&>*:last-child]:mr-[8px]"
+          :class="{ 'mt-0': index === 0 }"
+        >
+          <DebugCommitIcon
+            aria-hidden="true"
+            class="h-[16px] w-[16px] relative"
+          />
+          <LightText class="shrink-0 truncate ml-[8px]">
+            {{ sha.slice(0, 7) }}
+          </LightText>
+          <Dot />
+          <span
+            class="text-sm font-medium text-gray-800 truncate"
+            :title="groupByCommit[sha].message!"
+            role="none"
+          >
+            {{ groupByCommit[sha].message }}
+          </span>
+          <span
+            v-if="sha === currentCommitInfo?.sha"
+            data-cy="tag-checked-out"
+            class="inline-flex items-center shrink-0 font-medium text-purple-400 align-middle border border-gray-100 rounded border-1 h-[16px] ml-[8px] px-[4px] text-[12px] leading-[16px]"
+          >
+            {{ t('runs.layout.checkedOut') }}
+          </span>
+        </div>
+        <ul
+          v-if="groupByCommit[sha].runs"
+          class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden"
+        >
+          <li
+            v-for="run of groupByCommit[sha].runs"
+            :key="run.id"
+            class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+          >
+            <RunCard
+              :gql="run"
+              :show-debug="true"
+              :debug-enabled="enableDebugging(run.id)"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <Button
+      v-if="props.latestRunUrl"
+      data-cy="open-cloud-latest"
+      variant="outline-indigo"
+      size="32"
+      class="self-start"
+      @click="openLatest"
+    >
+      <IconTechnologyCypress class="h-[16px] w-[16px] mr-[8px]" />
+      {{ t('runs.layout.viewCloudRuns') }}
+    </Button>
+  </div>
+  <ul
+    v-else
+    data-cy="runsLayout-no-git"
+    class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden"
+  >
+    <li
+      v-for="run of runs"
+      :key="run.id"
+      class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+    >
+      <RunCard
+        :gql="run"
+      />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { compact, groupBy } from 'lodash'
+import { computed, h, FunctionalComponent } from 'vue'
+import { useI18n } from '@cy/i18n'
+import RunCard from './RunCard.vue'
+import DebugCommitIcon from '../debug/DebugCommitIcon.vue'
+import Button from '@cypress-design/vue-button'
+import { IconTechnologyCypress } from '@cypress-design/vue-icon'
+import type { RunCardFragment } from '../generated/graphql'
+import { useExternalLink } from '@cy/gql-components/useExternalLink'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  runs?: RunCardFragment[]
+  allRunIds?: string[]
+  isUsingGit?: boolean
+  latestRunUrl?: string
+  currentCommitInfo?: { sha: string, message: string } | null
+}>()
+
+const openLatest = useExternalLink(props.latestRunUrl)
+
+const Dot: FunctionalComponent = () => {
+  return h('span', { ariaHidden: 'true', class: 'px-[8px] text-gray-300' }, '•')
+}
+
+const LightText: FunctionalComponent = (_props, { slots }) => {
+  return h('span', { class: 'text-sm text-gray-700' }, slots?.default?.())
+}
+
+const enableDebugging = (runId: string) => {
+  const allRunIds = props.allRunIds
+
+  if (!allRunIds) {
+    return false
+  }
+
+  return allRunIds.some((allRunId) => runId === allRunId)
+}
+
+const groupByCommit = computed(() => {
+  const grouped = groupBy(compact(props.runs), (run) => {
+    return run?.commitInfo?.sha
+  })
+
+  const mapped = {}
+
+  const hasRunsForCurrentCommit = props.currentCommitInfo?.sha && Object.keys(grouped).includes(props.currentCommitInfo.sha)
+
+  if (!hasRunsForCurrentCommit && props.currentCommitInfo) {
+    mapped[props.currentCommitInfo.sha] = props.currentCommitInfo
+  }
+
+  const result = Object.keys(grouped).reduce<Record<string, {sha: string, message: string | undefined | null, runs: typeof props.runs}>>((acc, curr) => {
+    acc[curr] = {
+      sha: curr,
+      message: grouped[curr][0].commitInfo?.summary,
+      runs: grouped[curr],
+    }
+
+    return acc
+  }, mapped)
+
+  return result
+})
+
+</script>
diff --git a/packages/app/src/runs/RunsSkeleton.cy.tsx b/packages/app/src/runs/RunsSkeleton.cy.tsx
index 31df937b90e8..7cd8716cb698 100644
--- a/packages/app/src/runs/RunsSkeleton.cy.tsx
+++ b/packages/app/src/runs/RunsSkeleton.cy.tsx
@@ -1,7 +1,15 @@
 import RunsSkeleton from './RunsSkeleton.vue'
 
 describe('<RunsSkeleton />', () => {
-  it('playground', () => {
+  it('displays git structure', () => {
+    cy.mount(<RunsSkeleton isUsingGit />)
+
+    cy.get(`[data-cy="runsSkeleton-git"`).should('be.visible')
+  })
+
+  it('displays default structure', () => {
     cy.mount(<RunsSkeleton />)
+
+    cy.get(`[data-cy="runsSkeleton-default"`).should('be.visible')
   })
 })
diff --git a/packages/app/src/runs/RunsSkeleton.vue b/packages/app/src/runs/RunsSkeleton.vue
index d95de7065cd7..33bd4b5c6702 100644
--- a/packages/app/src/runs/RunsSkeleton.vue
+++ b/packages/app/src/runs/RunsSkeleton.vue
@@ -1,43 +1,67 @@
 <template>
-  <div
-    data-cy="runs-loader"
+  <ul
+    v-if="isUsingGit"
+    data-cy="runsSkeleton-git"
+    class="flex flex-col mb-[24px] gap-[16px] relative before:content-[''] before:absolute before:top-[20px] before:bottom-[10px] before:w-[2px] before:border-2 before:border-dashed before:border-l-0 before:border-y-0 before:border-r-gray-100 before:left-[7px]"
   >
-    <div
-      v-for="i in numberOfLines"
+    <li
+      v-for="i in numberOfLinesGit"
       :key="i"
-      class="mb-4"
     >
-      <ListRowHeader
-        disabled
-        class="border border-gray-100"
+      <div
+        class="flex items-center my-[10px] gap-[8px] children:h-[14px]"
+        :class="{ 'mt-0': i === 0 }"
       >
-        <template #icon>
-          <div class="h-[20px] w-[20px] bg-gray-100 rounded-xl mx-[2px]" />
-        </template>
-        <template #header>
-          <div class="w-[256px] rounded-xl h-[16px] bg-gray-50 my-[4px]" />
-        </template>
-        <template #description>
-          <div
-            v-for="j in 4"
-            :key="j"
-            class="rounded-lg h-[8px] bg-gray-50 mr-[20px] inline-block"
-            :class="j === 4 ? 'w-[64px]' : 'w-[80px]'"
-          />
-        </template>
-        <template #right>
-          <div
-            v-if="i >= 2"
-            class="rounded-lg h-[16px] bg-gray-50 w-[216px]"
-          />
-        </template>
-      </ListRowHeader>
-    </div>
-  </div>
+        <div
+          class="relative w-[16px] rounded-lg bg-gray-50"
+        />
+        <div
+          class="w-[46px] max-w-[46px] rounded-lg bg-gray-50"
+        />
+        <div
+          class="flex items-center text-gray-50"
+        >
+          •
+        </div>
+        <div
+          class="w-[240px] max-w-[240px] rounded-lg bg-gray-50"
+        />
+      </div>
+      <ul
+        class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden"
+      >
+        <li
+          v-for="j in (i %2 === 0 ? 2 : 1)"
+          :key="j"
+          class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+        >
+          <RunsSkeletonRow />
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ul
+    v-else
+    data-cy="runsSkeleton-default"
+    class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden mb-[24px]"
+  >
+    <li
+      v-for="i of numberOfLinesDefault"
+      :key="i"
+      class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+    >
+      <RunsSkeletonRow />
+    </li>
+  </ul>
 </template>
 
 <script lang="ts" setup>
-import ListRowHeader from '@cy/components/ListRowHeader.vue'
+import RunsSkeletonRow from './RunsSkeletonRow.vue'
+
+defineProps<{
+  isUsingGit?: boolean
+}>()
 
-const numberOfLines = 20
+const numberOfLinesDefault = 7
+const numberOfLinesGit = 5
 </script>
diff --git a/packages/app/src/runs/RunsSkeletonRow.cy.tsx b/packages/app/src/runs/RunsSkeletonRow.cy.tsx
new file mode 100644
index 000000000000..8d4fa2998b51
--- /dev/null
+++ b/packages/app/src/runs/RunsSkeletonRow.cy.tsx
@@ -0,0 +1,7 @@
+import RunsSkeletonRow from './RunsSkeletonRow.vue'
+
+describe('<RunsSkeletonRow />', () => {
+  it('playground', () => {
+    cy.mount(<RunsSkeletonRow />)
+  })
+})
diff --git a/packages/app/src/runs/RunsSkeletonRow.vue b/packages/app/src/runs/RunsSkeletonRow.vue
new file mode 100644
index 000000000000..ec72b6f5807c
--- /dev/null
+++ b/packages/app/src/runs/RunsSkeletonRow.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    data-cy="runsSkeletonRow"
+    class="p-[16px] gap-[16px] flex justify-between children:flex"
+  >
+    <div class="overflow-hidden gap-[8px] children:rounded-lg children:h-[26px] children:bg-gray-50">
+      <div
+        class="shrink-0 w-[80px]"
+      />
+      <div
+        class="w-[160px] max-w-[160px]"
+      />
+      <div
+        class="w-[80px] max-w-[80px]"
+      />
+      <div
+        class="w-[80px] max-w-[80px]"
+      />
+    </div>
+    <div class="children:flex  children:items-center overflow-hidden gap-[16px] children:overflow-hidden children:gap-[8px]">
+      <div class="children:bg-gray-50 children:rounded-lg">
+        <div
+          class="shrink-0 w-[16px] h-[16px]"
+        />
+        <div
+          class="w-[80px] max-w-[80px] h-[20px]"
+        />
+      </div>
+      <div class="children:bg-gray-50 children:rounded-lg">
+        <div
+          class="shrink-0 w-[16px] h-[16px]"
+        />
+        <div
+          class="w-[120px] max-w-[120px] h-[20px]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/app/src/runs/useGitTreeRuns.ts b/packages/app/src/runs/useGitTreeRuns.ts
index 5871798a03c9..5a4eb6ff919f 100644
--- a/packages/app/src/runs/useGitTreeRuns.ts
+++ b/packages/app/src/runs/useGitTreeRuns.ts
@@ -21,6 +21,7 @@ fragment RunsGitTreeProject on Query {
       __typename
       ... on CloudProject {
         id
+        cloudProjectUrl
       }
     }
   }
@@ -52,6 +53,14 @@ export const useGitTreeRuns = (online: Ref<boolean>): RunsComposable => {
     return nodes
   })
 
+  const allRunIds = computed(() => {
+    return relevantRuns?.value.all?.map((run) => run.runId) || []
+  })
+
+  const currentCommitInfo = computed(() => {
+    return relevantRuns?.value.currentCommitInfo
+  })
+
   function reExecuteRunsQuery () {
     query.executeQuery()
   }
@@ -60,5 +69,7 @@ export const useGitTreeRuns = (online: Ref<boolean>): RunsComposable => {
     runs,
     reExecuteRunsQuery,
     query,
+    allRunIds,
+    currentCommitInfo,
   }
 }
diff --git a/packages/app/src/runs/useProjectRuns.ts b/packages/app/src/runs/useProjectRuns.ts
index 49da4a413d1c..6ecefab19984 100644
--- a/packages/app/src/runs/useProjectRuns.ts
+++ b/packages/app/src/runs/useProjectRuns.ts
@@ -31,6 +31,7 @@ fragment RunsContainer on Query {
       __typename
       ... on CloudProject {
         id
+        cloudProjectUrl
         runs(first: 10) {
           ...RunsContainer_RunsConnection
         }
diff --git a/packages/data-context/src/sources/RelevantRunsDataSource.ts b/packages/data-context/src/sources/RelevantRunsDataSource.ts
index 284369d0309a..0d378bbd117d 100644
--- a/packages/data-context/src/sources/RelevantRunsDataSource.ts
+++ b/packages/data-context/src/sources/RelevantRunsDataSource.ts
@@ -218,7 +218,7 @@ export class RelevantRunsDataSource {
   }
 
   #takeLatestRuns (runs: RelevantRunInfo[]) {
-    const latestRuns = take(runs, 10)
+    const latestRuns = take(runs, 100)
 
     debug('latest runs after take', latestRuns)
 
diff --git a/packages/driver/cypress/e2e/commands/actions/click.cy.js b/packages/driver/cypress/e2e/commands/actions/click.cy.js
index 6bf6d3c23338..97fe26a7b6a0 100644
--- a/packages/driver/cypress/e2e/commands/actions/click.cy.js
+++ b/packages/driver/cypress/e2e/commands/actions/click.cy.js
@@ -46,6 +46,7 @@ const getMidPoint = (el) => {
 
 const isFirefox = Cypress.isBrowser('firefox')
 const isWebKit = Cypress.isBrowser('webkit')
+const isChromium116OrLater = Cypress.isBrowser({ family: 'chromium' }) && Cypress.browserMajorVersion() >= 116
 
 describe('src/cy/commands/actions/click', () => {
   beforeEach(() => {
@@ -4448,13 +4449,12 @@ describe('mouse state', () => {
       btn.on('pointerover', onAction)
 
       cy.get('#btn').click()
-      // cy.wrap(onAction).should('calledOnce')
 
       cy.getAll('btn', 'pointerover pointerenter').each(shouldBeCalledOnce)
 
       // On disabled inputs, pointer events are still fired in chrome, not in firefox or webkit
       cy.getAll('btn', 'pointerdown pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalledOnce)
-      cy.getAll('btn', 'mouseover mouseenter').each(isFirefox || isWebKit ? shouldBeCalled : shouldNotBeCalled)
+      cy.getAll('btn', 'mouseover mouseenter').each(isFirefox || isWebKit || isChromium116OrLater ? shouldBeCalled : shouldNotBeCalled)
       cy.getAll('btn', 'mousedown mouseup click').each(shouldNotBeCalled)
     })
 
diff --git a/packages/driver/src/cy/mouse.ts b/packages/driver/src/cy/mouse.ts
index 2958b03881a8..2a34656ac7ff 100644
--- a/packages/driver/src/cy/mouse.ts
+++ b/packages/driver/src/cy/mouse.ts
@@ -58,6 +58,8 @@ type DefaultMouseOptions = ModifiersEventOptions & CoordsEventOptions & {
 export const create = (state: StateFunc, keyboard: Keyboard, focused: IFocused, Cypress: ICypress) => {
   const isFirefox = Cypress.browser.family === 'firefox'
   const isWebKit = Cypress.isBrowser('webkit')
+  // Chromium 116+ allows the simulated events to be sent to disabled elements so we need to explicitly exclude them
+  const isChromium116OrLater = Cypress.isBrowser({ family: 'chromium' }) && Cypress.browserMajorVersion() >= 116
 
   const sendPointerEvent = (el, evtOptions, evtName, bubbles = false, cancelable = false) => {
     const constructor = el.ownerDocument.defaultView.PointerEvent
@@ -103,14 +105,14 @@ export const create = (state: StateFunc, keyboard: Keyboard, focused: IFocused,
   }
 
   const sendMouseup = (el, evtOptions) => {
-    if ((isFirefox || isWebKit) && el.disabled) {
+    if ((isFirefox || isWebKit || isChromium116OrLater) && el.disabled) {
       return {}
     }
 
     return sendMouseEvent(el, evtOptions, 'mouseup', true, true)
   }
   const sendMousedown = (el, evtOptions): {} | SentEvent => {
-    if ((isFirefox || isWebKit) && el.disabled) {
+    if ((isFirefox || isWebKit || isChromium116OrLater) && el.disabled) {
       return {}
     }
 
@@ -133,21 +135,21 @@ export const create = (state: StateFunc, keyboard: Keyboard, focused: IFocused,
   }
   const sendClick = (el, evtOptions, opts: { force?: boolean } = {}) => {
     // send the click event if firefox and force (needed for force check checkbox)
-    if (!opts.force && (isFirefox || isWebKit) && el.disabled) {
+    if (!opts.force && (isFirefox || isWebKit || isChromium116OrLater) && el.disabled) {
       return {}
     }
 
     return sendMouseEvent(el, evtOptions, 'click', true, true)
   }
   const sendDblclick = (el, evtOptions) => {
-    if ((isFirefox || isWebKit) && el.disabled) {
+    if ((isFirefox || isWebKit || isChromium116OrLater) && el.disabled) {
       return {}
     }
 
     return sendMouseEvent(el, evtOptions, 'dblclick', true, true)
   }
   const sendContextmenu = (el, evtOptions) => {
-    if ((isFirefox || isWebKit) && el.disabled) {
+    if ((isFirefox || isWebKit || isChromium116OrLater) && el.disabled) {
       return {}
     }
 
diff --git a/packages/electron/lib/electron.js b/packages/electron/lib/electron.js
index 58d5dbb0d6fc..3b54346510a4 100644
--- a/packages/electron/lib/electron.js
+++ b/packages/electron/lib/electron.js
@@ -126,7 +126,11 @@ module.exports = {
         const opts = minimist(argv)
 
         if (opts.inspectBrk) {
-          argv.unshift('--inspect-brk=5566')
+          if (process.env.CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE) {
+            argv.unshift(`--inspect-brk=${process.env.CYPRESS_DOCKER_DEV_INSPECT_OVERRIDE}`)
+          } else {
+            argv.unshift('--inspect-brk=5566')
+          }
         }
       }
 
diff --git a/packages/frontend-shared/src/components/ResultCounts.vue b/packages/frontend-shared/src/components/ResultCounts.vue
index 4779af03272c..d94e4c42aae4 100644
--- a/packages/frontend-shared/src/components/ResultCounts.vue
+++ b/packages/frontend-shared/src/components/ResultCounts.vue
@@ -11,6 +11,7 @@
         :is="result.icon"
         class="mt-px h-[12px] mr-1 w-[12px]"
         :class="result.class"
+        aria-hidden="true"
       />
       <span
         class="sr-only"
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 6084e023860b..43efd7657898 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -765,6 +765,18 @@
         "link": "Support page",
         "button": "Try again"
       }
+    },
+    "card": {
+      "branchName": "Branch Name:",
+      "commitAuthor": "Commit Author:",
+      "totalDuration": "Run Total Duration:",
+      "debugLabel": "Debug",
+      "debugDescription": "View debug for run {runNumber}",
+      "noDebugAvailable": "You can only debug runs for your most recent commits."
+    },
+    "layout": {
+      "viewCloudRuns": "View runs in Cypress Cloud",
+      "checkedOut": "Checked out"
     }
   },
   "debugPage": {
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index b25af0988237..ff2add5b3310 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -1831,7 +1831,7 @@ type Mutation {
   setTestsForRun(testsBySpec: [TestsBySpecInput!]!): Boolean
 
   """Set the route to debug and show the specified CloudRun"""
-  showDebugForCloudRun(runNumber: Int!): Query
+  showDebugForCloudRun(runNumber: Int!): Boolean
 
   """Show system notification via Electron"""
   showSystemNotification(body: String!, title: String!): Boolean
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
index 5aaf7253e0e1..3bd84c9a21b2 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
@@ -831,8 +831,7 @@ export const mutation = mutationType({
     /**
      * Currently, this is only used for debugging purposes by running this mutation in GraphiQL
      */
-    t.field('showDebugForCloudRun', {
-      type: Query,
+    t.boolean('showDebugForCloudRun', {
       description: 'Set the route to debug and show the specified CloudRun',
       args: {
         runNumber: nonNull(intArg()),
@@ -840,7 +839,7 @@ export const mutation = mutationType({
       resolve: async (_, args, ctx) => {
         await ctx.actions.project.debugCloudRun(args.runNumber)
 
-        return {}
+        return true
       },
     })
   },
diff --git a/scripts/github-actions/create-pull-request.js b/scripts/github-actions/create-pull-request.js
index c6a3826a82f8..e1be67c54532 100644
--- a/scripts/github-actions/create-pull-request.js
+++ b/scripts/github-actions/create-pull-request.js
@@ -1,4 +1,4 @@
-const createPullRequest = async ({ context, github, baseBranch, branchName, description, body, reviewers }) => {
+const createPullRequest = async ({ context, github, baseBranch, branchName, description, body, reviewers, addToProjectBoard }) => {
   const { data: { number } } = await github.rest.pulls.create({
     owner: context.repo.owner,
     repo: context.repo.repo,
@@ -17,6 +17,29 @@ const createPullRequest = async ({ context, github, baseBranch, branchName, desc
       reviewers,
     })
   }
+
+  //add to firewatch board
+  if (addToProjectBoard) {
+    const addToProjectBoardQuery = `
+          mutation ($project_id: ID!, $item_id: ID!) {
+            addProjectV2ItemById(input: {contentId: $item_id, projectId: $project_id}) {
+              clientMutationId
+              item {
+                id
+              }
+            }
+          }`
+
+    const addToProjectBoardQueryVars = {
+      project_id: 9,
+      item_id: number,
+    }
+
+    await github.graphql(
+      addToProjectBoardQuery,
+      addToProjectBoardQueryVars,
+    )
+  }
 }
 
 module.exports = {
diff --git a/scripts/github-actions/update-browser-versions.js b/scripts/github-actions/update-browser-versions.js
index a6fae9560319..b6813a32b1cc 100644
--- a/scripts/github-actions/update-browser-versions.js
+++ b/scripts/github-actions/update-browser-versions.js
@@ -1,11 +1,12 @@
 const https = require('https')
 const fs = require('fs')
 
-const getLatestVersionData = () => {
+// https://developer.chrome.com/docs/versionhistory/reference/#platform-identifiers
+const getLatestVersionData = ({ channel, currentVersion }) => {
   const options = {
-    hostname: 'omahaproxy.appspot.com',
+    hostname: 'versionhistory.googleapis.com',
     port: 443,
-    path: '/all.json',
+    path: `/v1/chrome/platforms/linux/channels/${channel}/versions?filter=version>${currentVersion}&order_by=version%20desc`,
     method: 'GET',
   }
 
@@ -34,16 +35,14 @@ const getVersions = async ({ core }) => {
   try {
     // file path is relative to repo root
     const currentBrowserVersions = JSON.parse(fs.readFileSync('./browser-versions.json'))
-    const data = JSON.parse(await getLatestVersionData())
-    const linuxData = data.find((item) => item.os === 'linux')
-    const stableData = linuxData.versions.find((version) => version.channel === 'stable')
-    const betaData = linuxData.versions.find((version) => version.channel === 'beta')
-    const hasStableUpdate = currentBrowserVersions['chrome:stable'] !== stableData.version
-    const hasBetaUpdate = currentBrowserVersions['chrome:beta'] !== betaData.version
+    const stableData = JSON.parse(await getLatestVersionData({ channel: 'stable', currentVersion: currentBrowserVersions['chrome:stable'] }))
+    const betaData = JSON.parse(await getLatestVersionData({ channel: 'beta', currentVersion: currentBrowserVersions['chrome:beta'] }))
+    const hasStableUpdate = stableData.versions.length > 0
+    const hasBetaUpdate = betaData.versions.length > 0
     let description = 'Update '
 
     if (hasStableUpdate) {
-      description += `Chrome (stable) to ${stableData.version}`
+      description += `Chrome (stable) to ${stableData.versions[0].version}`
 
       if (hasBetaUpdate) {
         description += ' and '
@@ -51,14 +50,14 @@ const getVersions = async ({ core }) => {
     }
 
     if (hasBetaUpdate) {
-      description += `Chrome (beta) to ${betaData.version}`
+      description += `Chrome (beta) to ${betaData.versions[0].version}`
     }
 
     core.setOutput('has_update', (hasStableUpdate || hasBetaUpdate) ? 'true' : 'false')
     core.setOutput('current_stable_version', currentBrowserVersions['chrome:stable'])
-    core.setOutput('latest_stable_version', stableData.version)
+    core.setOutput('latest_stable_version', hasStableUpdate ? stableData.versions[0].version : currentBrowserVersions['chrome:stable'])
     core.setOutput('current_beta_version', currentBrowserVersions['chrome:beta'])
-    core.setOutput('latest_beta_version', betaData.version)
+    core.setOutput('latest_beta_version', hasBetaUpdate ? betaData.versions[0].version : currentBrowserVersions['chrome:beta'])
     core.setOutput('description', description)
   } catch (err) {
     console.log('Errored checking for new Chrome versions:', err.stack)
diff --git a/scripts/run-docker-local.sh b/scripts/run-docker-local.sh
index 214cdf219e52..3f24796fcde3 100755
--- a/scripts/run-docker-local.sh
+++ b/scripts/run-docker-local.sh
@@ -1,18 +1,14 @@
 #!/bin/bash
+SERVICE=${1:-ci}
+
 set e+x
 
 echo "This script should be run from cypress's root"
 
-name=cypress/browsers-internal:node18.15.0-chrome114-ff115
-echo "Pulling CI container $name"
-
-docker pull $name
+docker compose build ${SERVICE}
 
-echo "Starting Docker image with cypress volume attached"
+echo "Starting Docker compose service, $SERVICE, with cypress volume attached"
 echo "You should be able to edit files locally"
 echo "but execute the code in the container"
 
-docker run -v $PWD:/home/person/cypress \
-  -w /home/person/cypress${WORKING_DIR:-} \
-  -it $name \
-  /bin/bash
+docker compose run --service-ports ${SERVICE}
diff --git a/scripts/unit/github-actions/update-browser-version-spec.js b/scripts/unit/github-actions/update-browser-version-spec.js
index 5d78c1317bd4..40892cb2838c 100644
--- a/scripts/unit/github-actions/update-browser-version-spec.js
+++ b/scripts/unit/github-actions/update-browser-version-spec.js
@@ -21,9 +21,9 @@ const coreStub = () => {
   }
 }
 
-const stubOmahaResult = (result) => {
-  nock('https://omahaproxy.appspot.com')
-  .get('/all.json')
+const stubChromeVersionResult = (channel, result) => {
+  nock('https://versionhistory.googleapis.com')
+  .get((uri) => uri.includes(channel))
   .reply(200, result)
 }
 
@@ -36,22 +36,28 @@ const stubRepoVersions = ({ betaVersion, stableVersion }) => {
   })
 }
 
-const stubOmahaVersions = ({ betaVersion, stableVersion }) => {
-  stubOmahaResult([
+const stubChromeVersions = ({ betaVersion, stableVersion }) => {
+  stubChromeVersionResult('stable',
     {
-      os: 'linux',
-      versions: [
+      versions: stableVersion ? [
         {
-          channel: 'stable',
+          name: `chrome/platforms/linux/channels/stable/versions/${stableVersion}`,
           version: stableVersion,
         },
+      ] : [],
+      nextPageToken: '',
+    })
+
+  stubChromeVersionResult('beta',
+    {
+      versions: betaVersion ? [
         {
-          channel: 'beta',
+          name: `chrome/platforms/linux/channels/beta/versions/${betaVersion}`,
           version: betaVersion,
         },
-      ],
-    },
-  ])
+      ] : [],
+      nextPageToken: '',
+    })
 }
 
 describe('update browser version github action', () => {
@@ -70,8 +76,7 @@ describe('update browser version github action', () => {
     })
 
     it('sets has_update: true when there is a stable update', async () => {
-      stubOmahaVersions({
-        betaVersion: '1.1',
+      stubChromeVersions({
         stableVersion: '2.0',
       })
 
@@ -83,9 +88,8 @@ describe('update browser version github action', () => {
     })
 
     it('sets has_update: true when there is a beta update', async () => {
-      stubOmahaVersions({
+      stubChromeVersions({
         betaVersion: '1.2',
-        stableVersion: '1.0',
       })
 
       const core = coreStub()
@@ -96,7 +100,7 @@ describe('update browser version github action', () => {
     })
 
     it('sets has_update: true when there is a stable update and a beta update', async () => {
-      stubOmahaVersions({
+      stubChromeVersions({
         betaVersion: '2.1',
         stableVersion: '2.0',
       })
@@ -109,10 +113,7 @@ describe('update browser version github action', () => {
     })
 
     it('sets has_update: false when there is not a stable update or a beta update', async () => {
-      stubOmahaVersions({
-        betaVersion: '1.1',
-        stableVersion: '1.0',
-      })
+      stubChromeVersions({})
 
       const core = coreStub()
 
@@ -122,7 +123,7 @@ describe('update browser version github action', () => {
     })
 
     it('sets has_update: false if there is a failure', async () => {
-      stubOmahaResult({})
+      stubChromeVersions({})
 
       const core = coreStub()
 
@@ -132,7 +133,7 @@ describe('update browser version github action', () => {
     })
 
     it('sets versions', async () => {
-      stubOmahaVersions({
+      stubChromeVersions({
         betaVersion: '2.1',
         stableVersion: '2.0',
       })
@@ -148,8 +149,7 @@ describe('update browser version github action', () => {
     })
 
     it('sets description correctly when there is a stable update', async () => {
-      stubOmahaVersions({
-        betaVersion: '1.1',
+      stubChromeVersions({
         stableVersion: '2.0',
       })
 
@@ -161,9 +161,8 @@ describe('update browser version github action', () => {
     })
 
     it('sets description correctly when there is a beta update', async () => {
-      stubOmahaVersions({
+      stubChromeVersions({
         betaVersion: '1.2',
-        stableVersion: '1.0',
       })
 
       const core = coreStub()
@@ -174,7 +173,7 @@ describe('update browser version github action', () => {
     })
 
     it('sets description correctly when there is a stable update and a beta update', async () => {
-      stubOmahaVersions({
+      stubChromeVersions({
         betaVersion: '2.1',
         stableVersion: '2.0',
       })
diff --git a/system-tests/projects/e2e/cypress/e2e/headless_old.cy.js b/system-tests/projects/e2e/cypress/e2e/headless_old.cy.js
new file mode 100644
index 000000000000..2c862c4acf93
--- /dev/null
+++ b/system-tests/projects/e2e/cypress/e2e/headless_old.cy.js
@@ -0,0 +1,9 @@
+describe('e2e headless old spec', function () {
+  it('has expected launch args', function () {
+    if (Cypress.isBrowser({ family: 'chromium' }) && Cypress.browserMajorVersion() >= 119) {
+      cy.fail('headless old is supported in Chromium >= 119, please update this system test.')
+    }
+    // TODO: re-enable this once https://bugs.chromium.org/p/chromium/issues/detail?id=1483163 is resolved
+    // cy.task('get:browser:args').should('contain', '--headless=old')
+  })
+})
diff --git a/system-tests/projects/e2e/cypress/plugins/index.js b/system-tests/projects/e2e/cypress/plugins/index.js
index 827a05a6c382..0436a606c833 100644
--- a/system-tests/projects/e2e/cypress/plugins/index.js
+++ b/system-tests/projects/e2e/cypress/plugins/index.js
@@ -59,6 +59,17 @@ module.exports = (on, config) => {
     }
 
     if (browser.family === 'chromium' && browser.name !== 'electron') {
+      if (process.env.CHROMIUM_USE_HEADLESS_OLD) {
+        options.args = options.args.map((arg) => {
+          // ensure we are using --headless=old by overriding both headless new and default
+          if (arg === '--headless' || arg === '--headless=new') {
+            return '--headless=old'
+          }
+
+          return arg
+        })
+      }
+
       if (process.env.CHROMIUM_EXTRA_LAUNCH_ARGS) {
         options.args = options.args.concat(process.env.CHROMIUM_EXTRA_LAUNCH_ARGS.split(' '))
       }
diff --git a/system-tests/test/headless_old_spec.js b/system-tests/test/headless_old_spec.js
new file mode 100644
index 000000000000..0b1d151371d6
--- /dev/null
+++ b/system-tests/test/headless_old_spec.js
@@ -0,0 +1,15 @@
+const systemTests = require('../lib/system-tests').default
+
+describe('e2e', () => {
+  systemTests.setup()
+
+  systemTests.it('succeeds using --headless=old', {
+    spec: 'headless_old.cy.js',
+    browser: 'chrome',
+    processEnv: {
+      // TODO: re-enable this once https://bugs.chromium.org/p/chromium/issues/detail?id=1483163
+      // has been resolved and we have updated to a version of Chromium that includes the fix
+      // CHROMIUM_USE_HEADLESS_OLD: 1,
+    },
+  })
+})
diff --git a/yarn.lock b/yarn.lock
index 38a98fab6fca..33f62e2a3034 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2276,7 +2276,14 @@
     resolve-pkg "^2.0.0"
     tailwindcss "^3.3.3"
 
-"@cypress-design/icon-registry@*", "@cypress-design/icon-registry@^0.27.0":
+"@cypress-design/icon-registry@*", "@cypress-design/icon-registry@^0.28.0":
+  version "0.28.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.28.0.tgz#a3c5336f7b544d8be82b6a941b8915ba7084d5c9"
+  integrity sha512-xJvE1u3KBQz6Hc0Ea3ia9xUDKxTj5MdKrgYrlE9t321qKxStxVN34VB595TfWzluHZzUb6Qu7QqgqdCTFTccgw==
+  dependencies:
+    "@cypress-design/css" "^0.15.1"
+
+"@cypress-design/icon-registry@^0.27.0":
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.27.0.tgz#3feedb6bad82c7a461a348f72e62225fe912c49b"
   integrity sha512-2tiH0YklKLYQ59pduni9aAsCu5uMKf/ZVHFjoP5xZW8em3FP5NZtmIAZzdIWLXjqihz/Q4TcOAL77qi8T11UJQ==
@@ -2297,6 +2304,13 @@
   dependencies:
     "@cypress-design/icon-registry" "^0.27.0"
 
+"@cypress-design/vue-icon@^0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.26.0.tgz#f56bee36514dc4f9b9606a75f69201e312ff9c70"
+  integrity sha512-ZiMpIvjNWX/x6OJDyhb9VrXXlwPQTgSx87PA4VMVC9JVARXja4UZ950KVTZVEdDuCG8MGYu3N4/hWOrNxCKXCQ==
+  dependencies:
+    "@cypress-design/icon-registry" "^0.28.0"
+
 "@cypress-design/vue-statusicon@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.5.0.tgz#a183214a323528be86608229cba1ba99011b80ee"