diff --git a/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js b/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js
index 9961ccad90a96..e06fa8ac755d5 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, castArray, debounce, noop } from 'lodash';
+import { get, castArray, debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -112,13 +112,13 @@ const BlockLayoutPreview = ( {
 
 	// Scroll the preview to the top when the blocks change.
 	useEffect( () => {
-		const templatePreivew = document.querySelector( '.template-selector-preview' );
-		if ( ! templatePreivew ) {
+		const templatePreview = document.querySelector( '.template-selector-preview' );
+		if ( ! templatePreview ) {
 			return;
 		}
 
 		// scroll to top when blocks changes.
-		templatePreivew.scrollTop = 0;
+		templatePreview.scrollTop = 0;
 	}, [ recomputeBlockListKey ] );
 
 	// Handling windows resize event.
@@ -126,6 +126,9 @@ const BlockLayoutPreview = ( {
 		const refreshPreview = debounce( rescale, DEBOUNCE_TIMEOUT );
 		window.addEventListener( 'resize', refreshPreview );
 
+		// Call once initially to ensure layouts are set to the correct scale at the outset.
+		rescale();
+
 		return () => {
 			window.removeEventListener( 'resize', refreshPreview );
 		};