diff --git a/packages/app/src/layouts/default.vue b/packages/app/src/layouts/default.vue
index 21b6d25ec317..963367fa77ff 100644
--- a/packages/app/src/layouts/default.vue
+++ b/packages/app/src/layouts/default.vue
@@ -16,7 +16,7 @@
       :page-name="currentRoute.name?.toString()"
       data-cy="app-header-bar"
       :allow-automatic-prompt-open="true"
-      @connect-project="showConnectDialog = true"
+      @connect-project="handleConnectProject"
     />
     <div
       v-if="query.data.value?.baseError || query.data.value?.currentProject?.isLoadingConfigFile || query.data.value?.currentProject?.isLoadingNodeEvents"
@@ -50,9 +50,9 @@
         </transition>
       </router-view>
       <CloudConnectModals
-        v-if="showConnectDialog && query.data.value"
+        v-if="showConnectDialog && cloudModalQuery.data.value"
         :show="showConnectDialog"
-        :gql="query.data.value"
+        :gql="cloudModalQuery.data.value"
         @cancel="showConnectDialog = false"
         @success="showConnectDialog = false"
       />
@@ -71,7 +71,7 @@ import CloudConnectModals from '../runs/modals/CloudConnectModals.vue'
 import { useRoute } from 'vue-router'
 import { computed, ref } from 'vue'
 
-import { MainAppQueryDocument, MainApp_ResetErrorsAndLoadConfigDocument } from '../generated/graphql'
+import { MainApp_CloudConnectModalsQueryDocument, MainAppQueryDocument, MainApp_ResetErrorsAndLoadConfigDocument } from '../generated/graphql'
 
 gql`
 fragment MainAppQueryData on Query {
@@ -84,7 +84,6 @@ fragment MainAppQueryData on Query {
       isLoadingConfigFile
       isLoadingNodeEvents
     }
-    ...CloudConnectModals
 }
 `
 
@@ -94,6 +93,12 @@ query MainAppQuery {
 }
 `
 
+gql`
+query MainApp_CloudConnectModalsQuery {
+  ...CloudConnectModals
+}
+`
+
 gql`
 mutation MainApp_ResetErrorsAndLoadConfig($id: ID!) {
   resetErrorAndLoadConfig(id: $id) {
@@ -102,6 +107,10 @@ mutation MainApp_ResetErrorsAndLoadConfig($id: ID!) {
 }
 `
 
+const showConnectDialog = ref(false)
+
+const cloudModalQuery = useQuery({ query: MainApp_CloudConnectModalsQueryDocument, pause: true })
+
 const currentRoute = useRoute()
 
 const showHeader = computed(() => {
@@ -121,6 +130,10 @@ const resetErrorAndLoadConfig = (id: string) => {
 }
 
 const renderSidebar = window.__CYPRESS_MODE__ !== 'run'
-const showConnectDialog = ref(false)
+
+async function handleConnectProject () {
+  await cloudModalQuery.executeQuery()
+  showConnectDialog.value = true
+}
 
 </script>
diff --git a/packages/app/src/runs/CloudConnectButton.vue b/packages/app/src/runs/CloudConnectButton.vue
index 96af5957f8c5..bb76f8b2e6d0 100644
--- a/packages/app/src/runs/CloudConnectButton.vue
+++ b/packages/app/src/runs/CloudConnectButton.vue
@@ -11,7 +11,7 @@
     v-model="isLoginOpen"
     :gql="props.gql"
     utm-medium="Runs Tab"
-    :show-connect-button-after-login="!props.gql?.currentProject?.projectId"
+    :show-connect-button-after-login="!cloudProjectId"
     @connect-project="isProjectConnectOpen = true"
   />
   <CloudConnectModals
@@ -40,7 +40,7 @@ gql`
 fragment CloudConnectButton on Query {
   currentProject {
     id
-    projectId
+    config
   }
   ...CloudConnectModals
   ...LoginModal
@@ -70,4 +70,8 @@ function openConnection () {
   }
 }
 
+const cloudProjectId = computed(() => {
+  return props.gql?.currentProject?.config?.find((item: { field: string }) => item.field === 'projectId')?.value
+})
+
 </script>
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
index 6506ca26f7a3..60ac66dad2cf 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
@@ -370,7 +370,11 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
                 ...(options?.state ?? {}),
               }
 
-              result.currentProject.projectId = options?.projectId ?? null
+              const projectId = result.currentProject.config.find((item: {field: string, value: string}) => item.field = 'projectId')
+
+              if (projectId) {
+                projectId.value = options?.projectId
+              }
             },
             render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><HeaderBarContent gql={gqlVal} show-browsers={true} allowAutomaticPromptOpen={true} /></div>,
           })
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
index 5efe3bb72a3e..efee244786d6 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -157,7 +157,7 @@
         v-model="isLoginOpen"
         :gql="props.gql"
         utm-medium="Nav"
-        :show-connect-button-after-login="isApp && !props.gql?.currentProject?.projectId"
+        :show-connect-button-after-login="isApp && !cloudProjectId"
         @connect-project="handleConnectProject"
       />
     </div>
@@ -234,7 +234,6 @@ fragment HeaderBar_HeaderBarContent on Query {
     savedState
     currentTestingType
     branch
-    projectId
   }
   isGlobalMode
   ...TopNav
@@ -253,6 +252,10 @@ const savedState = computed(() => {
 
 const currentProject = computed(() => props.gql.currentProject)
 
+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)
 
@@ -336,7 +339,7 @@ function shouldShowPrompt (prompt: { slug: string, noProjectId: boolean, interva
 
   // if prompt requires no project id,
   // check if project id exists
-  if (prompt.noProjectId && props.gql?.currentProject?.projectId) {
+  if (prompt.noProjectId && cloudProjectId.value) {
     return false
   }