diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
index f9a8342735..40fd0fb918 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
@@ -101,16 +101,11 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
-			}
-			uui-box {
-				margin-top: var(--uui-size-layout-1);
+			#add {
+				width: 100%;
 			}
 
-			#add {
+			#add:not(:first-child) {
 				width: 100%;
 				margin-top: var(--uui-size-layout-1);
 			}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
index 3b7d116eda..0e1fce1fb8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
@@ -184,8 +184,10 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 
 	render() {
 		return html`
-			<div id="workspace-tab-bar">${this._routerPath ? this.renderTabsNavigation() : ''}${this.renderActions()}</div>
-			<uui-scroll-container>
+			<umb-body-layout header-height-fit>
+				<div id="header" slot="header">
+					${this._routerPath ? this.renderTabsNavigation() : ''}${this.renderActions()}
+				</div>
 				<umb-router-slot
 					.routes=${this._routes}
 					@init=${(event: UmbRouterSlotInitEvent) => {
@@ -195,7 +197,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 						this._activePath = event.target.absoluteActiveViewPath || '';
 					}}>
 				</umb-router-slot>
-			</uui-scroll-container>
+			</umb-body-layout>
 		`;
 	}
 
@@ -211,12 +213,11 @@ export class UmbDocumentTypeWorkspaceViewEditElement
 			}
 
 			/* TODO: This should be replaced with a general workspace bar — naming is hard */
-			#workspace-tab-bar {
-				padding: 0 var(--uui-size-layout-1);
+			#header {
+				width: 100%;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-				background-color: var(--uui-color-surface);
 				flex-wrap: nowrap;
 			}
 		`,