diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
index cd7720a1a34f97..8b2a822c447035 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -1,15 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { chevronUpDown } from '@wordpress/icons';
-import { Button, ToolbarItem } from '@wordpress/components';
 import {
-	store as editorStore,
 	privateApis as editorPrivateApis,
+	store as editorStore,
 } from '@wordpress/editor';
 
 /**
@@ -19,11 +15,7 @@ import { unlock } from '../../../lock-unlock';
 
 const { DocumentTools: EditorDocumentTools } = unlock( editorPrivateApis );
 
-export default function DocumentTools( {
-	blockEditorMode,
-	hasFixedToolbar,
-	isDistractionFree,
-} ) {
+export default function DocumentTools() {
 	const { isVisualMode } = useSelect( ( select ) => {
 		const { getEditorMode } = select( editorStore );
 
@@ -31,38 +23,11 @@ export default function DocumentTools( {
 			isVisualMode: getEditorMode() === 'visual',
 		};
 	}, [] );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { setDeviceType } = useDispatch( editorStore );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView && isVisualMode;
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
 
 	return (
 		<EditorDocumentTools
 			disableBlockTools={ ! isVisualMode }
 			listViewLabel={ __( 'List View' ) }
-		>
-			{ isZoomedOutViewExperimentEnabled &&
-				isLargeViewport &&
-				! isDistractionFree &&
-				! hasFixedToolbar && (
-					<ToolbarItem
-						as={ Button }
-						className="edit-site-header-edit-mode__zoom-out-view-toggle"
-						icon={ chevronUpDown }
-						isPressed={ isZoomedOutView }
-						/* translators: button label text should, if possible, be under 16 characters. */
-						label={ __( 'Zoom-out View' ) }
-						onClick={ () => {
-							setDeviceType( 'Desktop' );
-							__unstableSetEditorMode(
-								isZoomedOutView ? 'edit' : 'zoom-out'
-							);
-						} }
-						size="compact"
-					/>
-				) }
-		</EditorDocumentTools>
+		/>
 	);
 }
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 3414a2c95ea312..39c5c927a24a8d 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -107,15 +107,6 @@
 	gap: $grid-unit-10;
 }
 
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
 // Button text label styles
 
 .edit-site-header-edit-mode.show-icon-labels {
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index d78ef020fe232f..961936d4b15420 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -14,7 +14,7 @@ import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
-
+import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -22,22 +22,35 @@ import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
-		useSelect( ( select ) => {
-			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getUnstableBase, getPostType } = select( coreStore );
-			const { get } = select( preferencesStore );
-			const _currentPostType = getCurrentPostType();
-			return {
-				deviceType: getDeviceType(),
-				homeUrl: getUnstableBase()?.home,
-				isTemplate: _currentPostType === 'wp_template',
-				isViewable: getPostType( _currentPostType )?.viewable ?? false,
-				showIconLabels: get( 'core', 'showIconLabels' ),
-			};
-		}, [] );
+	const {
+		deviceType,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+		blockEditorMode,
+	} = useSelect( ( select ) => {
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+		const { getDeviceType, getCurrentPostType } = select( editorStore );
+		const { getUnstableBase, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			blockEditorMode: __unstableGetEditorMode(),
+			deviceType: getDeviceType(),
+			homeUrl: getUnstableBase()?.home,
+			isTemplate: _currentPostType === 'wp_template',
+			isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+		};
+	}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const isZoomedOutViewExperimentEnabled =
+		window?.__experimentalEnableZoomedOutView;
+	const isZoomedOutView = blockEditorMode === 'zoom-out';
 	const isMobile = useViewportMatch( 'medium', '<' );
+
 	if ( isMobile ) return null;
 
 	const popoverProps = {
@@ -74,24 +87,55 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 				<>
 					<MenuGroup>
 						<MenuItem
-							onClick={ () => setDeviceType( 'Desktop' ) }
+							onClick={ () => {
+								setDeviceType( 'Desktop' );
+								__unstableSetEditorMode( 'edit' );
+							} }
 							icon={ deviceType === 'Desktop' && check }
 						>
 							{ __( 'Desktop' ) }
 						</MenuItem>
 						<MenuItem
-							onClick={ () => setDeviceType( 'Tablet' ) }
+							onClick={ () => {
+								setDeviceType( 'Tablet' );
+								__unstableSetEditorMode( 'edit' );
+							} }
 							icon={ deviceType === 'Tablet' && check }
 						>
 							{ __( 'Tablet' ) }
 						</MenuItem>
 						<MenuItem
-							onClick={ () => setDeviceType( 'Mobile' ) }
+							onClick={ () => {
+								setDeviceType( 'Mobile' );
+								__unstableSetEditorMode( 'edit' );
+							} }
 							icon={ deviceType === 'Mobile' && check }
 						>
 							{ __( 'Mobile' ) }
 						</MenuItem>
 					</MenuGroup>
+					{ isZoomedOutViewExperimentEnabled && (
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									__unstableSetEditorMode( 'edit' );
+								} }
+								icon={ ! isZoomedOutView && check }
+							>
+								{ __( 'Zoom to 100%' ) }
+							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									setDeviceType( 'Desktop' );
+									__unstableSetEditorMode( 'zoom-out' );
+								} }
+								icon={ isZoomedOutView && check }
+								disabled={ deviceType !== 'Desktop' }
+							>
+								{ __( 'Zoom to 50%' ) }
+							</MenuItem>
+						</MenuGroup>
+					) }
 					{ isTemplate && (
 						<MenuGroup>
 							<MenuItem