diff --git a/client/assets/images/icons/close-icon.svg b/client/assets/images/icons/close-icon.svg
new file mode 100644
index 0000000000000..15f68d2e4f891
--- /dev/null
+++ b/client/assets/images/icons/close-icon.svg
@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><path d="M11.192 9.071l7.779-7.778a1.5 1.5 0 0 1 2.12 2.121l-7.777 7.778 7.778 7.779a1.5 1.5 0 1 1-2.121 2.12l-7.779-7.777-7.778 7.778a1.5 1.5 0 1 1-2.121-2.121l7.778-7.779-7.778-7.778a1.5 1.5 0 0 1 2.121-2.121l7.778 7.778z" fill="#FFF" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/client/components/hundred-year-loader-view.tsx b/client/components/hundred-year-loader-view.tsx
index 1e23eeca451cc..d8f0c4783b5de 100644
--- a/client/components/hundred-year-loader-view.tsx
+++ b/client/components/hundred-year-loader-view.tsx
@@ -8,6 +8,7 @@ const DESKTOP_EARTH_LOOP_URL = 'https://wpcom.files.wordpress.com/2023/09/earth-
 type LoaderProps = {
 	isMobile: boolean;
 	loadingText: TranslateResult;
+	hideVideoContainer?: boolean;
 };
 
 const FullPageContainer = styled.div< { isMobile: boolean } >`
@@ -51,7 +52,7 @@ export const VideoPreload = memo( ( { isMobile }: { isMobile: boolean } ) =>
 	)
 );
 
-function VideoLoader( { isMobile, loadingText }: LoaderProps ) {
+function VideoLoader( { isMobile, loadingText, hideVideoContainer }: LoaderProps ) {
 	const videoObject = useRef< HTMLVideoElement | null >( null );
 
 	const FullPageVideoContainer = styled( FullPageContainer )< { isMobile: boolean } >`
@@ -65,8 +66,9 @@ function VideoLoader( { isMobile, loadingText }: LoaderProps ) {
 			opacity: 25%;
 		}
 	`;
-	return (
-		<FullPageVideoContainer isMobile={ isMobile }>
+
+	const videoElement = (
+		<>
 			{ isMobile ? (
 				<video
 					ref={ videoObject }
@@ -92,7 +94,15 @@ function VideoLoader( { isMobile, loadingText }: LoaderProps ) {
 					loop
 				/>
 			) }
-			<h1 className="wp-brand-font">{ loadingText }</h1>
+		</>
+	);
+
+	return hideVideoContainer ? (
+		videoElement
+	) : (
+		<FullPageVideoContainer isMobile={ isMobile }>
+			{ videoElement }
+			{ !! loadingText && <h1 className="wp-brand-font">{ loadingText }</h1> }
 		</FullPageVideoContainer>
 	);
 }
diff --git a/client/landing/stepper/declarative-flow/hundred-year-plan.ts b/client/landing/stepper/declarative-flow/hundred-year-plan.ts
index 3b7f9149bc144..705942db36890 100644
--- a/client/landing/stepper/declarative-flow/hundred-year-plan.ts
+++ b/client/landing/stepper/declarative-flow/hundred-year-plan.ts
@@ -39,11 +39,6 @@ const HundredYearPlanFlow: Flow = {
 							asyncComponent: () =>
 								import( './internals/steps-repository/hundred-year-plan-diy-or-difm' ),
 						},
-						{
-							slug: 'schedule-appointment',
-							asyncComponent: () =>
-								import( './internals/steps-repository/hundred-year-plan-schedule-appointment' ),
-						},
 						{
 							slug: 'thank-you',
 							asyncComponent: () =>
@@ -127,11 +122,9 @@ const HundredYearPlanFlow: Flow = {
 				case 'diy-or-difm':
 					if ( 'diy' === providedDependencies?.diyOrDifmChoice ) {
 						return navigate( hasSite ? 'new-or-existing-site' : 'setup' );
+					} else if ( providedDependencies?.nextStep === 'thank-you' ) {
+						return navigate( 'thank-you' );
 					}
-					// TODO: add VIP flow
-					return navigate( 'schedule-appointment' );
-				case 'schedule-appointment':
-					return navigate( 'thank-you' );
 				case 'new-or-existing-site':
 					if ( 'new-site' === providedDependencies?.newExistingSiteChoice ) {
 						return navigate( 'setup' );
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendly-widget/use-calendly-widget.ts b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendly-widget/use-calendly-widget.ts
new file mode 100644
index 0000000000000..e2761f7306fc7
--- /dev/null
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendly-widget/use-calendly-widget.ts
@@ -0,0 +1,119 @@
+import { useCallback, useEffect } from 'react';
+
+const CALENDLY_SCRIPT_URL = 'https://assets.calendly.com/assets/external/widget.js';
+
+declare global {
+	interface Window {
+		Calendly: any;
+	}
+}
+
+type CalendlyPrefillData = {
+	name?: string;
+	email?: string;
+	// Add other prefill fields as needed
+};
+
+type CalendlyProps = {
+	url: string;
+	id?: string;
+	prefill?: CalendlyPrefillData;
+	hideLandingPageDetails?: boolean;
+	hideEventTypeDetails?: boolean;
+	hideGdprBanner?: boolean;
+	onSchedule?: () => void;
+	onCalendlyViewed?: () => void;
+};
+
+function isCalendlyEvent( e: MessageEvent ): boolean {
+	return (
+		e.origin === 'https://calendly.com' && e.data.event && e.data.event.indexOf( 'calendly.' ) === 0
+	);
+}
+
+export function useCalendlyWidget( props: CalendlyProps ) {
+	const {
+		url,
+		prefill,
+		hideLandingPageDetails,
+		hideEventTypeDetails,
+		hideGdprBanner,
+		onSchedule,
+		onCalendlyViewed,
+	} = props;
+
+	/**
+	 * Load the Calendly <script>
+	 */
+	const loadCalendlyScript = useCallback( () => {
+		// Check if the script is already loaded
+		if ( ! document.querySelector( `script[src="${ CALENDLY_SCRIPT_URL }"]` ) ) {
+			const script = document.createElement( 'script' );
+			script.src = CALENDLY_SCRIPT_URL;
+			script.async = true;
+			document.body.appendChild( script );
+		}
+	}, [ CALENDLY_SCRIPT_URL ] );
+
+	/**
+	 * Remove the Calendly <script>
+	 */
+	const removeCalendlyScript = useCallback( () => {
+		const existingScript = document.querySelector( `script[src="${ CALENDLY_SCRIPT_URL }"]` );
+		existingScript?.remove();
+	}, [ CALENDLY_SCRIPT_URL ] );
+
+	/**
+	 * Load the Calendly <script> on mount and remove it on unmount
+	 */
+	useEffect( () => {
+		loadCalendlyScript();
+		return removeCalendlyScript;
+	}, [ url ] );
+
+	/**
+	 * Listen for Calendly events
+	 */
+	useEffect( () => {
+		const handleMessage = ( e: MessageEvent ) => {
+			if ( isCalendlyEvent( e ) && e.data.event === 'calendly.event_scheduled' ) {
+				onSchedule?.();
+			} else if ( isCalendlyEvent( e ) && e.data.event === 'calendly.event_type_viewed' ) {
+				onCalendlyViewed?.();
+			}
+		};
+
+		window.addEventListener( 'message', handleMessage );
+		return () => window.removeEventListener( 'message', handleMessage );
+	}, [ onSchedule, onCalendlyViewed ] );
+
+	/**
+	 * Open the Calendly popup widget
+	 */
+	const openCalendlyPopup = useCallback( () => {
+		const queryParams = new URLSearchParams();
+
+		queryParams.set( 'primary_color', '000000' );
+		queryParams.set( 'hide_gdpr_banner', hideGdprBanner ? '1' : '0' );
+		queryParams.set( 'hide_event_type_details', hideEventTypeDetails ? '1' : '0' );
+		queryParams.set( 'hide_landing_page_details', hideLandingPageDetails ? '1' : '0' );
+
+		window?.Calendly?.initPopupWidget( {
+			url: `https://calendly.com/${ url }?${ queryParams.toString() }`,
+			prefill: prefill || {},
+			utm: {},
+		} );
+	}, [ url, prefill, hideLandingPageDetails, hideEventTypeDetails, hideGdprBanner ] );
+
+	/**
+	 * Close the Calendly popup widget
+	 */
+	const closeCalendlyPopup = useCallback( () => {
+		window?.Calendly?.closePopupWidget();
+	}, [ url ] );
+
+	return {
+		openCalendlyPopup,
+		closeCalendlyPopup,
+	};
+}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx
deleted file mode 100644
index 627c6ac05e2a3..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-
-const CALENDLY_SCRIPT_URL = 'https://assets.calendly.com/assets/external/widget.js';
-
-declare global {
-	interface Window {
-		Calendly: any;
-	}
-}
-
-type CalendlyPrefillData = {
-	name?: string;
-	email?: string;
-	// Add other prefill fields as needed
-};
-
-type CalendlyWidgetProps = {
-	url: string;
-	id?: string;
-	prefill?: CalendlyPrefillData;
-	onSchedule?: () => void;
-};
-
-function isCalendlyEvent( e: MessageEvent ): boolean {
-	return (
-		e.origin === 'https://calendly.com' && e.data.event && e.data.event.indexOf( 'calendly.' ) === 0
-	);
-}
-
-const CalendlyWidget: React.FC< CalendlyWidgetProps > = ( { url, id, prefill, onSchedule } ) => {
-	const widgetId = useMemo(
-		() => id || `calendly-widget-${ Math.random().toString( 36 ).substr( 2, 9 ) }`,
-		[ id ]
-	);
-
-	useEffect( () => {
-		const handleMessage = ( e: MessageEvent ) => {
-			if ( isCalendlyEvent( e ) && e.data.event === 'calendly.event_scheduled' ) {
-				onSchedule?.();
-			}
-		};
-
-		window.addEventListener( 'message', handleMessage );
-		return () => window.removeEventListener( 'message', handleMessage );
-	}, [ onSchedule ] );
-
-	useEffect( () => {
-		// Check if the script is already loaded
-		if ( ! document.querySelector( `script[src="${ CALENDLY_SCRIPT_URL }"]` ) ) {
-			const script = document.createElement( 'script' );
-			script.src = CALENDLY_SCRIPT_URL;
-			script.async = true;
-			document.body.appendChild( script );
-		}
-
-		const loadCalendly = async () => {
-			while ( typeof window.Calendly === 'undefined' || ! url ) {
-				await new Promise( ( resolve ) => setTimeout( resolve, 100 ) );
-			}
-
-			const element = document.getElementById( widgetId );
-			if ( element ) {
-				// Clear out the container div when props change.
-				element.innerHTML = '';
-				window.Calendly.initInlineWidget( {
-					url: `https://calendly.com/${ url }`,
-					parentElement: document.getElementById( widgetId ),
-					prefill: prefill || {},
-					utm: {},
-				} );
-			}
-		};
-
-		loadCalendly();
-
-		// Cleanup function
-		return () => {
-			const existingScript = document.querySelector( `script[src="${ CALENDLY_SCRIPT_URL }"]` );
-			if ( existingScript ) {
-				existingScript.remove();
-			}
-		};
-	}, [ url, widgetId, prefill ] );
-
-	return <div id={ widgetId } className="calendly-widget" />;
-};
-
-export default CalendlyWidget;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss
deleted file mode 100644
index 5c8534a694b81..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/components/calendy-widget/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.calendly-widget {
-    min-width: 320px;
-    height: 630px;
-}
\ No newline at end of file
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx
index 8c966dc970d31..884ed9251c6ba 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx
@@ -1,7 +1,12 @@
+import config from '@automattic/calypso-config';
+import { UserSelect } from '@automattic/data-stores';
 import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { Icon, check } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import FormattedHeader from 'calypso/components/formatted-header';
+import { USER_STORE } from 'calypso/landing/stepper/stores';
+import { useCalendlyWidget } from '../components/calendly-widget/use-calendly-widget';
 import HundredYearPlanStepWrapper from '../hundred-year-plan-step-wrapper';
 import type { Step } from '../../types';
 
@@ -11,52 +16,74 @@ const HundredYearPlanDIYOrDIFM: Step = function HundredYearPlanDIYOrDIFM( { navi
 	const translate = useTranslate();
 	const { submit } = navigation;
 
+	const currentUser = useSelect(
+		( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(),
+		[]
+	);
+
+	const { openCalendlyPopup, closeCalendlyPopup } = useCalendlyWidget( {
+		url: config( '100_year_plan_calendly_id' ),
+		prefill: currentUser
+			? { name: currentUser?.display_name, email: currentUser?.email }
+			: undefined,
+		hideGdprBanner: true,
+		onSchedule: () => {
+			submit?.( { nextStep: 'thank-you' } );
+			// Close the Calendly popup after 1 second, to improve the user experience
+			setTimeout( closeCalendlyPopup, 1000 );
+		},
+	} );
+
 	return (
-		<HundredYearPlanStepWrapper
-			stepContent={
-				<div>
-					<ul>
-						<li>
-							<Icon size={ 18 } icon={ check } />{ ' ' }
-							{ translate( 'Conduct a comprehensive digital longevity assessment' ) }
-						</li>
-						<li>
-							<Icon size={ 18 } icon={ check } />{ ' ' }
-							{ translate( 'Showcase our comprehensive legacy-building tools' ) }
-						</li>
-						<li>
-							<Icon size={ 18 } icon={ check } />{ ' ' }
-							{ translate( 'Answer all your questions about long-term success' ) }
-						</li>
-						<li>
-							<Icon size={ 18 } icon={ check } />{ ' ' }
-							{ translate( 'Chart a course for the production of your new site' ) }
-						</li>
-					</ul>
-
-					<div className="buttons-container">
-						<Button variant="primary" onClick={ () => submit?.( { diyOrDifmChoice: 'difm' } ) }>
-							{ translate( 'Schedule your free call' ) }
-						</Button>
-
-						<Button variant="link" onClick={ () => submit?.( { diyOrDifmChoice: 'diy' } ) }>
-							{ translate( "I'll create my site on my own" ) }
-						</Button>
-					</div>
-				</div>
-			}
-			formattedHeader={
-				<FormattedHeader
-					brandFont
-					headerText={ translate( "Let's craft your next century" ) }
-					subHeaderText={ translate( "Join us for an exclusive strategy session where we'll" ) }
-					subHeaderAlign="center"
-				/>
-			}
-			stepName="hundred-year-plan-setup hundred-year-plan-setup__diy-or-difm"
-			flowName={ flow }
-			justifyStepContent="center"
-		/>
+		<>
+			<HundredYearPlanStepWrapper
+				stepContent={
+					<>
+						<div>
+							<ul>
+								<li>
+									<Icon size={ 18 } icon={ check } />{ ' ' }
+									{ translate( 'Conduct a comprehensive digital longevity assessment' ) }
+								</li>
+								<li>
+									<Icon size={ 18 } icon={ check } />{ ' ' }
+									{ translate( 'Showcase our comprehensive legacy-building tools' ) }
+								</li>
+								<li>
+									<Icon size={ 18 } icon={ check } />{ ' ' }
+									{ translate( 'Answer all your questions about long-term success' ) }
+								</li>
+								<li>
+									<Icon size={ 18 } icon={ check } />{ ' ' }
+									{ translate( 'Chart a course for the production of your new site' ) }
+								</li>
+							</ul>
+
+							<div className="buttons-container">
+								<Button variant="primary" onClick={ () => openCalendlyPopup() }>
+									{ translate( 'Schedule your free call' ) }
+								</Button>
+
+								<Button variant="link" onClick={ () => submit?.( { diyOrDifmChoice: 'diy' } ) }>
+									{ translate( "I'll create my site on my own" ) }
+								</Button>
+							</div>
+						</div>
+					</>
+				}
+				formattedHeader={
+					<FormattedHeader
+						brandFont
+						headerText={ translate( "Let's craft your next century" ) }
+						subHeaderText={ translate( "Join us for an exclusive strategy session where we'll:" ) }
+						subHeaderAlign="center"
+					/>
+				}
+				stepName="hundred-year-plan-setup hundred-year-plan-setup__diy-or-difm"
+				flowName={ flow }
+				justifyStepContent="center"
+			/>
+		</>
 	);
 };
 
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
index 8fae0bdb47063..16e1bd9637f18 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/styles.scss
@@ -47,3 +47,40 @@
 		}
 	}
 }
+
+.calendly-overlay {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	padding: 1rem;
+
+	// match Calendly breakpoints
+	@media (max-width: 682px) {
+		padding: 0;
+	}
+	@media (max-width: 649px) {
+		padding: 4rem 0 0 0;
+	}
+
+	.calendly-popup {
+		height: 100%;
+
+	}
+	.calendly-popup-content {
+		height: 100%;
+	}
+	.calendly-popup-close {
+		position: absolute;
+		top: 1.5rem;
+		right: 2rem;
+		width: 19px;
+		height: 19px;
+		cursor: pointer;
+		background: url(calypso/assets/images/icons/close-icon.svg) no-repeat;
+		background-size: contain;
+	}
+}
+
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/index.tsx
deleted file mode 100644
index 234a2bebe8e7d..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import config from '@automattic/calypso-config';
-import { UserSelect } from '@automattic/data-stores';
-import { useSelect } from '@wordpress/data';
-import FormattedHeader from 'calypso/components/formatted-header';
-import { USER_STORE } from '../../../../stores';
-import CalendlyWidget from '../components/calendy-widget';
-import HundredYearPlanStepWrapper from '../hundred-year-plan-step-wrapper';
-import type { Step } from '../../types';
-
-import './styles.scss';
-
-const HundredYearPlanScheduleAppointment: Step = function HundredYearPlanScheduleAppointment( {
-	navigation,
-	flow,
-} ) {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { submit } = navigation;
-
-	const currentUser = useSelect(
-		( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(),
-		[]
-	);
-
-	return (
-		<HundredYearPlanStepWrapper
-			stepContent={
-				<div className="hundred-year-plan-schedule-appointment-content">
-					<div className="hundred-year-plan-schedule-appointment-content__start-pane">
-						// TODO: content
-					</div>
-					<div className="hundred-year-plan-schedule-appointment-content__end-pane">
-						<CalendlyWidget
-							url={ config( '100_year_plan_calendly_id' ) }
-							prefill={
-								currentUser
-									? { name: currentUser?.display_name, email: currentUser?.email }
-									: undefined
-							}
-							onSchedule={ () => {
-								submit?.();
-							} }
-						/>
-					</div>
-				</div>
-			}
-			formattedHeader={
-				<FormattedHeader
-					brandFont
-					headerText="TODO: title"
-					subHeaderText="TODO: header"
-					subHeaderAlign="center"
-				/>
-			}
-			stepName="hundred-year-plan-setup"
-			flowName={ flow }
-		/>
-	);
-};
-
-export default HundredYearPlanScheduleAppointment;
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/styles.scss
deleted file mode 100644
index 97810cc05ee66..0000000000000
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-schedule-appointment/styles.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.hundred-year-plan-schedule-appointment-content {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    &__start-pane {
-       flex: 1;
-    }
-
-    &__end-pane {
-        flex: 1;
-    }
-
-    .calendly-widget {
-        min-width: 320px;
-        height: 700px;
-    }
-}
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-step-wrapper/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-step-wrapper/index.tsx
index 53806288b7c85..7ecd8a235b6cf 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-step-wrapper/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-step-wrapper/index.tsx
@@ -24,6 +24,7 @@ type Props = {
 	stepContent: ReactElement;
 	justifyStepContent?: string;
 	formattedHeader?: ReactElement;
+	hideInfoColumn?: boolean;
 };
 
 const FlexWrapper = styled.div< { justifyStepContent?: string } >`
@@ -250,7 +251,8 @@ function InfoColumn( { isMobile, openModal }: { isMobile: boolean; openModal: ()
 }
 
 function HundredYearPlanStepWrapper( props: Props ) {
-	const { stepContent, stepName, flowName, formattedHeader, justifyStepContent } = props;
+	const { stepContent, stepName, flowName, formattedHeader, justifyStepContent, hideInfoColumn } =
+		props;
 
 	const isMobile = useBreakpoint( `<${ SMALL_BREAKPOINT }px` );
 	const [ isOpen, setOpen ] = useState( false );
@@ -274,9 +276,11 @@ function HundredYearPlanStepWrapper( props: Props ) {
 						isMobile={ isMobile }
 					>
 						{ isOpen && <InfoModal onClose={ closeModal } /> }
-						<InfoColumnWrapper isMobile={ isMobile }>
-							<InfoColumn isMobile={ isMobile } openModal={ openModal } />
-						</InfoColumnWrapper>
+						{ ! hideInfoColumn && (
+							<InfoColumnWrapper isMobile={ isMobile }>
+								<InfoColumn isMobile={ isMobile } openModal={ openModal } />
+							</InfoColumnWrapper>
+						) }
 						<FlexWrapper justifyStepContent={ justifyStepContent }>
 							<div className="step-container__header">{ formattedHeader }</div>
 							{ stepContent }
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/index.tsx
index 2f7d19fdfa913..172d5546059b3 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/index.tsx
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/index.tsx
@@ -1,27 +1,59 @@
+import { UserSelect } from '@automattic/data-stores';
+import { localizeUrl } from '@automattic/i18n-utils';
+import { useMobileBreakpoint } from '@automattic/viewport-react';
+import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useTranslate } from 'i18n-calypso';
 import FormattedHeader from 'calypso/components/formatted-header';
+import HundredYearLoaderView from 'calypso/components/hundred-year-loader-view';
+import { USER_STORE } from 'calypso/landing/stepper/stores';
 import HundredYearPlanStepWrapper from '../hundred-year-plan-step-wrapper';
 import type { Step } from '../../types';
 
 import './styles.scss';
 
 const HundredYearPlanThankYou: Step = function HundredYearPlanThankYou( { flow } ) {
+	const translate = useTranslate();
+	const isMobile = useMobileBreakpoint();
+	const currentUser = useSelect(
+		( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(),
+		[]
+	);
+
 	return (
 		<HundredYearPlanStepWrapper
 			stepContent={
-				<div>
-					<p>TODO: Thank You content</p>
-				</div>
+				<Button
+					variant="secondary"
+					href={ localizeUrl( 'https://wordpress.com/support/plan-features/100-year-plan/' ) }
+				>
+					{ translate( 'View guide' ) }
+				</Button>
 			}
 			formattedHeader={
-				<FormattedHeader
-					brandFont
-					headerText="TODO: Thank You title"
-					subHeaderText="TODO: Thank You header"
-					subHeaderAlign="center"
-				/>
+				<>
+					<HundredYearLoaderView isMobile={ isMobile } loadingText="" hideVideoContainer />
+					<FormattedHeader
+						brandFont
+						headerText={ translate( 'Your next century awaits' ) }
+						subHeaderText={ translate(
+							"You are all set! We've sent a calendar invite to {{strong}}%(email)s{{/strong}}. To warm up for our discussion, we recommend reading our guide on the {{em}}100-Year Plan{{/em}}.",
+							{
+								args: { email: currentUser?.email || 'email' },
+								components: {
+									strong: <strong />,
+									em: <em />,
+								},
+							}
+						) }
+						subHeaderAlign="center"
+					/>
+				</>
 			}
-			stepName="hundred-year-plan-setup"
+			stepName="hundred-year-plan-setup hundred-year-plan-setup__thank-you"
 			flowName={ flow }
+			justifyStepContent="center"
+			hideInfoColumn
 		/>
 	);
 };
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/styles.scss b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/styles.scss
index e1bb944593466..d056124bf59b8 100644
--- a/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/styles.scss
+++ b/client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-thank-you/styles.scss
@@ -1 +1,38 @@
-/* Comment because we cannot have empty files */
\ No newline at end of file
+.step-route.hundred-year-plan.thank-you {
+	.signup-header {
+		display: block;
+
+		h1 {
+			display: none;
+		}
+
+		svg {
+			fill: #fff;
+		}
+	}
+}
+
+.hundred-year-plan-setup__thank-you {
+	background: #000;
+
+	.formatted-header__title,
+	.formatted-header__subtitle {
+		color: var(--studio-gray-5) !important;
+		max-width: 717px;
+		margin-left: auto !important;
+		margin-right: auto !important;
+	}
+
+	.step-container__header {
+		margin-bottom: 0;
+	}
+
+	video {
+		max-height: 460px;
+	}
+
+	.components-button {
+		box-shadow: none;
+		margin-bottom: 1rem;
+	}
+}
diff --git a/config/_shared.json b/config/_shared.json
index 1ae5dd5059e08..e56f7fed03ec3 100644
--- a/config/_shared.json
+++ b/config/_shared.json
@@ -260,6 +260,6 @@
 		"onboarding-affiliate",
 		"email-subscription"
 	],
-	"100_year_plan_calendly_id": "tim-broddin-a8c/30min",
+	"100_year_plan_calendly_id": "wpcom-100-years/30min",
 	"bilmur_url": "https://s0.wp.com/wp-content/js/bilmur.min.js"
 }