diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
index 84005331d18bb..d0b7126c0d270 100644
--- a/packages/editor/src/components/document-bar/index.js
+++ b/packages/editor/src/components/document-bar/index.js
@@ -11,7 +11,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	__experimentalText as Text,
-	__experimentalHStack as HStack,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
@@ -155,11 +154,8 @@ export default function DocumentBar() {
 					onClick={ () => openCommandCenter() }
 					size="compact"
 				>
-					<HStack
-						as={ motion.div }
+					<motion.div
 						className="editor-document-bar__title"
-						spacing={ 1 }
-						justify="center"
 						// Force entry animation when the back button is added or removed.
 						key={ hasBackButton }
 						initial={
@@ -193,7 +189,7 @@ export default function DocumentBar() {
 						>
 							{ title }
 						</Text>
-					</HStack>
+					</motion.div>
 					<span className="editor-document-bar__shortcut">
 						{ displayShortcut.primary( 'k' ) }
 					</span>
diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index 34da1ce4fa657..30a4fefb53b12 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -40,6 +40,10 @@
 	flex-grow: 1;
 	overflow: hidden;
 	color: $gray-800;
+	gap: $grid-unit-05;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
 	@include break-small() {