diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx
index bed28ae38c0..168020e1b4c 100644
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useEffect, useState } from 'react';
-import { WooFooterItem } from '@woocommerce/admin-layout';
 
 function useFocusedBlock() {
 	const [ focusedElement, setFocusedElement ] = useState< Element | null >();
@@ -46,15 +45,10 @@ export function BlockInspector() {
 		useFocusedBlock();
 
 	return (
-		<WooFooterItem>
-			<>
-				<div>Block Inspector</div>
-				<div>
-					<div>Block name: { blockName }</div>
-					<div>Template block id: { templateBlockId }</div>
-					<div>Template block order: { templateBlockOrder }</div>
-				</div>
-			</>
-		</WooFooterItem>
+		<div>
+			<div>Block name: { blockName }</div>
+			<div>Template block id: { templateBlockId }</div>
+			<div>Template block order: { templateBlockOrder }</div>
+		</div>
 	);
 }
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.scss b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.scss
new file mode 100644
index 00000000000..c3a1701f637
--- /dev/null
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.scss
@@ -0,0 +1,16 @@
+.woocommerce-product-editor-dev-tools-bar {
+	background-color: black;
+	color: white;
+}
+
+.woocommerce-product-editor-dev-tools-bar__header {
+	display: flex;
+
+	.components-button {
+		color: white;
+	}
+}
+
+.woocommerce-product-editor-dev-tools-bar__tabs {
+	flex: 1;
+}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts
index 19e26385e56..d74ccbd55b2 100644
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/index.ts
@@ -7,6 +7,7 @@ import { registerPlugin } from '@wordpress/plugins';
  * Internal dependencies
  */
 import { ProductEditorDevTools } from './product-editor-dev-tools';
+import './index.scss';
 
 export function registerProductEditorDevTools() {
 	registerPlugin( 'woocommerce-product-editor-dev-tools', {
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx
new file mode 100644
index 00000000000..3bcc72b0aaf
--- /dev/null
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+import { WooFooterItem } from '@woocommerce/admin-layout';
+import { Button, NavigableMenu } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { BlockInspector } from './block-inspector';
+export function ProductEditorDevToolsBar( {
+	onClose,
+}: {
+	onClose: () => void;
+} ) {
+	const [ selectedTab, setSelectedTab ] = useState< string >( 'inspector' );
+
+	function handleNavigate( _childIndex: number, child: HTMLButtonElement ) {
+		child.click();
+	}
+
+	function handleTabClick( tabName: string ) {
+		setSelectedTab( tabName );
+	}
+
+	return (
+		<WooFooterItem>
+			<div className="woocommerce-product-editor-dev-tools-bar">
+				<div className="woocommerce-product-editor-dev-tools-bar__header">
+					<div className="woocommerce-product-editor-dev-tools-bar__tabs">
+						<NavigableMenu
+							role="tablist"
+							orientation="horizontal"
+							onNavigate={ handleNavigate }
+						>
+							<Button
+								onClick={ () => handleTabClick( 'inspector' ) }
+							>
+								Block Inspector
+							</Button>
+							<Button onClick={ () => handleTabClick( 'about' ) }>
+								About
+							</Button>
+						</NavigableMenu>
+					</div>
+					<div className="woocommerce-product-editor-dev-tools-bar__actions">
+						<Button
+							icon={ close }
+							label={ __( 'Close', 'woocommerce' ) }
+							onClick={ onClose }
+						/>
+					</div>
+				</div>
+				<div>
+					{ selectedTab === 'inspector' && <BlockInspector /> }
+					{ selectedTab === 'about' && (
+						<div>About developer tools</div>
+					) }
+				</div>
+			</div>
+		</WooFooterItem>
+	);
+}
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-context.ts b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-context.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools.tsx
index a9997060449..5425ffafb76 100644
--- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools.tsx
+++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 /**
  * Internal dependencies
  */
-import { BlockInspector } from './block-inspector';
+import { ProductEditorDevToolsBar } from './product-editor-dev-tools-bar';
 import { ProductEditorDevToolsMenu } from './product-editor-dev-tools-menu';
 
 export function ProductEditorDevTools() {
@@ -22,7 +22,11 @@ export function ProductEditorDevTools() {
 				} }
 			/>
 
-			{ shouldShowDevTools && <BlockInspector /> }
+			{ shouldShowDevTools && (
+				<ProductEditorDevToolsBar
+					onClose={ () => setShouldShowDevTools( false ) }
+				/>
+			) }
 		</>
 	);
 }