diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 1279540e9e2..fb17a705f34 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -273,7 +273,7 @@ export const LayoutHeader = ({
         </div>
       </header>
 
-      {isFlagResolved ? isConnectSheetEnabled ? <ConnectSheet /> : <Connect /> : null}
+      {isFlagResolved && isConnectSheetEnabled ? <ConnectSheet /> : <Connect />}
     </>
   )
 }
diff --git a/e2e/studio/features/connect.spec.ts b/e2e/studio/features/connect.spec.ts
new file mode 100644
index 00000000000..fe9ff2f207a
--- /dev/null
+++ b/e2e/studio/features/connect.spec.ts
@@ -0,0 +1,66 @@
+import { expect } from '@playwright/test'
+import { test } from '../utils/test.js'
+import { toUrl } from '../utils/to-url.js'
+
+test.describe('Connect', async () => {
+  test('Connect dialog opens when showConnect=true query param is present', async ({
+    page,
+    ref,
+  }) => {
+    // Navigate to project page with showConnect=true query param
+    await page.goto(toUrl(`/project/${ref}?showConnect=true`))
+
+    // Wait for the page to load
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible({ timeout: 30000 })
+
+    // Check that either the Connect dialog or ConnectSheet is visible
+    // The Connect component renders a Dialog with title "Connect to your project"
+    // The ConnectSheet component renders a Sheet with title "Connect to your project"
+    await expect(
+      page.getByRole('heading', { name: 'Connect to your project' })
+    ).toBeVisible({ timeout: 30000 })
+  })
+
+  test('Connect dialog closes when dismissed', async ({ page, ref }) => {
+    // Navigate to project page with showConnect=true query param
+    await page.goto(toUrl(`/project/${ref}?showConnect=true`))
+
+    // Wait for the page to load
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible({ timeout: 30000 })
+
+    // Wait for the Connect dialog/sheet to be visible
+    await expect(
+      page.getByRole('heading', { name: 'Connect to your project' })
+    ).toBeVisible({ timeout: 30000 })
+
+    // Close the dialog by pressing Escape
+    await page.keyboard.press('Escape')
+
+    // Verify the dialog is no longer visible
+    await expect(
+      page.getByRole('heading', { name: 'Connect to your project' })
+    ).not.toBeVisible({ timeout: 10000 })
+
+    // Verify the query param is removed from the URL
+    await expect(page).not.toHaveURL(/showConnect=true/)
+  })
+
+  test('Connect button in header opens the Connect dialog', async ({ page, ref }) => {
+    // Navigate to project page without the query param
+    await page.goto(toUrl(`/project/${ref}`))
+
+    // Wait for the page to load
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible({ timeout: 30000 })
+
+    // Click the Connect button in the header
+    await page.getByRole('button', { name: 'Connect' }).click()
+
+    // Verify the Connect dialog/sheet opens
+    await expect(
+      page.getByRole('heading', { name: 'Connect to your project' })
+    ).toBeVisible({ timeout: 30000 })
+
+    // Verify the URL has the showConnect query param
+    await expect(page).toHaveURL(/showConnect=true/)
+  })
+})