diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 17ebad06c4d78e..5be58bfca08626 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -462,3 +462,8 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		margin-bottom: auto;
 	}
 }
+
+.zoom-out-separator {
+	/* same color as the iframe's background */
+	background: $gray-300;
+}
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 37dba80511d920..b713ad80f82a02 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -16,6 +16,7 @@ import {
 	useViewportMatch,
 	useMergeRefs,
 	useDebounce,
+	useReducedMotion,
 } from '@wordpress/compose';
 import {
 	createContext,
@@ -27,6 +28,10 @@ import {
 /**
  * Internal dependencies
  */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
 import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import { useInBetweenInserter } from './use-in-between-inserter';
@@ -174,49 +179,97 @@ function Items( {
 	// function on every render.
 	const hasAppender = CustomAppender !== false;
 	const hasCustomAppender = !! CustomAppender;
-	const { order, selectedBlocks, visibleBlocks, shouldRenderAppender } =
-		useSelect(
-			( select ) => {
-				const {
-					getSettings,
-					getBlockOrder,
-					getSelectedBlockClientId,
-					getSelectedBlockClientIds,
-					__unstableGetVisibleBlocks,
-					getTemplateLock,
-					getBlockEditingMode,
-					__unstableGetEditorMode,
-				} = select( blockEditorStore );
-
-				const _order = getBlockOrder( rootClientId );
-
-				if ( getSettings().__unstableIsPreviewMode ) {
-					return {
-						order: _order,
-						selectedBlocks: EMPTY_ARRAY,
-						visibleBlocks: EMPTY_SET,
-					};
-				}
+	const {
+		order,
+		selectedBlocks,
+		visibleBlocks,
+		shouldRenderAppender,
+		isZoomOut,
+		sectionRootClientId,
+		sectionClientIds,
+		blockInsertionPoint,
+	} = useSelect(
+		( select ) => {
+			const {
+				getSettings,
+				getBlockOrder,
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				__unstableGetVisibleBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+				__unstableGetEditorMode,
+				getBlockInsertionPoint,
+			} = unlock( select( blockEditorStore ) );
+			const _order = getBlockOrder( rootClientId );
 
-				const selectedBlockClientId = getSelectedBlockClientId();
+			if ( getSettings().__unstableIsPreviewMode ) {
 				return {
 					order: _order,
-					selectedBlocks: getSelectedBlockClientIds(),
-					visibleBlocks: __unstableGetVisibleBlocks(),
-					shouldRenderAppender:
-						hasAppender &&
-						__unstableGetEditorMode() !== 'zoom-out' &&
-						( hasCustomAppender
-							? ! getTemplateLock( rootClientId ) &&
-							  getBlockEditingMode( rootClientId ) !== 'disabled'
-							: rootClientId === selectedBlockClientId ||
-							  ( ! rootClientId &&
-									! selectedBlockClientId &&
-									! _order.length ) ),
+					selectedBlocks: EMPTY_ARRAY,
+					visibleBlocks: EMPTY_SET,
 				};
-			},
-			[ rootClientId, hasAppender, hasCustomAppender ]
+			}
+
+			const { sectionRootClientId: root } = unlock( getSettings() );
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const sectionRootClientIds = getBlockOrder( root );
+			return {
+				order: _order,
+				selectedBlocks: getSelectedBlockClientIds(),
+				visibleBlocks: __unstableGetVisibleBlocks(),
+				shouldRenderAppender:
+					hasAppender &&
+					__unstableGetEditorMode() !== 'zoom-out' &&
+					( hasCustomAppender
+						? ! getTemplateLock( rootClientId ) &&
+						  getBlockEditingMode( rootClientId ) !== 'disabled'
+						: rootClientId === selectedBlockClientId ||
+						  ( ! rootClientId &&
+								! selectedBlockClientId &&
+								! _order.length ) ),
+				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				sectionRootClientId: root,
+				sectionClientIds: sectionRootClientIds,
+				blockOrder: getBlockOrder( root ),
+				blockInsertionPoint: getBlockInsertionPoint(),
+			};
+		},
+		[ rootClientId, hasAppender, hasCustomAppender ]
+	);
+
+	function isSectionBlock( clientId, sectionIds ) {
+		if ( isZoomOut ) {
+			if ( sectionRootClientId && sectionIds ) {
+				if ( sectionIds?.includes( clientId ) ) {
+					return true;
+				}
+			} else if ( clientId && ! rootClientId ) {
+				return true;
+			}
+		}
+	}
+
+	const isReducedMotion = useReducedMotion();
+	const renderZoomOutSeparator = ( isVisible ) => {
+		return (
+			<AnimatePresence>
+				{ isVisible && (
+					<motion.div
+						layout={ ! isReducedMotion }
+						initial={ { height: 0 } }
+						animate={ { height: '20vh' } }
+						exit={ { height: 0 } }
+						transition={ {
+							duration: 0.25,
+							ease: 'easeInOut',
+						} }
+						className="zoom-out-separator"
+					></motion.div>
+				) }
+			</AnimatePresence>
 		);
+	};
 
 	return (
 		<LayoutProvider value={ layout }>
@@ -230,10 +283,23 @@ function Items( {
 						! selectedBlocks.includes( clientId )
 					}
 				>
+					{ renderZoomOutSeparator(
+						isSectionBlock( clientId, sectionClientIds ) &&
+							blockInsertionPoint.index === 0 &&
+							clientId ===
+								sectionClientIds[ blockInsertionPoint.index ]
+					) }
 					<BlockListBlock
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 					/>
+					{ renderZoomOutSeparator(
+						isSectionBlock( clientId, sectionClientIds ) &&
+							clientId ===
+								sectionClientIds[
+									blockInsertionPoint.index - 1
+								]
+					) }
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 5f5b0401b512e0..c4dd6e698cdfeb 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 
 /**
@@ -17,7 +17,7 @@ function ZoomOutModeInserters() {
 	const {
 		hasSelection,
 		blockOrder,
-		insertionPoint,
+		blockInsertionPoint,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
@@ -29,19 +29,13 @@ function ZoomOutModeInserters() {
 			getSelectionStart,
 			getSelectedBlockClientId,
 			getHoveredBlockClientId,
+			getBlockInsertionPoint,
 		} = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
-		// To do: move ZoomOutModeInserters to core/editor.
-		// Or we perhaps we should move the insertion point state to the
-		// block-editor store. I'm not sure what it was ever moved to the editor
-		// store, because all the inserter components all live in the
-		// block-editor package.
-		// eslint-disable-next-line @wordpress/data-no-store-string-literals
-		const editor = select( 'core/editor' );
 		return {
 			hasSelection: !! getSelectionStart().clientId,
 			blockOrder: getBlockOrder( root ),
-			insertionPoint: unlock( editor ).getInsertionPoint(),
+			blockInsertionPoint: getBlockInsertionPoint(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
@@ -49,7 +43,7 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
-
+	const dispatch = useDispatch( blockEditorStore );
 	const isMounted = useRef( false );
 
 	useEffect( () => {
@@ -76,10 +70,9 @@ function ZoomOutModeInserters() {
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
-		const shouldRenderInserter = insertionPoint.insertionIndex !== index;
+		const shouldRenderInserter = blockInsertionPoint.index !== index;
 
-		const shouldRenderInsertionPoint =
-			insertionPoint.insertionIndex === index;
+		const shouldRenderInsertionPoint = blockInsertionPoint.index === index;
 
 		if ( ! shouldRenderInserter && ! shouldRenderInsertionPoint ) {
 			return null;
@@ -97,24 +90,13 @@ function ZoomOutModeInserters() {
 			hoveredBlockClientId === previousClientId ||
 			hoveredBlockClientId === nextClientId;
 
+		const { showInsertionPoint } = unlock( dispatch );
 		return (
 			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ shouldRenderInsertionPoint && (
-					<div
-						style={ {
-							borderRadius: '0',
-							height: '12px',
-							opacity: 1,
-							transform: 'translateY(-50%)',
-							width: '100%',
-						} }
-						className="block-editor-block-list__insertion-point-indicator"
-					/>
-				) }
 				{ shouldRenderInserter && (
 					<ZoomOutModeInserterButton
 						isVisible={ isSelected || isHovered }
@@ -125,6 +107,10 @@ function ZoomOutModeInserters() {
 								tab: 'patterns',
 								category: 'all',
 							} );
+
+							showInsertionPoint( sectionRootClientId, index, {
+								operation: 'insert',
+							} );
 						} }
 					/>
 				) }