diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 11fc402ab12686..f2622dd5f12fec 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -191,8 +191,6 @@ $z-layers: (
 	".customize-widgets__block-toolbar": 7,
 
 	// Site editor layout
-	".edit-site-layout__header-container": 4,
-	".edit-site-layout__hub": 3,
 	".edit-site-page-header": 2,
 	".edit-site-page-content": 1,
 	".edit-site-patterns__header": 2,
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 fcd4ea1b388028..76f760762f2bfe 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SiteEditorMoreMenu from './more-menu';
+import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
@@ -29,6 +31,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 			).getEditorCanvasContainerView(),
 		};
 	}, [] );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
 	return (
 		<EditorHeader
@@ -43,6 +46,12 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					: undefined
 			}
 		>
+			<Button
+				className="edit-site-layout__view-mode-toggle"
+				onClick={ () => setCanvasMode( 'view' ) }
+			>
+				<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+			</Button>
 			<SiteEditorMoreMenu />
 		</EditorHeader>
 	);
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
deleted file mode 100644
index 69b1e9dff38492..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.editor-header {
-	padding-left: $header-height;
-}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index d8b0d85e484edb..5daa655ee8687a 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -122,27 +122,6 @@ export default function Layout() {
 		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
 
-	// 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';
 
@@ -189,41 +168,6 @@ 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"
-					/>
-				</motion.div>
-
 				<div className="edit-site-layout__content">
 					{ /*
 						The NavigableRegion must always be rendered and not use
@@ -252,6 +196,11 @@ export default function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
+										<SiteHub
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
 										<SidebarContent routeKey={ routeKey }>
 											{ areas.sidebar }
 										</SidebarContent>
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 55a071caacac41..467cb23259ce7a 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -6,37 +6,6 @@
 	flex-direction: column;
 }
 
-.edit-site-layout__hub {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: calc(100vw - #{$canvas-padding * 2});
-	height: $header-height;
-	z-index: z-index(".edit-site-layout__hub");
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$grid-unit-15});
-	}
-
-	.edit-site-layout.is-full-canvas & {
-		padding-right: 0;
-		border-radius: 0;
-		width: $header-height;
-		box-shadow: none;
-	}
-}
-
-.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) {
-	margin-bottom: $header-height;
-	@include break-medium {
-		margin-bottom: 0;
-	}
-}
-
-.edit-site-layout__header-container {
-	z-index: z-index(".edit-site-layout__header-container");
-}
-
 .edit-site-layout__content {
 	height: 100%;
 	flex-grow: 1;
@@ -244,33 +213,6 @@
 	}
 }
 
-.edit-site-layout.is-distraction-free {
-	.edit-site-layout__header-container {
-		height: $header-height;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: z-index(".edit-site-layout__header-container");
-		width: 100%;
-
-		// We need ! important because we override inline styles
-		// set by the motion component.
-		&:focus-within {
-			opacity: 1 !important;
-			div {
-				transform: translateX(0) translateY(0) translateZ(0) !important;
-			}
-		}
-	}
-
-	.edit-site-site-hub {
-		position: absolute;
-		top: 0;
-		z-index: z-index(".edit-site-layout__hub");
-	}
-}
-
 .edit-site-layout__area {
 	flex-grow: 1;
 	margin: 0;
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 190fc228ce56c2..b7bedcbb9cf06b 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -7,17 +7,9 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 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 { Button, __experimentalHStack as HStack } from '@wordpress/components';
 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';
@@ -32,165 +24,80 @@ 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 } ) => {
+	const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
 
-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 _site = getSite();
-			return {
-				canvasMode: getCanvasMode(),
-				dashboardLink:
-					getSettings().__experimentalDashboardLink || 'index.php',
-				homeUrl: getUnstableBase()?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
-			};
-		},
-		[]
-	);
+		const {
+			getSite,
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		const _site = getSite();
+		return {
+			dashboardLink:
+				getSettings().__experimentalDashboardLink || 'index.php',
+			homeUrl: getUnstableBase()?.home,
+			siteTitle:
+				! _site?.title && !! _site?.url
+					? filterURLForDisplay( _site?.url )
+					: _site?.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={ clsx( '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',
-			} }
-		>
+		<div className="edit-site-site-hub">
 			<HStack justify="flex-start" spacing="0">
-				<motion.div
+				<div
 					className={ clsx(
 						'edit-site-site-hub__view-mode-toggle-container',
 						{
 							'has-transparent-background': isTransparent,
 						}
 					) }
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
 				>
 					<Button
-						{ ...siteIconButtonProps }
+						href={ dashboardLink }
+						label={ __( 'Go to the Dashboard' ) }
 						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',
-							} }
-						>
+						<div style={ { transform: 'scale(0.5)' } }>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</motion.div>
+						</div>
 					</Button>
-				</motion.div>
+				</div>
 
-				<AnimatePresence initial={ false }>
-					{ canvasMode === 'view' && (
-						<HStack
-							as={ motion.div }
-							initial={ { opacity: 0 } }
-							animate={ {
-								opacity: isTransparent ? 0 : 1,
-							} }
-							exit={ { opacity: 0 } }
-							transition={ {
-								type: 'tween',
-								duration: disableMotion ? 0 : 0.2,
-								ease: 'easeOut',
-								delay: canvasMode === 'view' ? 0.1 : 0,
-							} }
-						>
-							<div className="edit-site-site-hub__title">
-								{ decodeEntities( siteTitle ) }
-							</div>
-							<HStack
-								spacing={ 0 }
-								expanded={ false }
-								className="edit-site-site-hub__actions"
-							>
-								<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="edit-site-site-hub__site-view-link"
-								/>
+				<HStack>
+					<div className="edit-site-site-hub__title">
+						{ decodeEntities( siteTitle ) }
+					</div>
+					<HStack
+						spacing={ 0 }
+						expanded={ false }
+						className="edit-site-site-hub__actions"
+					>
+						<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="edit-site-site-hub__site-view-link"
+						/>
 
-								<Button
-									className="edit-site-site-hub_toggle-command-center"
-									icon={ search }
-									onClick={ () => openCommandCenter() }
-									label={ __( 'Open command palette' ) }
-									shortcut={ displayShortcut.primary( 'k' ) }
-								/>
-							</HStack>
-						</HStack>
-					) }
-				</AnimatePresence>
+						<Button
+							className="edit-site-site-hub_toggle-command-center"
+							icon={ search }
+							onClick={ () => openCommandCenter() }
+							label={ __( 'Open command palette' ) }
+							shortcut={ displayShortcut.primary( 'k' ) }
+						/>
+					</HStack>
+				</HStack>
 			</HStack>
-		</motion.div>
+		</div>
 	);
 } );
 
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 9cb62bbe056411..96da887321f096 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -3,6 +3,7 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
+	margin-right: $grid-unit-15;
 }
 
 .edit-site-site-hub__actions {
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index f2b8ebd559f2e8..87557933ac2108 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -6,7 +6,6 @@
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
-@import "./components/header-edit-mode/style.scss";
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";