diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
index 14e54db71..0c5ef008b 100644
--- a/src/OnboardingSPA/components/CardWithOptions/index.js
+++ b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -1,49 +1,18 @@
 import { memo } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
+import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading';
 
-const CardWithOptions = ( { title, options, skip, callback } ) => {
-	const buildOptions = () => {
+const CardWithOptions = ( { title, options, selection, callback } ) => {
+	const buildCardOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
-				<div
+				<OptionWithHeadingSubHeading
 					key={ idx }
-					role="button"
-					tabIndex={ 0 }
-					className={ 'nfd-sg-card__data__option' }
-					onClick={ () => {
-						if ( callback && typeof callback === 'function' ) {
-							callback( idx + 1 );
-						}
-					} }
-					onKeyDown={ () => {
-						if ( callback && typeof callback === 'function' ) {
-							callback( idx + 1 );
-						}
-					} }
-				>
-					<div className={ 'nfd-sg-card__data__option__wrapper' }>
-						<div className={ 'nfd-sg-card__data__option__left' }>
-							<div
-								className={
-									'nfd-sg-card__data__option__left_top'
-								}
-							>
-								{ data.title }
-							</div>
-							<div
-								className={
-									'nfd-sg-card__data__option__left_bottom'
-								}
-							>
-								{ data.desc }
-							</div>
-						</div>
-						<Icon
-							className={ 'nfd-sg-card__data__option__right' }
-							icon={ chevronRight }
-						/>
-					</div>
-				</div>
+					idx={ idx }
+					title={ data.title }
+					desc={ data.desc }
+					isSelected={ data.key === selection }
+					callback={ callback }
+				/>
 			);
 		} );
 	};
@@ -51,24 +20,7 @@ const CardWithOptions = ( { title, options, skip, callback } ) => {
 	return (
 		<div className={ 'nfd-sg-card' }>
 			<div className={ 'nfd-sg-card__title' }>{ title }</div>
-			<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
-			<div
-				role="button"
-				tabIndex={ 0 }
-				className={ 'nfd-sg-card__skip' }
-				onClick={ () => {
-					if ( callback && typeof callback === 'function' ) {
-						callback( -1 );
-					}
-				} }
-				onKeyDown={ () => {
-					if ( callback && typeof callback === 'function' ) {
-						callback( -1 );
-					}
-				} }
-			>
-				{ skip }
-			</div>
+			<div className={ 'nfd-sg-card__data' }>{ buildCardOptions() }</div>
 		</div>
 	);
 };
diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
index b12d46074..92d32f151 100644
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -28,64 +28,5 @@ $background-color: var(--nfd-onboarding-card-background);
 
 	&__data {
 		margin: 12px;
-
-		&__option {
-
-			&__wrapper {
-				display: flex;
-				cursor: pointer;
-				margin: 16px 4px;
-				align-items: center;
-				border-radius: 8px;
-				padding: 16px 12px 16px 12px;
-				justify-content: space-between;
-				transition: background-color 400ms ease-in-out;
-
-				&:hover {
-					background-color: var(--nfd-onboarding-hover);
-				}
-			}
-
-			&:not(:last-child) {
-				border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
-			}
-
-			&__left_top {
-				color: var(--nfd-onboarding-primary);
-				font-size: 15px;
-				font-weight: 500;
-				margin-bottom: 7px;
-				line-height: 24px;
-			}
-
-			&__left_bottom {
-				color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);
-
-				font-size: 14px;
-				font-weight: 300;
-			}
-
-			&__right {
-				fill: var(--nfd-onboarding-primary);
-				transition: all 200ms ease-in-out;
-
-				&:hover {
-					transform: scale(1.1);
-				}
-			}
-		}
-	}
-
-	&__skip {
-		cursor: pointer;
-		text-align: end;
-		margin: 0 20px 6px 20px;
-		transition: color 200ms ease-in-out;
-		color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
-		font-weight: 500;
-
-		&:hover {
-			color: var(--nfd-onboarding-primary);
-		}
 	}
 }
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
index 250061aa2..3e9a0b827 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
@@ -27,6 +27,9 @@ const NavPrimary = () => {
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
 					{ topSteps.map( ( step ) => {
+						if ( false === step.drawerNavigation ) {
+							return false;
+						}
 						return (
 							<Tooltip
 								key={ step.path }
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
index 135f8b1f4..23641f5d1 100644
--- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
@@ -99,6 +99,10 @@
 					text-overflow: ellipsis;
 					text-wrap: nowrap;
 					overflow: hidden;
+
+					@media (max-width: #{ ($break-mobile) }) {
+						width: 150px;
+					}
 				}
 			}
 
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
index 94cd18a97..90027c7a6 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { memo, useEffect, useState } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 
-const SiteGenLoader = ( { autoNavigate = false } ) => {
+const SiteGenLoader = ( { customNavPercentage, watcher = null } ) => {
 	let statusIdx = 0;
 	const content = getContents();
 	const navigate = useNavigate();
@@ -41,12 +41,15 @@ const SiteGenLoader = ( { autoNavigate = false } ) => {
 	}, [ currentData?.sitegen?.siteGenMetaStatus?.currentStatus ] );
 
 	useEffect( () => {
-		if ( percentage === 100 ) {
-			if ( nextStep && autoNavigate ) {
+		if ( percentage === customNavPercentage ) {
+			if ( nextStep ) {
+				if ( watcher !== null && watcher === false ) {
+					return;
+				}
 				navigate( nextStep.path );
 			}
 		}
-	}, [ percentage ] );
+	}, [ percentage, watcher ] );
 
 	return (
 		<div className={ 'nfd-sg-loader' }>
diff --git a/src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
new file mode 100644
index 000000000..cc3ac3bc6
--- /dev/null
+++ b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { memo } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const OptionWithHeadingSubHeading = ( {
+	idx,
+	title,
+	desc,
+	isSelected,
+	callback,
+} ) => {
+	return (
+		<div
+			key={ idx }
+			role="button"
+			tabIndex={ 0 }
+			className={ 'nfd__option_heading_subheading' }
+			onClick={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+			onKeyDown={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+		>
+			<div
+				className={ classNames(
+					'nfd__option_heading_subheading__wrapper',
+					isSelected &&
+						'nfd__option_heading_subheading__wrapper--selected'
+				) }
+			>
+				<div className={ 'nfd__option_heading_subheading__left' }>
+					<div
+						className={ 'nfd__option_heading_subheading__left_top' }
+					>
+						{ title }
+					</div>
+					<div
+						className={
+							'nfd__option_heading_subheading__left_bottom'
+						}
+					>
+						{ desc }
+					</div>
+				</div>
+				<Icon
+					className={ 'nfd__option_heading_subheading__right' }
+					icon={ chevronRight }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default memo( OptionWithHeadingSubHeading );
diff --git a/src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
new file mode 100644
index 000000000..5e5d6a8d6
--- /dev/null
+++ b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
@@ -0,0 +1,47 @@
+$background-color: var(--nfd-onboarding-card-background);
+
+.nfd__option_heading_subheading {
+
+	&__wrapper {
+		display: flex;
+		cursor: pointer;
+		margin: 16px 4px;
+		align-items: center;
+		border-radius: 8px;
+		padding: 16px 12px 16px 12px;
+		justify-content: space-between;
+		transition: background-color 400ms ease-in-out;
+
+		&--selected {
+			background-color: var(--nfd-onboarding-hover);
+		}
+	}
+
+	&:not(:last-child) {
+		border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
+	}
+
+	&__left_top {
+		color: var(--nfd-onboarding-primary);
+		font-size: 15px;
+		font-weight: 500;
+		margin-bottom: 7px;
+		line-height: 24px;
+	}
+
+	&__left_bottom {
+		color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);
+
+		font-size: 14px;
+		font-weight: 300;
+	}
+
+	&__right {
+		fill: var(--nfd-onboarding-primary);
+		transition: all 200ms ease-in-out;
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+}
diff --git a/src/OnboardingSPA/data/models/Step.js b/src/OnboardingSPA/data/models/Step.js
index e532f6002..cebaac1bf 100644
--- a/src/OnboardingSPA/data/models/Step.js
+++ b/src/OnboardingSPA/data/models/Step.js
@@ -8,6 +8,7 @@ export class Step {
 		sidebars,
 		header,
 		data,
+		drawerNavigation,
 	} ) {
 		this.path = path;
 		this.title = title;
@@ -17,5 +18,6 @@ export class Step {
 		this.sidebars = sidebars;
 		this.data = data;
 		this.header = header;
+		this.drawerNavigation = drawerNavigation ?? true;
 	}
 }
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js
index 87bb72cad..170bf96e8 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js
@@ -38,7 +38,7 @@ const SiteGenBuilding = () => {
 					</div>
 				</div>
 				<div className="site-gen__building_loader__overlay">
-					<SiteGenLoader autoNavigate={ true } />
+					<SiteGenLoader customNavPercentage={ 100 } />
 				</div>
 			</CommonLayout>
 		</SitegenAiStateHandler>
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
index 19882414a..3afd24df4 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
@@ -121,6 +121,7 @@ const TitleContent = memo(
 							onChange={ handleOnChange }
 						/>
 						<Icon
+							className="nfd-onboarding-header__center-dropdown_icon"
 							icon={ chevronDown }
 							onClick={ onToggle }
 							onKeyDown={ ( event ) => {
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/contents.js b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
index 246dbb06e..5d0f92a0a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
@@ -8,28 +8,27 @@ const getContents = () => {
 		),
 		options: [
 			{
+				key: 1,
 				title: __( 'Beginner', 'wp-module-onboarding' ),
 				desc: __(
-					'First time here, where am I?',
+					'First time building a website using WordPress',
 					'wp-module-onboarding'
 				),
 			},
 			{
-				title: __( 'Used it some', 'wp-module-onboarding' ),
+				key: 2,
+				title: __( 'Intermediate', 'wp-module-onboarding' ),
 				desc: __(
-					"I'll ask for help when I need it",
+					'I’ve built a few sites for myself or others',
 					'wp-module-onboarding'
 				),
 			},
 			{
+				key: 3,
 				title: __( 'Expert', 'wp-module-onboarding' ),
-				desc: __(
-					"Stay out of my way, I know what I'm doing",
-					'wp-module-onboarding'
-				),
+				desc: __( 'I do this frequently', 'wp-module-onboarding' ),
 			},
 		],
-		skip: __( 'Skip', 'wp-module-onboarding' ),
 	};
 };
 
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index 0e340ee47..198b7e60a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
@@ -11,17 +10,14 @@ import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
 
 const SiteGenExperience = () => {
-	const navigate = useNavigate();
 	const content = getContents();
 	// Index of the selection user makes
-	/* eslint-disable no-unused-vars */
-	const [ selection, setSelection ] = useState();
+	const [ selection, setSelection ] = useState( 0 );
 
-	const { currentData, nextStep } = useSelect( ( select ) => {
+	const { currentData } = useSelect( ( select ) => {
 		return {
 			currentData:
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
-			nextStep: select( nfdOnboardingStore ).getNextStep(),
 		};
 	} );
 
@@ -48,25 +44,25 @@ const SiteGenExperience = () => {
 
 	const checkAndNavigate = ( idx ) => {
 		// 0 - Not Selected
-		// 1-2 Options
+		// 1-3 Options
 		// -1 Skip
 		setSelection( idx );
 		currentData.sitegen.experience.level = idx;
 		setCurrentOnboardingData( currentData );
-		if ( nextStep ) {
-			navigate( nextStep.path );
-		}
 	};
 
 	return (
 		<SitegenAiStateHandler>
 			<CommonLayout isCentered>
 				<div className={ 'nfd-sg-experience-level' }>
-					<SiteGenLoader />
+					<SiteGenLoader
+						watcher={ selection !== 0 ? true : false }
+						customNavPercentage={ 50 }
+					/>
 					<CardWithOptions
 						title={ content.heading }
 						options={ content.options }
-						skip={ content.skip }
+						selection={ selection }
 						callback={ checkAndNavigate }
 					/>
 				</div>
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
index fed3f2747..b2e58d1df 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -14,6 +14,7 @@ import RegeneratingSiteCard from './regeneratingCard';
 import { getHomepages, regenerateHomepage } from '../../../utils/api/siteGen';
 import { getGlobalStyles } from '../../../utils/api/themes';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
+import Animate from '../../../components/Animate';
 
 const SiteGenPreview = () => {
 	const navigate = useNavigate();
@@ -241,16 +242,20 @@ const SiteGenPreview = () => {
 		<SitegenAiStateHandler>
 			<CommonLayout className="nfd-onboarding-step--site-gen__preview">
 				<div className="nfd-onboarding-step--site-gen__preview__container">
-					<div className="nfd-onboarding-step--site-gen__preview__container__heading">
-						<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
-							{ content.heading }
-						</p>
-					</div>
-					<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
-						<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
-							{ content.subheading }
-						</p>
-					</div>
+					{ ! isPreviewLoading && (
+						<Animate type={ 'fade-in' }>
+							<div className="nfd-onboarding-step--site-gen__preview__container__heading">
+								<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
+									{ content.heading }
+								</p>
+							</div>
+							<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
+								<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
+									{ content.subheading }
+								</p>
+							</div>
+						</Animate>
+					) }
 				</div>
 				<div className="nfd-onboarding-step--site-gen__preview__options">
 					{ buildPreviews() }
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
index 70fc27b7e..bb5d970f2 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
@@ -9,6 +9,7 @@
 		flex-wrap: wrap;
 		max-width: 500px;
 		padding-top: 32px;
+		min-height: 160px;
 		margin-bottom: 15px;
 
 		&__heading {
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
index db0365abc..d2136efa2 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
@@ -60,6 +60,7 @@ const SiteGenSiteLogo = () => {
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
 		if ( currentData.data.siteLogo?.id !== 0 ) {
+			setIsFooterNavAllowed( true );
 			return setSiteLogo( currentData.data.siteLogo );
 		}
 		setIsFooterNavAllowed( false );
diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
index 3c8633f65..4889439c6 100644
--- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
@@ -24,6 +24,7 @@ const SiteGenSiteSocialMedia = () => {
 		setSidebarActiveView,
 		setHeaderActiveView,
 		setDrawerActiveView,
+		setIsFooterNavAllowed,
 		updateSiteGenErrorStatus,
 	} = useDispatch( nfdOnboardingStore );
 
@@ -49,6 +50,7 @@ const SiteGenSiteSocialMedia = () => {
 	};
 
 	useEffect( () => {
+		setIsFooterNavAllowed( connected );
 		if ( interacted && connected ) {
 			navigate( nextStep.path );
 		}
diff --git a/src/OnboardingSPA/steps/TheFork/step.js b/src/OnboardingSPA/steps/TheFork/step.js
index 143f79615..d2f833d37 100644
--- a/src/OnboardingSPA/steps/TheFork/step.js
+++ b/src/OnboardingSPA/steps/TheFork/step.js
@@ -7,9 +7,10 @@ const StepTheFork = lazy( () => import( './index' ) );
 
 export const stepTheFork = new Step( {
 	path: '/wp-setup/step/fork',
-	title: __( 'Page Layouts', 'wp-module-onboarding' ),
+	title: __( 'The Fork', 'wp-module-onboarding' ),
 	Component: StepTheFork,
 	icon: copy,
+	drawerNavigation: false,
 	sidebars: {
 		LearnMore: {
 			SidebarComponents: [],
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 4b00aa040..2921e45f8 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -56,6 +56,7 @@
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/ToggleDarkMode/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
+@import "../components/OptionWithHeadingSubHeading/stylesheet";
 @import "../components/CardWithOptions/stylesheet";
 @import "../components/Loaders/SiteGenLoader/stylesheet";
 @import "../components/Footer/stylesheet";