diff --git a/.vscode/cspell.json b/.vscode/cspell.json
index 5649488074b9..17e85156931c 100644
--- a/.vscode/cspell.json
+++ b/.vscode/cspell.json
@@ -37,6 +37,7 @@
         "topnav",
         "unconfigured",
         "unplugin",
+        "unref",
         "unrunnable",
         "unstaged",
         "urql",
@@ -48,4 +49,4 @@
     ],
     "ignoreWords": [],
     "import": []
-}
\ No newline at end of file
+}
diff --git a/graphql-codegen.yml b/graphql-codegen.yml
index 496238eb8d1d..e2b11c51214b 100644
--- a/graphql-codegen.yml
+++ b/graphql-codegen.yml
@@ -18,7 +18,7 @@ vueOperations: &vueOperations
     - 'typescript-operations'
     - 'typed-document-node':
         # Intentionally specified under typed-document-node rather than top level config,
-        # becuase we don't want it flattening the types for the operations
+        # because we don't want it flattening the types for the operations
         flattenGeneratedTypes: true
 
 vueTesting: &vueTesting
@@ -122,9 +122,10 @@ generates:
   './packages/app/src/generated/graphql-test.ts':
     documents: 
       - './packages/app/src/**/*.{vue,ts,tsx,js,jsx}'
-      - './packages/frontend-shared/src/**/*.{vue,ts,tsx,js,jsx}'
+      - './packages/frontend-shared/src/gql-components/**/*.{vue,ts,tsx,js,jsx}'
     <<: *vueTesting
 
   './packages/frontend-shared/src/generated/graphql-test.ts':
-    documents: './packages/frontend-shared/src/gql-components/**/*.{vue,ts,tsx,js,jsx}'
+    documents: 
+      - './packages/frontend-shared/src/gql-components/**/*.{vue,ts,tsx,js,jsx}'
     <<: *vueTesting
diff --git a/packages/app/cypress/e2e/runs.cy.ts b/packages/app/cypress/e2e/runs.cy.ts
index c03d84a13489..263a65218663 100644
--- a/packages/app/cypress/e2e/runs.cy.ts
+++ b/packages/app/cypress/e2e/runs.cy.ts
@@ -116,6 +116,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
           obj.result.data.cloudViewer.organizations.nodes = []
         }
 
+        if (obj.result.data?.cloudViewer?.firstOrganization?.nodes) {
+          obj.result.data.cloudViewer.firstOrganization.nodes = []
+        }
+
         return obj.result
       })
 
@@ -150,8 +154,14 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('component')
 
       cy.remoteGraphQLIntercept(async (obj) => {
-        if (obj?.result?.data?.cloudViewer?.organizations?.nodes) {
-          obj.result.data.cloudViewer.organizations.nodes = []
+        if ((obj.operationName !== 'CreateCloudOrgModal_CloudOrganizationsCheck_refreshOrganizations_cloudViewer')) {
+          if (obj.result.data?.cloudViewer?.organizations?.nodes) {
+            obj.result.data.cloudViewer.organizations.nodes = []
+          }
+
+          if (obj.result.data?.cloudViewer?.firstOrganization?.nodes) {
+            obj.result.data.cloudViewer.firstOrganization.nodes = []
+          }
         }
 
         return obj.result
@@ -181,7 +191,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('component')
 
       cy.remoteGraphQLIntercept(async (obj, testState) => {
-        if (obj.operationName === 'CloudConnectModals_RefreshCloudViewer_refreshCloudViewer_cloudViewer') {
+        if (obj.operationName === 'LoginConnectModals_LoginConnectModalsQuery_cloudViewer') {
           testState.refetchCalled = true
         }
 
@@ -312,7 +322,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       moveToRunsPage()
       cy.findByText(defaultMessages.runs.connect.buttonProject).click()
-      cy.get('button').contains(defaultMessages.runs.connect.modal.selectProject.createProject).click()
+      cy.contains('button', defaultMessages.runs.connect.modal.selectProject.createProject).click()
       cy.findByText(defaultMessages.runs.connectSuccessAlert.title).should('be.visible')
 
       cy.withCtx(async (ctx) => {
@@ -351,7 +361,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.get('[href="#/runs"]').click()
       cy.findByText(defaultMessages.runs.connect.buttonProject).click()
-      cy.get('button').contains(defaultMessages.runs.connect.modal.selectProject.createProject).click()
+      cy.contains('button', defaultMessages.runs.connect.modal.selectProject.createProject).click()
 
       cy.get('[data-cy="alert"]').within(() => {
         cy.contains(defaultMessages.runs.connect.errors.baseError.title)
@@ -386,7 +396,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.get('[href="#/runs"]').click()
       cy.findByText(defaultMessages.runs.connect.buttonProject).click()
-      cy.get('button').contains(defaultMessages.runs.connect.modal.selectProject.createProject).click()
+      cy.contains('button', defaultMessages.runs.connect.modal.selectProject.createProject).click()
 
       cy.get('[data-cy="alert"]').within(() => {
         cy.contains(defaultMessages.runs.connect.errors.internalServerError.title)
@@ -417,7 +427,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         }
 
         if (obj.result.data?.cloudViewer?.organizations?.nodes) {
-          const projectNodes = obj.result.data?.cloudViewer.organizations.nodes[0].projects.nodes
+          const projectNodes = obj.result.data.cloudViewer.organizations.nodes[0].projects.nodes
 
           projectNodes.push({
             __typename: 'CloudProject',
@@ -440,9 +450,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     })
 
     it('opens Connect Project modal after clicking Reconnect Project button', () => {
-      cy.findByText(defaultMessages.runs.errors.notFound.button).should('be.visible').click()
+      cy.findByText(defaultMessages.runs.errors.notFound.button).click()
+
       cy.get('[aria-modal="true"]').should('exist')
-      cy.get('[data-cy="selectProject"] button').should('have.text', 'Mock Project')
+      cy.contains('[data-cy="selectProject"] button', 'Mock Project')
       cy.get('[data-cy="connect-project"]').click()
       cy.get('[data-cy="runs"]', { timeout: 7500 })
     })
@@ -510,12 +521,13 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
     it('updates the button text when the request access button is clicked', () => {
       cy.remoteGraphQLIntercept(async (obj, testState) => {
-        if (obj.operationName === 'Runs_currentProject_cloudProject_cloudProjectBySlug') {
+        if (obj.operationName?.includes('cloudProject_cloudProjectBySlug')) {
           const proj = obj!.result!.data!.cloudProjectBySlug
 
           proj.__typename = 'CloudProjectUnauthorized'
           proj.message = 'Cloud Project Unauthorized'
           proj.hasRequestedAccess = false
+
           testState.project = proj
         } else if (obj.operationName === 'RunsErrorRenderer_RequestAccess_cloudProjectRequestAccess') {
           obj!.result!.data!.cloudProjectRequestAccess = {
@@ -696,7 +708,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.loginUser()
       cy.remoteGraphQLIntercept((obj) => {
-        if (obj.operationName === 'Runs_currentProject_cloudProject_cloudProjectBySlug') {
+        if (obj.operationName?.includes('cloudProject_cloudProjectBySlug')) {
           cloudData = obj.result
           obj.result = {}
 
@@ -714,7 +726,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       // cy.percySnapshot() // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
 
       cy.remoteGraphQLIntercept((obj) => {
-        if (obj.operationName === 'Runs_currentProject_cloudProject_cloudProjectBySlug') {
+        if (obj.operationName?.includes('cloudProject_cloudProjectBySlug')) {
           return cloudData
         }
 
@@ -732,10 +744,6 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('component')
     })
 
-    afterEach(() => {
-      cy.goOnline()
-    })
-
     it('shows alert warning if runs have been returned already', () => {
       cy.loginUser()
       cy.visitApp()
@@ -773,11 +781,15 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.openProject('component-tests', ['--config-file', 'cypressWithoutProjectId.config.js'])
       cy.startAppServer('component')
 
-      cy.remoteGraphQLIntercept(async (obj) => {
+      cy.remoteGraphQLIntercept((obj) => {
         if (obj.result.data?.cloudViewer?.organizations?.nodes) {
           obj.result.data.cloudViewer.organizations.nodes = []
         }
 
+        if (obj.result.data?.cloudViewer?.firstOrganization?.nodes) {
+          obj.result.data.cloudViewer.firstOrganization.nodes = []
+        }
+
         return obj.result
       })
 
@@ -845,7 +857,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.openProject('component-tests')
       cy.startAppServer('component')
       cy.loginUser()
-      cy.remoteGraphQLIntercept((obj, testState) => {
+      cy.remoteGraphQLIntercept((obj) => {
         if (obj.result.data?.cloudProjectBySlug?.runs?.nodes.length) {
           obj.result.data.cloudProjectBySlug.runs.nodes.map((run) => {
             run.status = 'RUNNING'
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 6d99a9b6a384..7a661af52f78 100644
--- a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
@@ -160,7 +160,7 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
   })
 
   context('when no runs are recorded', () => {
-    beforeEach(() => {
+    it('shows placeholders for all visible specs', { defaultCommandTimeout: 6000 }, () => {
       cy.loginUser()
 
       cy.remoteGraphQLIntercept(async (obj) => {
@@ -181,10 +181,6 @@ describe('App/Cloud Integration - Latest runs and Average duration', { viewportW
       })
 
       cy.visitApp()
-      cy.findByTestId('sidebar-link-specs-page').click()
-    })
-
-    it('shows placeholders for all visible specs', () => {
       allVisibleSpecsShouldBePlaceholders()
     })
   })
diff --git a/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts
index 41f607621d12..1d4365597b50 100644
--- a/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts
+++ b/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts
@@ -1,7 +1,7 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import type { SinonStub } from 'sinon'
 
-describe('App: Runs', { viewportWidth: 1200 }, () => {
+describe('CreateCloudOrgModalSubscription', { viewportWidth: 1200 }, () => {
   beforeEach(() => {
     cy.scaffoldProject('component-tests')
     cy.openProject('component-tests')
@@ -22,6 +22,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
           obj.result.data.cloudViewer.organizations.nodes = []
         }
 
+        if (obj.result.data?.cloudViewer?.firstOrganization?.nodes) {
+          obj.result.data.cloudViewer.firstOrganization.nodes = []
+        }
+
         return obj.result
       })
 
diff --git a/packages/app/cypress/e2e/top-nav.cy.ts b/packages/app/cypress/e2e/top-nav.cy.ts
index 330e5f0796b1..e65a10d484f7 100644
--- a/packages/app/cypress/e2e/top-nav.cy.ts
+++ b/packages/app/cypress/e2e/top-nav.cy.ts
@@ -453,6 +453,17 @@ describe('App Top Nav Workflows', () => {
           cy.openProject('component-tests', ['--config-file', 'cypressWithoutProjectId.config.js'])
           cy.startAppServer()
           cy.visitApp()
+          cy.remoteGraphQLIntercept(async (obj) => {
+            if (obj.result.data?.cloudViewer) {
+              obj.result.data.cloudViewer.organizations = {
+                __typename: 'CloudOrganizationConnection',
+                id: 'test',
+                nodes: [{ __typename: 'CloudOrganization', id: '987' }],
+              }
+            }
+
+            return obj.result
+          })
 
           mockLogInActionsForUser(mockUser)
           logIn({ expectedNextStepText: 'Connect project', displayName: mockUser.name })
@@ -494,6 +505,24 @@ describe('App Top Nav Workflows', () => {
           cy.findByTestId('app-header-bar').findByTestId('user-avatar-title').should('be.visible')
         })
 
+        it('if the project has no runs, shows "record your first run" prompt after clicking', () => {
+          cy.remoteGraphQLIntercept((obj) => {
+            if (obj.result?.data?.cloudProjectBySlug?.runs?.nodes?.length) {
+              obj.result.data.cloudProjectBySlug.runs.nodes = []
+            }
+
+            return obj.result
+          })
+
+          mockLogInActionsForUser(mockUserNoName)
+
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUserNoName.email })
+
+          cy.contains('[data-cy=standard-modal] h2', defaultMessages.specPage.banners.record.title).should('be.visible')
+          cy.contains('[data-cy=standard-modal]', defaultMessages.specPage.banners.record.content).should('be.visible')
+          cy.contains('button', 'Copy').should('be.visible')
+        })
+
         it('shows correct error when browser cannot launch', () => {
           cy.withCtx((ctx, o) => {
             o.sinon.stub(ctx._apis.authApi, 'logIn').callsFake(async (onMessage) => {
diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
index d76b3823321d..c0e8a339e7fe 100644
--- a/packages/app/src/App.vue
+++ b/packages/app/src/App.vue
@@ -4,13 +4,31 @@
       :is="Component"
     />
   </router-view>
+
+  <template v-if="route.name && route.name !== 'SpecRunner'">
+    <!--
+      checking for existence of `route.name` here to avoid a flash
+      of these components if the page is refreshed on the SpecRunner route
+    -->
+    <CloudViewerAndProject />
+    <LoginConnectModals />
+  </template>
 </template>
 
+<script setup lang="ts">
+import LoginConnectModals from '@cy/gql-components/LoginConnectModals.vue'
+
+import { useRoute } from 'vue-router'
+import CloudViewerAndProject from '@packages/frontend-shared/src/gql-components/CloudViewerAndProject.vue'
+const route = useRoute()
+
+</script>
+
 <style lang="scss">
 html,
 body,
 #app {
-  @apply h-full bg-white;
+  @apply bg-white h-full;
 }
 
 @font-face {
diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index c83cbf74f9c4..0689d0636085 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -9,14 +9,12 @@
       v-if="renderSidebar"
       class="row-span-full"
     />
-
     <HeaderBar
       v-if="showHeader"
       :show-browsers="true"
       :page-name="currentRoute.name?.toString()"
       data-cy="app-header-bar"
       :allow-automatic-prompt-open="true"
-      @connect-project="handleConnectProject"
     />
     <div
       v-if="query.data.value?.baseError || query.data.value?.currentProject?.isLoadingConfigFile || query.data.value?.currentProject?.isLoadingNodeEvents"
@@ -49,16 +47,6 @@
           <component :is="Component" />
         </transition>
       </router-view>
-      <!-- "Nav" is the correct UTM medium below because
-        this is only opened by event emitted from the header bar-->
-      <CloudConnectModals
-        v-if="showConnectDialog && cloudModalQuery.data.value"
-        :show="showConnectDialog"
-        :gql="cloudModalQuery.data.value"
-        utm-medium="Nav"
-        @cancel="showConnectDialog = false"
-        @success="showConnectDialog = false"
-      />
     </main>
   </div>
 </template>
@@ -69,12 +57,11 @@ import SidebarNavigation from '../navigation/SidebarNavigation.vue'
 import HeaderBar from '@cy/gql-components/HeaderBar.vue'
 import BaseError from '@cy/gql-components/error/BaseError.vue'
 import Spinner from '@cy/components/Spinner.vue'
-import CloudConnectModals from '../runs/modals/CloudConnectModals.vue'
 
 import { useRoute } from 'vue-router'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
-import { MainApp_CloudConnectModalsQueryDocument, MainAppQueryDocument, MainApp_ResetErrorsAndLoadConfigDocument } from '../generated/graphql'
+import { MainAppQueryDocument, MainApp_ResetErrorsAndLoadConfigDocument } from '../generated/graphql'
 
 gql`
 fragment MainAppQueryData on Query {
@@ -96,12 +83,6 @@ query MainAppQuery {
 }
 `
 
-gql`
-query MainApp_CloudConnectModalsQuery {
-  ...CloudConnectModals
-}
-`
-
 gql`
 mutation MainApp_ResetErrorsAndLoadConfig($id: ID!) {
   resetErrorAndLoadConfig(id: $id) {
@@ -110,10 +91,6 @@ mutation MainApp_ResetErrorsAndLoadConfig($id: ID!) {
 }
 `
 
-const showConnectDialog = ref(false)
-
-const cloudModalQuery = useQuery({ query: MainApp_CloudConnectModalsQueryDocument, pause: true })
-
 const currentRoute = useRoute()
 
 const showHeader = computed(() => {
@@ -134,9 +111,4 @@ const resetErrorAndLoadConfig = (id: string) => {
 
 const renderSidebar = window.__CYPRESS_MODE__ !== 'run'
 
-async function handleConnectProject () {
-  await cloudModalQuery.executeQuery()
-  showConnectDialog.value = true
-}
-
 </script>
diff --git a/packages/app/src/runs/CloudConnectButton.cy.tsx b/packages/app/src/runs/CloudConnectButton.cy.tsx
index 09fee431c18c..97fc7493438a 100644
--- a/packages/app/src/runs/CloudConnectButton.cy.tsx
+++ b/packages/app/src/runs/CloudConnectButton.cy.tsx
@@ -1,80 +1,37 @@
 import CloudConnectButton from './CloudConnectButton.vue'
-import { CloudConnectButtonFragmentDoc } from '../generated/graphql-test'
-import { CloudUserStubs } from '@packages/graphql/test/stubCloudTypes'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 
-describe('<CloudConnectButton />', () => {
-  it('show user connect if not connected', () => {
-    cy.mountFragment(CloudConnectButtonFragmentDoc, {
-      onResult: (result) => {
-        result.cloudViewer = null
-      },
-      render (gqlVal) {
-        return <div class="h-screen"><CloudConnectButton utmMedium="testing" gql={gqlVal} /></div>
-      },
-    })
+describe('<CloudConnectButton />', { viewportHeight: 60, viewportWidth: 400 }, () => {
+  context('not logged in ', () => {
+    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', 'Log in').should('be.visible')
+    })
   })
 
-  const cloudViewer = {
-    ...CloudUserStubs.me,
-    organizations: {
-      __typename: 'CloudOrganizationConnection' as const,
-      nodes: [
-        {
-          __typename: 'CloudOrganization' as const,
-          id: '1',
-          name: 'Test Org',
-          projects: {
-            __typename: 'CloudProjectConnection' as const,
-            nodes: [
-              {
-                __typename: 'CloudProject' as const,
-                id: '1',
-                name: 'Test Project',
-                slug: 'test-project',
-              },
-            ],
-          },
-        },
-        {
-          __typename: 'CloudOrganization' as const,
-          id: '2',
-          name: 'Test Org 2',
-          projects: {
-            __typename: 'CloudProjectConnection' as const,
-            nodes: [],
-          },
-        },
-      ],
-    },
-  }
+  context('logged in', () => {
+    let loginConnectStore
 
-  it('show project connect if not connected', () => {
-    cy.mountFragment(CloudConnectButtonFragmentDoc, {
-      onResult: (result) => {
-        result.cloudViewer = cloudViewer
-      },
-      render (gqlVal) {
-        return <div class="h-screen"><CloudConnectButton utmMedium="testing" gql={gqlVal} /></div>
-      },
+    beforeEach(() => {
+      loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
     })
 
-    cy.contains('button', 'Connect your project').should('be.visible')
-  })
+    it('show project connect if not connected', () => {
+      cy.mount(() => <div class="h-screen"><CloudConnectButton utmMedium="testing" /></div>)
 
-  it('shows connect project dialog', () => {
-    cy.mountFragment(CloudConnectButtonFragmentDoc, {
-      onResult: (result) => {
-        result.cloudViewer = cloudViewer
-      },
-      render (gqlVal) {
-        return <div class="h-screen"><CloudConnectButton utmMedium="testing" gql={gqlVal} /></div>
-      },
+      cy.contains('button', 'Connect your project').should('be.visible')
     })
 
-    cy.contains('button', 'Connect your project').click()
-    cy.get('[role="dialog"]').should('be.visible')
-    cy.get('[role="dialog"] h2').should('contain', 'Connect project')
+    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.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 93325eab0e2f..008571202305 100644
--- a/packages/app/src/runs/CloudConnectButton.vue
+++ b/packages/app/src/runs/CloudConnectButton.vue
@@ -1,79 +1,29 @@
 <template>
   <Button
     :class="props.class"
-    :prefix-icon="isLoggedIn ? ChainIcon : UserIcon"
+    :prefix-icon="user.isLoggedIn ? ChainIcon : UserIcon"
     prefix-icon-class="icon-dark-white icon-light-transparent"
-    @click="openConnection"
+    @click="openLoginConnectModal({ utmMedium: props.utmMedium })"
   >
-    {{ isLoggedIn ? t('runs.connect.buttonProject') : t('runs.connect.buttonUser') }}
+    {{ user.isLoggedIn ? t('runs.connect.buttonProject') : t('runs.connect.buttonUser') }}
   </Button>
-  <LoginModal
-    v-model="isLoginOpen"
-    :gql="props.gql"
-    :utm-medium="props.utmMedium"
-    :show-connect-button-after-login="!cloudProjectId"
-    @connect-project="isProjectConnectOpen = true"
-  />
-  <CloudConnectModals
-    v-if="isProjectConnectOpen"
-    :show="isProjectConnectOpen"
-    :gql="props.gql"
-    :utm-medium="props.utmMedium"
-    @cancel="isProjectConnectOpen = false"
-    @success="isProjectConnectOpen = false; emit('success')"
-  />
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { gql } from '@urql/vue'
+
 import UserIcon from '~icons/cy/user-outline_x16.svg'
 import ChainIcon from '~icons/cy/chain-link_x16.svg'
 import Button from '@cy/components/Button.vue'
-import CloudConnectModals from './modals/CloudConnectModals.vue'
-import LoginModal from '@cy/gql-components/topnav/LoginModal.vue'
 import { useI18n } from '@cy/i18n'
-import type { CloudConnectButtonFragment } from '../generated/graphql'
-
-const { t } = useI18n()
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 
-gql`
-fragment CloudConnectButton on Query {
-  currentProject {
-    id
-    config
-  }
-  ...CloudConnectModals
-  ...LoginModal
-}
-`
+const { openLoginConnectModal, user } = useLoginConnectStore()
 
-const emit = defineEmits<{
-  (event: 'success'): void
-}>()
+const { t } = useI18n()
 
 const props = defineProps<{
-  gql: CloudConnectButtonFragment
   class?: string
   utmMedium: string
 }>()
 
-const isLoginOpen = ref(false)
-const isProjectConnectOpen = ref(false)
-const isLoggedIn = computed(() => Boolean(props.gql.cloudViewer?.id))
-
-function openConnection () {
-  if (!isLoggedIn.value) {
-    // start logging in the user
-    isLoginOpen.value = true
-  } else {
-    // if user is already logged in connect a cloud project
-    isProjectConnectOpen.value = true
-  }
-}
-
-const cloudProjectId = computed(() => {
-  return props.gql?.currentProject?.config?.find((item: { field: string }) => item.field === 'projectId')?.value
-})
-
 </script>
diff --git a/packages/app/src/runs/RunsConnect.cy.tsx b/packages/app/src/runs/RunsConnect.cy.tsx
index 4e1fedb7fa91..2bcb603994ac 100644
--- a/packages/app/src/runs/RunsConnect.cy.tsx
+++ b/packages/app/src/runs/RunsConnect.cy.tsx
@@ -1,16 +1,8 @@
 import RunsConnect from './RunsConnect.vue'
-import { RunsConnectFragmentDoc } from '../generated/graphql-test'
 
 describe('<RunsConnect />', () => {
   it('show connect button', () => {
-    cy.mountFragment(RunsConnectFragmentDoc, {
-      onResult: (result) => {
-        result.cloudViewer = null
-      },
-      render (gqlVal) {
-        return <div class="h-screen"><RunsConnect gql={gqlVal} /></div>
-      },
-    })
+    cy.mount(() => <div class="h-screen"><RunsConnect /></div>)
 
     cy.contains('button', 'Log in').should('be.visible')
   })
diff --git a/packages/app/src/runs/RunsConnect.vue b/packages/app/src/runs/RunsConnect.vue
index 79587fb47909..04741d254419 100644
--- a/packages/app/src/runs/RunsConnect.vue
+++ b/packages/app/src/runs/RunsConnect.vue
@@ -18,39 +18,21 @@
       </div>
     </div>
     <CloudConnectButton
-      :gql="props.gql"
-      class="mx-auto mt-40px"
       utm-medium="Runs Tab"
-      @success="emit('success')"
+      class="mx-auto mt-40px"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { gql } from '@urql/vue'
 import SmartIcon from '~icons/cy/illustration-gear_x120.svg'
 import DebugIcon from '~icons/cy/illustration-debug_x120.svg'
 import ChartIcon from '~icons/cy/illustration-chart_x120.svg'
 import { useI18n } from '@cy/i18n'
 import CloudConnectButton from './CloudConnectButton.vue'
-import type { RunsConnectFragment } from '../generated/graphql'
 
 const { t } = useI18n()
 
-gql`
-fragment RunsConnect on Query {
-  ...CloudConnectButton
-}
-`
-
-const emit = defineEmits<{
-  (event: 'success'): void
-}>()
-
-const props = defineProps<{
-  gql: RunsConnectFragment
-}>()
-
 const notions = [
   {
     icon: SmartIcon,
diff --git a/packages/app/src/runs/RunsContainer.cy.tsx b/packages/app/src/runs/RunsContainer.cy.tsx
index 7df9f8136808..8dc6c46e1f9b 100644
--- a/packages/app/src/runs/RunsContainer.cy.tsx
+++ b/packages/app/src/runs/RunsContainer.cy.tsx
@@ -1,6 +1,7 @@
 import RunsContainer from './RunsContainer.vue'
 import { RunsContainerFragmentDoc } from '../generated/graphql-test'
 import { CloudUserStubs } from '@packages/graphql/test/stubCloudTypes'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 
 import { defaultMessages } from '@cy/i18n'
 
@@ -8,9 +9,18 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
   const cloudViewer = {
     ...CloudUserStubs.me,
     organizations: null,
+    firstOrganization: {
+      nodes: [],
+    },
   }
 
   context('when the user is logged in', () => {
+    beforeEach(() => {
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setUserFlag('isLoggedIn', true)
+    })
+
     it('renders with expected runs if there is a cloud project id', () => {
       cy.mountFragment(RunsContainerFragmentDoc, {
         onResult: (result) => {
diff --git a/packages/app/src/runs/RunsContainer.vue b/packages/app/src/runs/RunsContainer.vue
index 0e8675af73b7..a0d872828bf1 100644
--- a/packages/app/src/runs/RunsContainer.vue
+++ b/packages/app/src/runs/RunsContainer.vue
@@ -10,8 +10,6 @@
     />
     <RunsConnect
       v-if="!currentProject?.projectId || !cloudViewer?.id"
-      :gql="props.gql"
-      @success="showConnectSuccessAlert = true"
     />
     <RunsErrorRenderer
       v-else-if="currentProject?.cloudProject?.__typename !== 'CloudProject' || connectionFailed"
@@ -43,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import { useI18n } from '@cy/i18n'
 import NoInternetConnection from '@packages/frontend-shared/src/components/NoInternetConnection.vue'
@@ -54,6 +52,7 @@ import RunsEmpty from './RunsEmpty.vue'
 import { RunsContainerFragment, RunsContainer_FetchNewerRunsDocument } from '../generated/graphql'
 import Warning from '@packages/frontend-shared/src/warning/Warning.vue'
 import RunsErrorRenderer from './RunsErrorRenderer.vue'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 
 const { t } = useI18n()
 
@@ -93,7 +92,6 @@ fragment RunsContainer on Query {
   cloudViewer {
     id
   }
-  ...RunsConnect
 }`
 
 gql`
@@ -189,6 +187,21 @@ const props = defineProps<{
 
 const showConnectSuccessAlert = ref(false)
 const connectionFailed = computed(() => !props.gql.currentProject?.cloudProject && props.online)
+
+const loginConnectStore = useLoginConnectStore()
+
+watch(() => loginConnectStore.project.isProjectConnected, (newVal, oldVal) => {
+  if (newVal && oldVal === false) {
+    // only show this alert if we have just connected
+    showConnectSuccessAlert.value = true
+  } else {
+    // otherwise, set to false, eg if we just connected,
+    // and then manually reverted the config changes
+    // or edited the project ID
+    showConnectSuccessAlert.value = false
+  }
+})
+
 </script>
 
 <style scoped>
diff --git a/packages/app/src/runs/RunsErrorRenderer.spec.tsx b/packages/app/src/runs/RunsErrorRenderer.spec.tsx
index 86be0d35b3b1..45a4d88da272 100644
--- a/packages/app/src/runs/RunsErrorRenderer.spec.tsx
+++ b/packages/app/src/runs/RunsErrorRenderer.spec.tsx
@@ -1,5 +1,9 @@
 import { RunsErrorRendererFragmentDoc } from '../generated/graphql-test'
 import RunsErrorRenderer from './RunsErrorRenderer.vue'
+import { defaultMessages } from '@cy/i18n'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+
+const text = defaultMessages.runs.errors
 
 describe('<RunsErrorRenderer />', () => {
   it('should show a "connection failed" error', () => {
@@ -15,7 +19,7 @@ describe('<RunsErrorRenderer />', () => {
     cy.percySnapshot()
   })
 
-  it('should show a "not found" error', () => {
+  it('should show a "not found" error and opens reconnect modal', () => {
     cy.mountFragment(RunsErrorRendererFragmentDoc, {
       onResult (result) {
         if (result.currentProject) {
@@ -30,6 +34,15 @@ describe('<RunsErrorRenderer />', () => {
       },
     })
 
+    const loginConnectStore = useLoginConnectStore()
+
+    cy.spy(loginConnectStore, 'openLoginConnectModal').as('loginConnectSpy')
+
+    cy.contains(text.notFound.title).should('be.visible')
+    cy.contains(text.notFound.description.replace('{0}', 'projectId: "test-project-id"')).should('be.visible')
+    cy.contains('button', text.notFound.button).click()
+
+    cy.get('@loginConnectSpy').should('have.been.calledWith', { utmMedium: 'Runs Tab' })
     cy.percySnapshot()
   })
 
diff --git a/packages/app/src/runs/RunsErrorRenderer.vue b/packages/app/src/runs/RunsErrorRenderer.vue
index a67e6ff035bf..ba9dfb14969e 100644
--- a/packages/app/src/runs/RunsErrorRenderer.vue
+++ b/packages/app/src/runs/RunsErrorRenderer.vue
@@ -22,7 +22,7 @@
     :button-text="t('runs.errors.notFound.button')"
     :button-icon="ConnectIcon"
     :message="t('runs.errors.notFound.title')"
-    @button-click="showConnectDialog = true"
+    @button-click="openLoginConnectModal({utmMedium: 'Runs Tab'})"
   >
     <i18n-t
       scope="global"
@@ -58,14 +58,6 @@
       {{ t('runs.errors.unauthorized.description') }}
     </RunsError>
   </template>
-  <CloudConnectModals
-    v-if="showConnectDialog"
-    :show="showConnectDialog"
-    :gql="props.gql"
-    utm-medium="Runs Tab"
-    @cancel="showConnectDialog = false"
-    @success="showConnectDialog = false"
-  />
 </template>
 
 <script lang="ts" setup>
@@ -78,8 +70,10 @@ import ConnectIcon from '~icons/cy/chain-link_x16.svg'
 import SendIcon from '~icons/cy/paper-airplane_x16.svg'
 import { useI18n } from '@cy/i18n'
 import CodeTag from '../../../frontend-shared/src/components/CodeTag.vue'
-import CloudConnectModals from './modals/CloudConnectModals.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+
+const { openLoginConnectModal } = useLoginConnectStore()
 
 const { t } = useI18n()
 
@@ -99,7 +93,6 @@ fragment RunsErrorRenderer on Query {
       }
     }
   }
-  ...CloudConnectModals
 }
 `
 
@@ -113,8 +106,6 @@ const emit = defineEmits<{
 
 const currentProject = computed(() => props.gql.currentProject)
 
-const showConnectDialog = ref(false)
-
 gql`
 mutation RunsErrorRenderer_RequestAccess( $projectId: String! ) {
   cloudProjectRequestAccess(projectSlug: $projectId) {
diff --git a/packages/app/src/settings/project/CloudSettings.vue b/packages/app/src/settings/project/CloudSettings.vue
index 621edf935d88..9936ef5ecb16 100644
--- a/packages/app/src/settings/project/CloudSettings.vue
+++ b/packages/app/src/settings/project/CloudSettings.vue
@@ -4,10 +4,7 @@
     :gql="props.gql"
   />
   <section v-else>
-    <CloudConnectButton
-      :gql="props.gql"
-      utm-medium="Settings Tab"
-    />
+    <CloudConnectButton utm-medium="Settings Tab" />
   </section>
 
   <template
diff --git a/packages/app/src/settings/project/ProjectId.vue b/packages/app/src/settings/project/ProjectId.vue
index 7514d39ad89d..41f891de1d77 100644
--- a/packages/app/src/settings/project/ProjectId.vue
+++ b/packages/app/src/settings/project/ProjectId.vue
@@ -52,7 +52,6 @@ fragment ProjectId on Query {
     id
     projectId
   }
-  ...CloudConnectButton
 }`
 
 const props = defineProps<{
diff --git a/packages/app/src/specs/RequestAccessButton.vue b/packages/app/src/specs/RequestAccessButton.vue
index 1e5e69113679..bf9b71c17aac 100644
--- a/packages/app/src/specs/RequestAccessButton.vue
+++ b/packages/app/src/specs/RequestAccessButton.vue
@@ -39,6 +39,9 @@ fragment RequestAccessButton on Query {
         message
         hasRequestedAccess
       }
+      ... on CloudProject {
+        id
+      }
     }
   }
 }
diff --git a/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx b/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx
index 0052122afe11..f0e3151375be 100644
--- a/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx
+++ b/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx
@@ -2,6 +2,7 @@ import { SpecHeaderCloudDataTooltipFragmentDoc } from '../generated/graphql-test
 import SpecHeaderCloudDataTooltip from './SpecHeaderCloudDataTooltip.vue'
 import { get, set } from 'lodash'
 import { defaultMessages } from '@cy/i18n'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
 
 const tooltipContentSelector = '.v-popper'
 
@@ -17,21 +18,31 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
       docs: string
     },
   ) {
+    const loginConnectStore = useLoginConnectStore()
+
     cy.mountFragment(SpecHeaderCloudDataTooltipFragmentDoc, {
       onResult: (result) => {
         set(result, 'cloudViewer', { __typename: 'CloudUser', id: 'abc123' })
 
         switch (status) {
           case 'LOGGED_OUT':
-            set(result, 'cloudViewer', null)
+            loginConnectStore.setUserFlag('isLoggedIn', false)
             break
           case 'NOT_CONNECTED':
-            set(result, 'currentProject.cloudProject.__typename', null)
+            loginConnectStore.setUserFlag('isLoggedIn', true)
+            loginConnectStore.setUserFlag('isOrganizationLoaded', true)
+            loginConnectStore.setUserFlag('isMemberOfOrganization', true)
+            loginConnectStore.setProjectFlag('isProjectConnected', false)
+            loginConnectStore.setProjectFlag('isConfigLoaded', true)
             break
           case 'NOT_FOUND':
-            set(result, 'currentProject.cloudProject.__typename', 'CloudProjectNotFound')
+            loginConnectStore.setUserFlag('isLoggedIn', true)
+            loginConnectStore.setProjectFlag('isNotFound', true)
             break
           case 'ACCESS_REQUESTED':
+            loginConnectStore.setUserFlag('isLoggedIn', true)
+            loginConnectStore.setProjectFlag('isNotAuthorized', true)
+
             set(result, 'currentProject.cloudProject', {
               __typename: 'CloudProjectUnauthorized',
               message: '',
@@ -40,30 +51,28 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
 
             break
           case 'UNAUTHORIZED':
-            set(result, 'currentProject.cloudProject', {
-              __typename: 'CloudProjectUnauthorized',
-              message: '',
-              hasRequestedAccess: false,
-            })
+            loginConnectStore.setUserFlag('isLoggedIn', true)
+            loginConnectStore.setProjectFlag('isNotAuthorized', true)
 
             break
           case 'CONNECTED':
           default:
-            set(result, 'currentProject.cloudProject.__typename', 'CloudProjectSpec')
+            loginConnectStore.setUserFlag('isLoggedIn', true)
+            loginConnectStore.setUserFlag('isOrganizationLoaded', true)
+            loginConnectStore.setUserFlag('isMemberOfOrganization', true)
+            loginConnectStore.setProjectFlag('isProjectConnected', true)
             break
         }
       },
       render: (gql) => {
-        const showLoginSpy = cy.spy().as('showLoginSpy')
-        const showConnectToProjectSpy = cy.spy().as('showConnectToProjectSpy')
+        const showLoginConnectSpy = cy.spy().as('showLoginConnectSpy')
 
         return (
           <div class="flex justify-around">
             <SpecHeaderCloudDataTooltip
               gql={gql}
               mode={mode as any}
-              onShowLogin={showLoginSpy}
-              onShowConnectToProject={showConnectToProjectSpy}
+              onShowLoginConnect={showLoginConnectSpy}
             />
           </div>)
       },
@@ -124,7 +133,7 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
           .should('be.visible')
           .click()
 
-          cy.get('@showConnectToProjectSpy').should('have.been.calledOnce')
+          cy.get('@showLoginConnectSpy').should('have.been.calledOnce')
 
           cy.percySnapshot()
         })
@@ -142,6 +151,7 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
           .should('be.visible')
           .and('contain', get(defaultMessages, msgKeys.noAccess).replace('{0}', get(defaultMessages, msgKeys.docs)))
 
+          cy.contains('button', defaultMessages.specPage.requestAccessButton).should('be.visible')
           cy.percySnapshot()
         })
       })
@@ -158,6 +168,8 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
           .should('be.visible')
           .and('contain', get(defaultMessages, msgKeys.noAccess).replace('{0}', get(defaultMessages, msgKeys.docs)))
 
+          cy.contains('button', defaultMessages.specPage.requestSentButton).should('be.visible')
+
           cy.percySnapshot()
         })
       })
@@ -178,7 +190,7 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
           .should('be.visible')
           .click()
 
-          cy.get('@showLoginSpy').should('have.been.calledOnce')
+          cy.get('@showLoginConnectSpy').should('have.been.calledOnce')
 
           cy.percySnapshot()
         })
@@ -200,7 +212,7 @@ describe('<SpecHeaderCloudDataTooltip />', () => {
           .should('be.visible')
           .click()
 
-          cy.get('@showConnectToProjectSpy').should('have.been.calledOnce')
+          cy.get('@showLoginConnectSpy').should('have.been.calledOnce')
 
           cy.percySnapshot()
         })
diff --git a/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue b/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
index e7e58c15dcbf..a0d9c14ae32c 100644
--- a/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
+++ b/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
@@ -27,7 +27,7 @@
         data-cy="cloud-data-tooltip-content"
       >
         <div
-          :class="{'my-2': projectConnectionStatus!== 'CONNECTED'}"
+          :class="{'my-2': !project.isProjectConnected}"
           class="max-w-300px"
         >
           <i18n-t
@@ -44,34 +44,34 @@
         </div>
         <div>
           <Button
-            v-if="projectConnectionStatus === 'LOGGED_OUT'"
+            v-if="userStatusMatches('isLoggedOut')"
             :prefix-icon="UserOutlineIcon"
             prefix-icon-class="icon-dark-white icon-light-transparent"
             data-cy="login-button"
-            @click="emits('showLogin')"
+            @click="emits('showLoginConnect')"
           >
             {{ t('specPage.dashboardLoginButton') }}
           </Button>
           <Button
-            v-else-if="projectConnectionStatus === 'NOT_CONNECTED'"
+            v-else-if="userStatusMatches('needsProjectConnect')"
             :prefix-icon="ConnectIcon"
             prefix-icon-class="icon-dark-white icon-light-transparent"
             data-cy="connect-button"
-            @click="emits('showConnectToProject')"
+            @click="emits('showLoginConnect')"
           >
             {{ t("specPage.connectProjectButton") }}
           </Button>
           <Button
-            v-else-if="projectConnectionStatus === 'NOT_FOUND'"
+            v-else-if="project.isNotFound"
             :prefix-icon="ConnectIcon"
             prefix-icon-class="icon-dark-white icon-light-transparent"
             data-cy="reconnect-button"
-            @click="emits('showConnectToProject')"
+            @click="emits('showLoginConnect')"
           >
             {{ t("specPage.reconnectProjectButton") }}
           </Button>
           <RequestAccessButton
-            v-else-if="projectConnectionStatus === 'UNAUTHORIZED'"
+            v-else-if="project.isNotAuthorized"
             :gql="props.gql"
           />
         </div>
@@ -92,6 +92,10 @@ import type { SpecHeaderCloudDataTooltipFragment } from '../generated/graphql'
 import { useI18n } from '@cy/i18n'
 import { computed } from 'vue'
 import { gql } from '@urql/vue'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+
+const { userStatusMatches, project } = useLoginConnectStore()
+
 const { t } = useI18n()
 
 type CloudDataTooltipMode = 'LATEST_RUNS' | 'AVG_DURATION'
@@ -140,8 +144,7 @@ const VALUES: Record<CloudDataTooltipMode, CouldDataTooltipModeValues> = {
 }
 
 const emits = defineEmits<{
-  (eventName: 'showLogin'): void
-  (eventName: 'showConnectToProject'): void
+  (eventName: 'showLoginConnect'): void
 }>()
 
 const props = defineProps<{
@@ -160,32 +163,16 @@ fragment SpecHeaderCloudDataTooltip on Query {
       }
     }
   }
-  ...Auth
-  ...CloudConnectModals
   ...RequestAccessButton
 }
 `
 
-const projectConnectionStatus = computed(() => {
-  if (!props.gql.cloudViewer) return 'LOGGED_OUT'
-
-  if (!props.gql.currentProject?.cloudProject?.__typename) return 'NOT_CONNECTED'
-
-  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
-
-  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
-    return 'UNAUTHORIZED'
-  }
-
-  return 'CONNECTED'
-})
-
 const tooltipTextKey = computed(() => {
-  if (projectConnectionStatus.value === 'CONNECTED') {
+  if (project.isProjectConnected) {
     return VALUES[props.mode].connected
   }
 
-  if (projectConnectionStatus.value === 'UNAUTHORIZED') {
+  if (project.isNotAuthorized) {
     return VALUES[props.mode].noAccess
   }
 
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index 8982004fa943..b4c99d31f317 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -9,7 +9,6 @@
       :is-project-unauthorized="cloudProjectType === 'CloudProjectUnauthorized'"
       :has-requested-access="hasRequestedAccess"
       @refetch-failed-cloud-data="refetchFailedCloudData"
-      @reconnect-project="showConnectToProject"
     />
     <SpecsListHeader
       v-model="specFilterModel"
@@ -47,8 +46,7 @@
           :gql="props.gql"
           mode="LATEST_RUNS"
           data-cy="latest-runs-header"
-          @showLogin="showLogin('Specs Latest Runs Tooltip')"
-          @showConnectToProject="showConnectToProject"
+          @showLoginConnect="openLoginConnectModal({utmMedium: 'Specs Latest Runs Tooltip'})"
         />
       </div>
       <div class="hidden items-center justify-end truncate md:flex">
@@ -56,8 +54,7 @@
           :gql="props.gql"
           mode="AVG_DURATION"
           data-cy="average-duration-header"
-          @showLogin="showLogin('Specs Average Duration Tooltip')"
-          @showConnectToProject="showConnectToProject"
+          @showLoginConnect="openLoginConnectModal({utmMedium: 'Specs Average Duration Tooltip'})"
         />
       </div>
     </div>
@@ -131,8 +128,7 @@
               v-if="projectConnectionStatus !== 'CONNECTED' && row.data.isLeaf && row.data.data && (row.data.data.cloudSpec?.data || row.data.data.cloudSpec?.fetchingStatus !== 'FETCHING')"
               :gql="props.gql"
               :project-connection-status="projectConnectionStatus"
-              @showLogin="showLogin(utmMedium)"
-              @showConnectToProject="showConnectToProject"
+              @show-login-connect="openLoginConnectModal({ utmMedium })"
               @request-access="requestAccess(props.gql?.currentProject?.projectId)"
             />
           </template>
@@ -171,30 +167,13 @@
       @clear="handleClear"
     />
   </div>
-  <LoginModal
-    v-model="isLoginOpen"
-    :gql="props.gql"
-    :utm-medium="loginUtmMedium"
-    :show-connect-button-after-login="!props.gql?.currentProject?.projectId"
-    @loggedin="handleLoggedin"
-    @connect-project="isProjectConnectOpen = true"
-  />
-  <CloudConnectModals
-    v-if="isProjectConnectOpen"
-    :gql="props.gql"
-    :utm-medium="loginUtmMedium"
-    @cancel="isProjectConnectOpen = false"
-    @success="refreshPage"
-  />
 </template>
 
 <script setup lang="ts">
 import SpecsListBanners from './SpecsListBanners.vue'
 import LastUpdatedHeader from './LastUpdatedHeader.vue'
 import SpecHeaderCloudDataTooltip from './SpecHeaderCloudDataTooltip.vue'
-import LoginModal from '@cy/gql-components/topnav/LoginModal.vue'
 import SpecsListCloudButton from './SpecsListCloudButton.vue'
-import CloudConnectModals from '../runs/modals/CloudConnectModals.vue'
 import SpecsListHeader from './SpecsListHeader.vue'
 import SpecListGitInfo from './SpecListGitInfo.vue'
 import RunStatusDots from './RunStatusDots.vue'
@@ -218,6 +197,9 @@ import FlakyInformation from './flaky-badge/FlakyInformation.vue'
 import { useCloudSpecData } from '../composables/useCloudSpecData'
 import { useSpecFilter } from '../composables/useSpecFilter'
 import { useRequestAccess } from '../composables/useRequestAccess'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+
+const { openLoginConnectModal } = useLoginConnectStore()
 
 const route = useRoute()
 const { t } = useI18n()
@@ -229,10 +211,6 @@ watch(isOnline, (newIsOnlineValue) => isOffline.value = !newIsOnlineValue, { imm
 
 const tableGridColumns = 'grid-cols-[1fr,135px,130px] md:grid-cols-[1fr,135px,130px,130px] lg:grid-cols-[1fr,160px,160px,180px]'
 
-const isProjectConnectOpen = ref(false)
-const isLoginOpen = ref(false)
-const loginUtmMedium = ref('')
-
 const projectConnectionStatus = computed(() => {
   if (!props.gql.cloudViewer) return 'LOGGED_OUT'
 
@@ -257,15 +235,6 @@ const hasRequestedAccess = computed(() => {
   return projectConnectionStatus.value === 'ACCESS_REQUESTED'
 })
 
-const showLogin = (utmMedium: string) => {
-  loginUtmMedium.value = utmMedium
-  isLoginOpen.value = true
-}
-
-const showConnectToProject = () => {
-  isProjectConnectOpen.value = true
-}
-
 const requestAccess = useRequestAccess()
 
 const isGitAvailable = computed(() => {
@@ -448,19 +417,6 @@ const { refetchFailedCloudData } = useCloudSpecData(
   props.gql.currentProject?.specs as SpecsListFragment[] || [],
 )
 
-function refreshPage () {
-  location.reload()
-}
-
-const handleLoggedin = () => {
-  // if there is no project id, there can be no cloud data to refresh -
-  // we want to stay on the page and let the `connect-project` event take the user
-  // to the next step to connect their project
-  if (props.gql.currentProject?.projectId) {
-    refreshPage()
-  }
-}
-
 </script>
 
 <style scoped>
diff --git a/packages/app/src/specs/SpecsListBanners.cy.tsx b/packages/app/src/specs/SpecsListBanners.cy.tsx
index deb7fb3ce1e0..b5b76fa7bd46 100644
--- a/packages/app/src/specs/SpecsListBanners.cy.tsx
+++ b/packages/app/src/specs/SpecsListBanners.cy.tsx
@@ -6,14 +6,15 @@ import interval from 'human-interval'
 import { CloudUserStubs, CloudProjectStubs } from '@packages/graphql/test/stubCloudTypes'
 import { AllowedState, BannerIds } from '@packages/types'
 import { assignIn, set } from 'lodash'
-
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import type { LoginConnectState } from '@packages/frontend-shared/src/store/login-connect-store'
 const AlertSelector = 'alert-header'
 const AlertCloseBtnSelector = 'alert-suffix-icon'
 
 type BannerKey = keyof typeof BannerIds
 type BannerId = typeof BannerIds[BannerKey]
 
-describe('<SpecsListBanners />', () => {
+describe('<SpecsListBanners />', { viewportHeight: 260 }, () => {
   const validateBaseRender = () => {
     it('should render as expected', () => {
       cy.findByTestId(AlertSelector).should('be.visible')
@@ -55,12 +56,6 @@ describe('<SpecsListBanners />', () => {
     })
   }
 
-  const stateWithFirstOpenedDaysAgo = (days: number) => {
-    return {
-      firstOpened: Date.now() - interval(`${days} days`),
-    }
-  }
-
   const mountWithState = (query: Partial<SpecsListBannersFragment>, state?: Partial<AllowedState>, props?: object) => {
     cy.mountFragment(SpecsListBannersFragmentDoc, {
       onResult: (result) => {
@@ -73,58 +68,99 @@ describe('<SpecsListBanners />', () => {
 
   const validateSmartNotificationBehaviors = (bannerId: BannerId, bannerTestId: string, gql: Partial<SpecsListBannersFragment>) => {
     it('should not render when using cypress < 4 days', () => {
-      mountWithState(gql, stateWithFirstOpenedDaysAgo(3))
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setCypressFirstOpened(Date.now() - interval('3 days'))
+
+      cy.mountFragment(SpecsListBannersFragmentDoc, {
+        render: (gqlVal) => <SpecsListBanners gql={gqlVal} />,
+      })
 
       cy.get(`[data-cy="${bannerTestId}"]`).should('not.exist')
     })
 
     it('should not render when previously-dismissed', () => {
-      mountWithState(gql, {
-        ...stateWithFirstOpenedDaysAgo(4),
-        banners: {
-          [bannerId]: {
-            dismissed: Date.now(),
-          },
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setBannersState({
+        [bannerId]: {
+          dismissed: Date.now(),
         },
       })
 
+      cy.mountFragment(SpecsListBannersFragmentDoc, {
+        render: (gqlVal) => <SpecsListBanners gql={gqlVal} />,
+      })
+
       cy.get(`[data-cy="${bannerTestId}"]`).should('not.exist')
     })
 
     context('banner conditions are met and when cypress use >= 4 days', () => {
       beforeEach(() => {
+        const loginConnectStore = useLoginConnectStore()
+
+        loginConnectStore.setCypressFirstOpened(Date.now() - interval('4 days'))
+
         cy.stubMutationResolver(UseCohorts_DetermineCohortDocument, (defineResult) => {
           return defineResult({ determineCohort: { __typename: 'Cohort', name: 'foo', cohort: 'A' } })
         })
       })
 
       it('should render when not previously-dismissed', () => {
-        mountWithState(gql, stateWithFirstOpenedDaysAgo(4))
+        cy.mountFragment(SpecsListBannersFragmentDoc, {
+          render: (gqlVal) => (<SpecsListBanners
+            gql={gqlVal}
+          />),
+        })
+
+        const bannerTrueUserConditions = {
+          'login-banner': [],
+          'create-organization-banner': ['isLoggedIn', 'isOrganizationLoaded'],
+          'connect-project-banner': ['isLoggedIn', 'isMemberOfOrganization'],
+          'record-banner': ['isLoggedIn', 'isMemberOfOrganization'],
+        } as const
+
+        const bannerTrueProjectConditions = {
+          'login-banner': [],
+          'create-organization-banner': [],
+          'connect-project-banner': ['isConfigLoaded'],
+          'record-banner': ['isProjectConnected', 'hasNoRecordedRuns', 'hasNonExampleSpec', 'isConfigLoaded'],
+        } as const
+        const loginConnectStore = useLoginConnectStore()
+
+        bannerTrueUserConditions[bannerTestId].forEach((status: keyof LoginConnectState['user']) => {
+          loginConnectStore.setUserFlag(status, true)
+        })
+
+        bannerTrueProjectConditions[bannerTestId].forEach((status: keyof LoginConnectState['project']) => {
+          loginConnectStore.setProjectFlag(status, true)
+        })
+
         cy.get(`[data-cy="${bannerTestId}"]`).should('be.visible')
       })
 
       it('should be preempted by spec not found banner', () => {
-        mountWithState(gql, stateWithFirstOpenedDaysAgo(4), { isSpecNotFound: true })
+        mountWithState(gql, {}, { isSpecNotFound: true })
         cy.get(`[data-cy="${bannerTestId}"]`).should('not.exist')
       })
 
       it('should be preempted by offline warning banner', () => {
-        mountWithState(gql, stateWithFirstOpenedDaysAgo(4), { isOffline: true })
+        mountWithState(gql, {}, { isOffline: true })
         cy.get(`[data-cy="${bannerTestId}"]`).should('not.exist')
       })
 
       it('should be preempted by fetch error banner', () => {
-        mountWithState(gql, stateWithFirstOpenedDaysAgo(4), { isFetchError: true })
+        mountWithState(gql, {}, { isFetchError: true })
         cy.get(`[data-cy="${bannerTestId}"]`).should('not.exist')
       })
 
       it('should be preempted by project not found banner', () => {
-        mountWithState(gql, stateWithFirstOpenedDaysAgo(4), { isProjectNotFound: true })
+        mountWithState(gql, {}, { isProjectNotFound: true })
         cy.get(`[data-cy="${bannerTestId}"]`).should('not.exist')
       })
 
       it('should be preempted by request access banner', () => {
-        mountWithState(gql, stateWithFirstOpenedDaysAgo(4), { isProjectUnauthorized: true })
+        mountWithState(gql, {}, { isProjectUnauthorized: true })
         cy.get(`[data-cy="${bannerTestId}"]`).should('not.exist')
       })
     })
@@ -135,6 +171,9 @@ describe('<SpecsListBanners />', () => {
 
     beforeEach(() => {
       visible.value = true
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setCypressFirstOpened(Date.now() - interval('3 days'))
       cy.mountFragment(SpecsListBannersFragmentDoc, { render: (gql) => <SpecsListBanners gql={gql} isSpecNotFound={visible} /> })
     })
 
@@ -149,6 +188,10 @@ describe('<SpecsListBanners />', () => {
 
     beforeEach(() => {
       visible.value = true
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setCypressFirstOpened(Date.now() - interval('3 days'))
+
       cy.mountFragment(SpecsListBannersFragmentDoc, { render: (gql) => <SpecsListBanners gql={gql} isOffline={visible} /> })
     })
 
@@ -165,6 +208,9 @@ describe('<SpecsListBanners />', () => {
     beforeEach(() => {
       visible.value = true
       refetchCallback = cy.stub()
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setCypressFirstOpened(Date.now() - interval('3 days'))
 
       cy.mountFragment(SpecsListBannersFragmentDoc, { render: (gql) => <SpecsListBanners gql={gql} onRefetchFailedCloudData={refetchCallback} isFetchError={visible} /> })
     })
@@ -188,9 +234,13 @@ describe('<SpecsListBanners />', () => {
 
     beforeEach(() => {
       visible.value = true
-      reconnectCallback = cy.stub()
+      const loginConnectStore = useLoginConnectStore()
+
+      reconnectCallback = cy.stub(loginConnectStore, 'openLoginConnectModal')
 
-      cy.mountFragment(SpecsListBannersFragmentDoc, { render: (gql) => <SpecsListBanners gql={gql} onReconnectProject={reconnectCallback} isProjectNotFound={visible} /> })
+      loginConnectStore.setCypressFirstOpened(Date.now() - interval('3 days'))
+
+      cy.mountFragment(SpecsListBannersFragmentDoc, { render: (gql) => <SpecsListBanners gql={gql} isProjectNotFound={visible} /> })
     })
 
     validateBaseRender()
@@ -211,6 +261,9 @@ describe('<SpecsListBanners />', () => {
 
     beforeEach(() => {
       visible.value = true
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setCypressFirstOpened(Date.now() - interval('3 days'))
 
       cy.mountFragment(SpecsListBannersFragmentDoc, {
         onResult: (result) => {
@@ -241,6 +294,9 @@ describe('<SpecsListBanners />', () => {
 
     beforeEach(() => {
       visible.value = true
+      const loginConnectStore = useLoginConnectStore()
+
+      loginConnectStore.setCypressFirstOpened(Date.now() - interval('3 days'))
 
       cy.mountFragment(SpecsListBannersFragmentDoc, {
         onResult: (result) => {
diff --git a/packages/app/src/specs/SpecsListBanners.vue b/packages/app/src/specs/SpecsListBanners.vue
index bade2d118e93..a1d991b08d79 100644
--- a/packages/app/src/specs/SpecsListBanners.vue
+++ b/packages/app/src/specs/SpecsListBanners.vue
@@ -90,7 +90,7 @@
       :prefix-icon="ConnectIcon"
       class="mt-24px"
       data-cy="reconnect-button"
-      @click="emit('reconnectProject')"
+      @click="loginConnectStore.openLoginConnectModal({utmMedium: 'Tests Tab'})"
     >
       {{ t('runs.errors.notFound.button') }}
     </Button>
@@ -110,28 +110,12 @@
     </p>
     <RequestAccessButton :gql="props.gql" />
   </Alert>
-  <RecordBanner
-    v-else-if="showRecordBanner"
-    v-model="showRecordBanner"
-    :has-banner-been-shown="hasRecordBannerBeenShown"
-  />
-  <ConnectProjectBanner
-    v-else-if="showConnectBanner && cohorts.connectProject?.value"
-    v-model="showConnectBanner"
-    :has-banner-been-shown="hasConnectBannerBeenShown"
-    :cohort-option="cohorts.connectProject.value"
-  />
-  <CreateOrganizationBanner
-    v-else-if="showCreateOrganizationBanner && cohorts.organization?.value"
-    v-model="showCreateOrganizationBanner"
-    :has-banner-been-shown="hasCreateOrganizationBannerBeenShown"
-    :cohort-option="cohorts.organization.value"
-  />
-  <LoginBanner
-    v-else-if="showLoginBanner && cohorts.login?.value"
-    v-model="showLoginBanner"
-    :has-banner-been-shown="hasLoginBannerBeenShown"
-    :cohort-option="cohorts.login.value"
+
+  <component
+    :is="bannerToShow"
+    v-else-if="isBannerAllowed && bannerToShow"
+    :has-banner-been-shown="hasCurrentBannerBeenShown"
+    :cohort-option="currentCohortOption.cohort"
   />
 </template>
 
@@ -146,17 +130,19 @@ import ConnectIcon from '~icons/cy/chain-link_x16.svg'
 import WarningIcon from '~icons/cy/warning_x16.svg'
 import RefreshIcon from '~icons/cy/action-restart_x16'
 import { useRoute } from 'vue-router'
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import RequestAccessButton from './RequestAccessButton.vue'
 import { gql, useSubscription } from '@urql/vue'
 import { SpecsListBannersFragment, SpecsListBanners_CheckCloudOrgMembershipDocument } from '../generated/graphql'
-import interval from 'human-interval'
 import { AllowedState, BannerIds } from '@packages/types'
 import { LoginBanner, CreateOrganizationBanner, ConnectProjectBanner, RecordBanner } from './banners'
-import { CohortConfig, useCohorts } from '@packages/frontend-shared/src/composables/useCohorts'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { usePromptManager } from '@packages/frontend-shared/src/gql-components/composables/usePromptManager'
+import { CohortConfig, useCohorts } from '@packages/frontend-shared/src/gql-components/composables/useCohorts'
 
 const route = useRoute()
 const { t } = useI18n()
+const loginConnectStore = useLoginConnectStore()
 
 gql`
 fragment SpecsListBanners on Query {
@@ -176,17 +162,6 @@ fragment SpecsListBanners on Query {
     id
     projectId
     savedState
-    cloudProject {
-      __typename
-      ... on CloudProject {
-        id
-        runs(first: 1) {
-          nodes {
-            id
-          }
-        }
-      }
-    }
   }
 }
 `
@@ -217,7 +192,6 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'refetchFailedCloudData'): void
-  (e: 'reconnectProject'): void
 }>()
 
 useSubscription({ query: SpecsListBanners_CheckCloudOrgMembershipDocument })
@@ -227,15 +201,15 @@ const showOffline = ref(props.isOffline)
 const showFetchError = ref(props.isFetchError)
 const showProjectNotFound = ref(props.isProjectNotFound)
 const showProjectRequestAccess = ref(props.isProjectUnauthorized)
-const showRecordBanner = ref(false)
-const showConnectBanner = ref(false)
-const showCreateOrganizationBanner = ref(false)
-const showLoginBanner = ref(false)
 
-const hasRecordBannerBeenShown = ref(false)
-const hasConnectBannerBeenShown = ref(false)
-const hasCreateOrganizationBannerBeenShown = ref(false)
-const hasLoginBannerBeenShown = ref(false)
+const isBannerAllowed = ref(false)
+
+const bannerIds = {
+  isLoggedOut: BannerIds.ACI_082022_LOGIN,
+  needsOrgConnect: BannerIds.ACI_082022_CREATE_ORG,
+  needsProjectConnect: BannerIds.ACI_082022_CONNECT_PROJECT,
+  needsRecordedRun: BannerIds.ACI_082022_RECORD,
+} as const
 
 watch(
   () => ([props.isSpecNotFound, props.isOffline, props.isFetchError, props.isProjectNotFound, props.isProjectUnauthorized]),
@@ -249,32 +223,30 @@ watch(
 )
 
 const cloudData = computed(() => ([props.gql.cloudViewer, props.gql.cachedUser, props.gql.currentProject] as const))
+const bannerToShow = computed(() => {
+  const componentsByStatus = {
+    isLoggedOut: LoginBanner,
+    needsOrgConnect: CreateOrganizationBanner,
+    needsProjectConnect: ConnectProjectBanner,
+    needsRecordedRun: RecordBanner,
+  }
 
-watch(
-  cloudData,
-  ([cloudViewer, cachedUser, currentProject]) => {
-    // Cached user covers state where we're authenticated but data isn't loaded yet
-    const isLoggedIn = !!cachedUser?.id || !!cloudViewer?.id
-    // Need to be able to tell whether the lack of `firstOrganization` means they don't have an org or whether it just hasn't loaded yet
-    // Not having this check can cause a brief flicker of the 'Create Org' banner while org data is loading
-    const isOrganizationLoaded = !!cloudViewer?.firstOrganization
-    const isMemberOfOrganization = (cloudViewer?.firstOrganization?.nodes?.length ?? 0) > 0
-    const isProjectConnected = !!currentProject?.projectId && currentProject.cloudProject?.__typename === 'CloudProject'
-    const hasNoRecordedRuns = currentProject?.cloudProject?.__typename === 'CloudProject' && (currentProject.cloudProject?.runs?.nodes?.length ?? 0) === 0
-    const hasFourDaysOfCypressUse = (Date.now() - currentProject?.savedState?.firstOpened) > interval('4 days')
+  return componentsByStatus[loginConnectStore.userStatus] ?? null
+})
 
-    showRecordBanner.value = !hasBannerBeenDismissed(BannerIds.ACI_082022_RECORD) && isLoggedIn && isProjectConnected && isMemberOfOrganization && isProjectConnected && hasNoRecordedRuns && hasFourDaysOfCypressUse
-    showConnectBanner.value = !hasBannerBeenDismissed(BannerIds.ACI_082022_CONNECT_PROJECT) && isLoggedIn && isMemberOfOrganization && !isProjectConnected && hasFourDaysOfCypressUse
-    showCreateOrganizationBanner.value = !hasBannerBeenDismissed(BannerIds.ACI_082022_CREATE_ORG) && isLoggedIn && isOrganizationLoaded && !isMemberOfOrganization && hasFourDaysOfCypressUse
-    showLoginBanner.value = !hasBannerBeenDismissed(BannerIds.ACI_082022_LOGIN) && !isLoggedIn && hasFourDaysOfCypressUse
+const hasCurrentBannerBeenShown = computed(() => {
+  const bannersState = (props.gql.currentProject?.savedState as AllowedState)?.banners
 
-    hasRecordBannerBeenShown.value = hasBannerBeenShown(BannerIds.ACI_082022_RECORD)
-    hasConnectBannerBeenShown.value = hasBannerBeenShown(BannerIds.ACI_082022_CONNECT_PROJECT)
-    hasCreateOrganizationBannerBeenShown.value = hasBannerBeenShown(BannerIds.ACI_082022_CREATE_ORG)
-    hasLoginBannerBeenShown.value = hasBannerBeenShown(BannerIds.ACI_082022_LOGIN)
-  },
-  { immediate: true },
-)
+  return !!bannersState?._disabled || !!bannersState?.[bannerIds[loginConnectStore.userStatus]]?.lastShown
+})
+
+const { isAllowedFeature } = usePromptManager()
+
+watch(cloudData, () => {
+  // when cloud data updates, recheck if banner is allowed
+  isBannerAllowed.value = isAllowedFeature('specsListBanner')
+},
+{ immediate: true })
 
 const bannerCohortOptions = {
   [BannerIds.ACI_082022_LOGIN]: [
@@ -302,34 +274,12 @@ const getCohortForBanner = (bannerId: string) => {
   return cohortBuilder.getCohort(cohortConfig)
 }
 
-type BannerType = 'login' | 'connectProject' | 'organization'
-
-const cohorts: Partial<Record<BannerType, ReturnType<typeof getCohortForBanner>>> = {}
-
-watchEffect(() => {
-  if (!cohorts.login && showLoginBanner.value) {
-    cohorts.login = getCohortForBanner(BannerIds.ACI_082022_LOGIN)
+const currentCohortOption = computed(() => {
+  if (!bannerCohortOptions[bannerIds[loginConnectStore.userStatus]]) {
+    return { cohort: null }
   }
 
-  if (!cohorts.organization && showCreateOrganizationBanner.value) {
-    cohorts.organization = getCohortForBanner(BannerIds.ACI_082022_CREATE_ORG)
-  }
-
-  if (!cohorts.connectProject && showConnectBanner.value) {
-    cohorts.connectProject = getCohortForBanner(BannerIds.ACI_082022_CONNECT_PROJECT)
-  }
+  return reactive({ cohort: getCohortForBanner(bannerIds[loginConnectStore.userStatus]) })
 })
 
-function hasBannerBeenDismissed (bannerId: string) {
-  const bannersState = (props.gql.currentProject?.savedState as AllowedState)?.banners
-
-  return !!bannersState?._disabled || !!bannersState?.[bannerId]?.dismissed
-}
-
-function hasBannerBeenShown (bannerId: string) {
-  const bannersState = (props.gql.currentProject?.savedState as AllowedState)?.banners
-
-  return !!bannersState?._disabled || !!bannersState?.[bannerId]?.lastShown
-}
-
 </script>
diff --git a/packages/app/src/specs/SpecsListCloudButton.cy.tsx b/packages/app/src/specs/SpecsListCloudButton.cy.tsx
index 9f768f8f5e96..c7ae1d7aff9b 100644
--- a/packages/app/src/specs/SpecsListCloudButton.cy.tsx
+++ b/packages/app/src/specs/SpecsListCloudButton.cy.tsx
@@ -42,8 +42,7 @@ describe('<SpecsListCloudButton>', { viewportWidth: 300, viewportHeight: 400 },
         }
       },
       render: (gql) => {
-        const showLoginSpy = cy.spy().as('showLoginSpy')
-        const showConnectToProjectSpy = cy.spy().as('showConnectToProjectSpy')
+        const showLoginConnectSpy = cy.spy().as('showLoginConnect')
         const requestAccessSpy = cy.spy().as('requestAccessSpy')
 
         return (
@@ -51,8 +50,7 @@ describe('<SpecsListCloudButton>', { viewportWidth: 300, viewportHeight: 400 },
             <SpecsListCloudButton
               gql={gql}
               projectConnectionStatus={status}
-              onShowLogin={showLoginSpy}
-              onShowConnectToProject={showConnectToProjectSpy}
+              onShowLoginConnect={showLoginConnectSpy}
               onRequestAccess={requestAccessSpy}
             />
           </div>)
@@ -77,7 +75,7 @@ describe('<SpecsListCloudButton>', { viewportWidth: 300, viewportHeight: 400 },
       .should('exist')
       .click()
 
-      cy.get('@showConnectToProjectSpy').should('have.been.calledOnce')
+      cy.get('@showLoginConnect').should('have.been.calledOnce')
 
       takeSnapshots()
     })
@@ -93,7 +91,7 @@ describe('<SpecsListCloudButton>', { viewportWidth: 300, viewportHeight: 400 },
       .should('exist')
       .click()
 
-      cy.get('@showLoginSpy').should('have.been.calledOnce')
+      cy.get('@showLoginConnect').should('have.been.calledOnce')
 
       takeSnapshots()
     })
diff --git a/packages/app/src/specs/SpecsListCloudButton.vue b/packages/app/src/specs/SpecsListCloudButton.vue
index 0e1165d717f4..1009a456c7c1 100644
--- a/packages/app/src/specs/SpecsListCloudButton.vue
+++ b/packages/app/src/specs/SpecsListCloudButton.vue
@@ -28,8 +28,7 @@ type ProjectConnectionStatus = 'NOT_FOUND' | 'LOGGED_OUT' | 'NOT_CONNECTED' | 'U
 const { t } = useI18n()
 
 const emits = defineEmits<{
-  (eventName: 'showLogin'): void
-  (eventName: 'showConnectToProject'): void
+  (eventName: 'showLoginConnect'): void
   (eventName: 'requestAccess'): void
 }>()
 
@@ -49,8 +48,6 @@ fragment SpecCloudDataHoverButton on Query {
       }
     }
   }
-  ...Auth
-  ...CloudConnectModals
   ...RequestAccessButton
 }
 `
@@ -59,7 +56,7 @@ type ButtonOptions = {
   text: string
   textShort: string
   icon: FunctionalComponent<SVGAttributes>
-  emits: 'showLogin' | 'showConnectToProject' | 'requestAccess' | undefined
+  emits: 'showLoginConnect' | 'requestAccess' | undefined
 }
 
 const VALUES: Record<ProjectConnectionStatus, ButtonOptions> = {
@@ -67,19 +64,19 @@ const VALUES: Record<ProjectConnectionStatus, ButtonOptions> = {
     text: t('specPage.hoverButton.connect'),
     textShort: t('specPage.hoverButton.connect'),
     icon: UserIcon,
-    emits: 'showLogin',
+    emits: 'showLoginConnect',
   },
   NOT_CONNECTED: {
     text: t('specPage.hoverButton.connectProject'),
     textShort: t('specPage.hoverButton.connectProjectShort'),
     icon: ChainIcon,
-    emits: 'showConnectToProject',
+    emits: 'showLoginConnect',
   },
   NOT_FOUND: {
     text: t('specPage.hoverButton.connectProject'),
     textShort: t('specPage.hoverButton.connectProjectShort'),
     icon: ChainIcon,
-    emits: 'showConnectToProject',
+    emits: 'showLoginConnect',
   },
   UNAUTHORIZED: {
     text: t('specPage.hoverButton.requestAccess'),
@@ -109,11 +106,9 @@ const buttonOptions = computed(() => {
 const handleClick = () => {
   switch (props.projectConnectionStatus) {
     case 'LOGGED_OUT':
-      emits('showLogin')
-      break
     case 'NOT_CONNECTED':
     case 'NOT_FOUND':
-      emits('showConnectToProject')
+      emits('showLoginConnect')
       break
     case 'UNAUTHORIZED':
       emits('requestAccess')
diff --git a/packages/app/src/specs/banners/ConnectProjectBanner.cy.tsx b/packages/app/src/specs/banners/ConnectProjectBanner.cy.tsx
index 497b256eed87..2924c1f5bb89 100644
--- a/packages/app/src/specs/banners/ConnectProjectBanner.cy.tsx
+++ b/packages/app/src/specs/banners/ConnectProjectBanner.cy.tsx
@@ -6,7 +6,7 @@ describe('<ConnectProjectBanner />', () => {
   const cohortOption = { cohort: 'A', value: defaultMessages.specPage.banners.connectProject.contentA }
 
   it('should render expected content', () => {
-    cy.mount({ render: () => <ConnectProjectBanner modelValue={true} hasBannerBeenShown={true} cohortOption={cohortOption}/> })
+    cy.mount({ render: () => <ConnectProjectBanner hasBannerBeenShown={true} cohortOption={cohortOption}/> })
 
     cy.contains(defaultMessages.specPage.banners.connectProject.title).should('be.visible')
     cy.contains(defaultMessages.specPage.banners.connectProject.contentA).should('be.visible')
@@ -27,7 +27,7 @@ describe('<ConnectProjectBanner />', () => {
     })
 
     it('should record expected event on mount', () => {
-      cy.mount({ render: () => <ConnectProjectBanner modelValue={true} hasBannerBeenShown={false} cohortOption={cohortOption}/> })
+      cy.mount({ render: () => <ConnectProjectBanner hasBannerBeenShown={false} cohortOption={cohortOption}/> })
 
       cy.get('@recordEvent').should('have.been.calledWith', {
         campaign: 'Create project',
@@ -38,7 +38,7 @@ describe('<ConnectProjectBanner />', () => {
     })
 
     it('should not record event on mount if already shown', () => {
-      cy.mount({ render: () => <ConnectProjectBanner modelValue={true} hasBannerBeenShown={true} cohortOption={cohortOption}/> })
+      cy.mount({ render: () => <ConnectProjectBanner hasBannerBeenShown={true} cohortOption={cohortOption}/> })
 
       cy.get('@recordEvent').should('not.have.been.called')
     })
diff --git a/packages/app/src/specs/banners/ConnectProjectBanner.vue b/packages/app/src/specs/banners/ConnectProjectBanner.vue
index 4032920228a8..0cafb897d171 100644
--- a/packages/app/src/specs/banners/ConnectProjectBanner.vue
+++ b/packages/app/src/specs/banners/ConnectProjectBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <TrackedBanner
+    v-if="cohortOption"
     :banner-id="bannerId"
-    :model-value="modelValue"
     data-cy="connect-project-banner"
     status="info"
     :title="t('specPage.banners.connectProject.title')"
@@ -14,7 +14,6 @@
       medium: 'Specs Create Project Banner',
       cohort: cohortOption.cohort
     }"
-    @update:model-value="value => emit('update:modelValue', value)"
   >
     <p class="mb-24px">
       {{ cohortOption.value }}
@@ -24,65 +23,29 @@
       :prefix-icon="ConnectIcon"
       class="mt-24px"
       data-cy="connect-project-button"
-      @click="handleButtonClick"
+      @click="openLoginConnectModal({utmMedium: 'Specs Create Project Banner' })"
     >
       {{ t('specPage.banners.connectProject.buttonLabel') }}
     </Button>
-
-    <CloudConnectModals
-      v-if="isProjectConnectOpen && cloudModalsQuery.data.value"
-      :gql="cloudModalsQuery.data.value"
-      utm-medium="Specs Create Project Banner"
-      :utm-content="cohortOption.cohort"
-      @cancel="handleModalClose"
-      @success="handleModalClose"
-    />
   </TrackedBanner>
 </template>
 
 <script setup lang="ts">
-import { gql, useQuery } from '@urql/vue'
 import ConnectIcon from '~icons/cy/chain-link_x16.svg'
 import { useI18n } from '@cy/i18n'
 import Button from '@cy/components/Button.vue'
 import TrackedBanner from './TrackedBanner.vue'
-import type { CohortOption } from '@packages/frontend-shared/src/composables/useCohorts'
+import type { CohortOption } from '@packages/frontend-shared/src/gql-components/composables/useCohorts'
 import { BannerIds } from '@packages/types'
-import { ref } from 'vue'
-import { ConnectProjectBannerDocument } from '../../generated/graphql'
-import CloudConnectModals from '../../runs/modals/CloudConnectModals.vue'
-
-gql`
-query ConnectProjectBanner {
-  ...CloudConnectModals
-}
-`
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+const { openLoginConnectModal } = useLoginConnectStore()
 
 defineProps<{
-  modelValue: boolean
   hasBannerBeenShown: boolean
   cohortOption: CohortOption
 }>()
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
 const { t } = useI18n()
 const bannerId = BannerIds.ACI_082022_CONNECT_PROJECT
-const isProjectConnectOpen = ref(false)
-
-const cloudModalsQuery = useQuery({ query: ConnectProjectBannerDocument, pause: true })
-
-async function handleButtonClick () {
-  await cloudModalsQuery.executeQuery()
-
-  isProjectConnectOpen.value = true
-}
-
-function handleModalClose () {
-  isProjectConnectOpen.value = false
-  emit('update:modelValue', false)
-}
 
 </script>
diff --git a/packages/app/src/specs/banners/CreateOrganizationBanner.cy.tsx b/packages/app/src/specs/banners/CreateOrganizationBanner.cy.tsx
index 1e32cd1aef04..a7201b2f5477 100644
--- a/packages/app/src/specs/banners/CreateOrganizationBanner.cy.tsx
+++ b/packages/app/src/specs/banners/CreateOrganizationBanner.cy.tsx
@@ -14,7 +14,7 @@ describe('<CreateOrganizationBanner />', () => {
       cloudOrganizationsUrl: linkHref,
     } as any
 
-    cy.mount({ render: () => <CreateOrganizationBanner modelValue={true} hasBannerBeenShown={true} cohortOption={cohortOption}/> })
+    cy.mount({ render: () => <CreateOrganizationBanner hasBannerBeenShown={true} cohortOption={cohortOption}/> })
 
     cy.contains(defaultMessages.specPage.banners.createOrganization.titleA).should('be.visible')
     cy.contains(defaultMessages.specPage.banners.createOrganization.content).should('be.visible')
@@ -39,7 +39,7 @@ describe('<CreateOrganizationBanner />', () => {
     })
 
     it('should record expected event on mount', () => {
-      cy.mount({ render: () => <CreateOrganizationBanner modelValue={true} hasBannerBeenShown={false} cohortOption={cohortOption}/> })
+      cy.mount({ render: () => <CreateOrganizationBanner hasBannerBeenShown={false} cohortOption={cohortOption}/> })
 
       cy.get('@recordEvent').should('have.been.calledWith', {
         campaign: 'Set up your organization',
@@ -50,7 +50,7 @@ describe('<CreateOrganizationBanner />', () => {
     })
 
     it('should not record event on mount if already shown', () => {
-      cy.mount({ render: () => <CreateOrganizationBanner modelValue={true} hasBannerBeenShown={true} cohortOption={cohortOption}/> })
+      cy.mount({ render: () => <CreateOrganizationBanner hasBannerBeenShown={true} cohortOption={cohortOption}/> })
 
       cy.get('@recordEvent').should('not.have.been.called')
     })
diff --git a/packages/app/src/specs/banners/CreateOrganizationBanner.vue b/packages/app/src/specs/banners/CreateOrganizationBanner.vue
index 0fdecae718bf..02bcba8b7566 100644
--- a/packages/app/src/specs/banners/CreateOrganizationBanner.vue
+++ b/packages/app/src/specs/banners/CreateOrganizationBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <TrackedBanner
+    v-if="cohortOption"
     :banner-id="bannerId"
-    :model-value="modelValue"
     data-cy="create-organization-banner"
     status="info"
     :title="cohortOption.value"
@@ -14,7 +14,6 @@
       medium: 'Specs Create Organization Banner',
       cohort: cohortOption.cohort
     }"
-    @update:model-value="value => emit('update:modelValue', value)"
   >
     <p class="mb-24px">
       {{ t('specPage.banners.createOrganization.content') }}
@@ -36,7 +35,7 @@
 import OrganizationIcon from '~icons/cy/office-building_x16.svg'
 import { useI18n } from '@cy/i18n'
 import TrackedBanner from './TrackedBanner.vue'
-import type { CohortOption } from '@packages/frontend-shared/src/composables/useCohorts'
+import type { CohortOption } from '@packages/frontend-shared/src/gql-components/composables/useCohorts'
 import { BannerIds } from '@packages/types'
 import { CreateOrganizationBannerDocument } from '../../generated/graphql'
 import { gql, useQuery } from '@urql/vue'
@@ -54,15 +53,10 @@ query CreateOrganizationBanner {
 `
 
 const props = defineProps<{
-  modelValue: boolean
   hasBannerBeenShown: boolean
   cohortOption: CohortOption
 }>()
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
 const { t } = useI18n()
 const bannerId = BannerIds.ACI_082022_CREATE_ORG
 
@@ -80,7 +74,7 @@ const createOrganizationUrl = computed(() => {
     params: {
       utm_medium: 'Specs Create Organization Banner',
       utm_campaign: 'Set up your organization',
-      utm_content: props.cohortOption.cohort,
+      utm_content: props.cohortOption.value?.cohort,
     },
   })
 })
diff --git a/packages/app/src/specs/banners/LoginBanner.cy.tsx b/packages/app/src/specs/banners/LoginBanner.cy.tsx
index 846a5bf6de94..9dc22b0d0c74 100644
--- a/packages/app/src/specs/banners/LoginBanner.cy.tsx
+++ b/packages/app/src/specs/banners/LoginBanner.cy.tsx
@@ -6,7 +6,7 @@ describe('<LoginBanner />', () => {
   const cohortOption = { cohort: 'A', value: defaultMessages.specPage.banners.login.contentA }
 
   it('should render expected content', () => {
-    cy.mount({ render: () => <LoginBanner modelValue={true} hasBannerBeenShown={true} cohortOption={cohortOption}/> })
+    cy.mount({ render: () => <LoginBanner hasBannerBeenShown={true} cohortOption={cohortOption}/> })
 
     cy.contains(defaultMessages.specPage.banners.login.title).should('be.visible')
     cy.contains(defaultMessages.specPage.banners.login.contentA).should('be.visible')
@@ -27,7 +27,7 @@ describe('<LoginBanner />', () => {
     })
 
     it('should record expected event on mount', () => {
-      cy.mount({ render: () => <LoginBanner modelValue={true} hasBannerBeenShown={false} cohortOption={cohortOption}/> })
+      cy.mount({ render: () => <LoginBanner hasBannerBeenShown={false} cohortOption={cohortOption}/> })
 
       cy.get('@recordEvent').should('have.been.calledWith', {
         campaign: 'Log In',
@@ -38,7 +38,7 @@ describe('<LoginBanner />', () => {
     })
 
     it('should not record event on mount if already shown', () => {
-      cy.mount({ render: () => <LoginBanner modelValue={true} hasBannerBeenShown={true} cohortOption={cohortOption}/> })
+      cy.mount({ render: () => <LoginBanner hasBannerBeenShown={true} cohortOption={cohortOption}/> })
 
       cy.get('@recordEvent').should('not.have.been.called')
     })
diff --git a/packages/app/src/specs/banners/LoginBanner.vue b/packages/app/src/specs/banners/LoginBanner.vue
index e10c78091726..d778a7e82293 100644
--- a/packages/app/src/specs/banners/LoginBanner.vue
+++ b/packages/app/src/specs/banners/LoginBanner.vue
@@ -1,7 +1,7 @@
 <template>
   <TrackedBanner
+    v-if="cohortOption"
     :banner-id="bannerId"
-    :model-value="modelValue"
     data-cy="login-banner"
     status="info"
     :title="t('specPage.banners.login.title')"
@@ -14,7 +14,6 @@
       medium: 'Specs Login Banner',
       cohort: cohortOption.cohort
     }"
-    @update:model-value="value => emit('update:modelValue', value)"
   >
     <p class="mb-24px">
       {{ cohortOption.value }}
@@ -24,56 +23,29 @@
       :prefix-icon="ConnectIcon"
       class="mt-24px"
       data-cy="login-button"
-      @click="handleButtonClick"
+      @click="openLoginConnectModal({utmMedium: 'Specs Login Banner'})"
     >
       {{ t('specPage.banners.login.buttonLabel') }}
     </Button>
-    <LoginModal
-      v-if="loginModalQuery.data.value"
-      v-model="isLoginOpen"
-      :gql="loginModalQuery.data.value"
-      utm-medium="Specs Login Banner"
-      :utm-content="cohortOption.cohort"
-    />
   </TrackedBanner>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { gql, useQuery } from '@urql/vue'
 import ConnectIcon from '~icons/cy/chain-link_x16.svg'
 import { useI18n } from '@cy/i18n'
 import Button from '@cy/components/Button.vue'
-import { LoginBannerDocument } from '../../generated/graphql'
 import TrackedBanner from './TrackedBanner.vue'
-import type { CohortOption } from '@packages/frontend-shared/src/composables/useCohorts'
+import type { CohortOption } from '@packages/frontend-shared/src/gql-components/composables/useCohorts'
 import { BannerIds } from '@packages/types'
-import LoginModal from '@cy/gql-components/topnav/LoginModal.vue'
-
-gql`
-query LoginBanner {
-  ...LoginModal
-}
-`
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+const { openLoginConnectModal } = useLoginConnectStore()
 
 defineProps<{
-  modelValue: boolean
   hasBannerBeenShown: boolean
   cohortOption: CohortOption
 }>()
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
 const { t } = useI18n()
 const bannerId = BannerIds.ACI_082022_LOGIN
-const isLoginOpen = ref(false)
-const loginModalQuery = useQuery({ query: LoginBannerDocument, pause: true })
-
-async function handleButtonClick () {
-  await loginModalQuery.executeQuery()
-  isLoginOpen.value = true
-}
 
 </script>
diff --git a/packages/app/src/specs/banners/RecordBanner.cy.tsx b/packages/app/src/specs/banners/RecordBanner.cy.tsx
index 1b8510865723..0badafbb9697 100644
--- a/packages/app/src/specs/banners/RecordBanner.cy.tsx
+++ b/packages/app/src/specs/banners/RecordBanner.cy.tsx
@@ -4,7 +4,7 @@ import { TrackedBanner_RecordBannerSeenDocument } from '../../generated/graphql'
 
 describe('<RecordBanner />', () => {
   it('should render expected content', () => {
-    cy.mount({ render: () => <RecordBanner modelValue={true} hasBannerBeenShown={false} /> })
+    cy.mount({ render: () => <RecordBanner hasBannerBeenShown={false} /> })
 
     cy.gqlStub.Query.currentProject = {
       id: 'test_id',
@@ -38,7 +38,7 @@ describe('<RecordBanner />', () => {
       return defineResult({ recordEvent: true })
     })
 
-    cy.mount({ render: () => <RecordBanner modelValue={true} hasBannerBeenShown={false} /> })
+    cy.mount({ render: () => <RecordBanner hasBannerBeenShown={false} /> })
 
     cy.get('@recordEvent').should('have.been.calledWith', {
       campaign: 'Record Runs',
diff --git a/packages/app/src/specs/banners/RecordBanner.vue b/packages/app/src/specs/banners/RecordBanner.vue
index 592592757a5b..0df0864576c7 100644
--- a/packages/app/src/specs/banners/RecordBanner.vue
+++ b/packages/app/src/specs/banners/RecordBanner.vue
@@ -1,7 +1,6 @@
 <template>
   <TrackedBanner
     :banner-id="bannerId"
-    :model-value="modelValue"
     data-cy="record-banner"
     status="info"
     :title="t('specPage.banners.record.title')"
@@ -14,7 +13,6 @@
       medium: 'Specs Record Runs Banner',
       cohort: 'n/a'
     }"
-    @update:model-value="value => emit('update:modelValue', value)"
   >
     <p class="mb-24px">
       {{ t('specPage.banners.record.content') }}
@@ -31,14 +29,9 @@ import { BannerIds } from '@packages/types'
 import RecordPromptAdapter from '@packages/frontend-shared/src/gql-components/RecordPromptAdapter.vue'
 
 defineProps<{
-  modelValue: boolean
   hasBannerBeenShown: boolean
 }>()
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
 const { t } = useI18n()
 const bannerId = BannerIds.ACI_082022_RECORD
 
diff --git a/packages/app/src/specs/banners/TrackedBanner.cy.tsx b/packages/app/src/specs/banners/TrackedBanner.cy.tsx
index 229d20210da0..a553a47643b9 100644
--- a/packages/app/src/specs/banners/TrackedBanner.cy.tsx
+++ b/packages/app/src/specs/banners/TrackedBanner.cy.tsx
@@ -4,7 +4,7 @@ import { TrackedBanner_RecordBannerSeenDocument, TrackedBanner_SetProjectStateDo
 
 describe('<TrackedBanner />', () => {
   it('should pass through props and child content', () => {
-    cy.mount({ render: () => <TrackedBanner bannerId="test-banner" dismissible modelValue={true} hasBannerBeenShown={false} eventData={{} as any}>Test Content</TrackedBanner> })
+    cy.mount({ render: () => <TrackedBanner bannerId="test-banner" dismissible hasBannerBeenShown={false} eventData={{} as any}>Test Content</TrackedBanner> })
 
     cy.findByText('Test Content').should('be.visible')
     cy.findByTestId('alert-suffix-icon').should('be.visible')
@@ -94,7 +94,7 @@ describe('<TrackedBanner />', () => {
         eventData = reactive({ campaign: 'CAM', medium: 'MED', cohort: 'COH' })
 
         cy.mount({
-          render: () => <TrackedBanner bannerId="test-banner" modelValue={true} hasBannerBeenShown={hasBannerBeenShown.value} eventData={eventData} />,
+          render: () => <TrackedBanner bannerId="test-banner" hasBannerBeenShown={hasBannerBeenShown.value} eventData={eventData} />,
         })
       })
 
@@ -118,7 +118,7 @@ describe('<TrackedBanner />', () => {
 
       beforeEach(() => {
         eventData = reactive({ campaign: 'CAM', medium: 'MED', cohort: undefined })
-        cy.mount({ render: () => <TrackedBanner bannerId="test-banner" modelValue={true} hasBannerBeenShown={true} eventData={eventData} /> })
+        cy.mount({ render: () => <TrackedBanner bannerId="test-banner" hasBannerBeenShown={true} eventData={eventData} /> })
       })
 
       it('should not record event', () => {
diff --git a/packages/app/src/specs/banners/TrackedBanner.vue b/packages/app/src/specs/banners/TrackedBanner.vue
index c4c71be73373..c5bee7a9563b 100644
--- a/packages/app/src/specs/banners/TrackedBanner.vue
+++ b/packages/app/src/specs/banners/TrackedBanner.vue
@@ -1,8 +1,7 @@
 <template>
   <Alert
+    v-model="isAlertDisplayed"
     v-bind="$attrs"
-    :model-value="modelValue"
-    @update:model-value="handleBannerDismissed"
   >
     <slot />
   </Alert>
@@ -10,7 +9,7 @@
 
 <script setup lang="ts">
 import Alert from '@packages/frontend-shared/src/components/Alert.vue'
-import { ref, watchEffect } from 'vue'
+import { onMounted, ref, watchEffect, watch } from 'vue'
 import { gql, useMutation, useQuery } from '@urql/vue'
 import { TrackedBanner_ProjectStateDocument, TrackedBanner_RecordBannerSeenDocument, TrackedBanner_SetProjectStateDocument } from '../../generated/graphql'
 import { set } from 'lodash'
@@ -23,16 +22,11 @@ type EventData = {
 }
 
 type AlertComponentProps = InstanceType<typeof Alert>['$props']
-type AlertComponentEmits = InstanceType<typeof Alert>['$emit']
 interface TrackedBannerComponentProps extends AlertComponentProps {
   bannerId: string
-  modelValue: boolean
   hasBannerBeenShown: boolean
   eventData: EventData
 }
-interface TrackedBannerComponentEmits extends AlertComponentEmits {
-  (e: 'update:modelValue'): void
-}
 
 gql`
 query TrackedBanner_ProjectState {
@@ -48,6 +42,10 @@ mutation TrackedBanner_SetProjectState($value: String!) {
   setPreferences(type: project, value: $value) {
     ...TestingPreferences
     ...SpecRunner_Preferences
+    currentProject {
+      id
+      savedState
+    }
   }
 }
 `
@@ -60,40 +58,35 @@ mutation TrackedBanner_recordBannerSeen($campaign: String!, $messageId: String!,
 
 const props = withDefaults(defineProps<TrackedBannerComponentProps>(), {})
 
-const emit = defineEmits<TrackedBannerComponentEmits>()
-
 const stateQuery = useQuery({ query: TrackedBanner_ProjectStateDocument })
 const setStateMutation = useMutation(TrackedBanner_SetProjectStateDocument)
 const reportSeenMutation = useMutation(TrackedBanner_RecordBannerSeenDocument)
 const bannerInstanceId = ref(nanoid())
+const isAlertDisplayed = ref(true)
 
 watchEffect(() => {
-  if (props.modelValue && !props.hasBannerBeenShown && props.eventData) {
+  if (!props.hasBannerBeenShown && props.eventData) {
     // We only want to record the banner being shown once per user, so only record if this is the *first* time the banner has been shown
     recordBannerShown(props.eventData)
   }
 })
 
-watchEffect(() => {
-  if (props.modelValue) {
-    updateBannerState('lastShown')
-  }
-})
-
-function handleBannerDismissed (visible: boolean) {
-  if (!visible) {
+watch(() => isAlertDisplayed.value, (newVal) => {
+  if (!newVal) {
     updateBannerState('dismissed')
   }
+})
 
-  emit('update:modelValue', visible)
-}
+onMounted(() => {
+  updateBannerState('lastShown')
+})
 
 function updateBannerState (field: 'lastShown' | 'dismissed') {
-  const savedState = stateQuery.data.value?.currentProject?.savedState ?? {}
+  const savedBannerState = stateQuery.data.value?.currentProject?.savedState?.banners ?? {}
 
-  set(savedState, ['banners', props.bannerId, field], Date.now())
+  set(savedBannerState, [props.bannerId, field], Date.now())
 
-  setStateMutation.executeMutation({ value: JSON.stringify(savedState) })
+  setStateMutation.executeMutation({ value: JSON.stringify({ banners: savedBannerState }) })
 }
 
 function recordBannerShown ({ campaign, medium, cohort }: EventData): void {
diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
index 78a2dae23875..2907eded62bc 100644
--- a/packages/app/tsconfig.json
+++ b/packages/app/tsconfig.json
@@ -17,6 +17,7 @@
       "@cy/i18n": ["../frontend-shared/src/locales/i18n"],
       "@cy/components/*": ["../frontend-shared/src/components/*"],
       "@cy/gql-components/*": ["../frontend-shared/src/gql-components/*"],
+      "@cy/store/*": ["../frontend-shared/src/store/*"],
       "@packages/*": ["../*"]
     },
     "allowJs": true,
diff --git a/packages/data-context/src/actions/LocalSettingsActions.ts b/packages/data-context/src/actions/LocalSettingsActions.ts
index 64575d3ca2b9..3ac40b463b9f 100644
--- a/packages/data-context/src/actions/LocalSettingsActions.ts
+++ b/packages/data-context/src/actions/LocalSettingsActions.ts
@@ -1,5 +1,6 @@
 import { AllowedState, defaultPreferences, Editor } from '@packages/types'
 import pDefer from 'p-defer'
+import _ from 'lodash'
 
 import type { DataContext } from '..'
 
@@ -17,10 +18,8 @@ export class LocalSettingsActions {
     const toJson = JSON.parse(stringifiedJson) as AllowedState
 
     // update local data
-    for (const [key, value] of Object.entries(toJson)) {
-      this.ctx.coreData.localSettings.preferences[key as keyof AllowedState] = value as any
-    }
 
+    _.merge(this.ctx.coreData.localSettings.preferences, toJson)
     if (type === 'global') {
       // persist to global appData - projects/__global__/state.json
       return this.ctx._apis.localSettingsApi.setPreferences(toJson)
diff --git a/packages/data-context/src/actions/ProjectActions.ts b/packages/data-context/src/actions/ProjectActions.ts
index f546db484991..077facc79c54 100644
--- a/packages/data-context/src/actions/ProjectActions.ts
+++ b/packages/data-context/src/actions/ProjectActions.ts
@@ -8,7 +8,7 @@ import assert from 'assert'
 import type { ProjectShape } from '../data/coreDataShape'
 
 import type { DataContext } from '..'
-import { codeGenerator, SpecOptions } from '../codegen'
+import { codeGenerator, SpecOptions, hasNonExampleSpec } from '../codegen'
 import templates from '../codegen/templates'
 import { insertValuesInConfigFile } from '../util'
 import { getError } from '@packages/errors'
@@ -317,6 +317,15 @@ export class ProjectActions {
     this.ctx.project.setSpecs(specs)
     this.refreshSpecs(specs)
 
+    // only check for non-example specs when the specs change
+    this.hasNonExampleSpec().then((result) => {
+      this.ctx.project.setHasNonExampleSpec(result)
+    })
+    .catch((e) => {
+      this.ctx.project.setHasNonExampleSpec(false)
+      this.ctx.logTraceError(e)
+    })
+
     if (this.ctx.coreData.currentTestingType === 'component') {
       this.api.getDevServer().updateSpecs(specs)
     }
@@ -489,6 +498,21 @@ export class ProjectActions {
     })
   }
 
+  async hasNonExampleSpec () {
+    const specs = this.ctx.project.specs?.map((spec) => spec.relativeToCommonRoot)
+
+    switch (this.ctx.coreData.currentTestingType) {
+      case 'e2e':
+        return hasNonExampleSpec(templates.scaffoldIntegration, specs)
+      case 'component':
+        return specs.length > 0
+      case null:
+        return false
+      default:
+        throw new Error(`Unsupported testing type ${this.ctx.coreData.currentTestingType}`)
+    }
+  }
+
   async pingBaseUrl () {
     const baseUrl = (await this.ctx.project.getConfig())?.baseUrl
 
diff --git a/packages/data-context/src/codegen/code-generator.ts b/packages/data-context/src/codegen/code-generator.ts
index b7c5ddf801fb..64f716b17fe7 100644
--- a/packages/data-context/src/codegen/code-generator.ts
+++ b/packages/data-context/src/codegen/code-generator.ts
@@ -4,6 +4,9 @@ import * as path from 'path'
 import * as ejs from 'ejs'
 import fm from 'front-matter'
 import _ from 'lodash'
+import Debug from 'debug'
+
+const debug = Debug('cypress:data-context:codegen:code-generator')
 
 export interface Action {
   templateDir: string
@@ -159,3 +162,22 @@ async function fileExists (absolute: string) {
     return false
   }
 }
+
+export async function hasNonExampleSpec (testTemplateDir: string, specs: string[]): Promise<boolean> {
+  debug(`hasNonExampleSpec - calling with template directory "${testTemplateDir}" and ${specs.length}`)
+  const dirExists = await fileExists(testTemplateDir)
+
+  if (!dirExists) {
+    throw new Error(`Template directory does not exist: ${testTemplateDir}`)
+  }
+
+  const templateFiles = await allFilesInDir(testTemplateDir)
+
+  const specInTemplates = (spec: String): boolean => {
+    debug(`hasNonExampleSpec - checking for spec ${spec}`)
+
+    return templateFiles.some((templateFile) => templateFile.substring(testTemplateDir.length + 1) === spec)
+  }
+
+  return specs.some((spec) => !specInTemplates(spec))
+}
diff --git a/packages/data-context/src/sources/ProjectDataSource.ts b/packages/data-context/src/sources/ProjectDataSource.ts
index 5e447b622b39..f62241e06250 100644
--- a/packages/data-context/src/sources/ProjectDataSource.ts
+++ b/packages/data-context/src/sources/ProjectDataSource.ts
@@ -198,6 +198,7 @@ export function getPathFromSpecPattern ({
 export class ProjectDataSource {
   private _specWatcher: FSWatcher | null = null
   private _specs: SpecWithRelativeRoot[] = []
+  private _hasNonExampleSpec: boolean = false
 
   constructor (private ctx: DataContext) {}
 
@@ -229,6 +230,14 @@ export class ProjectDataSource {
     this._specs = specs
   }
 
+  get hasNonExampleSpec () {
+    return this._hasNonExampleSpec
+  }
+
+  setHasNonExampleSpec (hasNonExampleSpec: boolean) {
+    this._hasNonExampleSpec = hasNonExampleSpec
+  }
+
   setRelaunchBrowser (relaunchBrowser: boolean) {
     this.ctx.coreData.app.relaunchBrowser = relaunchBrowser
   }
diff --git a/packages/data-context/test/unit/actions/LocalSettingsActions.spec.ts b/packages/data-context/test/unit/actions/LocalSettingsActions.spec.ts
new file mode 100644
index 000000000000..90dbed0e159a
--- /dev/null
+++ b/packages/data-context/test/unit/actions/LocalSettingsActions.spec.ts
@@ -0,0 +1,89 @@
+import type { DataContext } from '../../../src'
+import { LocalSettingsActions } from '../../../src/actions/LocalSettingsActions'
+import { createTestDataContext } from '../helper'
+import { expect } from 'chai'
+import sinon from 'sinon'
+
+describe('LocalSettingsActions', () => {
+  let ctx: DataContext
+  let actions: LocalSettingsActions
+
+  const SIMPLE_STRING_KV = { testProjectPref: 'testValue' }
+  const SIMPLE_NUMBER_KV = { number: 123 }
+  const NESTED_STATE = { nested: {
+    firstItem: 'hello',
+    secondItem: 'word',
+  } }
+  const UPDATED_NESTED_STATE = { nested: {
+    thirdItem: 'new',
+  } }
+
+  beforeEach(() => {
+    sinon.restore()
+
+    ctx = createTestDataContext('open')
+
+    actions = new LocalSettingsActions(ctx)
+
+    ctx._apis.localSettingsApi.setPreferences = sinon.stub()
+    ctx._apis.projectApi.setProjectPreferences = sinon.stub()
+  })
+
+  context('saving project preferences', () => {
+    it('should save a single key-value pair to project preferences', async () => {
+      actions.setPreferences(JSON.stringify(SIMPLE_STRING_KV), 'project')
+
+      // confirm correct value was set in state
+      expect(ctx.coreData.localSettings.preferences).to.deep.eq(SIMPLE_STRING_KV)
+
+      // confirm the value was set at the "project" level, and not the general "local settings" of Cypress
+      expect(ctx._apis.projectApi.setProjectPreferences).to.be.calledWith(SIMPLE_STRING_KV)
+      expect(ctx._apis.localSettingsApi.setPreferences).not.to.be.called
+    })
+
+    it('should save multiple key-value pairs', async () => {
+      ctx._apis.projectApi.setProjectPreferences = sinon.stub()
+
+      actions.setPreferences(JSON.stringify(SIMPLE_STRING_KV), 'project')
+      actions.setPreferences(JSON.stringify(SIMPLE_NUMBER_KV), 'project')
+
+      expect(ctx.coreData.localSettings.preferences).to.deep.eq({ ...SIMPLE_NUMBER_KV, ...SIMPLE_STRING_KV })
+    })
+
+    it('should merge nested objects', async () => {
+      ctx._apis.projectApi.setProjectPreferences = sinon.stub()
+
+      actions.setPreferences(JSON.stringify(NESTED_STATE), 'project')
+      actions.setPreferences(JSON.stringify(UPDATED_NESTED_STATE), 'project')
+
+      expect(ctx.coreData.localSettings.preferences).to.deep.eq({ nested: { ...NESTED_STATE.nested, ...UPDATED_NESTED_STATE.nested } })
+    })
+  })
+
+  context('saving "global" preferences', () => {
+    it('should save a single key-value pair', async () => {
+      actions.setPreferences(JSON.stringify(SIMPLE_STRING_KV), 'global')
+
+      // confirm correct value was set in state
+      expect(ctx.coreData.localSettings.preferences).to.deep.eq(SIMPLE_STRING_KV)
+
+      // confirm the value was set at the general "local settings" of Cypress, not the "project" level
+      expect(ctx._apis.localSettingsApi.setPreferences).to.be.calledWith(SIMPLE_STRING_KV)
+      expect(ctx._apis.projectApi.setProjectPreferences).not.to.be.called
+    })
+
+    it('should save multiple key-value pairs', async () => {
+      actions.setPreferences(JSON.stringify(SIMPLE_STRING_KV), 'global')
+      actions.setPreferences(JSON.stringify(SIMPLE_NUMBER_KV), 'global')
+
+      expect(ctx.coreData.localSettings.preferences).to.deep.eq({ ...SIMPLE_NUMBER_KV, ...SIMPLE_STRING_KV })
+    })
+
+    it('should merge nested objects', async () => {
+      actions.setPreferences(JSON.stringify(NESTED_STATE), 'project')
+      actions.setPreferences(JSON.stringify(UPDATED_NESTED_STATE), 'project')
+
+      expect(ctx.coreData.localSettings.preferences).to.deep.eq({ nested: { ...NESTED_STATE.nested, ...UPDATED_NESTED_STATE.nested } })
+    })
+  })
+})
diff --git a/packages/data-context/test/unit/actions/ProjectActions.spec.ts b/packages/data-context/test/unit/actions/ProjectActions.spec.ts
new file mode 100644
index 000000000000..dc95bf2175a1
--- /dev/null
+++ b/packages/data-context/test/unit/actions/ProjectActions.spec.ts
@@ -0,0 +1,106 @@
+import type { DataContext } from '../../../src'
+import { ProjectActions } from '../../../src/actions/ProjectActions'
+import { createTestDataContext } from '../helper'
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { SpecWithRelativeRoot } from '@packages/types'
+
+describe('ProjectActions', () => {
+  let ctx: DataContext
+  let actions: ProjectActions
+
+  beforeEach(() => {
+    sinon.restore()
+
+    ctx = createTestDataContext('open')
+
+    actions = new ProjectActions(ctx)
+  })
+
+  context('hasNonExampleSpec', () => {
+    context('testing type not set yet', () => {
+      it('should indicate there are NO non example spec files if empty', async () => {
+        expect(ctx.project.specs).to.have.length(0)
+
+        const hasNonExampleSpec = await actions.hasNonExampleSpec()
+
+        expect(hasNonExampleSpec).to.be.false
+      })
+    })
+
+    context('testing type is e2e', () => {
+      beforeEach(() => {
+        ctx.coreData.currentTestingType = 'e2e'
+      })
+
+      it('should indicate there are NO non example spec files with only examples', async () => {
+        const mockSpecs = [
+          {
+            name: 'todo.cy.js',
+            relativeToCommonRoot: '1-getting-started/todo.cy.js',
+          },
+        ] as SpecWithRelativeRoot[]
+
+        ctx.project.setSpecs(mockSpecs)
+
+        expect(ctx.project.specs).to.have.length(1)
+
+        const hasNonExampleSpec = await actions.hasNonExampleSpec()
+
+        expect(hasNonExampleSpec).to.be.false
+      })
+
+      it('should indicate there are non example spec files with examples and non example', async () => {
+        const mockSpecs = [
+          {
+            name: 'todo.cy.js',
+            relativeToCommonRoot: '1-getting-started/todo.cy.js',
+          },
+          {
+            name: 'my-example.cy.js',
+            relativeToCommonRoot: 'my-example.cy.js',
+          },
+        ] as SpecWithRelativeRoot[]
+
+        ctx.project.setSpecs(mockSpecs)
+
+        expect(ctx.project.specs).to.have.length(2)
+
+        const hasNonExampleSpec = await actions.hasNonExampleSpec()
+
+        expect(hasNonExampleSpec).to.be.true
+      })
+    })
+
+    context('testing type is component', () => {
+      it('should indicate there are NO non example spec files with no specs', async () => {
+        const mockSpecs = [] as SpecWithRelativeRoot[]
+
+        ctx.coreData.currentTestingType = 'component'
+        ctx.project.setSpecs(mockSpecs)
+
+        expect(ctx.project.specs).to.have.length(0)
+
+        const hasNonExampleSpec = await actions.hasNonExampleSpec()
+
+        expect(hasNonExampleSpec).to.be.false
+      })
+
+      // there are no examples for component tests, so any component spec file should be a non-example
+      it('should indicate there are non example spec files with any spec', async () => {
+        const mockSpecs = [
+          { name: 'test-1.cy.js' },
+        ] as SpecWithRelativeRoot[]
+
+        ctx.coreData.currentTestingType = 'component'
+        ctx.project.setSpecs(mockSpecs)
+
+        expect(ctx.project.specs).to.have.length(1)
+
+        const hasNonExampleSpec = await actions.hasNonExampleSpec()
+
+        expect(hasNonExampleSpec).to.be.true
+      })
+    })
+  })
+})
diff --git a/packages/data-context/test/unit/codegen/code-generator.spec.ts b/packages/data-context/test/unit/codegen/code-generator.spec.ts
index b9d8c0bacfdf..5b46e3f150f6 100644
--- a/packages/data-context/test/unit/codegen/code-generator.spec.ts
+++ b/packages/data-context/test/unit/codegen/code-generator.spec.ts
@@ -5,7 +5,7 @@ import fs from 'fs-extra'
 import path from 'path'
 import { DataContext } from '../../../src'
 import {
-  Action, codeGenerator, CodeGenResult, CodeGenResults,
+  Action, codeGenerator, CodeGenResult, CodeGenResults, hasNonExampleSpec,
 } from '../../../src/codegen/code-generator'
 import { SpecOptions } from '../../../src/codegen/spec-options'
 import templates from '../../../src/codegen/templates'
@@ -272,4 +272,56 @@ describe('code-generator', () => {
 
     expect(() => babelParse(codeGenResult.files[0].content)).not.throw()
   })
+
+  context('nonExampleSpecfile', () => {
+    it('should return true after adding new spec file', async () => {
+      const target = path.join(tmpPath, 'spec-check')
+
+      const checkBeforeScaffolding = await hasNonExampleSpec(templates.scaffoldIntegration, [])
+
+      expect(checkBeforeScaffolding, 'expected having no spec files to show no non-example specs').to.be.false
+
+      const scaffoldExamplesAction: Action = {
+        templateDir: templates.scaffoldIntegration,
+        target,
+      }
+
+      const addTemplatesAsSpecs = (results: CodeGenResults) => {
+        return results.files.map((file) => {
+          return file.file.substring(target.length + 1)
+        })
+      }
+
+      const scaffoldResults = await codeGenerator(scaffoldExamplesAction, {})
+
+      expect(scaffoldResults.files.length, 'expected scaffold files to be created').gt(0)
+
+      const specs = addTemplatesAsSpecs(scaffoldResults)
+
+      const checkAfterScaffolding = await hasNonExampleSpec(templates.scaffoldIntegration, specs)
+
+      expect(checkAfterScaffolding, 'expected only having template files to show no non-example specs').to.be.false
+
+      const fileName = 'my-test-file.js'
+      const scaffoldTemplateAction: Action = {
+        templateDir: templates.e2e,
+        target,
+      }
+      const codeGenArgs = { fileName }
+
+      const generatedTest = await codeGenerator(scaffoldTemplateAction, codeGenArgs)
+
+      const specsWithGenerated = [...specs, ...addTemplatesAsSpecs(generatedTest)]
+
+      const checkAfterTemplate = await hasNonExampleSpec(templates.scaffoldIntegration, specsWithGenerated)
+
+      expect(checkAfterTemplate, 'expected check after adding a new spec to indicate there are now non-example specs').to.be.true
+    })
+
+    it('should error if template dir does not exist', async () => {
+      const singleSpec = ['sample.spec.ts']
+
+      expect(async () => await hasNonExampleSpec('', singleSpec)).to.throw
+    })
+  })
 })
diff --git a/packages/frontend-shared/src/composables/examples/UseCohortsExample.vue b/packages/frontend-shared/src/composables/examples/UseCohortsExample.vue
index 690962b93649..2b7c5fe939b3 100644
--- a/packages/frontend-shared/src/composables/examples/UseCohortsExample.vue
+++ b/packages/frontend-shared/src/composables/examples/UseCohortsExample.vue
@@ -12,7 +12,7 @@ export type CopyOption = {
 </script>
 
 <script setup lang="ts">
-import { CohortConfig, useCohorts } from '../useCohorts'
+import { CohortConfig, useCohorts } from '../../gql-components/composables/useCohorts'
 
 const props = defineProps<{
   weights?: number[]
diff --git a/packages/frontend-shared/src/gql-components/Auth.vue b/packages/frontend-shared/src/gql-components/Auth.vue
index 9fd6d536fb01..954c75aaadb7 100644
--- a/packages/frontend-shared/src/gql-components/Auth.vue
+++ b/packages/frontend-shared/src/gql-components/Auth.vue
@@ -82,6 +82,10 @@ import type {
 } from '../generated/graphql'
 import Button from '@cy/components/Button.vue'
 import { useI18n } from '@cy/i18n'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+
+const loginConnectStore = useLoginConnectStore()
+
 const { t } = useI18n()
 
 const isOnline = useOnline()
@@ -92,21 +96,35 @@ const props = defineProps<{
   showLogout?: boolean
   utmMedium: string
   utmContent?: string
-  showConnectButtonAfterLogin?: boolean
 }>()
 
 gql`
 fragment Auth on Query {
+  ...SelectCloudProjectModal
   cloudViewer {
     id
     email
     fullName
+    firstOrganization: organizations(first: 1) {
+      nodes {
+        id
+      }
+    }
   }
   authState {
     browserOpened
     name
     message
   }
+  currentProject {
+    id
+    cloudProject {
+      __typename
+      ... on CloudProject {
+        id
+      }
+    }
+  }
 }
 `
 
@@ -159,9 +177,13 @@ onBeforeUnmount(() => {
   }
 })
 
+const showConnectButton = computed(() => {
+  return loginConnectStore.project.isConfigLoaded && loginConnectStore.userStatusMatches('needsProjectConnect')
+})
+
 const emit = defineEmits<{
-  (event: 'continue', value: boolean): void
-  (event: 'connect-project'): void
+  (event: 'close'): void
+  (event: 'cancel'): void
 }>()
 
 const cloudViewer = computed(() => {
@@ -183,21 +205,24 @@ const loginMutationIsPending = computed(() => {
 })
 
 const handleLoginOrContinue = async () => {
-  if (cloudViewer.value) {
-    if (props.showConnectButtonAfterLogin) {
-      emit('connect-project')
-    } else {
-      emit('continue', true)
-    }
+  if (loginConnectStore.user.isLoggedIn) {
+    // user is already logged in, just emit close event & return early
+    emit('close')
 
     return
   }
 
+  // user has not already logged in, kick off the login process
+
   loginInitiated.value = true
 
   login.executeMutation({ utmMedium: props.utmMedium, utmContent: props.utmContent || null, utmSource: getUtmSource() })
 }
 
+const handleCancel = () => {
+  emit('cancel')
+}
+
 const handleLogout = () => {
   logout.executeMutation({})
 }
@@ -208,10 +233,6 @@ const handleTryAgain = async () => {
   login.executeMutation({ utmMedium: props.utmMedium, utmContent: props.utmContent || null, utmSource: getUtmSource() })
 }
 
-const handleCancel = () => {
-  emit('continue', true)
-}
-
 const buttonText = computed(() => {
   const strings = {
     login: t('topNav.login.actionLogin'),
@@ -219,11 +240,11 @@ const buttonText = computed(() => {
     continue: t('topNav.login.actionContinue'),
   }
 
-  if (cloudViewer.value) {
-    if (props.showConnectButtonAfterLogin) {
-      return strings.connectProject
-    }
+  if (showConnectButton.value) {
+    return strings.connectProject
+  }
 
+  if (loginConnectStore.user.isLoggedIn) {
     return strings.continue
   }
 
@@ -231,7 +252,7 @@ const buttonText = computed(() => {
 })
 
 const buttonPrefixIcon = computed(() => {
-  return cloudViewer.value && props.showConnectButtonAfterLogin ? ChainIcon : undefined
+  return showConnectButton.value ? ChainIcon : undefined
 })
 
 </script>
diff --git a/packages/frontend-shared/src/gql-components/CloudViewerAndProject.vue b/packages/frontend-shared/src/gql-components/CloudViewerAndProject.vue
new file mode 100644
index 000000000000..4255bb8a8238
--- /dev/null
+++ b/packages/frontend-shared/src/gql-components/CloudViewerAndProject.vue
@@ -0,0 +1,140 @@
+<!--
+  This component exists to avoid repeating this logic between the root components
+  of packages/app and packages/launchpad. It doesn't render anything and can
+  probably be a composable. It hasn't been made into a composable yet as we
+  have a convention where we put GQL queries into Vue components, so for simplicity's sake
+  this is a regular ole component.
+-->
+
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { gql, useQuery, useSubscription } from '@urql/vue'
+import { CloudViewerAndProject_RequiredDataDocument, CloudViewerAndProject_CheckCloudOrgMembershipDocument } from '../generated/graphql'
+import { useLoginConnectStore } from '../store/login-connect-store'
+
+gql`
+fragment CloudViewerAndProject on Query {
+  cloudViewer {
+    id
+    fullName
+    email
+    firstOrganization: organizations(first: 1) {
+      nodes {
+        id
+      }
+    }
+  }
+  cachedUser {
+    id
+    fullName
+    email
+  }
+  authState {
+    name
+  }
+  currentProject {
+    id
+    config
+    isFullConfigReady
+    hasNonExampleSpec
+    savedState
+    cloudProject {
+      __typename
+      ... on CloudProject {
+        id
+        runs(first: 10) {
+          nodes {
+            id
+            status
+            url
+          }
+        }
+      }
+    }
+  }
+}
+`
+
+gql`
+query CloudViewerAndProject_RequiredData {
+  ...CloudViewerAndProject
+}
+`
+
+gql`
+subscription CloudViewerAndProject_CheckCloudOrgMembership {
+  cloudViewerChange {
+    ...CloudViewerAndProject
+  }
+}
+`
+
+const loginConnectStore = useLoginConnectStore()
+const {
+  setUserFlag,
+  setProjectFlag,
+  setUserData,
+  setPromptShown,
+  setCypressFirstOpened,
+  setBannersState,
+} = loginConnectStore
+
+useSubscription({ query: CloudViewerAndProject_CheckCloudOrgMembershipDocument })
+
+const query = useQuery({ query: CloudViewerAndProject_RequiredDataDocument })
+
+watchEffect(() => {
+  if (!query.data.value) {
+    return
+  }
+
+  const {
+    currentProject,
+    cachedUser,
+    cloudViewer,
+    authState,
+  } = query.data.value
+
+  const savedState = currentProject?.savedState
+
+  if (savedState?.promptsShown) {
+    for (const item in savedState.promptsShown) {
+      setPromptShown(item, savedState.promptsShown[item])
+    }
+  }
+
+  if (savedState?.firstOpened) {
+    setCypressFirstOpened(savedState.firstOpened)
+  }
+
+  if (savedState?.banners) {
+    setBannersState(savedState.banners)
+  }
+
+  const AUTH_STATE_ERRORS = ['AUTH_COULD_NOT_LAUNCH_BROWSER', 'AUTH_ERROR_DURING_LOGIN', 'AUTH_COULD_NOT_LAUNCH_BROWSER']
+
+  // 1. set user-related information in store
+  setUserData((cloudViewer ?? cachedUser) ?? undefined)
+  setUserFlag('isLoggedIn', !!cachedUser?.id || !!cloudViewer?.id)
+  setUserFlag('loginError', AUTH_STATE_ERRORS.includes(authState?.name ?? ''))
+
+  if (cloudViewer) {
+    // Need to be able to tell whether the lack of `firstOrganization` means they don't have an org or whether it just hasn't loaded yet
+    // Not having this check can cause a brief flicker of the 'Create Org' banner while org data is loading
+    setUserFlag('isOrganizationLoaded', !!cloudViewer.firstOrganization)
+    setUserFlag('isMemberOfOrganization', (cloudViewer.firstOrganization?.nodes?.length ?? 0) > 0)
+  }
+
+  // 2. set project-related information in the store
+  setProjectFlag('isConfigLoaded', !!currentProject?.isFullConfigReady)
+  setProjectFlag('isNotAuthorized', currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized')
+  setProjectFlag('isNotFound', currentProject?.cloudProject?.__typename === 'CloudProjectNotFound')
+  setProjectFlag('hasNonExampleSpec', !!currentProject?.hasNonExampleSpec)
+  setProjectFlag('hasNoRecordedRuns', currentProject?.cloudProject?.__typename === 'CloudProject' && (currentProject.cloudProject?.runs?.nodes?.length ?? 0) === 0)
+
+  if (currentProject?.cloudProject || !loginConnectStore.user.isLoggedIn) {
+    setProjectFlag('isProjectConnected', currentProject?.cloudProject?.__typename === 'CloudProject')
+  }
+})
+
+</script>
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
index f862e47fb101..0a3fd5ca7b8f 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
@@ -1,6 +1,8 @@
 import { HeaderBar_HeaderBarContentFragmentDoc } from '../generated/graphql-test'
 import HeaderBarContent from './HeaderBarContent.vue'
 import { defaultMessages } from '@cy/i18n'
+import { CloudUserStubs } from '@packages/graphql/test/stubCloudTypes'
+import { useLoginConnectStore } from '../store/login-connect-store'
 
 const text = defaultMessages.topNav
 
@@ -292,31 +294,25 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     cy.contains(`${defaultMessages.topNav.updateCypress.title} 8.7.0`).should('not.exist')
   })
 
-  it('the login modal reaches "opening browser" status', () => {
-    mountFragmentWithData()
-
-    cy.findByRole('button', { name: text.login.actionLogin })
-    .click()
-
-    cy.contains('h2', text.login.titleInitial).should('be.visible')
-    cy.percySnapshot()
-
-    cy.findByRole('button', { name: text.login.actionLogin })
-    .should('be.visible')
-    .and('have.focus')
-
-    cy.findByRole('button', { name: defaultMessages.actions.close }).click()
+  it('the logged in state is correctly presented in header', () => {
+    const loginConnectStore = useLoginConnectStore()
 
-    cy.contains('h2', text.login.titleInitial).should('not.exist')
-  })
+    loginConnectStore.setUserFlag('isLoggedIn', true)
 
-  it('the logged in state is correctly presented in header', () => {
     const cloudViewer = {
+      ...CloudUserStubs.me,
+      organizations: null,
+      firstOrganization: {
+        __typename: 'CloudOrganizationConnection' as const,
+        nodes: [],
+      },
       id: '1',
       email: 'test@test.test',
       fullName: 'Tester Test',
     }
 
+    loginConnectStore.setUserData(cloudViewer)
+
     cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
       onResult: (result) => {
         result.__typename = 'Query'
@@ -376,6 +372,12 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
           cy.clock(1609891200000)
         })
 
+        afterEach(() => {
+          // Setting the clock in the beforeEach was causing the cy.checkA11y call in cy.percySnapshot to timeout only in open mode.  Resetting
+          // the clock here prevents that timeout
+          cy.clock().invoke('restore')
+        })
+
         function mountWithSavedState (options?: {state?: object, projectId?: string }) {
           const mountResult = cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
             onResult: (result) => {
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
index 3c44d6d39c7f..fee774a9cda2 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -94,18 +94,18 @@
           @clear-force-open="isForceOpenAllowed = false"
         >
           <template
-            v-if="userData"
+            v-if="loginConnectStore.user.isLoggedIn"
             #login-title
           >
             <UserAvatar
-              :email="userData?.email"
+              :email="loginConnectStore.userData?.email"
               class="h-24px w-24px"
               data-cy="user-avatar-title"
             />
             <span class="sr-only">{{ t('topNav.login.profileMenuLabel') }}</span>
           </template>
           <template
-            v-if="userData"
+            v-if="loginConnectStore.userData"
             #login-panel
           >
             <div
@@ -114,14 +114,14 @@
             >
               <div class="border-b flex border-b-gray-100 p-16px">
                 <UserAvatar
-                  :email="userData?.email"
+                  :email="loginConnectStore.userData?.email"
                   class="h-48px mr-16px w-48px"
                   data-cy="user-avatar-panel"
                 />
                 <div>
-                  <span class="text-gray-800">{{ userData?.fullName }}</span>
+                  <span class="text-gray-800">{{ loginConnectStore.userData?.fullName }}</span>
                   <br>
-                  <span class="text-gray-600">{{ userData?.email }}</span>
+                  <span class="text-gray-600">{{ loginConnectStore.userData?.email }}</span>
                   <br>
                   <ExternalLink
                     href="https://on.cypress.io/dashboard/profile"
@@ -141,10 +141,10 @@
             </div>
           </template>
         </TopNav>
-        <div v-if="!userData">
+        <div v-if="!loginConnectStore.user.isLoggedIn">
           <button
             class="flex text-gray-600 items-center group focus:outline-transparent"
-            @click="openLogin"
+            @click="loginConnectStore.openLoginConnectModal({ utmMedium: 'Nav' })"
           >
             <i-cy-profile_x16
               class="h-16px mr-8px w-16px block icon-dark-gray-500 icon-light-gray-100 group-hocus:icon-dark-indigo-500 group-hocus:icon-light-indigo-50"
@@ -153,13 +153,6 @@
           </button>
         </div>
       </div>
-      <LoginModal
-        v-model="isLoginOpen"
-        :gql="props.gql"
-        utm-medium="Nav"
-        :show-connect-button-after-login="isApp && !cloudProjectId"
-        @connect-project="handleConnectProject"
-      />
     </div>
   </div>
 </template>
@@ -173,7 +166,6 @@ import {
   HeaderBarContent_AuthChangeDocument,
 } from '../generated/graphql'
 import TopNav from './topnav/TopNav.vue'
-import LoginModal from './topnav/LoginModal.vue'
 import UserAvatar from './topnav/UserAvatar.vue'
 import Auth from './Auth.vue'
 import { useI18n } from '@cy/i18n'
@@ -182,6 +174,9 @@ import interval from 'human-interval'
 import { sortBy } from 'lodash'
 import Tooltip from '../components/Tooltip.vue'
 import type { AllowedState } from '@packages/types'
+import { useLoginConnectStore } from '../store/login-connect-store'
+
+const loginConnectStore = useLoginConnectStore()
 
 gql`
 fragment HeaderBarContent_Auth on Query {
@@ -243,10 +238,6 @@ fragment HeaderBar_HeaderBarContent on Query {
 }
 `
 
-const userData = computed(() => {
-  return props.gql.cloudViewer ?? props.gql.cachedUser
-})
-
 const savedState = computed(() => {
   return props.gql?.currentProject?.savedState as AllowedState
 })
@@ -257,13 +248,8 @@ const cloudProjectId = computed(() => {
   return props.gql?.currentProject?.config?.find((item: { field: string }) => item.field === 'projectId')?.value
 })
 
-const isLoginOpen = ref(false)
 const clearCurrentProjectMutation = useMutation(GlobalPageHeader_ClearCurrentProjectDocument)
 
-const openLogin = () => {
-  isLoginOpen.value = true
-}
-
 const clearCurrentProject = () => {
   if (currentProject.value) {
     clearCurrentProjectMutation.executeMutation({})
@@ -277,16 +263,6 @@ const props = defineProps<{
   allowAutomaticPromptOpen?: boolean
 }>()
 
-const emit = defineEmits<{
-  (event: 'connect-project'): void
-}>()
-
-const isApp = window.__Cypress__
-
-const handleConnectProject = () => {
-  emit('connect-project')
-}
-
 const { t } = useI18n()
 const prompts = sortBy([
   {
diff --git a/packages/frontend-shared/src/gql-components/LoginConnectModals.vue b/packages/frontend-shared/src/gql-components/LoginConnectModals.vue
new file mode 100644
index 000000000000..9fd893d3729c
--- /dev/null
+++ b/packages/frontend-shared/src/gql-components/LoginConnectModals.vue
@@ -0,0 +1,51 @@
+<!--
+/**==============================================
+ * *             LoginConnectModals.vue
+ *
+ * Logging in to the Cypress Dashboard and connecting/creating projects
+ * represent a set of mutually-exclusive steps in a flow.
+ *
+ * The LoginConnectModals component is intended to be rendered
+ * in one place per Vue application (App or Launchpad). It will derive
+ * the correct current step of the flow based on information from GQL,
+ * the login-connect-store, and its internal component state.
+ *
+ * This means that other components do not have to manage
+ * multiple instances of these modals. Instead, they can call the
+ * `openLoginConnectModal` method from the login-connect-store.
+ * and expect that everything will work correctly from there.
+ *
+ * For example usage, see CloudConnectButton.vue or HeaderBarContent.vue
+ *
+ * ============================================**/
+-->
+
+<template>
+  <LoginConnectModalsContent
+    v-if="loginConnectStore.isLoginConnectOpen"
+    :gql="query.data.value"
+  />
+</template>
+<script setup lang="ts">
+import LoginConnectModalsContent from './LoginConnectModalsContent.vue'
+import { gql, useQuery } from '@urql/vue'
+import { LoginConnectModals_LoginConnectModalsQueryDocument } from '../generated/graphql'
+import { useLoginConnectStore } from '../store/login-connect-store'
+import { whenever } from '@vueuse/core'
+const loginConnectStore = useLoginConnectStore()
+
+gql`
+query LoginConnectModals_LoginConnectModalsQuery {
+  ...LoginConnectModalsContent
+}
+`
+
+const query = useQuery({ query: LoginConnectModals_LoginConnectModalsQueryDocument, pause: true })
+
+const executeQuery = async () => {
+  await query.executeQuery()
+}
+
+whenever(() => loginConnectStore.isLoginConnectOpen, executeQuery)
+
+</script>
diff --git a/packages/frontend-shared/src/gql-components/LoginConnectModalsContent.cy.tsx b/packages/frontend-shared/src/gql-components/LoginConnectModalsContent.cy.tsx
new file mode 100644
index 000000000000..ba64ce522afd
--- /dev/null
+++ b/packages/frontend-shared/src/gql-components/LoginConnectModalsContent.cy.tsx
@@ -0,0 +1,102 @@
+import { LoginConnectModalsContentFragmentDoc } from '../generated/graphql-test'
+import LoginConnectModalsContent from './LoginConnectModalsContent.vue'
+import { CloudUserStubs } from '@packages/graphql/test/stubCloudTypes'
+import { SelectCloudProjectModal_CreateCloudProjectDocument } from '../generated/graphql'
+
+import { useLoginConnectStore } from '../store/login-connect-store'
+
+describe('<LoginConnectModalsContent />', () => {
+  context('when user is logged out', () => {
+    it('shows login modal', () => {
+      const { openLoginConnectModal } = useLoginConnectStore()
+
+      cy.mountFragment(LoginConnectModalsContentFragmentDoc, {
+        onResult: (result) => {
+          result.cloudViewer = null
+        },
+        render: (gqlVal) => {
+          return <LoginConnectModalsContent gql={gqlVal} />
+        },
+      })
+
+      cy.contains('Log in to Cypress')
+      .should('not.exist')
+      .then(() => {
+        openLoginConnectModal({ utmMedium: 'testing' })
+
+        cy.contains('Log in to Cypress').should('be.visible')
+      })
+    })
+  })
+
+  context('when user is logged in', () => {
+    it('shows "Create Project" state if project is not set up', () => {
+      const { openLoginConnectModal, setUserFlag, setProjectFlag } = useLoginConnectStore()
+
+      setUserFlag('isLoggedIn', true)
+      setUserFlag('isMemberOfOrganization', true)
+      setUserFlag('isOrganizationLoaded', true)
+      setProjectFlag('isConfigLoaded', true)
+      setProjectFlag('isProjectConnected', false)
+
+      cy.mountFragment(LoginConnectModalsContentFragmentDoc, {
+        onResult: (result) => {
+          result.cloudViewer = { ...CloudUserStubs.me,
+            firstOrganization: {
+              __typename: 'CloudOrganizationConnection',
+              nodes: [{ __typename: 'CloudOrganization', id: '122' }],
+            },
+            organizations: {
+              __typename: 'CloudOrganizationConnection',
+              nodes: [{
+                __typename: 'CloudOrganization',
+                name: `Cypress Test Account`,
+                id: '122',
+                projects: {
+                  nodes: [],
+                },
+              }],
+            },
+          }
+
+          result.currentProject = null
+        },
+        render: (gqlVal) => {
+          return <LoginConnectModalsContent gql={gqlVal} />
+        },
+      })
+
+      const createProjectStub = cy.stub().as('createProjectStub')
+
+      cy.stubMutationResolver(SelectCloudProjectModal_CreateCloudProjectDocument, (defineResult, variables) => {
+        createProjectStub(variables)
+
+        return defineResult({} as any)
+      })
+
+      cy.contains('Create project')
+      .should('not.exist')
+      .then(() => {
+        openLoginConnectModal({ utmMedium: 'testing' })
+      })
+
+      cy.findAllByLabelText('Project name*(You can change this later)').type('test-project')
+
+      cy.contains('button', 'Create project')
+      .click()
+      .then(() => {
+        expect(createProjectStub.lastCall.args[0]).to.deep.eq({
+          name: 'test-project',
+          orgId: '122',
+          medium: 'testing',
+          source: 'Binary: Launchpad',
+          public: false,
+          campaign: 'Create project',
+          cohort: '',
+        })
+      })
+
+      cy.get('@createProjectStub').should('have.been.calledOnce')
+    })
+  })
+})
diff --git a/packages/frontend-shared/src/gql-components/LoginConnectModalsContent.vue b/packages/frontend-shared/src/gql-components/LoginConnectModalsContent.vue
new file mode 100644
index 000000000000..f8bca76719ec
--- /dev/null
+++ b/packages/frontend-shared/src/gql-components/LoginConnectModalsContent.vue
@@ -0,0 +1,92 @@
+<template>
+  <template v-if="loginConnectStore.isLoginConnectOpen && gqlRef">
+    <LoginModal
+      v-if="userStatusMatches('isLoggedOut') || keepLoginOpen"
+      :gql="gqlRef"
+      :utm-medium="loginConnectStore.utmMedium"
+      @cancel="closeLoginConnectModal"
+      @close="handleCloseLogin"
+    />
+    <RecordRunModal
+      v-else-if="userStatusMatches('needsRecordedRun')"
+      :utm-medium="loginConnectStore.utmMedium"
+      @cancel="closeLoginConnectModal"
+    />
+    <CloudConnectModals
+      v-else-if="userStatusMatches('needsProjectConnect') || userStatusMatches('needsOrgConnect')"
+      :show="loginConnectStore.user.isLoggedIn"
+      :gql="gqlRef"
+      :utm-medium="loginConnectStore.utmMedium"
+      @cancel="closeLoginConnectModal"
+      @success="closeLoginConnectModal"
+    />
+  </template>
+</template>
+<script setup lang="ts">
+import { gql } from '@urql/vue'
+import type { LoginConnectModalsContentFragment } from '../generated/graphql'
+import LoginModal from './modals/LoginModal.vue'
+import { ref, watch } from 'vue'
+import { useLoginConnectStore } from '../store/login-connect-store'
+import CloudConnectModals from './modals/CloudConnectModals.vue'
+import RecordRunModal from './RecordRunModal.vue'
+import { debouncedWatch } from '@vueuse/core'
+
+gql`
+fragment LoginConnectModalsContent on Query {
+  ...LoginModal
+  ...CloudConnectModals
+  currentProject {
+    id
+    currentTestingType
+  }
+}
+`
+
+const props = defineProps<{
+  gql?: LoginConnectModalsContentFragment
+}>()
+
+const loginConnectStore = useLoginConnectStore()
+const { closeLoginConnectModal, userStatusMatches } = loginConnectStore
+
+// use this to hold login open after the transition between logged out and logged in
+// this is to show the temporary "continue" state and its variations
+// that only exist if you have used the modal to log in
+const keepLoginOpen = ref(false)
+
+watch(() => loginConnectStore.userStatus, (newVal, oldVal) => {
+  if (oldVal === 'isLoggedOut' && newVal !== 'isLoggedOut') {
+    keepLoginOpen.value = true
+  }
+}, {
+  immediate: true,
+})
+
+const handleCloseLogin = () => {
+  if (userStatusMatches('allTasksCompleted')) {
+    closeLoginConnectModal()
+  } else {
+    keepLoginOpen.value = false
+  }
+}
+
+// TODO: confirm why `props.gql` is briefly null in tests after initial render.
+// Are we doing a reset somewhere as part of the testing setup?
+
+// We debounce gql because, in tests, the gql prop can sometimes be `null`
+// for a split second, causing "Detached from DOM" problems, so we are
+//debouncing gql before it gets passed into the login/connect/record modals.
+// This seems like a good idea anyway, it will also prevent flashes of very temporary states
+const gqlRef = ref<LoginConnectModalsContentFragment | null>(null)
+
+debouncedWatch(() => props.gql, (newVal) => {
+  if (newVal) {
+    gqlRef.value = newVal
+  }
+}, {
+  debounce: 10,
+  immediate: true,
+})
+
+</script>
diff --git a/packages/frontend-shared/src/gql-components/RecordRunModal.cy.tsx b/packages/frontend-shared/src/gql-components/RecordRunModal.cy.tsx
index d9f3fa7eff6e..b00c95b29a96 100644
--- a/packages/frontend-shared/src/gql-components/RecordRunModal.cy.tsx
+++ b/packages/frontend-shared/src/gql-components/RecordRunModal.cy.tsx
@@ -1,20 +1,25 @@
 import RecordRunModalVue from './RecordRunModal.vue'
 import { defaultMessages } from '@cy/i18n'
+import { UsePromptManager_SetPreferencesDocument } from '../generated/graphql-test'
 
 describe('RecordRunModal', () => {
-  it('is not open by default', () => {
-    cy.mount(<RecordRunModalVue isModalOpen={false} close={cy.stub()} utmMedium="Nav" />)
+  it('renders and records that it has been shown', () => {
+    const now = Date.now()
 
-    cy.findByTestId('record-run-modal').should('not.exist')
-  })
+    cy.clock(now)
+    const setPreferencesStub = cy.stub()
+
+    cy.stubMutationResolver(UsePromptManager_SetPreferencesDocument, (defineResult, { value }) => {
+      setPreferencesStub(JSON.parse(value))
+    })
 
-  it('renders open', () => {
-    cy.mount(<RecordRunModalVue isModalOpen={true} close={cy.stub()} utmMedium="Nav" />)
+    cy.mount(<RecordRunModalVue utmMedium="Nav" />)
 
     cy.contains(defaultMessages.specPage.banners.record.title).should('be.visible')
     cy.findByTestId('copy-button').should('be.visible')
 
     cy.findByDisplayValue('npx cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa').should('be.visible')
+    cy.wrap(setPreferencesStub).should('have.been.calledWithMatch', { promptsShown: { loginModalRecord: now } })
 
     cy.percySnapshot()
   })
@@ -22,7 +27,7 @@ describe('RecordRunModal', () => {
   it('calls close when X is clicked', () => {
     const closeStub = cy.stub()
 
-    cy.mount(<RecordRunModalVue isModalOpen={true} close={closeStub} utmMedium="Nav" />)
+    cy.mount(<RecordRunModalVue onCancel={closeStub} utmMedium="Nav" />)
 
     cy.findByRole('button', { name: defaultMessages.actions.close }).click().then(() => {
       expect(closeStub).to.have.been.called
@@ -30,13 +35,13 @@ describe('RecordRunModal', () => {
   })
 
   it('sends UTM parameters with help link', () => {
-    cy.mount(<RecordRunModalVue isModalOpen={true} close={cy.stub()} utmMedium="Nav" utmContent="content" />)
+    cy.mount(<RecordRunModalVue utmMedium="Nav" utmContent="content" />)
 
     cy.contains(defaultMessages.links.needHelp).should('have.attr', 'href', 'https://on.cypress.io/cypress-run-record-key?utm_medium=Nav&utm_source=Binary%3A+Launchpad&utm_content=content')
   })
 
   it('sends UTM parameters with help link without UTM content prop', () => {
-    cy.mount(<RecordRunModalVue isModalOpen={true} close={cy.stub()} utmMedium="Nav" />)
+    cy.mount(<RecordRunModalVue utmMedium="Nav" />)
 
     cy.contains(defaultMessages.links.needHelp).should('have.attr', 'href', 'https://on.cypress.io/cypress-run-record-key?utm_medium=Nav&utm_source=Binary%3A+Launchpad&utm_content=')
   })
diff --git a/packages/frontend-shared/src/gql-components/RecordRunModal.vue b/packages/frontend-shared/src/gql-components/RecordRunModal.vue
index 4b4a6bcb132f..e68789a8c607 100644
--- a/packages/frontend-shared/src/gql-components/RecordRunModal.vue
+++ b/packages/frontend-shared/src/gql-components/RecordRunModal.vue
@@ -7,7 +7,7 @@
     :help-link="helpLink"
     :no-help="!helpLink"
     data-cy="record-run-modal"
-    @update:model-value="close"
+    @update:model-value="emit('cancel')"
   >
     <div class="max-w-175 py-7 px-6 text-gray-600">
       <p class="mb-24px">
@@ -24,16 +24,28 @@ import StandardModal from '../components/StandardModal.vue'
 import RecordPromptAdapter from './RecordPromptAdapter.vue'
 import { getUtmSource } from '../utils/getUtmSource'
 import { getUrlWithParams } from '../utils/getUrlWithParams'
+import { usePromptManager } from './composables/usePromptManager'
+import { onMounted, ref } from 'vue'
+
+const { setPromptShown } = usePromptManager()
+
+onMounted(() => {
+  setPromptShown('loginModalRecord')
+})
 
 const { t } = useI18n()
 
+const isModalOpen = ref(true)
+
 const props = defineProps<{
-  isModalOpen: boolean
-  close: () => void
   utmMedium: string
   utmContent?: string
 }>()
 
+const emit = defineEmits<{
+  (eventName: 'cancel'): void
+}>()
+
 const helpLink = getUrlWithParams({
   url: 'https://on.cypress.io/cypress-run-record-key',
   params: {
diff --git a/packages/frontend-shared/src/composables/useCohorts.ts b/packages/frontend-shared/src/gql-components/composables/useCohorts.ts
similarity index 97%
rename from packages/frontend-shared/src/composables/useCohorts.ts
rename to packages/frontend-shared/src/gql-components/composables/useCohorts.ts
index 9e417746fe81..c4dc113f1def 100644
--- a/packages/frontend-shared/src/composables/useCohorts.ts
+++ b/packages/frontend-shared/src/gql-components/composables/useCohorts.ts
@@ -1,5 +1,5 @@
 import { useMutation, gql } from '@urql/vue'
-import { UseCohorts_DetermineCohortDocument } from '../generated/graphql'
+import { UseCohorts_DetermineCohortDocument } from '../../generated/graphql'
 import { ref } from 'vue'
 
 gql`
diff --git a/packages/frontend-shared/src/gql-components/composables/usePromptManager.ts b/packages/frontend-shared/src/gql-components/composables/usePromptManager.ts
new file mode 100644
index 000000000000..52a5168c75b4
--- /dev/null
+++ b/packages/frontend-shared/src/gql-components/composables/usePromptManager.ts
@@ -0,0 +1,42 @@
+import { gql, useMutation } from '@urql/vue'
+import { UsePromptManager_SetPreferencesDocument } from '../../generated/graphql'
+import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store'
+import { isAllowedFeature } from '../../utils/isAllowedFeature'
+
+gql`
+mutation UsePromptManager_SetPreferences($value: String!) {
+  setPreferences(type: project, value: $value) {
+    currentProject {
+      id
+      savedState
+    }
+  }
+}
+`
+
+gql`
+query UsePromptManager_RefreshProject {
+  currentProject {
+    id
+    savedState
+  }
+}
+`
+
+export function usePromptManager () {
+  const setPreferencesMutation = useMutation(UsePromptManager_SetPreferencesDocument)
+  const loginConnectStore = useLoginConnectStore()
+
+  function setPromptShown (slug) {
+    setPreferencesMutation.executeMutation({ value: JSON.stringify({ promptsShown: { [slug]: Date.now() } }) })
+  }
+
+  const wrappedIsAllowedFeature = (featureName: 'specsListBanner' | 'docsCiPrompt') => {
+    return isAllowedFeature(featureName, loginConnectStore)
+  }
+
+  return {
+    setPromptShown,
+    isAllowedFeature: wrappedIsAllowedFeature,
+  }
+}
diff --git a/packages/app/src/runs/modals/CloudConnectModals.spec.tsx b/packages/frontend-shared/src/gql-components/modals/CloudConnectModals.spec.tsx
similarity index 95%
rename from packages/app/src/runs/modals/CloudConnectModals.spec.tsx
rename to packages/frontend-shared/src/gql-components/modals/CloudConnectModals.spec.tsx
index 4536838f238d..7e752b3dcce4 100644
--- a/packages/app/src/runs/modals/CloudConnectModals.spec.tsx
+++ b/packages/frontend-shared/src/gql-components/modals/CloudConnectModals.spec.tsx
@@ -25,6 +25,10 @@ describe('<CloudConnectModals />', () => {
         result.cloudViewer = {
           ...CloudUserStubs.me,
           organizations: hasOrg ? cloneDeep(CloudOrganizationConnectionStubs) : null,
+          firstOrganization: {
+            __typename: 'CloudOrganizationConnection',
+            nodes: [],
+          },
         }
 
         if (!hasProjects) {
diff --git a/packages/app/src/runs/modals/CloudConnectModals.vue b/packages/frontend-shared/src/gql-components/modals/CloudConnectModals.vue
similarity index 72%
rename from packages/app/src/runs/modals/CloudConnectModals.vue
rename to packages/frontend-shared/src/gql-components/modals/CloudConnectModals.vue
index 234159a9f851..ba8ff834a09a 100644
--- a/packages/app/src/runs/modals/CloudConnectModals.vue
+++ b/packages/frontend-shared/src/gql-components/modals/CloudConnectModals.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import SelectCloudProjectModal from './SelectCloudProjectModal.vue'
 import CreateCloudOrgModal from './CreateCloudOrgModal.vue'
 import NeedManualUpdateModal from './NeedManualUpdateModal.vue'
-import { gql, useMutation, useSubscription } from '@urql/vue'
+import { gql, useSubscription } from '@urql/vue'
 import type { CloudConnectModalsFragment } from '../../generated/graphql'
-import { CloudConnectModals_MonitorCloudViewerDocument, CloudConnectModals_RefreshCloudViewerDocument } from '../../generated/graphql'
+import { CloudConnectModals_MonitorCloudViewerDocument } from '../../generated/graphql'
 
 gql`
 fragment CloudConnectModals on Query {
@@ -39,6 +39,11 @@ fragment CloudConnectModals on Query {
   cloudViewer {
     id
     ...CreateCloudOrgModal
+    firstOrganization: organizations(first: 1) {
+      nodes {
+        id
+      }
+    }
   }
   currentProject{
     id
@@ -55,16 +60,7 @@ subscription CloudConnectModals_MonitorCloudViewer {
 }
 `
 
-gql`
-mutation CloudConnectModals_RefreshCloudViewer {
-  refreshCloudViewer {
-    ...CloudConnectModals
-  }
-}
-`
-
 useSubscription({ query: CloudConnectModals_MonitorCloudViewerDocument })
-const refreshCloudViewer = useMutation(CloudConnectModals_RefreshCloudViewerDocument)
 
 const emit = defineEmits<{
   (event: 'success'): void
@@ -80,14 +76,6 @@ const props = defineProps<{
 const newProjectId = ref('')
 const isManualUpdateOpen = ref(false)
 
-onMounted(() => {
-  /*
-  Force-refresh of cloudViewer data so that latest orgs and projects are displayed in connect modals
-  (useful if projects have been created/deleted since user opened the app)
-  */
-  refreshCloudViewer.executeMutation({})
-})
-
 function showManualUpdate (projectId: string) {
   newProjectId.value = projectId
   isManualUpdateOpen.value = true
diff --git a/packages/app/src/runs/modals/CreateCloudOrgModal.spec.tsx b/packages/frontend-shared/src/gql-components/modals/CreateCloudOrgModal.spec.tsx
similarity index 100%
rename from packages/app/src/runs/modals/CreateCloudOrgModal.spec.tsx
rename to packages/frontend-shared/src/gql-components/modals/CreateCloudOrgModal.spec.tsx
diff --git a/packages/app/src/runs/modals/CreateCloudOrgModal.vue b/packages/frontend-shared/src/gql-components/modals/CreateCloudOrgModal.vue
similarity index 97%
rename from packages/app/src/runs/modals/CreateCloudOrgModal.vue
rename to packages/frontend-shared/src/gql-components/modals/CreateCloudOrgModal.vue
index fe9282edd0ae..16b03b55d4ee 100644
--- a/packages/app/src/runs/modals/CreateCloudOrgModal.vue
+++ b/packages/frontend-shared/src/gql-components/modals/CreateCloudOrgModal.vue
@@ -19,6 +19,7 @@
         {{ t('runs.connect.modal.createOrg.description') }}
       </p>
       <ExternalLink
+        v-if="createOrgUrl"
         class="border rounded mx-auto outline-none bg-indigo-500 border-indigo-500 text-white max-h-60px py-11px px-16px inline-block hocus-default"
         :href="createOrgUrl"
         :include-graphql-port="true"
@@ -69,7 +70,7 @@ import { computed, onBeforeUnmount, ref } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import StandardModal from '@cy/components/StandardModal.vue'
 import Button from '@cy/components/Button.vue'
-import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import ExternalLink from '../ExternalLink.vue'
 import NoInternetConnection from '@cy/components/NoInternetConnection.vue'
 
 import { CreateCloudOrgModalFragment, CreateCloudOrgModal_CloudOrganizationsCheckDocument } from '../../generated/graphql'
@@ -122,7 +123,7 @@ onBeforeUnmount(() => {
   window.clearTimeout(timer)
 })
 
-const createOrgUrl = computed(() => props.gql.createCloudOrganizationUrl || '#')
+const createOrgUrl = computed(() => props.gql.createCloudOrganizationUrl)
 const isOnline = computed(() => online.value)
 
 </script>
diff --git a/packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx b/packages/frontend-shared/src/gql-components/modals/LoginModal.cy.tsx
similarity index 74%
rename from packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx
rename to packages/frontend-shared/src/gql-components/modals/LoginModal.cy.tsx
index 2c2f4ca34fa6..a62e61e0d2d6 100644
--- a/packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx
+++ b/packages/frontend-shared/src/gql-components/modals/LoginModal.cy.tsx
@@ -3,6 +3,8 @@ import LoginModal from './LoginModal.vue'
 import { defaultMessages } from '@cy/i18n'
 import Tooltip from '../../components/Tooltip.vue'
 import { ref } from 'vue'
+import { CloudUserStubs } from '@packages/graphql/test/stubCloudTypes'
+import { useLoginConnectStore } from '../../store'
 
 const text = defaultMessages.topNav
 
@@ -26,18 +28,30 @@ type TestCloudViewer = {
 }
 
 const mountSuccess = (viewer: TestCloudViewer = cloudViewer) => {
+  const finalViewer = {
+    ...CloudUserStubs.me,
+    organizations: null,
+    firstOrganization: {
+      __typename: 'CloudOrganizationConnection' as const,
+      nodes: [],
+    },
+    ...viewer,
+  }
+
+  const { setUserFlag } = useLoginConnectStore()
+
+  setUserFlag('isLoggedIn', true)
   cy.mountFragment(LoginModalFragmentDoc, {
     onResult: (result) => {
       result.__typename = 'Query'
       result.authState.browserOpened = true
-      result.cloudViewer = viewer
+      result.cloudViewer = finalViewer
       result.cloudViewer.__typename = 'CloudUser'
     },
     render: (gqlVal) => (
       <div class="border-current border-1 h-700px resize overflow-auto">
         <LoginModal
           gql={gqlVal}
-          modelValue={true}
           utmMedium="testing"
         />
       </div>),
@@ -48,7 +62,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
   describe('progress communication', () => {
     it('renders and reaches "opening browser" status', () => {
       cy.mountFragment(LoginModalFragmentDoc, {
-        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing" /></div>,
+        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} utmMedium="testing" /></div>,
       })
 
       cy.contains('h2', text.login.titleInitial).should('be.visible')
@@ -68,7 +82,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
         render: (gqlVal) => {
           gqlVal.authState.browserOpened = true
 
-          return <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing" /></div>
+          return <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} utmMedium="testing" /></div>
         },
       })
 
@@ -85,48 +99,6 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
       cy.contains(text.login.bodySuccess.replace('{0}', cloudViewer.fullName)).should('be.visible')
       cy.contains('a', cloudViewer.fullName).should('have.attr', 'href', 'https://on.cypress.io/dashboard/profile')
     })
-
-    it('shows "connect project" after login if required by prop, and emits expected events', () => {
-      const connectProjectLabel = defaultMessages.runs.connect.modal.selectProject.connectProject
-      const connectProjectSpy = cy.spy().as('connectProjectSpy')
-      const loggedInSpy = cy.spy().as('loggedInSpy')
-      const updateModelSpy = cy.spy().as('updateModelSpy')
-
-      const props = {
-        'onUpdate:modelValue': (value: boolean) => {
-          updateModelSpy(value)
-        },
-        'onConnect-project': () => connectProjectSpy(),
-      }
-
-      // mount with extra event spies
-      cy.mountFragment(LoginModalFragmentDoc, {
-        onResult: (result) => {
-          result.__typename = 'Query'
-          result.authState.browserOpened = true
-          result.cloudViewer = cloudViewer
-          result.cloudViewer.__typename = 'CloudUser'
-        },
-        render: (gqlVal) => (
-          <div class="border-current border-1 h-700px resize overflow-auto">
-            <LoginModal
-              gql={gqlVal}
-              modelValue={true}
-              utmMedium="testing"
-              showConnectButtonAfterLogin={true}
-              onLoggedin={loggedInSpy}
-              {...props}
-            />
-          </div>),
-      })
-
-      cy.contains('button', connectProjectLabel)
-      .click()
-
-      cy.get('@connectProjectSpy').should('have.been.calledOnce')
-      cy.get('@loggedInSpy').should('have.been.calledOnce')
-      cy.get('@updateModelSpy').should('have.been.calledOnceWith', false)
-    })
   })
 
   describe('errors', () => {
@@ -141,7 +113,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
         },
         render: (gqlVal) =>
           (<div class="border-current border-1 h-700px resize overflow-auto">
-            <LoginModal gql={gqlVal} modelValue={true} utmMedium="testing"/>
+            <LoginModal gql={gqlVal} utmMedium="testing"/>
           </div>),
       })
 
@@ -155,12 +127,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
     })
 
     it('shows non-browser errors from login process', () => {
-      const updateSpy = cy.spy().as('updateSpy')
-      const methods = {
-        'onUpdate:modelValue': (newValue) => {
-          updateSpy(newValue)
-        },
-      }
+      const cancelSpy = cy.spy().as('cancelSpy')
       const errorText = 'The flux capacitor ran out of battery'
 
       cy.mountFragment(LoginModalFragmentDoc, {
@@ -169,7 +136,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
           gqlVal.authState.message = errorText
 
           return (<div class="border-current border-1 h-700px resize overflow-auto">
-            <LoginModal gql={gqlVal} modelValue={true} {...methods} utmMedium="testing"/>
+            <LoginModal gql={gqlVal} onCancel={cancelSpy} utmMedium="testing"/>
           </div>)
         },
       })
@@ -183,7 +150,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
 
       // but we can test that cancelling closes the modal here:
       cy.contains('button', text.login.actionCancel).click()
-      cy.get('@updateSpy').should('have.been.calledWith', false)
+      cy.get('@cancelSpy').should('have.been.called')
     })
   })
 
@@ -197,8 +164,8 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
   it('emits an event to close the modal when "Continue" button is clicked', () => {
     mountSuccess()
     cy.findByRole('button', { name: text.login.actionContinue }).click().then(() => {
-      cy.wrap(Cypress.vueWrapper.findComponent(LoginModal).emitted('update:modelValue')?.[0])
-      .should('deep.equal', [false])
+      cy.wrap(Cypress.vueWrapper.findComponent(LoginModal).emitted('close'))
+      .should('have.length', 1)
     })
   })
 
@@ -209,7 +176,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
 
     it('renders correct components if there is no internet connection', () => {
       cy.mountFragment(LoginModalFragmentDoc, {
-        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing"/></div>,
+        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} utmMedium="testing"/></div>,
       })
 
       cy.goOffline()
@@ -222,7 +189,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
 
     it('shows login action when the internet is back', () => {
       cy.mountFragment(LoginModalFragmentDoc, {
-        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing"/></div>,
+        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} utmMedium="testing"/></div>,
       })
 
       cy.goOffline()
@@ -260,7 +227,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
         return (
           <div>
             <Tooltip v-slots={tooltipSlots} isInteractive />
-            <LoginModal gql={gqlVal} utmMedium="testing" modelValue={isOpen.value} />
+            {isOpen.value && <LoginModal gql={gqlVal} utmMedium="testing" />}
           </div>
         )
       },
diff --git a/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue b/packages/frontend-shared/src/gql-components/modals/LoginModal.vue
similarity index 79%
rename from packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
rename to packages/frontend-shared/src/gql-components/modals/LoginModal.vue
index 1a9b876d55a0..1527cfdd991e 100644
--- a/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
+++ b/packages/frontend-shared/src/gql-components/modals/LoginModal.vue
@@ -1,8 +1,8 @@
 <template>
   <Dialog
-    :open="modelValue"
+    open
     class="inset-0 z-50 fixed overflow-y-auto"
-    @close="setIsOpen"
+    @close="cancelLogin"
   >
     <div class="flex min-h-screen items-center justify-center">
       <DialogOverlay class="bg-gray-800 opacity-90 inset-0 fixed" />
@@ -11,7 +11,7 @@
         <StandardModalHeader
           help-link="https://on.cypress.io"
           :help-text="t('links.needHelp')"
-          @close="setIsOpen(false)"
+          @close="cancelLogin"
         >
           {{ title }}
         </StandardModalHeader>
@@ -81,9 +81,8 @@
             :show-retry="!!error"
             :utm-medium="props.utmMedium"
             :utm-content="props.utmContent"
-            :show-connect-button-after-login="props.showConnectButtonAfterLogin"
-            @continue="continueAuth"
-            @connect-project="handleConnectProject"
+            @close="emit('close')"
+            @cancel="emit('cancel')"
           />
         </div>
       </div>
@@ -93,7 +92,7 @@
 <script setup lang="ts">
 import { useI18n } from '@cy/i18n'
 import { gql } from '@urql/core'
-import { computed, watch } from 'vue'
+import { computed } from 'vue'
 import Auth from '../Auth.vue'
 import ExternalLink from '../ExternalLink.vue'
 import { useOnline } from '@vueuse/core'
@@ -112,32 +111,15 @@ import type { LoginModalFragment } from '../../generated/graphql'
 
 const online = useOnline()
 
-function continueAuth (isLoggedIn: boolean) {
-  if (isLoggedIn) {
-    emit('loggedin')
-  }
-
-  emit('update:modelValue', false)
-}
-
-function handleConnectProject () {
-  emit('loggedin')
-  emit('connect-project')
-  emit('update:modelValue', false)
-}
-
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
-  (event: 'loggedin'): void
-  (event: 'connect-project'): void
+  (event: 'close'): void
+  (event: 'cancel'): void
 }>()
 
 const props = defineProps<{
-  modelValue: boolean
   gql: LoginModalFragment
   utmMedium: string
   utmContent?: string
-  showConnectButtonAfterLogin?: boolean
 }>()
 
 gql`
@@ -146,21 +128,8 @@ fragment LoginModal on Query {
 }
 `
 
-// Ensure all tooltips are closed when the modal opens - this prevents tooltips from beneath that
-// are stuck open being rendered on top of the modal due to the use of a fixed z-index in `floating-vue`
-watch(
-  () => props.modelValue,
-  (value) => {
-    if (value) {
-      hideAllPoppers()
-    }
-  },
-  { immediate: true },
-)
-
-const setIsOpen = (value: boolean) => {
-  emit('update:modelValue', value)
-}
+hideAllPoppers()
+
 const { t } = useI18n()
 
 const viewer = computed(() => props.gql?.cloudViewer)
@@ -195,4 +164,8 @@ const title = computed(() => {
 
 const isOnline = computed(() => online.value)
 
+const cancelLogin = () => {
+  emit('cancel')
+}
+
 </script>
diff --git a/packages/app/src/runs/modals/NeedManualUpdateModal.spec.tsx b/packages/frontend-shared/src/gql-components/modals/NeedManualUpdateModal.spec.tsx
similarity index 100%
rename from packages/app/src/runs/modals/NeedManualUpdateModal.spec.tsx
rename to packages/frontend-shared/src/gql-components/modals/NeedManualUpdateModal.spec.tsx
diff --git a/packages/app/src/runs/modals/NeedManualUpdateModal.vue b/packages/frontend-shared/src/gql-components/modals/NeedManualUpdateModal.vue
similarity index 100%
rename from packages/app/src/runs/modals/NeedManualUpdateModal.vue
rename to packages/frontend-shared/src/gql-components/modals/NeedManualUpdateModal.vue
diff --git a/packages/app/src/runs/modals/SelectCloudProjectModal.cy.tsx b/packages/frontend-shared/src/gql-components/modals/SelectCloudProjectModal.cy.tsx
similarity index 100%
rename from packages/app/src/runs/modals/SelectCloudProjectModal.cy.tsx
rename to packages/frontend-shared/src/gql-components/modals/SelectCloudProjectModal.cy.tsx
diff --git a/packages/app/src/runs/modals/SelectCloudProjectModal.vue b/packages/frontend-shared/src/gql-components/modals/SelectCloudProjectModal.vue
similarity index 91%
rename from packages/app/src/runs/modals/SelectCloudProjectModal.vue
rename to packages/frontend-shared/src/gql-components/modals/SelectCloudProjectModal.vue
index 64b9c382529c..68cf5779c0aa 100644
--- a/packages/app/src/runs/modals/SelectCloudProjectModal.vue
+++ b/packages/frontend-shared/src/gql-components/modals/SelectCloudProjectModal.vue
@@ -53,6 +53,7 @@
               {{ t('runs.connect.modal.selectProject.organization') }}
             </span>
             <ExternalLink
+              v-if="organizationUrl"
               class="cursor-pointer text-right text-indigo-500 hover:underline"
               :href="organizationUrl"
             >
@@ -160,6 +161,7 @@
           size="lg"
           :prefix-icon="newProject ? CreateIcon : ConnectIcon"
           prefix-icon-class="icon-dark-white"
+          :disabled="disableButton"
           data-cy="connect-project"
           @click="createOrConnectProject"
         >
@@ -180,11 +182,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import StandardModal from '@cy/components/StandardModal.vue'
 import Button from '@cy/components/Button.vue'
-import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import ExternalLink from '../ExternalLink.vue'
 import Select from '@cy/components/Select.vue'
 import Input from '@cy/components/Input.vue'
 import Radio from '@cy/components/Radio.vue'
@@ -197,7 +199,7 @@ import OrganizationIcon from '~icons/cy/office-building_x16.svg'
 import { SelectCloudProjectModal_CreateCloudProjectDocument, SelectCloudProjectModal_SetProjectIdDocument } from '../../generated/graphql'
 import type { SelectCloudProjectModalFragment } from '../../generated/graphql'
 import { useI18n } from '@cy/i18n'
-import { sortBy } from 'lodash'
+import { isEqual, sortBy } from 'lodash'
 import { useOnline } from '@vueuse/core'
 import WarningIcon from '~icons/cy/warning_x16.svg'
 import { clearPendingError } from '@packages/frontend-shared/src/graphql/urqlClient'
@@ -231,7 +233,6 @@ fragment SelectCloudProjectModal on Query {
         }
       }
     }
-    ...CreateCloudOrgModal
   }
   currentProject{
     id
@@ -253,8 +254,26 @@ mutation SelectCloudProjectModal_SetProjectId( $projectId: String! ) {
           id
           runs(first: 10) {
             nodes {
-              id
-              ...RunCard
+              id 
+              createdAt
+              status
+              totalDuration
+              url
+              tags {
+                id
+                name
+              }
+              totalPassed
+              totalFailed
+              totalPending
+              totalSkipped
+              totalFlakyTests
+              commitInfo {
+                authorName
+                authorEmail
+                summary
+                branch
+              }
             }
           }
         }
@@ -317,12 +336,20 @@ const projectOptions = computed(() => {
 const newProject = ref(projectOptions.value.length === 0)
 const pickedProject = ref<typeof projectOptions.value[number]>()
 
-watchEffect(() => {
-  if (projectOptions.value.length === 1) {
+watch(projectOptions, (newVal, oldVal) => {
+  // avoid unselecting currently chosen project
+  // can happen when gql updates due to polling
+  if (isEqual(newVal, oldVal)) {
+    return
+  }
+
+  if (newVal.length === 1) {
     pickedProject.value = projectOptions.value[0]
   } else {
     pickedProject.value = projectOptions.value.find((p) => p.name === projectName.value)
   }
+}, {
+  immediate: true,
 })
 
 const orgPlaceholder = t('runs.connect.modal.selectProject.placeholderOrganizations')
@@ -332,7 +359,7 @@ const projectPlaceholder = computed(() => {
     : t('runs.connect.modal.selectProject.placeholderProjectsPending')
 })
 
-const organizationUrl = computed(() => props.gql.cloudViewer?.cloudOrganizationsUrl ?? '#')
+const organizationUrl = computed(() => props.gql.cloudViewer?.cloudOrganizationsUrl)
 
 const createCloudProjectMutation = useMutation(SelectCloudProjectModal_CreateCloudProjectDocument)
 const setProjectIdMutation = useMutation(SelectCloudProjectModal_SetProjectIdDocument)
@@ -390,4 +417,12 @@ async function createOrConnectProject () {
 
 const isOnline = computed(() => online.value)
 
+const disableButton = computed(() => {
+  if (newProject.value) {
+    return !projectName.value
+  }
+
+  return !pickedProject.value
+})
+
 </script>
diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
index f1e59710428d..7acf9f208606 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
@@ -144,7 +144,7 @@
     <div
       v-if="docsMenuVariant === 'main'"
       data-cy="docs-menu-container"
-      class="flex p-16px gap-24px flex-col md:flex-row"
+      class="flex flex-col p-16px gap-24px md:flex-row"
     >
       <DocsMenuContent
         :current-project-exists="!!props.gql?.currentProject"
diff --git a/packages/frontend-shared/src/store/login-connect-store.ts b/packages/frontend-shared/src/store/login-connect-store.ts
index 6c3c14ca2282..f9f48f4c5ce6 100644
--- a/packages/frontend-shared/src/store/login-connect-store.ts
+++ b/packages/frontend-shared/src/store/login-connect-store.ts
@@ -21,6 +21,8 @@ export interface LoginConnectState {
     isConfigLoaded: boolean
     hasNoRecordedRuns: boolean
     hasNonExampleSpec: boolean
+    isNotAuthorized: boolean
+    isNotFound: boolean
   }
   userData?: LoginUserData
   promptsShown: {
@@ -63,7 +65,9 @@ export const useLoginConnectStore = defineStore({
         isProjectConnected: false,
         isConfigLoaded: false,
         hasNoRecordedRuns: false,
-        hasNonExampleSpec: true, // TODO: in #23762 initialize as false and set the real value
+        hasNonExampleSpec: false,
+        isNotAuthorized: false,
+        isNotFound: false,
       },
       promptsShown: {},
       bannersState: {},
@@ -107,32 +111,36 @@ export const useLoginConnectStore = defineStore({
   getters: {
     userStatus (state): UserStatus {
       const { user, project } = state
+      let userStatus: UserStatus
 
       switch (true) {
         // the switch here ensures the uniqueness of states as we don't allow duplicate case labels
         // https://eslint.org/docs/latest/rules/no-duplicate-case
         case !user.isLoggedIn:
-          return 'isLoggedOut'
+          userStatus = 'isLoggedOut'
+          break
         case user.isLoggedIn && user.isOrganizationLoaded && !user.isMemberOfOrganization:
-          return 'needsOrgConnect'
-        case user.isLoggedIn && user.isMemberOfOrganization && !project.isProjectConnected:
-          return 'needsProjectConnect'
-        case user.isLoggedIn && user.isMemberOfOrganization && project.isProjectConnected && project.hasNoRecordedRuns:
-          return 'needsRecordedRun'
+          userStatus = 'needsOrgConnect'
+          break
+        case user.isLoggedIn && user.isMemberOfOrganization && !project.isProjectConnected && project.isConfigLoaded:
+          userStatus = 'needsProjectConnect'
+          break
+        case user.isLoggedIn && user.isMemberOfOrganization && project.isProjectConnected && project.hasNoRecordedRuns && project.hasNonExampleSpec && project.isConfigLoaded:
+          userStatus = 'needsRecordedRun'
+          break
         default:
-          return 'allTasksCompleted'
+          userStatus = 'allTasksCompleted'
       }
+
+      return userStatus
     },
     userStatusMatches () {
-      // casting here sine ts seems to need a little extra help in this 'return a function from a getter' situation
+      // casting here since ts seems to need a little extra help in this 'return a function from a getter' situation
       return (status: UserStatus) => this.userStatus as unknown as UserStatus === status
     },
-    projectStatus () {
-      // TODO: in #23762 look at projectConnectionStatus in SpecHeaderCloudDataTooltip
-    },
     latestBannerShownTime (state) {
       return state._latestBannerShownTimeForTesting
-      // TODO: in #23762 return based on bannersState
+      // TODO: in #23768 return based on bannersState - this will be used to delay the nav CI prompt if a banner was recently shown
     },
 
   },
diff --git a/packages/frontend-shared/src/utils/isAllowedFeature.cy.ts b/packages/frontend-shared/src/utils/isAllowedFeature.cy.ts
index 95902cd37720..08bbf631eeb7 100644
--- a/packages/frontend-shared/src/utils/isAllowedFeature.cy.ts
+++ b/packages/frontend-shared/src/utils/isAllowedFeature.cy.ts
@@ -39,6 +39,9 @@ describe('isAllowedFeature', () => {
       case 'needsProjectConnect':
         setUserFlag('isLoggedIn', true)
         setUserFlag('isMemberOfOrganization', true)
+        setUserFlag('isOrganizationLoaded', true)
+        setProjectFlag('isConfigLoaded', true)
+        setProjectFlag('isProjectConnected', false)
         expect(store.userStatus).to.eq('needsProjectConnect')
         break
       case 'needsRecordedRun':
@@ -46,6 +49,8 @@ describe('isAllowedFeature', () => {
         setUserFlag('isMemberOfOrganization', true)
         setProjectFlag('isProjectConnected', true)
         setProjectFlag('hasNoRecordedRuns', true)
+        setProjectFlag('isConfigLoaded', true)
+        setProjectFlag('hasNonExampleSpec', true)
 
         expect(store.userStatus).to.eq('needsRecordedRun')
         break
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index 87341c15c882..2ade51763c55 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -291,7 +291,7 @@ union CloudProjectSpecFlakyResult =
 
 type CloudProjectSpecFlakyStatus {
   """
-  URL linking to the flaky data in the Cypress Dashboard for this spec
+  URL linking to the flaky data in the Cypress dashboard for this spec
   """
   dashboardUrl: String
 
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 8db6ffdd5f53..71dd3c3ce51c 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -264,7 +264,7 @@ type CloudProjectSpec implements Node {
 union CloudProjectSpecFlakyResult = CloudFeatureNotEnabled | CloudProjectSpecFlakyStatus
 
 type CloudProjectSpecFlakyStatus {
-  """URL linking to the flaky data in the Cypress Dashboard for this spec"""
+  """URL linking to the flaky data in the Cypress dashboard for this spec"""
   dashboardUrl: String
 
   """Number of flaky runs from the considered runs"""
@@ -629,6 +629,11 @@ type CurrentProject implements Node & ProjectLike {
   """File extension to use based on if the project has typescript or not"""
   fileExtensionToUse: FileExtensionEnum
 
+  """
+  Whether the project has any specs found that do not match an example spec
+  """
+  hasNonExampleSpec: Boolean
+
   """Whether the project has a valid config file"""
   hasValidConfigFile: Boolean
 
@@ -720,6 +725,7 @@ enum ErrorTypeEnum {
   AUTOMATION_SERVER_DISCONNECTED
   BAD_POLICY_WARNING
   BAD_POLICY_WARNING_TOOLTIP
+  BROWSER_CRASHED
   BROWSER_NOT_FOUND_BY_NAME
   BROWSER_NOT_FOUND_BY_PATH
   BROWSER_UNSUPPORTED_LAUNCH_OPTION
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-CurrentProject.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-CurrentProject.ts
index 1a9a862f360d..940717059bb9 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-CurrentProject.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-CurrentProject.ts
@@ -38,6 +38,11 @@ export const CurrentProject = objectType({
       description: 'Whether or not the full config is ready',
     })
 
+    t.boolean('hasNonExampleSpec', {
+      description: 'Whether the project has any specs found that do not match an example spec',
+      resolve: (_, args, ctx) => ctx.project.hasNonExampleSpec,
+    })
+
     t.field('currentTestingType', {
       description: 'The mode the interactive runner was launched in',
       type: TestingTypeEnum,
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
index 3fd592d3ab9e..8917dd448059 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
@@ -192,6 +192,11 @@ export const mutation = mutationType({
       },
     })
 
+    // TODO: remove server-side setPromptShown helpers in #23768,
+    // since this will be handled by usePromptManager via existing
+    // `setPreferences` mutation, there is no need for this other
+    //way to modify saved sate
+
     t.field('setPromptShown', {
       type: 'Boolean',
       description: 'Save the prompt-shown state for this project',
diff --git a/packages/launchpad/cypress/e2e/top-nav-launchpad.cy.ts b/packages/launchpad/cypress/e2e/top-nav-launchpad.cy.ts
new file mode 100644
index 000000000000..c3195cb0af98
--- /dev/null
+++ b/packages/launchpad/cypress/e2e/top-nav-launchpad.cy.ts
@@ -0,0 +1,714 @@
+import type { SinonStub } from 'sinon'
+import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+import type Sinon from 'sinon'
+
+const pkg = require('@packages/root')
+
+const loginText = defaultMessages.topNav.login
+
+const headerBarId = 'header-bar-content'
+
+beforeEach(() => {
+  cy.clock(Date.UTC(2021, 9, 30), ['Date'])
+})
+
+describe('Launchpad Top Nav Workflows', () => {
+  context('Page Name', () => {
+    it('shows the current page name in the top nav', () => {
+      cy.scaffoldProject('launchpad')
+      cy.findBrowsers()
+      cy.openProject('launchpad')
+      cy.visitLaunchpad()
+
+      cy.findByTestId(headerBarId).should('be.visible').and('contain', 'launchpad')
+    })
+
+    it('shows breadcrumbs in global mode', () => {
+      cy.scaffoldProject('launchpad')
+      cy.openGlobalMode()
+      cy.addProject('launchpad')
+      cy.visitLaunchpad()
+
+      cy.findByTestId(headerBarId).should('be.visible').and('contain', 'Projects')
+
+      cy.get('[data-cy="project-card"]').click()
+
+      cy.findByTestId(headerBarId).should('be.visible').and('contain', 'Projects').and('contain', 'launchpad')
+    })
+  })
+
+  context('Cypress Version', () => {
+    context('user version current', () => {
+      it('renders link to external docs if version is current', () => {
+        cy.scaffoldProject('launchpad')
+        cy.findBrowsers()
+        cy.withCtx(async (ctx, o) => {
+          o.sinon.stub(ctx.versions, 'versionData').resolves({
+            current: {
+              id: '1',
+              version: '10.0.0',
+              released: '2021-10-15T21:38:59.983Z',
+            },
+            latest: {
+              id: '1',
+              version: '10.0.0',
+              released: '2021-10-25T21:38:59.983Z',
+            },
+          })
+        })
+
+        cy.openProject('launchpad')
+        cy.visitLaunchpad()
+
+        cy.findByTestId(headerBarId).validateExternalLink({
+          name: 'v10.0.0',
+          href: 'https://on.cypress.io/changelog#10-0-0',
+        })
+      })
+    })
+
+    context('user version outdated', () => {
+      beforeEach(() => {
+        cy.findBrowsers()
+        cy.withCtx(async (ctx, o) => {
+          const currRelease = new Date(Date.UTC(2021, 9, 30))
+          const prevRelease = new Date(Date.UTC(2021, 9, 29))
+
+          o.sinon.stub(ctx.versions, 'versionData').resolves({
+            current: {
+              id: '1',
+              version: '10.0.0',
+              released: prevRelease.toISOString(),
+            },
+            latest: {
+              id: '2',
+              version: '10.1.0',
+              released: currRelease.toISOString(),
+            },
+          })
+        })
+
+        cy.scaffoldProject('launchpad')
+        cy.openProject('launchpad')
+        cy.visitLaunchpad()
+      })
+
+      it('shows dropdown with version info if user version is outdated', () => {
+        cy.findByTestId('top-nav-version-list').contains('v10.0.0 • Upgrade').click()
+
+        cy.findByTestId('update-hint').within(() => {
+          cy.validateExternalLink({ name: '10.1.0', href: 'https://on.cypress.io/changelog#10-1-0' })
+          cy.findByText('Latest').should('be.visible')
+        })
+
+        cy.findByTestId('cypress-update-popover').findByRole('button', { name: 'Update to 10.1.0' })
+
+        cy.findByTestId('current-hint').within(() => {
+          cy.validateExternalLink({ name: '10.0.0', href: 'https://on.cypress.io/changelog#10-0-0' })
+          cy.findByText('Installed').should('be.visible')
+        })
+
+        cy.findByTestId('cypress-update-popover').validateExternalLink({
+          name: 'See all releases',
+          href: 'https://on.cypress.io/changelog',
+        })
+      })
+
+      it('hides dropdown when version in header is clicked', () => {
+        cy.findByTestId('cypress-update-popover').findByRole('button', { expanded: false }).as('topNavVersionButton').click()
+
+        cy.get('@topNavVersionButton').should('have.attr', 'aria-expanded', 'true')
+
+        cy.get('@topNavVersionButton').click()
+
+        cy.get('@topNavVersionButton').should('have.attr', 'aria-expanded', 'false')
+      })
+
+      it('shows upgrade modal when update button is pressed', () => {
+        cy.findByTestId('top-nav-version-list').contains('v10.0.0 • Upgrade').click()
+
+        cy.findByTestId('cypress-update-popover').findByRole('button', { name: 'Update to 10.1.0' }).click()
+
+        cy.findByRole('dialog', { name: 'Upgrade to Cypress 10.1.0' }).as('upgradeModal').within(() => {
+          cy.contains('You are currently running Version 10.0.0 of Cypress').should('be.visible')
+          cy.findAllByDisplayValue('npm install -D cypress@10.1.0').should('be.visible')
+          cy.findByRole('button', { name: 'Close' }).click()
+        })
+
+        cy.findAllByRole('dialog').should('not.exist')
+      })
+    })
+
+    context('version data unreachable', () => {
+      it('treats unreachable data as current version', () => {
+        cy.withCtx((ctx, o) => {
+          (ctx.util.fetch as Sinon.SinonStub).restore()
+          const oldFetch = ctx.util.fetch
+
+          o.sinon.stub(ctx.util, 'fetch').callsFake(async (url: RequestInfo | URL, init?: RequestInit) => {
+            await new Promise((resolve) => setTimeout(resolve, 500))
+            if (['https://download.cypress.io/desktop.json', 'https://registry.npmjs.org/cypress'].includes(String(url))) {
+              throw new Error(String(url))
+            }
+
+            return oldFetch(url, init)
+          })
+        })
+
+        cy.scaffoldProject('launchpad')
+        cy.findBrowsers()
+        cy.openProject('launchpad')
+        cy.visitLaunchpad()
+
+        cy.findByTestId(headerBarId).validateExternalLink({
+          name: `v${pkg.version}`,
+          href: `https://on.cypress.io/changelog#${pkg.version.replaceAll('.', '-')}`,
+        })
+      })
+    })
+  })
+
+  describe('Docs', () => {
+    context('user initiated', () => {
+      beforeEach(() => {
+        cy.scaffoldProject('launchpad')
+        cy.findBrowsers()
+        cy.openProject('launchpad')
+        cy.visitLaunchpad()
+
+        cy.findByTestId(headerBarId).findByRole('button', { name: 'Docs', expanded: false }).as('docsButton')
+      })
+
+      it('shows popover with additional doc links', () => {
+        cy.get('@docsButton').click().should('have.attr', 'aria-expanded', 'true')
+
+        cy.findByRole('heading', { name: 'Getting started', level: 2 })
+        cy.findByRole('heading', { name: 'References', level: 2 })
+        cy.findByRole('heading', { name: 'Run in CI/CD', level: 2 })
+
+        const expectedLinks = [
+          {
+            name: 'Write your first test',
+            href: 'https://on.cypress.io/writing-first-test?utm_medium=Docs+Menu&utm_content=First+Test&utm_source=Binary%3A+Launchpad',
+          },
+          {
+            name: 'Testing your app',
+            href: 'https://on.cypress.io/testing-your-app?utm_medium=Docs+Menu&utm_content=Testing+Your+App&utm_source=Binary%3A+Launchpad',
+          },
+          {
+            name: 'Organizing tests',
+            href: 'https://on.cypress.io/writing-and-organizing-tests?utm_medium=Docs+Menu&utm_content=Organizing+Tests&utm_source=Binary%3A+Launchpad',
+          },
+          {
+            name: 'Best practices',
+            href: 'https://on.cypress.io/best-practices?utm_medium=Docs+Menu&utm_content=Best+Practices&utm_source=Binary%3A+Launchpad',
+          },
+          {
+            name: 'Configuration',
+            href: 'https://on.cypress.io/configuration?utm_medium=Docs+Menu&utm_content=Configuration&utm_source=Binary%3A+Launchpad',
+          },
+          {
+            name: 'API',
+            href: 'https://on.cypress.io/api?utm_medium=Docs+Menu&utm_content=API&utm_source=Binary%3A+Launchpad',
+          },
+        ]
+
+        expectedLinks.forEach((link) => {
+          cy.validateExternalLink(link)
+        })
+      })
+
+      it('growth prompts appear and call SetPromptShown mutation with the correct payload', () => {
+        cy.get('@docsButton').click()
+
+        cy.withCtx((ctx, o) => {
+          o.sinon.stub(ctx.actions.project, 'setPromptShown')
+        })
+
+        cy.findByRole('button', { name: 'Set up CI' }).click()
+        cy.findByText('Configure CI').should('be.visible')
+        cy.findByRole('button', { name: 'Close' }).click()
+
+        cy.withCtx((ctx) => {
+          expect(ctx.actions.project.setPromptShown).to.have.been.calledWith('ci1')
+        })
+
+        cy.findByRole('button', { name: 'Run tests faster' }).click()
+        cy.findByText('Run tests faster in CI').should('be.visible')
+        cy.findByRole('button', { name: 'Close' }).click()
+
+        cy.withCtx((ctx) => {
+          expect(ctx.actions.project.setPromptShown).to.have.been.calledWith('orchestration1')
+        })
+      })
+    })
+
+    context('time based operations', () => {
+      beforeEach(() => {
+        cy.clock(1609891200000)
+        cy.scaffoldProject('launchpad')
+        cy.openProject('launchpad')
+      })
+
+      it('growth prompts do not auto-open 4 days after first project opened', () => {
+        cy.withCtx(
+          (ctx, o) => {
+            o.sinon.stub(ctx._apis.projectApi, 'getCurrentProjectSavedState').resolves({
+              firstOpened: 1609459200000,
+              lastOpened: 1609459200000,
+              promptsShown: {},
+              banners: { _disabled: true },
+            })
+          },
+        )
+
+        cy.visitLaunchpad()
+        cy.contains('launchpad')
+        cy.wait(1000)
+        cy.contains('Configure CI').should('not.exist')
+      })
+    })
+  })
+
+  describe('Login', () => {
+    context('user logged in at launch', () => {
+      beforeEach(() => {
+        cy.findBrowsers()
+        cy.openProject('launchpad')
+        cy.loginUser()
+        cy.visitLaunchpad()
+
+        cy.findByTestId(headerBarId).findByRole('button', { name: 'Profile and logout', expanded: false }).as('logInButton')
+      })
+
+      it('shows user in top nav when logged in', () => {
+        cy.get('@logInButton').click()
+
+        cy.findByTestId('login-panel').contains('Test User').should('be.visible')
+        cy.findByTestId('login-panel').contains('test@example.com').should('be.visible')
+
+        cy.validateExternalLink({
+          name: 'Profile Settings',
+          href: 'https://on.cypress.io/dashboard/profile',
+        })
+
+        cy.findByTestId('user-avatar-panel').should('be.visible')
+      })
+
+      it('replaces user avatar after logout', () => {
+        cy.get('@logInButton').click()
+
+        cy.withCtx((ctx, o) => {
+          o.sinon.stub(ctx._apis.authApi, 'logOut').callsFake(async () => {
+            // resolves
+          })
+        })
+
+        cy.findByRole('button', { name: 'Log out' }).click()
+
+        cy.findByTestId(headerBarId).findByText('Log in').should('be.visible')
+      })
+    })
+
+    context('user fails log in', () => {
+      it('logs out user if cloud request returns unauthorized', () => {
+        cy.findBrowsers()
+        cy.scaffoldProject('component-tests')
+        cy.openProject('component-tests')
+        cy.loginUser()
+        cy.visitLaunchpad()
+
+        cy.remoteGraphQLIntercept((obj) => {
+          if (obj.result.data?.cloudProjectBySlug) {
+            return new obj.Response('Unauthorized', { status: 401 })
+          }
+
+          return obj.result
+        })
+
+        cy.findByTestId(headerBarId).findByRole('button', { name: 'Profile and logout', expanded: false }).as('logInButton')
+
+        cy.get('@logInButton').click()
+
+        cy.findByTestId('login-panel').contains('Test User').should('be.visible')
+        cy.findByTestId('login-panel').contains('test@example.com').should('be.visible')
+
+        // Navigate somewhere that will query the cloud to trigger the unauthorized response
+        cy.contains('Component Testing').click()
+        cy.get('@logInButton').click()
+
+        cy.findByTestId(headerBarId).within(() => {
+          cy.findByTestId('user-avatar-title').should('not.exist')
+          cy.findByRole('button', { name: 'Log in' }).click()
+        })
+      })
+    })
+
+    context('user not logged in', () => {
+      const mockUser = {
+        authToken: 'test1',
+        email: 'test_user_a@example.com',
+        name: 'Test User A',
+      }
+
+      const mockUserNoName = {
+        authToken: 'test22',
+        email: 'test_user_b@example.com',
+      }
+
+      const mockLogInActionsForUser = (user) => {
+        cy.withCtx(async (ctx, options) => {
+          ctx.coreData.app.browserStatus = 'open'
+          options.sinon.stub(ctx._apis.electronApi, 'isMainWindowFocused').returns(true)
+          options.sinon.stub(ctx._apis.authApi, 'logIn').callsFake(async (onMessage) => {
+            setTimeout(() => {
+              onMessage({ browserOpened: true })
+            }, 500)
+
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve(options.user)
+              }, 1000)
+            })
+          })
+        }, { user })
+      }
+
+      type LoginOptions = {
+        expectedNextStepText: 'Continue' | 'Connect project'
+        displayName: string
+      }
+
+      function logIn ({ expectedNextStepText, displayName }: LoginOptions) {
+        cy.findByTestId(headerBarId).within(() => {
+          cy.findByTestId('user-avatar-title').should('not.exist')
+          cy.findByRole('button', { name: 'Log in' }).click()
+        })
+
+        cy.findByRole('dialog', { name: 'Log in to Cypress' }).as('logInModal').within(() => {
+          cy.findByRole('button', { name: 'Log in' }).click()
+
+          // The Log In button transitions through a few states as the browser launch lifecycle completes
+          cy.findByRole('button', { name: 'Opening browser' }).should('be.visible').and('be.disabled')
+          cy.findByRole('button', { name: 'Waiting for you to log in' }).should('be.visible').and('be.disabled')
+        })
+
+        cy.findByRole('dialog', { name: 'Login successful' }).within(() => {
+          cy.findByText('You are now logged in as', { exact: false }).should('be.visible')
+          cy.validateExternalLink({ name: displayName, href: 'https://on.cypress.io/dashboard/profile' })
+
+          // The dialog can be closed at this point by either the header close button or the Continue button
+          // The Continue button is tested here
+          cy.findByRole('button', { name: 'Close' }).should('be.visible').and('not.be.disabled')
+          cy.findByRole('button', { name: expectedNextStepText }).click()
+        })
+      }
+
+      beforeEach(() => {
+        cy.scaffoldProject('launchpad')
+        cy.openProject('launchpad')
+        cy.visitLaunchpad()
+      })
+
+      context('with no project id', () => {
+        it('shows "continue" button after login if config has not loaded', () => {
+          mockLogInActionsForUser(mockUser)
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUser.name })
+          cy.withCtx((ctx, o) => {
+            // validate utmSource
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[1]).to.eq('Binary: Launchpad')
+            // validate utmMedium
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[2]).to.eq('Nav')
+          })
+        })
+
+        it('shows "connect project" button after login if no project id is set', () => {
+          cy.contains('E2E Testing').click()
+
+          mockLogInActionsForUser(mockUser)
+          logIn({ expectedNextStepText: 'Connect project', displayName: mockUser.name })
+          cy.withCtx((ctx, o) => {
+            // validate utmSource
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[1]).to.eq('Binary: Launchpad')
+            // validate utmMedium
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[2]).to.eq('Nav')
+          })
+
+          cy.findByRole('dialog', { name: 'Create project' }).should('be.visible')
+        })
+      })
+
+      context('when there is a project id', () => {
+        beforeEach(() => {
+          cy.findBrowsers()
+          cy.scaffoldProject('component-tests')
+          cy.openProject('component-tests')
+          cy.visitLaunchpad()
+        })
+
+        it('shows log in modal workflow for user with name and email', () => {
+          cy.contains('Component Testing').click()
+          mockLogInActionsForUser(mockUser)
+
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUser.name })
+
+          cy.get('@logInModal').should('not.exist')
+          cy.findByTestId(headerBarId).findByTestId('user-avatar-title').should('be.visible')
+        })
+
+        it('shows log in modal workflow for user with only email', () => {
+          cy.contains('Component Testing').click()
+          mockLogInActionsForUser(mockUserNoName)
+
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUserNoName.email })
+
+          cy.get('@logInModal').should('not.exist')
+          cy.findByTestId(headerBarId).findByTestId('user-avatar-title').should('be.visible')
+        })
+
+        it('if the project has no runs, shows "record your first run" prompt after clicking', () => {
+          cy.remoteGraphQLIntercept((obj) => {
+            if (obj.result?.data?.cloudProjectBySlug?.runs?.nodes?.length) {
+              obj.result.data.cloudProjectBySlug.runs.nodes = []
+            }
+
+            return obj.result
+          })
+
+          cy.contains('Component Testing').click()
+
+          mockLogInActionsForUser(mockUserNoName)
+
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUserNoName.email })
+
+          cy.contains('[data-cy=standard-modal] h2', defaultMessages.specPage.banners.record.title).should('be.visible')
+          cy.contains('[data-cy=standard-modal]', defaultMessages.specPage.banners.record.content).should('be.visible')
+          cy.contains('button', 'Copy').should('be.visible')
+        })
+
+        it('shows correct error when browser cannot launch', () => {
+          cy.withCtx((ctx, o) => {
+            o.sinon.stub(ctx._apis.authApi, 'logIn').callsFake(async (onMessage) => {
+              onMessage({
+                name: 'AUTH_COULD_NOT_LAUNCH_BROWSER',
+                message: 'http://127.0.0.1:0000/redirect-to-auth',
+                browserOpened: false,
+              })
+
+              throw new Error()
+            })
+          })
+
+          cy.findByTestId(headerBarId).within(() => {
+            cy.findByTestId('user-avatar-title').should('not.exist')
+            cy.findByRole('button', { name: 'Log in' }).click()
+          })
+
+          cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
+            cy.findByRole('button', { name: 'Log in' }).click()
+
+            cy.contains('http://127.0.0.1:0000/redirect-to-auth').should('be.visible')
+            cy.contains(loginText.titleBrowserError).should('be.visible')
+            cy.contains(loginText.bodyBrowserError).should('be.visible')
+            cy.contains(loginText.bodyBrowserErrorDetails).should('be.visible')
+
+            // in this state, there is no retry UI, we ask the user to visit the auth url on their own
+            cy.contains('button', loginText.actionTryAgain).should('not.be.visible')
+            cy.contains('button', loginText.actionCancel).should('not.be.visible')
+          })
+        })
+
+        it('shows correct error when error other than browser-launch happens', () => {
+          cy.withCtx((ctx, o) => {
+            o.sinon.stub(ctx._apis.authApi, 'logIn').callsFake(async (onMessage) => {
+              onMessage({
+                name: 'AUTH_ERROR_DURING_LOGIN',
+                message: 'An unexpected error occurred',
+                browserOpened: false,
+              })
+
+              throw new Error()
+            })
+          })
+
+          cy.findByTestId(headerBarId).within(() => {
+            cy.findByTestId('user-avatar-title').should('not.exist')
+            cy.findByRole('button', { name: 'Log in' }).click()
+          })
+
+          cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
+            cy.findByRole('button', { name: 'Log in' }).click()
+
+            cy.contains(loginText.titleFailed).should('be.visible')
+            cy.contains(loginText.bodyError).should('be.visible')
+            cy.contains('An unexpected error occurred').should('be.visible')
+
+            cy.contains('button', loginText.actionTryAgain).should('be.visible').as('tryAgain')
+            cy.contains('button', loginText.actionCancel).should('be.visible')
+          })
+
+          // cy.percySnapshot() // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
+
+          cy.withCtx((ctx) => {
+            (ctx._apis.authApi.logIn as SinonStub).callsFake(async (onMessage) => {
+              onMessage({
+                name: 'AUTH_BROWSER_LAUNCHED',
+                message: '',
+                browserOpened: true,
+              })
+
+              return Promise.resolve()
+            })
+          })
+
+          cy.get('@tryAgain').click()
+
+          cy.findByRole('dialog', { name: loginText.titleInitial }).within(() => {
+            cy.contains(loginText.actionWaiting).should('be.visible')
+          })
+        })
+
+        it('cancel button correctly clears error state', () => {
+          cy.withCtx((ctx, o) => {
+            o.sinon.stub(ctx._apis.authApi, 'logIn').callsFake(async (onMessage) => {
+              onMessage({
+                name: 'AUTH_ERROR_DURING_LOGIN',
+                message: 'An unexpected error occurred',
+                browserOpened: false,
+              })
+
+              throw new Error()
+            })
+          })
+
+          cy.findByTestId(headerBarId).within(() => {
+            cy.findByTestId('user-avatar-title').should('not.exist')
+            cy.findByRole('button', { name: 'Log in' }).as('loginButton').click()
+          })
+
+          cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
+            cy.findByRole('button', { name: 'Log in' }).click()
+
+            cy.contains(loginText.titleFailed).should('be.visible')
+            cy.contains(loginText.bodyError).should('be.visible')
+            cy.contains('An unexpected error occurred').should('be.visible')
+          })
+
+          // cy.percySnapshot() // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
+
+          cy.findByRole('dialog', { name: loginText.titleFailed }).within(() => {
+            cy.contains('button', loginText.actionTryAgain).should('be.visible')
+            cy.contains('button', loginText.actionCancel).click()
+          })
+
+          cy.get('@loginButton').click()
+          cy.contains(loginText.titleInitial).should('be.visible')
+        })
+
+        it('closing modal correctly clears error state', () => {
+          cy.withCtx((ctx, o) => {
+            o.sinon.stub(ctx._apis.authApi, 'logIn').callsFake(async (onMessage) => {
+              onMessage({
+                name: 'AUTH_ERROR_DURING_LOGIN',
+                message: 'An unexpected error occurred',
+                browserOpened: false,
+              })
+
+              throw new Error()
+            })
+          })
+
+          cy.findByTestId(headerBarId).within(() => {
+            cy.findByTestId('user-avatar-title').should('not.exist')
+            cy.findByRole('button', { name: 'Log in' }).as('loginButton').click()
+          })
+
+          cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
+            cy.findByRole('button', { name: 'Log in' }).click()
+            cy.contains(loginText.titleFailed).should('be.visible')
+            cy.contains(loginText.bodyError).should('be.visible')
+            cy.contains('An unexpected error occurred').should('be.visible')
+
+            cy.findByLabelText(defaultMessages.actions.close).click()
+          })
+
+          cy.get('@loginButton').click()
+          cy.contains(loginText.titleInitial).should('be.visible')
+        })
+      })
+
+      context('global mode', () => {
+        it('shows "continue" button after login if project not selected', () => {
+          cy.openGlobalMode()
+          cy.visitLaunchpad()
+
+          mockLogInActionsForUser(mockUser)
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUser.name })
+          cy.withCtx((ctx, o) => {
+            // validate utmSource
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[1]).to.eq('Binary: Launchpad')
+            // validate utmMedium
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[2]).to.eq('Nav')
+          })
+        })
+
+        it('shows "continue" button after login if project selected', () => {
+          cy.openGlobalMode()
+          cy.addProject('component-tests')
+          cy.visitLaunchpad()
+
+          cy.get('[data-cy="project-card"]').click()
+
+          mockLogInActionsForUser(mockUser)
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUser.name })
+          cy.withCtx((ctx, o) => {
+            // validate utmSource
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[1]).to.eq('Binary: Launchpad')
+            // validate utmMedium
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[2]).to.eq('Nav')
+          })
+        })
+
+        it('shows "continue" button after login if project selected has project id', () => {
+          cy.openGlobalMode()
+          cy.addProject('component-tests')
+          cy.visitLaunchpad()
+
+          cy.get('[data-cy="project-card"]').click()
+
+          cy.contains('E2E Testing').click()
+
+          mockLogInActionsForUser(mockUser)
+          logIn({ expectedNextStepText: 'Continue', displayName: mockUser.name })
+          cy.withCtx((ctx, o) => {
+            // validate utmSource
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[1]).to.eq('Binary: Launchpad')
+            // validate utmMedium
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[2]).to.eq('Nav')
+          })
+        })
+
+        it('shows "connect project" button after login if project selected has no project id', () => {
+          cy.openGlobalMode()
+          cy.addProject('launchpad')
+          cy.visitLaunchpad()
+
+          cy.get('[data-cy="project-card"]').click()
+
+          cy.contains('E2E Testing').click()
+
+          mockLogInActionsForUser(mockUser)
+          logIn({ expectedNextStepText: 'Connect project', displayName: mockUser.name })
+          cy.withCtx((ctx, o) => {
+            // validate utmSource
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[1]).to.eq('Binary: Launchpad')
+            // validate utmMedium
+            expect((ctx._apis.authApi.logIn as SinonStub).lastCall.args[2]).to.eq('Nav')
+          })
+
+          cy.findByRole('dialog', { name: 'Create project' }).should('be.visible')
+        })
+      })
+    })
+  })
+})
diff --git a/packages/launchpad/src/Main.vue b/packages/launchpad/src/Main.vue
index 7fb87fda11ba..5538b4b35568 100644
--- a/packages/launchpad/src/Main.vue
+++ b/packages/launchpad/src/Main.vue
@@ -74,6 +74,8 @@
         <OpenBrowser v-else />
       </template>
     </div>
+    <CloudViewerAndProject />
+    <LoginConnectModals />
   </template>
   <div data-e2e />
 </template>
@@ -98,6 +100,8 @@ import { computed, ref } from 'vue'
 import LaunchpadHeader from './setup/LaunchpadHeader.vue'
 import OpenBrowser from './setup/OpenBrowser.vue'
 import { useOnline } from '@vueuse/core'
+import LoginConnectModals from '@cy/gql-components/LoginConnectModals.vue'
+import CloudViewerAndProject from '@cy/gql-components/CloudViewerAndProject.vue'
 
 const { t } = useI18n()
 const isTestingTypeModalOpen = ref(false)
diff --git a/packages/launchpad/src/main.ts b/packages/launchpad/src/main.ts
index f1dc8a5a6795..cc05dc09e83a 100644
--- a/packages/launchpad/src/main.ts
+++ b/packages/launchpad/src/main.ts
@@ -9,6 +9,7 @@ import 'vue-toastification/dist/index.css'
 import { makeUrqlClient } from '@packages/frontend-shared/src/graphql/urqlClient'
 import { createI18n } from '@cy/i18n'
 import { initHighlighter } from '@packages/frontend-shared/src/components/highlight'
+import { createPinia } from '@packages/frontend-shared/src/store'
 
 const app = createApp(App)
 
@@ -19,6 +20,7 @@ app.use(Toast, {
 })
 
 app.use(createI18n())
+app.use(createPinia())
 
 Promise.all([
   makeUrqlClient({ target: 'launchpad' }).then((launchpadClient) => {