diff --git a/packages/app/cypress/e2e/runs.cy.ts b/packages/app/cypress/e2e/runs.cy.ts
index 448352e8a14d..0cdce03ba58b 100644
--- a/packages/app/cypress/e2e/runs.cy.ts
+++ b/packages/app/cypress/e2e/runs.cy.ts
@@ -279,7 +279,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         name: 'Test User A',
       } })
 
-      cy.contains('button', 'Log in to Cypress Cloud').click()
+      cy.contains('button', 'Connect to Cypress Cloud').click()
 
       cy.findByRole('dialog', { name: 'Log in to Cypress' }).as('logInModal').within(() => {
         cy.findByRole('button', { name: 'Log in' }).click()
diff --git a/packages/app/cypress/e2e/settings.cy.ts b/packages/app/cypress/e2e/settings.cy.ts
index d49f3c8408be..89b693907bcd 100644
--- a/packages/app/cypress/e2e/settings.cy.ts
+++ b/packages/app/cypress/e2e/settings.cy.ts
@@ -402,7 +402,7 @@ describe('App: Settings without cloud', () => {
       o.sinon.stub(ctx._apis.authApi, 'logIn')
     })
 
-    cy.contains('button', 'Log in to Cypress Cloud').click()
+    cy.contains('button', 'Connect to Cypress Cloud').click()
     cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
       cy.contains('button', 'Log in').click()
     })
diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
index 7090046cb30a..1928cddb0a74 100644
--- a/packages/app/src/debug/DebugContainer.cy.tsx
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -7,7 +7,7 @@ import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 
 describe('<DebugContainer />', () => {
   context('empty states', () => {
-    const validateEmptyState = (expectedMessage: string) => {
+    const validateEmptyState = (expectedMessages: string[]) => {
       cy.mountFragment(DebugSpecsFragmentDoc, {
         render: (gqlVal) => {
           return (
@@ -18,19 +18,24 @@ describe('<DebugContainer />', () => {
         },
       })
 
-      cy.findByTestId('debug-empty').contains(expectedMessage)
+      expectedMessages.forEach((message) => {
+        cy.findByTestId('debug-empty').contains(message)
+      })
     }
 
     it('shows not logged in', () => {
-      validateEmptyState(defaultMessages.debugPage.notLoggedIn)
+      validateEmptyState([defaultMessages.debugPage.emptyStates.connectToCypressCloud, defaultMessages.debugPage.emptyStates.debugDirectlyInCypress, defaultMessages.debugPage.emptyStates.notLoggedInTestMessage])
+      cy.findByRole('button', { name: 'Connect to Cypress Cloud' }).should('be.visible')
     })
 
-    it('is logged in', () => {
+    it('is logged in with no project', () => {
       const loginConnectStore = useLoginConnectStore()
 
       loginConnectStore.setUserFlag('isLoggedIn', true)
+      loginConnectStore.setProjectFlag('isProjectConnected', false)
 
-      validateEmptyState(defaultMessages.debugPage.notConnected)
+      validateEmptyState([defaultMessages.debugPage.emptyStates.debugDirectlyInCypress, defaultMessages.debugPage.emptyStates.reviewRerunAndDebug, defaultMessages.debugPage.emptyStates.noProjectTestMessage])
+      cy.findByRole('button', { name: 'Connect a Cypress Cloud project' }).should('be.visible')
     })
 
     it('has no runs', () => {
@@ -39,16 +44,24 @@ describe('<DebugContainer />', () => {
       loginConnectStore.setUserFlag('isLoggedIn', true)
       loginConnectStore.setProjectFlag('isProjectConnected', true)
       cy.mountFragment(DebugSpecsFragmentDoc, {
-        render: (gqlVal) => {
-          return (
-            <DebugContainer
-              gql={gqlVal}
-            />
-          )
-        },
+        render: (gqlVal) => <DebugContainer gql={gqlVal} />,
+      })
+
+      validateEmptyState([defaultMessages.debugPage.emptyStates.recordYourFirstRun, defaultMessages.debugPage.emptyStates.almostThere, defaultMessages.debugPage.emptyStates.noRunsTestMessage])
+      cy.findByDisplayValue('npx cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa').should('be.visible')
+    })
+
+    it('errors', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+      loginConnectStore.setProjectFlag('isProjectConnected', true)
+      cy.mountFragment(DebugSpecsFragmentDoc, {
+        render: (gqlVal) => <DebugContainer gql={gqlVal} showError={true} />,
       })
 
-      cy.findByTestId('debug-empty').contains(defaultMessages.debugPage.noRuns)
+      cy.findByTestId('debug-empty').should('not.exist')
+      cy.findByTestId('debug-alert').should('be.visible')
     })
   })
 
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 162c13b3cbce..8e8e613a9c19 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
+    <DebugError
+      v-if="showError"
+    />
     <div
-      v-if="loginConnectStore.user.isLoggedIn && loginConnectStore.project.isProjectConnected && run"
+      v-else-if="loginConnectStore.user.isLoggedIn && loginConnectStore.project.isProjectConnected && run"
     >
       <DebugPageHeader
         :gql="run"
@@ -15,21 +18,9 @@
       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>
+      <DebugNotLoggedIn v-if="!loginConnectStore.user.isLoggedIn" />
+      <DebugNoProject v-else-if="!loginConnectStore.project.isProjectConnected" />
+      <DebugNoRuns v-else-if="!run" />
     </div>
   </div>
 </template>
@@ -41,11 +32,12 @@ import type { DebugSpecsFragment, TestingTypeEnum } 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 DebugNotLoggedIn from './empty/DebugNotLoggedIn.vue'
+import DebugNoProject from './empty/DebugNoProject.vue'
+import DebugNoRuns from './empty/DebugNoRuns.vue'
+import DebugError from './empty/DebugError.vue'
 import { specsList } from './utils/DebugMapping'
 
-const { t } = useI18n()
-
 gql`
 fragment DebugLocalSpecs on Spec {
   id
@@ -94,17 +86,19 @@ fragment DebugSpecs on Query {
 `
 
 const props = defineProps<{
-  gql: DebugSpecsFragment
+  gql?: DebugSpecsFragment
+  // This prop is just to stub the error state for now
+  showError?: boolean
 }>()
 
 const loginConnectStore = useLoginConnectStore()
 
 const run = computed(() => {
-  return props.gql.currentProject?.cloudProject?.__typename === 'CloudProject' ? props.gql.currentProject.cloudProject.runByNumber : null
+  return props.gql?.currentProject?.cloudProject?.__typename === 'CloudProject' ? props.gql.currentProject.cloudProject.runByNumber : null
 })
 
 const debugSpecsArray = computed(() => {
-  if (run.value && props.gql.currentProject) {
+  if (run.value && props.gql?.currentProject) {
     const specs = run.value.specs || []
     const tests = run.value.testsForReview || []
     const groups = run.value.groups || []
diff --git a/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
new file mode 100644
index 000000000000..a5992f1a94a6
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
@@ -0,0 +1,58 @@
+import DebugNotLoggedIn from './DebugNotLoggedIn.vue'
+import DebugNoProject from './DebugNoProject.vue'
+import DebugNoRuns from './DebugNoRuns.vue'
+import DebugLoading from './DebugLoading.vue'
+import DebugError from './DebugError.vue'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+
+describe('Debug page empty states', () => {
+  context('not logged in', () => {
+    it('renders', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      // We need to set isLoggedIn so that CloudConnectButton shows the correct state
+      loginConnectStore.setUserFlag('isLoggedIn', false)
+
+      cy.mount(<DebugNotLoggedIn />)
+
+      cy.percySnapshot()
+    })
+  })
+
+  context('no project', () => {
+    it('renders', () => {
+      const loginConnectStore = useLoginConnectStore()
+
+      // We need to set isLoggedIn so that CloudConnectButton shows the correct state
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+
+      cy.mount(<DebugNoProject />)
+
+      cy.percySnapshot()
+    })
+  })
+
+  context('no runs', () => {
+    it('renders', () => {
+      cy.mount(<DebugNoRuns />)
+
+      cy.percySnapshot()
+    })
+  })
+
+  context('loading', () => {
+    it('renders', () => {
+      cy.mount(<DebugLoading />)
+
+      cy.percySnapshot()
+    })
+  })
+
+  context('error', () => {
+    it('renders', () => {
+      cy.mount(<DebugError />)
+
+      cy.percySnapshot()
+    })
+  })
+})
diff --git a/packages/app/src/debug/empty/DebugEmptyView.vue b/packages/app/src/debug/empty/DebugEmptyView.vue
new file mode 100644
index 000000000000..46a55981ebc8
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugEmptyView.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-col my-45px items-center">
+    <div class="flex flex-col items-center justify-evenly">
+      <div><i-cy-box-open_x48 class="icon-dark-gray-500 icon-light-indigo-100" /></div>
+      <div class="flex flex-col mx-[20%] mt-25px mb-20px items-center">
+        <div class="font-medium my-5px text-center text-gray-900 text-18px">
+          {{ title }}
+        </div>
+        <div class="font-normal my-5px text-center leading-relaxed text-16px text-gray-600">
+          {{ description }}
+        </div>
+      </div>
+      <slot name="cta" />
+    </div>
+    <div class="flex flex-col my-40px w-full items-center">
+      <DebugTestLoadingContainer
+        width-class="w-[75%]"
+        dot-class="icon-light-gray-200"
+        :rows="loadingRows"
+      >
+        <template #header>
+          <div class="bg-white border rounded-md flex border-gray-100 w-max p-5px text-14px text-gray-700">
+            <div><i-cy-status-failed_x12 /></div>
+            <div class="bg-gray-700 h-1px mx-5px mt-7px w-5px" />
+            <div
+              v-if="exampleTestName"
+              class="bg-gray-100 h-13px mx-1 pb-1px w-1px"
+            />
+            <div
+              v-if="exampleTestName"
+              class="mx-1 text-14px text-gray-700"
+            >
+              {{ exampleTestName }}
+            </div>
+          </div>
+        </template>
+      </DebugTestLoadingContainer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DebugTestLoadingContainer from './DebugTestLoadingContainer.vue'
+
+defineProps<{
+  title: string
+  description?: string
+  exampleTestName?: string
+}>()
+
+const loadingRows = [
+  ['w-40px', 'w-[40%]'],
+  ['w-40px', 'w-[50%]'],
+  ['w-40px', 'w-[65%]'],
+]
+
+</script>
diff --git a/packages/app/src/debug/empty/DebugError.vue b/packages/app/src/debug/empty/DebugError.vue
new file mode 100644
index 000000000000..485d8fa804ad
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugError.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="m-25px">
+    <Alert
+      data-cy="debug-alert"
+      status="warning"
+      :title="t('debugPage.emptyStates.gitRepositoryNotDetected')"
+      :icon="WarningIcon"
+      dismissible
+    >
+      <p>{{ t('debugPage.emptyStates.ensureGitSetupCorrectly') }}</p>
+    </Alert>
+  </div>
+  <DebugEmptyView
+    :title="t('debugPage.emptyStates.debugDirectlyInCypress')"
+    :description="t('debugPage.emptyStates.reviewRerunAndDebug')"
+  />
+</template>
+
+<script lang="ts" setup>
+import DebugEmptyView from './DebugEmptyView.vue'
+import Alert from '@packages/frontend-shared/src/components/Alert.vue'
+import WarningIcon from '~icons/cy/warning_x16.svg'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+</script>
diff --git a/packages/app/src/debug/empty/DebugLoading.vue b/packages/app/src/debug/empty/DebugLoading.vue
new file mode 100644
index 000000000000..8c019ce14f2e
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugLoading.vue
@@ -0,0 +1,90 @@
+<template>
+  <div
+    data-cy="debug-loading"
+    class="p-30px"
+  >
+    <div>
+      <div class="flex items-center">
+        <div class="rounded-full bg-gray-50 h-16px w-344px" />
+        <DebugLoadingDivider />
+        <div class="rounded-full bg-gray-50 h-8px ml-8px w-120px" />
+      </div>
+
+      <div class="flex mt-15px items-center">
+        <div class="rounded-full bg-gray-50 h-16px w-72px" />
+        <div class="rounded-full bg-gray-50 h-16px ml-8px w-160px" />
+        <div class="rounded-full bg-gray-50 h-16px ml-8px w-72px" />
+        <template
+          v-for="n in 4"
+          :key="n"
+        >
+          <DebugLoadingDivider />
+          <div class="rounded-full bg-gray-50 h-8px ml-8px w-80px" />
+        </template>
+      </div>
+    </div>
+    <div class="mt-20px">
+      <DebugTestLoadingContainer
+        width-class="w-full"
+        dot-class="icon-light-gray-50"
+        :rows="[['w-200px', 'w-200px'], ['w-200px', 'w-200px'], ['w-200px', 'w-200px']]"
+      >
+        <template #header>
+          <div class="flex items center justify-between">
+            <div>
+              <div class="flex items-center">
+                <i-cy-dot-solid_x4 class="icon-light-gray-100" />
+                <div class="rounded-full bg-gray-100 h-16px ml-8px w-200px" />
+              </div>
+              <div class="flex mt-20px items-center">
+                <div class="rounded-full bg-gray-100 h-8px w-180px" />
+                <DebugLoadingDivider />
+
+                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+                <DebugLoadingDivider />
+                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+              </div>
+            </div>
+            <div class="mt-12px">
+              <div class="rounded-full bg-gray-100 h-20px w-120px" />
+            </div>
+          </div>
+        </template>
+      </DebugTestLoadingContainer>
+    </div>
+    <div class="mt-20px">
+      <DebugTestLoadingContainer
+        width-class="w-full"
+        dot-class="icon-light-gray-50"
+        :rows="[['w-200px', 'w-200px'], ['w-200px', 'w-200px']]"
+      >
+        <template #header>
+          <div class="flex items center justify-between">
+            <div>
+              <div class="flex items-center">
+                <i-cy-dot-solid_x4 class="icon-light-gray-100" />
+                <div class="rounded-full bg-gray-100 h-16px ml-8px w-200px" />
+              </div>
+              <div class="flex mt-20px items-center">
+                <div class="rounded-full bg-gray-100 h-8px w-180px" />
+                <DebugLoadingDivider />
+                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+                <DebugLoadingDivider />
+                <div class="rounded-full bg-gray-100 h-8px ml-8px w-99px" />
+              </div>
+            </div>
+            <div class="mt-12px">
+              <div class="rounded-full bg-gray-100 h-20px w-120px" />
+            </div>
+          </div>
+        </template>
+      </DebugTestLoadingContainer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DebugLoadingDivider from './DebugLoadingDivider.vue'
+import DebugTestLoadingContainer from './DebugTestLoadingContainer.vue'
+
+</script>
diff --git a/packages/app/src/debug/empty/DebugLoadingDivider.vue b/packages/app/src/debug/empty/DebugLoadingDivider.vue
new file mode 100644
index 000000000000..5dc6a66d0705
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugLoadingDivider.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="rounded-full font-semibold bg-gray-100 h-2px ml-8px w-2px" />
+</template>
diff --git a/packages/app/src/debug/empty/DebugNoProject.vue b/packages/app/src/debug/empty/DebugNoProject.vue
new file mode 100644
index 000000000000..3f8136a42a33
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugNoProject.vue
@@ -0,0 +1,20 @@
+<template>
+  <DebugEmptyView
+    :title="t('debugPage.emptyStates.debugDirectlyInCypress')"
+    :description="t('debugPage.emptyStates.reviewRerunAndDebug')"
+    :example-test-name="t('debugPage.emptyStates.noProjectTestMessage')"
+  >
+    <template #cta>
+      <CloudConnectButton utm-medium="Debug Tab" />
+    </template>
+  </DebugEmptyView>
+</template>
+
+<script lang="ts" setup>
+import DebugEmptyView from './DebugEmptyView.vue'
+import { useI18n } from '@cy/i18n'
+import CloudConnectButton from '../../runs/CloudConnectButton.vue'
+
+const { t } = useI18n()
+
+</script>
diff --git a/packages/app/src/debug/empty/DebugNoRuns.vue b/packages/app/src/debug/empty/DebugNoRuns.vue
new file mode 100644
index 000000000000..75b3b3190e0a
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugNoRuns.vue
@@ -0,0 +1,20 @@
+<template>
+  <DebugEmptyView
+    :title="t('debugPage.emptyStates.recordYourFirstRun')"
+    :description="t('debugPage.emptyStates.almostThere')"
+    :example-test-name="t('debugPage.emptyStates.noRunsTestMessage')"
+  >
+    <template #cta>
+      <RecordPromptAdapter class="w-[80%]" />
+    </template>
+  </DebugEmptyView>
+</template>
+
+<script lang="ts" setup>
+import DebugEmptyView from './DebugEmptyView.vue'
+import { useI18n } from '@cy/i18n'
+import RecordPromptAdapter from '@cy/gql-components/RecordPromptAdapter.vue'
+
+const { t } = useI18n()
+
+</script>
diff --git a/packages/app/src/debug/empty/DebugNotLoggedIn.vue b/packages/app/src/debug/empty/DebugNotLoggedIn.vue
new file mode 100644
index 000000000000..0de2abc75a81
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugNotLoggedIn.vue
@@ -0,0 +1,20 @@
+<template>
+  <DebugEmptyView
+    :title="t('debugPage.emptyStates.debugDirectlyInCypress')"
+    :description="t('debugPage.emptyStates.reviewRerunAndDebug')"
+    :example-test-name="t('debugPage.emptyStates.notLoggedInTestMessage')"
+  >
+    <template #cta>
+      <CloudConnectButton utm-medium="Debug Tab" />
+    </template>
+  </DebugEmptyView>
+</template>
+
+<script lang="ts" setup>
+import DebugEmptyView from './DebugEmptyView.vue'
+import { useI18n } from '@cy/i18n'
+import CloudConnectButton from '../../runs/CloudConnectButton.vue'
+
+const { t } = useI18n()
+
+</script>
diff --git a/packages/app/src/debug/empty/DebugTestLoadingContainer.vue b/packages/app/src/debug/empty/DebugTestLoadingContainer.vue
new file mode 100644
index 000000000000..4bc676fe7b1c
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugTestLoadingContainer.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="border-t border-l border-r rounded-t-md bg-gray-50 border-0 border-gray-100 py-20px px-15px"
+    :class="widthClass"
+  >
+    <slot name="header" />
+  </div>
+  <div
+    v-for="(row, i) in rows"
+    :key="i"
+    class="bg-white border flex border-b-0 border-gray-100 py-5 px-17px items-center overflow-hidden last:border-b last:rounded-b-md"
+    :class="widthClass"
+  >
+    <div>
+      <i-cy-dot-solid_x4 :class="dotClass" />
+    </div>
+    <div
+      class="ml-10px"
+      :class="row[0]"
+    >
+      <div class="rounded-full bg-gray-50 h-16px w-full" />
+    </div>
+    <div class="ml-10px">
+      <i-cy-chevron-right_x16 class="icon-dark-gray-200" />
+    </div>
+    <div
+      class="ml-10px"
+      :class="row[1]"
+    >
+      <div
+        class="rounded-full bg-gray-50 h-16px w-full"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+defineProps<{
+  widthClass: string
+  dotClass: string
+  rows: Array<string[]>
+}>()
+
+</script>
diff --git a/packages/app/src/pages/Debug.vue b/packages/app/src/pages/Debug.vue
index d91741096e5b..c29d53230250 100644
--- a/packages/app/src/pages/Debug.vue
+++ b/packages/app/src/pages/Debug.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    v-if="!query.data.value"
-    data-cy="debug-loader"
-  >
-    Loading
-  </div>
+  <DebugLoading v-if="query.fetching.value" />
   <DebugContainer
     v-else
     data-cy="debug-container"
@@ -15,6 +10,7 @@
 <script setup lang="ts">
 
 import DebugContainer from '../debug/DebugContainer.vue'
+import DebugLoading from '../debug/empty/DebugLoading.vue'
 import { gql, useQuery, useSubscription } from '@urql/vue'
 import { DebugDocument, Debug_SpecsChangeDocument } from '../generated/graphql'
 
diff --git a/packages/app/src/runs/CloudConnectButton.cy.tsx b/packages/app/src/runs/CloudConnectButton.cy.tsx
index 97fc7493438a..05cb7a6cd106 100644
--- a/packages/app/src/runs/CloudConnectButton.cy.tsx
+++ b/packages/app/src/runs/CloudConnectButton.cy.tsx
@@ -6,7 +6,7 @@ describe('<CloudConnectButton />', { viewportHeight: 60, viewportWidth: 400 }, (
     it('show user connect if not connected', () => {
       cy.mount(() => <div class="h-screen"><CloudConnectButton utmMedium="testing" /></div>)
 
-      cy.contains('button', 'Log in').should('be.visible')
+      cy.contains('button', 'Connect to Cypress Cloud').should('be.visible')
     })
   })
 
@@ -22,14 +22,14 @@ describe('<CloudConnectButton />', { viewportHeight: 60, viewportWidth: 400 }, (
     it('show project connect if not connected', () => {
       cy.mount(() => <div class="h-screen"><CloudConnectButton utmMedium="testing" /></div>)
 
-      cy.contains('button', 'Connect your project').should('be.visible')
+      cy.contains('button', 'Connect a Cypress Cloud project').should('be.visible')
     })
 
     it('uses the store to open the Login Connect modal', () => {
       loginConnectStore.openLoginConnectModal = cy.spy().as('openLoginConnectModal')
       cy.mount(() => <div class="h-screen"><CloudConnectButton utmMedium="testing" /></div>)
 
-      cy.contains('button', 'Connect your project').click()
+      cy.contains('button', 'Connect a Cypress Cloud project').click()
 
       cy.get('@openLoginConnectModal').should('have.been.calledWith', { utmMedium: 'testing' })
     })
diff --git a/packages/app/src/runs/CloudConnectButton.vue b/packages/app/src/runs/CloudConnectButton.vue
index 008571202305..fba70554b6d0 100644
--- a/packages/app/src/runs/CloudConnectButton.vue
+++ b/packages/app/src/runs/CloudConnectButton.vue
@@ -1,7 +1,7 @@
 <template>
   <Button
     :class="props.class"
-    :prefix-icon="user.isLoggedIn ? ChainIcon : UserIcon"
+    :prefix-icon="user.isLoggedIn ? ChainIcon : CypressIcon"
     prefix-icon-class="icon-dark-white icon-light-transparent"
     @click="openLoginConnectModal({ utmMedium: props.utmMedium })"
   >
@@ -11,8 +11,8 @@
 
 <script lang="ts" setup>
 
-import UserIcon from '~icons/cy/user-outline_x16.svg'
 import ChainIcon from '~icons/cy/chain-link_x16.svg'
+import CypressIcon from '~icons/cy/cypress-logo_x16.svg'
 import Button from '@cy/components/Button.vue'
 import { useI18n } from '@cy/i18n'
 import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
diff --git a/packages/app/src/runs/RunsConnect.cy.tsx b/packages/app/src/runs/RunsConnect.cy.tsx
index 2bcb603994ac..067f9b01af1b 100644
--- a/packages/app/src/runs/RunsConnect.cy.tsx
+++ b/packages/app/src/runs/RunsConnect.cy.tsx
@@ -4,6 +4,6 @@ describe('<RunsConnect />', () => {
   it('show connect button', () => {
     cy.mount(() => <div class="h-screen"><RunsConnect /></div>)
 
-    cy.contains('button', 'Log in').should('be.visible')
+    cy.contains('button', 'Connect to Cypress Cloud').should('be.visible')
   })
 })
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 6a876f940db3..336b6ce6f1fe 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -554,8 +554,8 @@
       "smartText": "Scale your test runs with built-in Smart Orchestration.",
       "debugText": "Debug tests that fail in CI with visual feedback.",
       "chartText": "Keep your tests in tip-top shape with powerful analytics.",
-      "buttonUser": "Log in to Cypress Cloud",
-      "buttonProject": "Connect your project to Cypress Cloud",
+      "buttonUser": "Connect to Cypress Cloud",
+      "buttonProject": "Connect a Cypress Cloud project",
       "modal": {
         "title": "Connect project",
         "cancel": "Cancel",
@@ -652,6 +652,18 @@
     "notLoggedIn": "Not logged in",
     "notConnected": "Not connected",
     "noRuns": "No runs",
+    "emptyStates": {
+      "debugDirectlyInCypress": "Debug failed CI runs directly in Cypress",
+      "reviewRerunAndDebug": "Review, rerun, and debug failed CI test runs that are recorded to Cypress Cloud – all from within your local Cypress app.",
+      "connectToCypressCloud": "Connect to Cypress Cloud",
+      "notLoggedInTestMessage": "Connect to Cypress Cloud to locally debug failed CI test runs",
+      "noProjectTestMessage": "Connect a Cypress Cloud project to locally debug failed CI test runs",
+      "recordYourFirstRun": "Record your first test run to Cypress Cloud",
+      "almostThere": "You're almost there! Start recording your test runs to Cypress Cloud by running the command below in your local or CI terminal.",
+      "noRunsTestMessage": "Record your first test run to Cypress Cloud to locally debug failed CI test runs",
+      "gitRepositoryNotDetected": "Git repository not detected",
+      "ensureGitSetupCorrectly": "Cypress uses Git to associate runs with your local state. Please ensure that version control is set up correctly."
+    },
     "header": {
       "runUrl": "View in Cypress Cloud",
       "commitsAhead": "You are {n} commit ahead | You are {n} commits ahead"
diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
index 503b521fb0d1..2ffe2afb6fcd 100644
--- a/packages/graphql/test/stubCloudTypes.ts
+++ b/packages/graphql/test/stubCloudTypes.ts
@@ -273,8 +273,8 @@ export function createCloudProjectSpecResult (config: Partial<CloudProjectSpec>)
       __typename: 'CloudProjectSpecFlakyStatus',
       severity: 'NONE',
     },
+    specRunsForRunIds: [],
     ...config,
-    specRunsForRunIds: null,
   }
 
   return indexNode(specResult)