diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 29467b57c53c..c9a09bc1386f 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -7,6 +7,7 @@ _Released 03/1/2023 (PENDING)_
 
 - It is now possible to set `hostOnly` cookies with [`cy.setCookie()`](https://docs.cypress.io/api/commands/setcookie) for a given domain. Addresses [#16856](https://github.com/cypress-io/cypress/issues/16856) and [#17527](https://github.com/cypress-io/cypress/issues/17527).
 - Added a Public API for third party component libraries to define a Framework Definition, embedding their library into the Cypress onboarding workflow. Learn more [here](https://docs.cypress.io/guides/component-testing/third-party-definitions). Implemented in [#25780](https://github.com/cypress-io/cypress/pull/25780) and closes [#25638](https://github.com/cypress-io/cypress/issues/25638).
+- Added a Debug Page tutorial slideshow for projects that are not connected to Cypress Cloud. Addresses [#25768](https://github.com/cypress-io/cypress/issues/25768).
 
 **Bugfixes:**
 
diff --git a/packages/app/package.json b/packages/app/package.json
index f3617fcc74a1..b86150e520f4 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -20,8 +20,8 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress-design/vue-icon": "^0.15.0",
-    "@cypress-design/vue-statusicon": "0.2.1",
+    "@cypress-design/vue-icon": "^0.18.0",
+    "@cypress-design/vue-statusicon": "0.2.4",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",
diff --git a/packages/app/src/assets/debug-guide-skeleton-1.png b/packages/app/src/assets/debug-guide-skeleton-1.png
new file mode 100644
index 000000000000..2abb50e0bb50
Binary files /dev/null and b/packages/app/src/assets/debug-guide-skeleton-1.png differ
diff --git a/packages/app/src/assets/debug-guide-skeleton-2.png b/packages/app/src/assets/debug-guide-skeleton-2.png
new file mode 100644
index 000000000000..44d36ccbe60b
Binary files /dev/null and b/packages/app/src/assets/debug-guide-skeleton-2.png differ
diff --git a/packages/app/src/assets/debug-guide-skeleton-3.png b/packages/app/src/assets/debug-guide-skeleton-3.png
new file mode 100644
index 000000000000..9b7957130f2f
Binary files /dev/null and b/packages/app/src/assets/debug-guide-skeleton-3.png differ
diff --git a/packages/app/src/assets/debug-guide-text-1.png b/packages/app/src/assets/debug-guide-text-1.png
new file mode 100644
index 000000000000..0c3dbeecffda
Binary files /dev/null and b/packages/app/src/assets/debug-guide-text-1.png differ
diff --git a/packages/app/src/assets/debug-guide-text-2.png b/packages/app/src/assets/debug-guide-text-2.png
new file mode 100644
index 000000000000..4a7dd371a1cd
Binary files /dev/null and b/packages/app/src/assets/debug-guide-text-2.png differ
diff --git a/packages/app/src/assets/debug-guide-text-3.png b/packages/app/src/assets/debug-guide-text-3.png
new file mode 100644
index 000000000000..3a1928737037
Binary files /dev/null and b/packages/app/src/assets/debug-guide-text-3.png differ
diff --git a/packages/app/src/components/Slideshow.vue b/packages/app/src/components/Slideshow.vue
new file mode 100644
index 000000000000..2d08e039316c
--- /dev/null
+++ b/packages/app/src/components/Slideshow.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="relative">
+    <!-- leave-to classes are marked absolute to allow the entering component to
+    animate on top of the leaving component, creating a fading animation with no thrashing -->
+    <transition
+      enter-from-class="opacity-0"
+      enter-active-class="transition duration-300 ease-out"
+      enter-to-class="opacity-100"
+      leave-from-class="opacity-100 absolute"
+      leave-active-class="transition duration-300 ease-in absolute"
+      leave-to-class="opacity-0 absolute"
+    >
+      <component
+        :is="current.component"
+        v-bind="current.props"
+        :key="step"
+        :step="step"
+        :total-steps="steps.length"
+        :increment-step="incrementStep"
+        :decrement-step="decrementStep"
+      />
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed } from 'vue'
+import type { Component } from 'vue'
+
+export type SlideshowStep = {
+  component: Component
+  props: Record<string, any>
+}
+
+const props = defineProps<{
+  modelValue: number
+  steps: SlideshowStep[]
+}>()
+const emit = defineEmits(['update:modelValue', 'slideshowComplete'])
+const step = useVModel(props, 'modelValue', emit)
+
+const current = computed(() => props.steps[step.value])
+
+const incrementStep = () => {
+  const nextStep = step.value + 1
+
+  if (nextStep < props.steps.length) {
+    step.value = nextStep
+  } else {
+    step.value = 0
+    emit('slideshowComplete')
+  }
+}
+const decrementStep = () => step.value -= 1
+
+</script>
diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
index 797b029faad5..9c2b5c2869fe 100644
--- a/packages/app/src/debug/DebugContainer.cy.tsx
+++ b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -1,9 +1,10 @@
-import { DebugSpecListGroupsFragment, DebugSpecListSpecFragment, DebugSpecListTestsFragment, DebugSpecsFragmentDoc } from '../generated/graphql-test'
+import { DebugSpecListGroupsFragment, DebugSpecListSpecFragment, DebugSpecListTestsFragment, DebugSpecsFragmentDoc, UseCohorts_DetermineCohortDocument } 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'
+import { DEBUG_SLIDESHOW } from './utils/constants'
 
 const DebugSpecVariableTypes = {
   hasNextRun: 'Boolean',
@@ -22,6 +23,10 @@ describe('<DebugContainer />', () => {
 
   describe('empty states', () => {
     const validateEmptyState = (expectedMessages: string[]) => {
+      cy.stubMutationResolver(UseCohorts_DetermineCohortDocument, (defineResult) => {
+        return defineResult({ determineCohort: { __typename: 'Cohort', name: DEBUG_SLIDESHOW.id, cohort: 'A' } })
+      })
+
       cy.mountFragment(DebugSpecsFragmentDoc, {
         variableTypes: DebugSpecVariableTypes,
         variables: {
@@ -29,6 +34,13 @@ describe('<DebugContainer />', () => {
           runNumber: 1,
           nextRunNumber: -1,
         },
+        onResult: (res) => {
+          if (res.currentProject) {
+            res.currentProject.savedState = {
+              debugSlideshowComplete: true,
+            }
+          }
+        },
         render: (gqlVal) => <DebugContainer gql={gqlVal} />,
       })
 
diff --git a/packages/app/src/debug/DebugContainer.vue b/packages/app/src/debug/DebugContainer.vue
index 01cbacbdc756..bf393c9d1b4a 100644
--- a/packages/app/src/debug/DebugContainer.vue
+++ b/packages/app/src/debug/DebugContainer.vue
@@ -163,6 +163,7 @@ fragment DebugSpecs on Query {
     }
     currentTestingType
   }
+  ..._DebugEmptyView
 }
 `
 
diff --git a/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
index 15339fe3adfe..f07e42d1b02d 100644
--- a/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
+++ b/packages/app/src/debug/empty/DebugEmptyStates.cy.tsx
@@ -4,6 +4,58 @@ 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'
+import { DebugEmptyView_RecordEventDocument, DebugEmptyView_SetPreferencesDocument, UseCohorts_DetermineCohortDocument, _DebugEmptyViewFragment, _DebugEmptyViewFragmentDoc } from '../../generated/graphql-test'
+import { DEBUG_SLIDESHOW } from '../utils/constants'
+
+function mountWithGql (component: JSX.Element, gqlOptions?: { debugSlideshowComplete?: boolean, cohort?: 'A' | 'B' }) {
+  let gql: _DebugEmptyViewFragment
+  const opts = { debugSlideshowComplete: true, cohort: 'A', ...gqlOptions }
+
+  cy.stubMutationResolver(UseCohorts_DetermineCohortDocument, (defineResult) => {
+    return defineResult({ determineCohort: { __typename: 'Cohort', name: DEBUG_SLIDESHOW.id, cohort: opts.cohort } })
+  })
+
+  const recordEvent = cy.stub().as('recordEvent')
+  const storeSlideshowComplete = cy.stub().as('storeSlideshowComplete')
+
+  cy.stubMutationResolver(DebugEmptyView_RecordEventDocument, (defineResult, args) => {
+    recordEvent(args)
+
+    return defineResult({ recordEvent: true })
+  })
+
+  cy.stubMutationResolver(DebugEmptyView_SetPreferencesDocument, (defineResult, args) => {
+    storeSlideshowComplete(args)
+
+    return defineResult({
+      setPreferences: {
+        __typename: 'Query',
+        currentProject: {
+          __typename: 'CurrentProject',
+          id: gql.currentProject?.id!,
+          savedState: {
+            debugSlideshowComplete: true,
+          },
+        },
+      },
+    })
+  })
+
+  cy.mountFragment(_DebugEmptyViewFragmentDoc, {
+    onResult: (res) => {
+      if (res.currentProject) {
+        res.currentProject.savedState = {
+          debugSlideshowComplete: opts.debugSlideshowComplete,
+        }
+
+        gql = res
+      }
+    },
+    render: () => {
+      return component
+    },
+  })
+}
 
 describe('Debug page empty states', () => {
   context('not logged in', () => {
@@ -13,12 +65,18 @@ describe('Debug page empty states', () => {
       // We need to set isLoggedIn so that CloudConnectButton shows the correct state
       loginConnectStore.setUserFlag('isLoggedIn', false)
 
-      cy.mount(<DebugNotLoggedIn />)
+      mountWithGql(<DebugNotLoggedIn />)
 
       cy.findByRole('link', { name: 'Learn about debugging CI failures in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/debug-page?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
     })
+
+    it('sends record event upon seeing slideshow', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNotLoggedIn />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.login })
+    })
   })
 
   context('no project', () => {
@@ -28,31 +86,43 @@ describe('Debug page empty states', () => {
       // We need to set isLoggedIn so that CloudConnectButton shows the correct state
       loginConnectStore.setUserFlag('isLoggedIn', true)
 
-      cy.mount(<DebugNoProject />)
+      mountWithGql(<DebugNoProject />)
 
       cy.findByRole('link', { name: 'Learn about project setup in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/adding-new-project?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
 
-      cy.viewport(600, 600)
+      cy.viewport(700, 700)
 
       cy.percySnapshot('responsive')
     })
+
+    it('sends record event upon seeing slideshow', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoProject />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.connectProject })
+    })
   })
 
   context('no runs', () => {
     it('renders', () => {
-      cy.mount(<DebugNoRuns />)
+      mountWithGql(<DebugNoRuns />)
 
       cy.findByRole('link', { name: 'Learn about recording a run to Cypress Cloud' }).should('have.attr', 'href', 'https://on.cypress.io/cypress-run-record-key?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
     })
+
+    it('sends record event upon seeing slideshow', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoRuns />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.recordRun })
+    })
   })
 
   context('loading', () => {
     it('renders', () => {
-      cy.mount(<DebugLoading />)
+      mountWithGql(<DebugLoading />)
 
       cy.percySnapshot()
     })
@@ -60,11 +130,63 @@ describe('Debug page empty states', () => {
 
   context('error', () => {
     it('renders', () => {
-      cy.mount(<DebugError />)
+      mountWithGql(<DebugError />)
 
       cy.findByRole('link', { name: 'Learn about debugging CI failures in Cypress' }).should('have.attr', 'href', 'https://on.cypress.io/debug-page?utm_source=Binary%3A+Launchpad&utm_medium=Debug+Tab&utm_campaign=Learn+More')
 
       cy.percySnapshot()
     })
+
+    it('does not render slideshow on error page', () => {
+      mountWithGql(<DebugError />, { debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('not.have.been.called')
+      cy.findByTestId('debug-default-empty-state').should('be.visible')
+      cy.findByTestId('debug-slideshow-slide').should('not.exist')
+    })
+  })
+
+  context('slideshow', () => {
+    function moveThroughSlideshow (options: { cohort: 'A' | 'B', percy?: boolean }) {
+      for (const step of [1, 2, 3]) {
+        const { title, description } = cy.i18n.debugPage.emptyStates.slideshow[`step${step}`]
+        const imageSrc = `debug-guide-${options.cohort === 'A' ? 'skeleton' : 'text'}-${step}.png`
+
+        cy.findByAltText('Debug tutorial').should('have.attr', 'src').should('include', imageSrc)
+        cy.contains('h2', title)
+        cy.contains('p', description)
+        cy.findByTestId('debug-slideshow-step').contains(`${step}/3`)
+        cy.contains('button', 'Previous').should(step === 1 ? 'not.exist' : 'be.visible')
+        if (options.percy) {
+          cy.percySnapshot(`slideshow step ${step}`)
+        }
+
+        cy.contains('button', step === 3 ? 'Done' : 'Next').click()
+      }
+
+      cy.findByTestId('debug-slideshow-slide').should('not.exist')
+    }
+
+    it('renders slideshow if debugSlideshowComplete = false', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoRuns />, { cohort: 'B', debugSlideshowComplete: false })
+      cy.get('@recordEvent').should('have.been.calledWithMatch', { campaign: DEBUG_SLIDESHOW.campaigns.recordRun })
+      moveThroughSlideshow({ cohort: 'B', percy: true })
+      cy.get('@storeSlideshowComplete').should('have.been.called')
+
+      // Can still move through slideshow, does not record events after completion
+      cy.contains('button', 'Info').click()
+      cy.get('@recordEvent').should('not.have.been.calledTwice')
+      moveThroughSlideshow({ cohort: 'B' })
+      cy.get('@storeSlideshowComplete').should('not.have.been.calledTwice')
+    })
+
+    it('renders default empty state if debugSlideshowComplete = true', () => {
+      useLoginConnectStore().setUserFlag('isLoggedIn', false)
+      mountWithGql(<DebugNoRuns />, { cohort: 'A', debugSlideshowComplete: true })
+      cy.findByTestId('debug-default-empty-state')
+
+      cy.contains('button', 'Info').click()
+      moveThroughSlideshow({ cohort: 'A', percy: true })
+    })
   })
 })
diff --git a/packages/app/src/debug/empty/DebugEmptyView.vue b/packages/app/src/debug/empty/DebugEmptyView.vue
index e83be1670183..b169f3fd826b 100644
--- a/packages/app/src/debug/empty/DebugEmptyView.vue
+++ b/packages/app/src/debug/empty/DebugEmptyView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col mx-auto my-45px max-w-640px items-center">
+  <div class="flex flex-col mx-auto my-45px max-w-680px 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">
@@ -17,36 +17,75 @@
       </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="flex">
-            <div class="bg-white border rounded-md flex border-gray-100 py-4px px-8px text-14px text-gray-700 gap-8px items-center">
-              <i-cy-status-failed_x12 class="h-12px w-12px" />
-              <span>-</span>
-              <div
-                v-if="exampleTestName"
-                class="border-l border-gray-100 pl-8px"
-              >
-                {{ exampleTestName }}
-              </div>
-            </div>
-          </div>
-        </template>
-      </DebugTestLoadingContainer>
-    </div>
+    <Slideshow
+      v-if="step !== undefined && steps"
+      v-model="step"
+      :steps="steps"
+      class="my-40px w-full"
+      @slideshow-complete="saveSlideshowComplete"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import DebugTestLoadingContainer from './DebugTestLoadingContainer.vue'
-import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import { computed, ref, watch } from 'vue'
+import { gql, useMutation, useQuery } from '@urql/vue'
+import { isNumber } from 'lodash'
+import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 import { getUtmSource } from '@packages/frontend-shared/src/utils/getUtmSource'
+import { useI18n } from '@packages/frontend-shared/src/locales/i18n'
+import { useCohorts } from '@packages/frontend-shared/src/gql-components/composables/useCohorts'
+
+import DebugSlide from './DebugSlide.vue'
+import Slideshow, { SlideshowStep } from '../../components/Slideshow.vue'
+import { DebugSlideshowCampaigns, DEBUG_SLIDESHOW } from '../utils/constants'
+import { DebugEmptyViewDocument, DebugEmptyView_SetPreferencesDocument, DebugEmptyView_RecordEventDocument } from '../../generated/graphql'
+import DebugSkeleton from './DebugSkeleton.vue'
+
+import debugGuideSkeleton1 from '../../assets/debug-guide-skeleton-1.png'
+import debugGuideSkeleton2 from '../../assets/debug-guide-skeleton-2.png'
+import debugGuideSkeleton3 from '../../assets/debug-guide-skeleton-3.png'
+import debugGuideText1 from '../../assets/debug-guide-text-1.png'
+import debugGuideText2 from '../../assets/debug-guide-text-2.png'
+import debugGuideText3 from '../../assets/debug-guide-text-3.png'
+
+gql`
+fragment _DebugEmptyView on Query {
+  currentProject {
+    id
+    savedState
+  }
+}
+`
+
+// The main query of Debug.vue isn't guaranteed to have loaded for these empty states
+// as it is gated by having a valid runId. We have to make a separate query rather than tack
+// on to the existing fragment.
+gql`
+query DebugEmptyView {
+  ..._DebugEmptyView
+}
+`
+
+gql`
+mutation DebugEmptyView_SetPreferences ($value: String!) {
+  setPreferences (value: $value, type: project) {
+    ..._DebugEmptyView
+  }
+}`
+
+gql`
+mutation DebugEmptyView_RecordEvent($campaign: String!, $messageId: String!, $medium: String!, $cohort: String) {
+  recordEvent(campaign: $campaign, messageId: $messageId, medium: $medium, cohort: $cohort)
+}
+`
+
+const query = useQuery({ query: DebugEmptyViewDocument })
+const slideshowCompleteMutation = useMutation(DebugEmptyView_SetPreferencesDocument)
+const slideshowRecordEventMutation = useMutation(DebugEmptyView_RecordEventDocument)
+
+const { t } = useI18n()
 
 const props = defineProps<{
   title: string
@@ -54,6 +93,7 @@ const props = defineProps<{
   exampleTestName?: string
   helpLinkText?: string
   helpLinkHref?: string
+  slideshowCampaign?: DebugSlideshowCampaigns // Not all flows need to show the slideshow (Error page)
 }>()
 
 const helpLink = getUrlWithParams({
@@ -65,10 +105,94 @@ const helpLink = getUrlWithParams({
   },
 })
 
-const loadingRows = [
-  ['w-40px', 'w-[40%]'],
-  ['w-40px', 'w-[50%]'],
-  ['w-40px', 'w-[65%]'],
-]
+const step = ref<number>()
+
+const cohortBuilder = useCohorts()
+const selectedCohort = cohortBuilder.getCohort({
+  name: DEBUG_SLIDESHOW.id,
+  options: [{ cohort: 'A', value: '' }, { cohort: 'B', value: '' }],
+})
+
+const steps = computed<SlideshowStep[] | undefined>(() => {
+  if (!selectedCohort.value?.cohort) return undefined
+
+  const slideshowImages = selectedCohort.value.cohort === 'A'
+    ? [debugGuideSkeleton1, debugGuideSkeleton2, debugGuideSkeleton3]
+    : [debugGuideText1, debugGuideText2, debugGuideText3]
+
+  return [
+    {
+      component: DebugSkeleton,
+      props: {
+        exampleTestName: props.exampleTestName,
+        slideshowCampaign: props.slideshowCampaign,
+      },
+    },
+    {
+      component: DebugSlide,
+      props: {
+        img: slideshowImages[0],
+        title: t('debugPage.emptyStates.slideshow.step1.title'),
+        description: t('debugPage.emptyStates.slideshow.step1.description'),
+      },
+    },
+    {
+      component: DebugSlide,
+      props: {
+        img: slideshowImages[1],
+        title: t('debugPage.emptyStates.slideshow.step2.title'),
+        description: t('debugPage.emptyStates.slideshow.step2.description'),
+      },
+    },
+    {
+      component: DebugSlide,
+      props: {
+        img: slideshowImages[2],
+        title: t('debugPage.emptyStates.slideshow.step3.title'),
+        description: t('debugPage.emptyStates.slideshow.step3.description'),
+      },
+    },
+  ]
+})
+
+const savedState = computed(() => {
+  return query.data.value?.currentProject?.savedState
+})
+
+watch([savedState, selectedCohort], () => {
+  // If we've already set a step we can return early
+  if (isNumber(step.value)) return
+
+  // If the parent doesn't want to show the slideshow or they've already completed the slideshow, show default
+  if (!props.slideshowCampaign || savedState.value.debugSlideshowComplete) {
+    step.value = 0
+
+    return
+  }
+
+  // These are async so we need to wait on them both to be defined
+  if (selectedCohort.value && savedState.value) {
+    step.value = 1
+    // This is the first time the user is seeing the slideshow within this context (props.slideshowCampaign)
+    slideshowRecordEventMutation.executeMutation({
+      campaign: props.slideshowCampaign,
+      medium: DEBUG_SLIDESHOW.medium,
+      cohort: selectedCohort.value.cohort,
+      messageId: DEBUG_SLIDESHOW.id,
+    })
+  }
+})
+
+function saveSlideshowComplete () {
+  if (!savedState.value.debugSlideshowComplete) {
+    slideshowCompleteMutation.executeMutation({ value: JSON.stringify({ debugSlideshowComplete: true }) })
+  }
+}
 
 </script>
+
+<style>
+.debug-empty-view-info-button-override {
+  background-color: white;
+}
+</style>
diff --git a/packages/app/src/debug/empty/DebugNoProject.vue b/packages/app/src/debug/empty/DebugNoProject.vue
index 8689b49889a1..125351dde6ea 100644
--- a/packages/app/src/debug/empty/DebugNoProject.vue
+++ b/packages/app/src/debug/empty/DebugNoProject.vue
@@ -4,6 +4,7 @@
     :description="t('debugPage.emptyStates.reviewRerunAndDebug')"
     :example-test-name="t('debugPage.emptyStates.noProjectTestMessage')"
     :help-link-text="t('debugPage.emptyStates.learnAboutProjectSetup')"
+    :slideshow-campaign="DEBUG_SLIDESHOW.campaigns.connectProject"
     help-link-href="https://on.cypress.io/adding-new-project"
   >
     <template #cta>
@@ -16,6 +17,7 @@
 import DebugEmptyView from './DebugEmptyView.vue'
 import { useI18n } from '@cy/i18n'
 import CloudConnectButton from '../../runs/CloudConnectButton.vue'
+import { DEBUG_SLIDESHOW } from '../utils/constants'
 
 const { t } = useI18n()
 
diff --git a/packages/app/src/debug/empty/DebugNoRuns.vue b/packages/app/src/debug/empty/DebugNoRuns.vue
index eaded505810a..9ba3cd00d165 100644
--- a/packages/app/src/debug/empty/DebugNoRuns.vue
+++ b/packages/app/src/debug/empty/DebugNoRuns.vue
@@ -4,6 +4,7 @@
     :description="t('debugPage.emptyStates.almostThere')"
     :example-test-name="t('debugPage.emptyStates.noRunsTestMessage')"
     :help-link-text="t('debugPage.emptyStates.learnAboutRecording')"
+    :slideshow-campaign="DEBUG_SLIDESHOW.campaigns.recordRun"
     help-link-href="https://on.cypress.io/cypress-run-record-key"
   >
     <template #cta>
@@ -16,6 +17,7 @@
 import DebugEmptyView from './DebugEmptyView.vue'
 import { useI18n } from '@cy/i18n'
 import RecordPromptAdapter from '@cy/gql-components/RecordPromptAdapter.vue'
+import { DEBUG_SLIDESHOW } from '../utils/constants'
 
 const { t } = useI18n()
 
diff --git a/packages/app/src/debug/empty/DebugNotLoggedIn.vue b/packages/app/src/debug/empty/DebugNotLoggedIn.vue
index f1cc82732a7e..3c93a88e6ad2 100644
--- a/packages/app/src/debug/empty/DebugNotLoggedIn.vue
+++ b/packages/app/src/debug/empty/DebugNotLoggedIn.vue
@@ -4,6 +4,7 @@
     :description="t('debugPage.emptyStates.reviewRerunAndDebug')"
     :example-test-name="t('debugPage.emptyStates.notLoggedInTestMessage')"
     :help-link-text="t('debugPage.emptyStates.learnAboutDebugging')"
+    :slideshow-campaign="DEBUG_SLIDESHOW.campaigns.login"
     help-link-href="https://on.cypress.io/debug-page"
   >
     <template #cta>
@@ -16,6 +17,7 @@
 import DebugEmptyView from './DebugEmptyView.vue'
 import { useI18n } from '@cy/i18n'
 import CloudConnectButton from '../../runs/CloudConnectButton.vue'
+import { DEBUG_SLIDESHOW } from '../utils/constants'
 
 const { t } = useI18n()
 
diff --git a/packages/app/src/debug/empty/DebugSkeleton.vue b/packages/app/src/debug/empty/DebugSkeleton.vue
new file mode 100644
index 000000000000..191222172de0
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugSkeleton.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="flex flex-col w-full items-center"
+    data-cy="debug-default-empty-state"
+  >
+    <DebugTestLoadingContainer
+      width-class="w-full"
+      dot-class="icon-light-gray-200"
+      :rows="loadingRows"
+    >
+      <template #header>
+        <div class="flex justify-between">
+          <div class="bg-white border rounded-md flex border-gray-100 py-4px px-8px text-14px text-gray-700 gap-8px items-center">
+            <i-cy-status-failed_x12 class="h-12px w-12px" />
+            <span>-</span>
+            <div
+              v-if="exampleTestName"
+              class="border-l border-gray-100 pl-8px"
+            >
+              {{ exampleTestName }}
+            </div>
+          </div>
+          <!-- TODO: Make a PR to Design System for this icon -->
+          <Button
+            v-if="slideshowCampaign"
+            variant="outline"
+            class="debug-empty-view-info-button-override"
+            :prefix-icon="IconObjectTassel"
+            @click="incrementStep"
+          >
+            Info
+          </Button>
+        </div>
+      </template>
+    </DebugTestLoadingContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DebugTestLoadingContainer from './DebugTestLoadingContainer.vue'
+import Button from '@packages/frontend-shared/src/components/Button.vue'
+import type { DebugSlideshowCampaigns } from '../utils/constants'
+import { IconObjectTassel } from '@cypress-design/vue-icon'
+
+defineProps<{
+  exampleTestName?: string
+  slideshowCampaign?: DebugSlideshowCampaigns
+  incrementStep: () => void
+}>()
+
+const loadingRows = [
+  ['w-40px', 'w-[40%]'],
+  ['w-40px', 'w-[50%]'],
+  ['w-40px', 'w-[65%]'],
+]
+</script>
diff --git a/packages/app/src/debug/empty/DebugSlide.vue b/packages/app/src/debug/empty/DebugSlide.vue
new file mode 100644
index 000000000000..13e5178999fe
--- /dev/null
+++ b/packages/app/src/debug/empty/DebugSlide.vue
@@ -0,0 +1,76 @@
+<template>
+  <div
+    class="w-680px"
+    data-cy="debug-slideshow-slide"
+  >
+    <img
+      :src="img"
+      :alt="t('debugPage.emptyStates.slideshow.imgAlt')"
+    >
+    <div class="rounded-b-md bg-purple-500 text-white p-16px">
+      <h2 class="font-semibold">
+        {{ title }}
+      </h2>
+      <p class="text-white text-sm mb-16px text-opacity-70">
+        {{ description }}
+      </p>
+      <div class="flex justify-between">
+        <span data-cy="debug-slideshow-step">{{ step }}/{{ totalSteps -1 }}</span>
+        <div class="flex gap-8px">
+          <Button
+            v-if="step > 1"
+            variant="outline"
+            class="flex slide-override"
+            :prefix-icon="IconChevronLeftSmall"
+            @click="decrementStep"
+          >
+            {{ t('debugPage.emptyStates.slideshow.controls.previous') }}
+          </Button>
+          <Button
+            v-if="step < (totalSteps - 1)"
+            variant="outline"
+            class="slide-override"
+            :suffix-icon="IconChevronRightSmall"
+            @click="incrementStep"
+          >
+            {{ t('debugPage.emptyStates.slideshow.controls.next') }}
+          </Button>
+          <!-- Set width on this element to remove thrashing between "Done" and "Next" lengths  -->
+          <Button
+            v-else
+            variant="outline"
+            class="w-80px slide-override"
+            @click="incrementStep"
+          >
+            {{ t('debugPage.emptyStates.slideshow.controls.done') }}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@cy/components/Button.vue'
+import { IconChevronLeftSmall, IconChevronRightSmall } from '@cypress-design/vue-icon'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+defineProps<{
+  img: string
+  title: string
+  description: string
+  step: number
+  totalSteps: number
+  incrementStep: () => void
+  decrementStep: () => void
+}>()
+
+</script>
+
+<style>
+button.slide-override {
+  color: white !important
+}
+</style>
diff --git a/packages/app/src/debug/empty/DebugTestLoadingContainer.vue b/packages/app/src/debug/empty/DebugTestLoadingContainer.vue
index 4bc676fe7b1c..a2451b8362a4 100644
--- a/packages/app/src/debug/empty/DebugTestLoadingContainer.vue
+++ b/packages/app/src/debug/empty/DebugTestLoadingContainer.vue
@@ -1,6 +1,6 @@
 <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="border-t border-l border-r rounded-t-md bg-gray-50 border-0 border-gray-100 p-16px"
     :class="widthClass"
   >
     <slot name="header" />
@@ -8,7 +8,7 @@
   <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="bg-white border flex border-b-0 border-gray-100 p-16px items-center overflow-hidden last:border-b last:rounded-b-md"
     :class="widthClass"
   >
     <div>
diff --git a/packages/app/src/debug/utils/constants.ts b/packages/app/src/debug/utils/constants.ts
new file mode 100644
index 000000000000..5cbf8a446c2c
--- /dev/null
+++ b/packages/app/src/debug/utils/constants.ts
@@ -0,0 +1,13 @@
+type ValueOf<T> = T[keyof T]
+
+export const DEBUG_SLIDESHOW = {
+  id: 'iatr_debug_slideshow',
+  campaigns: {
+    login: 'Debug Login Empty State',
+    connectProject: 'Debug Connect Project Empty State',
+    recordRun: 'Debug Record Run Empty State',
+  },
+  medium: 'Debug tab',
+} as const
+
+export type DebugSlideshowCampaigns = ValueOf<typeof DEBUG_SLIDESHOW['campaigns']>
diff --git a/packages/frontend-shared/src/assets/icons/tassle_x16.svg b/packages/frontend-shared/src/assets/icons/tassle_x16.svg
new file mode 100644
index 000000000000..689481482f97
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/tassle_x16.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 3L15 6L13 6.85714V8.9689C13 10.1956 12.2531 11.2987 11.1142 11.7543L8.74278 12.7029C8.26596 12.8936 7.73404 12.8936 7.25722 12.7029L4.88583 11.7543C3.74685 11.2987 3 10.1956 3 8.9689V6.85714L1 6L8 3Z" fill="#D0D2E0"/>
+<path d="M13 6.85714L15 6L8 3L1 6L3 6.85714M13 6.85714V8.9689C13 10.1956 12.2531 11.2987 11.1142 11.7543L8.74278 12.7029C8.26596 12.8936 7.73404 12.8936 7.25722 12.7029L4.88583 11.7543C3.74685 11.2987 3 10.1956 3 8.9689V6.85714M13 6.85714L8 9L3 6.85714" stroke="#4956E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 6V9" stroke="#1B1E2E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index fd85798eb6bc..657458484610 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -697,7 +697,27 @@
       "ensureGitSetupCorrectly": "Cypress uses Git to associate runs with your local state. Please ensure that version control is set up correctly.",
       "learnAboutRecording": "Learn about recording a run to Cypress Cloud",
       "learnAboutDebugging": "Learn about debugging CI failures in Cypress",
-      "learnAboutProjectSetup": "Learn about project setup in Cypress"
+      "learnAboutProjectSetup": "Learn about project setup in Cypress",
+      "slideshow": {
+        "step1": {
+          "title": "Review how many tests failed during a CI test run",
+          "description": "The Debug page shows the latest completed test run for your current checked out commit."
+        },
+        "step2": {
+          "title": "Check if failed CI test runs also fail locally",
+          "description": "Use the Test Runner to run only the tests that failed in your last recorded run."
+        },
+        "step3": {
+          "title": "Locally debug failed test runs with visual artifacts",
+          "description": "Easily review screenshots, videos and logs from your tests."
+        },
+        "imgAlt": "Debug tutorial",
+        "controls": {
+          "previous": "Previous",
+          "next": "Next",
+          "done": "Done"
+        }
+      }
     },
     "pending": {
       "title": "Testing",
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 19f2426f3271..3da5f8e96a9e 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -1405,6 +1405,7 @@ type LocalSettings {
 """local setting preferences"""
 type LocalSettingsPreferences {
   autoScrollingEnabled: Boolean
+  debugSlideshowComplete: Boolean
   isSideNavigationOpen: Boolean
   isSpecsListOpen: Boolean
   majorVersionWelcomeDismissed: JSON
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-LocalSettings.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-LocalSettings.ts
index 99a7f1bffc47..982a2e18ca95 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-LocalSettings.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-LocalSettings.ts
@@ -32,6 +32,8 @@ export const LocalSettingsPreferences = objectType({
         return Boolean(ctx.coreData.cliBrowser)
       },
     })
+
+    t.boolean('debugSlideshowComplete')
   },
 })
 
diff --git a/packages/types/src/preferences.ts b/packages/types/src/preferences.ts
index 1d0f3de1ce88..bc3d8d641914 100644
--- a/packages/types/src/preferences.ts
+++ b/packages/types/src/preferences.ts
@@ -35,6 +35,7 @@ export const allowedKeys: Readonly<Array<keyof AllowedState>> = [
   'isSideNavigationOpen',
   'lastBrowser',
   'majorVersionWelcomeDismissed',
+  'debugSlideshowComplete',
 ] as const
 
 type Maybe<T> = T | null | undefined
@@ -69,4 +70,5 @@ export type AllowedState = Partial<{
   testingType: 'e2e' | 'component'
   lastBrowser: { name: string, channel: string }
   majorVersionWelcomeDismissed: Maybe<MajorVersionWelcomeDismissed>
+  debugSlideshowComplete: Maybe<boolean>
 }>
diff --git a/yarn.lock b/yarn.lock
index 43af4f16c77d..461d15133e96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2220,25 +2220,25 @@
     windicss "^3.5.1"
     windicss-webpack-plugin "^1.6.10"
 
-"@cypress-design/icon-registry@^0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.17.0.tgz#ec8f30ca6f5f9178ca00f81d4d2cde9baeba23a3"
-  integrity sha512-DsvyEIdX6mU5rEMQWbKFq3MMXyw86w0mS1MLp/REU5Q57AICkkNyPVZhEpM8DCZ1UNTfQsr3TXoKCLv38KrhhA==
+"@cypress-design/icon-registry@^0.20.0":
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.20.0.tgz#d7b5609bb22e2332e99ae169486b81a7e156c195"
+  integrity sha512-uFOPNZzLxWxM4GnRSUHpgRZKgnaypaTJipQqaROhSx7gNC6rkHD+MbgptqCAW4WknTKCRzRXlCT8DtXc3NPfyg==
 
-"@cypress-design/vue-icon@^0.15.0":
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.15.0.tgz#54cea90fe0299ade757c885f89dbbc61b4361da0"
-  integrity sha512-UL0qN5PX2EA34NC3SySM2gDMAGA8rOhmJhaoR46+7cawjXcI+3Ecn3/fGH+vbfRB/VwBKMwOimfh+gh7SnJWPg==
+"@cypress-design/vue-icon@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.18.0.tgz#bc4803094e94e22007ba513b5f3cd35d129e02b0"
+  integrity sha512-jFjWA1Jumih7W2c/a2M3LUJ8cVxf4nswHnZW9+MeW0fPYlhAmRcZ69kNPsP6Csw1vK8LmbUDu0lsP04v9ntoqA==
   dependencies:
-    "@cypress-design/icon-registry" "^0.17.0"
+    "@cypress-design/icon-registry" "^0.20.0"
 
-"@cypress-design/vue-statusicon@0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.2.1.tgz#0a2c6023b0cbb04d4c0e55e7ede0785311dbbe1a"
-  integrity sha512-xPdfp4qOqiBvm2ZDitgM83ao+M5kKMsBLmNX0vrSg3ihluecZ69kN9FQj77i0zhxk0WAx8XE7R2k6LH2Ouxkmw==
+"@cypress-design/vue-statusicon@0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.2.4.tgz#d485694becb497b20f70d4d141fd8a440f5e0188"
+  integrity sha512-i9pEmwYtjdKz/vppcnkQwE30kEnj47jI/E5FggOLcWVahKCQJJtfwhZfoaT/PLaIVdEUFL8iTumKlLiURdxElA==
   dependencies:
-    "@cypress-design/icon-registry" "^0.17.0"
-    "@cypress-design/vue-icon" "^0.15.0"
+    "@cypress-design/icon-registry" "^0.20.0"
+    "@cypress-design/vue-icon" "^0.18.0"
 
 "@cypress/commit-info@2.2.0":
   version "2.2.0"