diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
index 743a07b4bb881..f0fc28c7fbbd2 100644
--- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
@@ -15,7 +15,7 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { levelUp } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose';
 import NavigableToolbar from '../navigable-toolbar';
 import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import { unlock } from '../../lock-unlock';
 
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
@@ -94,6 +93,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 			{ isFixed && isLargeViewport && blockType && (
 				<ToolbarGroup
 					className={
@@ -105,13 +105,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					<ToolbarItem
 						as={ ToolbarButton }
 						ref={ toolbarButtonRef }
-						icon={
-							isCollapsed ? (
-								<BlockIcon icon={ blockType.icon } />
-							) : (
-								levelUp
-							)
-						}
+						icon={ isCollapsed ? next : previous }
 						onClick={ () => {
 							setIsCollapsed( ( collapsed ) => ! collapsed );
 							toolbarButtonRef.current.focus();
@@ -119,12 +113,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						label={
 							isCollapsed
 								? __( 'Show block tools' )
-								: __( 'Show document tools' )
+								: __( 'Hide block tools' )
 						}
 					/>
 				</ToolbarGroup>
 			) }
-			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index c55b8e651c2e7..07e400344bfe1 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -131,11 +131,11 @@
 	@include break-medium() {
 		&.is-fixed {
 
-			// leave room for block inserter
-			margin-left: $grid-unit-80;
+			// leave room for block inserter, undo and redo, list view
+			margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 			// position on top of interface header
 			position: fixed;
-			top: $admin-bar-height + $grid-unit;
+			top: $admin-bar-height + $grid-unit - $border-width;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
@@ -145,32 +145,63 @@
 
 			&.is-collapsed {
 				width: initial;
-				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
 			}
 
 			.is-fullscreen-mode & {
-				// leave room for block inserter
-				margin-left: $grid-unit-80 + $grid-unit-70;
-				top: $grid-unit;
+				// leave room for block inserter, undo and redo, list view
+				// and some margin left
+				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+				top: $grid-unit - $border-width;
 				&.is-collapsed {
 					width: initial;
-					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
+				}
+			}
+
+			& > .block-editor-block-toolbar.is-showing-movers {
+				flex-grow: initial;
+				width: initial;
+
+				// Add a border as separator in the block toolbar.
+				&::before {
+					content: "";
+					width: $border-width;
+					height: 3 * $grid-unit;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-right: 0;
+					background-color: $gray-300;
+					position: relative;
+					left: math.div(-$grid-unit-05, 2);
+					top: -1px;
 				}
 			}
 
 			& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
-				&::after {
+				&::before {
 					content: "";
 					width: $border-width;
-					height: 24px;
+					height: 3 * $grid-unit;
 					margin-top: $grid-unit + $grid-unit-05;
-					margin-bottom: $grid-unit + $grid-unit-05;
+					margin-right: $grid-unit-10;
 					background-color: $gray-300;
-					position: absolute;
-					left: 44px;
+					position: relative;
+					left: 0;
 					top: -1px;
 				}
 			}
@@ -178,6 +209,21 @@
 			& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
 				border: none;
 
+				.show-icon-labels & {
+					width: $grid-unit-80 * 4;
+					.components-button.has-icon {
+						// Hide the button icons when labels are set to display...
+						svg {
+							display: none;
+						}
+						// ... and display labels.
+						&::after {
+							content: attr(aria-label);
+							font-size: $helptext-font-size;
+						}
+					}
+				}
+
 				// Add a border as separator in the block toolbar.
 				&::before {
 					content: "";
@@ -186,27 +232,20 @@
 					margin-bottom: $grid-unit + $grid-unit-05;
 					background-color: $gray-300;
 					position: relative;
-					left: -12px; //the padding of buttons
-					height: 24px;
+					left: -8px;
+					height: 3 * $grid-unit;
+					top: -1px;
 				}
 			}
 
 			.show-icon-labels & {
 
-				margin-left: $grid-unit-80;
-
-				&.is-collapsed {
-					margin-left: $grid-unit-80 * 6;
-				}
+				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;
 
 				.is-fullscreen-mode & {
-					margin-left: $grid-unit-80 + $grid-unit-80;
-					&.is-collapsed {
-						margin-left: $grid-unit-80 * 7;
-					}
+					margin-left: $grid-unit * 18; // site hub, inserter and margin
 				}
 
-
 				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
 					left: 0;
 				}
@@ -234,12 +273,14 @@
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {
+
 			.block-editor-block-parent-selector__button {
 				position: relative;
 				top: -1px;
 				border: 0;
 				padding-right: 6px;
 				padding-left: 6px;
+
 				&::after {
 					content: "\00B7";
 					font-size: 16px;
@@ -281,7 +322,9 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
-			width: initial;
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 240px - #{4 * $grid-unit-80});
 		}
 	}
 
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 391e5473999bb..8f9e413707d50 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -19,6 +19,7 @@ import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useRef, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -36,6 +37,8 @@ function HeaderToolbar() {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editPostStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const hasFixedToolbar = getPreference( 'core/edit-post', 'fixedToolbar' );
 	const {
 		isInserterEnabled,
 		isInserterOpened,
@@ -147,7 +150,7 @@ function HeaderToolbar() {
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ isLargeViewport && (
+						{ isLargeViewport && ! hasFixedToolbar && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
index 63c4d5198f8fb..6281887b13738 100644
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -16,6 +16,14 @@
 		color: currentColor;
 		background: $gray-200;
 	}
+
+	@include break-medium() {
+		width: 50%;
+	}
+
+	@include break-large() {
+		width: min(100%, 450px);
+	}
 }
 
 .edit-site-document-actions__command {
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 415dfb1d67cb0..b8d3b6e4cc255 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -108,6 +108,9 @@ export default function HeaderEditMode() {
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+	const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );
+
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
@@ -213,14 +216,18 @@ export default function HeaderEditMode() {
 						) }
 						{ isLargeViewport && (
 							<>
-								<ToolbarItem
-									as={ ToolSelector }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-									disabled={ ! isVisualMode }
-								/>
+								{ ! hasFixedToolbar && (
+									<ToolbarItem
+										as={ ToolSelector }
+										showTooltip={ ! showIconLabels }
+										variant={
+											showIconLabels
+												? 'tertiary'
+												: undefined
+										}
+										disabled={ ! isVisualMode }
+									/>
+								) }
 								<ToolbarItem
 									as={ UndoButton }
 									showTooltip={ ! showIconLabels }
@@ -257,7 +264,8 @@ export default function HeaderEditMode() {
 									/>
 								) }
 								{ isZoomedOutViewExperimentEnabled &&
-									! isDistractionFree && (
+									! isDistractionFree &&
+									! hasFixedToolbar && (
 										<ToolbarItem
 											as={ Button }
 											className="edit-site-header-edit-mode__zoom-out-view-toggle"
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 126a31bfe34d2..2fe210327661d 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -4,17 +4,6 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
-
-	// Expand the fixed block toolbar to cover the document title control.
-	.block-editor-block-contextual-toolbar {
-		@include break-medium() {
-			&.is-fixed {
-				// the combined with of the tools at the right of the header and the margin left
-				width: calc(100% - 240px - #{$grid-unit-80} - #{$grid-unit-70});
-			}
-		}
-	}
-
 }
 
 .edit-site-layout__hub {
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
index 0510512354628..9361da403c6d9 100644
--- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -100,11 +100,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 			await editor.insertBlock( { name: 'core/paragraph' } );
 			await toolbarUtils.moveToToolbarShortcut();
 			await expect(
-				toolbarUtils.blockToolbarShowDocumentButton
+				toolbarUtils.blockToolbarParagraphButton
 			).toBeFocused();
-			await expect(
-				toolbarUtils.documentToolbarTooltip
-			).not.toBeVisible();
 
 			// Test: Focus the block toolbar from paragraph block with content
 			await editor.insertBlock( { name: 'core/paragraph' } );
@@ -113,11 +110,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 			);
 			await toolbarUtils.moveToToolbarShortcut();
 			await expect(
-				toolbarUtils.blockToolbarShowDocumentButton
+				toolbarUtils.blockToolbarParagraphButton
 			).toBeFocused();
-			await expect(
-				toolbarUtils.documentToolbarTooltip
-			).not.toBeVisible();
 		} );
 
 		test( 'Focuses the correct toolbar in select mode', async ( {
@@ -135,11 +129,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 			await toolbarUtils.useSelectMode();
 			await toolbarUtils.moveToToolbarShortcut();
 			await expect(
-				toolbarUtils.blockToolbarShowDocumentButton
+				toolbarUtils.blockToolbarParagraphButton
 			).toBeFocused();
-			await expect(
-				toolbarUtils.documentToolbarTooltip
-			).not.toBeVisible();
 
 			// Test: Focus the block toolbar from paragraph in select mode
 			await editor.insertBlock( { name: 'core/paragraph' } );
@@ -149,11 +140,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 			await toolbarUtils.useSelectMode();
 			await toolbarUtils.moveToToolbarShortcut();
 			await expect(
-				toolbarUtils.blockToolbarShowDocumentButton
+				toolbarUtils.blockToolbarParagraphButton
 			).toBeFocused();
-			await expect(
-				toolbarUtils.documentToolbarTooltip
-			).not.toBeVisible();
 		} );
 	} );
 
@@ -254,7 +242,7 @@ class ToolbarUtils {
 			exact: true,
 		} );
 		this.blockToolbarShowDocumentButton = this.page.getByRole( 'button', {
-			name: 'Show document tools',
+			name: 'Hide block tools',
 			exact: true,
 		} );
 	}