diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index eb796ae696541..0fc26721a3304 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -637,8 +637,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 }
 
 .wp-block-navigation__menu-inspector-controls {
-	overflow-x: auto;
-
 	@include custom-scrollbars-on-hover(transparent, $gray-600);
 }
 
diff --git a/packages/components/src/navigator/styles.ts b/packages/components/src/navigator/styles.ts
index 0203edbdf1816..096d7f89b4c22 100644
--- a/packages/components/src/navigator/styles.ts
+++ b/packages/components/src/navigator/styles.ts
@@ -5,12 +5,12 @@ import { css, keyframes } from '@emotion/react';
 
 export const navigatorProviderWrapper = css`
 	/* Prevents horizontal overflow while animating screen transitions */
-	overflow-x: hidden;
+	overflow: visible;
 	/* Mark this subsection of the DOM as isolated, providing performance benefits
 	 * by limiting calculations of layout, style and paint to a DOM subtree rather
 	 * than the entire page.
 	 */
-	contain: content;
+	/* contain: content; */
 `;
 
 const fadeInFromRight = keyframes( {
@@ -62,8 +62,6 @@ const navigatorScreenAnimation = ( {
 };
 
 export const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css`
-	/* Ensures horizontal overflow is visually accessible */
-	overflow-x: auto;
 	/* In case the root has a height, it should not be exceeded */
 	max-height: 100%;
 
diff --git a/packages/edit-site/src/components/edit-overlay/index.js b/packages/edit-site/src/components/edit-overlay/index.js
new file mode 100644
index 0000000000000..15b7045487588
--- /dev/null
+++ b/packages/edit-site/src/components/edit-overlay/index.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import {
+	Button,
+	SVG,
+	Path,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+const EditOverlay = ( { onClick, label } ) => {
+	const [ isVisible, setIsVisible ] = useState( true );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			setIsVisible( false );
+		}, 4000 );
+
+		return () => clearTimeout( timeout );
+	}, [ backgroundColor ] );
+
+	return (
+		<AnimatePresence>
+			{ isVisible && (
+				<motion.div
+					initial={ { opacity: 0 } }
+					animate={ { opacity: 1 } }
+					exit={ { opacity: 0 } }
+					onClick={ onClick }
+					role="button"
+					className="edit-site-layout__edit-overlay"
+				>
+					<motion.div
+						initial={ { opacity: 0, y: 10 } }
+						animate={ { opacity: 1, y: 0 } }
+						exit={ { opacity: 0, y: 10 } }
+					>
+						<Button
+							className="edit-site-layout__edit-overlay-button"
+							onClick={ onClick }
+							icon={
+								<SVG
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								>
+									<Path d="m9 9 5 12 1.8-5.2L21 14Z" />
+									<Path d="M7.2 2.2 8 5.1" />
+									<Path d="m5.1 8-2.9-.8" />
+									<Path d="M14 4.1 12 6" />
+									<Path d="m6 12-1.9 2" />
+								</SVG>
+							}
+						>
+							{ label }
+						</Button>
+					</motion.div>
+					{ /* Your content here */ }
+				</motion.div>
+			) }
+		</AnimatePresence>
+	);
+};
+
+export default EditOverlay;
diff --git a/packages/edit-site/src/components/edit-overlay/style.scss b/packages/edit-site/src/components/edit-overlay/style.scss
new file mode 100644
index 0000000000000..becafabea7116
--- /dev/null
+++ b/packages/edit-site/src/components/edit-overlay/style.scss
@@ -0,0 +1,40 @@
+.edit-site-layout__edit-overlay {
+	position: absolute;
+	z-index: 100;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+	padding-bottom: $grid-unit-40;
+	color: $white;
+	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.4) 100%);
+
+	.edit-site-layout__edit-overlay-button {
+		position: relative;
+		z-index: 10;
+		background: rgba(255, 255, 255, 0.6);
+		color: $gray-900;
+		border: 0;
+		border-radius: 999px;
+		cursor: pointer;
+		transition: background-color ease 0.1s;
+		box-shadow: 0 2px 4px rgba($black, 0.1);
+
+		&:hover {
+			background-color: $gray-100;
+		}
+	}
+
+	.edit-site-layout__edit-overlay-backdrop {
+		z-index: 5;
+		opacity: 0.7;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 9c95755db2803..44ebcb14ab88e 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -6,8 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { Notice } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Notice,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
 import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -20,6 +24,7 @@ import {
 import {
 	InterfaceSkeleton,
 	ComplementaryArea,
+	NavigableRegion,
 	store as interfaceStore,
 } from '@wordpress/interface';
 import {
@@ -55,6 +60,8 @@ import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
 import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import Header from '../header-edit-mode';
+import EditOverlay from '../edit-overlay';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
 const {
@@ -151,6 +158,8 @@ export default function Editor( { isLoading } ) {
 		};
 	}, [] );
 
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
@@ -195,6 +204,27 @@ export default function Editor( { isLoading } ) {
 
 	return (
 		<>
+			{ ! isLoading && canvasMode !== 'edit' && (
+				<EditOverlay
+					label="Click your site preview to edit"
+					onClick={ () => setCanvasMode( 'edit' ) }
+				/>
+			) }
+			<AnimatePresence>
+				{ ! isLoading && (
+					<NavigableRegion
+						key="header"
+						className="edit-site-layout__header"
+						ariaLabel={ __( 'Editor top bar' ) }
+						as={ motion.div }
+						animate={ {
+							marginTop: canvasMode === 'edit' ? 0 : -60,
+						} }
+					>
+						<Header />
+					</NavigableRegion>
+				) }
+			</AnimatePresence>
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ hasLoadedPost && ! editedPost && (
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index 5b8b44f63efe7..b981451374953 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -18,8 +18,8 @@ import { __ } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 import {
 	Button,
-	__unstableMotion as motion,
 	Popover,
+	__unstableMotion as motion,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -92,6 +92,14 @@ export default function HeaderEditMode() {
 
 	const hasBlockSelected = !! blockSelectionStart;
 
+	const { canvasMode } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+
+		return {
+			canvasMode: getCanvasMode(),
+		};
+	}, [] );
+
 	useEffect( () => {
 		// If we have a new block selection, show the block tools
 		if ( blockSelectionStart ) {
@@ -124,46 +132,54 @@ export default function HeaderEditMode() {
 					variants={ toolbarVariants }
 					transition={ toolbarTransition }
 				>
-					<DocumentTools
-						blockEditorMode={ blockEditorMode }
-						isDistractionFree={ isDistractionFree }
-					/>
-					{ isTopToolbar && (
-						<>
-							<div
-								className={ classnames(
-									'selected-block-tools-wrapper',
-									{
-										'is-collapsed': isBlockToolsCollapsed,
-									}
-								) }
-							>
-								<BlockToolbar hideDragHandle />
-							</div>
-							<Popover.Slot
-								ref={ blockToolbarRef }
-								name="block-toolbar"
-							/>
-							{ hasBlockSelected && (
-								<Button
-									className="edit-site-header-edit-mode__block-tools-toggle"
-									icon={
-										isBlockToolsCollapsed ? next : previous
-									}
-									onClick={ () => {
-										setIsBlockToolsCollapsed(
-											( collapsed ) => ! collapsed
-										);
-									} }
-									label={
-										isBlockToolsCollapsed
-											? __( 'Show block tools' )
-											: __( 'Hide block tools' )
-									}
+					<motion.div
+						animate={ { opacity: canvasMode === 'edit' ? 1 : 0 } }
+					>
+						<DocumentTools
+							blockEditorMode={ blockEditorMode }
+							isDistractionFree={ isDistractionFree }
+						/>
+
+						{ isTopToolbar && (
+							<>
+								<div
+									className={ classnames(
+										'selected-block-tools-wrapper',
+										{
+											'is-collapsed':
+												isBlockToolsCollapsed,
+										}
+									) }
+								>
+									<BlockToolbar hideDragHandle />
+								</div>
+								<Popover.Slot
+									ref={ blockToolbarRef }
+									name="block-toolbar"
 								/>
-							) }
-						</>
-					) }
+								{ hasBlockSelected && (
+									<Button
+										className="edit-site-header-edit-mode__block-tools-toggle"
+										icon={
+											isBlockToolsCollapsed
+												? next
+												: previous
+										}
+										onClick={ () => {
+											setIsBlockToolsCollapsed(
+												( collapsed ) => ! collapsed
+											);
+										} }
+										label={
+											isBlockToolsCollapsed
+												? __( 'Show block tools' )
+												: __( 'Hide block tools' )
+										}
+									/>
+								) }
+							</>
+						) }
+					</motion.div>
 				</motion.div>
 			) }
 
@@ -174,43 +190,49 @@ export default function HeaderEditMode() {
 						{
 							'is-collapsed':
 								! isBlockToolsCollapsed && isLargeViewport,
+							'is-view-mode': canvasMode === 'view',
 						}
 					) }
 				>
 					{ ! hasDefaultEditorCanvasView ? (
 						getEditorCanvasContainerTitle( editorCanvasView )
 					) : (
-						<DocumentBar />
+						<DocumentBar isNaked={ canvasMode === 'view' } />
 					) }
 				</div>
 			) }
 
 			<div className="edit-site-header-edit-mode__end">
 				<motion.div
-					className="edit-site-header-edit-mode__actions"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
+					animate={ { opacity: canvasMode === 'edit' ? 1 : 0 } }
 				>
-					{ isLargeViewport && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
-					) }
-					<PostViewLink />
-					<SaveButton size="compact" />
-					{ ! isDistractionFree && (
-						<PinnedItems.Slot scope="core/edit-site" />
-					) }
-					<MoreMenu showIconLabels={ showIconLabels } />
+					<motion.div
+						className="edit-site-header-edit-mode__actions"
+						variants={ toolbarVariants }
+						transition={ toolbarTransition }
+					>
+						{ isLargeViewport && (
+							<div
+								className={ classnames(
+									'edit-site-header-edit-mode__preview-options',
+									{ 'is-zoomed-out': isZoomedOutView }
+								) }
+							>
+								<PreviewDropdown
+									disabled={
+										isFocusMode ||
+										! hasDefaultEditorCanvasView
+									}
+								/>
+							</div>
+						) }
+						<PostViewLink />
+						<SaveButton size="compact" />
+						{ ! isDistractionFree && (
+							<PinnedItems.Slot scope="core/edit-site" />
+						) }
+						<MoreMenu showIconLabels={ showIconLabels } />
+					</motion.div>
 				</motion.div>
 			</div>
 		</div>
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 163d4fe6e938f..620e29b479fd9 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -6,8 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	Button,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
@@ -17,6 +18,7 @@ import {
 	useViewportMatch,
 	useResizeObserver,
 } from '@wordpress/compose';
+import { Icon, chevronLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
@@ -31,6 +33,7 @@ import {
 	useBlockCommands,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
@@ -39,9 +42,7 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import Sidebar from '../sidebar';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
-import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../lock-unlock';
@@ -52,12 +53,13 @@ import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
+import SiteIcon from '../site-icon';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-const ANIMATION_DURATION = 0.5;
+const ANIMATION_DURATION = 0.4;
 
 export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
@@ -75,15 +77,21 @@ export default function Layout() {
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
+		dashboardLink,
 		previousShortcut,
 		nextShortcut,
 	} = useSelect( ( select ) => {
 		const { getAllShortcutKeyCombinations } = select(
 			keyboardShortcutsStore
 		);
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		const { getCanvasMode, getSettings } = unlock(
+			select( editSiteStore )
+		);
+
 		return {
 			canvasMode: getCanvasMode(),
+			dashboardLink:
+				getSettings().__experimentalDashboardLink || 'index.php',
 			previousShortcut: getAllShortcutKeyCombinations(
 				'core/edit-site/previous-region'
 			),
@@ -114,27 +122,6 @@ export default function Layout() {
 		useState( false );
 	const { areas, widths } = useLayoutAreas();
 
-	// This determines which animation variant should apply to the header.
-	// There is also a `isDistractionFreeHovering` state that gets priority
-	// when hovering the `edit-site-layout__header-container` in distraction
-	// free mode. It's set via framer and trickles down to all the children
-	// so they can use this variant state too.
-	//
-	// TODO: The issue with this is we want to have the hover state stick when hovering
-	// a popover opened via the header. We'll probably need to lift this state to
-	// handle it ourselves. Also, focusWithin the header needs to be handled.
-	let headerAnimationState;
-
-	if ( canvasMode === 'view' ) {
-		// We need 'view' to always take priority so 'isDistractionFree'
-		// doesn't bleed over into the view (sidebar) state
-		headerAnimationState = 'view';
-	} else if ( isDistractionFree ) {
-		headerAnimationState = 'isDistractionFree';
-	} else {
-		headerAnimationState = canvasMode; // edit, view, init
-	}
-
 	// Sets the right context for the command palette
 	let commandContext = 'site-editor';
 
@@ -149,6 +136,103 @@ export default function Layout() {
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { setDeviceType } = useDispatch( editorStore );
+	const siteIconButtonProps =
+		canvasMode === 'view'
+			? {
+					href: dashboardLink,
+					label: __( 'Go to the Dashboard' ),
+			  }
+			: {
+					href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
+					role: 'button',
+					label: __( 'Open Navigation' ),
+					onClick: ( event ) => {
+						event.preventDefault();
+						if ( canvasMode === 'edit' ) {
+							clearSelectedBlock();
+							setDeviceType( 'Desktop' );
+							setCanvasMode( 'view' );
+						}
+					},
+			  };
+
+	const toggleVariants = {
+		view: {
+			width: 32,
+			height: 32,
+			top: 30,
+			left: 24,
+			borderRadius: '4px',
+			boxShadow: '0px 6px 15px rgba(0,0,0,.3)',
+			transition: {
+				duration: 0.7,
+				type: 'spring',
+				bounce: 0.4,
+			},
+		},
+		edit: {
+			width: [ 32, 60 ],
+			height: [ 32, 60 ],
+			top: [ 30, 0 ],
+			left: 0,
+			borderRadius: '0px',
+			boxShadow: 'none',
+			transition: {
+				delay: 0.1,
+				duration: 0.2,
+				type: 'tween',
+				stiffness: 400,
+			},
+		},
+	};
+
+	const siteIconVariants = {
+		view: {
+			clipPath: 'inset(0% round 0)',
+		},
+		edit: {
+			clipPath: 'inset(0% round 0)',
+		},
+		hover: {
+			clipPath:
+				canvasMode === 'edit'
+					? 'inset( 22% round 2px )'
+					: 'inset(0% round 0)',
+			transition: {
+				duration: 0.2,
+			},
+		},
+		tap: {
+			// scale: canvasMode === 'edit' ? 0.6 : 1,
+			clipPath: 'inset(0% round 0)',
+			transition: {
+				delay: 0.1,
+			},
+		},
+	};
+
+	const toggleHomeIconVariants = {
+		view: {
+			opacity: 0,
+			scale: 0.2,
+		},
+		edit: {
+			opacity: 0,
+			scale: 0.2,
+		},
+		hover: {
+			opacity: canvasMode === 'edit' ? 1 : 0,
+			scale: 1,
+			clipPath:
+				canvasMode === 'edit'
+					? 'inset( 22% round 2px )'
+					: 'inset(0% round 0)',
+		},
+	};
+
 	// Synchronizing the URL with the store value of canvasMode happens in an effect
 	// This condition ensures the component is only rendered after the synchronization happens
 	// which prevents any animations due to potential canvasMode value change.
@@ -177,80 +261,35 @@ export default function Layout() {
 					}
 				) }
 			>
-				<motion.div
-					className="edit-site-layout__header-container"
-					variants={ {
-						isDistractionFree: {
-							opacity: 0,
-							transition: {
-								type: 'tween',
-								delay: 0.8,
-								delayChildren: 0.8,
-							}, // How long to wait before the header exits
-						},
-						isDistractionFreeHovering: {
-							opacity: 1,
-							transition: {
-								type: 'tween',
-								delay: 0.2,
-								delayChildren: 0.2,
-							}, // How long to wait before the header shows
-						},
-						view: { opacity: 1 },
-						edit: { opacity: 1 },
-					} }
-					whileHover={
-						isDistractionFree
-							? 'isDistractionFreeHovering'
-							: undefined
-					}
-					animate={ headerAnimationState }
-				>
-					<SiteHub
-						isTransparent={ isResizableFrameOversized }
-						className="edit-site-layout__hub"
-					/>
-
-					<AnimatePresence initial={ false }>
-						{ canvasMode === 'edit' && (
-							<NavigableRegion
-								key="header"
-								className="edit-site-layout__header"
-								ariaLabel={ __( 'Editor top bar' ) }
-								as={ motion.div }
-								variants={ {
-									isDistractionFree: { opacity: 0, y: 0 },
-									isDistractionFreeHovering: {
-										opacity: 1,
-										y: 0,
-									},
-									view: { opacity: 1, y: '-100%' },
-									edit: { opacity: 1, y: 0 },
-								} }
-								exit={ {
-									y: '-100%',
-								} }
-								initial={ {
-									opacity: isDistractionFree ? 1 : 0,
-									y: isDistractionFree ? 0 : '-100%',
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion ? 0 : 0.2,
-									ease: 'easeOut',
-								} }
-							>
-								<Header />
-							</NavigableRegion>
-						) }
-					</AnimatePresence>
-				</motion.div>
-
 				<div className="edit-site-layout__content">
 					{ /*
 						The NavigableRegion must always be rendered and not use
 						`inert` otherwise `useNavigateRegions` will fail.
 					*/ }
+					<motion.div
+						className="edit-site-layout__view-mode-toggle"
+						variants={ toggleVariants }
+						animate={ canvasMode }
+						initial={ canvasMode }
+						whileHover="hover"
+						whileTap="tap"
+					>
+						<Button
+							{ ...siteIconButtonProps }
+							showTooltip
+							tooltipPosition={ 'middle right' }
+						>
+							<motion.div variants={ siteIconVariants }>
+								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							</motion.div>
+						</Button>
+						<motion.div
+							className="edit-site-layout__home-icon"
+							variants={ toggleHomeIconVariants }
+						>
+							<Icon icon={ chevronLeft } />
+						</motion.div>
+					</motion.div>
 					<NavigableRegion
 						ariaLabel={ __( 'Navigation' ) }
 						className="edit-site-layout__sidebar-region"
@@ -296,19 +335,6 @@ export default function Layout() {
 							{ canvasResizer }
 							{ !! canvasSize.width && (
 								<motion.div
-									whileHover={
-										canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration: disableMotion
-															? 0
-															: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
 									initial={ false }
 									layout="position"
 									className={ classnames(
@@ -318,6 +344,13 @@ export default function Layout() {
 												isResizableFrameOversized,
 										}
 									) }
+									animate={ {
+										left: canvasMode === 'edit' ? -392 : 0,
+										right: canvasMode === 'edit' ? -16 : 0,
+										top: canvasMode === 'edit' ? -16 : 0,
+										bottom: canvasMode === 'edit' ? -16 : 0,
+										opacity: 1,
+									} }
 									transition={ {
 										type: 'tween',
 										duration: disableMotion
@@ -333,9 +366,7 @@ export default function Layout() {
 												canvasMode === 'edit'
 											}
 											defaultSize={ {
-												width:
-													canvasSize.width -
-													24 /* $canvas-padding */,
+												width: canvasSize.width,
 												height: canvasSize.height,
 											} }
 											isOversized={
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 9be0b001ed9e2..af3d54192b47e 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -7,23 +7,10 @@
 }
 
 .edit-site-layout__hub {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: calc(100vw - #{$canvas-padding * 2});
 	height: $header-height;
+	padding-left: $grid-unit-60;
+	flex-shrink: 0;
 	z-index: z-index(".edit-site-layout__hub");
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$grid-unit-30});
-	}
-
-	.edit-site-layout.is-full-canvas & {
-		padding-right: 0;
-		border-radius: 0;
-		width: $header-height;
-		box-shadow: none;
-	}
 }
 
 .edit-site-layout__header-container {
@@ -34,17 +21,13 @@
 	height: $header-height;
 	display: flex;
 	z-index: z-index(".edit-site-layout__header");
-
-	// This is only necessary for the exit animation
-	.edit-site-layout:not(.is-full-canvas) & {
-		position: fixed;
-		width: 100vw;
-	}
 }
 
 .edit-site-layout__content {
 	height: 100%;
 	flex-grow: 1;
+	padding: $canvas-padding;
+	gap: $canvas-padding;
 	display: flex;
 }
 
@@ -57,18 +40,11 @@
 		width: $nav-sidebar-width;
 	}
 
-	// This is only necessary for the exit animation
-	.edit-site-layout.is-full-canvas & {
-		position: fixed !important;
-		height: 100vh;
-		left: 0;
-		top: 0;
-	}
-
 	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		padding: 0 $grid-unit-10;
 	}
 
 	.resizable-editor__drag-handle {
@@ -106,7 +82,7 @@
 	top: 0;
 	left: 0;
 	bottom: 0;
-	width: 100%;
+	right: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -120,10 +96,6 @@
 	}
 
 	@include break-medium {
-		top: $canvas-padding;
-		bottom: $canvas-padding;
-		width: calc(100% - #{$canvas-padding});
-
 		& > div {
 			border-radius: $radius-block-ui * 4;
 			// Not sure why this is necessary.
@@ -136,10 +108,6 @@
 	}
 
 	.edit-site-layout.is-full-canvas & {
-		top: 0;
-		bottom: 0;
-		width: 100%;
-
 		& > div {
 			border-radius: 0;
 		}
@@ -157,61 +125,37 @@
 	height: 100%;
 }
 
-.edit-site-layout__view-mode-toggle.components-button {
-	position: relative;
-	color: $white;
-	border-radius: 0;
+.edit-site-layout__view-mode-toggle {
+	position: fixed;
+	top: $canvas-padding;
 	height: $header-height;
 	width: $header-height;
-	overflow: hidden;
-	padding: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-bottom: 1px solid transparent;
-
-	.edit-site-layout.is-full-canvas & {
-		border-bottom-color: $gray-200;
-		transition: border-bottom-color 0.15s 0.4s ease-out;
-	}
-
-	&:hover,
-	&:active {
+	z-index: 100;
+	.components-button {
 		color: $white;
-	}
-
-	&:focus {
-		box-shadow: none;
-	}
-
-	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
-		content: "";
-		display: block;
-		position: absolute;
-		top: 9px;
-		right: 9px;
-		bottom: 9px;
-		left: 9px;
-		border-radius: $radius-block-ui + $border-width + $border-width;
-		box-shadow: none;
-	}
+		height: 100%;
+		width: 100%;
+		border-radius: 0;
+		overflow: hidden;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		&:hover,
+		&:active {
+			color: $white;
+		}
 
-	// Lightened spot color focus.
-	&:focus::before {
-		box-shadow:
-			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
-			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		&:focus {
+			box-shadow: none;
+		}
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {
-		display: flex;
-		border-radius: $radius-block-ui;
-		height: $grid-unit-80;
-		width: $grid-unit-80;
-		justify-content: center;
-		align-items: center;
+		svg,
+		img {
+			display: block;
+		}
 	}
 }
 
@@ -268,19 +212,12 @@
 		}
 	}
 
-	.edit-site-site-hub,
 	.edit-site-layout__header {
 		position: absolute;
 		top: 0;
 		z-index: z-index(".edit-site-layout__header");
-	}
-	.edit-site-site-hub {
-		z-index: z-index(".edit-site-layout__hub");
-	}
-	.edit-site-layout__header {
 		width: 100%;
 	}
-
 }
 
 .edit-site-layout__area {
diff --git a/packages/edit-site/src/components/resizable-frame/style.scss b/packages/edit-site/src/components/resizable-frame/style.scss
index 3247525cc2e16..98d367726f9bd 100644
--- a/packages/edit-site/src/components/resizable-frame/style.scss
+++ b/packages/edit-site/src/components/resizable-frame/style.scss
@@ -23,6 +23,7 @@
 
 .edit-site-resizable-frame__inner-content {
 	position: absolute;
+	overflow: hidden;
 	z-index: 0;
 	inset: 0;
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
index 908056d52af48..8cb5181fb30dd 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -1,7 +1,7 @@
 .edit-site-sidebar-navigation-item.components-item {
 	color: $gray-600;
 	// 6px right padding to align with + button
-	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
+	padding: $grid-unit-10 $grid-unit-20;
 	border: none;
 	min-height: $grid-unit-50;
 	border-radius: $radius-block-ui;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 44e266cdf6011..be6ce56f5c8a2 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -16,8 +16,6 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	padding: 0 $grid-unit-20;
-
 	.components-item-group {
 		margin-left: -$grid-unit-20;
 		margin-right: -$grid-unit-20;
@@ -60,7 +58,7 @@
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-60 + $header-height;
+	padding-top: $grid-unit-40;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 19cd55ae6fac2..0c99d3632d474 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -33,6 +33,7 @@ import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
 import SidebarNavigationScreenPagesDataViews from '../sidebar-navigation-screen-pages-dataviews';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+import SiteHub from '../site-hub';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -99,6 +100,7 @@ function Sidebar() {
 
 	return (
 		<>
+			<SiteHub className="edit-site-layout__hub" />
 			<NavigatorProvider
 				className="edit-site-sidebar__content"
 				initialPath={ initialPath.current }
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index ef24b0d4b8cf6..b8251c3b37857 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -9,9 +9,6 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-
-	// This matches the logo padding
-	padding: 0 $grid-unit-15;
 }
 
 .edit-site-sidebar__footer {
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index f79df2df36709..48f3f69774fbd 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -10,93 +10,32 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { useReducedMotion } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { memo } from '@wordpress/element';
 import { search, external } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import SiteIcon from '../site-icon';
-import { unlock } from '../../lock-unlock';
-
-const HUB_ANIMATION_DURATION = 0.3;
-
 const SiteHub = memo( ( { isTransparent, className } ) => {
-	const { canvasMode, dashboardLink, homeUrl, siteTitle } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getSettings } = unlock(
-				select( editSiteStore )
-			);
-
-			const {
-				getSite,
-				getUnstableBase, // Site index.
-			} = select( coreStore );
+	const { homeUrl, siteTitle } = useSelect( ( select ) => {
+		const {
+			getSite,
+			getUnstableBase, // Site index.
+		} = select( coreStore );
 
-			return {
-				canvasMode: getCanvasMode(),
-				dashboardLink:
-					getSettings().__experimentalDashboardLink || 'index.php',
-				homeUrl: getUnstableBase()?.home,
-				siteTitle: getSite()?.title,
-			};
-		},
-		[]
-	);
+		return {
+			homeUrl: getUnstableBase()?.home,
+			siteTitle: getSite()?.title,
+		};
+	}, [] );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 
-	const disableMotion = useReducedMotion();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setDeviceType } = useDispatch( editorStore );
-	const isBackToDashboardButton = canvasMode === 'view';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink,
-				label: __( 'Go to the Dashboard' ),
-		  }
-		: {
-				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
-				role: 'button',
-				label: __( 'Open Navigation' ),
-				onClick: ( event ) => {
-					event.preventDefault();
-					if ( canvasMode === 'edit' ) {
-						clearSelectedBlock();
-						setDeviceType( 'Desktop' );
-						setCanvasMode( 'view' );
-					}
-				},
-		  };
-
 	return (
-		<motion.div
-			className={ classnames( 'edit-site-site-hub', className ) }
-			variants={ {
-				isDistractionFree: { x: '-100%' },
-				isDistractionFreeHovering: { x: 0 },
-				view: { x: 0 },
-				edit: { x: 0 },
-			} }
-			initial={ false }
-			transition={ {
-				type: 'tween',
-				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-				ease: 'easeOut',
-			} }
-		>
+		<motion.div className={ classnames( 'edit-site-site-hub', className ) }>
 			<HStack
 				justify="space-between"
 				alignment="center"
@@ -105,100 +44,36 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
-					spacing="0"
+					spacing={ 3 }
 				>
-					<motion.div
+					<div
 						className={ classnames(
-							'edit-site-site-hub__view-mode-toggle-container',
-							{
-								'has-transparent-background': isTransparent,
-							}
+							'edit-site-site-hub__site-title'
 						) }
-						layout
-						transition={ {
-							type: 'tween',
-							duration: disableMotion
-								? 0
-								: HUB_ANIMATION_DURATION,
-							ease: 'easeOut',
-						} }
 					>
-						<Button
-							{ ...siteIconButtonProps }
-							className="edit-site-layout__view-mode-toggle"
-						>
-							<motion.div
-								initial={ false }
-								animate={ {
-									scale: canvasMode === 'view' ? 0.5 : 1,
-								} }
-								whileHover={ {
-									scale: canvasMode === 'view' ? 0.5 : 0.96,
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: HUB_ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-							</motion.div>
-						</Button>
-					</motion.div>
-
-					<AnimatePresence>
-						<motion.div
-							layout={ canvasMode === 'edit' }
-							animate={ {
-								opacity: canvasMode === 'view' ? 1 : 0,
-							} }
-							exit={ {
-								opacity: 0,
-							} }
-							className={ classnames(
-								'edit-site-site-hub__site-title',
-								{ 'is-transparent': isTransparent }
-							) }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion ? 0 : 0.2,
-								ease: 'easeOut',
-								delay: canvasMode === 'view' ? 0.1 : 0,
-							} }
-						>
-							{ decodeEntities( siteTitle ) }
-						</motion.div>
-					</AnimatePresence>
-					{ canvasMode === 'view' && (
-						<Button
-							href={ homeUrl }
-							target="_blank"
-							label={ __( 'View site (opens in a new tab)' ) }
-							aria-label={ __(
-								'View site (opens in a new tab)'
-							) }
-							icon={ external }
-							className={ classnames(
-								'edit-site-site-hub__site-view-link',
-								{ 'is-transparent': isTransparent }
-							) }
-						/>
-					) }
-				</HStack>
-				{ canvasMode === 'view' && (
+						{ decodeEntities( siteTitle ) }
+					</div>
 					<Button
+						href={ homeUrl }
+						target="_blank"
+						label={ __( 'View site (opens in a new tab)' ) }
+						aria-label={ __( 'View site (opens in a new tab)' ) }
+						icon={ external }
 						className={ classnames(
-							'edit-site-site-hub_toggle-command-center',
-							{ 'is-transparent': isTransparent }
+							'edit-site-site-hub__site-view-link'
 						) }
-						icon={ search }
-						onClick={ () => openCommandCenter() }
-						label={ __( 'Open command palette' ) }
-						shortcut={ displayShortcut.primary( 'k' ) }
 					/>
-				) }
+				</HStack>
+				<Button
+					className={ classnames(
+						'edit-site-site-hub_toggle-command-center',
+						{ 'is-transparent': isTransparent }
+					) }
+					icon={ search }
+					onClick={ () => openCommandCenter() }
+					label={ __( 'Open command palette' ) }
+					shortcut={ displayShortcut.primary( 'k' ) }
+				/>
 			</HStack>
 		</motion.div>
 	);
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index a00b67d53fb44..03576480f1613 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -4,6 +4,11 @@
 	justify-content: space-between;
 	gap: $grid-unit-10;
 
+	.edit-site-layout__view-mode-toggle {
+		position: fixed;
+		z-index: 100;
+	}
+
 	.edit-site-site-hub__container {
 		gap: 0;
 	}
diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js
index 1957e99b77dbe..72a6bd386b970 100644
--- a/packages/edit-site/src/components/site-icon/index.js
+++ b/packages/edit-site/src/components/site-icon/index.js
@@ -37,7 +37,7 @@ function SiteIcon( { className } ) {
 		<Icon
 			className="edit-site-site-icon__icon"
 			icon={ wordpress }
-			size={ 48 }
+			size={ 32 }
 		/>
 	);
 
diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
index d8b5e3f9b51de..731b171fbafaa 100644
--- a/packages/edit-site/src/components/site-icon/style.scss
+++ b/packages/edit-site/src/components/site-icon/style.scss
@@ -3,21 +3,31 @@
 	// Matches SiteIcon motion, smoothing out the transition.
 	transition: padding 0.3s ease-out;
 	@include reduce-motion("transition");
+}
 
-	.edit-site-layout.is-full-canvas & {
-		// Make the WordPress icon not so big in full canvas.
-		padding: $grid-unit-15 * 0.5; // 6px.
-	}
+.edit-site-layout__view-mode-toggle {
+	overflow: hidden;
+	// border-radius: $radius-block-ui * 2;
 }
 
 .edit-site-site-icon__image {
 	width: 100%;
 	height: 100%;
-	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
 	background: #333;
+}
 
-	.edit-site-layout.is-full-canvas & {
-		border-radius: 0;
-	}
+.edit-site-layout__home-icon {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 60px;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	-webkit-backdrop-filter: saturate(180%) blur(15px);
+	backdrop-filter: saturate(180%) blur(15px);
+	background-color: hsla(0, 0%, 100%, 0.6);
+	pointer-events: none;
 }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index e6cb953b0b186..1b26b4b8a4969 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -45,6 +45,7 @@
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./components/editor-canvas-container/style.scss";
+@import "./components/edit-overlay/style.scss";
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
index 2ac03a63e73fb..4becdf5eb3731 100644
--- a/packages/editor/src/components/document-bar/index.js
+++ b/packages/editor/src/components/document-bar/index.js
@@ -47,7 +47,7 @@ const icons = {
 	wp_navigation: navigationIcon,
 };
 
-export default function DocumentBar() {
+export default function DocumentBar( { isNaked = false } ) {
 	const { postType, postId, onNavigateToPreviousEntityRecord } = useSelect(
 		( select ) => {
 			const {
@@ -76,6 +76,7 @@ export default function DocumentBar() {
 		<BaseDocumentActions
 			postType={ postType }
 			postId={ postId }
+			isNaked={ isNaked }
 			onBack={
 				onNavigateToPreviousEntityRecord ? handleOnBack : undefined
 			}
@@ -83,7 +84,7 @@ export default function DocumentBar() {
 	);
 }
 
-function BaseDocumentActions( { postType, postId, onBack } ) {
+function BaseDocumentActions( { postType, postId, onBack, isNaked } ) {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 	const { editedRecord: doc, isResolving } = useEntityRecord(
 		'postType',
@@ -128,6 +129,7 @@ function BaseDocumentActions( { postType, postId, onBack } ) {
 				'has-back-button': !! onBack,
 				'is-animated': isAnimated,
 				'is-global': isGlobalEntity,
+				'is-naked': isNaked,
 			} ) }
 		>
 			{ onBack && (
diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index 0cd7e0689c7d3..2387bd2e50030 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -8,9 +8,18 @@
 	// subsequently truncate child text, we set an explicit min-width.
 	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 	min-width: 0;
-	background: $gray-100;
+	background-color: $gray-100;
 	border-radius: $grid-unit-05;
 	width: min(100%, 450px);
+	transition: background-color 0.4s ease;
+
+	&.is-naked {
+		background-color: transparent;
+		pointer-events: none;
+		.editor-document-bar__shortcut {
+			opacity: 0;
+		}
+	}
 
 	&:hover {
 		background-color: $gray-200;