diff --git a/packages/app/cypress/e2e/sidebar_navigation.cy.ts b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
index 48d791221fb6..f21c566f4a92 100644
--- a/packages/app/cypress/e2e/sidebar_navigation.cy.ts
+++ b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
@@ -16,6 +16,7 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       .tab().should('have.attr', 'data-cy', 'sidebar-header').should('have.attr', 'role', 'button')
       .tab().should('have.attr', 'href', '#/specs').should('have.prop', 'tagName', 'A')
       .tab().should('have.attr', 'href', '#/runs').should('have.prop', 'tagName', 'A')
+      .tab().should('have.attr', 'href', '#/debug').should('have.prop', 'tagName', 'A')
       .tab().should('have.attr', 'href', '#/settings').should('have.prop', 'tagName', 'A')
       .tab().should('have.attr', 'data-cy', 'keyboard-modal-trigger').should('have.prop', 'tagName', 'BUTTON')
     })
@@ -146,6 +147,10 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.contains('.v-popper--some-open--tooltip', 'Specs')
       cy.findByTestId('sidebar-link-specs-page').trigger('mouseout')
 
+      cy.findByTestId('sidebar-link-debug-page').trigger('mouseenter')
+      cy.contains('.v-popper--some-open--tooltip', 'Debug')
+      cy.findByTestId('sidebar-link-debug-page').trigger('mouseout')
+
       cy.findByTestId('sidebar-link-settings-page').trigger('mouseenter')
       cy.contains('.v-popper--some-open--tooltip', 'Settings')
       cy.findByTestId('sidebar-link-settings-page').trigger('mouseout')
@@ -237,6 +242,14 @@ describe('Sidebar Navigation', { viewportWidth: 1280 }, () => {
       cy.get('.router-link-active').findByText('Specs').should('be.visible')
     })
 
+    it('has a menu item labeled "Debug" which takes you to the Debug page', () => {
+      cy.get('[data-cy="app-header-bar"]').findByText('Debug').should('not.exist')
+
+      cy.findByTestId('sidebar-link-debug-page').should('have.text', 'Debug').should('be.visible').click()
+      cy.get('[data-cy="app-header-bar"]').findByText('Debug').should('be.visible')
+      cy.get('.router-link-active').findByText('Debug').should('be.visible')
+    })
+
     it('Specs sidebar nav link is not active when a test is running', () => {
       cy.location('hash').should('equal', '#/specs')
       cy.contains('.router-link-exact-active', 'Specs')
diff --git a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
index bff378126cfc..10fcb6b86f79 100644
--- a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
@@ -75,6 +75,9 @@ function simulateRunData () {
           status: s,
           createdAt: new Date('2022-05-08T03:17:00').toISOString(),
           completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+          basename: idPrefix.substring(idPrefix.lastIndexOf('/') + 1, idPrefix.indexOf('.')),
+          path: idPrefix,
+          extension: idPrefix.substring(idPrefix.indexOf('.')),
           runNumber: 432,
           groupCount: 2,
           specDuration: {
@@ -444,6 +447,9 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
               status: s,
               createdAt: new Date('2022-05-08T03:17:00').toISOString(),
               completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+              basename: idPrefix.substring(idPrefix.lastIndexOf('/') + 1, idPrefix.indexOf('.')),
+              path: idPrefix,
+              extension: idPrefix.substring(idPrefix.indexOf('.')),
               runNumber: 432,
               groupCount: 2,
               specDuration: {
@@ -550,6 +556,9 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
               status: s,
               createdAt: new Date('2022-05-08T03:17:00').toISOString(),
               completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+              basename: idPrefix.substring(idPrefix.lastIndexOf('/') + 1, idPrefix.indexOf('.')),
+              path: idPrefix,
+              extension: idPrefix.substring(idPrefix.indexOf('.')),
               runNumber: 432,
               groupCount: 2,
               specDuration: {
diff --git a/packages/app/package.json b/packages/app/package.json
index 5c4babc749b1..f9b76f81b4ae 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -20,7 +20,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-icon": "^0.4.2",
+    "@cypress-design/vue-icon": "^0.12.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",
diff --git a/packages/app/src/composables/useDurationFormat.cy.tsx b/packages/app/src/composables/useDurationFormat.cy.tsx
new file mode 100644
index 000000000000..54914b6d727f
--- /dev/null
+++ b/packages/app/src/composables/useDurationFormat.cy.tsx
@@ -0,0 +1,39 @@
+import { ref } from 'vue'
+import { useDurationFormat } from './useDurationFormat'
+
+describe('useDurationFormat', () => {
+  it('should format duration', () => {
+    expect(useDurationFormat(1000).value).to.eq('00:01')
+    expect(useDurationFormat(60000).value).to.eq('01:00')
+    expect(useDurationFormat(6000000).value).to.eq('01:40:00')
+
+    // expects 24 hours and greater to "roll over" and not include day information
+    expect(useDurationFormat(86400000).value).to.eq('00:00')
+  })
+
+  it('should render with value', () => {
+    const duration = 1000
+    const formatted = useDurationFormat(duration)
+
+    cy.mount(() => (<div>
+      {formatted.value}
+    </div>))
+
+    cy.contains('00:01')
+  })
+
+  it('should render with ref and update if ref changes', () => {
+    const duration = ref(1000)
+    const formatted = useDurationFormat(duration)
+
+    cy.mount(() => (<div>
+      {formatted.value}
+    </div>))
+
+    cy.contains('00:01').then(() => {
+      duration.value = 2000
+    })
+
+    cy.contains('00:02')
+  })
+})
diff --git a/packages/app/src/composables/useDurationFormat.ts b/packages/app/src/composables/useDurationFormat.ts
new file mode 100644
index 000000000000..08b4e6bb476e
--- /dev/null
+++ b/packages/app/src/composables/useDurationFormat.ts
@@ -0,0 +1,13 @@
+import { computed, Ref, unref } from 'vue'
+import { dayjs } from '../runs/utils/day.js'
+
+/*
+  Format duration to in HH:mm:ss format. The `totalDuration` field is milliseconds. Remove the leading "00:" if the value is less
+  than an hour. Currently, there is no expectation that a run duration will be greater 24 hours or greater, so it is okay that
+  this format would "roll-over" in that scenario.
+  Ex: 1 second which is 1000ms = 00:01
+  Ex: 1 hour and 1 second which is 3601000ms = 01:00:01
+*/
+export function useDurationFormat (value: number | Ref<number>) {
+  return computed(() => dayjs.duration(unref(value)).format('HH:mm:ss').replace(/^0+:/, ''))
+}
diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
new file mode 100644
index 000000000000..bf0295c40f8a
--- /dev/null
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -0,0 +1,154 @@
+import { DebugSpecsFragmentDoc } from '../generated/graphql-test'
+import DebugContainer from './DebugContainer.vue'
+import { defaultMessages } from '@cy/i18n'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { specsList } from './utils/DebugMapping'
+import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
+
+describe('<DebugContainer />', () => {
+  context('empty states', () => {
+    const validateEmptyState = (expectedMessage: string) => {
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        render: (gqlVal) => {
+          return (
+            <DebugContainer
+              gql={gqlVal}
+            />
+          )
+        },
+      })
+
+      cy.findByTestId('debug-empty').contains(expectedMessage)
+    }
+
+    it('shows not logged in', () => {
+      validateEmptyState(defaultMessages.debugPage.notLoggedIn)
+    })
+
+    it('is logged in', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+
+      validateEmptyState(defaultMessages.debugPage.notConnected)
+    })
+
+    it('has no runs', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+      loginConnectStore.setProjectFlag('isProjectConnected', true)
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        render: (gqlVal) => {
+          return (
+            <DebugContainer
+              gql={gqlVal}
+            />
+          )
+        },
+      })
+
+      cy.findByTestId('debug-empty').contains(defaultMessages.debugPage.noRuns)
+    })
+  })
+
+  describe('render specs and tests', () => {
+    it('renders data when logged in and connected', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+      loginConnectStore.setProjectFlag('isProjectConnected', true)
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        onResult: (result) => {
+          if (result.currentProject?.cloudProject?.__typename === 'CloudProject') {
+            const test = result.currentProject.cloudProject.runByNumber
+            const other = CloudRunStubs.failingWithTests as typeof test
+
+            result.currentProject.cloudProject.runByNumber = other
+          }
+        },
+        render: (gqlVal) => {
+          return (
+            <DebugContainer
+              gql={gqlVal}
+            />
+          )
+        },
+      })
+
+      // Only asserting that it is rendering the components for failed specs
+      cy.findByTestId('debug-header').should('be.visible')
+      cy.findByTestId('debug-spec-item').should('be.visible')
+    })
+  })
+
+  describe('testing util function: debugMapping', () => {
+    const createSpecs = (idArr: string[]) => {
+      const acc: {id: string}[] = []
+
+      idArr.forEach((val) => {
+        acc.push({ id: val })
+      })
+
+      return acc
+    }
+
+    it('maps correctly for a single spec', () => {
+      const spec = createSpecs(['a1c'])
+      const tests = [
+        { specId: 'a1c', id: 'random1' },
+        { specId: 'a1c', id: 'random2' },
+      ]
+
+      const debugMappingArray = specsList(spec, tests)
+
+      expect(debugMappingArray).to.have.length(1)
+      expect(debugMappingArray[0]).to.deep.equal({ spec: { id: 'a1c' }, tests: [{ specId: 'a1c', id: 'random1' }, { specId: 'a1c', id: 'random2' }] })
+    })
+
+    it('maps correctly for multiple specs and test', () => {
+      const specs = createSpecs(['123', '456', '789'])
+      const tests = [
+        { specId: '123', id: 'random1' },
+        { specId: '456', id: 'random2' },
+        { specId: '456', id: 'random3' },
+        { specId: '789', id: 'random4' },
+        { specId: '123', id: 'random6' },
+      ]
+
+      const debugMappingArray = specsList(specs, tests)
+
+      const expected = [
+        { spec: { id: '123' }, tests: [{ specId: '123', id: 'random1' }, { specId: '123', id: 'random6' }] },
+        { spec: { id: '456' }, tests: [{ specId: '456', id: 'random2' }, { specId: '456', id: 'random3' }] },
+        { spec: { id: '789' }, tests: [{ specId: '789', id: 'random4' }] },
+      ]
+
+      expect(debugMappingArray).to.deep.equal(expected)
+    })
+
+    it('maps does not show specs that do not have tests', () => {
+      const specs = createSpecs(['123', '456', '789'])
+      const tests = [{ specId: '123', id: 'random1' }]
+
+      const debugMappingArray = specsList(specs, tests)
+
+      expect(debugMappingArray).to.have.length(1)
+      expect(debugMappingArray).to.deep.equal([{ spec: { id: '123' }, tests: [{ specId: '123', id: 'random1' }] }])
+    })
+
+    it('throws an error when a test does not map to a spec', () => {
+      const specs = createSpecs(['123'])
+      const tests = [
+        { specId: '123', id: 'random1' },
+        { specId: '456', id: 'random2' },
+      ]
+
+      const specsListWrapper = () => {
+        return specsList(specs, tests)
+      }
+
+      expect(specsListWrapper).to.throw('Could not find spec for id 456')
+    })
+  })
+})
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
new file mode 100644
index 000000000000..17702747c885
--- /dev/null
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div
+      v-if="loginConnectStore.user.isLoggedIn && loginConnectStore.project.isProjectConnected && run"
+    >
+      <DebugPageHeader
+        :gql="run"
+        :commits-ahead="0"
+      />
+      <DebugSpecList
+        :specs="debugSpecsArray"
+      />
+    </div>
+    <div
+      v-else
+      data-cy="debug-empty"
+    >
+      <div
+        v-if="!loginConnectStore.user.isLoggedIn"
+      >
+        {{ t('debugPage.notLoggedIn') }}
+      </div>
+      <div
+        v-else-if="!loginConnectStore.project.isProjectConnected"
+      >
+        {{ t('debugPage.notConnected' ) }}
+      </div>
+      <div
+        v-else-if="!run"
+      >
+        {{ t('debugPage.noRuns') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { gql } from '@urql/vue'
+import { computed } from '@vue/reactivity'
+import type { DebugSpecsFragment } from '../generated/graphql'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import DebugPageHeader from './DebugPageHeader.vue'
+import DebugSpecList from './DebugSpecList.vue'
+import { useI18n } from 'vue-i18n'
+import { specsList } from './utils/DebugMapping'
+
+const { t } = useI18n()
+
+gql`
+  fragment DebugSpecs on Query {
+    currentProject {
+      id
+      cloudProject {
+        __typename
+        ... on CloudProject {
+          id
+          runByNumber(runNumber: 2) {
+            ...DebugPage
+            id
+            runNumber
+            status
+            overLimitActionType
+            overLimitActionUrl
+            testsForReview {
+              id
+              ...DebugSpecListTests
+            }
+            specs {
+              id
+              ...DebugSpecListSpec
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+const props = defineProps<{
+  gql: DebugSpecsFragment
+}>()
+
+const loginConnectStore = useLoginConnectStore()
+
+const run = computed(() => {
+  return props.gql.currentProject?.cloudProject?.__typename === 'CloudProject' ? props.gql.currentProject.cloudProject.runByNumber : null
+})
+
+const debugSpecsArray = computed(() => {
+  if (run.value) {
+    const specs = run.value.specs || []
+    const tests = run.value.testsForReview || []
+
+    return specsList(specs, tests)
+  }
+
+  return []
+})
+
+</script>
diff --git a/packages/app/src/debug/DebugPageHeader.cy.tsx b/packages/app/src/debug/DebugPageHeader.cy.tsx
index 14ebb3bb5edd..b61e46be0aea 100644
--- a/packages/app/src/debug/DebugPageHeader.cy.tsx
+++ b/packages/app/src/debug/DebugPageHeader.cy.tsx
@@ -5,7 +5,7 @@ const defaults = [
   { attr: 'debug-header-branch', text: 'Branch Name: feature/DESIGN-183' },
   { attr: 'debug-header-commitHash', text: 'Commit Hash: b5e6fde' },
   { attr: 'debug-header-author', text: 'Commit Author: cypressDTest' },
-  { attr: 'debug-header-createdAt', text: 'Run Total Duration: 60000 (an hour ago) ' },
+  { attr: 'debug-header-createdAt', text: 'Run Total Duration: 01:00 (an hour ago) ' },
 ]
 
 describe('<DebugPageHeader />', {
@@ -20,12 +20,13 @@ describe('<DebugPageHeader />', {
             result.commitInfo.summary = 'Adding a hover state to the button component'
             result.commitInfo.branch = 'feature/DESIGN-183'
             result.commitInfo.authorName = 'cypressDTest'
+            result.commitInfo.sha = 'b5e6fde'
           }
         }
       },
       render: (gqlVal) => {
         return (
-          <DebugPageHeader gql={gqlVal} runNumber={468} commitsAhead='You are 2 commits ahead' commitHash='b5e6fde'/>
+          <DebugPageHeader gql={gqlVal} commitsAhead={2}/>
         )
       },
     })
@@ -36,7 +37,7 @@ describe('<DebugPageHeader />', {
 
     cy.findByTestId('debug-runCommit-info').children().should('have.length', 3)
     cy.findByTestId('debug-runNumber')
-    .should('have.text', ' Run #468')
+    .should('have.text', ' Run #432')
     .should('have.css', 'color', 'rgb(90, 95, 122)')
 
     cy.findByTestId('debug-commitsAhead')
@@ -51,4 +52,29 @@ describe('<DebugPageHeader />', {
       .children().should('have.length', 2)
     })
   })
+
+  it('renders singular commit message', () => {
+    cy.mountFragment(DebugPageFragmentDoc, {
+      render: (gqlVal) => {
+        return (
+          <DebugPageHeader gql={gqlVal} commitsAhead={1}/>
+        )
+      },
+    })
+
+    cy.findByTestId('debug-commitsAhead')
+    .should('have.text', 'You are 1 commit ahead')
+  })
+
+  it('renders no commit message', () => {
+    cy.mountFragment(DebugPageFragmentDoc, {
+      render: (gqlVal) => {
+        return (
+          <DebugPageHeader gql={gqlVal} commitsAhead={0}/>
+        )
+      },
+    })
+
+    cy.findByTestId('debug-commitsAhead').should('not.exist')
+  })
 })
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index f84e9e667612..74c4b773fde9 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -1,15 +1,15 @@
 <template>
   <div
     data-cy="debug"
-    class="flex flex-col pb-24px gap-16px"
+    class="flex flex-col gap-16px"
   >
     <div
-      :data-cy="`debug-header`"
-      class="grid px-24px w-full overflow-hidden flex items-center gap-y-2 py-24px"
+      data-cy="debug-header"
+      class="flex w-full grid py-24px px-24px gap-y-2 overflow-hidden items-center"
     >
       <ul
         data-cy="header-top"
-        class="flex self-stretch items-center gap-x-2 flex-row whitespace-nowrap"
+        class="flex flex-row gap-x-2 self-stretch items-center whitespace-nowrap"
       >
         <li
           v-if="debug?.commitInfo?.summary"
@@ -19,22 +19,22 @@
           {{ debug.commitInfo.summary }}
         </li>
         <div
-          v-if="props.runNumber && props.commitsAhead"
-          class="border rounded border-gray-100 items-center flex text-sm h-6"
+          class="border rounded flex border-gray-100 h-6 text-sm items-center"
           data-cy="debug-runCommit-info"
         >
           <span
-            class="font-medium text-gray-700 px-2 mx-px items-center"
+            class="font-medium mx-px px-2 text-gray-700 items-center"
             data-cy="debug-runNumber"
           >
-            Run #{{ props.runNumber }}
+            Run #{{ debug.runNumber }}
           </span>
-          <div class="w-px h-3 my-6px bg-gray-100" />
+          <div class="bg-gray-100 h-3 my-6px w-px" />
           <span
-            class="font-normal text-orange-500 px-2 mx-px items-center"
+            v-if="props.commitsAhead"
+            class="font-normal mx-px px-2 text-orange-500 items-center"
             data-cy="debug-commitsAhead"
           >
-            {{ props.commitsAhead }}
+            {{ t('debugPage.header.commitsAhead', props.commitsAhead) }}
           </span>
         </div>
         <li class="-mt-8px text-lg text-gray-400">
@@ -46,13 +46,13 @@
             :href="debug.url || '#'"
             :use-default-hocus="false"
           >
-            <span class="sr-only">Dashboard Link:</span> View in the dashboard
+            <span class="sr-only">Dashboard Link:</span> {{ t('debugPage.header.runUrl') }}
           </ExternalLink>
         </li>
       </ul>
       <ul
         data-cy="metadata"
-        class="flex flex-wrap gap-x-2 items-center whitespace-nowrap children:flex children:items-center font-normal text-sm text-gray-700"
+        class="flex flex-wrap font-normal text-sm text-gray-700 gap-x-2 items-center whitespace-nowrap children:flex children:items-center"
       >
         <li
           :data-cy="'debug-results'"
@@ -65,24 +65,24 @@
           v-if="debug?.commitInfo?.branch"
           data-cy="debug-header-branch"
         >
-          <i-cy-tech-branch-h_x16 class="mr-1 icon-dark-gray-300 mr-8px" />
+          <i-cy-tech-branch-h_x16 class="mr-1 mr-8px icon-dark-gray-300" />
           <span class="sr-only">Branch Name:</span> {{ debug.commitInfo.branch }}
         </li>
         <li
-          v-if="props.commitHash"
+          v-if="debug.commitInfo?.sha"
           data-cy="debug-header-commitHash"
         >
           <CommitIcon
-            class="fill-white h-16px w-16px mr-11px"
+            class="h-16px fill-white mr-11px w-16px"
           />
-          <span class="sr-only">Commit Hash:</span> {{ props.commitHash }}
+          <span class="sr-only">Commit Hash:</span> {{ debug.commitInfo?.sha?.substring(0,7) }}
         </li>
         <li
           v-if="debug?.commitInfo?.authorName"
           data-cy="debug-header-author"
         >
           <i-cy-general-user_x16
-            class="mr-1 icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200 mr-11px"
+            class="mr-1 mr-11px icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200"
             data-cy="debug-header-avatar"
           />
           <span class="sr-only">Commit Author:</span> {{ debug.commitInfo.authorName }}
@@ -97,7 +97,7 @@
             stroke-color="gray-500"
             fill-color="gray-50"
           />
-          <span class="sr-only">Run Total Duration:</span> {{ debug.totalDuration }} ({{ relativeCreatedAt }})
+          <span class="sr-only">Run Total Duration:</span> {{ totalDuration }} ({{ relativeCreatedAt }})
         </li>
       </ul>
     </div>
@@ -112,40 +112,42 @@ import CommitIcon from '~icons/cy/commit_x14'
 import { IconTimeStopwatch } from '@cypress-design/vue-icon'
 import { gql } from '@urql/core'
 import { dayjs } from '../runs/utils/day.js'
+import { useI18n } from 'vue-i18n'
+import { useDurationFormat } from '../composables/useDurationFormat'
+
+const { t } = useI18n()
 
-// runNumber and commitHash dont currently exist in the query and therefore are being obtained as props instead
 gql`
 fragment DebugPage on CloudRun {
-	id
-	createdAt
-	status
+  id
+  runNumber
+  createdAt
+  status
   totalDuration
+  commitInfo {
+    sha
+  }
   url
-  tags {
-    id
-    name
+  ...RunResults
+  commitInfo {
+    authorName
+    summary
+    branch
   }
-	...RunResults
-	commitInfo {
-		authorName
-		authorEmail
-		summary
-		branch
-	}
 }
 `
 
 const props = defineProps<{
   gql: DebugPageFragment
-  commitsAhead: string
-  commitHash: string
-  runNumber: number
+  commitsAhead: number
 }>()
 
 const debug = computed(() => props.gql)
 
 const relativeCreatedAt = computed(() => dayjs(new Date(debug.value.createdAt!)).fromNow())
 
+const totalDuration = useDurationFormat(debug.value.totalDuration ?? 0)
+
 </script>
 <style scoped>
 [data-cy=metadata] li:not(:first-child)::before {
diff --git a/packages/app/src/debug/DebugSpec.cy.tsx b/packages/app/src/debug/DebugSpec.cy.tsx
index 324de06aa417..3d9e3d589737 100644
--- a/packages/app/src/debug/DebugSpec.cy.tsx
+++ b/packages/app/src/debug/DebugSpec.cy.tsx
@@ -5,7 +5,7 @@ import { defaultMessages } from '@cy/i18n'
 describe('<DebugSpec/> with multiple test results', () => {
   const spec: Spec = {
     id: '8879798756s88d',
-    path: 'cypress/tests',
+    path: 'cypress/tests/',
     fileName: 'auth',
     fileExtension: '.spec.ts',
   }
@@ -65,7 +65,7 @@ describe('<DebugSpec/> responsive UI', () => {
   it('renders complete UI on smaller viewports', { viewportHeight: 300, viewportWidth: 450 }, () => {
     const spec: Spec = {
       id: '5479adf90s7f',
-      path: 'cypress/tests',
+      path: 'cypress/tests/',
       fileName: 'AlertBar',
       fileExtension: '.spec.ts',
     }
diff --git a/packages/app/src/debug/DebugSpec.vue b/packages/app/src/debug/DebugSpec.vue
index bcb5db823854..be46ebe7665c 100644
--- a/packages/app/src/debug/DebugSpec.vue
+++ b/packages/app/src/debug/DebugSpec.vue
@@ -1,73 +1,68 @@
 <template>
   <div
-    data-cy="debug-spec-col"
-    class="grid flex flex-col px-24px gap-24px self-stretch"
+    data-cy="debug-spec-item"
+    class="rounded flex flex-col border-t-1px border-x-1px w-full overflow-hidden items-start box-border"
   >
     <div
-      data-cy="debug-spec-item"
-      class="w-full overflow-hidden flex flex-col items-start box-border border-t-1px border-x-1px rounded"
+      data-cy="debug-spec-header"
+      class="rounded-t flex flex-row bg-gray-50 border-b-1px border-b-gray-100 w-full py-12px items-center"
     >
       <div
-        data-cy="debug-spec-header"
-        class="w-full flex flex-row items-center py-12px bg-gray-50 border-b-1px border-b-gray-100 rounded-t"
+        data-cy="spec-contents"
+        class="flex flex-row w-full px-16px items-center"
       >
         <div
-          data-cy="spec-contents"
-          class="w-full flex flex-row px-16px items-center"
+          data-cy="spec-path"
+          class="flex-grow text-base non-italic truncate"
         >
-          <div
-            data-cy="spec-path"
-            class="flex-grow non-italic text-base truncate"
+          <span
+            class="font-normal text-gray-600"
           >
-            <span
-              class="font-normal text-gray-600"
-            >
-              {{ specData.path }}
-            </span>
-            <span
-              class="inline-flex items-center"
-            >
-              <SpecNameDisplay
-                :spec-file-name="specData.fileName"
-                :spec-file-extension="specData.fileExtension"
-              />
-            </span>
-          </div>
-          <div
-            class="ml-10px"
+            {{ specData.path }}
+          </span>
+          <span
+            class="inline-flex items-center"
           >
-            <Button
-              data-cy="run-failures"
-              variant="white"
-              class="inline-flex gap-x-10px whitespace-nowrap justify-center items-center isolate"
-              :disabled="isDisabled"
-              :to="{ path: '/specs/runner', query: { file: (specData.path).replace(/\\/g, '/') } }"
-            >
-              <template #prefix>
-                <IconActionRefresh
-                  data-cy="icon-refresh"
-                  stroke-color="indigo-500"
-                />
-              </template>
-              <!-- Wrapping this with a default template to avoid an unneeded space -->
-              <template #default>
-                {{ t('debugPage.runFailures') }}
-              </template>
-            </Button>
-          </div>
+            <SpecNameDisplay
+              :spec-file-name="specData.fileName"
+              :spec-file-extension="specData.fileExtension"
+            />
+          </span>
+        </div>
+        <div
+          class="ml-10px"
+        >
+          <Button
+            data-cy="run-failures"
+            variant="white"
+            class="gap-x-10px inline-flex whitespace-nowrap justify-center items-center isolate"
+            :disabled="isDisabled"
+            :to="{ path: '/specs/runner', query: { file: (specData.path).replace(/\\/g, '/') } }"
+          >
+            <template #prefix>
+              <IconActionRefresh
+                data-cy="icon-refresh"
+                stroke-color="indigo-500"
+              />
+            </template>
+            <!-- Wrapping this with a default template to avoid an unneeded space -->
+            <template #default>
+              {{ t('debugPage.runFailures') }}
+            </template>
+          </Button>
         </div>
       </div>
-      <div
-        v-for="test in specData.failedTests"
-        :key="`test-${test.id}`"
-        data-cy="test-group"
-        class="w-full flex flex-col flex-start h-12 items-start justify-center pl-16px border-b-gray-100 border-b-1px"
-      >
-        <DebugFailedTest
-          :failed-test-result="test"
-          :data-cy="`test-${test.id}`"
-        />
-      </div>
+    </div>
+    <div
+      v-for="test in specData.failedTests"
+      :key="`test-${test.id}`"
+      data-cy="test-group"
+      class="flex flex-col flex-start border-b-gray-100 border-b-1px h-12 w-full pl-16px items-start justify-center"
+    >
+      <DebugFailedTest
+        :failed-test-result="test"
+        :data-cy="`test-${test.id}`"
+      />
     </div>
   </div>
 </template>
@@ -80,8 +75,8 @@ export interface Spec {
 }
 
 export interface TestResults {
-  id: string
-  titleParts: string[]
+  readonly id: string
+  readonly titleParts: ReadonlyArray<string>
 }
 
 import { computed } from 'vue'
@@ -101,7 +96,7 @@ const props = defineProps<{
 
 const specData = computed(() => {
   return {
-    path: `${props.spec.path}/`,
+    path: props.spec.path,
     fileName: props.spec.fileName,
     fileExtension: props.spec.fileExtension,
     failedTests: props.testResults,
diff --git a/packages/app/src/debug/DebugSpecList.vue b/packages/app/src/debug/DebugSpecList.vue
new file mode 100644
index 000000000000..85612c945a6d
--- /dev/null
+++ b/packages/app/src/debug/DebugSpecList.vue
@@ -0,0 +1,94 @@
+<template>
+  <div
+    data-cy="debug-spec-col"
+    class="flex flex-col mb-24px grid px-24px gap-24px self-stretch"
+  >
+    <DebugSpec
+      v-for="spec in specs"
+      :key="spec.spec.id"
+      :spec="spec.spec"
+      :test-results="spec.tests"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { gql } from '@urql/core'
+import { computed } from '@vue/reactivity'
+import type { DebugSpecListSpecFragment, DebugSpecListTestsFragment } from '../generated/graphql'
+import DebugSpec from './DebugSpec.vue'
+
+gql`
+fragment DebugSpecListSpec on CloudSpecRun {
+  id
+  path
+  basename
+  extension
+  shortPath
+  groupIds
+  testsPassed {
+    min
+    max
+  }
+  testsFailed {
+    min
+    max
+  }
+  testsPending {
+    min
+    max
+  }
+}
+`
+
+gql`
+fragment DebugSpecListTests on CloudTestResult {
+  id
+  specId
+  title(depth: 2)
+  titleParts
+  duration
+  isFlaky
+  testUrl
+  instance {
+    id
+    status
+    groupId
+    totalPassed
+    totalFailed
+    totalPending
+    totalSkipped
+    totalRunning
+    hasStdout
+    stdoutUrl
+    hasScreenshots
+    screenshotsUrl
+    hasVideo
+    videoUrl
+  }
+}
+`
+
+const props = defineProps<{
+  specs: { spec: DebugSpecListSpecFragment, tests: DebugSpecListTestsFragment[] }[]
+}>()
+
+const specs = computed(() => {
+  return props.specs.map((specItem) => {
+    const fileName = specItem.spec.basename
+    const fileExtension = specItem.spec.extension
+    const fileNameWithoutExtension = fileName.replace(fileExtension, '')
+
+    return {
+      spec: {
+        id: specItem.spec.id,
+        path: specItem.spec.path.replace(fileNameWithoutExtension + fileExtension, ''),
+        fileName: fileNameWithoutExtension,
+        fileExtension,
+      },
+      tests: specItem.tests,
+    }
+  })
+})
+
+</script>
diff --git a/packages/app/src/debug/utils/DebugMapping.ts b/packages/app/src/debug/utils/DebugMapping.ts
new file mode 100644
index 000000000000..709188cafab5
--- /dev/null
+++ b/packages/app/src/debug/utils/DebugMapping.ts
@@ -0,0 +1,27 @@
+export const specsList = <S extends {id: string}, T extends {specId: string}>(specs: readonly S[], tests: readonly T[]): {spec: S, tests: T[]}[] => {
+  const mappedTests = tests.reduce((acc, curr) => {
+    // console.log(`test specId = ${ curr.specId}`)
+    let spec = acc[curr.specId]
+
+    if (!spec) {
+      const foundSpec = specs.find((spec) => spec.id === curr.specId)
+
+      spec = { spec: foundSpec }
+      // console.log('looking for spec', spec)
+      if (foundSpec) {
+        acc[curr.specId] = spec
+      } else {
+        //TODO better handle error case
+        throw new Error(`Could not find spec for id ${ curr.specId}`)
+      }
+    }
+
+    spec.tests = [...(spec.tests || []), curr]
+
+    // console.log('spec.tests', spec.tests)
+    return acc
+  }, {})
+  // console.log(mappedTests)
+
+  return Object.values(mappedTests)
+}
diff --git a/packages/app/src/navigation/SidebarNavigation.vue b/packages/app/src/navigation/SidebarNavigation.vue
index 0814af41bd76..a27c000505c2 100644
--- a/packages/app/src/navigation/SidebarNavigation.vue
+++ b/packages/app/src/navigation/SidebarNavigation.vue
@@ -94,6 +94,7 @@ import { gql, useMutation, useQuery } from '@urql/vue'
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
 import KeyboardBindingsModal from './KeyboardBindingsModal.vue'
 import {
+  IconStatusFailedOutline, // not available in size 24
   IconTechnologyCodeEditor,
   IconTechnologyTestResults,
   IconObjectGear,
@@ -112,6 +113,7 @@ const { t } = useI18n()
 const navigation = [
   { name: 'Specs', icon: IconTechnologyCodeEditor, href: '/specs' },
   { name: 'Runs', icon: IconTechnologyTestResults, href: '/runs' },
+  { name: 'Debug', icon: IconStatusFailedOutline, href: '/debug' },
   { name: 'Settings', icon: IconObjectGear, href: '/settings' },
 ] as const
 
diff --git a/packages/app/src/navigation/SidebarNavigationRow.cy.tsx b/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
index 58a10769d15e..c9bea2ec8f2b 100644
--- a/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
+++ b/packages/app/src/navigation/SidebarNavigationRow.cy.tsx
@@ -1,5 +1,6 @@
 import SidebarNavigationRow from './SidebarNavigationRow.vue'
 import {
+  IconStatusFailedOutline,
   IconTechnologyCodeEditor,
   IconTechnologyTestResults,
   IconObjectGear,
@@ -14,6 +15,7 @@ describe('SidebarNavigationRow', () => {
       >
         <h2 class="text-white text-sm uppercase truncate">Tab Style</h2>
         <SidebarNavigationRow icon={IconTechnologyCodeEditor} name="book" active isNavBarExpanded/>
+        <SidebarNavigationRow icon={IconStatusFailedOutline} name="debug" isNavBarExpanded/>
         <SidebarNavigationRow icon={IconTechnologyTestResults} name="settings" isNavBarExpanded/>
         <SidebarNavigationRow icon={IconObjectGear} name="test-results" isNavBarExpanded/>
         <SidebarNavigationRow icon={IconGeneralPlaceholder} name="placeholder" isNavBarExpanded/>
diff --git a/packages/app/src/pages/Debug.vue b/packages/app/src/pages/Debug.vue
new file mode 100644
index 000000000000..2a4bc785b394
--- /dev/null
+++ b/packages/app/src/pages/Debug.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-if="!query.data.value"
+    data-cy="debug-loader"
+  >
+    Loading
+  </div>
+  <DebugContainer
+    v-else
+    data-cy="debug-container"
+    :gql="query.data.value"
+  />
+</template>
+
+<script setup lang="ts">
+
+import DebugContainer from '../debug/DebugContainer.vue'
+import { gql, useQuery } from '@urql/vue'
+import { DebugDocument } from '../generated/graphql'
+
+gql `
+query Debug {
+   ...DebugSpecs
+}
+`
+
+const query = useQuery({ query: DebugDocument })
+
+</script>
diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
index 7afae3eccd60..4e911afc9446 100644
--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -77,6 +77,7 @@ import ErroredIcon from '~icons/cy/status-errored-solid_x24.svg'
 import SkippedIcon from '~icons/cy/status-skipped_x24.svg'
 import PendingIcon from '~icons/cy/status-pending_x24.svg'
 import { dayjs } from './utils/day.js'
+import { useDurationFormat } from '../composables/useDurationFormat'
 
 gql`
 fragment RunCard on CloudRun {
@@ -120,7 +121,7 @@ const run = computed(() => props.gql)
 
 const relativeCreatedAt = computed(() => dayjs(new Date(run.value.createdAt!)).fromNow())
 
-const totalDuration = computed(() => dayjs.duration(run.value.totalDuration!).format('HH:mm:ss').replace(/^0+:/, ''))
+const totalDuration = useDurationFormat(run.value.totalDuration ?? 0)
 
 const tags = computed(() => {
   const tags = (props.gql.tags ?? []).map((tag) => tag?.name).filter(Boolean) as string[]
diff --git a/packages/app/src/specs/RunStatusDots.vue b/packages/app/src/specs/RunStatusDots.vue
index ed1eb664bb9c..e2736217d933 100644
--- a/packages/app/src/specs/RunStatusDots.vue
+++ b/packages/app/src/specs/RunStatusDots.vue
@@ -109,6 +109,9 @@ fragment RunStatusDots on RemoteFetchableCloudProjectSpecResult {
         nodes {
           id
           runNumber
+          basename
+          path
+          extension
           testsFailed{
             min
             max
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts b/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
index 3870fa6b9e38..2be2fdd86aaf 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
@@ -1,7 +1,7 @@
 import type { CloudSpecRun } from '../../../../graphql/src/gen/cloud-source-types.gen'
-import type { CloudSpecStatus } from '@packages/app/src/generated/graphql'
+import type { CloudRunGroupStatusEnum } from '@packages/app/src/generated/graphql'
 
-export const randomRunStatus = (): CloudSpecStatus => {
+export const randomRunStatus = (): CloudRunGroupStatusEnum => {
   const r = Math.floor(Math.random() * 5)
 
   switch (r) {
@@ -13,12 +13,17 @@ export const randomRunStatus = (): CloudSpecStatus => {
   }
 }
 
-export const fakeRuns = (statuses: CloudSpecStatus[]): Required<CloudSpecRun>[] => {
+export const fakeRuns = (statuses: CloudRunGroupStatusEnum[]): Required<CloudSpecRun>[] => {
   return statuses.map((s, idx) => {
     return {
       __typename: 'CloudSpecRun',
       id: `SpecRun_${idx}`,
       status: s,
+      basename: '',
+      extension: '',
+      groupIds: null,
+      path: '',
+      shortPath: '',
       createdAt: new Date('2022-05-08T03:17:00').toISOString(),
       completedAt: new Date('2022-05-08T05:17:00').toISOString(),
       runNumber: 432,
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 801c58e94858..8bffc858c581 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -633,6 +633,16 @@
       }
     }
   },
+  "debugPage": {
+    "runFailures": "Run Failures",
+    "notLoggedIn": "Not logged in",
+    "notConnected": "Not connected",
+    "noRuns": "No runs",
+    "header": {
+      "runUrl": "View in Cypress Cloud",
+      "commitsAhead": "You are {n} commit ahead | You are {n} commits ahead"
+    }
+  },
   "testingType": {
     "modalTitle": "Choose a testing type",
     "e2e": {
@@ -854,8 +864,5 @@
     "alpha": "Alpha",
     "beta": "Beta",
     "new": "New"
-  },
-  "debugPage": {
-    "runFailures": "Run Failures"
   }
 }
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index 2ade51763c55..ed63d7b8cbc6 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -1,6 +1,72 @@
 ### This file was generated by Nexus Schema
 ### Do not make changes to this file directly
 
+"""
+Information about the browser the tests were run on
+"""
+type CloudBrowserInfo implements Node {
+  """
+  The formatted name of the browser, e.g. `Electron`
+  """
+  formattedName: String
+
+  """
+  The formatted name of the browser with the current version i.e `Electron 59.0.278`
+  """
+  formattedNameWithVersion: String
+
+  """
+  The version of the browser, i.e. `59`
+  """
+  formattedVersion: String
+  id: ID!
+
+  """
+  The ID of the browser, e.g. `electron`
+  """
+  unformattedName: String
+
+  """
+  The unformatted version of the browser, i.e. `59.0.278`
+  """
+  unformattedVersion: String
+}
+
+"""
+Information about the CI provider that performed a run
+"""
+type CloudCiBuildInfo implements Node {
+  """
+  CI build ID as extracted from the CI worker environment (if available)
+  """
+  ciBuildNumber: String
+
+  """
+  Formatted CI build ID as extracted from the CI worker environment (if available)
+  """
+  ciBuildNumberFormatted: String
+
+  """
+  The formatted name of the provider that performed the associated run, e.g. `CircleCI`
+  """
+  formattedProvider: String
+
+  """
+  Globally unique identifier representing a concrete GraphQL ObjectType
+  """
+  id: ID!
+
+  """
+  The ID of the provider that performed the associated run, e.g. `circleci`
+  """
+  provider: String
+
+  """
+  A link to the build details for the associated run within the CI provider (if available)
+  """
+  url: String
+}
+
 """
 Feature not available for subscription
 """
@@ -26,6 +92,34 @@ type CloudLatestRunUpdateSpecData {
   pollingInterval: Int
 }
 
+"""
+The operating system the tests were run on
+"""
+type CloudOperatingSystem implements Node {
+  id: ID!
+
+  """
+  The formatted name of the operating system, e.g. `linux`
+  """
+  name: String
+
+  """
+  The formatted name of the operating system with the version, e.g. `linux 14.04`
+  """
+  nameWithVersion: String
+
+  """
+  The platform of the OS, e.g. `linux`
+  """
+  platform: OperatingSystemsEnum
+  unformattedName: String
+
+  """
+  The version of the operating system, e.g. `14.04`
+  """
+  version: String
+}
+
 """
 A CloudOrganization represents an Organization stored in the Cypress Cloud
 """
@@ -134,6 +228,11 @@ type CloudProject implements Node {
   """
   recordKeys: [CloudRecordKey!]
 
+  """
+  Gets a single CloudRun by runNumber
+  """
+  runByNumber(runNumber: Int!): CloudRun
+
   """
   A connection field type
   """
@@ -161,6 +260,21 @@ type CloudProject implements Node {
     status: CloudRunStatus
   ): CloudRunConnection
 
+  """
+  Returns runs associated to the given git commit SHAs hashes. The returned runs are ordered in the same way as the provided hashes.
+  """
+  runsByCommitShas(
+    """
+    An ordered list of git commit sha1 hashes.
+    """
+    commitShas: [String!]!
+
+    """
+    A limit to apply to the sorted list of found runs.
+    """
+    runLimit: Int! = 100
+  ): [CloudRun]
+
   """
   Unique identifier for a Project
   """
@@ -358,18 +472,61 @@ type CloudRecordKey implements Node {
 A Recorded run of the Test Runner, typically to the cloud
 """
 type CloudRun implements Node {
+  """
+  When the run was cancelled, null if not cancelled
+  """
+  cancelledAt: DateTime
+
+  """
+  Information about the CI provider that performed the run
+  """
+  ci: CloudCiBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
-  createdAt: DateTime
+
+  """
+  When the run was created
+  """
+  createdAt: DateTime!
+
+  """
+  All groups within this run
+  """
+  groups: [CloudRunGroup!]!
 
   """
   Globally unique identifier representing a concrete GraphQL ObjectType
   """
   id: ID!
+
+  """
+  Whether this run is hidden by usage limits
+  """
+  isHiddenByUsageLimits: Boolean!
+
+  """
+  What to do when the run is over the limit
+  """
+  overLimitActionType: OverLimitActionTypeEnum!
+
+  """
+  A link to upgrade or contact an admin
+  """
+  overLimitActionUrl: String!
   runNumber: Int
+
+  """
+  All specs within this run
+  """
+  specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
 
+  """
+  Tests within this run that failed and need to be reviewed
+  """
+  testsForReview(limit: Int! = 100): [CloudTestResult!]!
+
   """
   Total duration of the run in milliseconds, accounting for any parallelization
   """
@@ -462,6 +619,153 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
+"""
+A group of tests that are executed together within a run
+"""
+type CloudRunGroup implements Node {
+  """
+  The browser the tests were run on
+  """
+  browser: CloudBrowserInfo!
+
+  """
+  The date and time the group was completed
+  """
+  completedAt: DateTime
+
+  """
+  The date and time the group was created
+  """
+  createdAt: DateTime!
+
+  """
+  The overall duration of the tests in the group in milliseconds
+  """
+  duration: Int!
+
+  """
+  The name of the group
+  """
+  groupName: String
+  id: ID!
+
+  """
+  The operating system the tests were run on
+  """
+  os: CloudOperatingSystem!
+  status: CloudRunGroupStatusEnum!
+
+  """
+  The type of the test
+  """
+  testingType: String!
+
+  """
+  The total number of tests that failed within the group
+  """
+  totalFailures: Int!
+
+  """
+  The total number of tests that passed within the group
+  """
+  totalPasses: Int!
+
+  """
+  The total number of tests that are pending within the group
+  """
+  totalPending: Int!
+
+  """
+  The total number of tests that are skipped within the group
+  """
+  totalSkipped: Int!
+}
+
+"""
+Possible check status of a run group
+"""
+enum CloudRunGroupStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
+"""
+An instance of executing a single test within a run
+"""
+type CloudRunInstance implements Node {
+  """
+  The ID of the group that this instance belongs to
+  """
+  groupId: String!
+
+  """
+  Used to determine if the instance has screenshots
+  """
+  hasScreenshots: Boolean!
+
+  """
+  Used to determine if the instance has stdout
+  """
+  hasStdout: Boolean!
+
+  """
+  Used to determine if the instance has screenshots
+  """
+  hasVideo: Boolean!
+  id: ID!
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  screenshotsUrl: String
+
+  """
+  The status of the instance
+  """
+  status: RunInstanceStatusEnum!
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  stdoutUrl: String
+
+  """
+  This is the number of failed tests for the instance
+  """
+  totalFailed: Int
+
+  """
+  This is the number of passed tests for the instance
+  """
+  totalPassed: Int
+
+  """
+  This is the number of pending tests for the instance
+  """
+  totalPending: Int
+
+  """
+  This is the number of running tests for the instance
+  """
+  totalRunning: Int
+
+  """
+  This is the number of skipped tests for the instance
+  """
+  totalSkipped: Int
+
+  """
+  Link to Cypress Cloud to view stdout, if available
+  """
+  videoUrl: String
+}
+
 """
 Possible check status of the test run
 """
@@ -485,34 +789,55 @@ type CloudRunTag implements Node {
 }
 
 """
-A Recorded run of a given spec from the Test Runner, typically to the cloud
+Details of test recording in Cypress Cloud for a spec file within a run
 """
 type CloudSpecRun implements Node {
   """
-  When the run was completed
+  Basename of the spec file
+  """
+  basename: String!
+
+  """
+  When the spec was completed
   """
   completedAt: DateTime
 
   """
-  When the run was created
+  When the spec was registered to run
   """
   createdAt: DateTime
 
+  """
+  Extension of the spec file
+  """
+  extension: String!
+
   """
   Amount of groups this spec was run in
   """
   groupCount: Int
 
   """
-  Globally unique identifier representing a concrete GraphQL ObjectType
+  Unique identifiers for each group this spec was run in
   """
+  groupIds: [String]
   id: ID!
 
+  """
+  Full path to the spec file
+  """
+  path: String!
+
   """
   Incremental run number assigned
   """
   runNumber: Int
 
+  """
+  Short path to the spec file without leading Cypress directories
+  """
+  shortPath: String
+
   """
   Aggregate information about how long the spec took to run in the groups
   """
@@ -521,7 +846,7 @@ type CloudSpecRun implements Node {
   """
   Most important status for the spec shared between all groups
   """
-  status: CloudSpecStatus
+  status: CloudRunGroupStatusEnum
 
   """
   Aggregate information about how many tests failed in the groups
@@ -544,7 +869,7 @@ type CloudSpecRun implements Node {
   testsSkipped: SpecDataAggregate
 
   """
-  A link to the run overview page filtered by spec
+  A link to the run overview page in Cypress Cloud filtered by spec
   """
   url: String
 }
@@ -579,17 +904,69 @@ type CloudSpecRunEdge {
 }
 
 """
-Possible check status of the spec within a run
+Details of a recording in Cypress Cloud for a single test within a run
+"""
+type CloudTestResult implements Node {
+  """
+  This is the duration of the test result in milliseconds
+  """
+  duration: Int
+  id: ID!
+
+  """
+  The instance of running the test result within the corresponding run
+  """
+  instance: CloudRunInstance
+
+  """
+  If the test result was flaky in the current run
+  """
+  isFlaky: Boolean!
+
+  """
+  The spec ID of the test result
+  """
+  specId: String!
+
+  """
+  The state of the test result
+  """
+  state: CloudTestResultStateEnum!
+
+  """
+  The URL to the test result in Cypress Cloud
+  """
+  testUrl: String!
+
+  """
+  The title of the test result: describe/context > it/test
+  """
+  title(
+    """
+    This will trim the test title to the provided depth
+    """
+    depth: Int!
+  ): String!
+
+  """
+  The title of the test result split into parts
+  """
+  titleParts: [String!]!
+}
+
+"""
+State of the test result
 """
-enum CloudSpecStatus {
+enum CloudTestResultStateEnum {
   CANCELLED
   ERRORED
   FAILED
-  NOTESTS
   PASSED
+  PENDING
   RUNNING
+  SKIPPED
   TIMEDOUT
-  UNCLAIMED
+  UNKNOWN
 }
 
 """
@@ -699,6 +1076,24 @@ interface Node {
   id: ID!
 }
 
+"""
+Possible operating systems for a build
+"""
+enum OperatingSystemsEnum {
+  LINUX
+  MAC
+  UNKNOWN
+  WINDOWS
+}
+
+"""
+What to do when the run is over the limit
+"""
+enum OverLimitActionTypeEnum {
+  CONTACT_ADMIN
+  UPGRADE
+}
+
 """
 PageInfo cursor, as defined in https://facebook.github.io/relay/graphql/connections.htm#sec-undefined.PageInfo
 """
@@ -740,7 +1135,7 @@ type Query {
     projectSlug: String!
 
     """
-    Datetime since the fetched data
+    DateTime since the fetched data
     """
     sinceDateTime: DateTime
   ): CloudLatestRunUpdateSpecData
@@ -801,6 +1196,20 @@ type Query {
   cloudViewer: CloudUser
 }
 
+"""
+Possible check status of the instances run
+"""
+enum RunInstanceStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """
 Aggregate data from multiple groups for a spec run
 """
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 42f5379c2919..c88ea8e28902 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -66,6 +66,56 @@ type CachedUser implements Node {
   id: ID!
 }
 
+"""Information about the browser the tests were run on"""
+type CloudBrowserInfo implements Node {
+  """The formatted name of the browser, e.g. `Electron`"""
+  formattedName: String
+
+  """
+  The formatted name of the browser with the current version i.e `Electron 59.0.278`
+  """
+  formattedNameWithVersion: String
+
+  """The version of the browser, i.e. `59`"""
+  formattedVersion: String
+  id: ID!
+
+  """The ID of the browser, e.g. `electron`"""
+  unformattedName: String
+
+  """The unformatted version of the browser, i.e. `59.0.278`"""
+  unformattedVersion: String
+}
+
+"""Information about the CI provider that performed a run"""
+type CloudCiBuildInfo implements Node {
+  """CI build ID as extracted from the CI worker environment (if available)"""
+  ciBuildNumber: String
+
+  """
+  Formatted CI build ID as extracted from the CI worker environment (if available)
+  """
+  ciBuildNumberFormatted: String
+
+  """
+  The formatted name of the provider that performed the associated run, e.g. `CircleCI`
+  """
+  formattedProvider: String
+
+  """Globally unique identifier representing a concrete GraphQL ObjectType"""
+  id: ID!
+
+  """
+  The ID of the provider that performed the associated run, e.g. `circleci`
+  """
+  provider: String
+
+  """
+  A link to the build details for the associated run within the CI provider (if available)
+  """
+  url: String
+}
+
 """Feature not available for subscription"""
 type CloudFeatureNotEnabled {
   """an error message"""
@@ -83,6 +133,26 @@ type CloudLatestRunUpdateSpecData {
   pollingInterval: Int
 }
 
+"""The operating system the tests were run on"""
+type CloudOperatingSystem implements Node {
+  id: ID!
+
+  """The formatted name of the operating system, e.g. `linux`"""
+  name: String
+
+  """
+  The formatted name of the operating system with the version, e.g. `linux 14.04`
+  """
+  nameWithVersion: String
+
+  """The platform of the OS, e.g. `linux`"""
+  platform: OperatingSystemsEnum
+  unformattedName: String
+
+  """The version of the operating system, e.g. `14.04`"""
+  version: String
+}
+
 """
 A CloudOrganization represents an Organization stored in the Cypress Cloud
 """
@@ -155,6 +225,9 @@ type CloudProject implements Node {
   """Record keys for the service"""
   recordKeys: [CloudRecordKey!]
 
+  """Gets a single CloudRun by runNumber"""
+  runByNumber(runNumber: Int!): CloudRun
+
   """A connection field type"""
   runs(
     """Returns the elements in the list that come after the specified cursor"""
@@ -172,6 +245,17 @@ type CloudProject implements Node {
     status: CloudRunStatus
   ): CloudRunConnection
 
+  """
+  Returns runs associated to the given git commit SHAs hashes. The returned runs are ordered in the same way as the provided hashes.
+  """
+  runsByCommitShas(
+    """An ordered list of git commit sha1 hashes."""
+    commitShas: [String!]!
+
+    """A limit to apply to the sorted list of found runs."""
+    runLimit: Int! = 100
+  ): [CloudRun]
+
   """Unique identifier for a Project"""
   slug: String!
 }
@@ -309,16 +393,41 @@ type CloudRecordKey implements Node {
 
 """A Recorded run of the Test Runner, typically to the cloud"""
 type CloudRun implements Node {
+  """When the run was cancelled, null if not cancelled"""
+  cancelledAt: DateTime
+
+  """Information about the CI provider that performed the run"""
+  ci: CloudCiBuildInfo!
   commitInfo: CloudRunCommitInfo
   completedAt: DateTime
-  createdAt: DateTime
+
+  """When the run was created"""
+  createdAt: DateTime!
+
+  """All groups within this run"""
+  groups: [CloudRunGroup!]!
 
   """Globally unique identifier representing a concrete GraphQL ObjectType"""
   id: ID!
+
+  """Whether this run is hidden by usage limits"""
+  isHiddenByUsageLimits: Boolean!
+
+  """What to do when the run is over the limit"""
+  overLimitActionType: OverLimitActionTypeEnum!
+
+  """A link to upgrade or contact an admin"""
+  overLimitActionUrl: String!
   runNumber: Int
+
+  """All specs within this run"""
+  specs: [CloudSpecRun!]!
   status: CloudRunStatus
   tags: [CloudRunTag]
 
+  """Tests within this run that failed and need to be reviewed"""
+  testsForReview(limit: Int! = 100): [CloudTestResult!]!
+
   """
   Total duration of the run in milliseconds, accounting for any parallelization
   """
@@ -387,6 +496,99 @@ type CloudRunEdge {
   node: CloudRun!
 }
 
+"""A group of tests that are executed together within a run"""
+type CloudRunGroup implements Node {
+  """The browser the tests were run on"""
+  browser: CloudBrowserInfo!
+
+  """The date and time the group was completed"""
+  completedAt: DateTime
+
+  """The date and time the group was created"""
+  createdAt: DateTime!
+
+  """The overall duration of the tests in the group in milliseconds"""
+  duration: Int!
+
+  """The name of the group"""
+  groupName: String
+  id: ID!
+
+  """The operating system the tests were run on"""
+  os: CloudOperatingSystem!
+  status: CloudRunGroupStatusEnum!
+
+  """The type of the test"""
+  testingType: String!
+
+  """The total number of tests that failed within the group"""
+  totalFailures: Int!
+
+  """The total number of tests that passed within the group"""
+  totalPasses: Int!
+
+  """The total number of tests that are pending within the group"""
+  totalPending: Int!
+
+  """The total number of tests that are skipped within the group"""
+  totalSkipped: Int!
+}
+
+"""Possible check status of a run group"""
+enum CloudRunGroupStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
+"""An instance of executing a single test within a run"""
+type CloudRunInstance implements Node {
+  """The ID of the group that this instance belongs to"""
+  groupId: String!
+
+  """Used to determine if the instance has screenshots"""
+  hasScreenshots: Boolean!
+
+  """Used to determine if the instance has stdout"""
+  hasStdout: Boolean!
+
+  """Used to determine if the instance has screenshots"""
+  hasVideo: Boolean!
+  id: ID!
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  screenshotsUrl: String
+
+  """The status of the instance"""
+  status: RunInstanceStatusEnum!
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  stdoutUrl: String
+
+  """This is the number of failed tests for the instance"""
+  totalFailed: Int
+
+  """This is the number of passed tests for the instance"""
+  totalPassed: Int
+
+  """This is the number of pending tests for the instance"""
+  totalPending: Int
+
+  """This is the number of running tests for the instance"""
+  totalRunning: Int
+
+  """This is the number of skipped tests for the instance"""
+  totalSkipped: Int
+
+  """Link to Cypress Cloud to view stdout, if available"""
+  videoUrl: String
+}
+
 """Possible check status of the test run"""
 enum CloudRunStatus {
   CANCELLED
@@ -406,31 +608,44 @@ type CloudRunTag implements Node {
 }
 
 """
-A Recorded run of a given spec from the Test Runner, typically to the cloud
+Details of test recording in Cypress Cloud for a spec file within a run
 """
 type CloudSpecRun implements Node {
-  """When the run was completed"""
+  """Basename of the spec file"""
+  basename: String!
+
+  """When the spec was completed"""
   completedAt: DateTime
 
-  """When the run was created"""
+  """When the spec was registered to run"""
   createdAt: DateTime
 
+  """Extension of the spec file"""
+  extension: String!
+
   """Amount of groups this spec was run in"""
   groupCount: Int
 
-  """Globally unique identifier representing a concrete GraphQL ObjectType"""
+  """Unique identifiers for each group this spec was run in"""
+  groupIds: [String]
   id: ID!
 
+  """Full path to the spec file"""
+  path: String!
+
   """Incremental run number assigned"""
   runNumber: Int
 
+  """Short path to the spec file without leading Cypress directories"""
+  shortPath: String
+
   """
   Aggregate information about how long the spec took to run in the groups
   """
   specDuration: SpecDataAggregate
 
   """Most important status for the spec shared between all groups"""
-  status: CloudSpecStatus
+  status: CloudRunGroupStatusEnum
 
   """Aggregate information about how many tests failed in the groups"""
   testsFailed: SpecDataAggregate
@@ -444,7 +659,7 @@ type CloudSpecRun implements Node {
   """Aggregate information about how many tests were skipped in the groups"""
   testsSkipped: SpecDataAggregate
 
-  """A link to the run overview page filtered by spec"""
+  """A link to the run overview page in Cypress Cloud filtered by spec"""
   url: String
 }
 
@@ -471,16 +686,48 @@ type CloudSpecRunEdge {
   node: CloudSpecRun!
 }
 
-"""Possible check status of the spec within a run"""
-enum CloudSpecStatus {
+"""Details of a recording in Cypress Cloud for a single test within a run"""
+type CloudTestResult implements Node {
+  """This is the duration of the test result in milliseconds"""
+  duration: Int
+  id: ID!
+
+  """The instance of running the test result within the corresponding run"""
+  instance: CloudRunInstance
+
+  """If the test result was flaky in the current run"""
+  isFlaky: Boolean!
+
+  """The spec ID of the test result"""
+  specId: String!
+
+  """The state of the test result"""
+  state: CloudTestResultStateEnum!
+
+  """The URL to the test result in Cypress Cloud"""
+  testUrl: String!
+
+  """The title of the test result: describe/context > it/test"""
+  title(
+    """This will trim the test title to the provided depth"""
+    depth: Int!
+  ): String!
+
+  """The title of the test result split into parts"""
+  titleParts: [String!]!
+}
+
+"""State of the test result"""
+enum CloudTestResultStateEnum {
   CANCELLED
   ERRORED
   FAILED
-  NOTESTS
   PASSED
+  PENDING
   RUNNING
+  SKIPPED
   TIMEDOUT
-  UNCLAIMED
+  UNKNOWN
 }
 
 """A CloudUser represents an User stored in the Cypress Cloud"""
@@ -1393,6 +1640,20 @@ interface Node {
   id: ID!
 }
 
+"""Possible operating systems for a build"""
+enum OperatingSystemsEnum {
+  LINUX
+  MAC
+  UNKNOWN
+  WINDOWS
+}
+
+"""What to do when the run is over the limit"""
+enum OverLimitActionTypeEnum {
+  CONTACT_ADMIN
+  UPGRADE
+}
+
 enum PackageManagerEnum {
   npm
   pnpm
@@ -1496,7 +1757,7 @@ type Query {
     """A list of Project slugs"""
     projectSlug: String!
 
-    """Datetime since the fetched data"""
+    """DateTime since the fetched data"""
     sinceDateTime: DateTime
   ): CloudLatestRunUpdateSpecData
 
@@ -1682,6 +1943,18 @@ enum RemoteFetchableStatus {
   NOT_FETCHED
 }
 
+"""Possible check status of the instances run"""
+enum RunInstanceStatusEnum {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """A file that we just added to the filesystem during project setup"""
 type ScaffoldedFile {
   """Info about the file we just scaffolded"""
diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
index 9bd2e8a291ea..d3427737ec77 100644
--- a/packages/graphql/test/stubCloudTypes.ts
+++ b/packages/graphql/test/stubCloudTypes.ts
@@ -25,6 +25,7 @@ import type {
   CloudProjectSpecResult,
   CloudRunStatus,
   CloudSpecRun,
+  CloudTestResult,
 } from '../src/gen/test-cloud-graphql-types.gen'
 import type { GraphQLResolveInfo } from 'graphql'
 
@@ -184,6 +185,17 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
     url: 'http://dummy.cypress.io/runs/1',
     createdAt: new Date(Date.now() - 1000 * 60 * 61).toISOString(),
     completedAt: null,
+    cancelledAt: null,
+    ci: {
+      __typename: 'CloudCiBuildInfo',
+      id: 'ci_id',
+    },
+    groups: [],
+    isHiddenByUsageLimits: false,
+    overLimitActionType: 'UPGRADE',
+    overLimitActionUrl: '',
+    specs: [],
+    testsForReview: [],
     commitInfo: createCloudRunCommitInfo({
       sha: `fake-sha-${getNodeIdx('CloudRun')}`,
       summary: `fix: make gql work ${config.status ?? 'PASSED'}`,
@@ -194,6 +206,36 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
   return indexNode(cloudRunData)
 }
 
+function addFailedTests (run: CloudRun) {
+  const specId = 'hash123'
+
+  const spec: CloudSpecRun = {
+    __typename: 'CloudSpecRun',
+    id: specId,
+    basename: 'Test.cy.ts',
+    extension: '.cy.ts',
+    path: 'src/Test.cy.ts',
+  }
+
+  const test: CloudTestResult = {
+    __typename: 'CloudTestResult',
+    id: '123',
+    isFlaky: false,
+    specId,
+    state: 'FAILED' as const,
+    duration: null,
+    instance: null,
+    testUrl: 'http://cloudurl',
+    title: '<test/> Should render',
+    titleParts: ['<test/>', 'should render'],
+  }
+
+  run.specs = [spec]
+  run.testsForReview = [test]
+
+  return run
+}
+
 export function createCloudOrganization (config: Partial<CloudOrganization>): Required<CloudOrganization> {
   const cloudOrgData: Required<CloudOrganization> = {
     ...testNodeId('CloudOrganization'),
@@ -249,6 +291,7 @@ export const CloudRunStubs = {
   someSkipped: createCloudRun({ status: 'PASSED', totalPassed: 7, totalSkipped: 3 }),
   somePending: createCloudRun({ status: 'PASSED', totalPassed: 100, totalSkipped: 3000, totalPending: 20 }),
   allSkipped: createCloudRun({ status: 'ERRORED', totalPassed: 0, totalSkipped: 10 }),
+  failingWithTests: addFailedTests(createCloudRun({ status: 'FAILED', totalPassed: 8, totalFailed: 2 })),
 } as Record<string, Required<CloudRun>>
 
 export const CloudUserStubs = {
diff --git a/yarn.lock b/yarn.lock
index 0b0a4e7a1b80..ec7d156e5a69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2326,19 +2326,17 @@
     windicss "^3.5.1"
     windicss-webpack-plugin "^1.6.10"
 
-"@cypress-design/icon-registry@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.4.2.tgz#bc2d913208acb33b5dfb1d8f6d7929b153e32ba0"
-  integrity sha512-iyH5xFc2abpwVPTEjoJ2ILIQy79DaR6ata76HAk9NHPWVUwG/yUPEzvp3m2T8IqgebNEuTtl4mBHM/u+jycxng==
-  dependencies:
-    camelcase "^6.3.0"
+"@cypress-design/icon-registry@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.14.0.tgz#c30cbb013b7a86700941677da661229d81493399"
+  integrity sha512-wIXr00J7azl8Jl+3DLhSK8WkWXRUvfqDKUnLrEyxQjrzbwNIQIPL0bqgY30CZbx8xoPXCIewJDYXvhgbWZQOhQ==
 
-"@cypress-design/vue-icon@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.4.2.tgz#3574a749efbdaf83f48251108c016c3d383160bd"
-  integrity sha512-i7YWizC/c1LFdxVZSbyTIOrj4LeiIxypemCXdygacmvogQS2buBC+CovqCMFAzKqnfBZUBGiQajMWWM5rzIduw==
+"@cypress-design/vue-icon@^0.12.1":
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.12.1.tgz#cb348fb697dd65305c927522643b4ede6b113821"
+  integrity sha512-AI5XUqzL9AwoNL0rvQNWzyrP5WQNGYPI2phC7b0MhO7hjrZN6Qv+Le7kHhEpAIpWuVi222t699jlvXoTRNr1Jw==
   dependencies:
-    "@cypress-design/icon-registry" "^0.4.2"
+    "@cypress-design/icon-registry" "^0.14.0"
 
 "@cypress/commit-info@2.2.0":
   version "2.2.0"
@@ -11570,7 +11568,7 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0, camelcase@^6.2.0, camelcase@^6.3.0:
+camelcase@^6.0.0, camelcase@^6.2.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==