diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index c230738a077d9..b0a2b3f7d76b8 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -548,7 +548,7 @@ function Layout( {
 
 	return (
 		<SlotFillProvider>
-			<ErrorBoundary>
+			<ErrorBoundary canCopyContent>
 				<CommandMenu />
 				<WelcomeGuide postType={ currentPostType } />
 				<div
diff --git a/packages/edit-site/src/components/error-boundary/index.js b/packages/edit-site/src/components/error-boundary/index.js
deleted file mode 100644
index 88b04ae0b40e3..0000000000000
--- a/packages/edit-site/src/components/error-boundary/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { doAction } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import ErrorBoundaryWarning from './warning';
-
-export default class ErrorBoundary extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.state = {
-			error: null,
-		};
-	}
-
-	componentDidCatch( error ) {
-		doAction( 'editor.ErrorBoundary.errorLogged', error );
-	}
-
-	static getDerivedStateFromError( error ) {
-		return { error };
-	}
-
-	render() {
-		if ( ! this.state.error ) {
-			return this.props.children;
-		}
-
-		return (
-			<ErrorBoundaryWarning
-				message={ __(
-					'The editor has encountered an unexpected error.'
-				) }
-				error={ this.state.error }
-			/>
-		);
-	}
-}
diff --git a/packages/edit-site/src/components/error-boundary/test/error-boundary.js b/packages/edit-site/src/components/error-boundary/test/error-boundary.js
deleted file mode 100644
index 27ec4c8041967..0000000000000
--- a/packages/edit-site/src/components/error-boundary/test/error-boundary.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import * as wpHooks from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import ErrorBoundary from '../index';
-
-const theError = new Error( 'Kaboom' );
-
-const ChildComponent = () => {
-	throw theError;
-};
-
-describe( 'Error Boundary', () => {
-	describe( 'when error is thrown from a Child component', () => {
-		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
-			const doAction = jest.spyOn( wpHooks, 'doAction' );
-
-			render(
-				<ErrorBoundary>
-					<ChildComponent />
-				</ErrorBoundary>
-			);
-
-			expect( doAction ).toHaveBeenCalledWith(
-				'editor.ErrorBoundary.errorLogged',
-				theError
-			);
-			expect( console ).toHaveErrored();
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js
deleted file mode 100644
index c4090c7e6b119..0000000000000
--- a/packages/edit-site/src/components/error-boundary/warning.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { Warning } from '@wordpress/block-editor';
-import { useCopyToClipboard } from '@wordpress/compose';
-
-function CopyButton( { text, children } ) {
-	const ref = useCopyToClipboard( text );
-	return (
-		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
-			{ children }
-		</Button>
-	);
-}
-
-export default function ErrorBoundaryWarning( { message, error } ) {
-	const actions = [
-		<CopyButton key="copy-error" text={ error.stack }>
-			{ __( 'Copy Error' ) }
-		</CopyButton>,
-	];
-
-	return (
-		<Warning className="editor-error-boundary" actions={ actions }>
-			{ message }
-		</Warning>
-	);
-}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index e7606c57a7048..00bc323ea1535 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -25,6 +25,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	UnsavedChangesWarning,
+	ErrorBoundary,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -36,7 +37,6 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import ErrorBoundary from '../error-boundary';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
@@ -136,7 +136,9 @@ function Layout() {
 											}
 											routeKey={ routeKey }
 										>
-											{ areas.sidebar }
+											<ErrorBoundary>
+												{ areas.sidebar }
+											</ErrorBoundary>
 										</SidebarContent>
 										<SaveHub />
 										<SavePanel />
@@ -160,7 +162,7 @@ function Layout() {
 									/>
 								</SidebarContent>
 							) }
-							{ areas.mobile }
+							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
 						</div>
 					) }
 
@@ -173,7 +175,7 @@ function Layout() {
 									maxWidth: widths?.content,
 								} }
 							>
-								{ areas.content }
+								<ErrorBoundary>{ areas.content }</ErrorBoundary>
 							</div>
 						) }
 
@@ -184,7 +186,7 @@ function Layout() {
 								maxWidth: widths?.edit,
 							} }
 						>
-							{ areas.edit }
+							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
 						</div>
 					) }
 
diff --git a/packages/editor/src/components/error-boundary/index.js b/packages/editor/src/components/error-boundary/index.js
index d43af5a556b67..f3e6e5fd127af 100644
--- a/packages/editor/src/components/error-boundary/index.js
+++ b/packages/editor/src/components/error-boundary/index.js
@@ -3,9 +3,12 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { select } from '@wordpress/data';
-import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { doAction } from '@wordpress/hooks';
 
@@ -26,10 +29,10 @@ function getContent() {
 	} catch ( error ) {}
 }
 
-function CopyButton( { text, children } ) {
+function CopyButton( { text, children, variant = 'secondary' } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant={ variant } ref={ ref }>
 			{ children }
 		</Button>
 	);
@@ -54,23 +57,34 @@ class ErrorBoundary extends Component {
 
 	render() {
 		const { error } = this.state;
+		const { canCopyContent = false } = this.props;
 		if ( ! error ) {
 			return this.props.children;
 		}
 
-		const actions = [
-			<CopyButton key="copy-post" text={ getContent }>
-				{ __( 'Copy Post Text' ) }
-			</CopyButton>,
-			<CopyButton key="copy-error" text={ error.stack }>
-				{ __( 'Copy Error' ) }
-			</CopyButton>,
-		];
-
 		return (
-			<Warning className="editor-error-boundary" actions={ actions }>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+			<HStack
+				className="editor-error-boundary"
+				alignment="baseline"
+				spacing={ 4 }
+				justify="space-between"
+				expanded={ false }
+				wrap
+			>
+				<Text as="p">
+					{ __( 'The editor has encountered an unexpected error.' ) }
+				</Text>
+				<HStack expanded={ false }>
+					{ canCopyContent && (
+						<CopyButton text={ getContent }>
+							{ __( 'Copy contents' ) }
+						</CopyButton>
+					) }
+					<CopyButton variant="primary" text={ error?.stack }>
+						{ __( 'Copy error' ) }
+					</CopyButton>
+				</HStack>
+			</HStack>
 		);
 	}
 }
diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss
index 2913a644b9457..4d59c51166708 100644
--- a/packages/editor/src/components/error-boundary/style.scss
+++ b/packages/editor/src/components/error-boundary/style.scss
@@ -1,7 +1,11 @@
 .editor-error-boundary {
+	font-family: $default-font;
 	margin: auto;
 	max-width: 780px;
-	padding: 20px;
+	padding: 1em;
 	margin-top: 60px;
 	box-shadow: $elevation-large;
+	border: $border-width solid $gray-900;
+	border-radius: $radius-small;
+	background-color: $white;
 }