diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts
index e104718e82..c608c81295 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/body-layout/body-layout.element.ts
@@ -39,6 +39,9 @@ export class UmbBodyLayoutElement extends LitElement {
 	@state()
 	private _headerSlotHasChildren = false;
 
+	@state()
+	private _navigationSlotHasChildren = false;
+
 	@state()
 	private _tabsSlotHasChildren = false;
 
@@ -81,28 +84,37 @@ export class UmbBodyLayoutElement extends LitElement {
 				style="display: ${this.headline ||
 				this._headerSlotHasChildren ||
 				this._tabsSlotHasChildren ||
-				this._actionsMenuSlotHasChildren
+				this._actionsMenuSlotHasChildren ||
+				this._navigationSlotHasChildren
 					? ''
 					: 'none'}">
 				${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
 
 				<slot
+					id="header-slot"
 					name="header"
 					@slotchange=${(e: Event) => {
 						this._headerSlotHasChildren = this.#hasNodes(e);
 					}}></slot>
 				<slot
-					id="tabs"
+					id="tabs-slot"
 					name="tabs"
 					@slotchange=${(e: Event) => {
 						this._tabsSlotHasChildren = this.#hasNodes(e);
 					}}></slot>
 				<slot
-					id="action-menu"
+					id="action-menu-slot"
 					name="action-menu"
 					@slotchange=${(e: Event) => {
 						this._actionsMenuSlotHasChildren = this.#hasNodes(e);
 					}}></slot>
+
+				<slot
+					id="navigation-slot"
+					name="navigation"
+					@slotchange=${(e: Event) => {
+						this._actionsMenuSlotHasChildren = this.#hasNodes(e);
+					}}></slot>
 			</div>
 
 			<!-- This div should be changed for the uui-scroll-container when it gets updated -->
@@ -170,15 +182,30 @@ export class UmbBodyLayoutElement extends LitElement {
 				box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3);
 			}
 
+			#header-slot,
+			#tabs-slot,
+			#action-menu-slot,
+			#navigation-slot {
+				display: flex;
+				height: 100%;
+				align-items: center;
+			}
+
+			#header-slot {
+				padding: 0 var(--uui-size-layout-1);
+				flex-grow: 1;
+			}
+
+			#navigation-slot,
+			#tabs-slot {
+				margin-left: auto;
+			}
+
 			#headline {
 				display: block;
 				margin: 0 var(--uui-size-layout-1);
 			}
 
-			#tabs {
-				margin-left: auto;
-			}
-
 			#main {
 				display: block;
 				flex: 1;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts
index 37fd268bda..9b53b1d1a4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/section-views/section-views.element.ts
@@ -119,59 +119,61 @@ export class UmbSectionViewsElement extends UmbLitElement {
 	}
 
 	render() {
-		return html`
-			${this._routes.length > 0
-				? html`
-						<umb-body-layout no-padding>
-							<div id="header" slot="header">${this.#renderDashboards()} ${this.#renderViews()}</div>
-							<umb-router-slot
-								.routes=${this._routes}
-								@init=${(event: UmbRouterSlotInitEvent) => {
-									this._routerPath = event.target.absoluteRouterPath;
-								}}
-								@change=${(event: UmbRouterSlotChangeEvent) => {
-									this._activePath = event.target.localActiveViewPath;
-								}}>
-							</umb-router-slot>
-						</umb-body-layout>
-				  `
-				: nothing}
-		`;
+		return this._routes.length > 0
+			? html`
+					<umb-body-layout no-padding>
+						${this.#renderDashboards()} ${this.#renderViews()}
+						<umb-router-slot
+							.routes=${this._routes}
+							@init=${(event: UmbRouterSlotInitEvent) => {
+								this._routerPath = event.target.absoluteRouterPath;
+							}}
+							@change=${(event: UmbRouterSlotChangeEvent) => {
+								this._activePath = event.target.localActiveViewPath;
+							}}>
+						</umb-router-slot>
+					</umb-body-layout>
+			  `
+			: html`${nothing}`;
 	}
 
 	#renderDashboards() {
-		return this._dashboards.length > 0 ? html`
-			<uui-tab-group id="dashboards">
-				${this._dashboards.map(
-					(dashboard) => html`
-						<uui-tab
-							.label="${dashboard.meta.label || dashboard.name}"
-							href="${this._routerPath}/dashboard/${dashboard.meta.pathname}"
-							?active="${this._activePath === 'dashboard/' + dashboard.meta.pathname}">
-							${dashboard.meta.label || dashboard.name}
-						</uui-tab>
-					`
-				)}
-			</uui-tab-group>
-		` : '';
+		return this._dashboards.length > 0
+			? html`
+					<uui-tab-group slot="header" id="dashboards">
+						${this._dashboards.map(
+							(dashboard) => html`
+								<uui-tab
+									.label="${dashboard.meta.label || dashboard.name}"
+									href="${this._routerPath}/dashboard/${dashboard.meta.pathname}"
+									?active="${this._activePath === 'dashboard/' + dashboard.meta.pathname}">
+									${dashboard.meta.label || dashboard.name}
+								</uui-tab>
+							`
+						)}
+					</uui-tab-group>
+			  `
+			: '';
 	}
 
 	#renderViews() {
-		return this._views.length > 0 ? html`
-			<uui-tab-group id="views">
-				${this._views.map(
-					(view) => html`
-						<uui-tab
-							.label="${view.meta.label || view.name}"
-							href="${this._routerPath}/view/${view.meta.pathname}"
-							?active="${this._activePath === 'view/' + view.meta.pathname}">
-							<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
-							${view.meta.label || view.name}
-						</uui-tab>
-					`
-				)}
-			</uui-tab-group>
-		` : '';
+		return this._views.length > 0
+			? html`
+					<uui-tab-group slot="navigation" id="views">
+						${this._views.map(
+							(view) => html`
+								<uui-tab
+									.label="${view.meta.label || view.name}"
+									href="${this._routerPath}/view/${view.meta.pathname}"
+									?active="${this._activePath === 'view/' + view.meta.pathname}">
+									<uui-icon slot="icon" name=${view.meta.icon}></uui-icon>
+									${view.meta.label || view.name}
+								</uui-tab>
+							`
+						)}
+					</uui-tab-group>
+			  `
+			: '';
 	}
 
 	static styles = [
@@ -184,22 +186,7 @@ export class UmbSectionViewsElement extends UmbLitElement {
 				height: 100%;
 			}
 
-			#header {
-				background-color: var(--uui-color-surface);
-				border-bottom: 1px solid var(--uui-color-divider-standalone);
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				height: var(--umb-header-layout-height);
-				box-sizing: border-box;
-			}
-
-			#dashboards {
-				margin: 0 var(--uui-size-layout-1);
-			}
-
 			#views {
-				justify-content: flex-end;
 				--uui-tab-divider: var(--uui-color-divider-standalone);
 			}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
index b957b1aded..8d10ebc83b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
@@ -125,7 +125,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
 			#header {
 				display: flex;
 				flex: 1 1 auto;
-				margin: 0 var(--uui-size-layout-1);
 			}
 
 			#name {