diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
index 1f7cae0b47749..f42c1db8cc504 100644
--- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
@@ -54,7 +54,7 @@ export const SidebarNavigationScreen = ( {
 	backPath?: string;
 	onNavigateBackClick?: () => void;
 } ) => {
-	const { sendEvent, context } = useContext( CustomizeStoreContext );
+	const { context } = useContext( CustomizeStoreContext );
 	const [ openWarningModal, setOpenWarningModal ] =
 		useState< boolean >( false );
 	const location = useLocation();
@@ -148,10 +148,10 @@ export const SidebarNavigationScreen = ( {
 				<GoBackWarningModal
 					setOpenWarningModal={ setOpenWarningModal }
 					onExitClicked={ () => {
-						sendEvent(
+						window.parent.__wcCustomizeStore.sendEventToIntroMachine(
 							flowType && isAIFlow( flowType )
-								? 'GO_BACK_TO_DESIGN_WITH_AI'
-								: 'GO_BACK_TO_DESIGN_WITHOUT_AI'
+								? { type: 'GO_BACK_TO_DESIGN_WITH_AI' }
+								: { type: 'GO_BACK_TO_DESIGN_WITHOUT_AI' }
 						);
 					} }
 				/>
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts
index 061e0dd7f97c8..b3dc42ac2f09e 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/actions.ts
@@ -2,11 +2,7 @@
  * External dependencies
  */
 import { assign, spawn } from 'xstate';
-import {
-	getQuery,
-	updateQueryString,
-	getNewPath,
-} from '@woocommerce/navigation';
+import { getQuery, updateQueryString } from '@woocommerce/navigation';
 import { recordEvent } from '@woocommerce/tracks';
 import { dispatch } from '@wordpress/data';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
@@ -29,7 +25,6 @@ import {
 	lookAndFeelCompleteEvent,
 	toneOfVoiceCompleteEvent,
 } from './pages';
-import { attachIframeListeners, onIframeLoad } from '../utils';
 
 const assignStartLoadingTime = assign<
 	designWithAiStateMachineContext,
@@ -292,50 +287,7 @@ const recordTracksStepCompleted = (
 	} );
 };
 
-const redirectToAssemblerHub = async (
-	context: designWithAiStateMachineContext
-) => {
-	const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
-	const iframe = document.createElement( 'iframe' );
-	iframe.classList.add( 'cys-fullscreen-iframe' );
-	iframe.src = assemblerUrl;
-
-	const showIframe = () => {
-		if ( iframe.style.opacity === '1' ) {
-			// iframe is already visible
-			return;
-		}
-
-		const loader = document.getElementsByClassName(
-			'woocommerce-onboarding-loader'
-		);
-		if ( loader[ 0 ] ) {
-			( loader[ 0 ] as HTMLElement ).style.display = 'none';
-		}
-
-		iframe.style.opacity = '1';
-
-		if ( context.startLoadingTime ) {
-			const endLoadingTime = performance.now();
-			const timeToLoad = endLoadingTime - context.startLoadingTime;
-			recordEvent( 'customize_your_store_ai_wizard_loading_time', {
-				time_in_s: ( timeToLoad / 1000 ).toFixed( 2 ),
-			} );
-		}
-	};
-
-	iframe.onload = () => {
-		// Hide loading UI
-		attachIframeListeners( iframe );
-		onIframeLoad( showIframe );
-
-		// Ceiling wait time set to 60 seconds
-		setTimeout( showIframe, 60 * 1000 );
-		window.history?.pushState( {}, '', assemblerUrl );
-	};
-
-	document.body.appendChild( iframe );
-
+const redirectToAssemblerHub = async () => {
 	// This is a workaround to update the "activeThemeHasMods" in the parent's machine
 	// state context. We should find a better way to do this using xstate actions,
 	// since state machines should rely only on their context.
@@ -345,33 +297,6 @@ const redirectToAssemblerHub = async (
 	// than the parent window.
 	// Check https://github.com/woocommerce/woocommerce/pull/44206 for more details.
 	window.parent.__wcCustomizeStore.activeThemeHasMods = true;
-
-	// Listen for back button click
-	window.addEventListener(
-		'popstate',
-		() => {
-			const apiLoaderUrl = getNewPath(
-				{},
-				'/customize-store/design-with-ai/api-call-loader',
-				{}
-			);
-
-			// Only catch the back button click when the user is on the main assember hub page
-			// and trying to go back to the api loader page
-			if ( 'admin.php' + window.location.search === apiLoaderUrl ) {
-				iframe.contentWindow?.postMessage(
-					{
-						type: 'assemberBackButtonClicked',
-					},
-					'*'
-				);
-				// When the user clicks the back button, push state changes to the previous step
-				// Set it back to the assembler hub
-				window.history?.pushState( {}, '', assemblerUrl );
-			}
-		},
-		false
-	);
 };
 
 export const actions = {
diff --git a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx
index fd86fb4c1640c..e369d2dc51b0e 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-with-ai/pages/ApiCallLoader.tsx
@@ -3,7 +3,8 @@
  */
 import { Loader } from '@woocommerce/onboarding';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { getNewPath } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
@@ -15,7 +16,11 @@ import assemblingAiOptimizedStore from '../../assets/images/loader-assembling-ai
 import applyingFinishingTouches from '../../assets/images/loader-applying-the-finishing-touches.svg';
 import generatingContent from '../../assets/images/loader-generating-content.svg';
 import openingTheDoors from '../../assets/images/loader-opening-the-doors.svg';
-import { createAugmentedSteps } from '~/customize-store/utils';
+import {
+	attachIframeListeners,
+	createAugmentedSteps,
+	onIframeLoad,
+} from '~/customize-store/utils';
 
 const loaderSteps = [
 	{
@@ -150,6 +155,62 @@ export const ApiCallLoader = () => {
 	);
 };
 
+const AssemblerHub = () => {
+	const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
+	const iframe = useRef< HTMLIFrameElement | null >( null );
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	useEffect( () => {
+		const currentIframe = iframe.current;
+		if ( currentIframe === null ) {
+			return;
+		}
+		window.addEventListener(
+			'popstate',
+			() => {
+				const apiLoaderUrl = getNewPath(
+					{},
+					'/customize-store/design-with-ai/api-call-loader',
+					{}
+				);
+
+				// Only catch the back button click when the user is on the main assember hub page
+				// and trying to go back to the api loader page
+				if ( 'admin.php' + window.location.search === apiLoaderUrl ) {
+					currentIframe.contentWindow?.postMessage(
+						{
+							type: 'assemberBackButtonClicked',
+						},
+						'*'
+					);
+					// When the user clicks the back button, push state changes to the previous step
+					// Set it back to the assembler hub
+					window.history?.pushState( {}, '', assemblerUrl );
+				}
+			},
+			false
+		);
+	}, [ assemblerUrl, iframe ] );
+
+	return (
+		<iframe
+			ref={ iframe }
+			onLoad={ ( frame ) => {
+				const showIframe = () => setIsVisible( true );
+				attachIframeListeners( frame.currentTarget );
+				onIframeLoad( showIframe );
+				// Ceiling wait time set to 60 seconds
+				setTimeout( showIframe, 60 * 1000 );
+				window.parent.history?.pushState( {}, '', assemblerUrl );
+			} }
+			style={ { opacity: isVisible ? 1 : 0 } }
+			src={ assemblerUrl }
+			title="assembler-hub"
+			className="cys-fullscreen-iframe"
+		/>
+	);
+};
+
 export const AssembleHubLoader = () => {
 	// Show the last two steps of the loader so that the last frame is the shortest time possible
 	const augmentedSteps = createAugmentedSteps( loaderSteps.slice( -2 ), 10 );
@@ -157,30 +218,33 @@ export const AssembleHubLoader = () => {
 	const [ progress, setProgress ] = useState( augmentedSteps[ 0 ].progress );
 
 	return (
-		<Loader>
-			<Loader.Sequence
-				interval={ ( 10 * 1000 ) / ( augmentedSteps.length - 1 ) }
-				shouldLoop={ false }
-				onChange={ ( index ) => {
-					// to get around bad set state timing issue
-					setTimeout( () => {
-						setProgress( augmentedSteps[ index ].progress );
-					}, 0 );
-				} }
-			>
-				{ augmentedSteps.map( ( step, index ) => (
-					<Loader.Layout key={ index }>
-						<Loader.Illustration>
-							{ step.image }
-						</Loader.Illustration>
-						<Loader.Title>{ step.title }</Loader.Title>
-					</Loader.Layout>
-				) ) }
-			</Loader.Sequence>
-			<Loader.ProgressBar
-				className="smooth-transition"
-				progress={ progress || 0 }
-			/>
-		</Loader>
+		<>
+			<Loader>
+				<Loader.Sequence
+					interval={ ( 10 * 1000 ) / ( augmentedSteps.length - 1 ) }
+					shouldLoop={ false }
+					onChange={ ( index ) => {
+						// to get around bad set state timing issue
+						setTimeout( () => {
+							setProgress( augmentedSteps[ index ].progress );
+						}, 0 );
+					} }
+				>
+					{ augmentedSteps.map( ( step, index ) => (
+						<Loader.Layout key={ index }>
+							<Loader.Illustration>
+								{ step.image }
+							</Loader.Illustration>
+							<Loader.Title>{ step.title }</Loader.Title>
+						</Loader.Layout>
+					) ) }
+				</Loader.Sequence>
+				<Loader.ProgressBar
+					className="smooth-transition"
+					progress={ progress || 0 }
+				/>
+			</Loader>
+			<AssemblerHub />
+		</>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts b/plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts
index b9240030fc27e..cc203fa1622cf 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts
+++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/actions.ts
@@ -1,50 +1,15 @@
 /**
  * External dependencies
  */
-import { getNewPath } from '@woocommerce/navigation';
 import { sendParent } from 'xstate';
 
 /**
  * Internal dependencies
  */
-import { attachIframeListeners, onIframeLoad } from '../utils';
 import { DesignWithoutAIStateMachineContext } from './types';
 import { DesignWithoutAIStateMachineEvents } from './state-machine';
 
 const redirectToAssemblerHub = async () => {
-	const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
-	const iframe = document.createElement( 'iframe' );
-	iframe.classList.add( 'cys-fullscreen-iframe' );
-	iframe.src = assemblerUrl;
-
-	const showIframe = () => {
-		if ( iframe.style.opacity === '1' ) {
-			// iframe is already visible
-			return;
-		}
-
-		const loader = document.getElementsByClassName(
-			'woocommerce-onboarding-loader'
-		);
-		if ( loader[ 0 ] ) {
-			( loader[ 0 ] as HTMLElement ).style.display = 'none';
-		}
-
-		iframe.style.opacity = '1';
-	};
-
-	iframe.onload = () => {
-		// Hide loading UI
-		attachIframeListeners( iframe );
-		onIframeLoad( showIframe );
-
-		// Ceiling wait time set to 60 seconds
-		setTimeout( showIframe, 60 * 1000 );
-		window.history?.pushState( {}, '', assemblerUrl );
-	};
-
-	document.body.appendChild( iframe );
-
 	// This is a workaround to update the "activeThemeHasMods" in the parent's machine
 	// state context. We should find a better way to do this using xstate actions,
 	// since state machines should rely only on their context.
diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx
index 883b1e771d1ea..e28b6e43d1364 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/index.tsx
@@ -49,6 +49,7 @@ export const DesignWithNoAiController = ( {
 
 	const [ CurrentComponent, setCurrentComponent ] =
 		useState< DesignWithoutAiComponent | null >( null );
+
 	useEffect( () => {
 		if ( currentNodeMeta?.component ) {
 			setCurrentComponent( () => currentNodeMeta?.component );
diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx b/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
index 02fbb090a68c2..6a4f9ad139d5a 100644
--- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/pages/ApiCallLoader.tsx
@@ -3,7 +3,8 @@
  */
 import { Loader } from '@woocommerce/onboarding';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { getNewPath } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
@@ -11,7 +12,11 @@ import { useEffect, useState } from '@wordpress/element';
 import loaderAssemblingStore from '../../assets/images/loader-assembling-ai-optimized-store.svg';
 import loaderTurningLights from '../../assets/images/loader-turning-lights.svg';
 import openingTheDoors from '../../assets/images/loader-opening-the-doors.svg';
-import { createAugmentedSteps } from '~/customize-store/utils';
+import {
+	attachIframeListeners,
+	createAugmentedSteps,
+	onIframeLoad,
+} from '~/customize-store/utils';
 
 const loaderSteps = [
 	{
@@ -98,6 +103,30 @@ export const ApiCallLoader = () => {
 	);
 };
 
+const AssemblerHub = () => {
+	const assemblerUrl = getNewPath( {}, '/customize-store/assembler-hub', {} );
+	const iframe = useRef< HTMLIFrameElement >( null );
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	return (
+		<iframe
+			ref={ iframe }
+			onLoad={ ( frame ) => {
+				const showIframe = () => setIsVisible( true );
+				attachIframeListeners( frame.currentTarget );
+				onIframeLoad( showIframe );
+				// Ceiling wait time set to 60 seconds
+				setTimeout( showIframe, 60 * 1000 );
+				window.parent.history?.pushState( {}, '', assemblerUrl );
+			} }
+			style={ { opacity: isVisible ? 1 : 0 } }
+			src={ assemblerUrl }
+			title="assembler-hub"
+			className="cys-fullscreen-iframe"
+		/>
+	);
+};
+
 export const AssembleHubLoader = () => {
 	// Show the last two steps of the loader so that the last frame is the shortest time possible
 	const augmentedSteps = createAugmentedSteps( loaderSteps.slice( -2 ), 10 );
@@ -105,30 +134,33 @@ export const AssembleHubLoader = () => {
 	const [ progress, setProgress ] = useState( augmentedSteps[ 0 ].progress );
 
 	return (
-		<Loader>
-			<Loader.Sequence
-				interval={ ( 2 * 1000 ) / ( augmentedSteps.length - 1 ) }
-				shouldLoop={ false }
-				onChange={ ( index ) => {
-					// to get around bad set state timing issue
-					setTimeout( () => {
-						setProgress( augmentedSteps[ index ].progress );
-					}, 0 );
-				} }
-			>
-				{ augmentedSteps.map( ( step, index ) => (
-					<Loader.Layout key={ index }>
-						<Loader.Illustration>
-							{ step.image }
-						</Loader.Illustration>
-						<Loader.Title>{ step.title }</Loader.Title>
-					</Loader.Layout>
-				) ) }
-			</Loader.Sequence>
-			<Loader.ProgressBar
-				className="smooth-transition"
-				progress={ progress || 0 }
-			/>
-		</Loader>
+		<>
+			<Loader>
+				<Loader.Sequence
+					interval={ ( 2 * 1000 ) / ( augmentedSteps.length - 1 ) }
+					shouldLoop={ false }
+					onChange={ ( index ) => {
+						// to get around bad set state timing issue
+						setTimeout( () => {
+							setProgress( augmentedSteps[ index ].progress );
+						}, 0 );
+					} }
+				>
+					{ augmentedSteps.map( ( step, index ) => (
+						<Loader.Layout key={ index }>
+							<Loader.Illustration>
+								{ step.image }
+							</Loader.Illustration>
+							<Loader.Title>{ step.title }</Loader.Title>
+						</Loader.Layout>
+					) ) }
+				</Loader.Sequence>
+				<Loader.ProgressBar
+					className="smooth-transition"
+					progress={ progress || 0 }
+				/>
+			</Loader>
+			<AssemblerHub />
+		</>
 	);
 };
diff --git a/plugins/woocommerce-admin/client/customize-store/index.tsx b/plugins/woocommerce-admin/client/customize-store/index.tsx
index 1fbc42833a060..a1d1a4eb2a7bf 100644
--- a/plugins/woocommerce-admin/client/customize-store/index.tsx
+++ b/plugins/woocommerce-admin/client/customize-store/index.tsx
@@ -46,7 +46,7 @@ import {
 } from './types';
 import { ThemeCard } from './intro/types';
 import './style.scss';
-import { navigateOrParent, attachParentListeners } from './utils';
+import { navigateOrParent, attachParentListeners, isIframe } from './utils';
 import useBodyClass from './hooks/use-body-class';
 import { isWooExpress } from '~/utils/is-woo-express';
 
@@ -174,6 +174,14 @@ export const customizeStoreStateMachineDefinition = createMachine( {
 		src: 'browserPopstateHandler',
 	},
 	on: {
+		GO_BACK_TO_DESIGN_WITH_AI: {
+			target: 'designWithAi',
+			actions: [ { type: 'updateQueryStep', step: 'design-with-ai' } ],
+		},
+		GO_BACK_TO_DESIGN_WITHOUT_AI: {
+			target: 'intro',
+			actions: [ { type: 'updateQueryStep', step: 'intro' } ],
+		},
 		EXTERNAL_URL_UPDATE: {
 			target: 'navigate',
 		},
@@ -454,13 +462,6 @@ export const customizeStoreStateMachineDefinition = createMachine( {
 				FINISH_CUSTOMIZATION: {
 					target: '.postAssemblerHub',
 				},
-				GO_BACK_TO_DESIGN_WITH_AI: {
-					target: 'designWithAi',
-				},
-				GO_BACK_TO_DESIGN_WITHOUT_AI: {
-					target: 'intro',
-					actions: [ { type: 'updateQueryStep', step: 'intro' } ],
-				},
 			},
 		},
 		transitionalScreen: {
@@ -530,6 +531,9 @@ declare global {
 		__wcCustomizeStore: {
 			isFontLibraryAvailable: boolean | null;
 			activeThemeHasMods: boolean | undefined;
+			sendEventToIntroMachine: (
+				typeEvent: customizeStoreStateMachineEvents
+			) => void;
 		};
 	}
 }
@@ -584,6 +588,26 @@ export const CustomizeStoreController = ( {
 		devTools: process.env.NODE_ENV === 'development',
 	} );
 
+	useEffect( () => {
+		if ( isIframe( window ) ) {
+			return;
+		}
+		window.__wcCustomizeStore = {
+			...window.__wcCustomizeStore,
+			// This is needed because the iframe loads the entire Customize Store app.
+			// This means that the iframe instance will have different state machines
+			// than the parent window.
+			// Check https://github.com/woocommerce/woocommerce/issues/45278 for more details.
+			sendEventToIntroMachine: (
+				typeEvent: customizeStoreStateMachineEvents
+			) => send( typeEvent ),
+		};
+	}, [ send ] );
+
+	window.__wcCustomizeStore = {
+		...window.__wcCustomizeStore,
+	};
+
 	// eslint-disable-next-line react-hooks/exhaustive-deps -- false positive due to function name match, this isn't from react std lib
 	const currentNodeMeta = useSelector( service, ( currentState ) =>
 		findComponentMeta< CustomizeStoreComponentMeta >(
diff --git a/plugins/woocommerce/changelog/45255-45221-cys-core-cannot-read-properties-of-undefined-reading-activethemehasmods b/plugins/woocommerce/changelog/45255-45221-cys-core-cannot-read-properties-of-undefined-reading-activethemehasmods
new file mode 100644
index 0000000000000..3f8c1428be647
--- /dev/null
+++ b/plugins/woocommerce/changelog/45255-45221-cys-core-cannot-read-properties-of-undefined-reading-activethemehasmods
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+CYS - Fix activeThemeHasMods undefined error.
\ No newline at end of file