diff --git a/apps/ui/src/components/blueprint-selector/index.tsx b/apps/ui/src/components/blueprint-selector/index.tsx
index c6d6f3a93f..b231fb9ff0 100644
--- a/apps/ui/src/components/blueprint-selector/index.tsx
+++ b/apps/ui/src/components/blueprint-selector/index.tsx
@@ -1,11 +1,17 @@
+import { EMPTY_SITE_PLAYGROUND_URL } from '@studio/common/constants';
+import {
+	curateBlueprintsForDisplay,
+	FEATURED_BLUEPRINT_SLUGS,
+} from '@studio/common/lib/blueprint-curation';
 import { generateDefaultBlueprintDescription } from '@studio/common/lib/blueprint-settings';
 import { validateBlueprintData } from '@studio/common/lib/blueprint-validation';
+import { Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { external } from '@wordpress/icons';
-import { Button, Icon } from '@wordpress/ui';
-import { useCallback, useState } from 'react';
-import { FileDropzone } from '@/components/file-dropzone';
+import { seen } from '@wordpress/icons';
+import { Button, Icon, Tooltip } from '@wordpress/ui';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useConnector } from '@/data/core';
+import { useGridArrowNavigation } from '@/hooks/use-grid-arrow-navigation';
 import styles from './style.module.css';
 import type { FeaturedBlueprint } from '@/data/core';
 import type { BlueprintV1Declaration } from '@wp-playground/blueprints';
@@ -23,21 +29,159 @@ export interface PickedBlueprint {
 }
 
 interface BlueprintSelectorProps {
-	featured: FeaturedBlueprint[] | undefined;
-	isFeaturedLoading: boolean;
+	blueprints: FeaturedBlueprint[] | undefined;
+	isLoading: boolean;
 	onPick: ( blueprint: PickedBlueprint ) => void;
+	// Picking the "Empty site" card — callers route this to the plain
+	// create-site flow rather than running an empty blueprint.
+	onPickEmpty: () => void;
 }
 
 const FILE_ACCEPT = 'application/json,.json,application/zip,.zip';
 
+/**
+ * Preview (eye) button overlaid on a card's image. Rendered as a sibling of
+ * the card's pick button (inside `cardMediaOverlay`) rather than nested in
+ * it, so the markup stays valid — nested interactive elements aren't.
+ */
+function PreviewOverlay( { url, title }: { url: string; title: string } ) {
+	const connector = useConnector();
+	const label = __( 'Preview in your browser' );
+	return (
+		<div className={ styles.cardMediaOverlay }>
+			<Tooltip.Provider delay={ 200 }>
+				<Tooltip.Root>
+					<Tooltip.Trigger
+						render={
+							<button
+								type="button"
+								className={ styles.previewButton }
+								onClick={ () => void connector.openExternalUrl( url ) }
+								aria-label={ sprintf(
+									// translators: %s is the blueprint title.
+									__( 'Preview %s in Playground' ),
+									title
+								) }
+							>
+								<Icon icon={ seen } size={ 16 } />
+							</button>
+						}
+					/>
+					<Tooltip.Popup positioner={ <Tooltip.Positioner side="bottom" /> }>
+						{ label }
+					</Tooltip.Popup>
+				</Tooltip.Root>
+			</Tooltip.Provider>
+		</div>
+	);
+}
+
+function EmptySiteCard( { onPick }: { onPick: () => void } ) {
+	return (
+		<li className={ styles.cardWrapper }>
+			<button type="button" className={ styles.card } onClick={ onPick } data-arrow-nav-item>
+				<span className={ styles.emptyMedia }>
+					<span className={ styles.emptyMediaGrid } />
+					{ /* Centered document glyph */ }
+					<svg
+						width="44"
+						height="56"
+						viewBox="0 0 44 56"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						aria-hidden="true"
+						data-keep-size
+					>
+						<path
+							d="M 4 4 L 28 4 L 40 16 L 40 52 L 4 52 Z"
+							stroke="currentColor"
+							strokeWidth="1.5"
+							strokeLinejoin="round"
+							fill="none"
+						/>
+						<path
+							d="M 28 4 L 28 16 L 40 16"
+							stroke="currentColor"
+							strokeWidth="1.5"
+							strokeLinejoin="round"
+							fill="none"
+						/>
+					</svg>
+				</span>
+				<span className={ styles.cardBody }>
+					<h3 className={ styles.cardTitle }>{ __( 'Empty site' ) }</h3>
+					<p className={ styles.cardExcerpt }>
+						{ __( 'A clean WordPress install. Build whatever you want from scratch.' ) }
+					</p>
+				</span>
+			</button>
+			<PreviewOverlay url={ EMPTY_SITE_PLAYGROUND_URL } title={ __( 'Empty site' ) } />
+		</li>
+	);
+}
+
+function BlueprintCard( {
+	blueprint,
+	onPick,
+}: {
+	blueprint: FeaturedBlueprint;
+	onPick: ( blueprint: FeaturedBlueprint ) => void;
+} ) {
+	return (
+		<li className={ styles.cardWrapper }>
+			<button
+				type="button"
+				className={ styles.card }
+				onClick={ () => onPick( blueprint ) }
+				data-arrow-nav-item
+			>
+				{ blueprint.image ? (
+					<img className={ styles.cardImage } src={ blueprint.image } alt="" loading="lazy" />
+				) : (
+					<span className={ styles.cardImageFallback }>{ blueprint.title }</span>
+				) }
+				<span className={ styles.cardBody }>
+					<h3 className={ styles.cardTitle }>{ blueprint.title }</h3>
+					<p className={ styles.cardExcerpt } title={ blueprint.excerpt }>
+						{ blueprint.excerpt }
+					</p>
+				</span>
+			</button>
+			{ blueprint.playgroundUrl && (
+				<PreviewOverlay url={ blueprint.playgroundUrl } title={ blueprint.title } />
+			) }
+		</li>
+	);
+}
+
 export function BlueprintSelector( {
-	featured,
-	isFeaturedLoading,
+	blueprints,
+	isLoading,
 	onPick,
+	onPickEmpty,
 }: BlueprintSelectorProps ) {
 	const connector = useConnector();
+	const uploadInputRef = useRef< HTMLInputElement | null >( null );
+	const handleGridKeyDown = useGridArrowNavigation();
 	const [ uploadError, setUploadError ] = useState< string | null >( null );
 
+	// The endpoint returns blueprints oldest-first; newest-first reads better
+	// in the Explore grid (matches the desktop renderer).
+	const allBlueprints = useMemo( () => ( blueprints ?? [] ).slice().reverse(), [ blueprints ] );
+
+	const featuredBlueprints = useMemo(
+		() =>
+			curateBlueprintsForDisplay(
+				allBlueprints.filter( ( blueprint ) => FEATURED_BLUEPRINT_SLUGS.has( blueprint.slug ) ),
+				__
+			),
+		[ allBlueprints ]
+	);
+	const exploreBlueprints = useMemo(
+		() => allBlueprints.filter( ( blueprint ) => ! FEATURED_BLUEPRINT_SLUGS.has( blueprint.slug ) ),
+		[ allBlueprints ]
+	);
+
 	const handleFeaturedClick = useCallback(
 		( item: FeaturedBlueprint ) => {
 			setUploadError( null );
@@ -51,18 +195,6 @@ export function BlueprintSelector( {
 		[ onPick ]
 	);
 
-	const handlePreviewClick = useCallback(
-		( event: React.MouseEvent< HTMLButtonElement >, item: FeaturedBlueprint ) => {
-			// Stop the click from bubbling to the card's pick handler — the
-			// user explicitly asked to preview, not to select.
-			event.stopPropagation();
-			if ( item.playgroundUrl ) {
-				void connector.openExternalUrl( item.playgroundUrl );
-			}
-		},
-		[ connector ]
-	);
-
 	/**
 	 * Validates parsed blueprint JSON and hands a `PickedBlueprint` to the
 	 * parent. Returns `true` on success so callers can tell whether to clean
@@ -170,64 +302,94 @@ export function BlueprintSelector( {
 		[ acceptParsedBlueprint, connector ]
 	);
 
+	// Callers advertise "drop in your own", so the whole selector accepts
+	// blueprint drops; any validation error renders next to the Upload
+	// button above the explore grid.
+	const handleRootDrop = useCallback(
+		( event: React.DragEvent< HTMLDivElement > ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			event.preventDefault();
+			const file = event.dataTransfer.files[ 0 ];
+			if ( ! file ) {
+				return;
+			}
+			void handleFile( file );
+		},
+		[ handleFile ]
+	);
+
 	return (
-		<div className={ styles.root }>
+		<div
+			className={ styles.root }
+			onDragOver={ ( event ) => event.preventDefault() }
+			onDrop={ handleRootDrop }
+		>
 			<section className={ styles.section }>
-				<h2 className={ styles.sectionTitle }>{ __( 'Upload your own' ) }</h2>
-				<FileDropzone
-					accept={ FILE_ACCEPT }
-					prompt={ __( 'Drop a Blueprint JSON or ZIP bundle here, or' ) }
-					onFile={ ( file ) => void handleFile( file ) }
-					error={ uploadError }
-				/>
+				<ul
+					className={ `${ styles.grid } ${ styles.gridFeatured }` }
+					onKeyDown={ handleGridKeyDown }
+				>
+					<EmptySiteCard onPick={ onPickEmpty } />
+					{ isLoading && (
+						<li className={ styles.gridStatus }>
+							<Spinner />
+						</li>
+					) }
+					{ ! isLoading && allBlueprints.length === 0 && (
+						<li className={ styles.gridStatus }>{ __( 'Could not load templates.' ) }</li>
+					) }
+					{ featuredBlueprints.map( ( item ) => (
+						<BlueprintCard key={ item.slug } blueprint={ item } onPick={ handleFeaturedClick } />
+					) ) }
+				</ul>
 			</section>
 
-			<section className={ styles.section }>
-				<h2 className={ styles.sectionTitle }>{ __( 'Featured blueprints' ) }</h2>
-				{ isFeaturedLoading && (
-					<p className={ styles.featuredHint }>{ __( 'Loading featured blueprints…' ) }</p>
-				) }
-				{ ! isFeaturedLoading && ( ! featured || featured.length === 0 ) && (
-					<p className={ styles.featuredHint }>
-						{ __( 'No featured blueprints available right now.' ) }
+			<section className={ `${ styles.section } ${ styles.exploreSection }` }>
+				<header className={ styles.exploreHeader }>
+					<h2 className={ styles.sectionTitle }>{ __( 'More blueprints' ) }</h2>
+					<p className={ styles.exploreSubtitle }>
+						{ __( 'Get started quickly with a one of our blueprints, or' ) }{ ' ' }
+						<Button
+							type="button"
+							variant="minimal"
+							tone="brand"
+							className={ styles.uploadLink }
+							onClick={ () => uploadInputRef.current?.click() }
+						>
+							{ __( 'upload a blueprint' ) }
+						</Button>
+						{ '.' }
+					</p>
+				</header>
+				{ uploadError && (
+					<p role="alert" className={ styles.uploadError }>
+						{ uploadError }
 					</p>
 				) }
-				{ featured && featured.length > 0 && (
-					<ul className={ styles.grid }>
-						{ featured.map( ( item ) => (
-							<li key={ item.slug } className={ styles.cardWrapper }>
-								<button
-									type="button"
-									className={ styles.card }
-									onClick={ () => handleFeaturedClick( item ) }
-								>
-									{ item.image && (
-										<img className={ styles.cardImage } src={ item.image } alt="" loading="lazy" />
-									) }
-									<div className={ styles.cardBody }>
-										<h3 className={ styles.cardTitle }>{ item.title }</h3>
-										<p className={ styles.cardExcerpt }>{ item.excerpt }</p>
-									</div>
-								</button>
-								{ item.playgroundUrl && (
-									<Button
-										type="button"
-										variant="minimal"
-										tone="neutral"
-										size="small"
-										className={ styles.previewButton }
-										onClick={ ( event ) => handlePreviewClick( event, item ) }
-										aria-label={ sprintf(
-											// translators: %s is the blueprint title.
-											__( 'Preview %s in Playground' ),
-											item.title
-										) }
-									>
-										<Icon icon={ external } />
-										<span>{ __( 'Preview' ) }</span>
-									</Button>
-								) }
-							</li>
+				<input
+					ref={ uploadInputRef }
+					type="file"
+					accept={ FILE_ACCEPT }
+					className={ styles.hiddenInput }
+					onChange={ ( event ) => {
+						const file = event.target.files?.[ 0 ];
+						if ( file ) {
+							void handleFile( file );
+						}
+						// Reset so re-picking the same file after an error re-fires
+						// `change`.
+						event.target.value = '';
+					} }
+				/>
+				{ exploreBlueprints.length > 0 && (
+					<ul
+						className={ `${ styles.grid } ${ styles.gridCompact }` }
+						onKeyDown={ handleGridKeyDown }
+					>
+						{ exploreBlueprints.map( ( item ) => (
+							<BlueprintCard key={ item.slug } blueprint={ item } onPick={ handleFeaturedClick } />
 						) ) }
 					</ul>
 				) }
diff --git a/apps/ui/src/components/blueprint-selector/style.module.css b/apps/ui/src/components/blueprint-selector/style.module.css
index 6ee1545b9d..a95aba945b 100644
--- a/apps/ui/src/components/blueprint-selector/style.module.css
+++ b/apps/ui/src/components/blueprint-selector/style.module.css
@@ -16,12 +16,6 @@
 	margin: 0;
 }
 
-.featuredHint {
-	margin: 0;
-	color: var(--wpds-color-fg-content-neutral-weak, #666);
-	font-size: 0.875rem;
-}
-
 .grid {
 	list-style: none;
 	margin: 0;
@@ -39,6 +33,98 @@
 	}
 }
 
+/* The featured row (Empty site + the curated trio) fits four across on the
+   wide layout and folds to a 2x2 grid when the window narrows. */
+.gridFeatured {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (max-width: 880px) {
+	.gridFeatured {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+/* Extra room between the featured row and the explore section so the
+   curated cards stand apart from the long tail. */
+.exploreSection {
+	margin-top: 40px;
+}
+
+/* Centered intro for the blueprints long tail: heading, one-line blurb,
+   then the search + upload controls. */
+.exploreHeader {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	margin-bottom: 24px;
+}
+
+.exploreSubtitle {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+	font-size: 0.875rem;
+}
+
+/* Inline "upload a blueprint" link inside the subtitle — strip the button
+   box so it flows with the sentence. */
+.uploadLink {
+	padding: 0;
+	height: auto;
+	min-height: 0;
+	font-size: inherit;
+}
+
+/* Matches the FileDropzone error pill the upload section used to render. */
+.uploadError {
+	padding: 8px 12px;
+	border-radius: 4px;
+	background: #fce8e8;
+	color: #7a1a1a;
+	font-size: 13px;
+	margin: 0;
+}
+
+.hiddenInput {
+	display: none;
+}
+
+/* Denser columns + tighter type than the featured row, so the open-by-
+   default explore grid reads as secondary to the curated cards. */
+.gridCompact {
+	grid-template-columns: repeat(5, minmax(0, 1fr));
+	gap: 12px;
+}
+
+@media (max-width: 880px) {
+	.gridCompact {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
+.gridCompact .cardBody {
+	padding: 10px 12px 12px;
+	gap: 4px;
+}
+
+.gridCompact .cardTitle {
+	font-size: 0.8125rem;
+}
+
+.gridCompact .cardExcerpt {
+	font-size: 0.75rem;
+	-webkit-line-clamp: 2;
+}
+
+.gridStatus {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+	font-size: 0.875rem;
+}
+
 .cardWrapper {
 	position: relative;
 }
@@ -47,6 +133,7 @@
 	display: flex;
 	flex-direction: column;
 	width: 100%;
+	height: 100%;
 	padding: 0;
 	border: 1px solid var(--wpds-color-stroke-surface-neutral, #ddd);
 	border-radius: 8px;
@@ -55,20 +142,71 @@
 	overflow: hidden;
 	text-align: left;
 	color: inherit;
+	transition: border-color 0.15s ease;
 }
 
 .card:hover {
-	border-color: var(--wpds-color-stroke-interactive-neutral, #bbb);
+	border-color: var(--wpds-color-stroke-interactive-brand, #3858e9);
+}
+
+/* Keyboard focus mirrors the hover affordance, plus an offset ring. */
+.card:focus-visible {
+	outline: 2px solid var(--wpds-color-stroke-interactive-brand, #3858e9);
+	outline-offset: 2px;
+	border-color: var(--wpds-color-stroke-interactive-brand, #3858e9);
+}
+
+/* Anchors the Live Preview pill to the card's media area. Sits outside the
+   pick button (siblings, not nested) so the markup stays valid; the wrapper
+   itself ignores pointer events so card clicks pass through. */
+.cardMediaOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	aspect-ratio: 16 / 9;
+	pointer-events: none;
 }
 
 .previewButton {
 	position: absolute;
-	top: 8px;
+	bottom: 8px;
 	right: 8px;
+	pointer-events: auto;
+	display: inline-flex;
+	align-items: center;
 	gap: 4px;
+	padding: 4px 8px;
+	border: 1px solid rgba(255, 255, 255, 0.9);
+	border-radius: 4px;
 	background: rgba(255, 255, 255, 0.92);
+	color: #1e1e1e;
+	font-size: 11px;
+	line-height: 1;
+	white-space: nowrap;
+	cursor: pointer;
 	backdrop-filter: blur(6px);
-	border-radius: 4px;
+	/* Hairline dark ring outside the light border so the pill separates
+	   from both light and dark imagery — a contrast edge, not elevation. */
+	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
+	/* Revealed on card hover (the button sits inside the hovered wrapper,
+	   so pointing at its corner shows it too) or on keyboard focus. */
+	opacity: 0;
+	transition: opacity 0.15s ease;
+}
+
+.cardWrapper:hover .previewButton,
+.previewButton:focus-visible {
+	opacity: 1;
+}
+
+.previewButton:focus-visible {
+	outline: 2px solid var(--wpds-color-stroke-interactive-brand, #3858e9);
+	outline-offset: 2px;
+}
+
+.previewButton:hover {
+	background: #fff;
 }
 
 .cardImage {
@@ -78,6 +216,40 @@
 	background: #f0f0f0;
 }
 
+.cardImageFallback {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background: var(--wpds-color-bg-surface-neutral, #f0f0f0);
+	color: var(--wpds-color-fg-content-neutral-weak, #666);
+	font-size: 0.8125rem;
+}
+
+/* Thumbnail for the Empty Site card — a fixed dark slate with a faint grid
+   and a document glyph, identical in both color schemes by design. */
+.emptyMedia {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background: #1f1f1f;
+	color: #fff;
+	overflow: hidden;
+}
+
+.emptyMediaGrid {
+	position: absolute;
+	inset: 0;
+	background-image:
+		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
+		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+	background-size: 32px 32px;
+}
+
 .cardBody {
 	display: flex;
 	flex-direction: column;
@@ -88,6 +260,9 @@
 .cardTitle {
 	font-size: 0.95rem;
 	font-weight: 600;
+	/* The global h3 rule pins line-height to the fixed 28px lg token, which
+	   reads double-spaced at this reduced font size once a title wraps. */
+	line-height: 1.3;
 	margin: 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/create-site-form/index.tsx b/apps/ui/src/components/create-site-form/index.tsx
index 5335afadd7..be86874257 100644
--- a/apps/ui/src/components/create-site-form/index.tsx
+++ b/apps/ui/src/components/create-site-form/index.tsx
@@ -5,10 +5,12 @@ import { RecommendedPHPVersion } from '@studio/common/types/php-versions';
 import { BaseControl, CheckboxControl } from '@wordpress/components';
 import { DataForm, useFormValidity } from '@wordpress/dataviews';
 import { __, sprintf } from '@wordpress/i18n';
-import { chevronDown, chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronDown, chevronRight } from '@wordpress/icons';
 import { Button, Icon } from '@wordpress/ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { BusyOverlay } from '@/components/busy-overlay';
 import { LearnHowLink, LearnMoreLink } from '@/components/learn-more';
+import { OnboardingFooter } from '@/components/onboarding-footer';
 import {
 	adminEmailField,
 	adminPasswordField,
@@ -21,6 +23,7 @@ import {
 } from '@/components/site-fields';
 import { usePathValidator } from '@/data/queries/use-create-site-helpers';
 import { useSites } from '@/data/queries/use-sites';
+import { useWordPressVersions } from '@/data/queries/use-wordpress-versions';
 import styles from './style.module.css';
 import type { SupportedPHPVersion } from '@studio/common/types/php-versions';
 import type {
@@ -302,6 +305,36 @@ export function CreateSiteForm( {
 		} );
 	}, [ initialValues ] );
 
+	const { data: wpVersions } = useWordPressVersions();
+
+	// Land keyboard focus in the Site name field on mount — it's the first
+	// thing every flow asks for. The onboarding layout's heading-focus
+	// fallback yields when a page claims focus itself.
+	const formRef = useRef< HTMLFormElement >( null );
+	useEffect( () => {
+		const input = formRef.current?.querySelector< HTMLInputElement >(
+			'input[type="text"], input:not([type])'
+		);
+		input?.focus();
+	}, [] );
+
+	// Drop a wpVersion that isn't in the installable-versions list (e.g. a
+	// blueprint preferring a release below the minimum supported version) —
+	// mirrors the desktop renderer, which silently ignores unsupported
+	// preferred versions. Keyed on the current value as well as the list:
+	// initial values seed asynchronously, so with a warm versions cache the
+	// list alone would never change again and a late seed would slip through.
+	useEffect( () => {
+		if ( ! wpVersions?.length ) {
+			return;
+		}
+		setData( ( prev ) =>
+			wpVersions.some( ( version ) => version.value === prev.wpVersion )
+				? prev
+				: { ...prev, wpVersion: DEFAULT_WORDPRESS_VERSION }
+		);
+	}, [ wpVersions, data.wpVersion ] );
+
 	const fields = useMemo< Field< FormData >[] >(
 		() => [
 			siteNameField< FormData >(),
@@ -321,7 +354,7 @@ export function CreateSiteForm( {
 				},
 			},
 			phpVersionField< FormData >(),
-			wpVersionField< FormData >( DEFAULT_WORDPRESS_VERSION ),
+			wpVersionField< FormData >( DEFAULT_WORDPRESS_VERSION, wpVersions ),
 			adminUsernameField< FormData >(),
 			adminPasswordField< FormData >(),
 			adminEmailField< FormData >(),
@@ -335,7 +368,7 @@ export function CreateSiteForm( {
 				Edit: EnableHttpsControl,
 			},
 		],
-		[ existingDomainNames ]
+		[ existingDomainNames, wpVersions ]
 	);
 
 	const basicForm = useMemo< Form >(
@@ -425,70 +458,100 @@ export function CreateSiteForm( {
 
 	const advancedErrorCount = countAdvancedErrors( validity, advancedForm );
 
-	return (
-		<form className={ styles.form } onSubmit={ handleSubmit }>
-			<DataForm< FormData >
-				data={ data }
-				fields={ fields }
-				form={ basicForm }
-				onChange={ handleChange }
-				validity={ validity }
-			/>
-
+	// The buttons stay inside the <form> element so the submit button keeps
+	// its implicit form association while floating in the footer.
+	const actionButtons = (
+		<>
 			<Button
 				type="button"
-				variant="unstyled"
+				variant="minimal"
 				tone="neutral"
-				className={ styles.advancedToggle }
-				onClick={ () => setIsAdvancedOpen( ( value ) => ! value ) }
-				aria-expanded={ isAdvancedOpen }
+				onClick={ onCancel }
+				disabled={ isSubmitting }
 			>
-				<Icon icon={ isAdvancedOpen ? chevronDown : chevronRight } />
-				<span>{ __( 'Advanced settings' ) }</span>
-				{ ! isAdvancedOpen && advancedErrorCount > 0 && (
-					<span className={ styles.advancedErrorCount }>
-						{ advancedErrorCount === 1
-							? __( '1 error found' )
-							: /* translators: %d: number of errors */
-							  `${ advancedErrorCount } ${ __( 'errors found' ) }` }
-					</span>
-				) }
+				<Icon icon={ chevronLeft } size={ 16 } />
+				<span>{ __( 'Back' ) }</span>
 			</Button>
+			<Button
+				type="submit"
+				variant="solid"
+				tone="brand"
+				disabled={ ! canSubmit }
+				loading={ isSubmitting }
+				loadingAnnouncement={ __( 'Creating site' ) }
+				data-testid="create-site-submit"
+			>
+				{ submitLabel ?? __( 'Create site' ) }
+			</Button>
+		</>
+	);
 
-			{ isAdvancedOpen && (
+	return (
+		<form ref={ formRef } className={ styles.form } onSubmit={ handleSubmit }>
+			{ /* While creating, shield the rest of the window and freeze the
+			     fields (inert) — the submit button's spinner is the progress
+			     indication. */ }
+			<BusyOverlay active={ !! isSubmitting } />
+			{ /* The frosted panel wraps only the fields: its backdrop-filter
+			     turns it into a containing block for fixed descendants, so the
+			     fixed OnboardingFooter must stay outside (but inside the form
+			     for the submit button's implicit association). */ }
+			<div className={ styles.panel } inert={ isSubmitting || undefined }>
 				<DataForm< FormData >
 					data={ data }
 					fields={ fields }
-					form={ advancedForm }
+					form={ basicForm }
 					onChange={ handleChange }
 					validity={ validity }
 				/>
-			) }
-
-			{ submitError && <div className={ styles.submitError }>{ submitError }</div> }
 
-			<div className={ styles.actions }>
 				<Button
 					type="button"
-					variant="minimal"
+					variant="unstyled"
 					tone="neutral"
-					onClick={ onCancel }
-					disabled={ isSubmitting }
+					className={ styles.advancedToggle }
+					onClick={ () => setIsAdvancedOpen( ( value ) => ! value ) }
+					aria-expanded={ isAdvancedOpen }
 				>
-					{ __( 'Cancel' ) }
+					<Icon icon={ isAdvancedOpen ? chevronDown : chevronRight } />
+					<span>{ __( 'Advanced settings' ) }</span>
+					{ ! isAdvancedOpen && advancedErrorCount > 0 && (
+						<span className={ styles.advancedErrorCount }>
+							{ advancedErrorCount === 1
+								? __( '1 error found' )
+								: /* translators: %d: number of errors */
+								  `${ advancedErrorCount } ${ __( 'errors found' ) }` }
+						</span>
+					) }
 				</Button>
-				<Button
-					type="submit"
-					variant="solid"
-					tone="brand"
-					disabled={ ! canSubmit }
-					loading={ isSubmitting }
-					loadingAnnouncement={ __( 'Creating site' ) }
-					data-testid="create-site-submit"
+
+				<div
+					className={
+						isAdvancedOpen
+							? `${ styles.advancedCollapse } ${ styles.advancedCollapseOpen }`
+							: styles.advancedCollapse
+					}
+					inert={ ! isAdvancedOpen || undefined }
 				>
-					{ submitLabel ?? __( 'Create site' ) }
-				</Button>
+					<div className={ styles.advancedCollapseInner }>
+						<DataForm< FormData >
+							data={ data }
+							fields={ fields }
+							form={ advancedForm }
+							onChange={ handleChange }
+							validity={ validity }
+						/>
+					</div>
+				</div>
+
+				{ submitError && (
+					<div role="alert" className={ styles.submitError }>
+						{ submitError }
+					</div>
+				) }
 			</div>
+
+			<OnboardingFooter>{ actionButtons }</OnboardingFooter>
 		</form>
 	);
 }
diff --git a/apps/ui/src/components/create-site-form/style.module.css b/apps/ui/src/components/create-site-form/style.module.css
index ef5a6793d3..94ae163c7b 100644
--- a/apps/ui/src/components/create-site-form/style.module.css
+++ b/apps/ui/src/components/create-site-form/style.module.css
@@ -1,13 +1,25 @@
 .form {
+	text-align: left;
+}
+
+/* Frosted panel around the fields so the fixed dot grid reads as a
+   backdrop instead of bleeding through the (transparent-filled) inputs —
+   same treatment as the onboarding home cards. Kept off the <form> itself:
+   backdrop-filter creates a containing block, which would capture the
+   fixed footer. */
+.panel {
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
-	text-align: left;
+	padding: 32px;
+	border: 1px solid var(--wpds-color-stroke-surface-neutral, #ddd);
+	border-radius: 12px;
+	background: color-mix(in srgb, var(--wpds-color-bg-surface-neutral-strong, #fff) 50%, transparent);
+	backdrop-filter: blur(12px);
 }
 
-/* The path trigger is a <button>, but we style it to sit within the
-   DataForm grid the same way the text/email inputs do — 40px tall, 1px
-   neutral border, 2px radius, matching the InputBase chrome so the field
+/* The path trigger is a <button>, but it mirrors the @wordpress/ui
+   InputLayout chrome (height, border, radius, type, tokens) so the field
    reads as "one more input" alongside its siblings. The actual value is
    chosen via the OS folder picker opened by clicking the button. */
 .pathTrigger {
@@ -16,36 +28,38 @@
 	justify-content: space-between;
 	gap: 8px;
 	width: 100%;
-	min-height: 40px;
-	padding: 0 4px 0 12px;
-	border: 1px solid #8a8a8a;
+	height: 40px;
+	padding: 0 4px 0 var(--wpds-dimension-padding-md, 12px);
+	background-color: var(--wpds-color-bg-interactive-neutral-weak);
+	border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral);
+	/* Fixed 2px, not the radius-sm token (this app bumps it to 4px): the
+	   sibling DataForm fields are @wordpress/components controls with a
+	   hardcoded 2px radius, and the path field must match them. */
 	border-radius: 2px;
-	background: #fff;
-	color: #1e1e1e;
-	font: inherit;
-	font-size: 16px;
+	color: var(--wpds-color-fg-interactive-neutral);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-md, 13px);
+	line-height: 1;
 	text-align: left;
 	cursor: pointer;
-	transition: border-color 0.15s, box-shadow 0.15s;
+	transition: border-color 0.15s;
 }
 
 .pathTrigger:hover {
-	border-color: #1e1e1e;
+	border-color: var(--wpds-color-stroke-interactive-neutral-active);
 }
 
 .pathTrigger:focus-visible {
-	border-color: #1e1e1e;
-	box-shadow: 0 0 0 0.5px #1e1e1e;
-	outline: none;
+	outline: 2px solid var(--wpds-color-stroke-focus-brand, #3858e9);
+	outline-offset: -1px;
 }
 
 .pathTriggerError {
-	border-color: #d63638;
+	border-color: var(--wpds-color-stroke-interactive-error, #d63638);
 }
 
 .pathTriggerError:focus-visible {
-	border-color: #d63638;
-	box-shadow: 0 0 0 0.5px #d63638;
+	outline-color: var(--wpds-color-stroke-interactive-error, #d63638);
 }
 
 .pathValue {
@@ -57,19 +71,19 @@
 }
 
 .pathValuePlaceholder {
-	color: #757575;
+	color: var(--wpds-color-fg-interactive-neutral-disabled);
 }
 
 .pathTriggerAction {
 	flex: 0 0 auto;
 	padding: 6px 12px;
-	font-size: 13px;
+	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-weight: 500;
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-interactive-neutral);
 }
 
 .pathErrorHelp {
-	color: #d63638;
+	color: var(--wpds-color-fg-content-error, #d63638);
 }
 
 .advancedToggle {
@@ -79,23 +93,53 @@
 	align-self: flex-start;
 }
 
+/* Animated expand/collapse for the Advanced settings — the 0fr -> 1fr grid
+   row transition slides the content open without measuring heights. The
+   content stays mounted (inert while closed) so closing animates too. */
+.advancedCollapse {
+	display: grid;
+	grid-template-rows: 0fr;
+	opacity: 0;
+	/* Cancels the panel's 24px flex gap while collapsed — the zero-height
+	   row would otherwise leave a phantom gap under the toggle. */
+	margin-top: -24px;
+	transition: grid-template-rows 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
+}
+
+.advancedCollapseOpen {
+	grid-template-rows: 1fr;
+	opacity: 1;
+	margin-top: 0;
+}
+
+.advancedCollapseInner {
+	overflow: hidden;
+	min-height: 0;
+	/* The clip needed for the collapse animation would also shave outset
+	   focus rings off fields at the container edges; the negative margin +
+	   equal padding widens the clip box without moving the content. */
+	padding: 4px;
+	margin: -4px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.advancedCollapse {
+		transition: none;
+	}
+}
+
 .advancedErrorCount {
 	margin-left: 8px;
 	font-size: 12px;
 	font-weight: 500;
-	color: #d63638;
+	color: var(--wpds-color-fg-content-error, #d63638);
 }
 
 .submitError {
 	padding: 10px 12px;
 	border-radius: 4px;
-	background: #fce8e8;
-	color: #7a1a1a;
+	background: color-mix(in srgb, var(--wpds-color-fg-content-error, #d63638) 12%, transparent);
+	color: var(--wpds-color-fg-content-error, #7a1a1a);
 	font-size: 13px;
 }
 
-.actions {
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-}
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/site-fields/index.ts b/apps/ui/src/components/site-fields/index.ts
index 8d0495ec95..9666a5959d 100644
--- a/apps/ui/src/components/site-fields/index.ts
+++ b/apps/ui/src/components/site-fields/index.ts
@@ -13,6 +13,7 @@ import {
 import { validateAdminEmail, validateAdminUsername } from '@studio/common/lib/passwords';
 import { SupportedPHPVersions } from '@studio/common/types/php-versions';
 import { __ } from '@wordpress/i18n';
+import type { WordPressVersion } from '@studio/common/lib/wordpress-versions';
 import type { SupportedPHPVersion } from '@studio/common/types/php-versions';
 import type { Field } from '@wordpress/dataviews';
 
@@ -39,15 +40,37 @@ export function phpVersionField< T extends { phpVersion: SupportedPHPVersion } >
 	};
 }
 
+/**
+ * Builder for the WordPress version field. With a fetched `versions` list it
+ * renders a select ordered like the desktop renderer's version picker —
+ * auto-updating "latest" first, then nightly/beta, then stable releases.
+ * Without one (offline, fetch failed, still loading) it stays a free-text
+ * input so site creation is never blocked on the wordpress.org API.
+ */
 export function wpVersionField< T extends { wpVersion: string } >(
-	placeholder: string
+	placeholder: string,
+	versions?: WordPressVersion[]
 ): Field< T > {
-	return {
+	const field: Field< T > = {
 		id: 'wpVersion',
 		type: 'text',
 		label: __( 'WordPress version' ),
 		placeholder,
 	};
+	if ( versions?.length ) {
+		const beta = versions.filter( ( version ) => version.isBeta || version.isDevelopment );
+		const stable = versions.filter(
+			( version ) => version.value !== 'latest' && ! version.isBeta && ! version.isDevelopment
+		);
+		field.elements = [
+			...versions
+				.filter( ( version ) => version.value === 'latest' )
+				.map( ( version ) => ( { value: version.value, label: __( 'latest' ) } ) ),
+			...beta.map( ( version ) => ( { value: version.value, label: version.label } ) ),
+			...stable.map( ( version ) => ( { value: version.value, label: version.label } ) ),
+		];
+	}
+	return field;
 }
 
 export function adminUsernameField< T extends { adminUsername: string } >(): Field< T > {
diff --git a/apps/ui/src/data/core/connectors/ipc/index.ts b/apps/ui/src/data/core/connectors/ipc/index.ts
index f4431f4ee4..f52539d869 100644
--- a/apps/ui/src/data/core/connectors/ipc/index.ts
+++ b/apps/ui/src/data/core/connectors/ipc/index.ts
@@ -1,4 +1,5 @@
 import { sanitizeFolderName } from '@studio/common/lib/sanitize-folder-name';
+import { fetchWordPressVersions } from '@studio/common/lib/wordpress-versions';
 import { __ } from '@wordpress/i18n';
 import type {
 	ActiveAgentRun,
@@ -336,6 +337,13 @@ export function createIpcConnector(): Connector {
 			return list;
 		},
 
+		async getWordPressVersions() {
+			// Fetches straight from the wordpress.org version-check API (the
+			// renderer CSP allows api.wordpress.org) using the same shared
+			// helper the desktop renderer's version selector relies on.
+			return fetchWordPressVersions();
+		},
+
 		async getFilePath( file ) {
 			// `webUtils.getPathForFile` is a synchronous preload-only API; the
 			// connector wraps it in a Promise to keep the surface uniform and
diff --git a/apps/ui/src/data/core/types.ts b/apps/ui/src/data/core/types.ts
index 5e171dbe3e..6ed9fb74c1 100644
--- a/apps/ui/src/data/core/types.ts
+++ b/apps/ui/src/data/core/types.ts
@@ -6,6 +6,7 @@ import type { AiSessionSummary, LoadedAiSession } from '@studio/common/ai/sessio
 import type { SupportedLocale } from '@studio/common/lib/locale';
 import type { SupportedEditor } from '@studio/common/lib/user-settings/editor';
 import type { SupportedTerminal } from '@studio/common/lib/user-settings/terminal';
+import type { WordPressVersion } from '@studio/common/lib/wordpress-versions';
 import type { DeskConfig, DeskSettings } from '@studio/common/types/desk';
 import type { SupportedPHPVersion } from '@studio/common/types/php-versions';
 import type { Snapshot } from '@studio/common/types/snapshot';
@@ -152,6 +153,11 @@ export interface Connector {
 	// no auth required, localized by the user's current UI locale.
 	getFeaturedBlueprints( locale?: string ): Promise< FeaturedBlueprint[] >;
 
+	// Installable WordPress versions from the wordpress.org version-check
+	// API: a "latest" auto-updating option first, then nightly/beta and
+	// stable releases down to Playground's minimum supported version.
+	getWordPressVersions(): Promise< WordPressVersion[] >;
+
 	// Resolves the absolute filesystem path of a File handle picked or dropped
 	// in the renderer. Returns an empty string when the underlying file lacks
 	// a real path (synthetic blobs, non-Electron environments).
diff --git a/apps/ui/src/data/queries/use-wordpress-versions.ts b/apps/ui/src/data/queries/use-wordpress-versions.ts
new file mode 100644
index 0000000000..c42690e4ee
--- /dev/null
+++ b/apps/ui/src/data/queries/use-wordpress-versions.ts
@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+import { useConnector } from '@/data/core';
+
+const WORDPRESS_VERSIONS_QUERY_KEY = [ 'wordpress-versions' ] as const;
+
+/**
+ * Installable WordPress versions for the create-site and site-settings
+ * forms. The list changes only when WordPress ships a release, so keep it
+ * fresh for an hour; failures fall back to the form's static default
+ * rather than blocking site creation.
+ */
+export function useWordPressVersions() {
+	const connector = useConnector();
+	return useQuery( {
+		queryKey: WORDPRESS_VERSIONS_QUERY_KEY,
+		queryFn: () => connector.getWordPressVersions(),
+		staleTime: 60 * 60 * 1000,
+		retry: 1,
+	} );
+}
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/ui-classic/router/route-onboarding-blueprint/index.tsx b/apps/ui/src/ui-classic/router/route-onboarding-blueprint/index.tsx
index 099c5b8c0c..35dfaf9142 100644
--- a/apps/ui/src/ui-classic/router/route-onboarding-blueprint/index.tsx
+++ b/apps/ui/src/ui-classic/router/route-onboarding-blueprint/index.tsx
@@ -129,9 +129,10 @@ function OnboardingBlueprintPage() {
 					) }
 				</p>
 				<BlueprintSelector
-					featured={ featured.data }
-					isFeaturedLoading={ featured.isLoading }
+					blueprints={ featured.data }
+					isLoading={ featured.isLoading }
 					onPick={ handlePick }
+					onPickEmpty={ () => void navigate( { to: '/onboarding/create' } ) }
 				/>
 			</div>
 		);
diff --git a/apps/ui/src/ui-desks/onboarding/index.tsx b/apps/ui/src/ui-desks/onboarding/index.tsx
index 21bb55e602..be4c70811c 100644
--- a/apps/ui/src/ui-desks/onboarding/index.tsx
+++ b/apps/ui/src/ui-desks/onboarding/index.tsx
@@ -223,9 +223,10 @@ export function DeskOnboardingBlueprint() {
 						) }
 					</p>
 					<BlueprintSelector
-						featured={ featured.data }
-						isFeaturedLoading={ featured.isLoading }
+						blueprints={ featured.data }
+						isLoading={ featured.isLoading }
 						onPick={ handlePick }
+						onPickEmpty={ () => void navigate( { to: '/onboarding/create' } ) }
 					/>
 				</div>
 			</OnboardingLayout>
diff --git a/tools/common/constants.ts b/tools/common/constants.ts
index 7b7aa7eb19..85e04e8055 100644
--- a/tools/common/constants.ts
+++ b/tools/common/constants.ts
@@ -36,6 +36,7 @@ export const CERT_UNTRUSTED_ROOT = 'CERT_TRUST_IS_UNTRUSTED_ROOT'; // Windows AP
 export const DEFAULT_CUSTOM_DOMAIN_SUFFIX = '.wp.local';
 
 // WordPress constants
+export const EMPTY_SITE_PLAYGROUND_URL = 'https://playground.wordpress.net/';
 export const MINIMUM_WORDPRESS_VERSION = '6.2.1' as const; // https://wordpress.github.io/wordpress-playground/blueprints/examples/#load-an-older-wordpress-version
 export const DEFAULT_WORDPRESS_VERSION = 'latest' as const;
 export const DEFAULT_PHP_VERSION: typeof RecommendedPHPVersion = RecommendedPHPVersion;
diff --git a/tools/common/lib/blueprint-curation.ts b/tools/common/lib/blueprint-curation.ts
new file mode 100644
index 0000000000..a1fe39f1d0
--- /dev/null
+++ b/tools/common/lib/blueprint-curation.ts
@@ -0,0 +1,56 @@
+/**
+ * Display curation for the public blueprints gallery, shared by the desktop
+ * renderer's Add Site flow and the apps/ui onboarding flow so the two can't
+ * drift. The wpcom blueprints endpoint returns raw titles/excerpts; these
+ * helpers rename the featured trio for display, override their excerpts,
+ * and pin their order.
+ */
+
+type TranslateFn = ( text: string ) => string;
+
+export const FEATURED_BLUEPRINT_SLUGS: ReadonlySet< string > = new Set( [
+	'woo-shop',
+	'development',
+	'quick-start',
+] );
+
+const BLUEPRINT_DISPLAY_NAMES: Record< string, string > = {
+	'Quick Start': 'WordPress.com',
+	Development: 'WordPress Dev',
+	Commerce: 'WooCommerce',
+};
+
+const BLUEPRINT_ORDER: Record< string, number > = {
+	'Quick Start': 1,
+	Commerce: 2,
+	Development: 3,
+};
+
+// Takes the translate function as a parameter (rather than importing the
+// global `__`) so callers using a scoped i18n instance — like the desktop
+// renderer's I18nProvider — still get translated strings.
+function getBlueprintExcerptOverrides( __: TranslateFn ): Record< string, string > {
+	return {
+		'Quick Start': __(
+			'A WordPress.com-like environment with Business plan plugins and themes pre-installed.'
+		),
+		Commerce: __(
+			'Create your next online store with WooCommerce and its companion plugins pre-installed.'
+		),
+		Development: __( 'A streamlined environment for building and testing themes or plugins.' ),
+	};
+}
+
+export function curateBlueprintsForDisplay< T extends { title: string; excerpt: string } >(
+	blueprints: T[],
+	__: TranslateFn
+): T[] {
+	const excerptOverrides = getBlueprintExcerptOverrides( __ );
+	return [ ...blueprints ]
+		.sort( ( a, b ) => ( BLUEPRINT_ORDER[ a.title ] ?? 99 ) - ( BLUEPRINT_ORDER[ b.title ] ?? 99 ) )
+		.map( ( item ) => ( {
+			...item,
+			excerpt: excerptOverrides[ item.title ] || item.excerpt,
+			title: BLUEPRINT_DISPLAY_NAMES[ item.title ] || item.title,
+		} ) );
+}