diff --git a/apps/studio/src/ipc-handlers.ts b/apps/studio/src/ipc-handlers.ts
index 0b2d00abee..d16afe5be8 100644
--- a/apps/studio/src/ipc-handlers.ts
+++ b/apps/studio/src/ipc-handlers.ts
@@ -196,6 +196,7 @@ export {
 	downloadSyncBackup,
 	exportSiteForPush,
 	fetchSyncableWpcomSites,
+	fetchSyncableWpcomSitesPage,
 	getConnectedWpcomSites,
 	pauseSyncUpload,
 	pullSiteFromLive,
diff --git a/apps/studio/src/modules/sync/lib/ipc-handlers.ts b/apps/studio/src/modules/sync/lib/ipc-handlers.ts
index f33ff10efa..23b074ef4a 100644
--- a/apps/studio/src/modules/sync/lib/ipc-handlers.ts
+++ b/apps/studio/src/modules/sync/lib/ipc-handlers.ts
@@ -12,7 +12,11 @@ import {
 } from '@studio/common/lib/connected-sites';
 import { isErrnoException } from '@studio/common/lib/is-errno-exception';
 import { getCurrentUserId } from '@studio/common/lib/shared-config';
-import { fetchSyncableSites } from '@studio/common/lib/sync/sync-api';
+import {
+	fetchSyncableSites,
+	fetchSyncableSitesPage,
+	type SyncableSitesPage,
+} from '@studio/common/lib/sync/sync-api';
 import wpcomFactory from '@studio/common/lib/wpcom-factory';
 import wpcomXhrRequest from '@studio/common/lib/wpcom-xhr-request-factory';
 import { SyncSite } from '@studio/common/types/sync';
@@ -524,7 +528,24 @@ export async function fetchSyncableWpcomSites( _event: IpcMainInvokeEvent ): Pro
 	if ( ! token?.accessToken ) {
 		throw new Error( 'Authentication required to fetch WordPress.com sites.' );
 	}
-	return fetchSyncableSites( token.accessToken );
+	// Pass the already-connected remote IDs so the transform can mark those
+	// sites 'already-connected' instead of offering them as syncable again.
+	const connectedSites = await getAllConnectedWpcomSitesForCurrentUser();
+	const connectedSiteIds = connectedSites.map( ( site ) => site.id );
+	return fetchSyncableSites( token.accessToken, { connectedSiteIds } );
+}
+
+export async function fetchSyncableWpcomSitesPage(
+	_event: IpcMainInvokeEvent,
+	options: { page?: number; perPage?: number; search?: string } = {}
+): Promise< SyncableSitesPage > {
+	const token = await getAuthenticationToken();
+	if ( ! token?.accessToken ) {
+		throw new Error( 'Authentication required to fetch WordPress.com sites.' );
+	}
+	const connectedSites = await getAllConnectedWpcomSitesForCurrentUser();
+	const connectedSiteIds = connectedSites.map( ( site ) => site.id );
+	return fetchSyncableSitesPage( token.accessToken, { ...options, connectedSiteIds } );
 }
 
 export async function getConnectedWpcomSites(
diff --git a/apps/studio/src/preload.ts b/apps/studio/src/preload.ts
index b92f50046d..ddc428fe70 100644
--- a/apps/studio/src/preload.ts
+++ b/apps/studio/src/preload.ts
@@ -135,6 +135,8 @@ const api: IpcApi = {
 	getConnectedWpcomSites: ( localSiteId ) =>
 		ipcRendererInvoke( 'getConnectedWpcomSites', localSiteId ),
 	fetchSyncableWpcomSites: () => ipcRendererInvoke( 'fetchSyncableWpcomSites' ),
+	fetchSyncableWpcomSitesPage: ( options ) =>
+		ipcRendererInvoke( 'fetchSyncableWpcomSitesPage', options ),
 	pullSiteFromLive: ( siteFolder, remoteSiteId ) =>
 		ipcRendererInvoke( 'pullSiteFromLive', siteFolder, remoteSiteId ),
 	addSyncOperation: ( id, status ) => ipcRendererSend( 'addSyncOperation', id, status ),
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 02ca4db048..8719231a4d 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -17,6 +17,7 @@
 		"@tanstack/react-query": "^5.75.5",
 		"@tanstack/react-query-persist-client": "^5.96.2",
 		"@tanstack/react-router": "^1.120.14",
+		"@wordpress/a11y": "^4.47.0",
 		"@wordpress/api-fetch": "^7.47.0",
 		"@wordpress/components": "^34.0.0",
 		"@wordpress/core-data": "^7.47.0",
diff --git a/apps/ui/src/components/busy-overlay/index.tsx b/apps/ui/src/components/busy-overlay/index.tsx
new file mode 100644
index 0000000000..cacaddc34e
--- /dev/null
+++ b/apps/ui/src/components/busy-overlay/index.tsx
@@ -0,0 +1,15 @@
+import styles from './style.module.css';
+
+/**
+ * Transparent full-window shield that blocks pointer interaction while a
+ * long-running action (site creation, connect-and-pull) finishes. Pair it
+ * with disabled/loading states on the triggering button — it deliberately
+ * covers everything, including the onboarding close button, so a stray
+ * click can't interrupt the work mid-flight.
+ */
+export function BusyOverlay( { active }: { active: boolean } ) {
+	if ( ! active ) {
+		return null;
+	}
+	return <div aria-hidden="true" className={ styles.overlay } />;
+}
diff --git a/apps/ui/src/components/busy-overlay/style.module.css b/apps/ui/src/components/busy-overlay/style.module.css
new file mode 100644
index 0000000000..04daad1f9b
--- /dev/null
+++ b/apps/ui/src/components/busy-overlay/style.module.css
@@ -0,0 +1,7 @@
+.overlay {
+	position: fixed;
+	inset: 0;
+	/* Above the onboarding close button (7) and footer actions (6). */
+	z-index: 8;
+	cursor: progress;
+}
diff --git a/apps/ui/src/components/onboarding-footer/index.tsx b/apps/ui/src/components/onboarding-footer/index.tsx
new file mode 100644
index 0000000000..733f57b651
--- /dev/null
+++ b/apps/ui/src/components/onboarding-footer/index.tsx
@@ -0,0 +1,19 @@
+import styles from './style.module.css';
+import type { ReactNode } from 'react';
+
+/**
+ * Fixed action bar docked to the bottom of the onboarding flow, with a
+ * progressive-blur scrim so content scrolls away underneath it — the
+ * apps/ui counterpart of the desktop renderer's Add Site stepper.
+ * `CreateSiteForm` renders one around its actions; selector-style routes
+ * render their own. The first child (Back) is pinned bottom-left and the
+ * remaining actions sit bottom-right.
+ */
+export function OnboardingFooter( { children }: { children: ReactNode } ) {
+	return (
+		<>
+			<div aria-hidden="true" className={ styles.scrim } />
+			<div className={ styles.actions }>{ children }</div>
+		</>
+	);
+}
diff --git a/apps/ui/src/components/onboarding-footer/style.module.css b/apps/ui/src/components/onboarding-footer/style.module.css
new file mode 100644
index 0000000000..0ba5f127c1
--- /dev/null
+++ b/apps/ui/src/components/onboarding-footer/style.module.css
@@ -0,0 +1,45 @@
+/* Progressive blur scrim: the backdrop blur fades out toward the top via
+   the mask, and the background gradient keeps the action bar legible over
+   content scrolling underneath — mirrors the desktop renderer's stepper. */
+.scrim {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 88px;
+	pointer-events: none;
+	z-index: 5;
+	/* Own snapshot group so the router's view transition doesn't fade/rise
+	   the fixed bar along with the page content. */
+	view-transition-name: onboarding-footer-scrim;
+	background: linear-gradient(
+		to top,
+		var(--wpds-color-bg-surface-neutral, #fff) 10%,
+		color-mix(in srgb, var(--wpds-color-bg-surface-neutral, #fff) 80%, transparent) 55%,
+		transparent
+	);
+	backdrop-filter: blur(10px);
+	-webkit-mask-image: linear-gradient(to top, black 45%, transparent);
+	mask-image: linear-gradient(to top, black 45%, transparent);
+}
+
+.actions {
+	position: fixed;
+	bottom: 20px;
+	left: 20px;
+	right: 20px;
+	z-index: 6;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 12px;
+	/* Own snapshot group — see .scrim. The persistent Back button reads as
+	   stationary chrome across steps instead of animating with the page. */
+	view-transition-name: onboarding-footer-actions;
+}
+
+/* The first action is always Back/Cancel — pin it bottom-left and keep the
+   primary action(s) bottom-right. */
+.actions > :first-child {
+	margin-right: auto;
+}
diff --git a/apps/ui/src/components/onboarding-layout/index.tsx b/apps/ui/src/components/onboarding-layout/index.tsx
index a8928ad396..6f45e651c0 100644
--- a/apps/ui/src/components/onboarding-layout/index.tsx
+++ b/apps/ui/src/components/onboarding-layout/index.tsx
@@ -15,9 +15,10 @@ interface OnboardingLayoutProps {
 	/**
 	 * Content width variant. Defaults to a narrow column (`'default'`) sized
 	 * for forms and short cards; `'wide'` is used by pages that host grids of
-	 * content (e.g. the blueprint selector).
+	 * content (e.g. the blueprint selector); `'full'` is used by richer picker
+	 * pages that need room for responsive card grids.
 	 */
-	width?: 'default' | 'wide';
+	width?: 'default' | 'wide' | 'full';
 }
 
 export function OnboardingLayout( {
@@ -38,7 +39,11 @@ export function OnboardingLayout( {
 					onClick={ onClose }
 				/>
 			) }
-			<div className={ `${ styles.content } ${ width === 'wide' ? styles.contentWide : '' }` }>
+			<div
+				className={ `${ styles.content } ${
+					width === 'full' ? styles.contentFull : width === 'wide' ? styles.contentWide : ''
+				}` }
+			>
 				{ children }
 			</div>
 		</Stack>
diff --git a/apps/ui/src/components/onboarding-layout/style.module.css b/apps/ui/src/components/onboarding-layout/style.module.css
index 62a6679ca6..4381099f0a 100644
--- a/apps/ui/src/components/onboarding-layout/style.module.css
+++ b/apps/ui/src/components/onboarding-layout/style.module.css
@@ -15,6 +15,10 @@
 	max-width: 820px;
 }
 
+.contentFull {
+	max-width: min(1180px, 100vw);
+}
+
 .close {
 	position: absolute;
 	top: 16px;
diff --git a/apps/ui/src/data/core/connectors/ipc/index.ts b/apps/ui/src/data/core/connectors/ipc/index.ts
index f4431f4ee4..07f0cea8c7 100644
--- a/apps/ui/src/data/core/connectors/ipc/index.ts
+++ b/apps/ui/src/data/core/connectors/ipc/index.ts
@@ -5,6 +5,7 @@ import type {
 	AiSessionSummary,
 	AiSessionPlacementUpdatedEvent,
 	AuthUser,
+	AvailableSitePath,
 	ColorScheme,
 	Connector,
 	DeskConfig,
@@ -192,8 +193,8 @@ export function createIpcConnector(): Connector {
 			};
 		},
 
-		async authenticate(): Promise< void > {
-			await ipcApi.authenticate( false );
+		async authenticate( signup = false ): Promise< void > {
+			await ipcApi.authenticate( signup );
 		},
 
 		async logout(): Promise< void > {
@@ -221,6 +222,7 @@ export function createIpcConnector(): Connector {
 				adminPassword,
 				adminEmail,
 				blueprint,
+				skipStart,
 			} = params;
 			return ( await ipcApi.createSite( path, {
 				siteName: name,
@@ -232,6 +234,7 @@ export function createIpcConnector(): Connector {
 				adminPassword,
 				adminEmail,
 				blueprint,
+				noStart: skipStart,
 			} ) ) as SiteDetails;
 		},
 
@@ -258,6 +261,16 @@ export function createIpcConnector(): Connector {
 			return ( await ipcApi.generateSiteNameFromList( usedSites ) ) as string;
 		},
 
+		async findAvailableSitePath( baseName ): Promise< AvailableSitePath > {
+			// The main process resolves the numbered-name collision search in a
+			// single call (checking both existing site names and non-empty site
+			// folders) — same helper `copySite` uses above.
+			const sites = ( await ipcApi.getSiteDetails() ) as SiteDetails[];
+			const name = ( await ipcApi.generateNumberedNameFromList( baseName, sites ) ) as string;
+			const { path } = ( await ipcApi.generateProposedSitePath( name ) ) as { path: string };
+			return { name, path };
+		},
+
 		async generateProposedSitePath( siteName ): Promise< ProposedSitePath > {
 			const response = ( await ipcApi.generateProposedSitePath( siteName ) ) as {
 				path: string;
@@ -466,6 +479,10 @@ export function createIpcConnector(): Connector {
 			return ( await ipcApi.fetchSyncableWpcomSites() ) as SyncSite[];
 		},
 
+		async fetchSyncableWpcomSitesPage( options ) {
+			return await ipcApi.fetchSyncableWpcomSitesPage( options );
+		},
+
 		async connectWpcomSite( localSiteId, site ): Promise< void > {
 			await ipcApi.connectWpcomSites( [ { sites: [ site ], localSiteId } ] );
 		},
diff --git a/apps/ui/src/data/core/index.ts b/apps/ui/src/data/core/index.ts
index b0eff4e788..9c6d94aafb 100644
--- a/apps/ui/src/data/core/index.ts
+++ b/apps/ui/src/data/core/index.ts
@@ -4,6 +4,7 @@ export type {
 	AiModelId,
 	AiSessionSummary,
 	AuthUser,
+	AvailableSitePath,
 	ColorScheme,
 	Connector,
 	CreateSiteParams,
@@ -36,6 +37,7 @@ export type {
 	SupportedLocale,
 	SupportedTerminal,
 	SyncSite,
+	SyncableWpcomSitesPage,
 	UserPreferences,
 	WritableUserPreferences,
 } from './types';
diff --git a/apps/ui/src/data/core/types.ts b/apps/ui/src/data/core/types.ts
index 5e171dbe3e..d6a5985e0b 100644
--- a/apps/ui/src/data/core/types.ts
+++ b/apps/ui/src/data/core/types.ts
@@ -91,6 +91,15 @@ export interface AuthUser {
 	displayName: string;
 }
 
+export interface SyncableWpcomSitesPage {
+	sites: SyncSite[];
+	total: number;
+	page: number;
+	perPage: number;
+	hasMore: boolean;
+	nextPage: number | null;
+}
+
 export interface Connector {
 	/**
 	 * Optional hook for connector-specific setup that must run after the
@@ -102,7 +111,9 @@ export interface Connector {
 	requiresAuth: boolean;
 	isAuthenticated(): Promise< boolean >;
 	getAuthUser(): Promise< AuthUser | null >;
-	authenticate(): Promise< void >;
+	// Starts the WordPress.com OAuth flow in the browser. Pass `signup` to
+	// land on account creation instead of login.
+	authenticate( signup?: boolean ): Promise< void >;
 	logout(): Promise< void >;
 	onAuthStateChanged?( listener: () => void ): () => void;
 
@@ -143,6 +154,11 @@ export interface Connector {
 	// and domain lookups).
 	generateProposedSitePath( siteName: string ): Promise< ProposedSitePath >;
 	generateProposedSiteName( usedSites: SiteDetails[] ): Promise< string >;
+	// Resolves a base name to one that doesn't collide with an existing site
+	// name or a non-empty site folder ("My Site", "My Site 2", ...), returning
+	// it with its proposed directory. The collision search runs in the main
+	// process so callers pay a constant number of IPC round-trips.
+	findAvailableSitePath( baseName: string ): Promise< AvailableSitePath >;
 	selectSiteFolder( defaultPath: string ): Promise< SelectedSiteFolder | null >;
 	comparePaths( path1: string, path2: string ): Promise< boolean >;
 	getAllCustomDomains(): Promise< string[] >;
@@ -188,6 +204,13 @@ export interface Connector {
 	// of which (if any) local site they're already connected to. The publish
 	// picker filters this list to sites that aren't connected anywhere yet.
 	fetchSyncableWpcomSites(): Promise< SyncSite[] >;
+	// Paged variant used by picker flows so large accounts don't fetch every
+	// site and start every thumbnail preview at once.
+	fetchSyncableWpcomSitesPage( options: {
+		page?: number;
+		perPage?: number;
+		search?: string;
+	} ): Promise< SyncableWpcomSitesPage >;
 	// Persists a new local↔live connection so the dropdown picks it up via
 	// `getConnectedWpcomSites`. Safe to call with the minimal `SyncSite` we
 	// receive from a sync-connect-site deep link — later fetches backfill the
@@ -352,6 +375,10 @@ export interface CreateSiteParams {
 	adminUsername?: string;
 	adminPassword?: string;
 	adminEmail?: string;
+	// Skips starting the site server after creation. Used by flows that
+	// immediately overwrite the fresh install (pulling a connected
+	// WordPress.com site), where the sync handler restarts the server itself.
+	skipStart?: boolean;
 	// Optional blueprint payload. When present, `blueprint` is the parsed
 	// blueprint JSON; `slug` is set for featured blueprints (used for stats);
 	// `filePath` points at the extracted `blueprint.json` inside a ZIP bundle
@@ -377,6 +404,11 @@ export interface ProposedSitePath {
 	isNameTooLong?: boolean;
 }
 
+export interface AvailableSitePath {
+	name: string;
+	path: string;
+}
+
 export interface SelectedSiteFolder {
 	path: string;
 	name: string;
diff --git a/apps/ui/src/data/queries/use-create-site-helpers.ts b/apps/ui/src/data/queries/use-create-site-helpers.ts
index 2e0f0a6c6e..6c89ad2aa3 100644
--- a/apps/ui/src/data/queries/use-create-site-helpers.ts
+++ b/apps/ui/src/data/queries/use-create-site-helpers.ts
@@ -2,7 +2,12 @@ import { useQuery } from '@tanstack/react-query';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { useConnector } from '@/data/core';
-import type { ProposedSitePath, SelectedSiteFolder, SiteDetails } from '@/data/core';
+import type {
+	AvailableSitePath,
+	ProposedSitePath,
+	SelectedSiteFolder,
+	SiteDetails,
+} from '@/data/core';
 
 const CUSTOM_DOMAINS_QUERY_KEY = [ 'customDomains' ] as const;
 const PROPOSED_SITE_NAME_QUERY_KEY = [ 'proposedSiteName' ] as const;
@@ -34,6 +39,22 @@ export function useProposedSiteName( sites: SiteDetails[] | undefined ) {
 	} );
 }
 
+/**
+ * Finds a site name that doesn't collide with an existing site or a
+ * non-empty site folder by appending an incrementing suffix ("My Site",
+ * "My Site 2", ...), and returns it together with its proposed directory.
+ * Used when a flow seeds the name from an external source rather than user
+ * input. The search runs in the main process in one round-trip.
+ */
+export function useFindAvailableSiteName() {
+	const connector = useConnector();
+	return useCallback(
+		( baseName: string ): Promise< AvailableSitePath > =>
+			connector.findAvailableSitePath( baseName ),
+		[ connector ]
+	);
+}
+
 /**
  * Returns two imperative helpers the create form uses to validate paths:
  *
diff --git a/apps/ui/src/data/queries/use-wpcom-sites.test.tsx b/apps/ui/src/data/queries/use-wpcom-sites.test.tsx
new file mode 100644
index 0000000000..ff763dbc36
--- /dev/null
+++ b/apps/ui/src/data/queries/use-wpcom-sites.test.tsx
@@ -0,0 +1,120 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ConnectorProvider } from '@/data/core';
+import { useSyncableWpcomSitesPages } from './use-wpcom-sites';
+import type { Connector, SyncableWpcomSitesPage, SyncSite } from '@/data/core';
+import type { ReactNode } from 'react';
+
+const PAGE_SIZE = 12;
+
+function makeSite( id: number ): SyncSite {
+	return {
+		id,
+		localSiteId: '',
+		name: `Site ${ id }`,
+		url: `https://site-${ id }.example.com`,
+		isStaging: false,
+		isPressable: false,
+		environmentType: null,
+		syncSupport: 'syncable',
+		lastPullTimestamp: null,
+		lastPushTimestamp: null,
+	};
+}
+
+function makePage( sites: SyncSite[], nextPage: number | null, page = 1 ): SyncableWpcomSitesPage {
+	return {
+		sites,
+		total: 14,
+		page,
+		perPage: PAGE_SIZE,
+		hasMore: nextPage !== null,
+		nextPage,
+	};
+}
+
+function createWrapper( connector: Partial< Connector > ) {
+	const queryClient = new QueryClient( {
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	} );
+
+	return function Wrapper( { children }: { children: ReactNode } ) {
+		return (
+			<QueryClientProvider client={ queryClient }>
+				<ConnectorProvider connector={ connector as Connector }>{ children }</ConnectorProvider>
+			</QueryClientProvider>
+		);
+	};
+}
+
+describe( 'useSyncableWpcomSitesPages', () => {
+	it( 'loads the first page of syncable WordPress.com sites', async () => {
+		const page = makePage( [ makeSite( 1 ) ], 2 );
+		const fetchSyncableWpcomSitesPage = vi.fn().mockResolvedValue( page );
+
+		const { result } = renderHook( () => useSyncableWpcomSitesPages(), {
+			wrapper: createWrapper( { fetchSyncableWpcomSitesPage } ),
+		} );
+
+		await waitFor( () => expect( result.current.data ).toBeDefined() );
+
+		expect( fetchSyncableWpcomSitesPage ).toHaveBeenCalledWith( {
+			page: 1,
+			perPage: PAGE_SIZE,
+			search: undefined,
+		} );
+		expect( result.current.data?.pages ).toEqual( [ page ] );
+		expect( result.current.hasNextPage ).toBe( true );
+	} );
+
+	it( 'loads the next page when requested', async () => {
+		const firstPage = makePage( [ makeSite( 1 ) ], 2 );
+		const secondPage = makePage( [ makeSite( 2 ) ], null, 2 );
+		const fetchSyncableWpcomSitesPage = vi
+			.fn()
+			.mockResolvedValueOnce( firstPage )
+			.mockResolvedValueOnce( secondPage );
+
+		const { result } = renderHook( () => useSyncableWpcomSitesPages(), {
+			wrapper: createWrapper( { fetchSyncableWpcomSitesPage } ),
+		} );
+
+		await waitFor( () => expect( result.current.data?.pages ).toEqual( [ firstPage ] ) );
+
+		await act( async () => {
+			await result.current.fetchNextPage();
+		} );
+
+		expect( fetchSyncableWpcomSitesPage ).toHaveBeenLastCalledWith( {
+			page: 2,
+			perPage: PAGE_SIZE,
+			search: undefined,
+		} );
+		await waitFor( () =>
+			expect( result.current.data?.pages ).toEqual( [ firstPage, secondPage ] )
+		);
+		expect( result.current.hasNextPage ).toBe( false );
+	} );
+
+	it( 'passes trimmed search terms through to the paged fetch', async () => {
+		const page = makePage( [ makeSite( 7 ) ], null );
+		const fetchSyncableWpcomSitesPage = vi.fn().mockResolvedValue( page );
+
+		renderHook( () => useSyncableWpcomSitesPages( { search: '  example  ' } ), {
+			wrapper: createWrapper( { fetchSyncableWpcomSitesPage } ),
+		} );
+
+		await waitFor( () =>
+			expect( fetchSyncableWpcomSitesPage ).toHaveBeenCalledWith( {
+				page: 1,
+				perPage: PAGE_SIZE,
+				search: 'example',
+			} )
+		);
+	} );
+} );
diff --git a/apps/ui/src/data/queries/use-wpcom-sites.ts b/apps/ui/src/data/queries/use-wpcom-sites.ts
index 9b7f717bf0..17a96485c4 100644
--- a/apps/ui/src/data/queries/use-wpcom-sites.ts
+++ b/apps/ui/src/data/queries/use-wpcom-sites.ts
@@ -1,9 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useConnector } from '@/data/core';
 import type { SyncSite } from '@/data/core';
 
 const SYNCABLE_WPCOM_SITES_QUERY_KEY = [ 'syncable-wpcom-sites' ] as const;
+const SYNCABLE_WPCOM_SITES_PAGE_SIZE = 12;
 const ALL_CONNECTED_WPCOM_SITES_QUERY_KEY = [ 'all-connected-wpcom-sites' ] as const;
 
 export function useSyncableWpcomSites( options: { enabled?: boolean } = {} ) {
@@ -19,6 +20,24 @@ export function useSyncableWpcomSites( options: { enabled?: boolean } = {} ) {
 	} );
 }
 
+export function useSyncableWpcomSitesPages( options: { enabled?: boolean; search?: string } = {} ) {
+	const connector = useConnector();
+	const search = options.search?.trim() ?? '';
+	return useInfiniteQuery( {
+		queryKey: [ ...SYNCABLE_WPCOM_SITES_QUERY_KEY, 'pages', search ],
+		queryFn: ( { pageParam } ) =>
+			connector.fetchSyncableWpcomSitesPage( {
+				page: pageParam,
+				perPage: SYNCABLE_WPCOM_SITES_PAGE_SIZE,
+				search: search || undefined,
+			} ),
+		initialPageParam: 1,
+		getNextPageParam: ( lastPage ) => lastPage.nextPage ?? undefined,
+		enabled: options.enabled ?? true,
+		staleTime: 5 * 60 * 1000,
+	} );
+}
+
 // Mirrors `useConnectedWpcomSites` but returns connections for every local
 // site — used to filter out WordPress.com sites that are already attached to
 // another Studio site when picking a publish target.
diff --git a/apps/ui/src/hooks/use-grid-arrow-navigation.ts b/apps/ui/src/hooks/use-grid-arrow-navigation.ts
new file mode 100644
index 0000000000..0910f23050
--- /dev/null
+++ b/apps/ui/src/hooks/use-grid-arrow-navigation.ts
@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+
+const NAV_KEYS = [ 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End' ];
+
+/**
+ * Arrow-key navigation between the items of a card grid (or row). Attach the
+ * returned handler to the container's `onKeyDown` and mark each navigable
+ * control with `data-arrow-nav-item`.
+ *
+ * Left/Right move linearly (direction-aware for RTL); Up/Down move by visual
+ * row using the container's resolved CSS-grid column count (flex rows resolve
+ * to one "column", which degrades to linear movement); Home/End jump to the
+ * ends. Tab order is left untouched — arrows are an enhancement on top of it,
+ * so overlay controls inside a card wrapper (preview buttons, CTAs) keep
+ * their regular tab stops.
+ */
+export function useGridArrowNavigation() {
+	return useCallback( ( event: React.KeyboardEvent< HTMLElement > ) => {
+		if ( ! NAV_KEYS.includes( event.key ) ) {
+			return;
+		}
+		const target = event.target as HTMLElement;
+		const origin = target.closest< HTMLElement >( '[data-arrow-nav-item]' );
+		if ( ! origin ) {
+			return;
+		}
+		const container = event.currentTarget;
+		const items = Array.from(
+			container.querySelectorAll< HTMLElement >( '[data-arrow-nav-item]' )
+		);
+		const index = items.indexOf( origin );
+		if ( index === -1 ) {
+			return;
+		}
+
+		const style = getComputedStyle( container );
+		const columns =
+			style.display === 'grid' && style.gridTemplateColumns !== 'none'
+				? style.gridTemplateColumns.split( ' ' ).length
+				: 1;
+		const isRtl = style.direction === 'rtl';
+		const forward = isRtl ? 'ArrowLeft' : 'ArrowRight';
+		const backward = isRtl ? 'ArrowRight' : 'ArrowLeft';
+
+		let next = -1;
+		switch ( event.key ) {
+			case forward:
+				next = index + 1;
+				break;
+			case backward:
+				next = index - 1;
+				break;
+			case 'ArrowDown':
+				next = index + columns;
+				break;
+			case 'ArrowUp':
+				next = index - columns;
+				break;
+			case 'Home':
+				next = 0;
+				break;
+			case 'End':
+				next = items.length - 1;
+				break;
+		}
+
+		if ( next < 0 || next >= items.length || next === index ) {
+			return;
+		}
+		event.preventDefault();
+		items[ next ].focus();
+	}, [] );
+}
diff --git a/apps/ui/src/hooks/use-offline.ts b/apps/ui/src/hooks/use-offline.ts
new file mode 100644
index 0000000000..a5374a7a56
--- /dev/null
+++ b/apps/ui/src/hooks/use-offline.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Tracks the browser's online/offline state. Mirrors the desktop renderer's
+ * hook of the same name — used to disable network-dependent flows like
+ * connecting a WordPress.com site.
+ */
+export function useOffline(): boolean {
+	const [ isOffline, setIsOffline ] = useState( ! navigator.onLine );
+
+	useEffect( () => {
+		const handleOnline = () => setIsOffline( false );
+		const handleOffline = () => setIsOffline( true );
+		window.addEventListener( 'online', handleOnline );
+		window.addEventListener( 'offline', handleOffline );
+		return () => {
+			window.removeEventListener( 'online', handleOnline );
+			window.removeEventListener( 'offline', handleOffline );
+		};
+	}, [] );
+
+	return isOffline;
+}
diff --git a/apps/ui/src/lib/docs-links.ts b/apps/ui/src/lib/docs-links.ts
index 67ae38523d..b1b2099611 100644
--- a/apps/ui/src/lib/docs-links.ts
+++ b/apps/ui/src/lib/docs-links.ts
@@ -15,6 +15,10 @@ const DOCS_LINKS = {
 	docsSslInStudio: {
 		en: 'https://developer.wordpress.com/docs/developer-tools/studio/ssl-in-studio/',
 	},
+	docsSyncSupportedSites: {
+		en: 'https://developer.wordpress.com/docs/developer-tools/studio/sync/#supported-sites',
+		es: 'https://developer.wordpress.com/es/docs/herramientas-para-desarrolladores/studio/sync/#sitios-compatibles',
+	},
 } as const satisfies Record< string, TranslatedLink >;
 
 export type DocsLinkKey = keyof typeof DOCS_LINKS;
diff --git a/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx b/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx
index 0db88f49b7..1bc343550a 100644
--- a/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx
+++ b/apps/ui/src/ui-classic/router/layout-onboarding/index.tsx
@@ -14,6 +14,7 @@ function OnboardingShell() {
 	// "configure" step reuses the shared site form and should match the
 	// narrow "/onboarding/create" width.
 	const matches = useMatches();
+	const isFull = matches.some( ( match ) => match.pathname === '/onboarding/connect' );
 	const isWide = matches.some( ( match ) => {
 		if ( match.pathname === '/onboarding' ) return true;
 		if ( match.pathname !== '/onboarding/blueprint' ) return false;
@@ -23,7 +24,7 @@ function OnboardingShell() {
 	return (
 		<OnboardingLayout
 			onClose={ hasSites ? () => void navigate( { to: '/' } ) : undefined }
-			width={ isWide ? 'wide' : 'default' }
+			width={ isFull ? 'full' : isWide ? 'wide' : 'default' }
 		>
 			<Outlet />
 		</OnboardingLayout>
diff --git a/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css b/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css
index 3bf06f28c5..8532783c9a 100644
--- a/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css
+++ b/apps/ui/src/ui-classic/router/layout-onboarding/style.module.css
@@ -3,6 +3,10 @@
 	text-align: left;
 }
 
+.pageSpacious {
+	padding-top: 64px;
+}
+
 /* Typography comes from the universal `h1` rule in index.css — this class
    only layers on the layout spacing above the subtitle. */
 .title {
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
new file mode 100644
index 0000000000..e53fe13582
--- /dev/null
+++ b/apps/ui/src/ui-classic/router/route-onboarding-connect/index.tsx
@@ -0,0 +1,643 @@
+import { getEnvironmentLabel, getSiteEnvironment } from '@studio/common/lib/sync/environment-utils';
+import { getMshotUrl } from '@studio/common/lib/sync/mshots';
+import { createRoute, useNavigate } from '@tanstack/react-router';
+import { speak } from '@wordpress/a11y';
+import { Spinner } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { chevronLeft, check, external, search, wordpress } from '@wordpress/icons';
+import { Button, Icon, Input, InputLayout } from '@wordpress/ui';
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
+import { BusyOverlay } from '@/components/busy-overlay';
+import { OnboardingFooter } from '@/components/onboarding-footer';
+import { useConnector } from '@/data/core';
+import { useAuthUser } from '@/data/queries/use-auth-user';
+import { useFindAvailableSiteName } from '@/data/queries/use-create-site-helpers';
+import { useCreateSite, useDeleteSite } from '@/data/queries/use-sites';
+import { usePullSiteFromLive } from '@/data/queries/use-sync-site';
+import { useUserLocale } from '@/data/queries/use-user-locale';
+import { useSyncableWpcomSitesPages } from '@/data/queries/use-wpcom-sites';
+import { useGridArrowNavigation } from '@/hooks/use-grid-arrow-navigation';
+import { useOffline } from '@/hooks/use-offline';
+import { getLocalizedLink } from '@/lib/docs-links';
+import { onboardingLayoutRoute } from '../layout-onboarding';
+import sharedStyles from '../layout-onboarding/style.module.css';
+import styles from './style.module.css';
+import type { SyncSite } from '@/data/core';
+
+const SEARCH_VISIBILITY_THRESHOLD = 5;
+
+// Same wordpress.com new-site flow the desktop renderer's Create button
+// opens (see generate-checkout-url.ts).
+const CREATE_WPCOM_SITE_URL =
+	'https://wordpress.com/setup/new-hosted-site?ref=studio&section=studio-sync&showDomainStep=true';
+
+// Labels for sites the user can see but not pick; the needs-upgrade and
+// needs-transfer groups get overlay CTAs instead.
+function getSyncStatusLabel( site: SyncSite ): string | null {
+	switch ( site.syncSupport ) {
+		case 'already-connected':
+			return __( 'Already connected' );
+		case 'missing-permissions':
+			return __( 'Missing permissions' );
+		case 'deleted':
+			return __( 'Deleted' );
+		case 'unsupported':
+			return __( 'Unsupported' );
+		default:
+			return null;
+	}
+}
+
+interface SiteSection {
+	key: string;
+	title?: string;
+	description?: string;
+	sites: SyncSite[];
+}
+
+// Groups sites the way the desktop renderer's picker does: syncable sites
+// lead (no heading), followed by explained groups for everything else.
+function groupSites( sites: SyncSite[] ): SiteSection[] {
+	const syncable = sites.filter( ( s ) => s.syncSupport === 'syncable' );
+	const alreadyConnected = sites.filter( ( s ) => s.syncSupport === 'already-connected' );
+	const needsTransfer = sites.filter( ( s ) => s.syncSupport === 'needs-transfer' );
+	const needsUpgrade = sites.filter( ( s ) => s.syncSupport === 'needs-upgrade' );
+	const other = sites.filter(
+		( s ) =>
+			s.syncSupport === 'unsupported' ||
+			s.syncSupport === 'missing-permissions' ||
+			s.syncSupport === 'deleted'
+	);
+
+	const sections: SiteSection[] = [];
+	if ( syncable.length > 0 ) {
+		sections.push( { key: 'syncable', sites: syncable } );
+	}
+	if ( alreadyConnected.length > 0 ) {
+		sections.push( {
+			key: 'already-connected',
+			title: __( 'Already connected' ),
+			description: __( 'These sites are already linked to a local site.' ),
+			sites: alreadyConnected,
+		} );
+	}
+	if ( needsTransfer.length > 0 ) {
+		sections.push( {
+			key: 'needs-transfer',
+			title: __( 'Enable hosting features first' ),
+			description: __(
+				'These sites need hosting features turned on before they can sync. You can do this from WordPress.com.'
+			),
+			sites: needsTransfer,
+		} );
+	}
+	if ( needsUpgrade.length > 0 ) {
+		sections.push( {
+			key: 'needs-upgrade',
+			title: __( 'Upgrade your plan to sync' ),
+			description: __(
+				'Syncing requires a Business plan or higher. Upgrade on WordPress.com to get started.'
+			),
+			sites: needsUpgrade,
+		} );
+	}
+	if ( other.length > 0 ) {
+		sections.push( {
+			key: 'other',
+			title: __( 'Not available for sync' ),
+			description: __(
+				"These sites can't be synced due to missing permissions or other limitations."
+			),
+			sites: other,
+		} );
+	}
+	return sections;
+}
+
+function SignedOutView() {
+	const connector = useConnector();
+	const isOffline = useOffline();
+
+	const benefits = [
+		__( 'Work on your site locally.' ),
+		__( 'Sync content, themes, and plugins.' ),
+		__( 'Supports staging and production sites.' ),
+	];
+
+	return (
+		<div className={ styles.signedOut }>
+			<ul className={ styles.benefits }>
+				{ benefits.map( ( benefit ) => (
+					<li key={ benefit } className={ styles.benefit }>
+						<Icon icon={ check } className={ styles.benefitIcon } />
+						<span>{ benefit }</span>
+					</li>
+				) ) }
+			</ul>
+			<div className={ styles.authActions }>
+				<Button
+					type="button"
+					variant="solid"
+					tone="brand"
+					disabled={ isOffline }
+					onClick={ () => void connector.authenticate() }
+				>
+					<Icon icon={ wordpress } />
+					<span>{ __( 'Log in with WordPress.com' ) }</span>
+				</Button>
+				<p className={ styles.signupHint }>
+					{ __( 'New to WordPress.com?' ) }{ ' ' }
+					<Button
+						type="button"
+						variant="minimal"
+						tone="brand"
+						className={ styles.signupLink }
+						disabled={ isOffline }
+						onClick={ () => void connector.authenticate( true ) }
+					>
+						{ __( 'Create a free account' ) }
+					</Button>
+				</p>
+				{ isOffline && (
+					<p className={ styles.offlineHint }>{ __( "You're currently offline." ) }</p>
+				) }
+			</div>
+		</div>
+	);
+}
+
+// Centered call to action on a non-syncable site's thumbnail — "Enable" for
+// sites that need hosting features, "Upgrade plan" for free-plan sites.
+// Rendered as a sibling of the (inert) card button so the markup stays valid.
+function ThumbnailCta( { site }: { site: SyncSite } ) {
+	const connector = useConnector();
+
+	if ( site.syncSupport === 'needs-upgrade' ) {
+		return (
+			<div className={ styles.thumbCtaOverlay }>
+				<button
+					type="button"
+					className={ styles.ctaButton }
+					onClick={ () =>
+						void connector.openExternalUrl( `https://wordpress.com/plans/${ site.id }` )
+					}
+				>
+					<span>{ __( 'Upgrade plan' ) }</span>
+					<Icon icon={ external } size={ 14 } />
+				</button>
+				{ site.planName && <span className={ styles.planBadge }>{ site.planName }</span> }
+			</div>
+		);
+	}
+	if ( site.syncSupport === 'needs-transfer' ) {
+		return (
+			<div className={ styles.thumbCtaOverlay }>
+				<button
+					type="button"
+					className={ styles.ctaButton }
+					onClick={ () =>
+						void connector.openExternalUrl( `https://wordpress.com/hosting-features/${ site.id }` )
+					}
+				>
+					<span>{ __( 'Enable' ) }</span>
+					<Icon icon={ external } size={ 14 } />
+				</button>
+			</div>
+		);
+	}
+	return null;
+}
+
+function RemoteSiteCard( {
+	site,
+	isSelected,
+	onSelect,
+}: {
+	site: SyncSite;
+	isSelected: boolean;
+	onSelect: ( id: number ) => void;
+} ) {
+	const isSyncable = site.syncSupport === 'syncable';
+	const isDimmed =
+		site.syncSupport === 'deleted' ||
+		site.syncSupport === 'unsupported' ||
+		site.syncSupport === 'missing-permissions';
+	const statusLabel = getSyncStatusLabel( site );
+	const environment = getSiteEnvironment( site );
+
+	let cardClass = styles.siteCard;
+	if ( isSelected ) {
+		cardClass += ` ${ styles.siteCardSelected }`;
+	} else if ( ! isSyncable ) {
+		cardClass += ` ${ styles.siteCardInert }`;
+		if ( isDimmed ) {
+			cardClass += ` ${ styles.siteCardDimmed }`;
+		}
+	}
+
+	return (
+		<li className={ styles.siteCardWrapper }>
+			<button
+				type="button"
+				className={ cardClass }
+				aria-pressed={ isSelected }
+				aria-disabled={ ! isSyncable || undefined }
+				data-arrow-nav-item
+				onClick={ () => {
+					if ( isSyncable ) {
+						onSelect( site.id );
+					}
+				} }
+			>
+				<span className={ styles.siteThumb }>
+					<img src={ getMshotUrl( site.url ) } alt="" loading="lazy" />
+					{ isSyncable && (
+						<span className={ styles.siteBadges }>
+							<span className={ styles.siteBadge }>
+								{ site.isPressable ? __( 'Pressable' ) : __( 'WP.com' ) }
+							</span>
+							<span className={ `${ styles.envBadge } ${ styles[ `envBadge-${ environment }` ] }` }>
+								{ getEnvironmentLabel( environment ) }
+							</span>
+						</span>
+					) }
+				</span>
+				<span className={ styles.siteText }>
+					<span className={ styles.siteName }>{ site.name || site.url }</span>
+					<span className={ styles.siteUrl }>{ site.url.replace( /^https?:\/\//, '' ) }</span>
+					{ statusLabel && <span className={ styles.siteStatus }>{ statusLabel }</span> }
+				</span>
+			</button>
+			<ThumbnailCta site={ site } />
+		</li>
+	);
+}
+
+export function OnboardingConnectPage() {
+	const navigate = useNavigate();
+	const connector = useConnector();
+	const locale = useUserLocale();
+	const { data: user, isLoading: isAuthLoading } = useAuthUser();
+	const createSite = useCreateSite();
+	const deleteSite = useDeleteSite();
+	const pullSiteFromLive = usePullSiteFromLive();
+	const findAvailableSiteName = useFindAvailableSiteName();
+
+	const isOffline = useOffline();
+	const handleGridKeyDown = useGridArrowNavigation();
+	const [ selectedId, setSelectedId ] = useState< number | null >( null );
+	const [ isConnecting, setIsConnecting ] = useState( false );
+	const [ submitError, setSubmitError ] = useState( '' );
+	const [ searchQuery, setSearchQuery ] = useState( '' );
+	const loadMoreRef = useRef< HTMLDivElement | null >( null );
+	const deferredSearchQuery = useDeferredValue( searchQuery );
+	const syncable = useSyncableWpcomSitesPages( {
+		enabled: !! user,
+		search: deferredSearchQuery,
+	} );
+	const {
+		fetchNextPage,
+		hasNextPage: hasNextSitesPage,
+		isFetchingNextPage: isFetchingNextSitesPage,
+	} = syncable;
+
+	const sites = useMemo(
+		() => syncable.data?.pages.flatMap( ( page ) => page.sites ) ?? [],
+		[ syncable.data ]
+	);
+	const totalSites = syncable.data?.pages.at( -1 )?.total ?? sites.length;
+	const isSingleSite = totalSites === 1 && sites.length === 1;
+	const isLoadingFirstPage = syncable.isLoading || ( syncable.isFetching && sites.length === 0 );
+
+	// With exactly one site on the account, pre-select it so the user can
+	// proceed straight to Add site — mirrors the desktop renderer.
+	useEffect( () => {
+		if ( isSingleSite && sites[ 0 ].syncSupport === 'syncable' ) {
+			setSelectedId( sites[ 0 ].id );
+		}
+	}, [ isSingleSite, sites ] );
+
+	useEffect( () => {
+		if ( selectedId && ! sites.some( ( site ) => site.id === selectedId ) ) {
+			setSelectedId( null );
+		}
+	}, [ selectedId, sites ] );
+
+	useEffect( () => {
+		const loadMoreTarget = loadMoreRef.current;
+		if (
+			! loadMoreTarget ||
+			! hasNextSitesPage ||
+			isFetchingNextSitesPage ||
+			typeof IntersectionObserver === 'undefined'
+		) {
+			return;
+		}
+
+		let requestedNextPage = false;
+		const observer = new IntersectionObserver(
+			( entries ) => {
+				if ( ! requestedNextPage && entries.some( ( entry ) => entry.isIntersecting ) ) {
+					requestedNextPage = true;
+					void fetchNextPage();
+				}
+			},
+			{ rootMargin: '240px 0px' }
+		);
+		observer.observe( loadMoreTarget );
+		return () => observer.disconnect();
+	}, [ fetchNextPage, hasNextSitesPage, isFetchingNextSitesPage ] );
+
+	const sections = useMemo( () => groupSites( sites ), [ sites ] );
+	// While a search narrows the list, hold the compact card size everywhere —
+	// the lead section's grow-to-fill sizing would balloon one or two matches
+	// and resize them with every keystroke.
+	const isSearching = deferredSearchQuery.trim().length > 0;
+
+	const selectedSite = sites.find( ( site ) => site.id === selectedId );
+	const showSearch = searchQuery.length > 0 || totalSites > SEARCH_VISIBILITY_THRESHOLD;
+
+	const handleConnect = useCallback( async () => {
+		if ( ! selectedSite || isConnecting ) {
+			return;
+		}
+		setSubmitError( '' );
+		setIsConnecting( true );
+		let createdSiteId: string | null = null;
+		try {
+			// Create the local shell first (skipping server start — the pull
+			// restarts it once the remote content lands), then persist the
+			// connection and kick off the pull. Mirrors the desktop renderer's
+			// pull-remote flow.
+			const { name: availableName, path } = await findAvailableSiteName(
+				selectedSite.name || selectedSite.url
+			);
+			const site = await createSite.mutateAsync( {
+				name: availableName,
+				path,
+				skipStart: true,
+			} );
+			createdSiteId = site.id;
+			await connector.connectWpcomSite( site.id, {
+				...selectedSite,
+				localSiteId: site.id,
+				syncSupport: 'already-connected',
+			} );
+			// Fire-and-forget: the pull reports progress through the shared
+			// sync-activity channel, which the site view surfaces.
+			pullSiteFromLive.mutate( { siteId: site.id, remoteSiteId: selectedSite.id } );
+			speak(
+				sprintf(
+					// translators: %s is the site name.
+					__( '%s site added.' ),
+					availableName
+				)
+			);
+			await navigate( { to: '/sites/$siteId/new', params: { siteId: site.id } } );
+		} catch ( error ) {
+			// Roll back the never-connected shell so a retry doesn't leave an
+			// orphaned local site behind (and pick "Name 2" next time around).
+			if ( createdSiteId ) {
+				try {
+					await deleteSite.mutateAsync( { id: createdSiteId } );
+				} catch {
+					// Keep the original connect error as the user-facing message.
+				}
+			}
+			setIsConnecting( false );
+			setSubmitError(
+				error instanceof Error ? error.message : __( 'Failed to connect site. Please try again.' )
+			);
+		}
+	}, [
+		selectedSite,
+		isConnecting,
+		findAvailableSiteName,
+		connector,
+		createSite,
+		deleteSite,
+		pullSiteFromLive,
+		navigate,
+	] );
+
+	const isSignedIn = !! user;
+
+	const helperLinks = (
+		<p className={ styles.helperLinks }>
+			<Button
+				type="button"
+				variant="minimal"
+				tone="neutral"
+				className={ styles.helperLink }
+				onClick={ () => void syncable.refetch() }
+				disabled={ syncable.isFetching }
+			>
+				{ syncable.isFetching ? __( 'Refreshing…' ) : __( 'Refresh list' ) }
+			</Button>
+			{ ' · ' }
+			<Button
+				type="button"
+				variant="minimal"
+				tone="neutral"
+				className={ styles.helperLink }
+				onClick={ () =>
+					void connector.openExternalUrl( getLocalizedLink( locale, 'docsSyncSupportedSites' ) )
+				}
+			>
+				<span>{ __( 'Supported sites' ) }</span>
+				<Icon icon={ external } size={ 14 } />
+			</Button>
+		</p>
+	);
+
+	return (
+		<div className={ `${ sharedStyles.page } ${ sharedStyles.pageSpacious }` }>
+			{ /* Connecting creates the local site and persists the connection;
+			     shield the window so stray clicks can't interrupt mid-flight. */ }
+			<BusyOverlay active={ isConnecting } />
+			<h1 className={ sharedStyles.title }>
+				{ isSignedIn && isSingleSite ? __( 'Connect your site' ) : __( 'Connect a site' ) }
+			</h1>
+			<p className={ sharedStyles.subtitle }>
+				{ ! isSignedIn && __( 'Connect your WordPress.com account to access your sites.' ) }
+				{ isSignedIn &&
+					( isSingleSite
+						? __( 'Ready to bring into your Studio.' )
+						: __( 'Select a WordPress.com or Pressable site to bring into your Studio.' ) ) }
+			</p>
+
+			{ ! isSignedIn && ! isAuthLoading && <SignedOutView /> }
+
+			{ isSignedIn && (
+				<>
+					{ /* The helper links read "Refreshing…" during the initial
+					     load; hide the whole row until the list exists and let
+					     the loading state below carry the message. */ }
+					{ ! isSingleSite && ! isLoadingFirstPage && (
+						<div className={ styles.searchHeader }>
+							{ showSearch && (
+								<Input
+									type="search"
+									className={ styles.search }
+									placeholder={ __( 'Search sites' ) }
+									prefix={
+										<InputLayout.Slot>
+											<Icon icon={ search } size={ 16 } />
+										</InputLayout.Slot>
+									}
+									value={ searchQuery }
+									onChange={ ( event ) => setSearchQuery( event.target.value ) }
+								/>
+							) }
+							{ helperLinks }
+						</div>
+					) }
+
+					{ isLoadingFirstPage && (
+						<div className={ styles.loadingState }>
+							<Spinner />
+							<p className={ styles.listHint }>{ __( 'Loading your sites…' ) }</p>
+						</div>
+					) }
+					{ ! isLoadingFirstPage && ! isSearching && sites.length === 0 && (
+						<div className={ styles.emptyState }>
+							<p className={ styles.listHint }>
+								{ __( 'No WordPress.com sites found on this account.' ) }
+							</p>
+							<Button
+								type="button"
+								variant="minimal"
+								tone="brand"
+								disabled={ isOffline }
+								onClick={ () => void connector.openExternalUrl( CREATE_WPCOM_SITE_URL ) }
+							>
+								<span>{ __( 'Create a new WordPress.com site' ) }</span>
+								<Icon icon={ external } size={ 14 } />
+							</Button>
+						</div>
+					) }
+					{ ! isLoadingFirstPage && isSearching && sites.length === 0 && (
+						<p className={ styles.listHint }>
+							{ sprintf(
+								// translators: %s is the search query.
+								__( 'No sites found for "%s"' ),
+								deferredSearchQuery
+							) }
+						</p>
+					) }
+
+					{ ! isLoadingFirstPage && isSingleSite ? (
+						<div className={ styles.singleSite }>
+							<ul
+								className={ `${ styles.siteGrid } ${ styles.siteGridSingle }` }
+								onKeyDown={ handleGridKeyDown }
+							>
+								<RemoteSiteCard
+									site={ sites[ 0 ] }
+									isSelected={ selectedId === sites[ 0 ].id }
+									onSelect={ setSelectedId }
+								/>
+							</ul>
+							{ helperLinks }
+						</div>
+					) : ! isLoadingFirstPage && sites.length > 0 ? (
+						<div className={ styles.sections }>
+							{ sections.map( ( section, sectionIndex ) => (
+								<section key={ section.key } className={ styles.section }>
+									{ section.title && (
+										<div className={ styles.sectionHeader }>
+											<h3 className={ styles.sectionTitle }>{ section.title }</h3>
+											{ section.description && (
+												<p className={ styles.sectionDescription }>{ section.description }</p>
+											) }
+										</div>
+									) }
+									{ /* Only the lead section grows its cards to fill the
+									     row — and only when not searching; secondary groups
+									     and filtered results stay at the compact size. */ }
+									<ul
+										className={
+											sectionIndex === 0 && ! isSearching
+												? styles.siteGrid
+												: `${ styles.siteGrid } ${ styles.siteGridSecondary }`
+										}
+										onKeyDown={ handleGridKeyDown }
+									>
+										{ section.sites.map( ( site ) => (
+											<RemoteSiteCard
+												key={ site.id }
+												site={ site }
+												isSelected={ selectedId === site.id }
+												onSelect={ setSelectedId }
+											/>
+										) ) }
+									</ul>
+								</section>
+							) ) }
+							{ hasNextSitesPage && (
+								<div ref={ loadMoreRef } className={ styles.emptyState }>
+									<p className={ styles.listHint }>
+										{ sprintf(
+											// translators: 1: number of sites shown, 2: total number of sites.
+											__( 'Showing %1$d of %2$d sites.' ),
+											sites.length,
+											totalSites
+										) }
+									</p>
+									<Button
+										type="button"
+										variant="outline"
+										tone="neutral"
+										disabled={ isFetchingNextSitesPage }
+										onClick={ () => void fetchNextPage() }
+									>
+										{ isFetchingNextSitesPage ? __( 'Loading more…' ) : __( 'Load more sites' ) }
+									</Button>
+								</div>
+							) }
+						</div>
+					) : null }
+
+					{ submitError && (
+						<div role="alert" className={ styles.submitError }>
+							{ submitError }
+						</div>
+					) }
+				</>
+			) }
+
+			<OnboardingFooter>
+				<Button
+					type="button"
+					variant="minimal"
+					tone="neutral"
+					onClick={ () => void navigate( { to: '/onboarding' } ) }
+					disabled={ isConnecting }
+				>
+					<Icon icon={ chevronLeft } size={ 16 } />
+					<span>{ __( 'Back' ) }</span>
+				</Button>
+				{ isSignedIn && (
+					<Button
+						type="button"
+						variant="solid"
+						tone="brand"
+						disabled={ ! selectedSite || isConnecting }
+						loading={ isConnecting }
+						loadingAnnouncement={ __( 'Connecting site' ) }
+						onClick={ () => void handleConnect() }
+						data-testid="connect-site-submit"
+					>
+						{ __( 'Add site' ) }
+					</Button>
+				) }
+			</OnboardingFooter>
+		</div>
+	);
+}
+
+export const onboardingConnectRoute = createRoute( {
+	getParentRoute: () => onboardingLayoutRoute,
+	path: '/onboarding/connect',
+	component: OnboardingConnectPage,
+} );
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css b/apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css
new file mode 100644
index 0000000000..eee7532687
--- /dev/null
+++ b/apps/ui/src/ui-classic/router/route-onboarding-connect/style.module.css
@@ -0,0 +1,399 @@
+.signedOut {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	max-width: 420px;
+	margin-inline: auto;
+	text-align: left;
+}
+
+.benefits {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.benefit {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+}
+
+.benefitIcon {
+	flex-shrink: 0;
+	fill: var(--wpds-color-fg-interactive-brand, #3858e9);
+}
+
+.authActions {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.signupHint {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+}
+
+.signupLink {
+	padding: 0;
+	height: auto;
+	min-height: 0;
+}
+
+.offlineHint {
+	margin: 0;
+	font-size: 0.8125rem;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+}
+
+.listHint {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+}
+
+/* Initial-load state: spinner over the hint, centered where the grid will
+   appear. */
+.loadingState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	padding: 32px 0;
+}
+
+/* Search + helper links, centered under the subtitle like the desktop
+   renderer's picker header. */
+.searchHeader {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	max-width: 480px;
+	margin: 0 auto 24px;
+}
+
+.search {
+	width: 100%;
+	/* The wpds input fill token is transparent (#0000); with the dot grid
+	   correctly painting behind the page, it shows through the field
+	   without a solid fill. */
+	background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc);
+}
+
+.helperLinks {
+	margin: 0;
+	font-size: 0.75rem;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.helperLink {
+	padding: 0;
+	height: auto;
+	min-height: 0;
+	font-size: 0.75rem;
+}
+
+.sections {
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+	text-align: left;
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.sectionHeader {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	gap: 2px;
+}
+
+.sectionTitle {
+	font-size: 1rem;
+	font-weight: 500;
+	margin: 0;
+}
+
+.sectionDescription {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+}
+
+/* Mirrors the desktop renderer's pull-remote picker: a responsive grid of
+   site cards with live screenshot thumbnails. */
+.siteGrid {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	/* auto-fit (not auto-fill) collapses unused tracks, so a handful of
+	   sites gets larger cards instead of empty columns. */
+	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+	gap: 20px;
+}
+
+/* Larger windows raise the column minimum so thumbnails grow with the
+   viewport instead of just adding more columns. */
+@media (min-width: 1280px) {
+	.siteGrid {
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	}
+}
+
+/* Secondary sections (Already connected, upgrade/transfer, …): auto-fill
+   keeps the empty tracks, so a couple of sites render at the compact card
+   size instead of ballooning to fill the row — the count-aware sizing only
+   applies to the lead section. */
+.siteGridSecondary {
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
+
+@media (min-width: 1280px) {
+	.siteGridSecondary {
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	}
+}
+
+/* Single-site account: one comfortable card, centered. */
+.siteGridSingle {
+	grid-template-columns: minmax(0, 420px);
+	justify-content: center;
+}
+
+.singleSite {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+}
+
+.emptyState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+}
+
+.siteCardWrapper {
+	position: relative;
+}
+
+.siteCard {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: 6px;
+	border: none;
+	border-radius: 12px;
+	background: transparent;
+	cursor: pointer;
+	text-align: left;
+	color: inherit;
+	transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* Brand ring on hover, matching the card affordance on the home and
+   gallery screens. */
+.siteCard:hover {
+	background: var(--wpds-color-bg-surface-neutral-strong, #f7f7f7);
+	box-shadow: 0 0 0 2px var(--wpds-color-stroke-interactive-brand, #3858e9);
+}
+
+/* Keyboard focus gets the hover surface plus an offset ring — the selected
+   state's own ring sits flush, so the two remain distinguishable. */
+.siteCard:focus-visible {
+	outline: 2px solid var(--wpds-color-stroke-interactive-brand, #3858e9);
+	outline-offset: 2px;
+	background: var(--wpds-color-bg-surface-neutral-strong, #f7f7f7);
+}
+
+/* Visible but not selectable (already connected, needs upgrade/transfer). */
+.siteCardInert,
+.siteCardInert:hover {
+	cursor: default;
+	background: transparent;
+	box-shadow: none;
+}
+
+/* Sites that can't sync at all (deleted, unsupported, missing permissions). */
+.siteCardDimmed,
+.siteCardDimmed:hover {
+	opacity: 0.55;
+}
+
+.siteCardSelected,
+.siteCardSelected:hover {
+	box-shadow: 0 0 0 2px var(--wpds-color-stroke-interactive-brand, #3858e9);
+	background: color-mix(in srgb, var(--wpds-color-fg-interactive-brand, #3858e9) 5%, transparent);
+}
+
+.siteThumb {
+	/* border-box so the 1px border doesn't push the thumb 2px past its
+	   container — which also kept the CTA scrim from covering its right
+	   and bottom edges. */
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	border-radius: 8px;
+	overflow: hidden;
+	border: 1px solid var(--wpds-color-stroke-surface-neutral, #ddd);
+	background: var(--wpds-color-bg-surface-neutral, #f0f0f0);
+}
+
+.siteThumb img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.siteBadges {
+	position: absolute;
+	bottom: 6px;
+	right: 6px;
+	display: flex;
+	gap: 4px;
+}
+
+.siteBadge {
+	font-size: 11px;
+	line-height: 1;
+	padding: 4px 6px;
+	border-radius: 4px;
+	background: rgba(0, 0, 0, 0.4);
+	color: #fff;
+	backdrop-filter: blur(4px);
+}
+
+/* Environment chips use the same fixed palette as the desktop renderer's
+   EnvironmentBadge — identical in both color schemes by design. */
+.envBadge {
+	font-size: 11px;
+	line-height: 1;
+	padding: 4px 6px;
+	border-radius: 4px;
+	font-weight: 500;
+}
+
+.envBadge-production {
+	background: #ceead6;
+	color: #1a6928;
+}
+
+.envBadge-staging {
+	background: #fef0c7;
+	color: #93590c;
+}
+
+.envBadge-development {
+	background: #d9e2ff;
+	color: #1f3a93;
+}
+
+/* Centered CTA over a non-syncable site's thumbnail. Sits outside the inert
+   card button (siblings, not nested) so the markup stays valid; aligned to
+   the thumbnail box, which is inset by the card's 6px padding. */
+.thumbCtaOverlay {
+	position: absolute;
+	top: 6px;
+	left: 6px;
+	right: 6px;
+	aspect-ratio: 3 / 2;
+	border-radius: 8px;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	/* Scrim keeps the CTA legible over both light and busy thumbnails —
+	   dark only, no blur, so the site underneath stays recognizable. */
+	background: rgba(0, 0, 0, 0.4);
+}
+
+.ctaButton {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 6px 12px;
+	border: none;
+	border-radius: 4px;
+	background: #fff;
+	color: #1e1e1e;
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1;
+	white-space: nowrap;
+	cursor: pointer;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.ctaButton:hover {
+	background: #f0f0f0;
+}
+
+.ctaButton:focus-visible {
+	outline: 2px solid var(--wpds-color-stroke-interactive-brand, #3858e9);
+	outline-offset: 2px;
+}
+
+.planBadge {
+	font-size: 11px;
+	line-height: 1;
+	padding: 4px 8px;
+	border-radius: 4px;
+	background: rgba(0, 0, 0, 0.5);
+	color: #fff;
+	backdrop-filter: blur(4px);
+}
+
+.siteText {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding: 8px 6px 4px;
+	min-width: 0;
+}
+
+.siteName {
+	font-size: 0.875rem;
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.siteUrl {
+	font-size: 0.75rem;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.siteStatus {
+	font-size: 11px;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+}
+
+.submitError {
+	margin-top: 16px;
+	color: var(--wpds-color-fg-content-error, var(--wpds-color-fg-content-neutral));
+}
diff --git a/apps/ui/src/ui-classic/router/route-onboarding-home/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-home/index.tsx
index be5ebbe680..dc9a1c6abd 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-home/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-home/index.tsx
@@ -31,6 +31,12 @@ function OnboardingHomePage() {
 						{ __( 'Import from a Jetpack backup or another full-site export' ) }
 					</p>
 				</Link>
+				<Link to="/onboarding/connect" className={ styles.card }>
+					<h3 className={ styles.cardTitle }>{ __( 'Connect a site' ) }</h3>
+					<p className={ styles.cardBody }>
+						{ __( 'Edit a WordPress.com or Pressable site locally, then push changes back' ) }
+					</p>
+				</Link>
 			</div>
 		</div>
 	);
diff --git a/apps/ui/src/ui-classic/router/router.tsx b/apps/ui/src/ui-classic/router/router.tsx
index b88e3f9d79..0b075317a5 100644
--- a/apps/ui/src/ui-classic/router/router.tsx
+++ b/apps/ui/src/ui-classic/router/router.tsx
@@ -6,6 +6,7 @@ import { rootRoute } from './layout-root';
 import { indexRoute } from './route-index';
 import { newSessionRoute } from './route-new-session';
 import { onboardingBlueprintRoute } from './route-onboarding-blueprint';
+import { onboardingConnectRoute } from './route-onboarding-connect';
 import { onboardingCreateRoute } from './route-onboarding-create';
 import { onboardingHomeRoute } from './route-onboarding-home';
 import { onboardingImportRoute } from './route-onboarding-import';
@@ -26,6 +27,7 @@ const routeTree = rootRoute.addChildren( [
 		onboardingHomeRoute,
 		onboardingCreateRoute,
 		onboardingBlueprintRoute,
+		onboardingConnectRoute,
 		onboardingImportRoute,
 	] ),
 ] );
diff --git a/package-lock.json b/package-lock.json
index f0934ff7c7..682cdf593e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1087,6 +1087,7 @@
 				"@tanstack/react-query": "^5.75.5",
 				"@tanstack/react-query-persist-client": "^5.96.2",
 				"@tanstack/react-router": "^1.120.14",
+				"@wordpress/a11y": "^4.47.0",
 				"@wordpress/api-fetch": "^7.47.0",
 				"@wordpress/components": "^34.0.0",
 				"@wordpress/core-data": "^7.47.0",
diff --git a/tools/common/lib/sync/environment-utils.ts b/tools/common/lib/sync/environment-utils.ts
new file mode 100644
index 0000000000..be4dc8f41f
--- /dev/null
+++ b/tools/common/lib/sync/environment-utils.ts
@@ -0,0 +1,23 @@
+import { __ } from '@wordpress/i18n';
+import { z } from 'zod';
+import type { SyncSite } from '@studio/common/types/sync';
+
+const EnvironmentSchema = z.enum( [ 'production', 'staging', 'development' ] );
+export type EnvironmentType = z.infer< typeof EnvironmentSchema >;
+
+export const getSiteEnvironment = ( site: SyncSite ): EnvironmentType => {
+	if ( site.isPressable ) {
+		const parsed = EnvironmentSchema.safeParse( site.environmentType );
+		return parsed.success ? parsed.data : 'production';
+	}
+	return site.isStaging ? 'staging' : 'production';
+};
+
+export const getEnvironmentLabel = ( type: EnvironmentType ): string => {
+	const labels: Record< EnvironmentType, string > = {
+		production: __( 'Production' ),
+		staging: __( 'Staging' ),
+		development: __( 'Development' ),
+	};
+	return labels[ type ] || type.charAt( 0 ).toUpperCase() + type.slice( 1 );
+};
diff --git a/tools/common/lib/sync/mshots.ts b/tools/common/lib/sync/mshots.ts
new file mode 100644
index 0000000000..89702d1d9a
--- /dev/null
+++ b/tools/common/lib/sync/mshots.ts
@@ -0,0 +1,4 @@
+// WordPress.com screenshot service used for remote-site thumbnails.
+export function getMshotUrl( siteUrl: string ): string {
+	return `https://s0.wp.com/mshots/v1/${ encodeURIComponent( siteUrl ) }?w=600&h=400`;
+}
diff --git a/tools/common/lib/sync/sync-api.ts b/tools/common/lib/sync/sync-api.ts
index a81b5a17fd..0235eb62c8 100644
--- a/tools/common/lib/sync/sync-api.ts
+++ b/tools/common/lib/sync/sync-api.ts
@@ -30,24 +30,114 @@ const SITE_FIELDS = [
 	'environment_type',
 ].join( ',' );
 
-export async function fetchSyncableSites( token: string ): Promise< SyncSite[] > {
+interface FetchSyncableSitesOptions {
+	connectedSiteIds?: number[];
+	page?: number;
+	perPage?: number;
+	search?: string;
+}
+
+export interface SyncableSitesPage {
+	sites: SyncSite[];
+	total: number;
+	page: number;
+	perPage: number;
+	hasMore: boolean;
+	nextPage: number | null;
+}
+
+async function fetchRawSitesPage(
+	token: string,
+	options: Required< Pick< FetchSyncableSitesOptions, 'page' | 'perPage' > > &
+		Pick< FetchSyncableSitesOptions, 'search' >
+) {
 	const wpcom = wpcomFactory( token, wpcomXhrRequest );
+	const queryParams: Record< string, string | number | boolean > = {
+		fields: SITE_FIELDS,
+		filter: 'atomic,wpcom',
+		options: 'created_at,wpcom_staging_blog_ids,software_version',
+		site_activity: 'active',
+		include_a8c_owned: false,
+		page: options.page,
+		per_page: options.perPage,
+	};
+
+	const search = options.search?.trim();
+	if ( search ) {
+		queryParams.search = search;
+	}
 
 	const rawResponse = await wpcom.req.get(
 		{
-			apiNamespace: 'rest/v1.2',
+			apiNamespace: 'rest/v1.3',
 			path: '/me/sites',
 		},
-		{
-			fields: SITE_FIELDS,
-			filter: 'atomic,wpcom',
-			options: 'created_at,wpcom_staging_blog_ids',
-			site_activity: 'active',
-		}
+		queryParams
 	);
 
-	const parsed = sitesEndpointResponseSchema.parse( rawResponse );
-	return transformSitesResponse( parsed.sites );
+	return sitesEndpointResponseSchema.parse( rawResponse );
+}
+
+export async function fetchSyncableSitesPage(
+	token: string,
+	options: FetchSyncableSitesOptions = {}
+): Promise< SyncableSitesPage > {
+	const page = options.page ?? 1;
+	const perPage = options.perPage ?? 20;
+	const parsed = await fetchRawSitesPage( token, {
+		page,
+		perPage,
+		search: options.search,
+	} );
+	const responsePage = parsed.page ?? page;
+	const responsePerPage = parsed.per_page ?? perPage;
+	const sites = transformSitesResponse( parsed.sites, {
+		connectedSiteIds: options.connectedSiteIds,
+	} );
+	const total = parsed.total ?? ( responsePage - 1 ) * responsePerPage + sites.length;
+	const hasMore =
+		parsed.total !== undefined
+			? responsePage * responsePerPage < parsed.total
+			: parsed.sites.length >= responsePerPage;
+
+	return {
+		sites,
+		total,
+		page: responsePage,
+		perPage: responsePerPage,
+		hasMore,
+		nextPage: hasMore ? responsePage + 1 : null,
+	};
+}
+
+export async function fetchSyncableSites(
+	token: string,
+	options?: Pick< FetchSyncableSitesOptions, 'connectedSiteIds' | 'search' >
+): Promise< SyncSite[] > {
+	// Mirrors the desktop renderer's site-picker query (wpcomSitesApi), but
+	// drains every page so callers get the full account in one call — the
+	// unpaginated v1.2 endpoint silently returned only a subset of sites.
+	const PER_PAGE = 100;
+	const MAX_PAGES = 20;
+	const allSites: unknown[] = [];
+
+	for ( let page = 1; page <= MAX_PAGES; page++ ) {
+		const parsed = await fetchRawSitesPage( token, {
+			page,
+			perPage: PER_PAGE,
+			search: options?.search,
+		} );
+		allSites.push( ...parsed.sites );
+		// The endpoint may clamp the requested page size, so judge "last page"
+		// by the server-reported per_page when it's present.
+		if ( parsed.sites.length < ( parsed.per_page ?? PER_PAGE ) ) {
+			break;
+		}
+	}
+
+	return transformSitesResponse( allSites, {
+		connectedSiteIds: options?.connectedSiteIds,
+	} );
 }
 
 export async function initiateBackup(
diff --git a/tools/common/lib/sync/transform-sites.ts b/tools/common/lib/sync/transform-sites.ts
index 3e69d677ab..b0b157b7fe 100644
--- a/tools/common/lib/sync/transform-sites.ts
+++ b/tools/common/lib/sync/transform-sites.ts
@@ -63,7 +63,10 @@ export function transformSitesResponse(
 				( connectedSiteIds.length > 0 && connectedSiteIds.some( ( id ) => id === site.ID ) )
 		)
 		.map( ( site ) => {
-			const isStaging = allStagingSiteIds.includes( site.ID );
+			const isStaging =
+				site.environment_type === 'staging' ||
+				site.environment_type === 'development' ||
+				allStagingSiteIds.includes( site.ID );
 			const syncSupport = getSyncSupport( site, connectedSiteIds );
 
 			return transformSingleSiteResponse( site, syncSupport, isStaging );