diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 7f9590b678ccc..c55cc42da0783 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -56,6 +56,7 @@ $mobile-header-toolbar-height: 44px;
 $mobile-floating-toolbar-height: 44px;
 $mobile-floating-toolbar-margin: 8px;
 $mobile-color-swatch: 48px;
+$header-toolbar-min-width: 335px;
 
 /**
  * Shadows.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 5921179e6a7ce..1fc37f98fccd0 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -84,6 +84,12 @@ $z-layers: (
 	".edit-site-sidebar {greater than small}": 90,
 	".edit-widgets-sidebar {greater than small}": 90,
 
+	// Show interface skeleton footer above interface skeleton drawer
+	".interface-interface-skeleton__footer": 90,
+
+	// Show the navigation toggle above the skeleton header
+	".edit-site-navigation-toggle": 31,
+
 	// Show notices below expanded editor bar
 	// .edit-post-header { z-index: 30 }
 	".components-notice-list": 29,
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 8be26456d8d16..9d2bb47d17a90 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -37,9 +37,11 @@ import BlockEditor from '../block-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
 import LeftSidebar from '../left-sidebar';
+import NavigationSidebar from '../navigation-sidebar';
 
 const interfaceLabels = {
 	leftSidebar: __( 'Block Library' ),
+	drawer: __( 'Navigation Sidebar' ),
 };
 
 function Editor() {
@@ -209,6 +211,9 @@ function Editor() {
 												<SidebarComplementaryAreaFills />
 												<InterfaceSkeleton
 													labels={ interfaceLabels }
+													drawer={
+														<NavigationSidebar />
+													}
 													leftSidebar={
 														<LeftSidebar />
 													}
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 059d0dcb938db..5f29e38517554 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -9,10 +9,7 @@ import {
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	PinnedItems,
-	__experimentalMainDashboardButton as MainDashboardButton,
-} from '@wordpress/interface';
+import { PinnedItems } from '@wordpress/interface';
 import { _x } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
@@ -25,39 +22,36 @@ import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
-import NavigationToggle from './navigation-toggle';
 
 export default function Header( { openEntitiesSavedStates } ) {
-	const {
-		deviceType,
-		hasFixedToolbar,
-		template,
-		isNavigationOpen,
-		isInserterOpen,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetPreviewDeviceType,
-			isFeatureActive,
-			getTemplateId,
-			isNavigationOpened,
-			isInserterOpened,
-		} = select( 'core/edit-site' );
-		const { getEntityRecord } = select( 'core' );
+	const { deviceType, hasFixedToolbar, template, isInserterOpen } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetPreviewDeviceType,
+				isFeatureActive,
+				getTemplateId,
+				isInserterOpened,
+			} = select( 'core/edit-site' );
+			const { getEntityRecord } = select( 'core' );
 
-		const _templateId = getTemplateId();
-		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
-			template: getEntityRecord( 'postType', 'wp_template', _templateId ),
-			isNavigationOpen: isNavigationOpened(),
-			isInserterOpen: isInserterOpened(),
-		};
-	}, [] );
+			const _templateId = getTemplateId();
+			return {
+				deviceType: __experimentalGetPreviewDeviceType(),
+				hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
+				template: getEntityRecord(
+					'postType',
+					'wp_template',
+					_templateId
+				),
+				isInserterOpen: isInserterOpened(),
+			};
+		},
+		[]
+	);
 
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
-		setIsNavigationPanelOpened,
 	} = useDispatch( 'core/edit-site' );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -67,14 +61,6 @@ export default function Header( { openEntitiesSavedStates } ) {
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
-				<MainDashboardButton.Slot>
-					<NavigationToggle
-						isOpen={ isNavigationOpen }
-						onClick={ () =>
-							setIsNavigationPanelOpened( ! isNavigationOpen )
-						}
-					/>
-				</MainDashboardButton.Slot>
 				<div className="edit-site-header__toolbar">
 					<Button
 						isPrimary
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
index c4ed7bf7fe343..320a597c39d4f 100644
--- a/packages/edit-site/src/components/header/style.scss
+++ b/packages/edit-site/src/components/header/style.scss
@@ -4,15 +4,21 @@
 	display: flex;
 	height: $header-height;
 	box-sizing: border-box;
+	width: 100%;
+	padding-left: $header-height;
 
 	.edit-site-header_start,
 	.edit-site-header_end {
-		// The 335px flex basis and 0 flex-shrink prevents the left and
-		// right toolbar from collapsing when shrinking the viewport
-		flex: 1 0 335px;
+		flex: 1 0;
 		display: flex;
 	}
 
+	.edit-site-header_start {
+		// Flex basis prevents the header_start toolbar
+		// from collapsing when shrinking the viewport.
+		flex-basis: calc(#{$header-toolbar-min-width} - #{$header-height});
+	}
+
 	.edit-site-header_center {
 		display: flex;
 		align-items: center;
@@ -26,14 +32,21 @@
 	}
 
 	.edit-site-header_end {
+		// Flex basis prevents the header_end toolbar
+		// from collapsing when shrinking the viewport
+		flex-basis: $header-toolbar-min-width;
 		justify-content: flex-end;
 	}
 }
 
 // Keeps the document title centered when the sidebar is open
 body.is-navigation-sidebar-open {
-	.edit-site-header_start {
-		flex-basis: calc(#{$nav-sidebar-width} + 335px);
+	.edit-site-header {
+		padding-left: 0;
+
+		.edit-site-header_start {
+			flex-basis: $header-toolbar-min-width;
+		}
 	}
 }
 
diff --git a/packages/edit-site/src/components/left-sidebar/index.js b/packages/edit-site/src/components/left-sidebar/index.js
index dca95d17d8c70..bb5ed6a0cb533 100644
--- a/packages/edit-site/src/components/left-sidebar/index.js
+++ b/packages/edit-site/src/components/left-sidebar/index.js
@@ -7,25 +7,17 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import InserterPanel from './inserter-panel';
-import NavigationPanel from './navigation-panel';
 
 const LeftSidebar = () => {
-	const { isNavigationOpen, isInserterOpen } = useSelect( ( select ) => {
-		const { isNavigationOpened, isInserterOpened } = select(
-			'core/edit-site'
-		);
+	const { isInserterOpen } = useSelect( ( select ) => {
+		const { isInserterOpened } = select( 'core/edit-site' );
 		return {
-			isNavigationOpen: isNavigationOpened(),
 			isInserterOpen: isInserterOpened(),
 		};
 	} );
 
 	const { setIsInserterOpened } = useDispatch( 'core/edit-site' );
 
-	if ( isNavigationOpen ) {
-		return <NavigationPanel />;
-	}
-
 	if ( isInserterOpen ) {
 		return (
 			<InserterPanel
diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
new file mode 100644
index 0000000000000..ea5b1e21a0e2c
--- /dev/null
+++ b/packages/edit-site/src/components/navigation-sidebar/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import NavigationPanel from './navigation-panel';
+import NavigationToggle from './navigation-toggle';
+
+const NavigationSidebar = () => {
+	const isNavigationOpen = useSelect( ( select ) => {
+		return select( 'core/edit-site' ).isNavigationOpened();
+	} );
+
+	return (
+		<>
+			<NavigationToggle isOpen={ isNavigationOpen } />
+			{ isNavigationOpen && <NavigationPanel /> }
+		</>
+	);
+};
+
+export default NavigationSidebar;
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/constants.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/content-navigation.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/index.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-categories.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-categories.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-pages.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-pages.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-pages.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-posts.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/content-posts.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-posts.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/template-parts.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/template-parts.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/template-parts.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/template-parts.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates-all.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-all.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates-all.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-all.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates-pages.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-pages.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates-pages.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-pages.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates-posts.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-posts.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates-posts.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-posts.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/menus/templates.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/navigation-entity-items.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/navigation-entity-items.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/navigation-entity-items.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
similarity index 98%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
index 768d49bd632a8..916582a9de7c9 100644
--- a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
@@ -1,7 +1,6 @@
 .edit-site-navigation-panel {
 	animation: edit-site-navigation-panel__slide-in 0.1s linear;
 	height: 100%;
-	position: relative;
 	width: $nav-sidebar-width;
 	background: $gray-900;
 	@include reduce-motion("animation");
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/template-navigation-items.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-items.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/template-navigation-items.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-items.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/template-preview.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/template-preview.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-preview.js
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/templates-navigation.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/templates-navigation.js
similarity index 100%
rename from packages/edit-site/src/components/left-sidebar/navigation-panel/templates-navigation.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-panel/templates-navigation.js
diff --git a/packages/edit-site/src/components/header/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
similarity index 87%
rename from packages/edit-site/src/components/header/navigation-toggle/index.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
index 5910757086611..244c26b8ed785 100644
--- a/packages/edit-site/src/components/header/navigation-toggle/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Button, Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
 
-function NavigationToggle( { icon, isOpen, onClick } ) {
+function NavigationToggle( { icon, isOpen } ) {
 	const {
 		isActive,
 		isRequestingSiteIcon,
@@ -31,6 +31,8 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 		};
 	}, [] );
 
+	const { setIsNavigationPanelOpened } = useDispatch( 'core/edit-site' );
+
 	if ( ! isActive ) {
 		return null;
 	}
@@ -60,7 +62,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
 				label={ __( 'Toggle navigation' ) }
-				onClick={ onClick }
+				onClick={ () => setIsNavigationPanelOpened( ! isOpen ) }
 				showTooltip
 			>
 				{ buttonIcon }
diff --git a/packages/edit-site/src/components/header/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
similarity index 94%
rename from packages/edit-site/src/components/header/navigation-toggle/style.scss
rename to packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
index 1cabaef56c0c5..c35c49ef8bb3f 100644
--- a/packages/edit-site/src/components/header/navigation-toggle/style.scss
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -6,6 +6,8 @@
 		background: $gray-900;
 		border-radius: 0;
 		display: flex;
+		position: absolute;
+		z-index: z-index(".edit-site-navigation-toggle");
 		height: $header-height + $border-width; // Cover header border
 		width: $header-height;
 	}
@@ -15,6 +17,7 @@
 	flex-shrink: 0;
 	height: $header-height + $border-width; // Cover header border
 	width: 300px;
+	position: static;
 
 	// Delay to sync with `NavigationPanel` animation
 	transition: width 80ms linear;
diff --git a/packages/edit-site/src/components/header/navigation-toggle/test/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
similarity index 100%
rename from packages/edit-site/src/components/header/navigation-toggle/test/index.js
rename to packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 244ffc12d9f23..7c040442e9b87 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -68,4 +68,4 @@ export function initialize( id, settings ) {
 }
 
 export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
-export { default as __experimentalNavigationToggle } from './components/header/navigation-toggle';
+export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index b146a7e1a6abd..a45c0229a29f1 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -12,7 +12,7 @@ import { combineReducers } from '@wordpress/data';
  * Internal dependencies
  */
 import { PREFERENCES_DEFAULTS } from './defaults';
-import { MENU_ROOT } from '../components/left-sidebar/navigation-panel/constants';
+import { MENU_ROOT } from '../components/navigation-sidebar/navigation-panel/constants';
 
 /**
  * Higher-order reducer creator which provides the given initial state for the
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index ee90929903c16..8350c69c9942d 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -5,9 +5,9 @@
 @import "./components/header/document-actions/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/more-menu/style.scss";
-@import "./components/header/navigation-toggle/style.scss";
 @import "./components/left-sidebar/inserter-panel/style.scss";
-@import "./components/left-sidebar/navigation-panel/style.scss";
+@import "./components/navigation-sidebar/navigation-toggle/style.scss";
+@import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/editor/style.scss";
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index 7ba335b9dffa6..6f2607297e653 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -30,6 +30,7 @@ function InterfaceSkeleton( {
 	sidebar,
 	leftSidebar,
 	content,
+	drawer,
 	actions,
 	labels,
 	className,
@@ -37,6 +38,8 @@ function InterfaceSkeleton( {
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
+		/* translators: accessibility text for the nav bar landmark region. */
+		drawer: __( 'Drawer' ),
 		/* translators: accessibility text for the top bar landmark region. */
 		header: __( 'Header' ),
 		/* translators: accessibility text for the content landmark region. */
@@ -60,55 +63,66 @@ function InterfaceSkeleton( {
 				'interface-interface-skeleton'
 			) }
 		>
-			{ !! header && (
+			{ !! drawer && (
 				<div
-					className="interface-interface-skeleton__header"
+					className="interface-interface-skeleton__drawer"
 					role="region"
-					aria-label={ mergedLabels.header }
-					tabIndex="-1"
+					aria-label={ mergedLabels.drawer }
 				>
-					{ header }
+					{ drawer }
 				</div>
 			) }
-			<div className="interface-interface-skeleton__body">
-				{ !! leftSidebar && (
-					<div
-						className="interface-interface-skeleton__left-sidebar"
-						role="region"
-						aria-label={ mergedLabels.leftSidebar }
-						tabIndex="-1"
-					>
-						{ leftSidebar }
-					</div>
-				) }
-				<div
-					className="interface-interface-skeleton__content"
-					role="region"
-					aria-label={ mergedLabels.body }
-					tabIndex="-1"
-				>
-					{ content }
-				</div>
-				{ !! sidebar && (
+			<div className="interface-interface-skeleton__editor">
+				{ !! header && (
 					<div
-						className="interface-interface-skeleton__sidebar"
+						className="interface-interface-skeleton__header"
 						role="region"
-						aria-label={ mergedLabels.sidebar }
+						aria-label={ mergedLabels.header }
 						tabIndex="-1"
 					>
-						{ sidebar }
+						{ header }
 					</div>
 				) }
-				{ !! actions && (
+				<div className="interface-interface-skeleton__body">
+					{ !! leftSidebar && (
+						<div
+							className="interface-interface-skeleton__left-sidebar"
+							role="region"
+							aria-label={ mergedLabels.leftSidebar }
+							tabIndex="-1"
+						>
+							{ leftSidebar }
+						</div>
+					) }
 					<div
-						className="interface-interface-skeleton__actions"
+						className="interface-interface-skeleton__content"
 						role="region"
-						aria-label={ mergedLabels.actions }
+						aria-label={ mergedLabels.body }
 						tabIndex="-1"
 					>
-						{ actions }
+						{ content }
 					</div>
-				) }
+					{ !! sidebar && (
+						<div
+							className="interface-interface-skeleton__sidebar"
+							role="region"
+							aria-label={ mergedLabels.sidebar }
+							tabIndex="-1"
+						>
+							{ sidebar }
+						</div>
+					) }
+					{ !! actions && (
+						<div
+							className="interface-interface-skeleton__actions"
+							role="region"
+							aria-label={ mergedLabels.actions }
+							tabIndex="-1"
+						>
+							{ actions }
+						</div>
+					) }
+				</div>
 			</div>
 			{ !! footer && (
 				<div
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index 3cbfeadaeea9f..1c772ce7ece90 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -12,7 +12,7 @@ html.interface-interface-skeleton__html-container {
 
 .interface-interface-skeleton {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	height: auto;
 	max-height: 100%;
 
@@ -33,6 +33,12 @@ html.interface-interface-skeleton__html-container {
 	}
 }
 
+.interface-interface-skeleton__editor {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
 @include editor-left(".interface-interface-skeleton");
 
 .interface-interface-skeleton__body {
@@ -130,6 +136,11 @@ html.interface-interface-skeleton__html-container {
 	flex-shrink: 0;
 	border-top: $border-width solid $gray-200;
 	color: $gray-900;
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	background-color: $white;
+	z-index: z-index(".interface-interface-skeleton__footer");
 
 	// On Mobile the footer is hidden
 	display: none;