diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js
index e33add4eb..74ed62aec 100644
--- a/src/OnboardingSPA/components/StateHandlers/Design/index.js
+++ b/src/OnboardingSPA/components/StateHandlers/Design/index.js
@@ -1,5 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Fragment, useEffect } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 
 import { StepLoader } from '../../Loaders';
 import { store as nfdOnboardingStore } from '../../../store';
@@ -15,7 +16,12 @@ import {
 import { StepErrorState } from '../../ErrorState';
 import getContents from './contents';
 
-const DesignStateHandler = ( { children } ) => {
+const DesignStateHandler = ( {
+	children,
+	navigationStateCallback = false,
+} ) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const { storedThemeStatus, brandName } = useSelect( ( select ) => {
 		return {
 			storedThemeStatus: select( nfdOnboardingStore ).getThemeStatus(),
@@ -25,7 +31,12 @@ const DesignStateHandler = ( { children } ) => {
 
 	const contents = getContents( brandName );
 
-	const { updateThemeStatus } = useDispatch( nfdOnboardingStore );
+	const {
+		updateThemeStatus,
+		setIsDrawerOpened,
+		setIsDrawerSuppressed,
+		setIsHeaderNavigationEnabled,
+	} = useDispatch( nfdOnboardingStore );
 
 	const checkThemeStatus = async () => {
 		const themeStatus = await getThemeStatus( DESIGN_STEPS_THEME );
@@ -45,7 +56,41 @@ const DesignStateHandler = ( { children } ) => {
 		}, THEME_INSTALL_WAIT_TIMEOUT );
 	};
 
+	const enableNavigation = () => {
+		if ( isLargeViewport ) {
+			setIsDrawerOpened( true );
+		}
+		setIsDrawerSuppressed( false );
+		setIsHeaderNavigationEnabled( true );
+	};
+
+	const disableNavigation = () => {
+		setIsDrawerOpened( false );
+		setIsDrawerSuppressed( true );
+		setIsHeaderNavigationEnabled( false );
+	};
+
+	const handleNavigationStateCallback = () => {
+		if ( typeof navigationStateCallback === 'function' ) {
+			return navigationStateCallback();
+		}
+		enableNavigation();
+	};
+
+	const handleNavigationState = ( themeStatus ) => {
+		switch ( themeStatus ) {
+			case THEME_STATUS_NOT_ACTIVE:
+				return handleNavigationStateCallback();
+			case THEME_STATUS_ACTIVE:
+				return handleNavigationStateCallback();
+			default:
+				disableNavigation();
+		}
+	};
+
 	useEffect( async () => {
+		handleNavigationState( storedThemeStatus );
+
 		if ( storedThemeStatus === THEME_STATUS_INIT ) {
 			const themeStatus = await checkThemeStatus();
 			switch ( themeStatus ) {
diff --git a/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js b/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js
index 20c12ef23..af41cd9a3 100644
--- a/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js
+++ b/src/OnboardingSPA/components/StateHandlers/Ecommerce/index.js
@@ -1,3 +1,4 @@
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
@@ -15,7 +16,12 @@ import {
 import { StepErrorState } from '../../ErrorState';
 import getContents from './contents';
 
-const EcommerceStateHandler = ( { children } ) => {
+const EcommerceStateHandler = ( {
+	children,
+	navigationStateCallback = false,
+} ) => {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const [ woocommerceStatus, setWoocommerceStatus ] = useState(
 		PLUGIN_STATUS_INSTALLING
 	);
@@ -30,7 +36,12 @@ const EcommerceStateHandler = ( { children } ) => {
 
 	const contents = getContents( brandName );
 
-	const { updatePluginsStatus } = useDispatch( nfdOnboardingStore );
+	const {
+		updatePluginsStatus,
+		setIsDrawerOpened,
+		setIsDrawerSuppressed,
+		setIsHeaderNavigationEnabled,
+	} = useDispatch( nfdOnboardingStore );
 
 	const checkPluginStatus = async () => {
 		const pluginStatus = await getPluginStatus( ECOMMERCE_STEPS_PLUGIN );
@@ -44,12 +55,51 @@ const EcommerceStateHandler = ( { children } ) => {
 		setTimeout( async () => {
 			const pluginStatus = await checkPluginStatus();
 			if ( pluginStatus !== PLUGIN_STATUS_ACTIVE ) {
+				storedPluginsStatus[ ECOMMERCE_STEPS_PLUGIN ] =
+					PLUGIN_STATUS_NOT_ACTIVE;
+				updatePluginsStatus( storedPluginsStatus );
 				return setWoocommerceStatus( PLUGIN_STATUS_NOT_ACTIVE );
 			}
 			window.location.reload();
 		}, PLUGIN_INSTALL_WAIT_TIMEOUT );
 	};
 
+	const enableNavigation = () => {
+		if ( isLargeViewport ) {
+			setIsDrawerOpened( true );
+		}
+		setIsDrawerSuppressed( false );
+		setIsHeaderNavigationEnabled( true );
+	};
+
+	const disableNavigation = () => {
+		setIsDrawerOpened( false );
+		setIsDrawerSuppressed( true );
+		setIsHeaderNavigationEnabled( false );
+	};
+
+	const handleNavigationStateCallback = () => {
+		if ( typeof navigationStateCallback === 'function' ) {
+			return navigationStateCallback();
+		}
+		enableNavigation();
+	};
+
+	const handleNavigationState = ( pluginStatus ) => {
+		switch ( pluginStatus ) {
+			case PLUGIN_STATUS_NOT_ACTIVE:
+				return handleNavigationStateCallback();
+			case PLUGIN_STATUS_ACTIVE:
+				return handleNavigationStateCallback();
+			default:
+				disableNavigation();
+		}
+	};
+
+	useEffect( () => {
+		handleNavigationState( woocommerceStatus );
+	}, [ woocommerceStatus ] );
+
 	useEffect( async () => {
 		setWoocommerceStatus( storedPluginsStatus[ ECOMMERCE_STEPS_PLUGIN ] );
 		if (
diff --git a/src/OnboardingSPA/pages/Steps/Complete/index.js b/src/OnboardingSPA/pages/Steps/Complete/index.js
index e82e0f54b..69a263f21 100644
--- a/src/OnboardingSPA/pages/Steps/Complete/index.js
+++ b/src/OnboardingSPA/pages/Steps/Complete/index.js
@@ -65,14 +65,17 @@ const StepComplete = () => {
 		return true;
 	}
 
-	useEffect( () => {
+	const setNavigationState = () => {
 		setIsHeaderNavigationEnabled( false );
 		setIsDrawerSuppressed( true );
 		setSidebarActiveView( false );
+	}
+
+	useEffect( () => {
 		checkFlowComplete();
 	}, [] );
 	return (
-		<DesignStateHandler>
+		<DesignStateHandler navigationStateCallback={setNavigationState}>
 			{ isError ? (
 				<StepErrorState
 					title={ contents.errorState.title }
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
index 9c1d5c8ec..52bcbd34d 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js
@@ -1,5 +1,4 @@
 import { useLocation } from 'react-router-dom';
-import { useViewportMatch } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -22,7 +21,6 @@ const StepDesignColors = () => {
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ pattern, setPattern ] = useState();
 
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const { currentStep } = useSelect( ( select ) => {
 		return {
 			currentStep: select( nfdOnboardingStore ).getStepFromPath(
@@ -31,23 +29,12 @@ const StepDesignColors = () => {
 		};
 	}, [] );
 
-	const {
-		setDrawerActiveView,
-		setIsDrawerOpened,
-		setSidebarActiveView,
-		setIsDrawerSuppressed,
-		setIsHeaderNavigationEnabled,
-		updateThemeStatus,
-	} = useDispatch( nfdOnboardingStore );
+	const { setDrawerActiveView, setSidebarActiveView, updateThemeStatus } =
+		useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_DESIGN_COLORS );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	const getStylesAndPatterns = async () => {
diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
index 18c415f77..ef43f9c33 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js
@@ -1,6 +1,5 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
 
 import CommonLayout from '../../../components/Layouts/Common';
 import { DesignStateHandler } from '../../../components/StateHandlers';
@@ -9,7 +8,10 @@ import {
 	GlobalStylesProvider,
 } from '../../../components/LivePreview';
 
-import { SIDEBAR_LEARN_MORE, VIEW_DESIGN_HEADER_MENU } from '../../../../constants';
+import {
+	SIDEBAR_LEARN_MORE,
+	VIEW_DESIGN_HEADER_MENU,
+} from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
 
 const StepDesignHeaderMenu = () => {
@@ -20,28 +22,17 @@ const StepDesignHeaderMenu = () => {
 	}, [] );
 
 	const [ pattern, setPattern ] = useState();
-	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const {
-		setDrawerActiveView,
-		setIsDrawerOpened,
-		setIsDrawerSuppressed,
-		setSidebarActiveView,
-		setIsHeaderNavigationEnabled,
-	} = useDispatch( nfdOnboardingStore );
+	const { setDrawerActiveView, setSidebarActiveView } =
+		useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
 		setPattern( headerMenu );
 	}, [ headerMenu ] );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_DESIGN_HEADER_MENU );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	return (
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
index 065a80396..ccc983dc8 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -1,4 +1,3 @@
-import { useViewportMatch } from '@wordpress/compose';
 import { useLocation } from 'react-router-dom';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -50,8 +49,6 @@ const StepDesignHomepageMenu = () => {
 	const [ homepagePattern, setHomepagePattern ] = useState();
 	const [ selectedHomepage, setSelectedHomepage ] = useState( 0 );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
-
 	const {
 		currentStep,
 		currentData,
@@ -74,22 +71,14 @@ const StepDesignHomepageMenu = () => {
 
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
 		setSidebarActiveView,
-		setIsDrawerSuppressed,
 		setCurrentOnboardingData,
 		updateThemeStatus,
-		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_NAV_DESIGN );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	function refactorPatterns( homepagePatternData ) {
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
index 63b5f6ad2..a2c56b1aa 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
@@ -1,7 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { useViewportMatch } from '@wordpress/compose';
 
 import { store as nfdOnboardingStore } from '../../../../store';
 import CommonLayout from '../../../../components/Layouts/Common';
@@ -29,7 +28,6 @@ const StepDesignThemeStylesMenu = () => {
 	const [ selectedStyle, setSelectedStyle ] = useState();
 
 	const navigate = useNavigate();
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		currentStep,
 		nextStep,
@@ -54,23 +52,15 @@ const StepDesignThemeStylesMenu = () => {
 
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
 		setSidebarActiveView,
-		setIsDrawerSuppressed,
 		updatePreviewSettings,
 		setCurrentOnboardingData,
 		updateThemeStatus,
-		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_NAV_DESIGN );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	const getStylesAndPatterns = async () => {
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
index acf5f26ed..6c5bc0ff1 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js
@@ -2,11 +2,13 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { useLocation } from 'react-router-dom';
 import { CheckboxControl } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { orderBy, filter } from 'lodash';
 
-import { LivePreview } from '../../../../components/LivePreview';
+import {
+	LivePreview,
+	GlobalStylesProvider,
+} from '../../../../components/LivePreview';
 import CommonLayout from '../../../../components/Layouts/Common';
 import {
 	VIEW_DESIGN_THEME_STYLES_PREVIEW,
@@ -17,7 +19,6 @@ import {
 import { store as nfdOnboardingStore } from '../../../../store';
 import { getPatterns } from '../../../../utils/api/patterns';
 import { conditionalSteps } from '../../../../data/routes/';
-import { GlobalStylesProvider } from '../../../../components/LivePreview';
 import { DesignStateHandler } from '../../../../components/StateHandlers';
 
 const StepDesignThemeStylesPreview = () => {
@@ -26,11 +27,9 @@ const StepDesignThemeStylesPreview = () => {
 	const [ pattern, setPattern ] = useState();
 	const [ customize, setCustomize ] = useState( false );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		currentStep,
 		currentData,
-		storedPreviewSettings,
 		routes,
 		designSteps,
 		allSteps,
@@ -42,8 +41,6 @@ const StepDesignThemeStylesPreview = () => {
 			),
 			currentData:
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
-			storedPreviewSettings:
-				select( nfdOnboardingStore ).getPreviewSettings(),
 			routes: select( nfdOnboardingStore ).getRoutes(),
 			allSteps: select( nfdOnboardingStore ).getAllSteps(),
 			designSteps: select( nfdOnboardingStore ).getDesignSteps(),
@@ -53,26 +50,18 @@ const StepDesignThemeStylesPreview = () => {
 
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
 		setSidebarActiveView,
-		setIsDrawerSuppressed,
 		updateRoutes,
 		updateDesignSteps,
 		updateAllSteps,
 		setCurrentOnboardingData,
 		updateThemeStatus,
-		setIsHeaderNavigationEnabled
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_DESIGN_THEME_STYLES_PREVIEW );
 		handleCheckbox( currentData.data.customDesign, false );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	const getStylesAndPatterns = async () => {
@@ -192,11 +181,11 @@ const StepDesignThemeStylesPreview = () => {
 											) }
 										</span>
 									</span>
-							</div>
-						}
-						checked={ customize }
-						onChange={ () => handleCheckbox( ! customize ) }
-					/>
+								</div>
+							}
+							checked={ customize }
+							onChange={ () => handleCheckbox( ! customize ) }
+						/>
 					</div>
 					<div className="theme-styles-preview__title-bar">
 						<div className="theme-styles-preview__title-bar__browser">
@@ -211,15 +200,15 @@ const StepDesignThemeStylesPreview = () => {
 								blockGrammer={ '' }
 								styling={ 'custom' }
 								viewportWidth={ 1300 }
-							/>) 
-						}
+							/>
+						) }
 						{ pattern && (
 							<LivePreview
 								blockGrammer={ pattern }
 								styling={ 'custom' }
 								viewportWidth={ 1300 }
-							/> ) 
-						}
+							/>
+						) }
 					</div>
 				</CommonLayout>
 			</GlobalStylesProvider>
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
index da0affc71..6d0bc3a5a 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js
@@ -1,5 +1,4 @@
 import { useLocation } from 'react-router-dom';
-import { useViewportMatch } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -22,7 +21,6 @@ const StepDesignTypography = () => {
 	const [ pattern, setPattern ] = useState();
 	const [ isLoaded, setIsLoaded ] = useState( false );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const { currentStep } = useSelect( ( select ) => {
 		return {
 			currentStep: select( nfdOnboardingStore ).getStepFromPath(
@@ -31,23 +29,12 @@ const StepDesignTypography = () => {
 		};
 	}, [] );
 
-	const {
-		updateThemeStatus,
-		setDrawerActiveView,
-		setIsDrawerOpened,
-		setSidebarActiveView,
-		setIsDrawerSuppressed,
-		setIsHeaderNavigationEnabled
-	} = useDispatch( nfdOnboardingStore );
+	const { updateThemeStatus, setDrawerActiveView, setSidebarActiveView } =
+		useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( isLargeViewport ) {
-			setIsDrawerOpened( true );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_DESIGN_TYPOGRAPHY );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	const getFontPatterns = async () => {
@@ -78,11 +65,11 @@ const StepDesignTypography = () => {
 						</div>
 					</div>
 					<div className="theme-fonts-preview__live-preview-container">
-						{ !pattern && (
+						{ ! pattern && (
 							<LivePreview
-								blockGrammer={''}
-								styling={'custom'}
-								viewportWidth={1300}
+								blockGrammer={ '' }
+								styling={ 'custom' }
+								viewportWidth={ 1300 }
 							/>
 						) }
 						{ pattern && (
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 3c376b28b..c1aea6682 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -23,14 +23,19 @@ const StepAddress = () => {
 		setIsDrawerSuppressed,
 		setSidebarActiveView,
 		setCurrentOnboardingData,
+		setIsHeaderNavigationEnabled
 	} = useDispatch(nfdOnboardingStore);
 
-	useEffect(() => {
-		if (isLargeViewport) {
-			setIsDrawerOpened(true);
+	const setNavigationState = () => {
+		if ( isLargeViewport ) {
+			setIsDrawerOpened( true );
 		}
+		setIsDrawerSuppressed( false );
+		setIsHeaderNavigationEnabled( true );
+	}
+
+	useEffect(() => {
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed(false);
 		setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO);
 	}, []);
 
@@ -114,7 +119,7 @@ const StepAddress = () => {
 		});
 	}
 	return (
-        <EcommerceStateHandler>
+        <EcommerceStateHandler navigationStateCallback={ setNavigationState }>
 		<CommonLayout isBgPrimary isCentered>
 			<NewfoldLargeCard className='ecommerce-step nfd-ecommerce-address-step'>
 				<div className='onboarding-ecommerce-step'>
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js
index b167c0182..140473cf4 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js
@@ -1,5 +1,4 @@
 import { CheckboxControl, RadioControl } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -14,11 +13,8 @@ import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 
 const StepProducts = () => {
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
-		setIsDrawerSuppressed,
 		setSidebarActiveView,
 		setCurrentOnboardingData,
 	} = useDispatch(nfdOnboardingStore);
@@ -28,11 +24,7 @@ const StepProducts = () => {
 	);
 	let productInfo = currentData.storeDetails.productInfo;
 	useEffect(() => {
-		if (isLargeViewport) {
-			setIsDrawerOpened(true);
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed(false);
 		setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO);
 	}, []);
 
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
index 9a6790e52..c8e184fc4 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
@@ -1,5 +1,4 @@
 import { RadioControl } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch,useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -21,11 +20,8 @@ function createReverseLookup(state) {
 }
 
 const StepTax = () => {
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
-		setIsDrawerSuppressed,
 		setSidebarActiveView,
 		setCurrentOnboardingData,
 	} = useDispatch(nfdOnboardingStore);
@@ -36,11 +32,7 @@ const StepTax = () => {
 	);
 
 	useEffect(() => {
-		if (isLargeViewport) {
-			setIsDrawerOpened(true);
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
-		setIsDrawerSuppressed(false);
 		setDrawerActiveView(VIEW_NAV_ECOMMERCE_STORE_INFO);
 	}, []);
 
diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js
index 17d219aa7..6f05f3ef1 100644
--- a/src/OnboardingSPA/pages/Steps/SitePages/index.js
+++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js
@@ -1,7 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { useLocation } from 'react-router-dom';
-import { useViewportMatch } from '@wordpress/compose';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
@@ -21,8 +20,6 @@ import {
 import LivePreviewSkeleton from '../../../components/LivePreview/LivePreviewSkeleton';
 
 const StepSitePages = () => {
-	const isLargeViewport = useViewportMatch( 'medium' );
-
 	const location = useLocation();
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ sitePages, setSitePages ] = useState();
@@ -44,20 +41,14 @@ const StepSitePages = () => {
 
 	const {
 		setDrawerActiveView,
-		setIsDrawerOpened,
 		setSidebarActiveView,
 		updateThemeStatus,
 		setCurrentOnboardingData,
-		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
-		if ( ! isLargeViewport ) {
-			setIsDrawerOpened( false );
-		}
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 		setDrawerActiveView( VIEW_NAV_DESIGN );
-		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	const getSitePages = async () => {