diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
index c431b5ca00b0fe..2dc9e32d7a393c 100644
--- a/packages/block-editor/src/components/block-canvas/style.scss
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -9,5 +9,5 @@ iframe[name="editor-canvas"]:not(.has-editor-padding) {
 }
 
 iframe[name="editor-canvas"].has-editor-padding {
-	padding: $grid-unit-60 $grid-unit-60 0;
+	padding: $grid-unit-30 $grid-unit-30 0;
 }
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 46838c97f8799c..8ad587d4e5a580 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -11,7 +11,7 @@
 	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
 	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
 	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-900;
+	background-color: $gray-300;
 
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/packages/edit-site/src/components/block-editor/back-button.js
deleted file mode 100644
index 71616266602270..00000000000000
--- a/packages/edit-site/src/components/block-editor/back-button.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { arrowLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import {
-	TEMPLATE_PART_POST_TYPE,
-	NAVIGATION_POST_TYPE,
-	PATTERN_TYPES,
-} from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-function BackButton() {
-	const location = useLocation();
-	const history = useHistory();
-	const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE;
-	const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE;
-	const isPattern = location.params.postType === PATTERN_TYPES.user;
-
-	const isFocusMode =
-		location.params.focusMode ||
-		isTemplatePart ||
-		isNavigationMenu ||
-		isPattern;
-
-	if ( ! isFocusMode ) {
-		return null;
-	}
-
-	return (
-		<Button
-			className="edit-site-visual-editor__back-button"
-			icon={ arrowLeft }
-			onClick={ () => {
-				history.back();
-			} }
-		>
-			{ __( 'Back' ) }
-		</Button>
-	);
-}
-
-export default BackButton;
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
index e946068ea1d848..f1e4a5fa3f2c62 100644
--- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -11,7 +11,6 @@ import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
@@ -20,6 +19,7 @@ import { store as editSiteStore } from '../../store';
 import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
+	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -54,7 +54,9 @@ export default function SiteEditorCanvas() {
 		isFocusMode &&
 		! isViewMode &&
 		// Disable resizing in mobile viewport.
-		! isMobileViewport;
+		! isMobileViewport &&
+		// Disable resizing when editing a template in focus mode.
+		templateType !== TEMPLATE_POST_TYPE;
 
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
@@ -74,7 +76,6 @@ export default function SiteEditorCanvas() {
 							'is-view-mode': isViewMode,
 						} ) }
 					>
-						<BackButton />
 						<ResizableEditor
 							enableResizing={ enableResizing }
 							height={
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 6294853b5c0a87..3d042f612f29ed 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -23,7 +23,7 @@
 	height: 100%;
 	display: block;
 	overflow: hidden;
-	background-color: $gray-900;
+	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
@@ -45,7 +45,7 @@
 
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
-			padding: $grid-unit-60;
+			padding: $grid-unit-30;
 		}
 
 		.edit-site-visual-editor__editor-canvas {
@@ -71,24 +71,6 @@
 	}
 }
 
-.edit-site-visual-editor__back-button {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
-// The toolbar header in distraction mode sits over the back button, which renders it unreachable.
-.is-distraction-free .edit-site-visual-editor__back-button {
-	display: none;
-}
-
 .resizable-editor__drag-handle {
 	position: absolute;
 	top: 0;
diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
index 61c2232df6f8e0..77e9e69f02a984 100644
--- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
+++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -12,8 +13,10 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { usePostLinkProps } from './use-post-link-props';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function useArchiveLabel( templateSlug ) {
 	const taxonomyMatches = templateSlug?.match(
@@ -87,6 +90,18 @@ function useArchiveLabel( templateSlug ) {
 	);
 }
 
+function useGoBack() {
+	const location = useLocation();
+	const history = useHistory();
+	const goBack = useMemo( () => {
+		const isFocusMode =
+			location.params.focusMode ||
+			FOCUSABLE_ENTITIES.includes( location.params.postType );
+		return isFocusMode ? () => history.back() : undefined;
+	}, [ location.params.focusMode, location.params.postType, history ] );
+	return goBack;
+}
+
 export function useSpecificEditorSettings() {
 	const getPostLinkProps = usePostLinkProps();
 	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
@@ -118,6 +133,7 @@ export function useSpecificEditorSettings() {
 	);
 	const archiveLabels = useArchiveLabel( templateSlug );
 	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
+	const goBack = useGoBack();
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
@@ -127,6 +143,7 @@ export function useSpecificEditorSettings() {
 			focusMode: canvasMode !== 'view',
 			defaultRenderingMode,
 			getPostLinkProps,
+			goBack,
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
@@ -136,6 +153,7 @@ export function useSpecificEditorSettings() {
 		canvasMode,
 		defaultRenderingMode,
 		getPostLinkProps,
+		goBack,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
 	] );
diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
index 9c582c5edb397b..717fcfe0a39aa8 100644
--- a/test/e2e/specs/site-editor/pages.spec.js
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -150,7 +150,7 @@ test.describe( 'Pages', () => {
 
 		// Go back to page editing focus.
 		await page
-			.getByRole( 'region', { name: 'Editor content' } )
+			.getByRole( 'region', { name: 'Editor top bar' } )
 			.getByRole( 'button', { name: 'Back' } )
 			.click();