diff --git a/plugins/woocommerce-admin/client/settings/index.js b/plugins/woocommerce-admin/client/settings/index.js
index f64b02d4c23..3a902f64327 100644
--- a/plugins/woocommerce-admin/client/settings/index.js
+++ b/plugins/woocommerce-admin/client/settings/index.js
@@ -5,6 +5,7 @@ import { getNewPath } from '@woocommerce/navigation';
 import { Button } from '@wordpress/components';
 import { Icon, chevronLeft } from '@wordpress/icons';
 import { useEffect } from '@wordpress/element';
+import { SiteHub } from '~/customize-store/assembler-hub/site-hub';
 
 /**
  * Internal dependencies
@@ -93,11 +94,21 @@ const Settings = ( { params, query } ) => {
 		<>
 			<div className="woocommerce-settings-layout">
 				<div className="woocommerce-settings-layout-navigation">
-					<Button href={ getNewPath( {}, '/', {} ) }>
-						<Icon icon={ chevronLeft } />
-						Settings
-					</Button>
-					<Tabs data={ settingsData } page={ page } />
+					<SiteHub
+						variants={ {
+							view: { x: 0 },
+						} }
+						isTransparent={ false }
+					/>
+					<div className="woocommerce-settings-layout-navigation__content">
+						<div className="woocommerce-settings-layout-navigation__back">
+							<Button href={ getNewPath( {}, '/', {} ) }>
+								<Icon icon={ chevronLeft } />
+							</Button>
+							<h1>Settings</h1>
+						</div>
+						<Tabs data={ settingsData } page={ page } />
+					</div>
 				</div>
 				{ areas.content && (
 					<div
diff --git a/plugins/woocommerce-admin/client/settings/style.scss b/plugins/woocommerce-admin/client/settings/style.scss
index 6fe75ca2964..9a798646d18 100644
--- a/plugins/woocommerce-admin/client/settings/style.scss
+++ b/plugins/woocommerce-admin/client/settings/style.scss
@@ -1,4 +1,7 @@
 .woocommerce-admin-page__settings_page {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
 	.woocommerce-layout__primary {
 		margin: 0;
 	}
@@ -8,6 +11,63 @@
 	#wpbody-content {
 		background-color: #1e1e1e;
 	}
+	.edit-site-site-hub {
+		height: 60px;
+	}
+	.edit-site-site-hub__view-mode-toggle-container {
+		height: 60px;
+		width: 60px;
+
+		a {
+			fill: #fff;
+
+			svg {
+				width: 30px;
+				height: 30px;
+				margin: 15px;
+			}
+		}
+	}
+	.edit-site-site-hub__site-title {
+		opacity: 1;
+		color: #e0e0e0;
+		display: block;
+		flex-grow: 1;
+		font-size: 15px;
+		font-weight: 500;
+		overflow: hidden;
+		padding-right: 16px;
+		position: relative;
+		text-decoration: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.woocommerce-settings-layout-navigation__content {
+	padding: 48px 12px 0 12px;
+}
+
+.woocommerce-settings-layout-navigation__back {
+	width: 100%;
+	display: flex;
+	gap: 12px;
+	align-items: flex-end;
+	margin-bottom: 16px;
+
+	a {
+		padding: 6px;
+	}
+
+	h1 {
+		line-height: 1.2;
+		margin: 0;
+		text-wrap: balance;
+		text-wrap: pretty;
+		color: #e0e0e0;
+		font-size: calc((20 / 13) * 13px);
+		font-weight: 600;
+	}
 }
 
 .woocommerce-layout__main {
@@ -18,12 +78,10 @@
 	display: flex;
 	background: #1e1e1e;
 	height: 100%;
-	padding: 16px;
-	gap: 12px;
 }
 
 .woocommerce-settings-layout-navigation {
-	min-width: 300px;
+	width: 300px;
 	color: white;
 	overflow: scroll;
 
@@ -34,6 +92,7 @@
 }
 
 .woocommerce-settings-layout-content {
+	margin: 16px 16px 16px 0;
 	flex: 1;
 	background-color: white;
 	border-radius: 10px;
@@ -67,13 +126,20 @@
 
 .woocommerce-settings-tabs {
 	.components-tab-panel__tabs {
-		padding: 14px 14px 0 14px;
+		color: #ccc;
 	}
 	.components-tab-panel__tabs-item {
-		color: white;
+		color: #ccc;
+		font-size: 13px;
+		height: 40px;
+
+		&:hover {
+			color: #ccc;
+			background: #2f2f2f;
+		}
 
 		&.active-tab {
-			background-color: #2f2f2f;
+			background-color: var(--wp-admin-theme-color);
 		}
 	}
 }