diff --git a/src/app/components/AppBody/AppBody.js b/src/app/components/AppBody/AppBody.js
index ace104476..19a2a30d3 100644
--- a/src/app/components/AppBody/AppBody.js
+++ b/src/app/components/AppBody/AppBody.js
@@ -69,7 +69,7 @@ const AppBody = () => {
 	}, [ location ] );
 
 	return (
-		<div className="nfd-onboarding-body nfd-flex nfd-justify-center nfd-pt-8 nfd-pb-16">
+		<div className="nfd-onboarding-body nfd-flex nfd-justify-center nfd-py-10 mobile:nfd-py-10">
 			<div className="nfd-onboarding-body-container nfd-w-full">
 				<AppErrorBoundary FallbackComponent={ ErrorBoundaryFallback }>{ boot() }</AppErrorBoundary>
 			</div>
diff --git a/src/app/components/BackButton/BackButton.js b/src/app/components/BackButton/BackButton.js
new file mode 100644
index 000000000..63991e9d8
--- /dev/null
+++ b/src/app/components/BackButton/BackButton.js
@@ -0,0 +1,30 @@
+import { ArrowLeftIcon } from '@heroicons/react/24/outline';
+import Navigate from '../Navigate/Navigate';
+
+/**
+ * BackButton component for header navigation.
+ *
+ * @param {Object}  props          - Component props
+ * @param {string}  props.toRoute  - The route to navigate back to
+ * @param {boolean} props.disabled - Whether the button is disabled
+ * @return {JSX.Element} A back button with icon and optional text
+ */
+const BackButton = ( { toRoute = '/', disabled = false } ) => {
+	return (
+		<Navigate
+			toRoute={ toRoute }
+			direction="backward"
+			variant="secondary"
+			disabled={ disabled }
+			className="!nfd-bg-transparent !nfd-border-0 !nfd-p-0 !nfd-shadow-none hover:!nfd-shadow-none !nfd-flex !nfd-items-center nfd-gap-2 !nfd-text-primary-500 hover:!nfd-text-primary-600 nfd-transition-colors"
+		>
+			<ArrowLeftIcon className="nfd-w-5 nfd-h-5 nfd-stroke-[2.5]" />
+			<span className="mobile:nfd-hidden nfd-text-base nfd-font-semibold">
+				{ __( 'Back', 'wp-module-onboarding' ) }
+			</span>
+		</Navigate>
+	);
+};
+
+export default BackButton;
+
diff --git a/src/app/components/BackButton/index.js b/src/app/components/BackButton/index.js
new file mode 100644
index 000000000..9c149b3e5
--- /dev/null
+++ b/src/app/components/BackButton/index.js
@@ -0,0 +1,2 @@
+export { default as BackButton } from './BackButton';
+
diff --git a/src/app/components/BrandLoader/BrandLoader.js b/src/app/components/BrandLoader/BrandLoader.js
new file mode 100644
index 000000000..5593ae778
--- /dev/null
+++ b/src/app/components/BrandLoader/BrandLoader.js
@@ -0,0 +1,58 @@
+import { useSelect } from '@wordpress/data';
+import { nfdOnboardingStore } from '@/data/store';
+import bluehostLogo from '../../../Brands/bluehost/step-loader-logo.svg';
+import hostgatorLogo from '../../../Brands/hostgator/step-loader-logo.svg';
+import crazyDomainsLogo from '../../../Brands/crazy-domains/step-loader-logo.svg';
+import webcomLogo from '../../../Brands/webcom/logo.svg';
+import wordpressLogo from '../../../Brands/wordpress/step-loader-logo.svg';
+import './BrandLoader.scss';
+
+/**
+ * BrandLoader component - displays brand-specific loading animation
+ *
+ * @param {Object} props        Component props
+ * @param {string} props.width  Width of the loader (default: '120px')
+ * @param {string} props.height Height of the loader (default: '120px')
+ * @param {string} props.alt    Alt text for the loader image
+ * @return {JSX.Element} Brand loader component
+ */
+const BrandLoader = ( { width = '120px', height = '120px', alt = 'Loading animation' } ) => {
+	const brandName = useSelect( ( select ) => {
+		return select( nfdOnboardingStore ).getBrandName();
+	}, [] );
+
+	if ( ! brandName ) {
+		return null;
+	}
+
+	const normalizedBrand = brandName.toLowerCase().replace( / /g, '-' );
+
+	// Map brand names to their imported logos
+	const brandLogoMap = {
+		bluehost: bluehostLogo,
+		'bluehost-india': bluehostLogo,
+		hostgator: hostgatorLogo,
+		'hostgator-us': hostgatorLogo,
+		'hostgator-br': hostgatorLogo,
+		'crazy-domains': crazyDomainsLogo,
+		webcom: webcomLogo,
+		wordpress: wordpressLogo,
+	};
+
+	const logoUrl = brandLogoMap[ normalizedBrand ] || wordpressLogo;
+
+	return (
+		<div
+			className="brand-loader"
+			role="img"
+			aria-label={ alt }
+			style={ {
+				width,
+				height,
+				backgroundImage: `url(${ logoUrl })`,
+			} }
+		/>
+	);
+};
+
+export default BrandLoader;
diff --git a/src/app/components/BrandLoader/BrandLoader.scss b/src/app/components/BrandLoader/BrandLoader.scss
new file mode 100644
index 000000000..b85d68f47
--- /dev/null
+++ b/src/app/components/BrandLoader/BrandLoader.scss
@@ -0,0 +1,6 @@
+.brand-loader {
+	display: inline-block;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
diff --git a/src/app/components/BrandLoader/index.js b/src/app/components/BrandLoader/index.js
new file mode 100644
index 000000000..b76a0dd4a
--- /dev/null
+++ b/src/app/components/BrandLoader/index.js
@@ -0,0 +1 @@
+export { default as BrandLoader } from './BrandLoader';
diff --git a/src/app/components/Header/Header.js b/src/app/components/Header/Header.js
index 3322db59d..dcd8e9de3 100644
--- a/src/app/components/Header/Header.js
+++ b/src/app/components/Header/Header.js
@@ -3,6 +3,16 @@ import { useLocation } from 'react-router-dom';
 import { ReactComponent as BluehostLogo } from '@/assets/bluehost-logo.svg';
 import { HeaderActions as CanvasStepHeaderActions } from '@/steps/Canvas';
 import { HeaderActions as BlueprintCanvasStepHeaderActions } from '@/steps/BlueprintCanvas';
+import { BackButton } from '@/components';
+
+// Map of routes that should show a back button in the header
+const BACK_NAVIGATION_MAP = {
+	'/intake': '/',
+	'/logo': '/intake',
+	'/generating': '/logo',
+	'/previews': '/logo',
+	'/blueprints': '/',
+};
 
 const Header = () => {
 	const [ isCanvasStep, setIsCanvasStep ] = useState( false );
@@ -23,6 +33,10 @@ const Header = () => {
 		}
 	}, [ location ] );
 
+	// Determine if the current route should show a back button
+	const backRoute = BACK_NAVIGATION_MAP[ location.pathname ];
+	const showBackButton = !! backRoute;
+
 	return (
 		<header
 			className={ classNames(
@@ -31,12 +45,16 @@ const Header = () => {
 			) }
 		>
 			<div className="nfd-onboarding-header-container nfd-flex nfd-justify-between nfd-items-center nfd-min-h-16 nfd-px-6 mobile:nfd-px-0 mobile:nfd-max-w-[90%] mobile:nfd-mx-auto">
-				<BluehostLogo
-					id="nfd-onboarding-header-logo"
-					className={ classNames(
-						( isCanvasStep || isBlueprintCanvasStep ) && 'mobile:nfd-hidden'
-					) }
-				/>
+				{ showBackButton ? (
+					<BackButton toRoute={ backRoute } />
+				) : (
+					<BluehostLogo
+						id="nfd-onboarding-header-logo"
+						className={ classNames(
+							( isCanvasStep || isBlueprintCanvasStep ) && 'mobile:nfd-hidden'
+						) }
+					/>
+				) }
 				{ isCanvasStep && <CanvasStepHeaderActions /> }
 				{ isBlueprintCanvasStep && <BlueprintCanvasStepHeaderActions /> }
 			</div>
diff --git a/src/app/components/Iframe/Iframe.js b/src/app/components/Iframe/Iframe.js
index 5e3a32385..79c6cad46 100644
--- a/src/app/components/Iframe/Iframe.js
+++ b/src/app/components/Iframe/Iframe.js
@@ -4,7 +4,7 @@ import { forwardRef } from '@wordpress/element';
 const Iframe = forwardRef( ( {
 	title,
 	src,
-	width = 400,
+	width = 400, // eslint-disable-line no-unused-vars
 	height = 400,
 	viewportScale = 1,
 	viewportWidth = 1440,
@@ -18,8 +18,7 @@ const Iframe = forwardRef( ( {
 				'nfd-onboarding-iframe nfd-relative nfd-flex nfd-flex-col nfd-overflow-hidden',
 			) }
 			style={ {
-				minWidth: width,
-				maxWidth: width,
+				width: '100%',
 				minHeight: height,
 				maxHeight: height,
 			} }
diff --git a/src/app/components/InteractionBlockingOverlay/InteractionBlockingOverlay.js b/src/app/components/InteractionBlockingOverlay/InteractionBlockingOverlay.js
index 38dc3972d..890dd5884 100644
--- a/src/app/components/InteractionBlockingOverlay/InteractionBlockingOverlay.js
+++ b/src/app/components/InteractionBlockingOverlay/InteractionBlockingOverlay.js
@@ -1,4 +1,4 @@
-import { Spinner } from '@newfold/ui-component-library';
+import { BrandLoader } from '@/components';
 
 const InteractionBlockingOverlay = ( {
 	hasLoadingSpinner = false,
@@ -8,11 +8,9 @@ const InteractionBlockingOverlay = ( {
 	return (
 		<div className="nfd-onboarding-ibo nfd-fixed nfd-inset-0 nfd-z-50 nfd-flex nfd-flex-col nfd-items-center nfd-justify-center nfd-gap-5 nfd-opacity-100 nfd-transition-opacity nfd-duration-200 nfd-ease-in-out">
 			{ hasLoadingSpinner && (
-				<Spinner
-					variant="white"
-					size="8"
-					className="!nfd-w-12 !nfd-h-12 nfd-z-40"
-				/>
+				<div className="nfd-bg-white nfd-rounded-full nfd-p-8 nfd-shadow-lg nfd-z-40">
+					<BrandLoader width="80px" height="80px" />
+				</div>
 			) }
 			{ hasBackground && (
 				<div className="nfd-onboarding-ibo-background nfd-absolute nfd-inset-0 nfd-bg-slate-800 nfd-bg-opacity-90" />
diff --git a/src/app/components/SiteGenPreviewCard/SiteGenPreviewCard.js b/src/app/components/SiteGenPreviewCard/SiteGenPreviewCard.js
index bc474e18f..bec2debd3 100644
--- a/src/app/components/SiteGenPreviewCard/SiteGenPreviewCard.js
+++ b/src/app/components/SiteGenPreviewCard/SiteGenPreviewCard.js
@@ -2,14 +2,15 @@ import { Button, Spinner } from '@newfold/ui-component-library';
 import classNames from 'classnames';
 import { Iframe } from '@/components';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { useState } from '@wordpress/element';
 
 const SiteGenPreviewCard = ( {
 	screenshot,
 	frameName,
 	frameSrc,
 	onFrameLoad = () => {},
-	width = '300px',
-	height = '360px',
+	width = '280px',
+	height = '350px',
 	viewportScale = 0.2,
 	viewportWidth = 1500,
 	viewportHeight = 2500,
@@ -19,6 +20,8 @@ const SiteGenPreviewCard = ( {
 	tabIndex = 0,
 	onPreview,
 	className,
+	title = '',
+	isNew = false,
 	...props
 } ) => {
 	const handleOnPreview = () => {
@@ -40,12 +43,7 @@ const SiteGenPreviewCard = ( {
 						</span>
 					</div>
 				) }
-				{ isLoading && (
-					<Spinner
-						variant="primary"
-						size="8"
-					/>
-				) }
+				{ isLoading && <Spinner variant="primary" size="8" /> }
 			</div>
 		);
 	};
@@ -63,7 +61,7 @@ const SiteGenPreviewCard = ( {
 					variant="primary"
 					className={ classNames(
 						'nfd-z-20 nfd-transition-opacity',
-						isHovered ? 'nfd-opacity-100' : 'nfd-opacity-0',
+						isHovered ? 'nfd-opacity-100' : 'nfd-opacity-0'
 					) }
 					tabIndex="-1"
 				>
@@ -74,47 +72,59 @@ const SiteGenPreviewCard = ( {
 	};
 
 	return (
-		<div
-			className={ classNames(
-				'nfd-onboarding-sitegen-preview-card nfd-relative nfd-bg-cover nfd-bg-top nfd-bg-no-repeat nfd-border nfd-border-slate-30 nfd-rounded nfd-overflow-hidden focus:nfd-outline-none focus:nfd-ring-2 focus:nfd-ring-primary focus:nfd-ring-offset-2 hover:nfd-bg-bottom nfd-transition-[background-position] nfd-duration-[1500ms] hover:nfd-duration-[5000ms]',
-				! isLoading && ! isError && 'nfd-cursor-pointer',
-				( isLoading || isError ) && 'nfd-cursor-default',
-				className,
-			) }
-			style={ {
-				backgroundImage: screenshot ? `url(${ screenshot })` : 'none',
-				minWidth: width,
-				maxWidth: width,
-				minHeight: height,
-				maxHeight: height,
-			} }
-			onClick={ handleOnPreview }
-			onKeyDown={ ( event ) => {
-				if ( event.key === 'Enter' ) {
-					handleOnPreview();
-				}
-			} }
-			role="button"
-			tabIndex={ tabIndex }
-			{ ...props }
-		>
-			{ ( isLoading || isError ) && <StatusOverlay /> }
-			{ overlay && ! isLoading && ! isError && <ActionOverlay /> }
-			{ ! screenshot && frameSrc && (
-				<Iframe
-					title={ frameName }
-					name={ `nfd-onboarding-${ frameName }` }
-					src={ frameSrc }
-					width={ width }
-					height={ height }
-					viewportWidth={ viewportWidth }
-					viewportHeight={ viewportHeight }
-					viewportScale={ viewportScale }
-					className="nfd-basis-full nfd-absolute nfd-origin-top-left nfd-z-10"
-					onLoad={ onFrameLoad }
-					tabIndex="-1"
-					inert
-				/>
+		<div className="nfd-flex nfd-flex-col nfd-gap-5 nfd-w-full">
+			<div
+				className={ classNames(
+					'nfd-onboarding-sitegen-preview-card nfd-relative nfd-bg-cover nfd-bg-top nfd-bg-no-repeat nfd-bg-white nfd-border nfd-border-[#E5E7EB] nfd-overflow-hidden nfd-shadow-sm focus:nfd-outline-none focus:nfd-ring-2 focus:nfd-ring-primary focus:nfd-ring-offset-2 hover:nfd-bg-bottom nfd-transition-[background-position] nfd-duration-[1500ms] hover:nfd-duration-[5000ms]',
+					! isLoading && ! isError && 'nfd-cursor-pointer hover:nfd-shadow-md',
+					( isLoading || isError ) && 'nfd-cursor-default',
+					className
+				) }
+				style={ {
+					backgroundImage: screenshot ? `url(${ screenshot })` : 'none',
+					width: '100%',
+					minHeight: height,
+					maxHeight: height,
+					borderRadius: '15px',
+				} }
+				onClick={ handleOnPreview }
+				onKeyDown={ ( event ) => {
+					if ( event.key === 'Enter' ) {
+						handleOnPreview();
+					}
+				} }
+				role="button"
+				tabIndex={ tabIndex }
+				{ ...props }
+			>
+				{ ( isLoading || isError ) && <StatusOverlay /> }
+				{ overlay && ! isLoading && ! isError && <ActionOverlay /> }
+				{ ! screenshot && frameSrc && (
+					<Iframe
+						title={ frameName }
+						name={ `nfd-onboarding-${ frameName }` }
+						src={ frameSrc }
+						width={ width }
+						height={ height }
+						viewportWidth={ viewportWidth }
+						viewportHeight={ viewportHeight }
+						viewportScale={ viewportScale }
+						className="nfd-basis-full nfd-absolute nfd-origin-top-left nfd-z-10"
+						onLoad={ onFrameLoad }
+						tabIndex="-1"
+						inert
+					/>
+				) }
+			</div>
+			{ title && (
+				<div className="nfd-flex nfd-items-center nfd-gap-2">
+					<h3 className="nfd-text-base nfd-font-semibold nfd-text-[#111827]">{ title }</h3>
+					{ isNew && (
+						<span className="nfd-bg-[#E8E9FF] nfd-text-[#3239CB] nfd-px-3 nfd-py-1 nfd-rounded-full nfd-font-bold nfd-uppercase nfd-letter-spacing-tighter nfd-text-xxs">
+							{ __( 'New', 'wp-module-onboarding' ) }
+						</span>
+					) }
+				</div>
 			) }
 		</div>
 	);
diff --git a/src/app/components/index.js b/src/app/components/index.js
index 471015463..49a190b80 100644
--- a/src/app/components/index.js
+++ b/src/app/components/index.js
@@ -1,6 +1,8 @@
 export { ActionCard as ActionCard } from './ActionCard';
 export { AnimateRoutes as AnimateRoutes } from './AnimateRoutes';
 export { AppBody as AppBody } from './AppBody';
+export { BackButton as BackButton } from './BackButton';
+export { BrandLoader as BrandLoader } from './BrandLoader';
 export { ErrorBoundaryFallback as ErrorBoundaryFallback } from './ErrorBoundaryFallback';
 export { Header as Header } from './Header';
 export { Iframe as Iframe } from './Iframe';
diff --git a/src/app/steps/BlueprintCanvas/Preview.js b/src/app/steps/BlueprintCanvas/Preview.js
index 39067b3b6..57258ece6 100644
--- a/src/app/steps/BlueprintCanvas/Preview.js
+++ b/src/app/steps/BlueprintCanvas/Preview.js
@@ -1,8 +1,7 @@
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { nfdOnboardingStore } from '@/data/store';
-import { Iframe } from '@/components';
-import { Spinner } from '@newfold/ui-component-library';
+import { Iframe, BrandLoader } from '@/components';
 
 const Preview = () => {
 	const [ preview, setPreview ] = useState( null );
@@ -36,10 +35,7 @@ const Preview = () => {
 						height: `calc(100dvh - ${ appHeaderHeight }px)`,
 					} }
 				>
-					<Spinner
-						variant="primary"
-						size="8"
-					/>
+					<BrandLoader width="80px" height="80px" />
 				</div>
 			);
 		}
diff --git a/src/app/steps/Blueprints/BlueprintsStep.js b/src/app/steps/Blueprints/BlueprintsStep.js
index 8dac03a76..27d53048f 100644
--- a/src/app/steps/Blueprints/BlueprintsStep.js
+++ b/src/app/steps/Blueprints/BlueprintsStep.js
@@ -1,5 +1,5 @@
 import missingResourceFigureUrl from '@/assets/nfd-missing-resource.png';
-import { Navigate, SiteGenPreviewCard, Step } from '@/components';
+import { SiteGenPreviewCard, Step } from '@/components';
 import { nfdOnboardingStore } from '@/data/store';
 import { Container, Spinner, Title } from '@newfold/ui-component-library';
 import { dispatch, useSelect } from '@wordpress/data';
@@ -34,15 +34,15 @@ const Tabs = ( { activeTab } ) => {
 	];
 
 	return (
-		<div className="nfd-flex nfd-gap-8 nfd-border-b nfd-border-[#EDEFF0]">
+		<div className="nfd-flex nfd-gap-8 nfd-border-b nfd-border-[#E5E7EB]">
 			{ tabs.map( ( tab ) => (
 				<button
 					key={ tab.value }
 					className={ classNames(
-						'nfd-bg-transparent nfd-py-4 nfd-px-1 nfd-text-tiny nfd-font-medium nfd-relative',
+						'nfd-bg-transparent nfd-py-3 nfd-px-0 nfd-text-base nfd-font-semibold nfd-relative nfd-border-b-2 nfd-transition-colors',
 						activeTab === tab.value
-							? '!nfd-text-primary after:nfd-content-[""] after:nfd-absolute after:nfd-bottom-[-1px] after:nfd-left-0 after:nfd-w-full after:nfd-h-[2px] after:nfd-bg-primary'
-							: 'nfd-text-[#4A5565]'
+							? 'nfd-text-primary nfd-border-primary'
+							: 'nfd-text-[#6B7280] nfd-border-transparent hover:nfd-text-[#374151]'
 					) }
 					onClick={ () => {
 						dispatch( nfdOnboardingStore ).setActiveTab( tab.value );
@@ -85,7 +85,16 @@ const BlueprintsStep = () => {
 			<style>
 				{ `
 					.nfd-onboarding-body {
-						padding-top: 3rem !important;
+						padding-top: 2rem !important;
+						background-color: #F9FAFB !important;
+					}
+					
+					/* Responsive container adjustments */
+					@media (min-width: 1024px) and (max-width: 1350px) {
+						.nfd-onboarding-step-intro {
+							min-width: 90% !important;
+							max-width: 90% !important;
+						}
 					}
 				` }
 			</style>
@@ -138,10 +147,15 @@ const BlueprintsStep = () => {
 			);
 		}
 
+		// Sort blueprints by ID descending to show latest first
+		const sortedBlueprints = [ ...filteredBlueprints ].sort( ( a, b ) => {
+			return ( b.id || 0 ) - ( a.id || 0 );
+		} );
+
 		// Render blueprints.
 		return (
-			<div className="nfd-grid nfd-grid-cols-3 nfd-gap-8 mobile:nfd-grid-cols-1 mobile:nfd-justify-items-center">
-				{ filteredBlueprints.map( ( blueprint ) => (
+			<div className="nfd-grid nfd-grid-cols-4 nfd-gap-6 tablet:nfd-grid-cols-2 mobile:nfd-grid-cols-1 mobile:nfd-justify-items-center">
+				{ sortedBlueprints.map( ( blueprint, index ) => (
 					<SiteGenPreviewCard
 						key={ blueprint.id }
 						screenshot={ blueprint.screenshot_url }
@@ -149,9 +163,11 @@ const BlueprintsStep = () => {
 						frameSrc={ blueprint.preview_url }
 						isLoading={ false }
 						overlay={ true }
-						width="245px"
-						height="295px"
+						width="280px"
+						height="350px"
 						onPreview={ handleOnPreview }
+						title={ blueprint.title || blueprint.name || blueprint.slug }
+						isNew={ index < 3 }
 					/>
 				) ) }
 			</div>
@@ -160,19 +176,19 @@ const BlueprintsStep = () => {
 
 	return (
 		<Step>
-			<Container className="nfd-onboarding-step-container nfd-onboarding-step-intro nfd-min-w-[780px] nfd-max-w-[780px] tablet:nfd-min-w-[90%] tablet:nfd-max-w-[90%]">
+			<Container className="nfd-onboarding-step-container nfd-onboarding-step-intro nfd-w-[1440px] nfd-max-w-[90vw] tablet:nfd-w-full tablet:nfd-max-w-full tablet:nfd-px-6 mobile:nfd-px-4">
 				{ getCustomStyles() }
 				<Container.Header>
-					<div className="nfd-flex nfd-flex-col nfd-gap-3">
+					<div className="nfd-flex nfd-flex-col nfd-gap-4 nfd-items-center nfd-text-center nfd-mb-8">
 						{ sitegenHasFailed ? (
 							<>
 								<Title
 									as="h1"
-									className="nfd-text-3xl nfd-text-content-default mobile:nfd-text-2xl"
+									className="nfd-text-4xl nfd-text-[#111827] mobile:nfd-text-3xl nfd-font-bold nfd-leading-tight"
 								>
 									{ __( "Sorry, let's try a different approach.", 'wp-module-onboarding' ) }
 								</Title>
-								<p className="nfd-text-tiny nfd-text-content-default">
+								<p className="nfd-text-base nfd-text-[#6B7280] nfd-max-w-[600px]">
 									{ __(
 										"We're sorry, our site generation tool isn't working right now. In the meantime, here are our beautifully designed starter templates to get you started. Choose your favorite — we'll guide you through customizing it!",
 										'wp-module-onboarding'
@@ -181,21 +197,15 @@ const BlueprintsStep = () => {
 							</>
 						) : (
 							<>
-								<Title
-									as="h3"
-									className="nfd-text-lg mobile:nfd-text-lg nfd-text-[#66A3D2] nfd-font-serif nfd-italic"
-								>
-									{ __( "It's up to you!", 'wp-module-onboarding' ) }
-								</Title>
 								<Title
 									as="h1"
-									className="nfd-text-3xl nfd-text-content-default mobile:nfd-text-2xl"
+									className="nfd-text-4xl nfd-text-[#111827] mobile:nfd-text-3xl nfd-font-bold nfd-leading-tight"
 								>
 									{ __( 'Pick the best Starter Template for your needs', 'wp-module-onboarding' ) }
 								</Title>
-								<p className="nfd-text-tiny nfd-text-content-default">
+								<p className="nfd-text-base nfd-text-[#030303] nfd-max-w-[540px]">
 									{ __(
-										"Choose a template based on your goals — whether you're launching a shop, blog, portfolio, or business site. We'll set up your WordPress site in no time — then it's your turn to make it truly yours with easy customizations.",
+										"We'll set up your WordPress site in no time — then it's your turn to make it truly yours with easy customizations.",
 										'wp-module-onboarding'
 									) }
 								</p>
@@ -208,22 +218,12 @@ const BlueprintsStep = () => {
 					{ isLoading ? (
 						<LoadingState />
 					) : (
-						<div className="nfd-flex nfd-flex-col nfd-gap-9">
+						<div className="nfd-flex nfd-flex-col nfd-gap-10">
 							<Tabs activeTab={ activeTab } />
 							{ renderBlueprints }
 						</div>
 					) }
 				</Container.Block>
-
-				{ ! sitegenHasFailed && (
-					<Container.Footer className="nfd-p-0">
-						<div className="nfd-flex nfd-justify-start nfd-border-t nfd-pt-8">
-							<Navigate toRoute="/" direction="backward" variant="secondary">
-								{ __( 'Back', 'wp-module-onboarding' ) }
-							</Navigate>
-						</div>
-					</Container.Footer>
-				) }
 			</Container>
 		</Step>
 	);
diff --git a/src/app/steps/Fork/ForkLinks.js b/src/app/steps/Fork/ForkLinks.js
index 84b01801d..64c937980 100644
--- a/src/app/steps/Fork/ForkLinks.js
+++ b/src/app/steps/Fork/ForkLinks.js
@@ -46,9 +46,56 @@ const ForkLinks = ( { variant } ) => {
 		}
 	};
 
+	/* const handleWPAdmin = ( e ) => {
+		e.preventDefault();
+		sendOnboardingEvent(
+			new OnboardingEvent(
+				ACTION_FORK_OPTION_SELECTED,
+				`WP_ADMIN|variant_${ variant }`
+			)
+		);
+		window.location.href = window.nfdOnboarding?.adminUrl || '/wp-admin';
+	}; */
+
+	/* const handleHostingPanel = ( e ) => {
+		e.preventDefault();
+		sendOnboardingEvent(
+			new OnboardingEvent(
+				ACTION_FORK_OPTION_SELECTED,
+				`HOSTING_PANEL|variant_${ variant }`
+			)
+		);
+		window.open( window.nfdOnboarding?.hostingPanelUrl || 'https://my.bluehost.com', '_blank' );
+	}; */
+
 	return (
 		<div className="nfd-flex nfd-flex-col nfd-items-center nfd-gap-4">
 			<MigrationLink />
+			{ /* Temporarily hidden - may be needed later.
+			<div className="nfd-flex nfd-items-center nfd-gap-4 mobile:nfd-flex-col mobile:nfd-gap-2">
+				<span className="nfd-text-content-default">
+					{ __( "I'm an expert, ", 'wp-module-onboarding' ) }
+					<button
+						type="button"
+						onClick={ handleWPAdmin }
+						className="nfd-text-primary nfd-no-underline nfd-bg-transparent nfd-border-none nfd-p-0 nfd-cursor-pointer nfd-inline"
+					>
+						{ __( 'take me to the WP Admin', 'wp-module-onboarding' ) }
+					</button>
+				</span>
+				<span className="nfd-text-content-default mobile:nfd-hidden">|</span>
+				<span className="nfd-text-content-default">
+					{ __( 'Go to ', 'wp-module-onboarding' ) }
+					<button
+						type="button"
+						onClick={ handleHostingPanel }
+						className="nfd-text-primary nfd-no-underline nfd-bg-transparent nfd-border-none nfd-p-0 nfd-cursor-pointer nfd-inline"
+					>
+						{ __( 'Hosting Panel', 'wp-module-onboarding' ) }
+					</button>
+				</span>
+			</div>
+			*/ }
 		</div>
 	);
 };
diff --git a/src/app/steps/Fork/ForkOptions.js b/src/app/steps/Fork/ForkOptions.js
index f202a7682..2d8cfab75 100644
--- a/src/app/steps/Fork/ForkOptions.js
+++ b/src/app/steps/Fork/ForkOptions.js
@@ -29,7 +29,7 @@ const ForkOptionButton = ( { label, toRoute, value, className, ...props } ) => {
 			direction="forward"
 			callback={ () => handleNext( value ) }
 			className={ classNames(
-				'nfd-group nfd-flex nfd-items-center nfd-gap-2.5 nfd-w-[60%] nfd-py-4 nfd-px-8 nfd-text-base nfd-font-semibold tablet:nfd-w-[90%]',
+				'nfd-group nfd-flex nfd-items-center nfd-gap-2.5 nfd-w-[60%] nfd-h-11 nfd-max-h-11 nfd-py-3 nfd-px-4 nfd-text-base nfd-font-semibold tablet:nfd-w-[90%] nfd-bg-black hover:nfd-bg-[#3858E9] nfd-transition-colors nfd-duration-300',
 				className
 			) }
 			{ ...props }
diff --git a/src/app/steps/Generating/GeneratingStep.js b/src/app/steps/Generating/GeneratingStep.js
index f49649a61..1b7ef3ab5 100644
--- a/src/app/steps/Generating/GeneratingStep.js
+++ b/src/app/steps/Generating/GeneratingStep.js
@@ -1,8 +1,8 @@
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState, useEffect } from '@wordpress/element';
 import { dispatch, useSelect } from '@wordpress/data';
 import { useNavigate } from 'react-router-dom';
 import { Container, Title } from '@newfold/ui-component-library';
-import { Motion, Orb, Step } from '@/components';
+import { BrandLoader, Motion, Step } from '@/components';
 import { nfdOnboardingStore } from '@/data/store';
 import { generateSite } from '@/utils/sitegen';
 import { ExperienceOptions } from './';
@@ -51,6 +51,7 @@ const GeneratingStep = () => {
 
 	/**
 	 * Whether to render the component or navigate a different step.
+	 *
 	 * @return {boolean} True if the component should render, false otherwise.
 	 */
 	const shouldRender = () => {
@@ -70,13 +71,9 @@ const GeneratingStep = () => {
 		if ( selectedExperienceLevel ) {
 			// Analytics: Experience Level Set
 			sendOnboardingEvent(
-				new OnboardingEvent(
-					ACTION_EXPERIENCE_LEVEL_SET,
-					selectedExperienceLevel,
-					{
-						source: 'quickstart',
-					}
-				)
+				new OnboardingEvent( ACTION_EXPERIENCE_LEVEL_SET, selectedExperienceLevel, {
+					source: 'quickstart',
+				} )
 			);
 		}
 
@@ -90,6 +87,7 @@ const GeneratingStep = () => {
 	 * Logic:
 	 * - If Sitegen has failed for the first time, restart the generation process to try again.
 	 * - If Sitegen has failed for the second time, navigate to the previews step to generate fallback pages.
+	 *
 	 * @return {void}
 	 */
 	const handleFailedSiteGeneration = () => {
@@ -138,12 +136,14 @@ const GeneratingStep = () => {
 		// If the site generation is complete and the user has selected an experience level or the timer has completed, advance to the next step.
 		if (
 			isSiteGenerationComplete &&
+			isReadyToAnimate &&
 			( selectedExperienceLevel || isTimerComplete )
 		) {
 			handleNext();
 		}
 	}, [
 		isSiteGenerationComplete,
+		isReadyToAnimate,
 		selectedExperienceLevel,
 		isTimerComplete,
 		handleNext,
@@ -182,20 +182,23 @@ const GeneratingStep = () => {
 						animate={ isReadyToAnimate ? { scale: 1, y: 0 } : { scale: 1.1, y: 100 } }
 						transition={ { ease: 'easeOut', delay: 2.2, duration: 0.8 } }
 					>
+						<div className="nfd-my-6 nfd-flex nfd-justify-center">
+							<BrandLoader />
+						</div>
 						<div className="nfd-flex nfd-flex-col nfd-items-center nfd-gap-5">
-							<Title className="nfd-text-3xl mobile:nfd-text-xl">
+							<Title className="nfd-text-[2.5rem] mobile:nfd-text-xl">
 								{ __( 'Building your website…', 'wp-module-onboarding' ) }
 							</Title>
-							<p className="nfd-text-[15px] nfd-text-content-primary mobile:nfd-text-tiny">
-								{ __( 'Hang tight while we create some wonderful options for you.', 'wp-module-onboarding' ) }
+							<p className="nfd-text-[18px] nfd-text-content-primary mobile:nfd-text-tiny">
+								{ __(
+									'Hang tight while we create some wonderful options for you.',
+									'wp-module-onboarding'
+								) }
 							</p>
 						</div>
-						<div className="nfd-my-14">
-							<Orb height="90px" />
-						</div>
 					</Motion>
 
-					<div className="nfd-flex nfd-flex-col nfd-max-w-[500px] nfd-mx-auto">
+					<div className="nfd-flex nfd-flex-col nfd-max-w-[500px] nfd-mx-auto nfd-mt-8">
 						<Motion
 							variants={ containerVariants }
 							initial="hidden"
@@ -203,7 +206,10 @@ const GeneratingStep = () => {
 						>
 							<Motion variants={ itemVariants }>
 								<p className="nfd-text-[14px] nfd-text-content-primary nfd-mb-8">
-									{ __( 'While we wait, let us know how familiar you are with WordPress, so we can tailor the experience to your needs:', 'wp-module-onboarding' ) }
+									{ __(
+										'While we wait, let us know how familiar you are with WordPress, so we can tailor the experience to your needs:',
+										'wp-module-onboarding'
+									) }
 								</p>
 							</Motion>
 							<Motion variants={ itemVariants }>
diff --git a/src/app/steps/Intake/IntakeStep.js b/src/app/steps/Intake/IntakeStep.js
index b85193cb3..a4da36995 100644
--- a/src/app/steps/Intake/IntakeStep.js
+++ b/src/app/steps/Intake/IntakeStep.js
@@ -113,13 +113,6 @@ const IntakeStep = () => {
 						>
 							{ __( 'Next', 'wp-module-onboarding' ) }
 						</Navigate>
-						<Navigate
-							toRoute="/"
-							direction="backward"
-							variant="secondary"
-						>
-							{ __( 'Back', 'wp-module-onboarding' ) }
-						</Navigate>
 					</Step.Actions>
 				</Container.Footer>
 			</Container>
diff --git a/src/app/steps/Logo/LogoStep.js b/src/app/steps/Logo/LogoStep.js
index d5dd97829..ba51f9324 100644
--- a/src/app/steps/Logo/LogoStep.js
+++ b/src/app/steps/Logo/LogoStep.js
@@ -34,14 +34,10 @@ const LogoStep = () => {
 			saveEditedEntityRecord( 'root', 'site' );
 
 			// Analytics: track the logo added event
-			trackOnboardingEvent(
-				new OnboardingEvent( ACTION_LOGO_ADDED )
-			);
+			trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_ADDED ) );
 		} else {
 			// Analytics: track the logo skipped event
-			trackOnboardingEvent(
-				new OnboardingEvent( ACTION_LOGO_SKIPPED )
-			);
+			trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_SKIPPED ) );
 		}
 	};
 
@@ -50,14 +46,11 @@ const LogoStep = () => {
 			<Container className="nfd-onboarding-step-container nfd-onboarding-step-logo">
 				<Container.Header
 					title={ __( 'Do you have a logo you would like to use?', 'wp-module-onboarding' ) }
-					description={ __( 'Browse to upload your logo, or drag and drop it below.', 'wp-module-onboarding' ) }
-					className="nfd-gap-2"
+					description={ __( 'Browse to upload it or drag and drop it', 'wp-module-onboarding' ) }
+					className="nfd-gap-2 nfd-text-center nfd-pb-16"
 				/>
-				<Container.Block separator={ false }>
-					<LogoUploadInput
-						isUploading={ isUploading }
-						setIsUploading={ setIsUploading }
-					/>
+				<Container.Block separator={ false } className="nfd-flex nfd-justify-center">
+					<LogoUploadInput isUploading={ isUploading } setIsUploading={ setIsUploading } />
 				</Container.Block>
 				<Container.Footer>
 					<Step.Actions>
@@ -69,14 +62,6 @@ const LogoStep = () => {
 						>
 							{ __( 'Next', 'wp-module-onboarding' ) }
 						</Navigate>
-						<Navigate
-							toRoute="/intake"
-							direction="backward"
-							variant="secondary"
-							disabled={ isUploading }
-						>
-							{ __( 'Back', 'wp-module-onboarding' ) }
-						</Navigate>
 					</Step.Actions>
 				</Container.Footer>
 			</Container>
diff --git a/src/app/steps/Logo/LogoUploadInput.js b/src/app/steps/Logo/LogoUploadInput.js
index 139487cb8..f22b0af49 100644
--- a/src/app/steps/Logo/LogoUploadInput.js
+++ b/src/app/steps/Logo/LogoUploadInput.js
@@ -1,12 +1,17 @@
+import { useState, useRef } from '@wordpress/element';
 import { dispatch, useSelect } from '@wordpress/data';
 import { uploadMedia, validateMimeType, validateFileSize } from '@wordpress/media-utils';
 import classNames from 'classnames';
-import { ImageImport, Label } from '@newfold/ui-component-library';
+import { Label, Spinner } from '@newfold/ui-component-library';
+import { SparklesIcon, CloudArrowUpIcon } from '@heroicons/react/24/outline';
 import { nfdOnboardingStore } from '@/data/store';
 import { OnboardingEvent, trackOnboardingEvent } from '@/utils/analytics/hiive';
 import { ACTION_LOGO_UPLOAD_FAILED } from '@/utils/analytics/hiive/constants';
 
 const LogoUploadInput = ( { isUploading, setIsUploading } ) => {
+	const fileInputRef = useRef( null );
+	const [ isDragging, setIsDragging ] = useState( false );
+
 	const [ error, setError ] = useState( {
 		status: false,
 		message: '',
@@ -74,7 +79,7 @@ const LogoUploadInput = ( { isUploading, setIsUploading } ) => {
 				if ( ! files[ 0 ]?.id ) {
 					setError( {
 						status: true,
-						message: __( "Failed to upload logo. Please try again.", 'wp-module-onboarding' ),
+						message: __( 'Failed to upload logo. Please try again.', 'wp-module-onboarding' ),
 					} );
 					setIsUploading( false );
 					return;
@@ -97,9 +102,7 @@ const LogoUploadInput = ( { isUploading, setIsUploading } ) => {
 				} );
 				setIsUploading( false );
 				// Analytics: track the logo upload failed event
-				trackOnboardingEvent(
-					new OnboardingEvent( ACTION_LOGO_UPLOAD_FAILED )
-				);
+				trackOnboardingEvent( new OnboardingEvent( ACTION_LOGO_UPLOAD_FAILED ) );
 			},
 		} );
 	};
@@ -110,44 +113,140 @@ const LogoUploadInput = ( { isUploading, setIsUploading } ) => {
 			id: null,
 			url: null,
 		} );
+		// Reset the file input
+		if ( fileInputRef.current ) {
+			fileInputRef.current.value = '';
+		}
+	};
+
+	const handleFileChange = ( e ) => {
+		const file = e.target.files?.[ 0 ];
+		if ( file ) {
+			handleUpload( file );
+		}
+	};
+
+	const handleDragOver = ( e ) => {
+		e.preventDefault();
+		setIsDragging( true );
+	};
+
+	const handleDragLeave = ( e ) => {
+		e.preventDefault();
+		setIsDragging( false );
+	};
+
+	const handleDrop = ( e ) => {
+		e.preventDefault();
+		setIsDragging( false );
+		const file = e.dataTransfer?.files?.[ 0 ];
+		if ( file ) {
+			handleUpload( file );
+		}
+	};
+
+	const handleBrowseClick = () => {
+		fileInputRef.current?.click();
 	};
 
 	return (
-		<div className="nfd-onboarding-logo-upload nfd-flex nfd-flex-col nfd-gap-2">
-			<Label htmlFor="nfd-onboarding-logo-input">
-				{ __( 'Site logo', 'wp-module-onboarding' ) }
-			</Label>
-			<ImageImport
-				key={ logo?.url || 'no-logo' }
+		<div className="nfd-onboarding-logo-upload nfd-flex nfd-flex-col nfd-gap-10 nfd-w-full nfd-px-4 sm:nfd-w-[600px] sm:nfd-px-0 lg:nfd-w-[800px]">
+			<div className="nfd-flex nfd-items-center nfd-justify-between">
+				<Label
+					htmlFor="nfd-onboarding-logo-input"
+					className="nfd-text-base nfd-text-content-primary nfd-m-0"
+				>
+					{ __( 'Site Logo:', 'wp-module-onboarding' ) }
+				</Label>
+				{ /* Remove AI logo generation button for now until we implement the functionality
+				<button
+					type="button"
+					className="nfd-flex nfd-items-center nfd-gap-1.5 nfd-text-[#3B82F6] nfd-text-base nfd-font-semibold hover:nfd-underline nfd-bg-transparent nfd-border-0 nfd-p-0 nfd-cursor-pointer"
+					onClick={ () => {
+						// TODO: Implement AI logo generation
+					} }
+				>
+					<SparklesIcon className="nfd-w-4 nfd-h-4 nfd-stroke-2" />
+					{ __( 'Create with AI', 'wp-module-onboarding' ) }
+				</button> */ }
+			</div>
+			<input
+				ref={ fileInputRef }
+				type="file"
 				id="nfd-onboarding-logo-input"
 				name="nfd-onboarding-logo-input"
-				imageInputVariant="rounded"
-				previewImage={ logo?.url || null }
-				dropLabel={ __( 'accepted: .png, .jpg, .jpeg (5MB max)', 'wp-module-onboarding' ) }
-				buttonText={ __( 'Browse', 'wp-module-onboarding' ) }
-				onChange={ ( { file } ) => handleUpload( file ) }
-				onDrop={ ( e ) => {
-					handleUpload( e.dataTransfer.files[ 0 ] );
-				} }
-				onReset={ handleReset }
+				accept="image/jpeg,image/pjpeg,image/png"
+				onChange={ handleFileChange }
+				className="nfd-hidden"
 				disabled={ isUploading }
-				isLoading={ isUploading }
-				className={ classNames(
-					'[&_.nfd-drop-zone]:nfd-border-solid',
-					'[&_.nfd-drop-zone]:nfd-border',
-					'[&_.nfd-drop-zone]:nfd-rounded-lg',
-					'[&_.nfd-drop-zone]:nfd-p-4',
-					'[&_.nfd-image-import__drop-label]:nfd-text-content-primary',
-					'[&_.nfd-image-import__drop-label]:nfd-text-[14px]',
-					{
-						'[&_.nfd-drop-zone]:nfd-border-red-500': error.status,
-						'[&_.nfd-drop-zone]:nfd-bg-red-50': error.status,
-					}
-				) }
 			/>
-			{ error.status && (
-				<p className="nfd-text-red-500">{ error.message }</p>
+			{ logo?.url ? (
+				<div className="nfd-relative nfd-w-full nfd-min-h-[250px] nfd-flex nfd-items-center nfd-justify-center nfd-bg-white nfd-rounded-lg nfd-border-2 nfd-border-dashed nfd-border-[#D1D5DB] nfd-p-4">
+					<img
+						src={ logo.url }
+						alt="Logo"
+						className="nfd-max-w-full nfd-max-h-[200px] nfd-object-contain"
+					/>
+					<button
+						type="button"
+						onClick={ handleReset }
+						className="nfd-absolute nfd-top-2 nfd-right-2 nfd-text-red-500 nfd-text-sm nfd-font-medium hover:nfd-underline nfd-bg-white nfd-px-3 nfd-py-1 nfd-rounded-md nfd-border nfd-border-gray-300"
+					>
+						{ __( 'Remove', 'wp-module-onboarding' ) }
+					</button>
+				</div>
+			) : (
+				<div
+					onDragOver={ handleDragOver }
+					onDragLeave={ handleDragLeave }
+					onDrop={ handleDrop }
+					className={ classNames(
+						'nfd-flex nfd-flex-col nfd-items-center nfd-justify-center nfd-gap-4',
+						'nfd-w-full nfd-min-h-[250px] nfd-p-12',
+						'nfd-bg-white nfd-rounded-lg nfd-border-2 nfd-border-dashed',
+						'nfd-cursor-pointer nfd-transition-colors',
+						{
+							'nfd-border-[#D1D5DB]': ! isDragging && ! error.status,
+							'nfd-border-[#3B82F6] nfd-bg-blue-50': isDragging && ! error.status,
+							'nfd-border-red-500 nfd-bg-red-50': error.status,
+						}
+					) }
+					onClick={ handleBrowseClick }
+					role="button"
+					tabIndex={ 0 }
+					onKeyDown={ ( e ) => {
+						if ( e.key === 'Enter' || e.key === ' ' ) {
+							e.preventDefault();
+							handleBrowseClick();
+						}
+					} }
+				>
+					{ isUploading ? (
+						<Spinner />
+					) : (
+						<>
+							<CloudArrowUpIcon className="nfd-w-12 nfd-h-12 nfd-text-[#9CA3AF]" />
+							<p className="nfd-text-base nfd-font-normal nfd-text-content-primary nfd-m-0">
+								{ __( 'Choose a file or drag & drop it here', 'wp-module-onboarding' ) }
+							</p>
+							<p className="nfd-text-sm nfd-text-[#6B7280] nfd-text-center nfd-m-0">
+								{ __( 'JPG, PNG, JPEG & SVG formats, up to 5MB', 'wp-module-onboarding' ) }
+							</p>
+							<button
+								type="button"
+								onClick={ ( e ) => {
+									e.stopPropagation();
+									handleBrowseClick();
+								} }
+								className="nfd-px-6 nfd-py-2.5 nfd-border nfd-border-[#3B82F6] nfd-text-[#3B82F6] nfd-bg-white nfd-rounded-md nfd-text-sm nfd-font-medium hover:nfd-bg-[#3B82F6] hover:nfd-text-white nfd-transition-colors"
+							>
+								{ __( 'Browse File', 'wp-module-onboarding' ) }
+							</button>
+						</>
+					) }
+				</div>
 			) }
+			{ error.status && <p className="nfd-text-red-500 nfd-text-sm nfd-mt-2">{ error.message }</p> }
 		</div>
 	);
 };
diff --git a/src/app/steps/Previews/Preview.js b/src/app/steps/Previews/Preview.js
index 3c84f7d96..3cc537e6d 100644
--- a/src/app/steps/Previews/Preview.js
+++ b/src/app/steps/Previews/Preview.js
@@ -8,6 +8,7 @@ import { ACTION_HOMEPAGE_PREVIEW_FAILED } from '@/utils/analytics/hiive/constant
 const Preview = ( {
 	preview,
 	onPreview,
+	siteNumber,
 } ) => {
 	const [ isLoading, setIsLoading ] = useState( true );
 	const [ isError, setIsError ] = useState( false );
@@ -22,6 +23,7 @@ const Preview = ( {
 
 	/**
 	 * Parse the sitegen preview content to make it saveable by the backend.
+	 *
 	 * @return {string} The preview content.
 	 */
 	const getPreviewContent = () => {
@@ -40,6 +42,7 @@ const Preview = ( {
 
 	/**
 	 * Custom css to inject into the preview.
+	 *
 	 * @return {string} Custom styles.
 	 */
 	const getCustomStyles = () => {
@@ -145,15 +148,16 @@ const Preview = ( {
 			frameName={ preview.slug }
 			frameSrc={ iframeSrc }
 			onFrameLoad={ iframeOnLoad }
-			width="300px"
-			height="360px"
-			viewportWidth={ 1600 }
+			width="100%"
+			height="454px"
+			viewportWidth={ 1400 }
 			viewportHeight={ '540%' }
-			viewportScale={ 0.187 }
+			viewportScale={ 0.28 }
 			overlay={ true }
 			isLoading={ isLoading }
 			isError={ isError }
 			onPreview={ onPreview }
+			title={ `Site #${ siteNumber }` }
 		/>
 	);
 };
diff --git a/src/app/steps/Previews/PreviewsStep.js b/src/app/steps/Previews/PreviewsStep.js
index 36857421d..0e371e33a 100644
--- a/src/app/steps/Previews/PreviewsStep.js
+++ b/src/app/steps/Previews/PreviewsStep.js
@@ -51,7 +51,7 @@ const PreviewsStep = () => {
 	const renderPreviews = () => {
 		const previews = homepages;
 		return Object.keys( previews ).map( ( slug, idx ) => {
-			return <Preview key={ idx } preview={ previews[ slug ] } onPreview={ handlePreview } />;
+			return <Preview key={ idx } preview={ previews[ slug ] } onPreview={ handlePreview } siteNumber={ idx + 1 } />;
 		} );
 	};
 
@@ -70,18 +70,18 @@ const PreviewsStep = () => {
 			);
 		}
 		return __(
-			'Here are three unique designs for you to start with. Pick your favorite to customize it!',
+			'Here are 3 unique designs for you to start with. Pick your favorite to customize it!',
 			'wp-module-onboarding'
 		);
 	};
 
 	return (
 		<Step>
-			<Container className="nfd-onboarding-step-container nfd-onboarding-step-previews nfd-min-w-[948px] nfd-max-w-[948px] tablet:nfd-min-w-[90%] tablet:nfd-max-w-[90%]">
+			<Container className="nfd-onboarding-step-container nfd-onboarding-step-previews nfd-min-w-[1220px] nfd-max-w-[1220px] tablet:nfd-min-w-[90%] tablet:nfd-max-w-[90%]">
 				<Container.Header
 					title={ getStepTitle() }
 					description={ getStepDescription() }
-					className="nfd-gap-2"
+					className="nfd-gap-2 nfd-text-center"
 				/>
 				<Container.Block className="tablet:nfd-w-screen">
 					<div className="nfd-grid nfd-grid-cols-3 nfd-gap-6 tablet:!nfd-grid-cols-[repeat(3,minmax(300px,1fr))] tablet:nfd-overflow-x-auto tablet:-nfd-ml-[5%] tablet:nfd-pl-[5%] tablet:nfd-mr-[5%] tablet:nfd-pr-[5%]">
diff --git a/src/app/styles/tailwind.css b/src/app/styles/tailwind.css
index 2273cd98a..3a143b38c 100644
--- a/src/app/styles/tailwind.css
+++ b/src/app/styles/tailwind.css
@@ -11,12 +11,14 @@
 		/* Onboarding step container */
 		.nfd-onboarding-step-container {
 			@apply
-			nfd-min-w-[600px]
-			nfd-max-w-[600px]
+			nfd-min-w-[800px]
+			nfd-max-w-[800px]
 			nfd-bg-transparent
 			nfd-shadow-none
 			nfd-rounded-none
 			nfd-mx-auto
+			tablet:!nfd-min-w-[90%]
+			tablet:!nfd-max-w-[90%]
 			mobile:!nfd-min-w-[90%]
 			mobile:!nfd-max-w-[90%];
 
@@ -58,7 +60,8 @@
 		.nfd-label {
 			@apply
 			nfd-text-content-primary
-			nfd-text-[15px];
+			nfd-text-[15px]
+			nfd-font-semibold;
 		}
 	}
 }