diff --git a/src/Umbraco.Web.UI.Client/.eslintrc.json b/src/Umbraco.Web.UI.Client/.eslintrc.json
index 5d886c4d8f..755ea8dc43 100644
--- a/src/Umbraco.Web.UI.Client/.eslintrc.json
+++ b/src/Umbraco.Web.UI.Client/.eslintrc.json
@@ -45,6 +45,7 @@
 				"local-rules/prefer-umbraco-cms-imports": "error",
 				"local-rules/no-external-imports": "error",
 				"local-rules/umb-class-prefix": "error",
+				"local-rules/prefer-static-styles-last": "warn",
 				"@typescript-eslint/no-non-null-assertion": "off"
 			},
 			"settings": {
diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts
index 8ad4209637..8ce9acb70b 100644
--- a/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/apps/auth/src/auth-layout.element.ts
@@ -5,6 +5,24 @@ import loginImg from '/login.jpeg';
 
 @customElement('umb-auth-layout')
 export class UmbAuthLayoutElement extends LitElement {
+	
+
+	render() {
+		return html`
+			<div id="background"></div>
+
+			<div id="logo">
+				<img src="${logoImg}" alt="Umbraco" />
+			</div>
+
+			<div id="container">
+				<uui-box id="box">
+					<slot></slot>
+				</uui-box>
+			</div>
+		`;
+	}
+	
 	static styles: CSSResultGroup = [
 		css`
 			#background {
@@ -49,22 +67,6 @@ export class UmbAuthLayoutElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<div id="background"></div>
-
-			<div id="logo">
-				<img src="${logoImg}" alt="Umbraco" />
-			</div>
-
-			<div id="container">
-				<uui-box id="box">
-					<slot></slot>
-				</uui-box>
-			</div>
-		`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test.element.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test.element.ts
index 263e68442c..eda90059f4 100644
--- a/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test.element.ts
+++ b/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test.element.ts
@@ -4,6 +4,16 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-external-login-provider-test')
 export class UmbExternalLoginProviderTestElement extends LitElement {
+	
+
+	render() {
+		return html`
+			<b>Custom External Login Provider</b>
+			<p>This is an example of a custom external login provider using the external login provider extension point</p>
+			<uui-button label="My custom login provider" look="primary"></uui-button>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -21,14 +31,6 @@ export class UmbExternalLoginProviderTestElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<b>Custom External Login Provider</b>
-			<p>This is an example of a custom external login provider using the external login provider extension point</p>
-			<uui-button label="My custom login provider" look="primary"></uui-button>
-		`;
-	}
 }
 
 export default UmbExternalLoginProviderTestElement;
diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test2.element.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test2.element.ts
index ab6bbf7d45..ab341a7846 100644
--- a/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test2.element.ts
+++ b/src/Umbraco.Web.UI.Client/apps/auth/src/external-login-providers/external-login-provider-test2.element.ts
@@ -4,6 +4,26 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-external-login-provider-test2')
 export class UmbExternalLoginProviderTest2Element extends LitElement {
+	
+
+	render() {
+		return html`
+			<b>Another Custom External Login Provider</b>
+			<p>This is an example of another custom external login provider</p>
+			<uui-form-layout-item>
+				<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
+				<uui-input
+					type="email"
+					id="email"
+					name="email"
+					placeholder="Enter your email..."
+					required
+					required-message="Email is required"></uui-input>
+			</uui-form-layout-item>
+			<uui-button label="Custom login" look="primary"></uui-button>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -24,24 +44,6 @@ export class UmbExternalLoginProviderTest2Element extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<b>Another Custom External Login Provider</b>
-			<p>This is an example of another custom external login provider</p>
-			<uui-form-layout-item>
-				<uui-label id="emailLabel" for="email" slot="label" required>Email</uui-label>
-				<uui-input
-					type="email"
-					id="email"
-					name="email"
-					placeholder="Enter your email..."
-					required
-					required-message="Email is required"></uui-input>
-			</uui-form-layout-item>
-			<uui-button label="Custom login" look="primary"></uui-button>
-		`;
-	}
 }
 
 export default UmbExternalLoginProviderTest2Element;
diff --git a/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts b/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts
index 018d87b14d..14fdf70373 100644
--- a/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts
+++ b/src/Umbraco.Web.UI.Client/apps/auth/src/login.element.ts
@@ -7,15 +7,7 @@ import './auth-layout.element';
 
 @customElement('umb-login')
 export default class UmbLoginElement extends LitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			#email,
-			#password {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _loggingIn = false;
@@ -109,6 +101,16 @@ export default class UmbLoginElement extends LitElement {
 			</umb-auth-layout>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			#email,
+			#password {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
index 5d121e8cfb..42979e16e0 100644
--- a/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
+++ b/src/Umbraco.Web.UI.Client/eslint-local-rules.cjs
@@ -232,4 +232,51 @@ module.exports = {
 			};
 		},
 	},
+
+	/** @type {import('eslint').RuleModule}*/
+	'prefer-static-styles-last': {
+		meta: {
+			type: 'suggestion',
+			docs: {
+				description:
+					'Enforce the "styles" property with the static modifier to be the last property of a class that ends with "Element".',
+				category: 'Best Practices',
+				recommended: true,
+			},
+			fixable: 'code',
+			schema: [],
+		},
+		create: function (context) {
+			return {
+				ClassDeclaration(node) {
+					const className = node.id.name;
+					if (className.endsWith('Element')) {
+						const staticStylesProperty = node.body.body.find((bodyNode) => {
+							return bodyNode.type === 'PropertyDefinition' && bodyNode.key.name === 'styles' && bodyNode.static;
+						});
+						if (staticStylesProperty) {
+							const lastProperty = node.body.body[node.body.body.length - 1];
+							if (lastProperty.key.name !== staticStylesProperty.key.name) {
+								context.report({
+									node: staticStylesProperty,
+									message: 'The "styles" property should be the last property of a class declaration.',
+									data: {
+										className: className,
+									},
+									fix: function (fixer) {
+										const sourceCode = context.getSourceCode();
+										const staticStylesPropertyText = sourceCode.getText(staticStylesProperty);
+										return [
+											fixer.replaceTextRange(staticStylesProperty.range, ''),
+											fixer.insertTextAfterRange(lastProperty.range, '\n	\n	' + staticStylesPropertyText),
+										];
+									},
+								});
+							}
+						}
+					}
+				},
+			};
+		},
+	},
 };
diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index af690fdd6e..a4c473067b 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -22,18 +22,7 @@ import { contextData, umbDebugContextEventType } from '@umbraco-cms/backoffice/c
 
 @customElement('umb-app')
 export class UmbAppElement extends UmbLitElement {
-	static styles = css`
-		:host {
-			overflow: hidden;
-		}
-
-		:host,
-		#router-slot {
-			display: block;
-			width: 100%;
-			height: 100vh;
-		}
-	`;
+	
 
 	@property({ type: String })
 	private umbracoUrl?: string;
@@ -158,6 +147,19 @@ export class UmbAppElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = css`
+		:host {
+			overflow: hidden;
+		}
+
+		:host,
+		#router-slot {
+			display: block;
+			width: 100%;
+			height: 100vh;
+		}
+	`;
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
index 65545cf51d..c08a7c54f0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -28,23 +28,7 @@ const CORE_PACKAGES = [
 
 @defineElement('umb-backoffice')
 export class UmbBackofficeElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				width: 100%;
-				color: var(--uui-color-text);
-				font-size: 14px;
-				box-sizing: border-box;
-			}
-			umb-backoffice-modal-container {
-				z-index: 1000;
-			}
-		`,
-	];
+	
 
 	constructor() {
 		super();
@@ -64,6 +48,24 @@ export class UmbBackofficeElement extends UmbLitElement {
 			<umb-backoffice-modal-container></umb-backoffice-modal-container>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				width: 100%;
+				color: var(--uui-color-text);
+				font-size: 14px;
+				box-sizing: border-box;
+			}
+			umb-backoffice-modal-container {
+				z-index: 1000;
+			}
+		`,
+	];
 }
 
 export default UmbBackofficeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
index 8e7de5f464..364fdf057d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
@@ -13,79 +13,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-redirect-management')
 export class UmbDashboardRedirectManagementElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-
-			.actions {
-				display: flex;
-				gap: var(--uui-size-space-1);
-				justify-content: space-between;
-				margin-bottom: var(--uui-size-space-4);
-			}
-
-			.actions uui-icon {
-				transform: translateX(50%);
-			}
-
-			uui-table {
-				table-layout: fixed;
-			}
-
-			uui-table-head-cell:nth-child(2*n) {
-				width: 10%;
-			}
-
-			uui-table-head-cell:last-child,
-			uui-table-cell:last-child {
-				text-align: right;
-			}
-
-			uui-table uui-icon {
-				vertical-align: sub;
-			}
-			uui-pagination {
-				display: inline-block;
-			}
-			.pagination {
-				display: flex;
-				justify-content: center;
-				margin-top: var(--uui-size-space-5);
-			}
-
-			.trackerDisabled {
-				position: relative;
-				-webkit-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-			}
-			.trackerDisabled::after {
-				content: '';
-				background-color: var(--uui-color-disabled);
-				position: absolute;
-				border-radius: 2px;
-				left: 0;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				-webkit-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-			}
-
-			a {
-				color: var(--uui-color-interactive);
-			}
-			a:hover,
-			a:focus {
-				color: var(--uui-color-interactive-emphasis);
-			}
-		`,
-	];
+	
 
 	@property({ type: Number, attribute: 'items-per-page' })
 	itemsPerPage = 20;
@@ -337,6 +265,80 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 			<uui-pagination .total=${totalPages} @change="${this._onPageChange}"></uui-pagination>
 		</div>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			.actions {
+				display: flex;
+				gap: var(--uui-size-space-1);
+				justify-content: space-between;
+				margin-bottom: var(--uui-size-space-4);
+			}
+
+			.actions uui-icon {
+				transform: translateX(50%);
+			}
+
+			uui-table {
+				table-layout: fixed;
+			}
+
+			uui-table-head-cell:nth-child(2*n) {
+				width: 10%;
+			}
+
+			uui-table-head-cell:last-child,
+			uui-table-cell:last-child {
+				text-align: right;
+			}
+
+			uui-table uui-icon {
+				vertical-align: sub;
+			}
+			uui-pagination {
+				display: inline-block;
+			}
+			.pagination {
+				display: flex;
+				justify-content: center;
+				margin-top: var(--uui-size-space-5);
+			}
+
+			.trackerDisabled {
+				position: relative;
+				-webkit-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+			}
+			.trackerDisabled::after {
+				content: '';
+				background-color: var(--uui-color-disabled);
+				position: absolute;
+				border-radius: 2px;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				-webkit-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+			}
+
+			a {
+				color: var(--uui-color-interactive);
+			}
+			a:hover,
+			a:focus {
+				color: var(--uui-color-interactive-emphasis);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardRedirectManagementElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts
index 3d8aca6433..7445e1ed95 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/welcome/dashboard-welcome.element.ts
@@ -4,15 +4,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-dashboard-welcome')
 export class UmbDashboardWelcomeElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`
@@ -22,6 +14,16 @@ export class UmbDashboardWelcomeElement extends LitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardWelcomeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
index 41f8b961b5..f811da6aae 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
@@ -12,7 +12,7 @@ export class UmbAllowedDocumentTypesModalElement extends UmbModalBaseElement<
 	UmbAllowedDocumentTypesModalData,
 	UmbAllowedDocumentTypesModalResult
 > {
-	static styles = [UUITextStyles];
+	
 
 	#documentTypeRepository = new UmbDocumentTypeRepository(this);
 
@@ -60,6 +60,8 @@ export class UmbAllowedDocumentTypesModalElement extends UmbModalBaseElement<
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbAllowedDocumentTypesModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts
index 78b74edc56..a54e6895cd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-document-type-workspace')
 export class UmbDocumentTypeWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	#workspaceContext = new UmbDocumentTypeWorkspaceContext(this);
 	#element = new UmbDocumentTypeWorkspaceEditorElement();
@@ -28,6 +28,8 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbDocumentTypeWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.element.ts
index 5f7c657b58..cfe39a03f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-design.element.ts
@@ -9,73 +9,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-document-type-workspace-view-design')
 export class UmbDocumentTypeWorkspaceViewDesignElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-			/* TODO: This should be replaced with a general workspace bar — naming is hard */
-			#workspace-tab-bar {
-				padding: 0 var(--uui-size-layout-1);
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				background-color: var(--uui-color-surface);
-				flex-wrap: nowrap;
-			}
-			.tab-actions {
-				display: flex;
-				gap: var(--uui-size-space-4);
-			}
-			.tab-actions uui-button uui-icon {
-				padding-right: calc(-1 * var(--uui-size-space-4));
-			}
-
-			uui-tab {
-				display: flex;
-				flex-direction: row;
-				flex-wrap: nowrap;
-			}
-
-			uui-tab .trash {
-				display: flex;
-				align-items: stretch;
-			}
-
-			uui-tab uui-input {
-				flex-grow: 1;
-			}
-
-			uui-input:not(:focus) {
-				border: 1px solid transparent;
-			}
-
-			uui-input:not(:hover, :focus) .trash {
-				opacity: 0;
-			}
-
-			/** Property Group Wrapper */
-
-			#wrapper {
-				margin: var(--uui-size-layout-1);
-			}
-
-			#add-group {
-				margin-top: var(--uui-size-layout-1);
-				width: 100%;
-				--uui-button-height: var(--uui-size-layout-4);
-			}
-
-			.group-headline {
-				display: flex;
-				gap: var(--uui-size-space-4);
-			}
-			.group-headline uui-input {
-				flex-grow: 1;
-			}
-		`,
-	];
+	
 
 	private _workspaceContext?: UmbDocumentTypeWorkspaceContext;
 
@@ -162,6 +96,74 @@ export class UmbDocumentTypeWorkspaceViewDesignElement extends UmbLitElement {
 			</uui-button>
 		</uui-tab-group>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+			/* TODO: This should be replaced with a general workspace bar — naming is hard */
+			#workspace-tab-bar {
+				padding: 0 var(--uui-size-layout-1);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background-color: var(--uui-color-surface);
+				flex-wrap: nowrap;
+			}
+			.tab-actions {
+				display: flex;
+				gap: var(--uui-size-space-4);
+			}
+			.tab-actions uui-button uui-icon {
+				padding-right: calc(-1 * var(--uui-size-space-4));
+			}
+
+			uui-tab {
+				display: flex;
+				flex-direction: row;
+				flex-wrap: nowrap;
+			}
+
+			uui-tab .trash {
+				display: flex;
+				align-items: stretch;
+			}
+
+			uui-tab uui-input {
+				flex-grow: 1;
+			}
+
+			uui-input:not(:focus) {
+				border: 1px solid transparent;
+			}
+
+			uui-input:not(:hover, :focus) .trash {
+				opacity: 0;
+			}
+
+			/** Property Group Wrapper */
+
+			#wrapper {
+				margin: var(--uui-size-layout-1);
+			}
+
+			#add-group {
+				margin-top: var(--uui-size-layout-1);
+				width: 100%;
+				--uui-button-height: var(--uui-size-layout-4);
+			}
+
+			.group-headline {
+				display: flex;
+				gap: var(--uui-size-space-4);
+			}
+			.group-headline uui-input {
+				flex-grow: 1;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypeWorkspaceViewDesignElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
index 8bf2ac1618..2cf704ca93 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
@@ -9,18 +9,7 @@ import './document-type-workspace-view-edit-properties.element';
 
 @customElement('umb-document-type-workspace-view-edit-tab')
 export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-box {
-				margin: var(--uui-size-layout-1);
-			}
-
-			#add {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	private _ownerTabId?: string | undefined;
 
@@ -106,6 +95,19 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
 			<uui-button id="add" look="placeholder" @click=${this.#onAddGroup}> Add Group </uui-button>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+
+			#add {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypeWorkspaceViewEditTabElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
index f6fe6e032d..e819b0cf9d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
@@ -13,25 +13,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-document-type-workspace-view-edit')
 export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				--uui-tab-background: var(--uui-color-surface);
-			}
-
-			/* TODO: This should be replaced with a general workspace bar — naming is hard */
-			#workspace-tab-bar {
-				padding: 0 var(--uui-size-layout-1);
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				background-color: var(--uui-color-surface);
-				flex-wrap: nowrap;
-			}
-		`,
-	];
+	
 
 	//private _hasRootProperties = false;
 	private _hasRootGroups = false;
@@ -215,6 +197,26 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
 			</umb-router-slot>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				--uui-tab-background: var(--uui-color-surface);
+			}
+
+			/* TODO: This should be replaced with a general workspace bar — naming is hard */
+			#workspace-tab-bar {
+				padding: 0 var(--uui-size-layout-1);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				background-color: var(--uui-color-surface);
+				flex-wrap: nowrap;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypeWorkspaceViewEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
index a20182afe1..452be79d1b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/column-layouts/document-table-actions-column-layout.element.ts
@@ -7,26 +7,7 @@ import { UmbExecutedEvent } from '@umbraco-cms/backoffice/events';
 // TODO: this could be done more generic, but for now we just need it for the document table
 @customElement('umb-document-table-actions-column-layout')
 export class UmbDocumentTableActionColumnLayoutElement extends LitElement {
-	static styles = [
-		css`
-			#action-menu-popover {
-				display: block;
-				text-align: right;
-			}
-			#action-menu-dropdown {
-				overflow: hidden;
-				z-index: -1;
-				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				width: 500px;
-			}
-		`,
-	];
+	
 
 	@property({ type: Object, attribute: false })
 	column!: UmbTableColumn;
@@ -75,6 +56,27 @@ export class UmbDocumentTableActionColumnLayoutElement extends LitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		css`
+			#action-menu-popover {
+				display: block;
+				text-align: right;
+			}
+			#action-menu-dropdown {
+				overflow: hidden;
+				z-index: -1;
+				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+				width: 500px;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTableActionColumnLayoutElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/document-table-collection-view.element.ts
index ec3eef7b88..4fc874eaf6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/document-table-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/collection/views/table/document-table-collection-view.element.ts
@@ -23,23 +23,7 @@ type EntityType = DocumentTreeItemResponseModel;
 
 @customElement('umb-document-table-collection-view')
 export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				box-sizing: border-box;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-
-			/* TODO: Should we have embedded padding in the table component? */
-			umb-table {
-				padding: 0; /* To fix the embedded padding in the table component. */
-			}
-		`,
-	];
+	
 
 	@state()
 	private _items?: Array<EntityTreeItemResponseModel>;
@@ -150,6 +134,24 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 				@ordered="${this._handleOrdering}"></umb-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				box-sizing: border-box;
+				height: 100%;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+
+			/* TODO: Should we have embedded padding in the table component? */
+			umb-table {
+				padding: 0; /* To fix the embedded padding in the table component. */
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTableCollectionViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
index 88429ab1a7..a228328e63 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-picker/document-picker-modal.element.ts
@@ -11,40 +11,7 @@ export class UmbDocumentPickerModalElement extends UmbModalBaseElement<
 	UmbDocumentPickerModalData,
 	UmbDocumentPickerModalResult
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
+	
 
 	@state()
 	_selection: Array<string> = [];
@@ -92,6 +59,41 @@ export class UmbDocumentPickerModalElement extends UmbModalBaseElement<
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts
index c7e6d223a5..cfc526eb20 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts
@@ -11,40 +11,7 @@ export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement<
 	UmbDocumentTypePickerModalData,
 	UmbDocumentTypePickerModalResult
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
+	
 
 	@state()
 	_selection: Array<string> = [];
@@ -92,6 +59,41 @@ export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement<
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTypePickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts
index e71f162a4b..ad11c5badb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/tree/tree-item/document-tree-item.element.ts
@@ -7,29 +7,7 @@ import { DocumentTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-a
 
 @customElement('umb-document-tree-item')
 export class UmbDocumentTreeItemElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#icon-container {
-				position: relative;
-			}
-
-			#icon {
-				vertical-align: middle;
-			}
-
-			#status-symbol {
-				width: 8px;
-				height: 8px;
-				background-color: blue;
-				display: block;
-				position: absolute;
-				bottom: 0;
-				right: 0;
-				border-radius: 100%;
-			}
-		`,
-	];
+	
 
 	private _item?: DocumentTreeItemResponseModel;
 	@property({ type: Object, attribute: false })
@@ -67,6 +45,30 @@ export class UmbDocumentTreeItemElement extends UmbLitElement {
 	#renderLabel() {
 		return html` <span id="label" slot="label">${this.item?.name}</span> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#icon-container {
+				position: relative;
+			}
+
+			#icon {
+				vertical-align: middle;
+			}
+
+			#status-symbol {
+				width: 8px;
+				height: 8px;
+				background-color: blue;
+				display: block;
+				position: absolute;
+				bottom: 0;
+				right: 0;
+				border-radius: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentTreeItemElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-properties.element.ts
index 2cc4063213..3044e047a4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-properties.element.ts
@@ -9,17 +9,7 @@ import { DocumentTypePropertyTypeResponseModel } from '@umbraco-cms/backoffice/b
 
 @customElement('umb-document-workspace-view-edit-properties')
 export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			.property {
-				border-bottom: 1px solid var(--uui-color-divider);
-			}
-			.property:last-child {
-				border-bottom: 0;
-			}
-		`,
-	];
+	
 
 	@property({ type: String, attribute: 'container-name', reflect: false })
 	public get containerName(): string | undefined {
@@ -57,6 +47,18 @@ export class UmbDocumentWorkspaceViewEditPropertiesElement extends UmbLitElement
 			(property) => html`<umb-variantable-property class="property" .property=${property}></umb-variantable-property> `
 		);
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			.property {
+				border-bottom: 1px solid var(--uui-color-divider);
+			}
+			.property:last-child {
+				border-bottom: 0;
+			}
+		`,
+	];
 }
 
 export default UmbDocumentWorkspaceViewEditPropertiesElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts
index 6febfe89a9..fd407b65d5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit-tab.element.ts
@@ -9,14 +9,7 @@ import './document-workspace-view-edit-properties.element';
 
 @customElement('umb-document-workspace-view-edit-tab')
 export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-box {
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	private _tabName?: string | undefined;
 
@@ -81,6 +74,15 @@ export class UmbDocumentWorkspaceViewEditTabElement extends UmbLitElement {
 			)}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentWorkspaceViewEditTabElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit.element.ts
index e1b10e8229..c885e6df46 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/edit/document-workspace-view-edit.element.ts
@@ -12,15 +12,7 @@ import { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-document-workspace-view-edit')
 export class UmbDocumentWorkspaceViewEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				--uui-tab-background: var(--uui-color-surface);
-			}
-		`,
-	];
+	
 
 	//private _hasRootProperties = false;
 	private _hasRootGroups = false;
@@ -147,6 +139,16 @@ export class UmbDocumentWorkspaceViewEditElement extends UmbLitElement {
 			</umb-router-slot>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				--uui-tab-background: var(--uui-color-surface);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentWorkspaceViewEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
index bb6d71cd6c..95d73f6509 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/workspace/views/info/document-info-workspace-view.element.ts
@@ -22,96 +22,7 @@ type HistoryLogType = 'Publish' | 'Save' | 'Unpublish' | 'ContentVersionEnableCl
 
 @customElement('umb-document-info-workspace-view')
 export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: grid;
-				gap: var(--uui-size-layout-1);
-				margin: var(--uui-size-layout-1);
-				grid-template-columns: 1fr 350px;
-			}
-
-			div.container {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-layout-1);
-			}
-
-			//General section
-
-			#general-section {
-				display: flex;
-				flex-direction: column;
-			}
-
-			.general-item {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-1);
-			}
-
-			.general-item:not(:last-child) {
-				margin-bottom: var(--uui-size-space-6);
-			}
-
-			// Link section
-
-			#link-section {
-				display: flex;
-				flex-direction: column;
-				text-align: left;
-			}
-
-			.link-item {
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
-				display: grid;
-				grid-template-columns: 75px 1fr;
-				color: inherit;
-				text-decoration: none;
-			}
-
-			.link-language {
-				color: var(--uui-color-divider-emphasis);
-			}
-
-			.link-content.italic {
-				font-style: italic;
-			}
-
-			.link-item uui-icon {
-				margin-right: var(--uui-size-space-2);
-				vertical-align: middle;
-			}
-
-			.link-item.with-href {
-				cursor: pointer;
-			}
-
-			.link-item.with-href:hover {
-				background: var(--uui-color-divider);
-			}
-
-			//History section
-
-			uui-tag uui-icon {
-				margin-right: var(--uui-size-space-1);
-			}
-
-			.log-type {
-				display: flex;
-				gap: var(--uui-size-space-2);
-			}
-			uui-pagination {
-				display: inline-block;
-			}
-			.pagination {
-				display: flex;
-				justify-content: center;
-				margin-top: var(--uui-size-space-4);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _historyList: HistoryNode[] = [
@@ -325,6 +236,97 @@ export class UmbDocumentInfoWorkspaceViewElement extends UmbLitElement {
 				return 'Could not detech log type';
 		}
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: grid;
+				gap: var(--uui-size-layout-1);
+				margin: var(--uui-size-layout-1);
+				grid-template-columns: 1fr 350px;
+			}
+
+			div.container {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-layout-1);
+			}
+
+			//General section
+
+			#general-section {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.general-item {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-1);
+			}
+
+			.general-item:not(:last-child) {
+				margin-bottom: var(--uui-size-space-6);
+			}
+
+			// Link section
+
+			#link-section {
+				display: flex;
+				flex-direction: column;
+				text-align: left;
+			}
+
+			.link-item {
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				display: grid;
+				grid-template-columns: 75px 1fr;
+				color: inherit;
+				text-decoration: none;
+			}
+
+			.link-language {
+				color: var(--uui-color-divider-emphasis);
+			}
+
+			.link-content.italic {
+				font-style: italic;
+			}
+
+			.link-item uui-icon {
+				margin-right: var(--uui-size-space-2);
+				vertical-align: middle;
+			}
+
+			.link-item.with-href {
+				cursor: pointer;
+			}
+
+			.link-item.with-href:hover {
+				background: var(--uui-color-divider);
+			}
+
+			//History section
+
+			uui-tag uui-icon {
+				margin-right: var(--uui-size-space-1);
+			}
+
+			.log-type {
+				display: flex;
+				gap: var(--uui-size-space-2);
+			}
+			uui-pagination {
+				display: inline-block;
+			}
+			.pagination {
+				display: flex;
+				justify-content: center;
+				margin-top: var(--uui-size-space-4);
+			}
+		`,
+	];
 }
 
 export default UmbDocumentInfoWorkspaceViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts
index 7d2d0e4214..efdec63f87 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace-edit.element.ts
@@ -8,20 +8,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-media-type-workspace-edit')
 export class UmbMediaTypeWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-layout-1);
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _mediaTypeName?: string | null = '';
@@ -59,6 +46,21 @@ export class UmbMediaTypeWorkspaceEditElement extends UmbLitElement {
 			<uui-input id="header" slot="header" .value=${this._mediaTypeName} @input="${this.#handleInput}"></uui-input>
 		</umb-workspace-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-layout-1);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMediaTypeWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts
index a2f98ec9c6..f2aa3bd13f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media-types/workspace/media-type-workspace.element.ts
@@ -8,20 +8,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-media-type-workspace')
 export class UmbMediaTypeWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-layout-1);
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbWorkspaceMediaTypeContext(this);
 	#element = new UmbMediaTypeWorkspaceEditElement();
@@ -41,6 +28,21 @@ export class UmbMediaTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-layout-1);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMediaTypeWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/collection-view-media-test.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/collection-view-media-test.element.ts
index 5527885599..66d295d385 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/collection-view-media-test.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/collection-view-media-test.element.ts
@@ -4,11 +4,13 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-collection-view-media-test')
 export class UmbCollectionViewMediaTestElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	render() {
 		return html`umb-collection-view-media-test`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts
index a34369425c..889e595f7d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-grid-collection-view.element.ts
@@ -9,61 +9,7 @@ import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api
 
 @customElement('umb-media-grid-collection-view')
 export class UmbMediaGridCollectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				box-sizing: border-box;
-				position: relative;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-			:host([dragging]) #dropzone {
-				opacity: 1;
-				pointer-events: all;
-			}
-			[dropzone] {
-				opacity: 0;
-			}
-			#dropzone {
-				opacity: 0;
-				pointer-events: none;
-				display: block;
-				position: absolute;
-				inset: 0px;
-				z-index: 100;
-				backdrop-filter: opacity(1); /* Removes the built in blur effect */
-				border-radius: var(--uui-border-radius);
-				overflow: clip;
-				border: 1px solid var(--uui-color-focus);
-			}
-			#dropzone:after {
-				content: '';
-				display: block;
-				position: absolute;
-				inset: 0;
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-focus);
-				opacity: 0.2;
-			}
-			#media-folders {
-				margin-bottom: var(--uui-size-space-5);
-			}
-			#media-folders,
-			#media-files {
-				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-				grid-template-rows: repeat(auto-fill, 200px);
-				gap: var(--uui-size-space-5);
-			}
-			.media-item img {
-				object-fit: contain;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _mediaItems?: Array<EntityTreeItemResponseModel>;
@@ -174,6 +120,62 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+				position: relative;
+				height: 100%;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+			:host([dragging]) #dropzone {
+				opacity: 1;
+				pointer-events: all;
+			}
+			[dropzone] {
+				opacity: 0;
+			}
+			#dropzone {
+				opacity: 0;
+				pointer-events: none;
+				display: block;
+				position: absolute;
+				inset: 0px;
+				z-index: 100;
+				backdrop-filter: opacity(1); /* Removes the built in blur effect */
+				border-radius: var(--uui-border-radius);
+				overflow: clip;
+				border: 1px solid var(--uui-color-focus);
+			}
+			#dropzone:after {
+				content: '';
+				display: block;
+				position: absolute;
+				inset: 0;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-focus);
+				opacity: 0.2;
+			}
+			#media-folders {
+				margin-bottom: var(--uui-size-space-5);
+			}
+			#media-folders,
+			#media-files {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+				grid-template-rows: repeat(auto-fill, 200px);
+				gap: var(--uui-size-space-5);
+			}
+			.media-item img {
+				object-fit: contain;
+			}
+		`,
+	];
 }
 
 export default UmbMediaGridCollectionViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-table-collection-view.element.ts
index 7e5a02a213..31d502c771 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-table-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/collection-view/media-table-collection-view.element.ts
@@ -17,23 +17,7 @@ import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api
 
 @customElement('umb-media-table-collection-view')
 export class UmbMediaTableCollectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				box-sizing: border-box;
-				height: 100%;
-				width: 100%;
-				padding: var(--uui-size-space-3) var(--uui-size-space-6);
-			}
-
-			/* TODO: Should we have embedded padding in the table component? */
-			umb-table {
-				padding: 0; /* To fix the embedded padding in the table component. */
-			}
-		`,
-	];
+	
 
 	@state()
 	private _mediaItems?: Array<EntityTreeItemResponseModel>;
@@ -130,6 +114,24 @@ export class UmbMediaTableCollectionViewElement extends UmbLitElement {
 				@ordered="${this._handleOrdering}"></umb-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				box-sizing: border-box;
+				height: 100%;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+
+			/* TODO: Should we have embedded padding in the table component? */
+			umb-table {
+				padding: 0; /* To fix the embedded padding in the table component. */
+			}
+		`,
+	];
 }
 
 export default UmbMediaTableCollectionViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
index e141291a0b..bd9655512c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/modals/media-picker/media-picker-modal.element.ts
@@ -10,40 +10,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<
 	UmbMediaPickerModalData,
 	UmbMediaPickerModalResult
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
+	
 
 	@state()
 	_selection: Array<string> = [];
@@ -91,6 +58,41 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+
+			#content-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.content-item {
+				cursor: pointer;
+			}
+
+			.content-item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+		`,
+	];
 }
 
 export default UmbMediaPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts
index 81224bde73..651454dd8f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts
@@ -7,25 +7,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-media-workspace-edit')
 export class UmbMediaWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#header {
-				margin: 0 var(--uui-size-layout-1);
-				flex: 1 1 auto;
-			}
-
-			#footer {
-				margin: 0 var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	_id?: string;
@@ -56,6 +38,26 @@ export class UmbMediaWorkspaceEditElement extends UmbLitElement {
 				unique="${this._id}"></umb-workspace-action-menu>
 		</umb-workspace-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#header {
+				margin: 0 var(--uui-size-layout-1);
+				flex: 1 1 auto;
+			}
+
+			#footer {
+				margin: 0 var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbMediaWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts
index aab70442d0..a3488970c2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts
@@ -8,16 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-workspace')
 export class UmbMediaWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbMediaWorkspaceContext(this);
 	#element = new UmbMediaWorkspaceEditElement();
@@ -37,6 +28,17 @@ export class UmbMediaWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMediaWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.element.ts
index 3c0bd2eb8c..3820549b09 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/edit/media-edit-workspace-view.element.ts
@@ -5,11 +5,13 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-edit-workspace-view')
 export class UmbMediaEditWorkspaceViewElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	render() {
 		return html`<div>Render Media Props</div>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbMediaEditWorkspaceViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.element.ts
index a6e840c2c7..274418a635 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/views/info/media-info-workspace-view.element.ts
@@ -5,11 +5,13 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-media-info-workspace-view')
 export class UmbMediaInfoWorkspaceViewElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	render() {
 		return html`<div>Media info</div>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbMediaInfoWorkspaceViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts
index 3b2acc07eb..76b4e052c5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts
@@ -4,15 +4,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-dashboard-members-welcome')
 export class UmbDashboardMembersWelcomeElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`
@@ -25,6 +17,16 @@ export class UmbDashboardMembersWelcomeElement extends LitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardMembersWelcomeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
index 05f8b8a5f6..acbebc3a5b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts
@@ -13,27 +13,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
  */
 @customElement('umb-member-group-workspace-edit')
 export class UmbMemberGroupWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#header {
-				margin: 0 var(--uui-size-layout-1);
-				flex: 1 1 auto;
-			}
-
-			#name {
-				width: 100%;
-				flex: 1 1 auto;
-				align-items: center;
-			}
-		`,
-	];
+	
 
 	#workspaceContext?: UmbWorkspaceMemberGroupContext;
 
@@ -72,6 +52,28 @@ export class UmbMemberGroupWorkspaceEditElement extends UmbLitElement {
 			</div>
 		</umb-workspace-layout> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#header {
+				margin: 0 var(--uui-size-layout-1);
+				flex: 1 1 auto;
+			}
+
+			#name {
+				width: 100%;
+				flex: 1 1 auto;
+				align-items: center;
+			}
+		`,
+	];
 }
 
 export default UmbMemberGroupWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.element.ts
index 8639559f35..9a98c2a50b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.element.ts
@@ -12,16 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-member-group-workspace')
 export class UmbMemberGroupWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbWorkspaceMemberGroupContext(this);
 	#element = new UmbMemberGroupWorkspaceEditElement();
@@ -41,6 +32,17 @@ export class UmbMemberGroupWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMemberGroupWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts
index a8e5d16e0a..121ffa67f4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts
@@ -8,29 +8,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-workspace-view-member-group-info')
 export class UmbWorkspaceViewMemberGroupInfoElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				margin: var(--uui-size-layout-1);
-				gap: var(--uui-size-layout-1);
-				justify-content: space-between;
-			}
-
-			uui-box {
-				margin-bottom: var(--ui-size-layout-1);
-			}
-
-			uui-box:first-child {
-				flex: 1 1 75%;
-			}
-
-			uui-box:last-child {
-				min-width: 320px;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _memberGroup?: MemberGroupDetails;
@@ -80,6 +58,30 @@ export class UmbWorkspaceViewMemberGroupInfoElement extends UmbLitElement {
 	render() {
 		return html` ${this._renderMemberGroupInfo()}${this._renderGeneralInfo()} `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				margin: var(--uui-size-layout-1);
+				gap: var(--uui-size-layout-1);
+				justify-content: space-between;
+			}
+
+			uui-box {
+				margin-bottom: var(--ui-size-layout-1);
+			}
+
+			uui-box:first-child {
+				flex: 1 1 75%;
+			}
+
+			uui-box:last-child {
+				min-width: 320px;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewMemberGroupInfoElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace-edit.element.ts
index eac47341ec..5d7d195fb6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace-edit.element.ts
@@ -5,6 +5,14 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-member-type-workspace-edit')
 export class UmbMemberTypeWorkspaceEditElement extends UmbLitElement {
+	
+
+	render() {
+		return html`
+			<umb-workspace-layout alias="Umb.Workspace.MemberType"> Member Type Workspace </umb-workspace-layout>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -21,12 +29,6 @@ export class UmbMemberTypeWorkspaceEditElement extends UmbLitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<umb-workspace-layout alias="Umb.Workspace.MemberType"> Member Type Workspace </umb-workspace-layout>
-		`;
-	}
 }
 
 export default UmbMemberTypeWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.element.ts
index f7cbc5f788..19a4fd8682 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/member-types/workspace/member-type-workspace.element.ts
@@ -8,16 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-member-type-workspace')
 export class UmbMemberTypeWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbMemberTypeWorkspaceContext(this);
 	#element = new UmbMemberTypeWorkspaceEditElement();
@@ -37,6 +28,17 @@ export class UmbMemberTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMemberTypeWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace-edit.element.ts
index abebd0f1da..6e21c30ca6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace-edit.element.ts
@@ -4,6 +4,12 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-member-workspace-edit')
 export class UmbMemberWorkspaceEditElement extends LitElement {
+	
+
+	render() {
+		return html` <umb-workspace-layout alias="Umb.Workspace.Member">Member Workspace</umb-workspace-layout> `;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -14,10 +20,6 @@ export class UmbMemberWorkspaceEditElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html` <umb-workspace-layout alias="Umb.Workspace.Member">Member Workspace</umb-workspace-layout> `;
-	}
 }
 
 export default UmbMemberWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts
index dbe2e140cf..8747bc587b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts
@@ -8,16 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-member-workspace')
 export class UmbMemberWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbMemberWorkspaceContext(this);
 	#element = new UmbMemberWorkspaceEditElement();
@@ -37,6 +28,17 @@ export class UmbMemberWorkspaceElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbMemberWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts
index ccb98189a6..439cab0304 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-builder/workspace/workspace-package-builder.element.ts
@@ -13,29 +13,7 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 
 @customElement('umb-workspace-package-builder')
 export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				height: 100%;
-			}
-
-			.header {
-				margin: 0 var(--uui-size-layout-1);
-				display: flex;
-				gap: var(--uui-size-space-4);
-			}
-
-			uui-box {
-				margin: var(--uui-size-layout-1);
-			}
-
-			uui-checkbox {
-				margin-top: var(--uui-size-space-4);
-			}
-		`,
-	];
+	
 
 	@property()
 	entityId?: string;
@@ -286,6 +264,30 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 			<umb-input-checkbox-list></umb-input-checkbox-list>
 		</div>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+			}
+
+			.header {
+				margin: 0 var(--uui-size-layout-1);
+				display: flex;
+				gap: var(--uui-size-space-4);
+			}
+
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-checkbox {
+				margin-top: var(--uui-size-space-4);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspacePackageBuilderElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-repo/workspace/workspace-package.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-repo/workspace/workspace-package.element.ts
index 8738fa7f4f..efe25ddfaa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-repo/workspace/workspace-package.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-repo/workspace/workspace-package.element.ts
@@ -4,15 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 @customElement('umb-workspace-package')
 export class UmbWorkspacePackageElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			.header {
-				display: flex;
-				font-size: var(--uui-type-h5-size);
-			}
-		`,
-	];
+	
 
 	@property()
 	entityId?: string;
@@ -50,6 +42,16 @@ export class UmbWorkspacePackageElement extends LitElement {
 	render() {
 		return html`<umb-workspace-layout alias="Umb.Workspace.Package"> ${this._renderHeader()} </umb-workspace-layout> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			.header {
+				display: flex;
+				font-size: var(--uui-type-h5-size);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspacePackageElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
index 0ae1e74eec..c7c8ab4563 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/created/packages-created-overview.element.ts
@@ -10,32 +10,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@um
 
 @customElement('umb-packages-created-overview')
 export class UmbPackagesCreatedOverviewElement extends UmbLitElement {
-	static styles = [
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-			uui-box {
-				margin: var(--uui-size-space-5) 0;
-				padding-bottom: var(--uui-size-space-1);
-			}
-
-			.no-packages {
-				display: flex;
-				justify-content: space-around;
-			}
-			uui-pagination {
-				display: inline-block;
-			}
-
-			.pagination,
-			.loading {
-				display: flex;
-				justify-content: center;
-			}
-		`,
-	];
+	
 
 	private take = 20;
 
@@ -149,6 +124,33 @@ export class UmbPackagesCreatedOverviewElement extends UmbLitElement {
 		this._createdPackages.splice(index, 1);
 		this.requestUpdate();
 	}
+	
+	static styles = [
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			uui-box {
+				margin: var(--uui-size-space-5) 0;
+				padding-bottom: var(--uui-size-space-1);
+			}
+
+			.no-packages {
+				display: flex;
+				justify-content: space-around;
+			}
+			uui-pagination {
+				display: inline-block;
+			}
+
+			.pagination,
+			.loading {
+				display: flex;
+				justify-content: center;
+			}
+		`,
+	];
 }
 
 export default UmbPackagesCreatedOverviewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
index d3f537e95e..c7dfc3aed8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
@@ -14,12 +14,7 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 
 @customElement('umb-installed-packages-section-view-item')
 export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
-	static styles = css`
-		:host {
-			display: flex;
-			min-height: 47px;
-		}
-	`;
+	
 
 	@property()
 	name?: string;
@@ -147,6 +142,13 @@ export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
 		});
 		*/
 	}
+	
+	static styles = css`
+		:host {
+			display: flex;
+			min-height: 47px;
+		}
+	`;
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
index 578403d9dd..5d748834ec 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
@@ -11,34 +11,7 @@ import './installed-packages-section-view-item.element';
 
 @customElement('umb-installed-packages-section-view')
 export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-			uui-box {
-				margin-top: var(--uui-size-space-5);
-				padding-bottom: var(--uui-size-space-1);
-			}
-
-			umb-installed-packages-section-view-item {
-				padding: var(--uui-size-space-3) 0 var(--uui-size-space-2);
-			}
-
-			umb-installed-packages-section-view-item:not(:first-child) {
-				border-top: 1px solid var(--uui-color-border, #d8d7d9);
-			}
-
-			.no-packages {
-				display: flex;
-				justify-content: space-around;
-				flex-direction: column;
-				align-items: center;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _installedPackages: UmbPackageWithMigrationStatus[] = [];
@@ -136,6 +109,35 @@ export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
 			</uui-ref-list>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			uui-box {
+				margin-top: var(--uui-size-space-5);
+				padding-bottom: var(--uui-size-space-1);
+			}
+
+			umb-installed-packages-section-view-item {
+				padding: var(--uui-size-space-3) 0 var(--uui-size-space-2);
+			}
+
+			umb-installed-packages-section-view-item:not(:first-child) {
+				border-top: 1px solid var(--uui-color-border, #d8d7d9);
+			}
+
+			.no-packages {
+				display: flex;
+				justify-content: space-around;
+				flex-direction: column;
+				align-items: center;
+			}
+		`,
+	];
 }
 
 export default UmbInstalledPackagesSectionViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
index d73c1a27dc..b8161bad01 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/market-place/packages-market-place-section-view.element.ts
@@ -3,6 +3,24 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-packages-market-place-section-view')
 export class UmbPackagesMarketPlaceSectionViewElement extends LitElement {
+	
+
+	// TODO: This URL comes from the server
+	// Was previously found in 'Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl'
+	@property()
+	marketplaceUrl = 'https://marketplace.umbraco.com/?umbversion=11.1.0&style=backoffice';
+
+	render() {
+		return html` <div id="container">
+			<iframe
+				src="${this.marketplaceUrl}"
+				title="Umbraco Marketplace"
+				allowfullscreen
+				allow="geolocation; autoplay; clipboard-write; encrypted-media">
+			</iframe>
+		</div>`;
+	}
+	
 	static styles = [
 		css`
 			:host {
@@ -24,22 +42,6 @@ export class UmbPackagesMarketPlaceSectionViewElement extends LitElement {
 			}
 		`,
 	];
-
-	// TODO: This URL comes from the server
-	// Was previously found in 'Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl'
-	@property()
-	marketplaceUrl = 'https://marketplace.umbraco.com/?umbversion=11.1.0&style=backoffice';
-
-	render() {
-		return html` <div id="container">
-			<iframe
-				src="${this.marketplaceUrl}"
-				title="Umbraco Marketplace"
-				allowfullscreen
-				allow="geolocation; autoplay; clipboard-write; encrypted-media">
-			</iframe>
-		</div>`;
-	}
 }
 
 export default UmbPackagesMarketPlaceSectionViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
index 9c44c331c3..32b38f67ca 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/modals/search/search-modal.element.ts
@@ -16,135 +16,7 @@ export type SearchGroupItem = {
 };
 @customElement('umb-search-modal')
 export class UmbSearchModalElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				width: 100%;
-				height: 100%;
-				background-color: var(--uui-color-background);
-				box-sizing: border-box;
-				color: var(--uui-color-text);
-				font-size: 1rem;
-			}
-			input {
-				all: unset;
-				height: 100%;
-				width: 100%;
-			}
-			#search-icon,
-			#close-icon {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				aspect-ratio: 1;
-				height: 100%;
-			}
-			#close-icon {
-				padding: 0 var(--uui-size-space-4);
-			}
-			#close-icon > button {
-				background: var(--uui-color-surface-alt);
-				border: 1px solid var(--uui-color-border);
-				padding: 3px 6px 4px 6px;
-				line-height: 1;
-				border-radius: 3px;
-				color: var(--uui-color-text-alt);
-				font-weight: 800;
-				font-size: 12px;
-				cursor: pointer;
-			}
-			#close-icon > button:hover {
-				border-color: var(--uui-color-focus);
-				color: var(--uui-color-focus);
-			}
-			#top {
-				background-color: var(--uui-color-surface);
-				display: flex;
-				height: 48px;
-			}
-			#main {
-				display: flex;
-				flex-direction: column;
-				padding: 0px var(--uui-size-space-6) var(--uui-size-space-5) var(--uui-size-space-6);
-				height: 100%;
-				border-top: 1px solid var(--uui-color-border);
-			}
-			.group {
-				margin-top: var(--uui-size-space-4);
-			}
-			.group-name {
-				font-weight: 600;
-				margin-bottom: var(--uui-size-space-1);
-			}
-			.group-items {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-			.item {
-				background: var(--uui-color-surface);
-				border: 1px solid var(--uui-color-border);
-				padding: var(--uui-size-space-3) var(--uui-size-space-4);
-				border-radius: var(--uui-border-radius);
-				color: var(--uui-color-interactive);
-				display: grid;
-				grid-template-columns: var(--uui-size-space-6) 1fr var(--uui-size-space-5);
-				height: min-content;
-				align-items: center;
-			}
-			.item:hover {
-				background-color: var(--uui-color-surface-emphasis);
-				color: var(--uui-color-interactive-emphasis);
-			}
-			.item:hover .item-symbol {
-				font-weight: unset;
-				opacity: 1;
-			}
-			.item-icon {
-				margin-bottom: auto;
-				margin-top: 5px;
-			}
-			.item-icon,
-			.item-symbol {
-				opacity: 0.4;
-			}
-			.item-url {
-				font-size: 0.8rem;
-				line-height: 1.2;
-				font-weight: 100;
-			}
-			.item-name {
-				display: flex;
-				flex-direction: column;
-			}
-			.item-icon > * {
-				height: 1rem;
-				display: flex;
-				width: min-content;
-			}
-			.item-symbol {
-				font-weight: 100;
-			}
-			a {
-				text-decoration: none;
-				color: inherit;
-			}
-			#no-results {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				height: 100%;
-				width: 100%;
-				margin-top: var(--uui-size-space-5);
-				color: var(--uui-color-text-alt);
-			}
-		`,
-	];
+	
 
 	@query('input')
 	private _input!: HTMLInputElement;
@@ -306,6 +178,136 @@ export class UmbSearchModalElement extends LitElement {
 			parent: 'Document Types',
 		},
 	];
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				width: 100%;
+				height: 100%;
+				background-color: var(--uui-color-background);
+				box-sizing: border-box;
+				color: var(--uui-color-text);
+				font-size: 1rem;
+			}
+			input {
+				all: unset;
+				height: 100%;
+				width: 100%;
+			}
+			#search-icon,
+			#close-icon {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				aspect-ratio: 1;
+				height: 100%;
+			}
+			#close-icon {
+				padding: 0 var(--uui-size-space-4);
+			}
+			#close-icon > button {
+				background: var(--uui-color-surface-alt);
+				border: 1px solid var(--uui-color-border);
+				padding: 3px 6px 4px 6px;
+				line-height: 1;
+				border-radius: 3px;
+				color: var(--uui-color-text-alt);
+				font-weight: 800;
+				font-size: 12px;
+				cursor: pointer;
+			}
+			#close-icon > button:hover {
+				border-color: var(--uui-color-focus);
+				color: var(--uui-color-focus);
+			}
+			#top {
+				background-color: var(--uui-color-surface);
+				display: flex;
+				height: 48px;
+			}
+			#main {
+				display: flex;
+				flex-direction: column;
+				padding: 0px var(--uui-size-space-6) var(--uui-size-space-5) var(--uui-size-space-6);
+				height: 100%;
+				border-top: 1px solid var(--uui-color-border);
+			}
+			.group {
+				margin-top: var(--uui-size-space-4);
+			}
+			.group-name {
+				font-weight: 600;
+				margin-bottom: var(--uui-size-space-1);
+			}
+			.group-items {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+			.item {
+				background: var(--uui-color-surface);
+				border: 1px solid var(--uui-color-border);
+				padding: var(--uui-size-space-3) var(--uui-size-space-4);
+				border-radius: var(--uui-border-radius);
+				color: var(--uui-color-interactive);
+				display: grid;
+				grid-template-columns: var(--uui-size-space-6) 1fr var(--uui-size-space-5);
+				height: min-content;
+				align-items: center;
+			}
+			.item:hover {
+				background-color: var(--uui-color-surface-emphasis);
+				color: var(--uui-color-interactive-emphasis);
+			}
+			.item:hover .item-symbol {
+				font-weight: unset;
+				opacity: 1;
+			}
+			.item-icon {
+				margin-bottom: auto;
+				margin-top: 5px;
+			}
+			.item-icon,
+			.item-symbol {
+				opacity: 0.4;
+			}
+			.item-url {
+				font-size: 0.8rem;
+				line-height: 1.2;
+				font-weight: 100;
+			}
+			.item-name {
+				display: flex;
+				flex-direction: column;
+			}
+			.item-icon > * {
+				height: 1rem;
+				display: flex;
+				width: min-content;
+			}
+			.item-symbol {
+				font-weight: 100;
+			}
+			a {
+				text-decoration: none;
+				color: inherit;
+			}
+			#no-results {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				width: 100%;
+				margin-top: var(--uui-size-space-5);
+				color: var(--uui-color-text-alt);
+			}
+		`,
+	];
 }
 
 export default UmbSearchModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts
index 9335c24119..265a5495de 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts
@@ -6,15 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-search-header-app')
 export class UmbSearchHeaderAppElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			uui-button {
-				font-size: 18px;
-				--uui-button-background-color: transparent;
-			}
-		`,
-	];
+	
 
 	private _modalContext?: UmbModalContext;
 
@@ -37,6 +29,16 @@ export class UmbSearchHeaderAppElement extends UmbLitElement {
 			</uui-button>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			uui-button {
+				font-size: 18px;
+				--uui-button-background-color: transparent;
+			}
+		`,
+	];
 }
 
 export default UmbSearchHeaderAppElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts
index 3c9b8fe4db..12896bbd78 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/dashboard-examine-management.element.ts
@@ -10,18 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-dashboard-examine-management')
 export class UmbDashboardExamineManagementElement extends UmbLitElement {
-	static styles = [
-		css`
-			a {
-				color: var(--uui-color-text);
-				background: transparent;
-				border: none;
-				text-decoration: underline;
-				cursor: pointer;
-				display: inline-block;
-			}
-		`,
-	];
+	
 	@state()
 	private _routes: IRoute[] = [
 		{
@@ -65,6 +54,19 @@ export class UmbDashboardExamineManagementElement extends UmbLitElement {
 					this._activePath = event.target.localActiveViewPath || '';
 				}}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		css`
+			a {
+				color: var(--uui-color-text);
+				background: transparent;
+				border: none;
+				text-decoration: underline;
+				cursor: pointer;
+				display: inline-block;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineManagementElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
index 337623cfcc..cb5d03a6f4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-settings.element.ts
@@ -9,38 +9,7 @@ export class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement<
 	UmbExamineFieldsSettingsModalData,
 	UmbCreateDocumentModalResultData
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: relative;
-			}
-
-			uui-dialog-layout {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
-				border-radius: var(--uui-border-radius);
-				padding: var(--uui-size-space-5);
-				box-sizing: border-box;
-			}
-
-			uui-scroll-container {
-				overflow-y: scroll;
-				max-height: 100%;
-				min-height: 0;
-				flex: 1;
-			}
-
-			div {
-				margin-top: var(--uui-size-space-5);
-				display: flex;
-				flex-direction: row-reverse;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _fields?: UmbExamineFieldsSettingsModalData;
@@ -86,6 +55,39 @@ export class UmbExamineFieldsSettingsModalElement extends UmbModalBaseElement<
 			`;
 		} else return html``;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: relative;
+			}
+
+			uui-dialog-layout {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
+				border-radius: var(--uui-border-radius);
+				padding: var(--uui-size-space-5);
+				box-sizing: border-box;
+			}
+
+			uui-scroll-container {
+				overflow-y: scroll;
+				max-height: 100%;
+				min-height: 0;
+				flex: 1;
+			}
+
+			div {
+				margin-top: var(--uui-size-space-5);
+				display: flex;
+				flex-direction: row-reverse;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts
index df1870aba9..d4dabd0414 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/modal-views/fields-viewer.element.ts
@@ -6,36 +6,7 @@ import type { SearchResultResponseModel } from '@umbraco-cms/backoffice/backend-
 
 @customElement('umb-modal-element-fields-viewer')
 export class UmbModalElementFieldsViewerElement extends UmbModalBaseElement<SearchResultResponseModel & { name: string }> {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: relative;
-			}
-			uui-dialog-layout {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			span {
-				display: block;
-				padding-right: var(--uui-size-space-5);
-			}
-
-			uui-scroll-container {
-				line-height: 0;
-				overflow-y: scroll;
-				max-height: 100%;
-				min-height: 0;
-			}
-			div {
-				margin-top: var(--uui-size-space-5);
-				display: flex;
-				flex-direction: row-reverse;
-			}
-		`,
-	];
+	
 
 	private _handleClose() {
 		this.modalHandler?.reject();
@@ -68,6 +39,37 @@ export class UmbModalElementFieldsViewerElement extends UmbModalBaseElement<Sear
 			</uui-dialog-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: relative;
+			}
+			uui-dialog-layout {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			span {
+				display: block;
+				padding-right: var(--uui-size-space-5);
+			}
+
+			uui-scroll-container {
+				line-height: 0;
+				overflow-y: scroll;
+				max-height: 100%;
+				min-height: 0;
+			}
+			div {
+				margin-top: var(--uui-size-space-5);
+				display: flex;
+				flex-direction: row-reverse;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
index 9dcfc67150..d3cdb14803 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-indexers.ts
@@ -11,71 +11,7 @@ import './section-view-examine-searchers';
 
 @customElement('umb-dashboard-examine-index')
 export class UmbDashboardExamineIndexElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-
-			uui-box,
-			umb-dashboard-examine-searcher {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			uui-box p {
-				margin-top: 0;
-			}
-
-			div.flex {
-				display: flex;
-			}
-			div.flex > uui-button {
-				padding-left: var(--uui-size-space-4);
-				height: 0;
-			}
-
-			uui-input {
-				width: 100%;
-				margin-bottom: var(--uui-size-space-5);
-			}
-
-			uui-table.info uui-table-row:first-child uui-table-cell {
-				border-top: none;
-			}
-
-			uui-table-head-cell {
-				text-transform: capitalize;
-			}
-
-			uui-table-row:last-child uui-table-cell {
-				padding-bottom: 0;
-			}
-
-			uui-icon {
-				vertical-align: top;
-				padding-right: var(--uui-size-space-5);
-			}
-
-			.positive {
-				color: var(--uui-color-positive);
-			}
-			.danger {
-				color: var(--uui-color-danger);
-			}
-
-			button {
-				background: none;
-				border: none;
-				text-decoration: underline;
-				cursor: pointer;
-			}
-			button.bright {
-				font-style: italic;
-				color: var(--uui-color-positive-emphasis);
-			}
-		`,
-	];
+	
 
 	@property()
 	indexName!: string;
@@ -217,6 +153,72 @@ export class UmbDashboardExamineIndexElement extends UmbLitElement {
 			</uui-button>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+
+			uui-box,
+			umb-dashboard-examine-searcher {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			uui-box p {
+				margin-top: 0;
+			}
+
+			div.flex {
+				display: flex;
+			}
+			div.flex > uui-button {
+				padding-left: var(--uui-size-space-4);
+				height: 0;
+			}
+
+			uui-input {
+				width: 100%;
+				margin-bottom: var(--uui-size-space-5);
+			}
+
+			uui-table.info uui-table-row:first-child uui-table-cell {
+				border-top: none;
+			}
+
+			uui-table-head-cell {
+				text-transform: capitalize;
+			}
+
+			uui-table-row:last-child uui-table-cell {
+				padding-bottom: 0;
+			}
+
+			uui-icon {
+				vertical-align: top;
+				padding-right: var(--uui-size-space-5);
+			}
+
+			.positive {
+				color: var(--uui-color-positive);
+			}
+			.danger {
+				color: var(--uui-color-danger);
+			}
+
+			button {
+				background: none;
+				border: none;
+				text-decoration: underline;
+				cursor: pointer;
+			}
+			button.bright {
+				font-style: italic;
+				color: var(--uui-color-positive-emphasis);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineIndexElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
index 75c2996779..fa36823c33 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-overview.ts
@@ -14,53 +14,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-examine-overview')
 export class UmbDashboardExamineOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display:block;
-				margin:var(--uui-size-layout-1);
-			}
-
-			uui-box + uui-box {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			uui-box p {
-				margin-top: 0;
-			}
-
-			a {
-				color: var(--uui-color-text);
-				background: transparent;
-				border: none;
-				text-decoration: underline;
-				cursor: pointer;
-			}
-
-			uui-table-cell {
-				line-height: 0;
-				vertical-align: middle;
-			}
-
-			uui-table-row:last-child uui-table-cell {
-				padding-bottom: 0;
-			}
-
-			.positive {
-				color: var(--uui-color-positive);
-			}
-
-			.danger {
-				color: var(--uui-color-danger);
-			}
-
-			.not-found-message {
-				font-style: italic;
-				color: var(--uui-color-text-alt);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _indexers?: IndexResponseModel[];
@@ -161,6 +115,54 @@ export class UmbDashboardExamineOverviewElement extends UmbLitElement {
 			</uui-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display:block;
+				margin:var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			uui-box p {
+				margin-top: 0;
+			}
+
+			a {
+				color: var(--uui-color-text);
+				background: transparent;
+				border: none;
+				text-decoration: underline;
+				cursor: pointer;
+			}
+
+			uui-table-cell {
+				line-height: 0;
+				vertical-align: middle;
+			}
+
+			uui-table-row:last-child uui-table-cell {
+				padding-bottom: 0;
+			}
+
+			.positive {
+				color: var(--uui-color-positive);
+			}
+
+			.danger {
+				color: var(--uui-color-danger);
+			}
+
+			.not-found-message {
+				font-style: italic;
+				color: var(--uui-color-text-alt);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineOverviewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
index 18cad41a37..67a1388c95 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/examine-management/views/section-view-examine-searchers.ts
@@ -24,88 +24,7 @@ interface ExposedSearchResultField {
 
 @customElement('umb-dashboard-examine-searcher')
 export class UmbDashboardExamineSearcherElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-			uui-box {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			uui-box p {
-				margin-top: 0;
-			}
-
-			div.flex {
-				display: flex;
-			}
-			div.flex > uui-button {
-				padding-left: var(--uui-size-space-4);
-				height: 0;
-			}
-
-			uui-input {
-				width: 100%;
-				margin-bottom: var(--uui-size-space-5);
-			}
-
-			uui-table-head-cell {
-				text-transform: capitalize;
-			}
-
-			uui-table-row:last-child uui-table-cell {
-				padding-bottom: 0;
-			}
-
-			uui-table-cell {
-				min-width: 100px;
-			}
-
-			button.bright {
-				font-style: italic;
-				color: var(--uui-color-positive-emphasis);
-			}
-
-			.field-adder {
-				line-height: 0;
-				cursor: pointer;
-				vertical-align: top;
-				background: transparent;
-				border: none;
-			}
-
-			.table-container uui-scroll-container {
-				padding-bottom: var(--uui-size-space-4);
-				max-width: 100%;
-				overflow-x: scroll;
-				flex: 1;
-			}
-
-			.table-container {
-				display: flex;
-				align-items: flex-start;
-			}
-			uui-tag {
-				margin-block: var(--uui-size-5, 15px);
-			}
-
-			.exposed-field uui-button {
-				align-items: center;
-				font-weight: normal;
-				font-size: 10px;
-				height: 10px;
-				width: 10px;
-				margin-top: -5px;
-			}
-
-			.exposed-field-container {
-				display: flex;
-				justify-content: space-between;
-			}
-		`,
-	];
+	
 
 	private _modalContext?: UmbModalContext;
 
@@ -300,6 +219,89 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement {
 			});
 		})}`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+			uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			uui-box p {
+				margin-top: 0;
+			}
+
+			div.flex {
+				display: flex;
+			}
+			div.flex > uui-button {
+				padding-left: var(--uui-size-space-4);
+				height: 0;
+			}
+
+			uui-input {
+				width: 100%;
+				margin-bottom: var(--uui-size-space-5);
+			}
+
+			uui-table-head-cell {
+				text-transform: capitalize;
+			}
+
+			uui-table-row:last-child uui-table-cell {
+				padding-bottom: 0;
+			}
+
+			uui-table-cell {
+				min-width: 100px;
+			}
+
+			button.bright {
+				font-style: italic;
+				color: var(--uui-color-positive-emphasis);
+			}
+
+			.field-adder {
+				line-height: 0;
+				cursor: pointer;
+				vertical-align: top;
+				background: transparent;
+				border: none;
+			}
+
+			.table-container uui-scroll-container {
+				padding-bottom: var(--uui-size-space-4);
+				max-width: 100%;
+				overflow-x: scroll;
+				flex: 1;
+			}
+
+			.table-container {
+				display: flex;
+				align-items: flex-start;
+			}
+			uui-tag {
+				margin-block: var(--uui-size-5, 15px);
+			}
+
+			.exposed-field uui-button {
+				align-items: center;
+				font-weight: normal;
+				font-size: 10px;
+				height: 10px;
+				width: 10px;
+				margin-top: -5px;
+			}
+
+			.exposed-field-container {
+				display: flex;
+				justify-content: space-between;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardExamineSearcherElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts
index adb82e765b..a90dcc7179 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-action.element.ts
@@ -10,48 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-health-check-action')
 export class UmbDashboardHealthCheckActionElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				margin: var(--uui-size-space-4) 0;
-				display: block;
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-surface-alt);
-			}
-			form {
-				margin: 0;
-				padding: 0;
-			}
-
-			p {
-				padding-top: 0;
-				margin-top: 0;
-			}
-
-			.action {
-				padding: var(--uui-size-space-5) var(--uui-size-space-6);
-				width: 100%;
-			}
-
-			.action uui-label {
-				display: block;
-			}
-
-			.action uui-button {
-				flex-shrink: 1;
-			}
-
-			.no-description {
-				color: var(--uui-color-border-emphasis);
-				font-style: italic;
-			}
-
-			.required-value {
-				margin: 0 0 var(--uui-size-space-4);
-			}
-		`,
-	];
+	
 
 	@property({ reflect: true })
 	action!: HealthCheckActionRequestModel;
@@ -139,6 +98,49 @@ export class UmbDashboardHealthCheckActionElement extends UmbLitElement {
 
 		return nothing;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				margin: var(--uui-size-space-4) 0;
+				display: block;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface-alt);
+			}
+			form {
+				margin: 0;
+				padding: 0;
+			}
+
+			p {
+				padding-top: 0;
+				margin-top: 0;
+			}
+
+			.action {
+				padding: var(--uui-size-space-5) var(--uui-size-space-6);
+				width: 100%;
+			}
+
+			.action uui-label {
+				display: block;
+			}
+
+			.action uui-button {
+				flex-shrink: 1;
+			}
+
+			.no-description {
+				color: var(--uui-color-border-emphasis);
+				font-style: italic;
+			}
+
+			.required-value {
+				margin: 0 0 var(--uui-size-space-4);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardHealthCheckActionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts
index 53296360cf..07f56eb4c7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group-box-overview.element.ts
@@ -13,45 +13,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-health-check-group-box-overview')
 export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			.group-box {
-				position: relative;
-			}
-
-			.group-box:hover::after {
-				content: '';
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: var(--uui-border-radius);
-				transition: opacity 100ms ease-out 0s;
-				opacity: 0.33;
-				outline-color: var(--uui-color-selected);
-				outline-width: 4px;
-				outline-style: solid;
-			}
-
-			a {
-				text-align: center;
-				font-weight: bold;
-				cursor: pointer;
-				text-decoration: none;
-				color: var(--uui-color-text);
-				margin-bottom: var(--uui-size-space-3);
-				display: block;
-			}
-
-			uui-icon {
-				padding-right: var(--uui-size-space-2);
-			}
-		`,
-	];
+	
 
 	@property({ type: Object })
 	manifest?: ManifestHealthCheck;
@@ -152,6 +114,46 @@ export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement {
 		});
 		return tags;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			.group-box {
+				position: relative;
+			}
+
+			.group-box:hover::after {
+				content: '';
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: var(--uui-border-radius);
+				transition: opacity 100ms ease-out 0s;
+				opacity: 0.33;
+				outline-color: var(--uui-color-selected);
+				outline-width: 4px;
+				outline-style: solid;
+			}
+
+			a {
+				text-align: center;
+				font-weight: bold;
+				cursor: pointer;
+				text-decoration: none;
+				color: var(--uui-color-text);
+				margin-bottom: var(--uui-size-space-3);
+				display: block;
+			}
+
+			uui-icon {
+				padding-right: var(--uui-size-space-2);
+			}
+		`,
+	];
 }
 
 export default UmbHealthCheckGroupBoxOverviewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts
index 8480c9d534..c2e71a339e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.element.ts
@@ -23,54 +23,7 @@ import './health-check-action.element';
 
 @customElement('umb-dashboard-health-check-group')
 export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-
-			uui-box + uui-box {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			p {
-				margin: 0;
-			}
-
-			.header {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-			}
-
-			.check-results-wrapper .check-result {
-				padding-top: var(--uui-size-space-5);
-			}
-
-			.check-results-wrapper .check-result:not(:last-child) {
-				border-bottom: 1px solid var(--uui-color-divider-standalone);
-				padding-bottom: var(--uui-size-space-5);
-			}
-
-			.check-results-wrapper uui-button {
-				margin-block-start: 1em;
-			}
-
-			.check-result-description {
-				display: flex;
-			}
-
-			.check-result-description span {
-				width: 36px;
-			}
-
-			uui-icon {
-				vertical-align: sub;
-			}
-		`,
-	];
+	
 
 	@property()
 	groupName!: string;
@@ -214,6 +167,55 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 			</div>`;
 		else return nothing;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			p {
+				margin: 0;
+			}
+
+			.header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			.check-results-wrapper .check-result {
+				padding-top: var(--uui-size-space-5);
+			}
+
+			.check-results-wrapper .check-result:not(:last-child) {
+				border-bottom: 1px solid var(--uui-color-divider-standalone);
+				padding-bottom: var(--uui-size-space-5);
+			}
+
+			.check-results-wrapper uui-button {
+				margin-block-start: 1em;
+			}
+
+			.check-result-description {
+				display: flex;
+			}
+
+			.check-result-description span {
+				width: 36px;
+			}
+
+			uui-icon {
+				vertical-align: sub;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardHealthCheckGroupElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
index dddf878b38..877e66cf16 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.element.ts
@@ -13,31 +13,7 @@ import './health-check-group-box-overview.element';
 
 @customElement('umb-dashboard-health-check-overview')
 export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-
-			uui-box + uui-box {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			.flex {
-				display: flex;
-				justify-content: space-between;
-				align-items:center;
-			}
-
-			.grid {
-				display: grid;
-				gap: var(--uui-size-space-4);
-				grid-template-columns: repeat(auto-fit, minmax(250px, auto));
-			}
-		`,
-	];
+	
 
 	@state()
 	private _buttonState: UUIButtonState;
@@ -76,6 +52,32 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			.flex {
+				display: flex;
+				justify-content: space-between;
+				align-items:center;
+			}
+
+			.grid {
+				display: grid;
+				gap: var(--uui-size-space-4);
+				grid-template-columns: repeat(auto-fit, minmax(250px, auto));
+			}
+		`,
+	];
 }
 
 export default UmbDashboardHealthCheckOverviewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts
index 34bc597c23..333b933ce8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/models-builder/dashboard-models-builder.element.ts
@@ -13,41 +13,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-models-builder')
 export class UmbDashboardModelsBuilderElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-
-			.headline {
-				display: flex;
-				justify-content: space-between;
-				align-items: flex-start;
-			}
-
-			.models-description ul {
-				list-style-type: square;
-				margin: 0;
-				padding-left: var(--uui-size-layout-1);
-			}
-
-			span.out-of-date {
-				display: block;
-				padding-block-end: var(--uui-size-space-4);
-			}
-
-			.error {
-				font-weight: bold;
-				color: var(--uui-color-danger);
-			}
-
-			p.models-actions {
-				margin-bottom: 0;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _modelsBuilder?: ModelsBuilderResponseModel;
@@ -169,6 +135,42 @@ export class UmbDashboardModelsBuilderElement extends UmbLitElement {
 				return;
 		}
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			.headline {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+			}
+
+			.models-description ul {
+				list-style-type: square;
+				margin: 0;
+				padding-left: var(--uui-size-layout-1);
+			}
+
+			span.out-of-date {
+				display: block;
+				padding-block-end: var(--uui-size-space-4);
+			}
+
+			.error {
+				font-weight: bold;
+				color: var(--uui-color-danger);
+			}
+
+			p.models-actions {
+				margin-bottom: 0;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
index c0db4a1944..f7466e4120 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts
@@ -7,27 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-dashboard-performance-profiling')
 export class UmbDashboardPerformanceProfilingElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-			
-			uui-toggle {
-				font-weight: bold;
-			}
-
-			h4 {
-				margin-bottom: 0;
-			}
-
-			h4 + p {
-				margin-top: 0;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _profilingStatus?: boolean;
@@ -105,6 +85,28 @@ export class UmbDashboardPerformanceProfilingElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+			
+			uui-toggle {
+				font-weight: bold;
+			}
+
+			h4 {
+				margin-bottom: 0;
+			}
+
+			h4 + p {
+				margin-top: 0;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardPerformanceProfilingElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
index e011fa7bc3..0770c83a72 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -9,22 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-dashboard-published-status')
 export class UmbDashboardPublishedStatusElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-
-			uui-box + uui-box {
-				margin-top: var(--uui-size-space-5);
-			}
-			uui-box p:first-child {
-				margin-block-start: 0;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _publishedStatusText = '';
@@ -202,6 +187,23 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+
+			uui-box + uui-box {
+				margin-top: var(--uui-size-space-5);
+			}
+			uui-box p:first-child {
+				margin-block-start: 0;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardPublishedStatusElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts
index f5363ec0ae..89b31f7976 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/settings-welcome/dashboard-settings-welcome.element.ts
@@ -4,29 +4,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-dashboard-settings-welcome')
 export class UmbDashboardSettingsWelcomeElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#settings-dashboard {
-				display: grid;
-				grid-gap: var(--uui-size-7);
-				grid-template-columns: repeat(3, 1fr);
-				margin: var(--uui-size-layout-1);
-			}
-
-			@media (max-width: 1200px) {
-				#settings-dashboard {
-					grid-template-columns: repeat(2, 1fr);
-				}
-			}
-
-			@media (max-width: 800px) {
-				#settings-dashboard {
-					grid-template-columns: repeat(1, 1fr);
-				}
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`
@@ -110,6 +88,30 @@ export class UmbDashboardSettingsWelcomeElement extends LitElement {
 			</section>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#settings-dashboard {
+				display: grid;
+				grid-gap: var(--uui-size-7);
+				grid-template-columns: repeat(3, 1fr);
+				margin: var(--uui-size-layout-1);
+			}
+
+			@media (max-width: 1200px) {
+				#settings-dashboard {
+					grid-template-columns: repeat(2, 1fr);
+				}
+			}
+
+			@media (max-width: 800px) {
+				#settings-dashboard {
+					grid-template-columns: repeat(1, 1fr);
+				}
+			}
+		`,
+	];
 }
 
 export default UmbDashboardSettingsWelcomeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
index 7fdcb95d64..54f446ca1f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/telemetry/dashboard-telemetry.element.ts
@@ -9,15 +9,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-dashboard-telemetry')
 export class UmbDashboardTelemetryElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _telemetryFormData = TelemetryLevelModel.BASIC;
@@ -145,6 +137,16 @@ export class UmbDashboardTelemetryElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardTelemetryElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/entity-actions/create/modal/data-type-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/entity-actions/create/modal/data-type-create-options-modal.element.ts
index f4c615847c..0421c9a36f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/entity-actions/create/modal/data-type-create-options-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/entity-actions/create/modal/data-type-create-options-modal.element.ts
@@ -13,7 +13,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-data-type-create-options-modal')
 export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler<UmbDataTypeCreateOptionsModalData>;
@@ -66,6 +66,8 @@ export class UmbDataTypeCreateOptionsModalElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbDataTypeCreateOptionsModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts
index ea1cae5dfb..b72d549d08 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts
@@ -12,7 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 // TODO: make use of UmbPickerLayoutBase
 @customElement('umb-data-type-picker-modal')
 export class UmbDataTypePickerModalElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler<UmbDataTypePickerModalData, UmbDataTypePickerModalResult>;
@@ -64,6 +64,8 @@ export class UmbDataTypePickerModalElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbDataTypePickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
index 2b065e6bb1..224053c9d5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace-edit.element.ts
@@ -14,22 +14,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
  */
 @customElement('umb-data-type-workspace-edit-element')
 export class UmbDataTypeWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#header {
-				/* TODO: can this be applied from layout slot CSS? */
-				margin: 0 var(--uui-size-layout-1);
-				flex: 1 1 auto;
-			}
-		`,
-	];
+	
 
 	@property()
 	manifest?: ManifestWorkspace;
@@ -78,6 +63,23 @@ export class UmbDataTypeWorkspaceEditElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#header {
+				/* TODO: can this be applied from layout slot CSS? */
+				margin: 0 var(--uui-size-layout-1);
+				flex: 1 1 auto;
+			}
+		`,
+	];
 }
 
 export default UmbDataTypeWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.element.ts
index 69f1f01de7..12563f4537 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.element.ts
@@ -9,7 +9,7 @@ import './data-type-workspace-edit.element';
 
 @customElement('umb-data-type-workspace')
 export class UmbDataTypeWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	#workspaceContext = new UmbDataTypeWorkspaceContext(this);
 
@@ -38,6 +38,8 @@ export class UmbDataTypeWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbDataTypeWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
index 6b0213cc0b..63784eada4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
@@ -17,15 +17,7 @@ import '../../../../../shared/components/ref-property-editor-ui/ref-property-edi
 
 @customElement('umb-data-type-details-workspace-view')
 export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	_dataType?: DataTypeResponseModel;
@@ -170,6 +162,16 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement {
 				: nothing}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbDataTypeDetailsWorkspaceViewEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts
index 03b7ef49a0..fff37abf7e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/info/workspace-view-data-type-info.element.ts
@@ -9,15 +9,7 @@ import { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-workspace-view-data-type-info')
 export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	_dataType?: DataTypeResponseModel;
@@ -67,6 +59,16 @@ export class UmbWorkspaceViewDataTypeInfoElement extends UmbLitElement {
 	private _renderReferences() {
 		return html` <uui-box headline="References"> </uui-box> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewDataTypeInfoElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
index 5831501295..55f24548b7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/extensions/workspace/extension-root-workspace.element.ts
@@ -8,13 +8,7 @@ import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '@um
 
 @customElement('umb-extension-root-workspace')
 export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
-	static styles = [
-		css`
-			uui-box {
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _extensions?: Array<ManifestTypes> = undefined;
@@ -101,6 +95,14 @@ export class UmbExtensionRootWorkspaceElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		css`
+			uui-box {
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbExtensionRootWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts
index 9ccf25f8e7..45d71b0a6e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/app-language-select/app-language-select.element.ts
@@ -11,36 +11,7 @@ import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-app-language-select')
 export class UmbAppLanguageSelectElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				position: relative;
-				z-index: 10;
-			}
-
-			#toggle {
-				display: block;
-				width: 100%;
-				text-align: left;
-				background: none;
-				border: none;
-				height: 70px;
-				padding: 0 var(--uui-size-8);
-				border-bottom: 1px solid var(--uui-color-border);
-				font-size: 14px;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				cursor: pointer;
-			}
-
-			#toggle:hover {
-				background-color: var(--uui-color-surface-emphasis);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _languages: Array<LanguageResponseModel> = [];
@@ -140,6 +111,37 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 			)}
 		</div>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				position: relative;
+				z-index: 10;
+			}
+
+			#toggle {
+				display: block;
+				width: 100%;
+				text-align: left;
+				background: none;
+				border: none;
+				height: 70px;
+				padding: 0 var(--uui-size-8);
+				border-bottom: 1px solid var(--uui-color-border);
+				font-size: 14px;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				cursor: pointer;
+			}
+
+			#toggle:hover {
+				background-color: var(--uui-color-surface-emphasis);
+			}
+		`,
+	];
 }
 
 export default UmbAppLanguageSelectElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
index e59782b652..968d766cd7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/modals/language-picker/language-picker-modal.element.ts
@@ -10,7 +10,7 @@ import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-language-picker-modal')
 export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase<LanguageResponseModel> {
-	static styles = [UUITextStyles, css``];
+	
 
 	@state()
 	private _languages: Array<LanguageResponseModel> = [];
@@ -63,6 +63,8 @@ export class UmbLanguagePickerModalElement extends UmbModalElementPickerBase<Lan
 			</div>
 		</umb-body-layout> `;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbLanguagePickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts
index 56493b1112..ffdc65b930 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-delete-column-layout.element.ts
@@ -7,7 +7,7 @@ import { LanguageResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-language-root-table-delete-column-layout')
 export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ attribute: false })
 	value!: LanguageResponseModel;
@@ -45,6 +45,8 @@ export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement
 			</umb-dropdown>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-name-column-layout.element.ts
index 741de51621..ea3b3af485 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-name-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/components/language-root-table-name-column-layout.element.ts
@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-language-root-table-name-column-layout')
 export class UmbLanguageRootTableNameColumnLayoutElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ attribute: false })
 	value!: { isoCode: string; name: string };
@@ -14,6 +14,8 @@ export class UmbLanguageRootTableNameColumnLayoutElement extends LitElement {
 
 		return html`<a href=${'section/settings/workspace/language/edit/' + this.value.isoCode}>${this.value.name}</a>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts
index 61065379ef..493a5130e4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts
@@ -11,20 +11,7 @@ import './components/language-root-table-name-column-layout.element';
 
 @customElement('umb-language-root-workspace')
 export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#main {
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _tableConfig: UmbTableConfig = {
@@ -135,6 +122,21 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#main {
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbLanguageRootWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts
index 594f876c75..5c701d85ef 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace-edit.element.ts
@@ -10,34 +10,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-language-workspace-edit')
 export class UmbLanguageWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-space-6);
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			strong {
-				display: flex;
-				align-items: center;
-			}
-
-			#footer {
-				padding: 0 var(--uui-size-layout-1);
-			}
-
-			uui-input:not(:focus) {
-				border: 1px solid transparent;
-			}
-		`,
-	];
+	
 
 	#workspaceContext?: UmbLanguageWorkspaceContext;
 
@@ -95,6 +68,35 @@ export class UmbLanguageWorkspaceEditElement extends UmbLitElement {
 			</div>
 		</umb-workspace-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-space-6);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			strong {
+				display: flex;
+				align-items: center;
+			}
+
+			#footer {
+				padding: 0 var(--uui-size-layout-1);
+			}
+
+			uui-input:not(:focus) {
+				border: 1px solid transparent;
+			}
+		`,
+	];
 }
 
 export default UmbLanguageWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
index 731ea98073..a7c17458a4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
@@ -11,7 +11,7 @@ import { generateRoutePathBuilder } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-language-workspace')
 export class UmbLanguageWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	#languageWorkspaceContext = new UmbLanguageWorkspaceContext(this);
 
@@ -74,6 +74,8 @@ export class UmbLanguageWorkspaceElement extends UmbLitElement {
 				this.#routerPath = event.target.absoluteRouterPath;
 			}}></umb-router-slot>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbLanguageWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts
index c1b79f9add..f60d8ae9c0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/details/language-details-workspace-view.element.ts
@@ -13,37 +13,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-language-details-workspace-view')
 export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				padding: var(--uui-size-space-6);
-			}
-
-			uui-combobox {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-			}
-
-			#default-language-warning {
-				background-color: var(--uui-color-warning);
-				color: var(--uui-color-warning-contrast);
-				padding: var(--uui-size-space-4) var(--uui-size-space-5);
-				border: 1px solid var(--uui-color-warning-standalone);
-				margin-top: var(--uui-size-space-4);
-				border-radius: var(--uui-border-radius);
-			}
-
-			.validation-message {
-				color: var(--uui-color-danger);
-			}
-		`,
-	];
+	
 
 	@state()
 	_language?: LanguageResponseModel;
@@ -215,6 +185,38 @@ export class UmbLanguageDetailsWorkspaceViewElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-space-6);
+			}
+
+			uui-combobox {
+				width: 100%;
+			}
+
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+			}
+
+			#default-language-warning {
+				background-color: var(--uui-color-warning);
+				color: var(--uui-color-warning-contrast);
+				padding: var(--uui-size-space-4) var(--uui-size-space-5);
+				border: 1px solid var(--uui-color-warning-standalone);
+				margin-top: var(--uui-size-space-4);
+				border-radius: var(--uui-border-radius);
+			}
+
+			.validation-message {
+				color: var(--uui-color-danger);
+			}
+		`,
+	];
 }
 
 export default UmbLanguageDetailsWorkspaceViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
index 248825bad1..0decf728c9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
@@ -11,42 +11,7 @@ import { query as getQuery, path, toQueryString } from '@umbraco-cms/backoffice/
 
 @customElement('umb-log-viewer-date-range-selector')
 export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			input {
-				font-family: inherit;
-				padding: var(--uui-size-1) var(--uui-size-space-3);
-				font-size: inherit;
-				color: inherit;
-				border-radius: 0;
-				box-sizing: border-box;
-				border: none;
-				background: none;
-				width: 100%;
-				height: 100%;
-				outline: none;
-				position: relative;
-				border-bottom: 2px solid transparent;
-			}
-
-			/* find out better validation for that  */
-			input:out-of-range {
-				border-color: var(--uui-color-danger);
-			}
-
-			:host([horizontal]) .input-container {
-				display: flex;
-				align-items: baseline;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _startDate = '';
@@ -130,6 +95,43 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
         </div>
         `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			input {
+				font-family: inherit;
+				padding: var(--uui-size-1) var(--uui-size-space-3);
+				font-size: inherit;
+				color: inherit;
+				border-radius: 0;
+				box-sizing: border-box;
+				border: none;
+				background: none;
+				width: 100%;
+				height: 100%;
+				outline: none;
+				position: relative;
+				border-bottom: 2px solid transparent;
+			}
+
+			/* find out better validation for that  */
+			input:out-of-range {
+				border-color: var(--uui-color-danger);
+			}
+
+			:host([horizontal]) .input-container {
+				display: flex;
+				align-items: baseline;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts
index 1807638292..863d4ce1ad 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-level-tag.element.ts
@@ -13,7 +13,7 @@ interface LevelMapStyles {
 
 @customElement('umb-log-viewer-level-tag')
 export class UmbLogViewerLevelTagElement extends LitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property()
 	level?: LogLevelModel;
@@ -41,6 +41,8 @@ export class UmbLogViewerLevelTagElement extends LitElement {
 			>${this.level}<slot></slot
 		></uui-tag>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts
index b0bdb0c1ce..d394d01513 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts
@@ -3,13 +3,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-log-viewer-to-many-logs-warning')
 export class UmbLogViewerToManyLogsWarningElement extends LitElement {
-	static styles = [
-		css`
-			:host {
-				text-align: center;
-			}
-		`,
-	];
+	
 
 	render() {
 		return html`<uui-box id="to-many-logs-warning">
@@ -18,6 +12,14 @@ export class UmbLogViewerToManyLogsWarningElement extends LitElement {
 			<p>If you need to view the log files, narrow your date range or try opening them manually.</p>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		css`
+			:host {
+				text-align: center;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
index f5423593a8..c4cb6d4dcf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
@@ -14,36 +14,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 //TODO make uui-input accept min and max values
 @customElement('umb-logviewer-workspace')
 export class UmbLogViewerWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-
-				--umb-log-viewer-debug-color: var(--uui-color-default-emphasis);
-				--umb-log-viewer-information-color: var(--uui-color-positive);
-				--umb-log-viewer-warning-color: var(--uui-color-warning);
-				--umb-log-viewer-error-color: var(--uui-color-danger);
-				--umb-log-viewer-fatal-color: var(--uui-palette-black);
-				--umb-log-viewer-verbose-color: var(--uui-color-current);
-			}
-
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-space-6);
-				gap: var(--uui-size-space-4);
-				align-items: center;
-			}
-
-			uui-tab-group {
-				--uui-tab-divider: var(--uui-color-border);
-				border-left: 1px solid var(--uui-color-border);
-				border-right: 1px solid var(--uui-color-border);
-			}
-		`,
-	];
+	
 
 	private _alias = 'Umb.Workspace.LogviewerRoot';
 
@@ -182,6 +153,37 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+
+				--umb-log-viewer-debug-color: var(--uui-color-default-emphasis);
+				--umb-log-viewer-information-color: var(--uui-color-positive);
+				--umb-log-viewer-warning-color: var(--uui-color-warning);
+				--umb-log-viewer-error-color: var(--uui-color-danger);
+				--umb-log-viewer-fatal-color: var(--uui-palette-black);
+				--umb-log-viewer-verbose-color: var(--uui-color-current);
+			}
+
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-space-6);
+				gap: var(--uui-size-space-4);
+				align-items: center;
+			}
+
+			uui-tab-group {
+				--uui-tab-divider: var(--uui-color-border);
+				border-left: 1px solid var(--uui-color-border);
+				border-right: 1px solid var(--uui-color-border);
+			}
+		`,
+	];
 }
 
 export default UmbLogViewerWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts
index 922c84f72b..073a48ba8d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts
@@ -6,67 +6,7 @@ import { LogLevelCountsReponseModel } from '@umbraco-cms/backoffice/backend-api'
 
 @customElement('umb-log-viewer-log-types-chart')
 export class UmbLogViewerLogTypesChartElement extends UmbLitElement {
-	static styles = [
-		css`
-			#log-types-container {
-				display: flex;
-				gap: var(--uui-size-space-4);
-				flex-direction: column-reverse;
-				align-items: center;
-				justify-content: space-between;
-			}
-
-			button {
-				all: unset;
-				display: flex;
-				align-items: center;
-				cursor: pointer;
-			}
-
-			button:focus {
-				outline: 1px solid var(--uui-color-focus);
-			}
-
-			button.active {
-				text-decoration: line-through;
-			}
-
-			#chart {
-				width: 150px;
-				aspect-ratio: 1;
-				background: radial-gradient(white 40%, transparent 41%),
-					conic-gradient(
-						var(--umb-log-viewer-debug-color) 0% 20%,
-						var(--umb-log-viewer-information-color) 20% 40%,
-						var(--umb-log-viewer-warning-color) 40% 60%,
-						var(--umb-log-viewer-error-color) 60% 80%,
-						var(--umb-log-viewer-fatal-color) 80% 100%
-					);
-				margin: 10px;
-				display: inline-block;
-				border-radius: 50%;
-			}
-
-			ul {
-				list-style: none;
-				margin: 0;
-				padding: 0;
-				border: 0;
-				font-size: 100%;
-				font: inherit;
-				vertical-align: baseline;
-			}
-
-			li {
-				display: flex;
-				align-items: center;
-			}
-
-			li uui-icon {
-				margin-right: 1em;
-			}
-		`,
-	];
+	
 
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 	constructor() {
@@ -158,6 +98,68 @@ export class UmbLogViewerLogTypesChartElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		css`
+			#log-types-container {
+				display: flex;
+				gap: var(--uui-size-space-4);
+				flex-direction: column-reverse;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			button {
+				all: unset;
+				display: flex;
+				align-items: center;
+				cursor: pointer;
+			}
+
+			button:focus {
+				outline: 1px solid var(--uui-color-focus);
+			}
+
+			button.active {
+				text-decoration: line-through;
+			}
+
+			#chart {
+				width: 150px;
+				aspect-ratio: 1;
+				background: radial-gradient(white 40%, transparent 41%),
+					conic-gradient(
+						var(--umb-log-viewer-debug-color) 0% 20%,
+						var(--umb-log-viewer-information-color) 20% 40%,
+						var(--umb-log-viewer-warning-color) 40% 60%,
+						var(--umb-log-viewer-error-color) 60% 80%,
+						var(--umb-log-viewer-fatal-color) 80% 100%
+					);
+				margin: 10px;
+				display: inline-block;
+				border-radius: 50%;
+			}
+
+			ul {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				border: 0;
+				font-size: 100%;
+				font: inherit;
+				vertical-align: baseline;
+			}
+
+			li {
+				display: flex;
+				align-items: center;
+			}
+
+			li uui-icon {
+				margin-right: 1em;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts
index 1e10aff9bb..f3514dde7f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts
@@ -8,35 +8,7 @@ import { PagedLogTemplateResponseModel, SavedLogSearchResponseModel } from '@umb
 //TODO: fix pagination bug when API is fixed
 @customElement('umb-log-viewer-message-templates-overview')
 export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#show-more-templates-btn {
-				margin-top: var(--uui-size-space-5);
-			}
-
-			a {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				text-decoration: none;
-				color: inherit;
-			}
-
-			uui-table-cell {
-				padding: 10px 20px;
-				height: unset;
-			}
-
-			uui-table-row {
-				cursor: pointer;
-			}
-
-			uui-table-row:hover > uui-table-cell {
-				background-color: var(--uui-color-surface-alt);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _messageTemplates: PagedLogTemplateResponseModel | null = null;
@@ -111,6 +83,36 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#show-more-templates-btn {
+				margin-top: var(--uui-size-space-5);
+			}
+
+			a {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				text-decoration: none;
+				color: inherit;
+			}
+
+			uui-table-cell {
+				padding: 10px 20px;
+				height: unset;
+			}
+
+			uui-table-row {
+				cursor: pointer;
+			}
+
+			uui-table-row:hover > uui-table-cell {
+				background-color: var(--uui-color-surface-alt);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts
index a918939169..dc9221a549 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts
@@ -8,33 +8,7 @@ import { SavedLogSearchResponseModel } from '@umbraco-cms/backoffice/backend-api
 //TODO: implement the saved searches pagination when the API total bug is fixed
 @customElement('umb-log-viewer-saved-searches-overview')
 export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-box {
-				height: 100%;
-			}
-
-			ul {
-				list-style: none;
-				margin: 0;
-				padding: 0;
-				border: 0;
-				font-size: 100%;
-				font: inherit;
-				vertical-align: baseline;
-			}
-
-			li {
-				display: flex;
-				align-items: center;
-			}
-
-			li uui-icon {
-				margin-right: 1em;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _savedSearches: SavedLogSearchResponseModel[] = [];
@@ -75,6 +49,34 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
 			</ul>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-box {
+				height: 100%;
+			}
+
+			ul {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				border: 0;
+				font-size: 100%;
+				font: inherit;
+				vertical-align: baseline;
+			}
+
+			li {
+				display: flex;
+				align-items: center;
+			}
+
+			li uui-icon {
+				margin-right: 1em;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
index b8fba68f66..afeaf47ad0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
@@ -7,6 +7,81 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 //TODO: add a disabled attribute to the show more button when the total number of items is correctly returned from the endpoint
 @customElement('umb-log-viewer-overview-view')
 export class UmbLogViewerOverviewViewElement extends UmbLitElement {
+	
+
+	@state()
+	private _errorCount = 0;
+
+	@state()
+	private _logLevelCount: LogLevelCountsReponseModel | null = null;
+
+	@state()
+	private _canShowLogs = false;
+
+	#logViewerContext?: UmbLogViewerWorkspaceContext;
+	constructor() {
+		super();
+		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
+			this.#logViewerContext = instance;
+			this.#observeErrorCount();
+			this.#observeCanShowLogs();
+			this.#logViewerContext?.getLogLevels(0, 100);
+		});
+	}
+
+	#observeErrorCount() {
+		if (!this.#logViewerContext) return;
+
+		this.observe(this.#logViewerContext.logCount, (logLevelCount) => {
+			this._errorCount = logLevelCount?.error ?? 0;
+		});
+	}
+
+	#observeCanShowLogs() {
+		if (!this.#logViewerContext) return;
+		this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => {
+			this._canShowLogs = canShowLogs ?? false;
+		});
+	}
+
+	render() {
+		return html`
+			<div id="logviewer-layout">
+				<div id="info">
+					<uui-box id="time-period" headline="Time Period">
+						<umb-log-viewer-date-range-selector></umb-log-viewer-date-range-selector>
+					</uui-box>
+
+					<uui-box id="errors" headline="Number of Errors">
+						<uui-button
+							label="Show error logs"
+							href=${`section/settings/workspace/logviewer/search/?lq=${encodeURIComponent(
+								`@Level='Fatal' or @Level='Error' or Has(@Exception)`
+							)}`}>
+							<h1 id="error-count">${this._errorCount}</h1></uui-button
+						>
+					</uui-box>
+
+					<uui-box id="level" headline="Log level">
+						<h1 id="log-lever"><umb-log-viewer-log-level-overview></umb-log-viewer-log-level-overview></h1>
+					</uui-box>
+
+					<umb-log-viewer-log-types-chart id="types"></umb-log-viewer-log-types-chart>
+				</div>
+
+				${this._canShowLogs
+					? html`<div id="saved-searches-container">
+								<umb-log-viewer-saved-searches-overview></umb-log-viewer-saved-searches-overview>
+							</div>
+
+							<div id="common-messages-container">
+								<umb-log-viewer-message-templates-overview></umb-log-viewer-message-templates-overview>
+							</div>`
+					: html`<umb-log-viewer-to-many-logs-warning id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
+			</div>
+		`;
+	}
+	
 	static styles = [
 		css`
 			:host {
@@ -83,79 +158,6 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 			}
 		`,
 	];
-
-	@state()
-	private _errorCount = 0;
-
-	@state()
-	private _logLevelCount: LogLevelCountsReponseModel | null = null;
-
-	@state()
-	private _canShowLogs = false;
-
-	#logViewerContext?: UmbLogViewerWorkspaceContext;
-	constructor() {
-		super();
-		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
-			this.#logViewerContext = instance;
-			this.#observeErrorCount();
-			this.#observeCanShowLogs();
-			this.#logViewerContext?.getLogLevels(0, 100);
-		});
-	}
-
-	#observeErrorCount() {
-		if (!this.#logViewerContext) return;
-
-		this.observe(this.#logViewerContext.logCount, (logLevelCount) => {
-			this._errorCount = logLevelCount?.error ?? 0;
-		});
-	}
-
-	#observeCanShowLogs() {
-		if (!this.#logViewerContext) return;
-		this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => {
-			this._canShowLogs = canShowLogs ?? false;
-		});
-	}
-
-	render() {
-		return html`
-			<div id="logviewer-layout">
-				<div id="info">
-					<uui-box id="time-period" headline="Time Period">
-						<umb-log-viewer-date-range-selector></umb-log-viewer-date-range-selector>
-					</uui-box>
-
-					<uui-box id="errors" headline="Number of Errors">
-						<uui-button
-							label="Show error logs"
-							href=${`section/settings/workspace/logviewer/search/?lq=${encodeURIComponent(
-								`@Level='Fatal' or @Level='Error' or Has(@Exception)`
-							)}`}>
-							<h1 id="error-count">${this._errorCount}</h1></uui-button
-						>
-					</uui-box>
-
-					<uui-box id="level" headline="Log level">
-						<h1 id="log-lever"><umb-log-viewer-log-level-overview></umb-log-viewer-log-level-overview></h1>
-					</uui-box>
-
-					<umb-log-viewer-log-types-chart id="types"></umb-log-viewer-log-types-chart>
-				</div>
-
-				${this._canShowLogs
-					? html`<div id="saved-searches-container">
-								<umb-log-viewer-saved-searches-overview></umb-log-viewer-saved-searches-overview>
-							</div>
-
-							<div id="common-messages-container">
-								<umb-log-viewer-message-templates-overview></umb-log-viewer-message-templates-overview>
-							</div>`
-					: html`<umb-log-viewer-to-many-logs-warning id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
-			</div>
-		`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-log-level-filter-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-log-level-filter-menu.element.ts
index ce2d6eee18..b914c62474 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-log-level-filter-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-log-level-filter-menu.element.ts
@@ -10,28 +10,7 @@ import { path, query, toQueryString } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-log-viewer-log-level-filter-menu')
 export class UmbLogViewerLogLevelFilterMenuElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#log-level-selector {
-				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
-				width: 150px;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-3);
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.log-level-button-indicator {
-				font-weight: 600;
-			}
-
-			.log-level-button-indicator:not(:last-of-type)::after {
-				content: ', ';
-			}
-		`,
-	];
+	
 
 	@queryAll('#log-level-selector > uui-checkbox')
 	private _logLevelSelectorCheckboxes!: NodeListOf<UUICheckboxElement>;
@@ -121,6 +100,29 @@ export class UmbLogViewerLogLevelFilterMenuElement extends UmbLitElement {
 			</umb-button-with-dropdown>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#log-level-selector {
+				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
+				width: 150px;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+
+			.log-level-button-indicator {
+				font-weight: 600;
+			}
+
+			.log-level-button-indicator:not(:last-of-type)::after {
+				content: ', ';
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts
index 36b885f34e..ff96a79e5f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts
@@ -9,110 +9,7 @@ import { query as getQuery, toQueryString } from '@umbraco-cms/backoffice/router
 //TODO: check how to display EventId field in the message properties
 @customElement('umb-log-viewer-message')
 export class UmbLogViewerMessageElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host > details {
-				border-top: 1px solid var(--uui-color-border);
-			}
-
-			:host(:last-child) > details {
-				border-bottom: 1px solid var(--uui-color-border);
-			}
-
-			summary {
-				display: flex;
-			}
-
-			details[open] {
-				margin-bottom: var(--uui-size-space-3);
-			}
-
-			summary:hover,
-			#properties-list {
-				background-color: var(--uui-color-background);
-			}
-
-			#properties-list {
-				margin: 0;
-				padding: 0;
-				list-style: none;
-				margin-bottom: var(--uui-size-space-3);
-			}
-
-			.property {
-				padding: 10px 20px;
-				display: flex;
-				border-top: 1px solid var(--uui-color-border);
-			}
-
-			summary > div {
-				box-sizing: border-box;
-				padding: 10px 20px;
-				display: flex;
-				align-items: center;
-			}
-
-			#timestamp {
-				flex: 1 0 14ch;
-			}
-
-			#level,
-			#machine {
-				flex: 1 0 14ch;
-			}
-
-			#message {
-				flex: 6 0 14ch;
-			}
-
-			.property-name,
-			.property-value {
-				display: flex;
-				align-items: center;
-			}
-
-			.property-name {
-				font-weight: 600;
-				flex: 1 1 20ch;
-			}
-
-			.property-value {
-				flex: 3 0 20ch;
-			}
-
-			#search-menu {
-				margin: 0;
-				padding: 0;
-				margin-top: var(--uui-size-space-3);
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-3);
-				max-width: 25%;
-			}
-
-			#search-menu > li {
-				padding: 0;
-			}
-
-			.search-item {
-				width: 100%;
-			}
-
-			pre {
-				background-color: var(--uui-color-background);
-				border-top: 1px solid #d8d7d9;
-				border-left: 4px solid #d42054;
-				color: #303033;
-				display: block;
-				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
-				line-height: 20px;
-				margin: 0;
-				overflow-x: auto;
-				padding: 9.5px;
-				white-space: pre-wrap;
-			}
-		`,
-	];
+	
 
 	@query('details')
 	details!: HTMLDetailsElement;
@@ -298,6 +195,111 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
 			</details>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host > details {
+				border-top: 1px solid var(--uui-color-border);
+			}
+
+			:host(:last-child) > details {
+				border-bottom: 1px solid var(--uui-color-border);
+			}
+
+			summary {
+				display: flex;
+			}
+
+			details[open] {
+				margin-bottom: var(--uui-size-space-3);
+			}
+
+			summary:hover,
+			#properties-list {
+				background-color: var(--uui-color-background);
+			}
+
+			#properties-list {
+				margin: 0;
+				padding: 0;
+				list-style: none;
+				margin-bottom: var(--uui-size-space-3);
+			}
+
+			.property {
+				padding: 10px 20px;
+				display: flex;
+				border-top: 1px solid var(--uui-color-border);
+			}
+
+			summary > div {
+				box-sizing: border-box;
+				padding: 10px 20px;
+				display: flex;
+				align-items: center;
+			}
+
+			#timestamp {
+				flex: 1 0 14ch;
+			}
+
+			#level,
+			#machine {
+				flex: 1 0 14ch;
+			}
+
+			#message {
+				flex: 6 0 14ch;
+			}
+
+			.property-name,
+			.property-value {
+				display: flex;
+				align-items: center;
+			}
+
+			.property-name {
+				font-weight: 600;
+				flex: 1 1 20ch;
+			}
+
+			.property-value {
+				flex: 3 0 20ch;
+			}
+
+			#search-menu {
+				margin: 0;
+				padding: 0;
+				margin-top: var(--uui-size-space-3);
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				max-width: 25%;
+			}
+
+			#search-menu > li {
+				padding: 0;
+			}
+
+			.search-item {
+				width: 100%;
+			}
+
+			pre {
+				background-color: var(--uui-color-background);
+				border-top: 1px solid #d8d7d9;
+				border-left: 4px solid #d42054;
+				color: #303033;
+				display: block;
+				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
+				line-height: 20px;
+				margin: 0;
+				overflow-x: auto;
+				padding: 9.5px;
+				white-space: pre-wrap;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
index b185f59144..c9c07dca5d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
@@ -8,49 +8,7 @@ import { DirectionModel, LogMessageResponseModel } from '@umbraco-cms/backoffice
 
 @customElement('umb-log-viewer-messages-list')
 export class UmbLogViewerMessagesListElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-			#message-list-header {
-				display: flex;
-				font-weight: 600;
-			}
-
-			#message-list-header > div {
-				box-sizing: border-box;
-				padding: 10px 20px;
-				display: flex;
-				align-items: center;
-			}
-
-			#timestamp {
-				flex: 1 0 14ch;
-			}
-
-			#level,
-			#machine {
-				flex: 1 0 14ch;
-			}
-
-			#message {
-				flex: 6 0 14ch;
-			}
-
-			#empty {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				gap: var(--uui-size-space-3);
-			}
-
-			#pagination {
-				margin: var(--uui-size-space-5, 18px) 0;
-			}
-		`,
-	];
+	
 
 	@query('#logs-scroll-container')
 	private _logsScrollContainer!: UUIScrollContainerElement;
@@ -150,6 +108,50 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 			${this._renderPagination()}
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+			#message-list-header {
+				display: flex;
+				font-weight: 600;
+			}
+
+			#message-list-header > div {
+				box-sizing: border-box;
+				padding: 10px 20px;
+				display: flex;
+				align-items: center;
+			}
+
+			#timestamp {
+				flex: 1 0 14ch;
+			}
+
+			#level,
+			#machine {
+				flex: 1 0 14ch;
+			}
+
+			#message {
+				flex: 6 0 14ch;
+			}
+
+			#empty {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: var(--uui-size-space-3);
+			}
+
+			#pagination {
+				margin: var(--uui-size-space-5, 18px) 0;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts
index f32fa860eb..62cfe8b83f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts
@@ -12,49 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-log-viewer-polling-button')
 export class UmbLogViewerPollingButtonElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#polling-interval-menu {
-				margin: 0;
-				padding: 0;
-				width: 20ch;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-3);
-				display: flex;
-				flex-direction: column;
-				transform: translateX(calc((100% - 33px) * -1));
-			}
-
-			#polling-enabled-icon {
-				margin-right: var(--uui-size-space-3);
-				margin-bottom: 1px;
-				-webkit-animation: rotate-center 0.8s ease-in-out infinite both;
-				animation: rotate-center 0.8s ease-in-out infinite both;
-			}
-
-			@-webkit-keyframes rotate-center {
-				0% {
-					-webkit-transform: rotate(0);
-					transform: rotate(0);
-				}
-				100% {
-					-webkit-transform: rotate(360deg);
-					transform: rotate(360deg);
-				}
-			}
-			@keyframes rotate-center {
-				0% {
-					-webkit-transform: rotate(0);
-					transform: rotate(0);
-				}
-				100% {
-					-webkit-transform: rotate(360deg);
-					transform: rotate(360deg);
-				}
-			}
-		`,
-	];
+	
 
 	@query('#polling-popover')
 	private _pollingPopover!: UUIPopoverElement;
@@ -131,6 +89,50 @@ export class UmbLogViewerPollingButtonElement extends UmbLitElement {
 			</uui-popover>
 		</uui-button-group>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#polling-interval-menu {
+				margin: 0;
+				padding: 0;
+				width: 20ch;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				display: flex;
+				flex-direction: column;
+				transform: translateX(calc((100% - 33px) * -1));
+			}
+
+			#polling-enabled-icon {
+				margin-right: var(--uui-size-space-3);
+				margin-bottom: 1px;
+				-webkit-animation: rotate-center 0.8s ease-in-out infinite both;
+				animation: rotate-center 0.8s ease-in-out infinite both;
+			}
+
+			@-webkit-keyframes rotate-center {
+				0% {
+					-webkit-transform: rotate(0);
+					transform: rotate(0);
+				}
+				100% {
+					-webkit-transform: rotate(360deg);
+					transform: rotate(360deg);
+				}
+			}
+			@keyframes rotate-center {
+				0% {
+					-webkit-transform: rotate(0);
+					transform: rotate(0);
+				}
+				100% {
+					-webkit-transform: rotate(360deg);
+					transform: rotate(360deg);
+				}
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
index 7266e6c8d3..a685b9deb6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input-modal.element.ts
@@ -10,14 +10,7 @@ export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElem
 	{ query: string },
 	SavedLogSearchPresenationBaseModel
 > {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@query('uui-input')
 	private _input!: UUIInputElement;
@@ -64,6 +57,15 @@ export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElem
 			</uui-dialog-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
index f001b327e5..6a4fd30c3d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -29,84 +29,7 @@ export const UMB_LOG_VIEWER_SAVE_SEARCH_MODAL = new UmbModalToken<UmbContextSave
 
 @customElement('umb-log-viewer-search-input')
 export class UmbLogViewerSearchInputElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				gap: var(--uui-size-space-4);
-			}
-
-			#search-input {
-				width: 100%;
-			}
-
-			#saved-searches-button {
-				flex-shrink: 0;
-			}
-
-			#saved-searches-popover {
-				flex: 1;
-			}
-
-			#saved-searches-container {
-				width: 100%;
-				max-height: 300px;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-1);
-			}
-
-			#loader-container {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin: 0 var(--uui-size-space-4);
-			}
-
-			.saved-search-item {
-				display: flex;
-				justify-content: space-between;
-				align-items: stretch;
-				border-bottom: 1px solid #e9e9eb;
-			}
-
-			.saved-search-item-button {
-				display: flex;
-				font-family: inherit;
-				flex: 1;
-				background: 0 0;
-				padding: 0 0;
-				border: 0;
-				clear: both;
-				cursor: pointer;
-				display: flex;
-				font-weight: 400;
-				line-height: 20px;
-				text-align: left;
-				align-items: center;
-				white-space: nowrap;
-				color: var(--uui-color-interactive);
-			}
-
-			.saved-search-item-button:hover {
-				background-color: var(--uui-color-surface-emphasis, rgb(250, 250, 250));
-				color: var(--color-standalone);
-			}
-
-			.saved-search-item-name {
-				font-weight: 600;
-				margin: 0 var(--uui-size-space-3);
-			}
-
-			#polling-symbol-expand,
-			#saved-search-expand-symbol,
-			uui-symbol-sort {
-				margin-left: var(--uui-size-space-3);
-			}
-		`,
-	];
+	
 
 	@query('#saved-searches-popover')
 	private _savedSearchesPopover!: UUIPopoverElement;
@@ -276,6 +199,85 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 			</uui-popover>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--uui-size-space-4);
+			}
+
+			#search-input {
+				width: 100%;
+			}
+
+			#saved-searches-button {
+				flex-shrink: 0;
+			}
+
+			#saved-searches-popover {
+				flex: 1;
+			}
+
+			#saved-searches-container {
+				width: 100%;
+				max-height: 300px;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-1);
+			}
+
+			#loader-container {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin: 0 var(--uui-size-space-4);
+			}
+
+			.saved-search-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: stretch;
+				border-bottom: 1px solid #e9e9eb;
+			}
+
+			.saved-search-item-button {
+				display: flex;
+				font-family: inherit;
+				flex: 1;
+				background: 0 0;
+				padding: 0 0;
+				border: 0;
+				clear: both;
+				cursor: pointer;
+				display: flex;
+				font-weight: 400;
+				line-height: 20px;
+				text-align: left;
+				align-items: center;
+				white-space: nowrap;
+				color: var(--uui-color-interactive);
+			}
+
+			.saved-search-item-button:hover {
+				background-color: var(--uui-color-surface-emphasis, rgb(250, 250, 250));
+				color: var(--color-standalone);
+			}
+
+			.saved-search-item-name {
+				font-weight: 600;
+				margin: 0 var(--uui-size-space-3);
+			}
+
+			#polling-symbol-expand,
+			#saved-search-expand-symbol,
+			uui-symbol-sort {
+				margin-left: var(--uui-size-space-3);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts
index 79e8f9e216..264981edab 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts
@@ -7,40 +7,7 @@ import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-a
 
 @customElement('umb-log-viewer-search-view')
 export class UmbLogViewerSearchViewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#layout {
-				margin: 20px;
-				padding-bottom: 20px;
-			}
-			#levels-container,
-			#input-container {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-4);
-				width: 100%;
-				margin-bottom: 20px;
-			}
-
-			#levels-container {
-				justify-content: space-between;
-			}
-
-			#dates-polling-container {
-				display: flex;
-				align-items: baseline;
-			}
-
-			umb-log-viewer-search-input {
-				flex: 1;
-			}
-
-			umb-log-viewer-date-range-selector {
-				flex-direction: row;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _canShowLogs = false;
@@ -85,6 +52,41 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#layout {
+				margin: 20px;
+				padding-bottom: 20px;
+			}
+			#levels-container,
+			#input-container {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-4);
+				width: 100%;
+				margin-bottom: 20px;
+			}
+
+			#levels-container {
+				justify-content: space-between;
+			}
+
+			#dates-polling-container {
+				display: flex;
+				align-items: baseline;
+			}
+
+			umb-log-viewer-search-input {
+				flex: 1;
+			}
+
+			umb-log-viewer-date-range-selector {
+				flex-direction: row;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace-edit.element.ts
index 83a9c84e12..4357b69e82 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace-edit.element.ts
@@ -13,33 +13,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
  */
 @customElement('umb-relation-type-workspace-edit-element')
 export class UmbRelationTypeWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#header {
-				display: flex;
-				flex: 1 1 auto;
-				margin: 0 var(--uui-size-layout-1);
-			}
-
-			#name {
-				width: 100%;
-				flex: 1 1 auto;
-				align-items: center;
-			}
-
-			#alias {
-				padding: 0 var(--uui-size-space-3);
-				opacity: 0.5;
-			}
-		`,
-	];
+	
 
 	#workspaceContext?: UmbRelationTypeWorkspaceContext;
 
@@ -82,6 +56,34 @@ export class UmbRelationTypeWorkspaceEditElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#header {
+				display: flex;
+				flex: 1 1 auto;
+				margin: 0 var(--uui-size-layout-1);
+			}
+
+			#name {
+				width: 100%;
+				flex: 1 1 auto;
+				align-items: center;
+			}
+
+			#alias {
+				padding: 0 var(--uui-size-space-3);
+				opacity: 0.5;
+			}
+		`,
+	];
 }
 
 export default UmbRelationTypeWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.element.ts
index eb96b21baf..1e016e04a4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.element.ts
@@ -14,7 +14,7 @@ import './relation-type-workspace-edit.element';
  */
 @customElement('umb-relation-type-workspace')
 export class UmbRelationTypeWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	#workspaceContext = new UmbRelationTypeWorkspaceContext(this);
 
@@ -50,6 +50,8 @@ export class UmbRelationTypeWorkspaceElement extends UmbLitElement {
 				this.#routerPath = event.target.absoluteRouterPath;
 			}}></umb-router-slot>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbRelationTypeWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
index b8006df518..69688fdd19 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/relation/workspace-view-relation-type-relation.element.ts
@@ -7,15 +7,7 @@ import { RelationResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-workspace-view-relation-type-relation')
 export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				margin: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	//TODO Use real data
 	@state()
@@ -76,6 +68,16 @@ export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement {
 			<umb-table .config=${this._tableConfig} .columns=${this._tableColumns} .items=${this._tableItems}></umb-table>
 		</uui-box>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				margin: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 const MockData: Array<RelationResponseModel> = [
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts
index a9bc60ac85..713f229730 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-selection-actions.element.ts
@@ -12,29 +12,7 @@ import '../components/entity-bulk-action/entity-bulk-action.element';
 
 @customElement('umb-collection-selection-actions')
 export class UmbCollectionSelectionActionsElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				gap: var(--uui-size-3);
-				width: 100%;
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-				align-items: center;
-				box-sizing: border-box;
-				justify-content: space-between;
-			}
-			#selection-info,
-			#actions {
-				display: flex;
-				align-items: center;
-				box-sizing: border-box;
-				gap: var(--uui-size-3);
-			}
-		`,
-	];
+	
 
 	@property()
 	public entityType: string | null = null;
@@ -130,6 +108,30 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement {
 				)}
 			</div>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				gap: var(--uui-size-3);
+				width: 100%;
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+				align-items: center;
+				box-sizing: border-box;
+				justify-content: space-between;
+			}
+			#selection-info,
+			#actions {
+				display: flex;
+				align-items: center;
+				box-sizing: border-box;
+				gap: var(--uui-size-3);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-toolbar.element.ts
index 270823236a..cf405aa30b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection-toolbar.element.ts
@@ -10,26 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-collection-toolbar')
 export class UmbCollectionToolbarElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				gap: var(--uui-size-3);
-				width: 100%;
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
-				align-items: center;
-				box-sizing: border-box;
-			}
-
-			uui-popover {
-				width: min-content;
-			}
-			#search {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@property()
 	public actions: Array<TooltipMenuItem> = [
@@ -167,6 +148,27 @@ export class UmbCollectionToolbarElement extends UmbLitElement {
 			${this._renderLayoutButton()}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				gap: var(--uui-size-3);
+				width: 100%;
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				align-items: center;
+				box-sizing: border-box;
+			}
+
+			uui-popover {
+				width: min-content;
+			}
+			#search {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts
index 9b883b69bd..ed2235102c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/collection.element.ts
@@ -13,22 +13,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-collection')
 export class UmbCollectionElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				box-sizing: border-box;
-				gap: var(--uui-size-space-5);
-				height: 100%;
-			}
-			router-slot {
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _routes: Array<IRoute> = [];
@@ -111,6 +96,23 @@ export class UmbCollectionElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+				gap: var(--uui-size-space-5);
+				height: 100%;
+			}
+			router-slot {
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
index 2c96968191..82ca1ad616 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/dashboards/dashboard-collection.element.ts
@@ -11,18 +11,7 @@ import '../collection.element';
 
 @customElement('umb-dashboard-collection')
 export class UmbDashboardCollectionElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				box-sizing: border-box;
-				gap: var(--uui-size-space-5);
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	// TODO: Use the right type here:
 	private _collectionContext?: UmbCollectionContext<FolderTreeItemResponseModel>;
@@ -46,6 +35,19 @@ export class UmbDashboardCollectionElement extends UmbLitElement {
 	render() {
 		return html`<umb-collection entity-type=${ifDefined(this._entityType)}></umb-collection>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+				gap: var(--uui-size-space-5);
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbDashboardCollectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts
index 8ca23425fd..b3b4bc7871 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-apps.element.ts
@@ -4,6 +4,12 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-backoffice-header-apps')
 export class UmbBackofficeHeaderAppsElement extends LitElement {
+	
+
+	render() {
+		return html` <umb-extension-slot id="apps" type="headerApp"></umb-extension-slot> `;
+	}
+	
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -14,10 +20,6 @@ export class UmbBackofficeHeaderAppsElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html` <umb-extension-slot id="apps" type="headerApp"></umb-extension-slot> `;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts
index d4cce136c1..1e8fc69156 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header-sections.element.ts
@@ -9,31 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-header-sections')
 export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			#tabs {
-				color: var(--uui-color-header-contrast);
-				height: 60px;
-				font-size: 16px;
-				--uui-tab-text: var(--uui-color-header-contrast);
-				--uui-tab-text-hover: var(--uui-color-header-contrast-emphasis);
-				--uui-tab-text-active: var(--uui-color-header-contrast-emphasis);
-				--uui-tab-background: var(--uui-color-header-background);
-			}
-
-			#dropdown {
-				background-color: white;
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				min-width: 200px;
-				color: black; /* Change to variable */
-			}
-		`,
-	];
+	
 
 	@state()
 	private _open = false;
@@ -141,6 +117,32 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 	render() {
 		return html` ${this._renderSections()} `;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			#tabs {
+				color: var(--uui-color-header-contrast);
+				height: 60px;
+				font-size: 16px;
+				--uui-tab-text: var(--uui-color-header-contrast);
+				--uui-tab-text-hover: var(--uui-color-header-contrast-emphasis);
+				--uui-tab-text-active: var(--uui-color-header-contrast-emphasis);
+				--uui-tab-background: var(--uui-color-header-background);
+			}
+
+			#dropdown {
+				background-color: white;
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+				min-width: 200px;
+				color: black; /* Change to variable */
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts
index 37437f0fd9..f9e4a60f47 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-header.element.ts
@@ -8,6 +8,21 @@ import './backoffice-header-apps.element';
 
 @customElement('umb-backoffice-header')
 export class UmbBackofficeHeaderElement extends LitElement {
+	
+
+	render() {
+		return html`
+			<div id="appHeader">
+				<uui-button id="logo" look="primary" label="Umbraco" compact>
+					<img src="${logoImg}" alt="Umbraco" />
+				</uui-button>
+
+				<umb-backoffice-header-sections id="sections"></umb-backoffice-header-sections>
+				<umb-backoffice-header-apps></umb-backoffice-header-apps>
+			</div>
+		`;
+	}
+	
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
@@ -40,19 +55,6 @@ export class UmbBackofficeHeaderElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<div id="appHeader">
-				<uui-button id="logo" look="primary" label="Umbraco" compact>
-					<img src="${logoImg}" alt="Umbraco" />
-				</uui-button>
-
-				<umb-backoffice-header-sections id="sections"></umb-backoffice-header-sections>
-				<umb-backoffice-header-apps></umb-backoffice-header-apps>
-			</div>
-		`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
index 59ab21030a..9000dbd312 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-main.element.ts
@@ -13,16 +13,7 @@ import { createExtensionElementOrFallback } from '@umbraco-cms/backoffice/extens
 
 @defineElement('umb-backoffice-main')
 export class UmbBackofficeMainElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				background-color: var(--uui-color-background);
-				display: block;
-				height: calc(100% - 60px); // 60 => top header height
-			}
-		`,
-	];
+	
 
 	@state()
 	private _routes: Array<IRoute> = [];
@@ -96,6 +87,17 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes} @change=${this._onRouteChange}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				background-color: var(--uui-color-background);
+				display: block;
+				height: calc(100% - 60px); // 60 => top header height
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
index 41d378c181..f30ca54206 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-modal-container.element.ts
@@ -7,14 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-modal-container')
 export class UmbBackofficeModalContainerElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			:host {
-				position: absolute;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _modals?: UmbModalHandler[];
@@ -45,6 +38,15 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement {
 			</uui-modal-container>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			:host {
+				position: absolute;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts
index c4e8891ea5..f3666c8f16 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/backoffice-frame/backoffice-notification-container.element.ts
@@ -11,20 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-backoffice-notification-container')
 export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			#notifications {
-				position: absolute;
-				top: 0;
-				left: 0;
-				right: 0;
-				bottom: 70px;
-				height: auto;
-				padding: var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _notifications?: UmbNotificationHandler[];
@@ -61,6 +48,21 @@ export class UmbBackofficeNotificationContainerElement extends UmbLitElement {
 			</uui-toast-notification-container>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			#notifications {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 70px;
+				height: auto;
+				padding: var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
index b8a2cdc685..865ebaeb03 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/body-layout/body-layout.element.ts
@@ -16,44 +16,7 @@ import { customElement, property, state } from 'lit/decorators.js';
  */
 @customElement('umb-body-layout')
 export class UmbBodyLayoutElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				background-color: var(--uui-color-background);
-				width: 100%;
-				height: 100%;
-				flex-direction: column;
-			}
-
-			#header {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				width: 100%;
-				height: var(--umb-header-layout-height);
-				background-color: var(--uui-color-surface);
-				border-bottom: 1px solid var(--uui-color-border);
-				box-sizing: border-box;
-			}
-
-			#headline {
-				display: block;
-				margin: 0 var(--uui-size-layout-1);
-			}
-
-			#tabs {
-				margin-left: auto;
-			}
-
-			#main {
-				display: flex;
-				flex: 1;
-				flex-direction: column;
-			}
-		`,
-	];
+	
 
 	/**
 	 * Renders a headline in the header.
@@ -132,6 +95,45 @@ export class UmbBodyLayoutElement extends LitElement {
 			</umb-footer-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				background-color: var(--uui-color-background);
+				width: 100%;
+				height: 100%;
+				flex-direction: column;
+			}
+
+			#header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+				height: var(--umb-header-layout-height);
+				background-color: var(--uui-color-surface);
+				border-bottom: 1px solid var(--uui-color-border);
+				box-sizing: border-box;
+			}
+
+			#headline {
+				display: block;
+				margin: 0 var(--uui-size-layout-1);
+			}
+
+			#tabs {
+				margin-left: auto;
+			}
+
+			#main {
+				display: flex;
+				flex: 1;
+				flex-direction: column;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts
index b9aeb923cd..d029de8155 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/button-with-dropdown/button-with-dropdown.element.ts
@@ -8,14 +8,7 @@ import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
 // TODO: consider not using this, but instead use dropdown, which is more generic shared component of backoffice. (this is at the movement only used in Log Viewer)
 @customElement('umb-button-with-dropdown')
 export class UmbButtonWithDropdownElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-symbol-expand {
-				margin-left: var(--uui-size-space-3);
-			}
-		`,
-	];
+	
 
 	@property()
 	label = '';
@@ -73,6 +66,15 @@ export class UmbButtonWithDropdownElement extends LitElement {
 			</uui-popover>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-symbol-expand {
+				margin-left: var(--uui-size-space-3);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts
index 11a4372905..67cac4678b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-block/code-block.element.ts
@@ -9,6 +9,20 @@ import { customElement } from 'lit/decorators.js';
  */
 @customElement('umb-code-block')
 export class UmbCodeBlockElement extends LitElement {
+	
+
+	render() {
+		return html`<div id="container">
+			<uui-scroll-container>
+				<pre>
+					<code>
+						<slot></slot>
+					</code>
+				</pre>
+			</uui-scroll-container>
+		</div> `;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -38,18 +52,6 @@ export class UmbCodeBlockElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`<div id="container">
-			<uui-scroll-container>
-				<pre>
-					<code>
-						<slot></slot>
-					</code>
-				</pre>
-			</uui-scroll-container>
-		</div> `;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts
index 876d94e08f..4a0a93652a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/code-editor/code-editor.element.ts
@@ -22,24 +22,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-code-editor')
 export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditorHost {
-	static styles = [
-		monacoEditorStyles,
-		monacoJumpingCursorHack,
-		css`
-			:host {
-				display: block;
-			}
-			#editor-container {
-				width: var(--editor-width);
-				height: var(--editor-height, 100%);
-
-				--vscode-scrollbar-shadow: #dddddd;
-				--vscode-scrollbarSlider-background: var(--uui-color-disabled-contrast);
-				--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
-				--vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
-			}
-		`,
-	];
+	
 
 	private containerRef: Ref<HTMLElement> = createRef();
 
@@ -163,6 +146,25 @@ export class UmbCodeEditorElement extends UmbLitElement implements UmbCodeEditor
 	render() {
 		return html` <div id="editor-container" ${ref(this.containerRef)}></div> `;
 	}
+	
+	static styles = [
+		monacoEditorStyles,
+		monacoJumpingCursorHack,
+		css`
+			:host {
+				display: block;
+			}
+			#editor-container {
+				width: var(--editor-width);
+				height: var(--editor-height, 100%);
+
+				--vscode-scrollbar-shadow: #dddddd;
+				--vscode-scrollbarSlider-background: var(--uui-color-disabled-contrast);
+				--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
+				--vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index c0161b597c..f15f763ea8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -8,54 +8,7 @@ import { UmbModalContext, UMB_CONTEXT_DEBUGGER_MODAL, UMB_MODAL_CONTEXT_TOKEN }
 
 @customElement('umb-debug')
 export class UmbDebugElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				float: right;
-			}
-
-			#container {
-				display: block;
-				font-family: monospace;
-
-				z-index: 10000;
-
-				position: relative;
-				width: 100%;
-				padding: 10px 0;
-			}
-
-			uui-badge {
-				cursor: pointer;
-			}
-
-			uui-icon {
-				font-size: 15px;
-			}
-
-			.events {
-				background-color: var(--uui-color-danger);
-				color: var(--uui-color-selected-contrast);
-				max-height: 0;
-				transition: max-height 0.25s ease-out;
-				overflow: hidden;
-			}
-
-			.events.open {
-				max-height: 500px;
-				overflow: auto;
-			}
-
-			.events > div {
-				padding: 10px;
-			}
-
-			h4 {
-				margin: 0;
-			}
-		`,
-	];
+	
 
 	@property({ reflect: true, type: Boolean })
 	visible = false;
@@ -209,6 +162,55 @@ export class UmbDebugElement extends UmbLitElement {
 
 		return instanceTemplates;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				float: right;
+			}
+
+			#container {
+				display: block;
+				font-family: monospace;
+
+				z-index: 10000;
+
+				position: relative;
+				width: 100%;
+				padding: 10px 0;
+			}
+
+			uui-badge {
+				cursor: pointer;
+			}
+
+			uui-icon {
+				font-size: 15px;
+			}
+
+			.events {
+				background-color: var(--uui-color-danger);
+				color: var(--uui-color-selected-contrast);
+				max-height: 0;
+				transition: max-height 0.25s ease-out;
+				overflow: hidden;
+			}
+
+			.events.open {
+				max-height: 500px;
+				overflow: auto;
+			}
+
+			.events > div {
+				padding: 10px;
+			}
+
+			h4 {
+				margin: 0;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
index 74e5ade59c..f76207f9f5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/modals/debug/debug-modal.element.ts
@@ -6,6 +6,22 @@ import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-context-debugger-modal')
 export default class UmbContextDebuggerModalElement extends UmbModalBaseElement<UmbContextDebuggerModalData> {
+	
+
+	private _handleClose() {
+		this.modalHandler?.reject();
+	}
+
+	render() {
+		return html`
+			<uui-dialog-layout>
+				<span slot="headline"> <uui-icon name="umb:bug"></uui-icon> Debug: Contexts </span>
+				<uui-scroll-container id="field-settings"> ${this.data?.content} </uui-scroll-container>
+				<uui-button slot="actions" look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>
+			</uui-dialog-layout>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -53,20 +69,6 @@ export default class UmbContextDebuggerModalElement extends UmbModalBaseElement<
 			}
 		`,
 	];
-
-	private _handleClose() {
-		this.modalHandler?.reject();
-	}
-
-	render() {
-		return html`
-			<uui-dialog-layout>
-				<span slot="headline"> <uui-icon name="umb:bug"></uui-icon> Debug: Contexts </span>
-				<uui-scroll-container id="field-settings"> ${this.data?.content} </uui-scroll-container>
-				<uui-button slot="actions" look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>
-			</uui-dialog-layout>
-		`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.element.ts
index 2f3f7892da..0ed41fd36d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/donut-chart/donut-chart.element.ts
@@ -30,66 +30,7 @@ export class UmbDonutChartElement extends LitElement {
 		return percent * 3.6;
 	}
 
-	static styles = [
-		UUITextStyles,
-		css`
-			path {
-				pointer-events: visibleFill;
-			}
-			.circle {
-				filter: url(#erode);
-			}
-
-			.highlight {
-				transition: opacity 200ms linear;
-				filter: url(#filter);
-				opacity: 0;
-			}
-
-			.highlight:hover {
-				opacity: 0.5;
-			}
-
-			#container {
-				position: relative;
-				width: 200px;
-			}
-
-			#details-box {
-				background: #ffffffe6;
-				border: 1px solid var(--uui-color-border-standalone);
-				border-radius: var(--uui-border-radius);
-				box-sizing: border-box;
-				top: 0;
-				left: 0;
-				position: absolute;
-				opacity: 0;
-				padding: 0.5em;
-				line-height: 1.5;
-				font-size: var(--uui-type-small-size);
-				box-shadow: var(--uui-shadow-depth-1);
-				transform: translate3d(var(--pos-x), var(--pos-y), 0);
-				transition: transform 0.2s cubic-bezier(0.02, 1.23, 0.79, 1.08);
-				transition: opacity 150ms linear;
-			}
-
-			#details-box.show {
-				opacity: 1;
-			}
-
-			#details-box uui-icon {
-				/* optically correct alignment */
-				color: var(--umb-donut-detail-color);
-				margin-right: 0.2em;
-			}
-
-			#details-title {
-				font-weight: bold;
-				display: flex;
-				align-items: center;
-			}
-		`,
-	];
+	
 
 	/**
 	 * Circle radius in pixels
@@ -328,6 +269,67 @@ export class UmbDonutChartElement extends LitElement {
 			</div>
 			<slot @slotchange=${this.#printCircles} @slice-update=${this.#printCircles}></slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			path {
+				pointer-events: visibleFill;
+			}
+			.circle {
+				filter: url(#erode);
+			}
+
+			.highlight {
+				transition: opacity 200ms linear;
+				filter: url(#filter);
+				opacity: 0;
+			}
+
+			.highlight:hover {
+				opacity: 0.5;
+			}
+
+			#container {
+				position: relative;
+				width: 200px;
+			}
+
+			#details-box {
+				background: #ffffffe6;
+				border: 1px solid var(--uui-color-border-standalone);
+				border-radius: var(--uui-border-radius);
+				box-sizing: border-box;
+				top: 0;
+				left: 0;
+				position: absolute;
+				opacity: 0;
+				padding: 0.5em;
+				line-height: 1.5;
+				font-size: var(--uui-type-small-size);
+				box-shadow: var(--uui-shadow-depth-1);
+				transform: translate3d(var(--pos-x), var(--pos-y), 0);
+				transition: transform 0.2s cubic-bezier(0.02, 1.23, 0.79, 1.08);
+				transition: opacity 150ms linear;
+			}
+
+			#details-box.show {
+				opacity: 1;
+			}
+
+			#details-box uui-icon {
+				/* optically correct alignment */
+				color: var(--umb-donut-detail-color);
+				margin-right: 0.2em;
+			}
+
+			#details-title {
+				font-weight: bold;
+				display: flex;
+				align-items: center;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
index c2164ab66b..ee10ccc50a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
@@ -6,26 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 // TODO: maybe move this to UI Library.
 @customElement('umb-dropdown')
 export class UmbDropdownElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#container {
-				display: inline-block;
-			}
-
-			#dropdown {
-				overflow: hidden;
-				z-index: -1;
-				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-			}
-		`,
-	];
+	
 
 	@property({ type: Boolean, reflect: true })
 	open = false;
@@ -46,6 +27,27 @@ export class UmbDropdownElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#container {
+				display: inline-block;
+			}
+
+			#dropdown {
+				overflow: hidden;
+				z-index: -1;
+				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts
index e33d98d274..60660ea40e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/empty-state/empty-state.element.ts
@@ -4,6 +4,26 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-empty-state')
 export class UmbEmptyStateElement extends LitElement {
+	
+
+	/**
+	 * Set the text size
+	 */
+	@property({ type: String })
+	size: 'small' | 'large' = 'large';
+
+	/**
+	 * Set the element position
+	 * 'center' => element is absolutely centered
+	 * undefined => element has auto margin, to center in parent
+	 */
+	@property({ type: String })
+	position: 'center' | undefined;
+
+	render() {
+		return html`<slot></slot>`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -39,24 +59,6 @@ export class UmbEmptyStateElement extends LitElement {
 			}
 		`,
 	];
-
-	/**
-	 * Set the text size
-	 */
-	@property({ type: String })
-	size: 'small' | 'large' = 'large';
-
-	/**
-	 * Set the element position
-	 * 'center' => element is absolutely centered
-	 * undefined => element has auto margin, to center in parent
-	 */
-	@property({ type: String })
-	position: 'center' | undefined;
-
-	render() {
-		return html`<slot></slot>`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/extension-slot/extension-slot.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/extension-slot/extension-slot.element.ts
index d690fb3091..3010a64b4b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/extension-slot/extension-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/extension-slot/extension-slot.element.ts
@@ -23,11 +23,7 @@ export type InitializedExtension = { alias: string; weight: number; component: H
  */
 @customElement('umb-extension-slot')
 export class UmbExtensionSlotElement extends UmbLitElement {
-	static styles = css`
-		:host {
-			display: contents;
-		}
-	`;
+	
 
 	@state()
 	private _extensions: InitializedExtension[] = [];
@@ -131,6 +127,12 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 			(ext) => this.renderMethod(ext) || nothing
 		);
 	}
+	
+	static styles = css`
+		:host {
+			display: contents;
+		}
+	`;
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts
index fc7cadf0f8..40f7672b8c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/footer-layout/footer-layout.element.ts
@@ -13,6 +13,15 @@ import { customElement, state } from 'lit/decorators.js';
  */
 @customElement('umb-footer-layout')
 export class UmbFooterLayoutElement extends LitElement {
+	
+
+	render() {
+		return html`
+			<slot></slot>
+			<slot id="actions" name="actions"></slot>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -35,13 +44,6 @@ export class UmbFooterLayoutElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<slot></slot>
-			<slot id="actions" name="actions"></slot>
-		`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts
index 536bbb0424..3c57897063 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/header-app/header-app-button.element.ts
@@ -20,15 +20,7 @@ umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-header-app-button')
 export class UmbHeaderAppButtonElement extends LitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			uui-button {
-				font-size: 18px;
-				--uui-button-background-color: transparent;
-			}
-		`,
-	];
+	
 
 	public manifest?: ManifestHeaderAppButtonKind;
 
@@ -43,6 +35,16 @@ export class UmbHeaderAppButtonElement extends LitElement {
 			</uui-button>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			uui-button {
+				font-size: 18px;
+				--uui-button-background-color: transparent;
+			}
+		`,
+	];
 }
 
 export default UmbHeaderAppButtonElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-item.element.ts
index 9202a44398..b208405a81 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-item.element.ts
@@ -5,6 +5,33 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-history-item')
 export class UmbHistoryItemElement extends UmbLitElement {
+	
+
+	@property({ type: String })
+	src?: string;
+
+	@property({ type: String })
+	name?: string;
+
+	@property({ type: String })
+	detail?: string;
+
+	render() {
+		return html`<div id="wrapper">
+			<div class="user-info">
+				<uui-avatar .name="${this.name ?? 'Unknown'}" ?src="${this.src}"></uui-avatar>
+				<div>
+					<span class="name">${this.name}</span>
+					<span class="detail">${this.detail}</span>
+				</div>
+			</div>
+			<div class="slots-wrapper">
+				<slot id="description"></slot>
+				<slot id="actions-container" name="actions"></slot>
+			</div>
+		</div>`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -61,31 +88,6 @@ export class UmbHistoryItemElement extends UmbLitElement {
 			}
 		`,
 	];
-
-	@property({ type: String })
-	src?: string;
-
-	@property({ type: String })
-	name?: string;
-
-	@property({ type: String })
-	detail?: string;
-
-	render() {
-		return html`<div id="wrapper">
-			<div class="user-info">
-				<uui-avatar .name="${this.name ?? 'Unknown'}" ?src="${this.src}"></uui-avatar>
-				<div>
-					<span class="name">${this.name}</span>
-					<span class="detail">${this.detail}</span>
-				</div>
-			</div>
-			<div class="slots-wrapper">
-				<slot id="description"></slot>
-				<slot id="actions-container" name="actions"></slot>
-			</div>
-		</div>`;
-	}
 }
 
 export default UmbHistoryItemElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.element.ts
index 8e1a1b78de..53313165a9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/history/history-list.element.ts
@@ -5,6 +5,14 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-history-list')
 export class UmbHistoryListElement extends UmbLitElement {
+	
+
+	render() {
+		return html`<div>
+			<slot></slot>
+		</div>`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -32,12 +40,6 @@ export class UmbHistoryListElement extends UmbLitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`<div>
-			<slot></slot>
-		</div>`;
-	}
 }
 
 export default UmbHistoryListElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts
index e70a5fc6b4..6596b27e6b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-checkbox-list/input-checkbox-list.element.ts
@@ -8,14 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-input-checkbox-list')
 export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-checkbox {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	/**
 	 * List of items.
@@ -71,6 +64,15 @@ export class UmbInputCheckboxListElement extends FormControlMixin(UmbLitElement)
 	renderCheckbox(item: { key: string; checked: boolean; value: string }) {
 		return html`<uui-checkbox value="${item.value}" label="${item.value}" ?checked="${item.checked}"></uui-checkbox>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-checkbox {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbInputCheckboxListElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts
index 4125f2e8a2..0c4d71f981 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts
@@ -12,7 +12,7 @@ import type { SwatchDetails } from '@umbraco-cms/backoffice/models';
  */
 @customElement('umb-input-color-picker')
 export class UmbInputColorPickerElement extends FormControlMixin(UmbLitElement) {
-	static styles = [UUITextStyles];
+	
 
 	@property({ type: Boolean })
 	showLabels = false;
@@ -48,6 +48,8 @@ export class UmbInputColorPickerElement extends FormControlMixin(UmbLitElement)
 				.showLabel=${this.showLabels}></uui-color-swatch>`;
 		})}`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbInputColorPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts
index 847c14bcb7..5eab4086e0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts
@@ -12,7 +12,7 @@ import { CultureReponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-input-culture-select')
 export class UmbInputCultureSelectElement extends FormControlMixin(UmbLitElement) {
-	static styles = [UUITextStyles, css``];
+	
 
 	/**
 	 * Disables the input
@@ -104,6 +104,8 @@ export class UmbInputCultureSelectElement extends FormControlMixin(UmbLitElement
 				  `}
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbInputCultureSelectElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index d87623d464..cd909d40be 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -17,14 +17,7 @@ import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-a
 
 @customElement('umb-input-document-picker')
 export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			#add-button {
-				width: 100%;
-			}
-		`,
-	];
+	
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -174,6 +167,15 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 			</uui-ref-node>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#add-button {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbInputDocumentPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts
index 06930f64e7..c752e736a2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts
@@ -19,14 +19,7 @@ import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-input-document-type-picker')
 export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			#add-button {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	// TODO: do we need both selectedIds and value? If we just use value we follow the same pattern as native form controls.
 	private _selectedIds: Array<string> = [];
@@ -131,6 +124,15 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl
 			</uui-ref-node>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#add-button {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbInputDocumentTypePickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-eye-dropper/input-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-eye-dropper/input-eye-dropper.element.ts
index 73e3de3c2e..23511ccaec 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-eye-dropper/input-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-eye-dropper/input-eye-dropper.element.ts
@@ -7,7 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-input-eye-dropper')
 export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) {
-	static styles = [UUITextStyles, css``];
+	
 
 	protected getFormElement() {
 		return undefined;
@@ -34,6 +34,8 @@ export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) {
 			.opacity="${this.opacity}"
 			.swatches="${this.swatches}"></uui-color-picker>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbInputEyeDropperElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index cf3afb8554..8ee9138b5f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -16,25 +16,7 @@ import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-a
 
 @customElement('umb-input-media-picker')
 export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: grid;
-				gap: var(--uui-size-space-3);
-				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-			}
-			#add-button {
-				text-align: center;
-				height: 160px;
-			}
-
-			uui-icon {
-				display: block;
-				margin: 0 auto;
-			}
-		`,
-	];
+	
 
 	/**
 	 * This is a minimum amount of selected items in this input.
@@ -202,6 +184,26 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
 		`;
 		//TODO: <uui-button-inline-create vertical></uui-button-inline-create>
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: grid;
+				gap: var(--uui-size-space-3);
+				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+			}
+			#add-button {
+				text-align: center;
+				height: 160px;
+			}
+
+			uui-icon {
+				display: block;
+				margin: 0 auto;
+			}
+		`,
+	];
 }
 
 export default UmbInputMediaPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index 514effc3f9..0767c2d6e5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -20,14 +20,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-input-multi-url-picker')
 export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-button {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	protected getFormElement() {
 		return undefined;
@@ -229,6 +222,15 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
 			</uui-action-bar>
 		</uui-ref-node>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-button {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-number-range/input-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-number-range/input-number-range.element.ts
index 20e021b98c..b52352b256 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-number-range/input-number-range.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-number-range/input-number-range.element.ts
@@ -11,7 +11,7 @@ function getNumberOrUndefined(value: string) {
 
 @customElement('umb-input-number-range')
 export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement) {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ type: String, attribute: 'min-label' })
 	minLabel = 'Low value';
@@ -84,6 +84,8 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement)
 			–
 			<uui-input type="number" .value=${this._maxValue} @input=${this._onMaxInput} label=${this.maxLabel}></uui-input>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbInputNumberRangeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts
index 5d69da7ad4..d59f32e274 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-radio-button-list/input-radio-button-list.element.ts
@@ -8,14 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-input-radio-button-list')
 export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-		`,
-	];
+	
 
 	/**
 	 * List of items.
@@ -60,6 +53,15 @@ export class UmbInputRadioButtonListElement extends FormControlMixin(UmbLitEleme
 	renderRadioButton(item: { key: string; sortOrder: number; value: string }) {
 		return html`<uui-radio value="${item.value}" label="${item.value}"></uui-radio>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	];
 }
 
 export default UmbInputRadioButtonListElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
index 0a81f98e77..361c5cf166 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-section/input-section.element.ts
@@ -8,34 +8,7 @@ import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
 @customElement('umb-input-section')
 export class UmbInputPickerSectionElement extends UmbInputListBaseElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			#user-group-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			.user-group {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-2);
-			}
-			.user-group div {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-4);
-			}
-			.user-group uui-button {
-				margin-left: auto;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _sections: Array<ManifestSection> = [];
@@ -83,6 +56,35 @@ export class UmbInputPickerSectionElement extends UmbInputListBaseElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			#user-group-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			.user-group {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+			}
+			.user-group div {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-4);
+			}
+			.user-group uui-button {
+				margin-left: auto;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-slider/input-slider.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-slider/input-slider.element.ts
index 19c468d194..9a5038e3a9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-slider/input-slider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-slider/input-slider.element.ts
@@ -7,7 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-input-slider')
 export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ type: Number })
 	min = 0;
@@ -59,6 +59,8 @@ export class UmbInputSliderElement extends FormControlMixin(UmbLitElement) {
 			.valueHigh="${this.initVal2}"
 			@change="${this.#onChange}"></uui-range-slider>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbInputSliderElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-toggle/input-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-toggle/input-toggle.element.ts
index 6142481ef0..c051e2c3ce 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-toggle/input-toggle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-toggle/input-toggle.element.ts
@@ -7,14 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-input-toggle')
 export class UmbInputToggleElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-toggle {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	_checked = false;
 	@property({ type: Boolean })
@@ -68,6 +61,15 @@ export class UmbInputToggleElement extends FormControlMixin(UmbLitElement) {
 			.label="${this._currentLabel}"
 			@change="${this.#onChange}"></uui-toggle>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-toggle {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbInputToggleElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-upload-field/input-upload-field.element.ts
index f4727f6792..77298b525a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-upload-field/input-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-upload-field/input-upload-field.element.ts
@@ -9,27 +9,7 @@ import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco
 
 @customElement('umb-input-upload-field')
 export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-icon {
-				vertical-align: sub;
-				margin-right: var(--uui-size-space-4);
-			}
-
-			uui-symbol-file-thumbnail {
-				box-sizing: border-box;
-				min-height: 150px;
-				padding: var(--uui-size-space-4);
-				border: 1px solid var(--uui-color-border);
-			}
-
-			#wrapper {
-				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(300px, auto));
-			}
-		`,
-	];
+	
 
 	private _keys: Array<string> = [];
 	/**
@@ -177,6 +157,28 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 		// Remove via endpoint?
 		this._currentFiles = [];
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-icon {
+				vertical-align: sub;
+				margin-right: var(--uui-size-space-4);
+			}
+
+			uui-symbol-file-thumbnail {
+				box-sizing: border-box;
+				min-height: 150px;
+				padding: var(--uui-size-space-4);
+				border: 1px solid var(--uui-color-border);
+			}
+
+			#wrapper {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(300px, auto));
+			}
+		`,
+	];
 }
 
 export default UmbInputUploadFieldElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
index c7ecf36862..42ffca8e87 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user-group/input-user-group.element.ts
@@ -12,34 +12,7 @@ import type { UserGroupEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user-group')
 export class UmbInputPickerUserGroupElement extends UmbInputListBaseElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			#user-group-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			.user-group {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-2);
-			}
-			.user-group div {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-4);
-			}
-			.user-group uui-button {
-				margin-left: auto;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _userGroups: Array<UserGroupEntity> = [];
@@ -92,6 +65,35 @@ export class UmbInputPickerUserGroupElement extends UmbInputListBaseElement {
 	renderContent() {
 		return html`${this._renderUserGroupList()}`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			#user-group-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			.user-group {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+			}
+			.user-group div {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-4);
+			}
+			.user-group uui-button {
+				margin-left: auto;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
index 762edbc5cf..8a51a0ac85 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-user/input-user.element.ts
@@ -8,29 +8,7 @@ import type { UserEntity } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-input-user')
 export class UmbPickerUserElement extends UmbInputListBaseElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			#user-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			.user {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-2);
-			}
-			.user uui-button {
-				margin-left: auto;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _users: Array<UserEntity> = [];
@@ -86,6 +64,30 @@ export class UmbPickerUserElement extends UmbInputListBaseElement {
 	renderContent() {
 		return html`${this._renderUserList()}`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			#user-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			.user {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-2);
+			}
+			.user uui-button {
+				margin-left: auto;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item-base/menu-item-base.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item-base/menu-item-base.element.ts
index ad7cd66ff4..62d89eb5a1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item-base/menu-item-base.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item-base/menu-item-base.element.ts
@@ -15,7 +15,7 @@ import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-menu-item-base')
 export class UmbMenuItemBaseElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	private _entityType?: string;
 	@property({ type: String, attribute: 'entity-type' })
@@ -116,6 +116,8 @@ export class UmbMenuItemBaseElement extends UmbLitElement {
 				: nothing}
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item/menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item/menu-item.element.ts
index 0639f05620..d1c2cea6f5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item/menu-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu-item/menu-item.element.ts
@@ -11,7 +11,7 @@ export interface UmbMenuItemExtensionElement {
 
 @customElement('umb-menu-item')
 export class UmbMenuItemElement extends UmbLitElement implements UmbMenuItemExtensionElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ type: Object, attribute: false })
 	manifest!: ManifestMenuItem;
@@ -22,6 +22,8 @@ export class UmbMenuItemElement extends UmbLitElement implements UmbMenuItemExte
 			icon-name=${this.manifest.meta.icon}
 			entity-type=${ifDefined(this.manifest.meta.entityType)}></umb-menu-item-base>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu.element.ts
index 55679c7bc2..70e9e343f1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/menu/menu.element.ts
@@ -8,7 +8,7 @@ import './menu-item/menu-item.element';
 
 @customElement('umb-menu')
 export class UmbMenuElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	manifest?: ManifestMenu;
@@ -19,6 +19,8 @@ export class UmbMenuElement extends UmbLitElement {
 			.filter=${(items: ManifestMenuItem) => items.conditions.menus.includes(this.manifest!.alias)}
 			default-element="umb-menu-item"></umb-extension-slot>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbMenuElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts
index 588e861041..5712375742 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/property-type-based-property/property-type-based-property.element.ts
@@ -17,14 +17,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-property-type-based-property')
 export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-		`,
-	];
+	
 
 	@property({ type: Object, attribute: false })
 	public get property(): PropertyTypeResponseModelBaseModel | undefined {
@@ -121,6 +114,15 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 			.propertyVariantId=${this.propertyVariantId}
 			.config=${this._dataTypeData}></umb-workspace-property>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
index 4a0f2a8d4f..f28f91d5bb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
@@ -9,7 +9,7 @@ import { customElement, property } from 'lit/decorators.js';
  */
 @customElement('umb-ref-property-editor-ui')
 export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement {
-	static styles = [...UUIRefNodeElement.styles];
+	
 
 	protected fallbackIcon =
 		'<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M142.212 397.267l106.052-48.024L398.479 199.03l-26.405-26.442-90.519 90.517-15.843-15.891 90.484-90.486-16.204-16.217-150.246 150.243-47.534 106.513zm74.904-100.739l23.285-23.283 3.353 22.221 22.008 3.124-23.283 23.313-46.176 20.991 20.813-46.366zm257.6-173.71L416.188 64.3l-49.755 49.785 58.504 58.503 49.779-49.77zM357.357 300.227h82.826v116.445H68.929V300.227h88.719v-30.648H38.288v177.733h432.537V269.578H357.357v30.649z"></path></svg>';
@@ -50,6 +50,8 @@ export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement {
 		}
 		return html`<small id="detail">${details.join(' | ')}<slot name="detail"></slot></small>`;
 	}
+	
+	static styles = [...UUIRefNodeElement.styles];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts
index c9a4b9f487..3ff9f331a6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-main/section-main.element.ts
@@ -4,6 +4,16 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-section-main')
 export class UmbSectionMainElement extends LitElement {
+	
+
+	render() {
+		return html`
+			<main>
+				<slot></slot>
+			</main>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -20,14 +30,6 @@ export class UmbSectionMainElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`
-			<main>
-				<slot></slot>
-			</main>
-		`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
index 0da6e7825a..ba649a06bb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts
@@ -10,47 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-section-sidebar-context-menu')
 export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-				z-index: 1;
-			}
-			#backdrop {
-				content: '';
-				position: absolute;
-				inset: 0px;
-				background-color: black;
-				opacity: 0.5;
-				width: 100vw;
-				height: 100vh;
-				z-index: -1;
-			}
-			#relative-wrapper {
-				background-color: var(--uui-color-surface);
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				width: 100%;
-				height: 100%;
-			}
-			#action-modal {
-				position: absolute;
-				left: 300px;
-				height: 100%;
-				z-index: 1;
-				top: 0;
-				width: 300px;
-				border: none;
-				border-left: 1px solid var(--uui-color-border);
-				border-right: 1px solid var(--uui-color-border);
-				background-color: var(--uui-color-surface);
-			}
-		`,
-	];
+	
 
 	#sectionSidebarContext?: UmbSectionSidebarContext;
 
@@ -116,6 +76,48 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
 			  </div>`
 			: nothing;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+				z-index: 1;
+			}
+			#backdrop {
+				content: '';
+				position: absolute;
+				inset: 0px;
+				background-color: black;
+				opacity: 0.5;
+				width: 100vw;
+				height: 100vh;
+				z-index: -1;
+			}
+			#relative-wrapper {
+				background-color: var(--uui-color-surface);
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				height: 100%;
+			}
+			#action-modal {
+				position: absolute;
+				left: 300px;
+				height: 100%;
+				z-index: 1;
+				top: 0;
+				width: 300px;
+				border: none;
+				border-left: 1px solid var(--uui-color-border);
+				border-right: 1px solid var(--uui-color-border);
+				background-color: var(--uui-color-surface);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts
index 67510ed5bf..5870704242 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar-menu/section-sidebar-menu.element.ts
@@ -26,14 +26,7 @@ umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-section-sidebar-menu')
 export class UmbSectionSidebarMenuElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				padding: var(--uui-size-4) var(--uui-size-8);
-			}
-		`,
-	];
+	
 
 	@property()
 	manifest?: ManifestSectionSidebarAppMenuKind;
@@ -46,6 +39,15 @@ export class UmbSectionSidebarMenuElement extends UmbLitElement {
 				.filter=${(menu: ManifestMenu) => menu.alias === this.manifest?.meta?.menu}
 				default-element="umb-menu"></umb-extension-slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				padding: var(--uui-size-4) var(--uui-size-8);
+			}
+		`,
+	];
 }
 
 export default UmbSectionSidebarMenuElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts
index f16bc17cb6..1c68f2e5ff 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-sidebar/section-sidebar.element.ts
@@ -9,6 +9,25 @@ import '../section-sidebar-context-menu/section-sidebar-context-menu.element';
 
 @customElement('umb-section-sidebar')
 export class UmbSectionSidebarElement extends UmbLitElement {
+	
+
+	#sectionSidebarContext = new UmbSectionSidebarContext(this);
+
+	constructor() {
+		super();
+		this.provideContext(UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, this.#sectionSidebarContext);
+	}
+
+	render() {
+		return html`
+			<umb-section-sidebar-context-menu>
+				<uui-scroll-container id="scroll-container">
+					<slot></slot>
+				</uui-scroll-container>
+			</umb-section-sidebar-context-menu>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -29,23 +48,6 @@ export class UmbSectionSidebarElement extends UmbLitElement {
 			}
 		`,
 	];
-
-	#sectionSidebarContext = new UmbSectionSidebarContext(this);
-
-	constructor() {
-		super();
-		this.provideContext(UMB_SECTION_SIDEBAR_CONTEXT_TOKEN, this.#sectionSidebarContext);
-	}
-
-	render() {
-		return html`
-			<umb-section-sidebar-context-menu>
-				<uui-scroll-container id="scroll-container">
-					<slot></slot>
-				</uui-scroll-container>
-			</umb-section-sidebar-context-menu>
-		`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
index a75bcc02fc..1a2f9c398a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-views/section-views.element.ts
@@ -13,29 +13,7 @@ import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 // TODO: this might need a new name, since it's both view and dashboard now
 @customElement('umb-section-views')
 export class UmbSectionViewsElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#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;
-			}
-
-			#views {
-				justify-content: flex-end;
-				--uui-tab-divider: var(--uui-color-divider-standalone);
-			}
-
-			#views uui-tab:first-child {
-				border-left: 1px solid var(--uui-color-divider-standalone);
-			}
-		`,
-	];
+	
 
 	@property({ type: String, attribute: 'section-alias' })
 	public sectionAlias?: string;
@@ -185,6 +163,30 @@ export class UmbSectionViewsElement extends UmbLitElement {
 			</uui-tab-group>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#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;
+			}
+
+			#views {
+				justify-content: flex-end;
+				--uui-tab-divider: var(--uui-color-divider-standalone);
+			}
+
+			#views uui-tab:first-child {
+				border-left: 1px solid var(--uui-color-divider-standalone);
+			}
+		`,
+	];
 }
 
 export default UmbSectionViewsElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
index 2a9b530b68..4f614856db 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section.element.ts
@@ -18,20 +18,7 @@ import './section-sidebar-menu/section-sidebar-menu.element';
  */
 @customElement('umb-section')
 export class UmbSectionElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				flex: 1 1 auto;
-				height: 100%;
-				display: flex;
-			}
-
-			h3 {
-				padding: var(--uui-size-4) var(--uui-size-8);
-			}
-		`,
-	];
+	
 
 	@property()
 	public manifest?: ManifestSection;
@@ -106,6 +93,21 @@ export class UmbSectionElement extends UmbLitElement {
 			</umb-section-main>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				flex: 1 1 auto;
+				height: 100%;
+				display: flex;
+			}
+
+			h3 {
+				padding: var(--uui-size-4) var(--uui-size-8);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
index 0ab0b54030..0faada0395 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/table/table.element.ts
@@ -59,67 +59,7 @@ export class UmbTableOrderedEvent extends Event {
  */
 @customElement('umb-table')
 export class UmbTableElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				height: 100%;
-				overflow: auto;
-				padding: var(--uui-size-space-4);
-				padding-top: 0;
-			}
-
-			uui-table {
-				box-shadow: var(--uui-shadow-depth-1);
-			}
-
-			uui-table-head {
-				position: sticky;
-				top: 0;
-				background: white;
-				z-index: 1;
-				background-color: var(--uui-color-surface);
-			}
-
-			uui-table-row uui-checkbox {
-				display: none;
-			}
-
-			uui-table-row[selectable]:focus uui-icon,
-			uui-table-row[selectable]:focus-within uui-icon,
-			uui-table-row[selectable]:hover uui-icon,
-			uui-table-row[select-only] uui-icon {
-				display: none;
-			}
-
-			uui-table-row[selectable]:focus uui-checkbox,
-			uui-table-row[selectable]:focus-within uui-checkbox,
-			uui-table-row[selectable]:hover uui-checkbox,
-			uui-table-row[select-only] uui-checkbox {
-				display: inline-block;
-			}
-
-			uui-table-head-cell:focus,
-			uui-table-head-cell:focus-within,
-			uui-table-head-cell:hover {
-				--uui-symbol-sort-hover: 1;
-			}
-
-			uui-table-head-cell button {
-				padding: 0;
-				background-color: transparent;
-				color: inherit;
-				border: none;
-				cursor: pointer;
-				font-weight: inherit;
-				font-size: inherit;
-				display: inline-flex;
-				align-items: center;
-				justify-content: space-between;
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	/**
 	 * Table Items
@@ -302,6 +242,68 @@ export class UmbTableElement extends LitElement {
 
 		return value;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				height: 100%;
+				overflow: auto;
+				padding: var(--uui-size-space-4);
+				padding-top: 0;
+			}
+
+			uui-table {
+				box-shadow: var(--uui-shadow-depth-1);
+			}
+
+			uui-table-head {
+				position: sticky;
+				top: 0;
+				background: white;
+				z-index: 1;
+				background-color: var(--uui-color-surface);
+			}
+
+			uui-table-row uui-checkbox {
+				display: none;
+			}
+
+			uui-table-row[selectable]:focus uui-icon,
+			uui-table-row[selectable]:focus-within uui-icon,
+			uui-table-row[selectable]:hover uui-icon,
+			uui-table-row[select-only] uui-icon {
+				display: none;
+			}
+
+			uui-table-row[selectable]:focus uui-checkbox,
+			uui-table-row[selectable]:focus-within uui-checkbox,
+			uui-table-row[selectable]:hover uui-checkbox,
+			uui-table-row[select-only] uui-checkbox {
+				display: inline-block;
+			}
+
+			uui-table-head-cell:focus,
+			uui-table-head-cell:focus-within,
+			uui-table-head-cell:hover {
+				--uui-symbol-sort-hover: 1;
+			}
+
+			uui-table-head-cell button {
+				padding: 0;
+				background-color: transparent;
+				color: inherit;
+				border: none;
+				cursor: pointer;
+				font-weight: inherit;
+				font-size: inherit;
+				display: inline-flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbTableElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tooltip-menu/tooltip-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tooltip-menu/tooltip-menu.element.ts
index 46156a9f32..616ac5b7cf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tooltip-menu/tooltip-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tooltip-menu/tooltip-menu.element.ts
@@ -11,39 +11,7 @@ export interface TooltipMenuItem {
 
 @customElement('umb-tooltip-menu')
 export class UmbTooltipMenuElement extends LitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				width: max-content;
-				background-color: var(--uui-color-surface);
-				box-shadow: var(--uui-shadow-depth-3);
-				border-radius: var(--uui-border-radius);
-				overflow: clip;
-			}
-			.item {
-				color: var(--uui-color-interactive);
-				align-items: center;
-				display: flex;
-				gap: var(--uui-size-space-2);
-				cursor: pointer;
-			}
-			.item:hover {
-				color: var(--uui-color-interactive-emphasis);
-				background-color: var(--uui-color-surface-emphasis);
-			}
-			.item.label {
-				padding: var(--uui-size-space-2) var(--uui-size-space-4);
-			}
-			.item.icon {
-				padding: var(--uui-size-space-4);
-				aspect-ratio: 1/1;
-				justify-content: center;
-			}
-		`,
-	];
+	
 
 	@property({ type: Boolean, reflect: true, attribute: 'icon-only' })
 	public iconOnly = false;
@@ -87,6 +55,40 @@ export class UmbTooltipMenuElement extends LitElement {
 			(item) => this._renderItem(item)
 		);
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				width: max-content;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				border-radius: var(--uui-border-radius);
+				overflow: clip;
+			}
+			.item {
+				color: var(--uui-color-interactive);
+				align-items: center;
+				display: flex;
+				gap: var(--uui-size-space-2);
+				cursor: pointer;
+			}
+			.item:hover {
+				color: var(--uui-color-interactive-emphasis);
+				background-color: var(--uui-color-surface-emphasis);
+			}
+			.item.label {
+				padding: var(--uui-size-space-2) var(--uui-size-space-4);
+			}
+			.item.icon {
+				padding: var(--uui-size-space-4);
+				aspect-ratio: 1/1;
+				justify-content: center;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
index 584b77456a..5490db6a27 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu-page.service.ts
@@ -8,7 +8,7 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 // TODO: Refactor this, its not a service and the data should be handled by a context api.
 @customElement('umb-tree-context-menu-page-service')
 export class UmbTreeContextMenuPageServiceElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ type: Object })
 	public actionEntity: any = { key: '', name: '' };
@@ -62,6 +62,8 @@ export class UmbTreeContextMenuPageServiceElement extends UmbLitElement {
 	render() {
 		return this._renderTopPage();
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export const UMB_TREE_CONTEXT_MENU_PAGE_SERVICE_CONTEXT_TOKEN =
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
index 557c848b9e..df5a395dd5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/context-menu/tree-context-menu.service.ts
@@ -6,47 +6,7 @@ import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 
 @customElement('umb-tree-context-menu-service')
 export class UmbTreeContextMenuServiceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-				z-index: 1;
-			}
-			#backdrop {
-				content: '';
-				position: absolute;
-				inset: 0px;
-				background-color: black;
-				opacity: 0.5;
-				width: 100vw;
-				height: 100vh;
-				z-index: -1;
-			}
-			#relative-wrapper {
-				background-color: var(--uui-color-surface);
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				width: 100%;
-				height: 100%;
-			}
-			#action-modal {
-				position: absolute;
-				left: 300px;
-				height: 100%;
-				z-index: 1;
-				top: 0;
-				width: 300px;
-				border: none;
-				border-left: 1px solid var(--uui-color-border);
-				border-right: 1px solid var(--uui-color-border);
-				background-color: var(--uui-color-surface);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _modalOpen = false;
@@ -90,6 +50,48 @@ export class UmbTreeContextMenuServiceElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+				z-index: 1;
+			}
+			#backdrop {
+				content: '';
+				position: absolute;
+				inset: 0px;
+				background-color: black;
+				opacity: 0.5;
+				width: 100vw;
+				height: 100vh;
+				z-index: -1;
+			}
+			#relative-wrapper {
+				background-color: var(--uui-color-surface);
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				height: 100%;
+			}
+			#action-modal {
+				position: absolute;
+				left: 300px;
+				height: 100%;
+				z-index: 1;
+				top: 0;
+				width: 300px;
+				border: none;
+				border-left: 1px solid var(--uui-color-border);
+				border-right: 1px solid var(--uui-color-border);
+				background-color: var(--uui-color-surface);
+			}
+		`,
+	];
 }
 
 export const UMB_TREE_CONTEXT_MENU_SERVICE_CONTEXT_TOKEN = new UmbContextToken<UmbTreeContextMenuServiceElement>(
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.element.ts
index 11fd1f40f3..a68e13eece 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/entity-tree-item/entity-tree-item.element.ts
@@ -22,7 +22,7 @@ umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-entity-tree-item')
 export class UmbEntityTreeItemElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	private _item?: EntityTreeItemResponseModel;
 	@property({ type: Object, attribute: false })
@@ -40,6 +40,8 @@ export class UmbEntityTreeItemElement extends UmbLitElement {
 		if (!this.item) return nothing;
 		return html`<umb-tree-item-base></umb-tree-item-base>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts
index a2b059421c..34588fa7c1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.element.ts
@@ -10,7 +10,7 @@ import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-tree-item-base')
 export class UmbTreeItemBaseElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@state()
 	private _item?: TreeItemPresentationModel;
@@ -159,6 +159,8 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 				: ''}
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
index 8e7efdbcd5..c7e981c62f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item/tree-item.element.ts
@@ -7,7 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-tree-item')
 export class UmbTreeItemElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ type: Object, attribute: false })
 	item?: TreeItemPresentationModel;
@@ -21,6 +21,8 @@ export class UmbTreeItemElement extends UmbLitElement {
 				item: this.item,
 			}}></umb-extension-slot>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
index 57391b102a..8e0ab1c73b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variant-selector/variant-selector.element.ts
@@ -13,128 +13,7 @@ import { DocumentVariantResponseModel, ContentStateModel } from '@umbraco-cms/ba
 
 @customElement('umb-variant-selector')
 export class UmbVariantSelectorElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#name-input {
-				width: 100%;
-				height: 100%; /** I really don't know why this fixes the border colliding with variant-selector-toggle, but lets this solution for now */
-			}
-
-			#variant-selector-toggle {
-				white-space: nowrap;
-			}
-
-			#variant-selector-popover {
-				display: block;
-			}
-
-			#variant-selector-dropdown {
-				overflow: hidden;
-				z-index: -1;
-				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-			}
-
-			#variant-close {
-				white-space: nowrap;
-			}
-
-			ul {
-				list-style-type: none;
-				padding: 0;
-				margin: 0;
-			}
-
-			li {
-				position: relative;
-				margin-bottom: 1px;
-			}
-
-			li:nth-last-of-type(1) {
-				margin-bottom: 0;
-			}
-
-			li.selected:before {
-				background-color: var(--uui-color-current);
-				border-radius: 0 4px 4px 0;
-				bottom: 8px;
-				content: '';
-				left: 0;
-				pointer-events: none;
-				position: absolute;
-				top: 8px;
-				width: 4px;
-				z-index: 1;
-			}
-
-			.variant-selector-switch-button {
-				display: flex;
-				align-items: center;
-				border: none;
-				background: transparent;
-				color: var(--uui-color-current-contrast);
-				padding: 6px 20px;
-				font-weight: bold;
-				width: 100%;
-				text-align: left;
-				font-size: 14px;
-				cursor: pointer;
-				border-bottom: 1px solid var(--uui-color-divider-standalone);
-				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
-			}
-
-			.variant-selector-switch-button:hover {
-				background: var(--uui-palette-sand);
-				color: var(--uui-palette-space-cadet-light);
-			}
-
-			.variant-selector-switch-button i {
-				font-weight: normal;
-			}
-
-			.variant-selector-switch-button.add-mode {
-				position: relative;
-				color: var(--uui-palette-dusty-grey-dark);
-			}
-
-			.variant-selector-switch-button.add-mode:after {
-				border: 2px dashed var(--uui-color-divider-standalone);
-				bottom: 0;
-				content: '';
-				left: 0;
-				margin: 2px;
-				pointer-events: none;
-				position: absolute;
-				right: 0;
-				top: 0;
-				z-index: 1;
-			}
-
-			.add-icon {
-				font-size: 12px;
-				margin-right: 12px;
-			}
-
-			.variant-selector-split-view {
-				position: absolute;
-				top: 0;
-				right: 0;
-				bottom: 1px;
-			}
-
-			.variant-selector-state {
-				color: var(--uui-palette-malibu-dimmed);
-				font-size: 12px;
-				font-weight: normal;
-			}
-		`,
-	];
+	
 
 	// TODO: not jet used:
 	@property()
@@ -368,6 +247,129 @@ export class UmbVariantSelectorElement extends UmbLitElement {
 		</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#name-input {
+				width: 100%;
+				height: 100%; /** I really don't know why this fixes the border colliding with variant-selector-toggle, but lets this solution for now */
+			}
+
+			#variant-selector-toggle {
+				white-space: nowrap;
+			}
+
+			#variant-selector-popover {
+				display: block;
+			}
+
+			#variant-selector-dropdown {
+				overflow: hidden;
+				z-index: -1;
+				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+			}
+
+			#variant-close {
+				white-space: nowrap;
+			}
+
+			ul {
+				list-style-type: none;
+				padding: 0;
+				margin: 0;
+			}
+
+			li {
+				position: relative;
+				margin-bottom: 1px;
+			}
+
+			li:nth-last-of-type(1) {
+				margin-bottom: 0;
+			}
+
+			li.selected:before {
+				background-color: var(--uui-color-current);
+				border-radius: 0 4px 4px 0;
+				bottom: 8px;
+				content: '';
+				left: 0;
+				pointer-events: none;
+				position: absolute;
+				top: 8px;
+				width: 4px;
+				z-index: 1;
+			}
+
+			.variant-selector-switch-button {
+				display: flex;
+				align-items: center;
+				border: none;
+				background: transparent;
+				color: var(--uui-color-current-contrast);
+				padding: 6px 20px;
+				font-weight: bold;
+				width: 100%;
+				text-align: left;
+				font-size: 14px;
+				cursor: pointer;
+				border-bottom: 1px solid var(--uui-color-divider-standalone);
+				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
+			}
+
+			.variant-selector-switch-button:hover {
+				background: var(--uui-palette-sand);
+				color: var(--uui-palette-space-cadet-light);
+			}
+
+			.variant-selector-switch-button i {
+				font-weight: normal;
+			}
+
+			.variant-selector-switch-button.add-mode {
+				position: relative;
+				color: var(--uui-palette-dusty-grey-dark);
+			}
+
+			.variant-selector-switch-button.add-mode:after {
+				border: 2px dashed var(--uui-color-divider-standalone);
+				bottom: 0;
+				content: '';
+				left: 0;
+				margin: 2px;
+				pointer-events: none;
+				position: absolute;
+				right: 0;
+				top: 0;
+				z-index: 1;
+			}
+
+			.add-icon {
+				font-size: 12px;
+				margin-right: 12px;
+			}
+
+			.variant-selector-split-view {
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 1px;
+			}
+
+			.variant-selector-state {
+				color: var(--uui-palette-malibu-dimmed);
+				font-size: 12px;
+				font-weight: normal;
+			}
+		`,
+	];
 }
 
 export default UmbVariantSelectorElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variantable-property/variantable-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variantable-property/variantable-property.element.ts
index 0ec872fc48..0705a28a7a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variantable-property/variantable-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/variantable-property/variantable-property.element.ts
@@ -9,14 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-variantable-property')
 export class UmbVariantablePropertyElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-		`,
-	];
+	
 
 	private _property?: PropertyTypeResponseModelBaseModel | undefined;
 	@property({ type: Object, attribute: false })
@@ -69,6 +62,15 @@ export class UmbVariantablePropertyElement extends UmbLitElement {
 			.property=${this._property}
 			.propertyVariantId=${this._propertyVariantId}></umb-property-type-based-property>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
index b7965d8fe5..123a035fc3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts
@@ -22,28 +22,7 @@ import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backe
 
 @customElement('umb-workspace-property')
 export class UmbWorkspacePropertyElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-			}
-
-			p {
-				color: var(--uui-color-text-alt);
-			}
-
-			#property-action-menu {
-				opacity: 0;
-			}
-
-			#layout:focus-within #property-action-menu,
-			#layout:hover #property-action-menu,
-			#property-action-menu[open] {
-				opacity: 1;
-			}
-		`,
-	];
+	
 
 	/**
 	 * Label. Name of the property
@@ -264,6 +243,29 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
 					.value="${this._value}"></umb-property-action-menu>`
 			: ''}`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+			}
+
+			p {
+				color: var(--uui-color-text-alt);
+			}
+
+			#property-action-menu {
+				opacity: 0;
+			}
+
+			#layout:focus-within #property-action-menu,
+			#layout:hover #property-action-menu,
+			#property-action-menu[open] {
+				opacity: 1;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts
index a3838dac24..88916fa0ab 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action-menu/workspace-action-menu.element.ts
@@ -7,29 +7,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-workspace-action-menu')
 export class UmbWorkspaceActionMenuElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#action-menu-popover {
-				display: block;
-			}
-			#action-menu-dropdown {
-				overflow: hidden;
-				z-index: -1;
-				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				width: 250px;
-				position: absolute;
-				right: 5px;
-				height: auto;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _actionMenuIsOpen = false;
@@ -90,6 +68,30 @@ export class UmbWorkspaceActionMenuElement extends UmbLitElement {
 			</div>`
 			: '';
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#action-menu-popover {
+				display: block;
+			}
+			#action-menu-dropdown {
+				overflow: hidden;
+				z-index: -1;
+				background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+				width: 250px;
+				position: absolute;
+				right: 5px;
+				height: auto;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts
index c06284efee..153e427dcd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-action/workspace-action.element.ts
@@ -9,7 +9,7 @@ import type { ManifestWorkspaceAction } from '@umbraco-cms/backoffice/extensions
 
 @customElement('umb-workspace-action')
 export class UmbWorkspaceActionElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@state()
 	private _buttonState?: UUIButtonState;
@@ -52,6 +52,8 @@ export class UmbWorkspaceActionElement extends UmbLitElement {
 				.state="${this._buttonState}"></uui-button>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbWorkspaceActionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts
index 87a3a06857..08558273e5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-content/views/collection/workspace-view-collection.element.ts
@@ -15,15 +15,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-workspace-view-collection')
 export class UmbWorkspaceViewCollectionElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	public manifest!: ManifestWorkspaceViewCollection;
 
@@ -62,6 +54,16 @@ export class UmbWorkspaceViewCollectionElement extends UmbLitElement {
 	render() {
 		return html`<umb-collection entity-type=${ifDefined(this._workspaceContext?.getEntityType())}></umb-collection>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewCollectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
index 525a5ede25..2c706cb5b9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-footer-layout/workspace-footer-layout.element.ts
@@ -17,20 +17,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 // TODO: stop naming this something with layout. as its not just an layout. it hooks up with extensions.
 @customElement('umb-workspace-footer-layout')
 export class UmbWorkspaceFooterLayoutElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-			}
-
-			umb-extension-slot[slot='actions'] {
-				display: flex;
-				gap: var(--uui-size-space-2);
-			}
-		`,
-	];
+	
 
 	private _alias = '';
 	/**
@@ -67,6 +54,21 @@ export class UmbWorkspaceFooterLayoutElement extends UmbLitElement {
 			</umb-footer-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+			}
+
+			umb-extension-slot[slot='actions'] {
+				display: flex;
+				gap: var(--uui-size-space-2);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
index fe1ca13fe1..f3d7567a48 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-layout/workspace-layout.element.ts
@@ -32,37 +32,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 // TODO: stop naming this something with layout. as its not just an layout. it hooks up with extensions.
 @customElement('umb-workspace-layout')
 export class UmbWorkspaceLayoutElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			#router-slot {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			uui-tab-group {
-				--uui-tab-divider: var(--uui-color-border);
-				border-left: 1px solid var(--uui-color-border);
-				border-right: 1px solid var(--uui-color-border);
-			}
-
-			umb-extension-slot[slot='actions'] {
-				display: flex;
-				gap: var(--uui-size-space-2);
-			}
-		`,
-	];
+	
 
 	@property()
 	public headline = '';
@@ -220,6 +190,38 @@ export class UmbWorkspaceLayoutElement extends UmbLitElement {
 				: nothing}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#router-slot {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			uui-input {
+				width: 100%;
+			}
+
+			uui-tab-group {
+				--uui-tab-divider: var(--uui-color-border);
+				border-left: 1px solid var(--uui-color-border);
+				border-right: 1px solid var(--uui-color-border);
+			}
+
+			umb-extension-slot[slot='actions'] {
+				display: flex;
+				gap: var(--uui-size-space-2);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.element.ts
index be15f2a2c5..2ae60b30db 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-variant/workspace-variant.element.ts
@@ -18,25 +18,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-workspace-variant')
 export class UmbWorkspaceVariantContentElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			:host(:not(:last-child)) {
-				border-right: 1px solid var(--uui-color-border);
-			}
-
-			#header {
-				margin: 0 var(--uui-size-layout-1);
-				flex: 1 1 auto;
-			}
-		`,
-	];
+	
 
 	// TODO: stop prop drilling this alias. Instead use the workspace context.
 	@property()
@@ -73,6 +55,26 @@ export class UmbWorkspaceVariantContentElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			:host(:not(:last-child)) {
+				border-right: 1px solid var(--uui-color-border);
+			}
+
+			#header {
+				margin: 0 var(--uui-size-layout-1);
+				flex: 1 1 auto;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceVariantContentElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace.element.ts
index 739193c890..6b0ea35263 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace.element.ts
@@ -6,7 +6,7 @@ import { ManifestWorkspace } from '@umbraco-cms/backoffice/extensions-registry';
 
 @customElement('umb-workspace')
 export class UmbWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@property({ type: String, attribute: 'entity-type' })
 	entityType = '';
@@ -17,6 +17,8 @@ export class UmbWorkspaceElement extends UmbLitElement {
 			type="workspace"
 			.filter=${(manifest: ManifestWorkspace) => manifest.meta.entityType === this.entityType}></umb-extension-slot>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
index f710783f81..345e0e16b7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/confirm/confirm-modal.element.ts
@@ -6,7 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-confirm-modal')
 export class UmbConfirmModalElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler<UmbConfirmModalData, UmbConfirmModalResult>;
@@ -38,6 +38,8 @@ export class UmbConfirmModalElement extends UmbLitElement {
 			</uui-dialog-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbConfirmModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
index 6f38cc48dc..ce7de0f359 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/embedded-media/embedded-media-modal.element.ts
@@ -26,43 +26,7 @@ interface UmbEmbeddedMediaModalModel {
 
 @customElement('umb-embedded-media-modal')
 export class UmbEmbeddedMediaModalElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-				--uui-button-border-radius: 0;
-			}
-
-			.sr-only {
-				clip: rect(0, 0, 0, 0);
-				border: 0;
-				height: 1px;
-				margin: -1px;
-				overflow: hidden;
-				padding: 0;
-				position: absolute;
-				width: 1px;
-			}
-
-			umb-workspace-property-layout:first-child {
-				padding-top: 0;
-			}
-
-			umb-workspace-property-layout:last-child {
-				padding-bottom: 0;
-			}
-
-			p {
-				margin-bottom: 0;
-			}
-		`,
-	];
+	
 
 	#loading = false;
 	#embedResult!: OEmbedResult;
@@ -266,6 +230,44 @@ export class UmbEmbeddedMediaModalElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			h3 {
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
+			}
+
+			uui-input {
+				width: 100%;
+				--uui-button-border-radius: 0;
+			}
+
+			.sr-only {
+				clip: rect(0, 0, 0, 0);
+				border: 0;
+				height: 1px;
+				margin: -1px;
+				overflow: hidden;
+				padding: 0;
+				position: absolute;
+				width: 1px;
+			}
+
+			umb-workspace-property-layout:first-child {
+				padding-top: 0;
+			}
+
+			umb-workspace-property-layout:last-child {
+				padding-bottom: 0;
+			}
+
+			p {
+				margin-bottom: 0;
+			}
+		`,
+	];
 }
 
 export default UmbEmbeddedMediaModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/folder/folder-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/folder/folder-modal.element.ts
index eb9986ff11..4af50594f8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/folder/folder-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/folder/folder-modal.element.ts
@@ -11,14 +11,7 @@ import { ManifestBase } from '@umbraco-cms/backoffice/extensions-registry';
 
 @customElement('umb-folder-modal')
 export class UmbFolderModalElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#name {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler<UmbFolderModalData, UmbFolderModalResult>;
@@ -166,6 +159,15 @@ export class UmbFolderModalElement extends UmbLitElement {
 			</umb-body-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#name {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbFolderModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
index 7325caf339..3c94113484 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/link-picker/link-picker-modal.element.ts
@@ -14,39 +14,7 @@ import { buildUdi, getKeyFromUdi } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-link-picker-modal')
 export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPickerModalData, UmbLinkPickerModalResult> {
-	static styles = [
-		UUITextStyles,
-		css`
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin-bottom: var(--uui-size-space-3);
-			}
-
-			uui-input,
-			uui-toggle,
-			uui-label {
-				width: 100%;
-			}
-
-			uui-input,
-			uui-label {
-				margin-bottom: var(--uui-size-space-6);
-			}
-
-			.url-link {
-				display: flex;
-				gap: var(--uui-size-space-6);
-			}
-			.url-link span {
-				flex: 1 1 0px;
-			}
-
-			#select-media {
-				display: block;
-			}
-		`,
-	];
+	
 
 	@state()
 	_selectedKey?: string;
@@ -202,6 +170,40 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 				.selection=${[this._selectedKey ?? '']}
 				selectable></umb-tree>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin-bottom: var(--uui-size-space-3);
+			}
+
+			uui-input,
+			uui-toggle,
+			uui-label {
+				width: 100%;
+			}
+
+			uui-input,
+			uui-label {
+				margin-bottom: var(--uui-size-space-6);
+			}
+
+			.url-link {
+				display: flex;
+				gap: var(--uui-size-space-6);
+			}
+			.url-link span {
+				flex: 1 1 0px;
+			}
+
+			#select-media {
+				display: block;
+			}
+		`,
+	];
 }
 
 export default UmbLinkPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
index 3e345aad1e..20deb3097d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/property-settings/property-settings-modal.element.ts
@@ -14,102 +14,7 @@ import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 
 @customElement('umb-property-settings-modal')
 export class UmbPropertySettingsModalElement extends UmbModalBaseElement<object, UmbPropertySettingsModalResult> {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				color: var(--uui-color-text);
-			}
-			#content {
-				padding: var(--uui-size-layout-1);
-			}
-			#appearances {
-				display: flex;
-				gap: var(--uui-size-layout-1);
-				max-width: 350px;
-				margin: 0 auto;
-			}
-			.appearance {
-				position: relative;
-				display: flex;
-				border: 2px solid var(--uui-color-border-standalone);
-				padding: var(--uui-size-space-4) var(--uui-size-space-5);
-				align-items: center;
-				border-radius: 6px;
-				opacity: 0.8;
-				flex-direction: column;
-				justify-content: space-between;
-				gap: var(--uui-size-space-3);
-			}
-			.appearance-label {
-				font-size: 0.8rem;
-				line-height: 1;
-			}
-			.appearance.selected .appearance-label {
-				font-weight: bold;
-			}
-			.appearance:not(.selected):hover {
-				border-color: var(--uui-color-border-emphasis);
-				cursor: pointer;
-				opacity: 1;
-			}
-			.appearance.selected {
-				border-color: var(--uui-color-selected);
-				opacity: 1;
-			}
-			.appearance.selected::after {
-				content: '';
-				position: absolute;
-				inset: 0;
-				border-radius: 6px;
-				opacity: 0.1;
-				background-color: var(--uui-color-selected);
-			}
-			.appearance.left {
-				flex-grow: 1;
-			}
-			.appearance.top {
-				flex-shrink: 1;
-			}
-			.appearance svg {
-				display: flex;
-				width: 100%;
-				color: var(--uui-color-text);
-			}
-			hr {
-				border: none;
-				border-top: 1px solid var(--uui-color-divider);
-				margin-top: var(--uui-size-space-6);
-				margin-bottom: var(--uui-size-space-5);
-			}
-			uui-input {
-				width: 100%;
-			}
-			#alias-lock {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				cursor: pointer;
-			}
-			#alias-lock uui-icon {
-				margin-bottom: 2px;
-			}
-			#property-editor-ui-picker {
-				width: 100%;
-				--uui-button-padding-top-factor: 4;
-				--uui-button-padding-bottom-factor: 4;
-			}
-			.container {
-				display: flex;
-				flex-direction: column;
-			}
-			uui-form,
-			form {
-				display: block;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	@state() private _selectedPropertyEditorUI?: ManifestPropertyEditorUI;
 	@state() private _selectedPropertyEditorUIAlias = '';
@@ -428,6 +333,103 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement<object,
 				  `
 				: nothing} `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				color: var(--uui-color-text);
+			}
+			#content {
+				padding: var(--uui-size-layout-1);
+			}
+			#appearances {
+				display: flex;
+				gap: var(--uui-size-layout-1);
+				max-width: 350px;
+				margin: 0 auto;
+			}
+			.appearance {
+				position: relative;
+				display: flex;
+				border: 2px solid var(--uui-color-border-standalone);
+				padding: var(--uui-size-space-4) var(--uui-size-space-5);
+				align-items: center;
+				border-radius: 6px;
+				opacity: 0.8;
+				flex-direction: column;
+				justify-content: space-between;
+				gap: var(--uui-size-space-3);
+			}
+			.appearance-label {
+				font-size: 0.8rem;
+				line-height: 1;
+			}
+			.appearance.selected .appearance-label {
+				font-weight: bold;
+			}
+			.appearance:not(.selected):hover {
+				border-color: var(--uui-color-border-emphasis);
+				cursor: pointer;
+				opacity: 1;
+			}
+			.appearance.selected {
+				border-color: var(--uui-color-selected);
+				opacity: 1;
+			}
+			.appearance.selected::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				border-radius: 6px;
+				opacity: 0.1;
+				background-color: var(--uui-color-selected);
+			}
+			.appearance.left {
+				flex-grow: 1;
+			}
+			.appearance.top {
+				flex-shrink: 1;
+			}
+			.appearance svg {
+				display: flex;
+				width: 100%;
+				color: var(--uui-color-text);
+			}
+			hr {
+				border: none;
+				border-top: 1px solid var(--uui-color-divider);
+				margin-top: var(--uui-size-space-6);
+				margin-bottom: var(--uui-size-space-5);
+			}
+			uui-input {
+				width: 100%;
+			}
+			#alias-lock {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+			}
+			#alias-lock uui-icon {
+				margin-bottom: 2px;
+			}
+			#property-editor-ui-picker {
+				width: 100%;
+				--uui-button-padding-top-factor: 4;
+				--uui-button-padding-bottom-factor: 4;
+			}
+			.container {
+				display: flex;
+				flex-direction: column;
+			}
+			uui-form,
+			form {
+				display: block;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbPropertySettingsModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/section-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/section-picker-modal.element.ts
index 3200aef2b3..38b4cee6a4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/section-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/modals/section-picker/section-picker-modal.element.ts
@@ -7,6 +7,45 @@ import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registr
 
 @customElement('umb-section-picker-modal')
 export class UmbSectionPickerModalElement extends UmbModalElementPickerBase<ManifestSection> {
+	
+
+	@state()
+	private _sections: Array<ManifestSection> = [];
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		umbExtensionsRegistry.extensionsOfType('section').subscribe((sections: Array<ManifestSection>) => {
+			this._sections = sections;
+		});
+	}
+
+	render() {
+		return html`
+			<umb-workspace-layout headline="Select sections">
+				<uui-box>
+					<uui-input label="search"></uui-input>
+					<hr />
+					<div id="item-list">
+						${this._sections.map(
+							(item) => html`
+								<div
+									@click=${() => this.handleSelection(item.alias)}
+									@keydown=${(e: KeyboardEvent) => this._handleKeydown(e, item.alias)}
+									class=${this.isSelected(item.alias) ? 'item selected' : 'item'}>
+									<span>${item.meta.label}</span>
+								</div>
+							`
+						)}
+					</div>
+				</uui-box>
+				<div slot="actions">
+					<uui-button label="Close" @click=${this.close}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this.submit}></uui-button>
+				</div>
+			</umb-workspace-layout>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -52,43 +91,6 @@ export class UmbSectionPickerModalElement extends UmbModalElementPickerBase<Mani
 			}
 		`,
 	];
-
-	@state()
-	private _sections: Array<ManifestSection> = [];
-
-	connectedCallback(): void {
-		super.connectedCallback();
-		umbExtensionsRegistry.extensionsOfType('section').subscribe((sections: Array<ManifestSection>) => {
-			this._sections = sections;
-		});
-	}
-
-	render() {
-		return html`
-			<umb-workspace-layout headline="Select sections">
-				<uui-box>
-					<uui-input label="search"></uui-input>
-					<hr />
-					<div id="item-list">
-						${this._sections.map(
-							(item) => html`
-								<div
-									@click=${() => this.handleSelection(item.alias)}
-									@keydown=${(e: KeyboardEvent) => this._handleKeydown(e, item.alias)}
-									class=${this.isSelected(item.alias) ? 'item selected' : 'item'}>
-									<span>${item.meta.label}</span>
-								</div>
-							`
-						)}
-					</div>
-				</uui-box>
-				<div slot="actions">
-					<uui-button label="Close" @click=${this.close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this.submit}></uui-button>
-				</div>
-			</umb-workspace-layout>
-		`;
-	}
 }
 
 export default UmbSectionPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts
index ff51de4e4d..566b7bc555 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action-menu/property-action-menu.element.ts
@@ -12,36 +12,7 @@ import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-property-action-menu')
 export class UmbPropertyActionMenuElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			#popover {
-				width: auto;
-			}
-
-			#more-symbol {
-				font-size: 0.6em;
-			}
-
-			#popover-trigger {
-				--uui-button-padding-top-factor: 0.5;
-				--uui-button-padding-bottom-factor: 0.1;
-				--uui-button-height: 18px;
-				--uui-button-border-radius: 6px;
-			}
-
-			#dropdown {
-				background-color: var(--uui-color-surface);
-				border-radius: var(--uui-border-radius);
-				width: 100%;
-				height: 100%;
-				box-sizing: border-box;
-				box-shadow: var(--uui-shadow-depth-3);
-				min-width: 200px;
-				color: var(--uui-color-text);
-			}
-		`,
-	];
+	
 
 	// TODO: we need to investigate context api vs values props and events
 	@property()
@@ -123,4 +94,35 @@ export class UmbPropertyActionMenuElement extends UmbLitElement {
 			  `
 			: '';
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			#popover {
+				width: auto;
+			}
+
+			#more-symbol {
+				font-size: 0.6em;
+			}
+
+			#popover-trigger {
+				--uui-button-padding-top-factor: 0.5;
+				--uui-button-padding-bottom-factor: 0.1;
+				--uui-button-height: 18px;
+				--uui-button-border-radius: 6px;
+			}
+
+			#dropdown {
+				background-color: var(--uui-color-surface);
+				border-radius: var(--uui-border-radius);
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				box-shadow: var(--uui-shadow-depth-3);
+				min-width: 200px;
+				color: var(--uui-color-text);
+			}
+		`,
+	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action/property-action.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action/property-action.element.ts
index 22aa520e24..766d604387 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action/property-action.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-actions/shared/property-action/property-action.element.ts
@@ -8,7 +8,7 @@ import type { ManifestPropertyAction } from '@umbraco-cms/backoffice/extensions-
 
 @customElement('umb-property-action')
 export class UmbPropertyActionElement extends LitElement implements UmbPropertyAction {
-	static styles: CSSResultGroup = [UUITextStyles];
+	
 
 	private _propertyAction?: ManifestPropertyAction;
 	@property({ type: Object })
@@ -43,4 +43,6 @@ export class UmbPropertyActionElement extends LitElement implements UmbPropertyA
 	render() {
 		return html`${this._element}`;
 	}
+	
+	static styles: CSSResultGroup = [UUITextStyles];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
index a925a8299a..b47006b2d2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-creator/property-creator.element.ts
@@ -6,7 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-property-creator')
 export class UmbPropertyCreatorElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	#modalContext?: UmbModalContext;
 
@@ -30,6 +30,8 @@ export class UmbPropertyCreatorElement extends UmbLitElement {
 			<uui-button look="outline" @click=${this.#onAddProperty}> Add property </uui-button>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbPropertyCreatorElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
index 62dfc7906e..eaf2856fa2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
@@ -18,69 +18,7 @@ interface GroupedPropertyEditorUIs {
 }
 @customElement('umb-property-editor-ui-picker-modal')
 export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#filter {
-				width: 100%;
-				margin-bottom: var(--uui-size-space-4);
-			}
-
-			#filter-icon {
-				padding-left: var(--uui-size-space-2);
-			}
-
-			#item-grid {
-				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-				margin: 0;
-				padding: 0;
-				grid-gap: var(--uui-size-space-4);
-			}
-
-			#item-grid .item {
-				display: flex;
-				align-items: flex-start;
-				justify-content: center;
-				list-style: none;
-				height: 100%;
-				border: 1px solid transparent;
-				border-radius: var(--uui-border-radius);
-			}
-
-			#item-grid .item:hover {
-				background: var(--uui-color-surface-emphasis);
-				color: var(--uui-color-interactive-emphasis);
-				cursor: pointer;
-			}
-
-			#item-grid .item[selected] button {
-				background: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-
-			#item-grid .item button {
-				background: none;
-				border: none;
-				cursor: pointer;
-				padding: var(--uui-size-space-3);
-				display: flex;
-				align-items: center;
-				flex-direction: column;
-				justify-content: center;
-				font-size: 0.8rem;
-				height: 100%;
-				width: 100%;
-				color: var(--uui-color-interactive);
-				border-radius: var(--uui-border-radius);
-			}
-
-			#item-grid .item .icon {
-				font-size: 2em;
-				margin-bottom: var(--uui-size-space-2);
-			}
-		`,
-	];
+	
 
 	@property({ type: Object })
 	data?: UmbPropertyEditorUIPickerModalData;
@@ -193,6 +131,70 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
 			)}
 		</ul>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#filter {
+				width: 100%;
+				margin-bottom: var(--uui-size-space-4);
+			}
+
+			#filter-icon {
+				padding-left: var(--uui-size-space-2);
+			}
+
+			#item-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+				margin: 0;
+				padding: 0;
+				grid-gap: var(--uui-size-space-4);
+			}
+
+			#item-grid .item {
+				display: flex;
+				align-items: flex-start;
+				justify-content: center;
+				list-style: none;
+				height: 100%;
+				border: 1px solid transparent;
+				border-radius: var(--uui-border-radius);
+			}
+
+			#item-grid .item:hover {
+				background: var(--uui-color-surface-emphasis);
+				color: var(--uui-color-interactive-emphasis);
+				cursor: pointer;
+			}
+
+			#item-grid .item[selected] button {
+				background: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+
+			#item-grid .item button {
+				background: none;
+				border: none;
+				cursor: pointer;
+				padding: var(--uui-size-space-3);
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+				justify-content: center;
+				font-size: 0.8rem;
+				height: 100%;
+				width: 100%;
+				color: var(--uui-color-interactive);
+				border-radius: var(--uui-border-radius);
+			}
+
+			#item-grid .item .icon {
+				font-size: 2em;
+				margin-bottom: var(--uui-size-space-2);
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUIPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
index c53387f381..2a4a483d93 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
@@ -17,7 +17,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-config')
 export class UmbPropertyEditorConfigElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	/**
 	 * Property Editor UI Alias. The element will render configuration for a Property Editor UI with this alias.
@@ -122,6 +122,8 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement {
 				: html`<div>No configuration</div>`}
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorConfigElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts
index 6d341fa44d..364a0600f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-block-grid-block-configuration')
 export class UmbPropertyEditorUIBlockGridBlockConfigurationElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUIBlockGridBlockConfigurationElement extends UmbLi
 	render() {
 		return html`<div>umb-property-editor-ui-block-grid-block-configuration</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIBlockGridBlockConfigurationElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts
index c47dfb5c34..1d6ddf5022 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/group-configuration/property-editor-ui-block-grid-group-configuration.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-block-grid-group-configuration')
 export class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLi
 	render() {
 		return html`<div>umb-property-editor-ui-block-grid-group-configuration</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIBlockGridGroupConfigurationElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts
index 419f0f5481..910174b9ba 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/config/stylesheet-picker/property-editor-ui-block-grid-stylesheet-picker.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-block-grid-stylesheet-picker')
 export class UmbPropertyEditorUIBlockGridStylesheetPickerElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUIBlockGridStylesheetPickerElement extends UmbLitE
 	render() {
 		return html`<div>umb-property-editor-ui-block-grid-stylesheet-picker</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIBlockGridStylesheetPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid-inner-test.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid-inner-test.element.ts
index 682577eec5..346b7aba1c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid-inner-test.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid-inner-test.element.ts
@@ -10,7 +10,7 @@ import type { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-
  */
 @customElement('umb-property-editor-ui-block-grid-inner-test')
 export class UmbPropertyEditorUIBlockGridInnerTestElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ type: String })
 	public name = '';
@@ -76,6 +76,8 @@ export class UmbPropertyEditorUIBlockGridInnerTestElement extends UmbLitElement
 				}}></umb-router-slot>
 		</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIBlockGridInnerTestElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
index 774bdc20b0..373c103153 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-grid/property-editor-ui-block-grid.element.ts
@@ -14,7 +14,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-block-grid')
 export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	private _variantContext?: typeof UMB_WORKSPACE_VARIANT_CONTEXT_TOKEN.TYPE;
 
@@ -110,6 +110,8 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 			  </div>`
 			: 'loading...';
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIBlockGridElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts
index 6c207dd808..3868737e5e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-block-list-block-configuration')
 export class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLi
 	render() {
 		return html`<div>umb-property-editor-ui-block-list-block-configuration</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIBlockListBlockConfigurationElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
index 8fc617b7f7..812dad8b2e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/block-list/property-editor-ui-block-list.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-block-list')
 export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
 	render() {
 		return html`<div>umb-property-editor-ui-block-list</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIBlockListElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
index b161988d4d..4a7d1be5d6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/checkbox-list/property-editor-ui-checkbox-list.element.ts
@@ -11,7 +11,7 @@ import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/
  */
 @customElement('umb-property-editor-ui-checkbox-list')
 export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	#value: Array<string> = [];
 	@property({ type: Array })
@@ -57,6 +57,8 @@ export class UmbPropertyEditorUICheckboxListElement extends UmbLitElement implem
 			.selectedIds="${this.#value}"
 			.list="${this._list}"></umb-input-checkbox-list>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUICheckboxListElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts
index 41ef8e31a9..42df22a682 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/bulk-action-permissions/property-editor-ui-collection-view-bulk-action-permissions.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-collection-view-bulk-action-permissions')
 export class UmbPropertyEditorUICollectionViewBulkActionPermissionsElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUICollectionViewBulkActionPermissionsElement exten
 	render() {
 		return html`<div>umb-property-editor-ui-collection-view-bulk-action-permissions</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUICollectionViewBulkActionPermissionsElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts
index 2789e8147a..c4418b8592 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/column-configuration/property-editor-ui-collection-view-column-configuration.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-collection-view-column-configuration')
 export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUICollectionViewColumnConfigurationElement extends
 	render() {
 		return html`<div>umb-property-editor-ui-collection-view-column-configuration</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUICollectionViewColumnConfigurationElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts
index 6576df1792..268e306578 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-collection-view-layout-configuration')
 export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends
 	render() {
 		return html`<div>umb-property-editor-ui-collection-view-layout-configuration</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUICollectionViewLayoutConfigurationElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts
index 5622a5457d..528104ba4e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-collection-view-order-by')
 export class UmbPropertyEditorUICollectionViewOrderByElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUICollectionViewOrderByElement extends UmbLitEleme
 	render() {
 		return html`<div>umb-property-editor-ui-collection-view-order-by</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUICollectionViewOrderByElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts
index 9899891891..6db920a084 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/collection-view/property-editor-ui-collection-view.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-collection-view')
 export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUICollectionViewElement extends UmbLitElement {
 	render() {
 		return html`<div>umb-property-editor-ui-collection-view</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUICollectionViewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
index 7c9be4925f..436e7a4575 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
@@ -12,7 +12,7 @@ import type { SwatchDetails } from '@umbraco-cms/backoffice/models';
  */
 @customElement('umb-property-editor-ui-color-picker')
 export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -43,6 +43,8 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 			.swatches="${this._swatches}"
 			.showLabels="${this._showLabels}"></umb-input-color-picker>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIColorPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
index 7b4eb5472d..2efa0b7ce1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
@@ -12,7 +12,7 @@ import { PropertyEditorConfigDefaultData } from '@umbraco-cms/backoffice/extensi
  */
 @customElement('umb-property-editor-ui-date-picker')
 export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	private _value?: Date;
 	private _valueString?: string;
@@ -81,6 +81,8 @@ export class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implemen
 			.value=${this._valueString}
 			label="Pick a date or time"></uui-input>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIDatePickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
index 4079e02fde..ce103b1e32 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-dropdown')
 export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
 	render() {
 		return html`<div>umb-property-editor-ui-dropdown</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIDropdownElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
index a24e470c38..d6fe2ba4c3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
@@ -11,7 +11,7 @@ import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/
  */
 @customElement('umb-property-editor-ui-eye-dropper')
 export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -42,6 +42,8 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen
 			.swatches=${this._swatches}
 			.opacity="${this._opacity}"></umb-input-eye-dropper>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIEyeDropperElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
index aebdeeb989..6b449cfd86 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/icon-picker/property-editor-ui-icon-picker.element.ts
@@ -10,7 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-icon-picker')
 export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -42,6 +42,8 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implemen
 			</uui-button>
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIIconPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
index c11b93d848..50b9ece7fa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-cropper/property-editor-ui-image-cropper.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-image-cropper')
 export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIImageCropperElement extends UmbLitElement implem
 	render() {
 		return html`<div>umb-property-editor-ui-image-cropper</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIImageCropperElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
index d6cc3592b4..214c373e3f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
@@ -12,7 +12,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorElement
 {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -23,6 +23,8 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 	render() {
 		return html`<div>umb-property-editor-ui-image-crops-configuration</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIImageCropsConfigurationElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts
index 5cc1faa69e..02b207b9a2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/label/property-editor-ui-label.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-label')
 export class UmbPropertyEditorUILabelElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUILabelElement extends UmbLitElement implements Um
 	render() {
 		return html`<div>umb-property-editor-ui-label</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUILabelElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
index d403592382..8be60cda1c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-markdown-editor')
 export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
 	render() {
 		return html`<div>umb-property-editor-ui-markdown-editor</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIMarkdownEditorElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
index 770289b8fe..2d64cfa210 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-member-group-picker')
 export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 	render() {
 		return html`<div>umb-property-editor-ui-member-group-picker</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIMemberGroupPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
index 8c5c2b5038..b704333f48 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-member-picker')
 export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 	render() {
 		return html`<div>umb-property-editor-ui-member-picker</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIMemberPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index e4111187c0..86b05cdce5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -14,7 +14,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-multi-url-picker')
 export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ type: Array })
 	value: UmbLinkPickerLink[] = [];
@@ -87,6 +87,8 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement impl
 			.min=${this._minNumber}
 			.urls="${this.value}"></umb-input-multi-url-picker>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIMultiUrlPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
index cbc21787b0..37398f4397 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string-item/input-multiple-text-string-item.element.ts
@@ -13,25 +13,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-input-multiple-text-string-item')
 export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				align-items: center;
-				margin-bottom: var(--uui-size-space-3);
-				gap: var(--uui-size-space-3);
-			}
-
-			#validation-message {
-				flex: 1;
-			}
-
-			#input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	/**
 	 * Disables the input
@@ -139,6 +121,26 @@ export class UmbInputMultipleTextStringItemElement extends FormControlMixin(UmbL
 				  </uui-button>`}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				margin-bottom: var(--uui-size-space-3);
+				gap: var(--uui-size-space-3);
+			}
+
+			#validation-message {
+				flex: 1;
+			}
+
+			#input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbInputMultipleTextStringItemElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
index f0dc741e85..1755fc16b0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/input-multiple-text-string/input-multiple-text-string.element.ts
@@ -18,14 +18,7 @@ export interface MultipleTextStringValueItem {
  */
 @customElement('umb-input-multiple-text-string')
 export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitElement) {
-	static styles = [
-		UUITextStyles,
-		css`
-			#action {
-				display: block;
-			}
-		`,
-	];
+	
 
 	/**
 	 * This is a minimum amount of selected items in this input.
@@ -203,6 +196,15 @@ export class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitEl
 						?disabled=${this.disabled}></uui-button>`}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#action {
+				display: block;
+			}
+		`,
+	];
 }
 
 export default UmbInputMultipleTextStringElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
index 731cc6c56a..faa0c90cad 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts
@@ -16,7 +16,7 @@ type ValueType = {
  */
 @customElement('umb-property-editor-ui-number-range')
 export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ type: Object })
 	private _value: ValueType = { min: undefined, max: undefined };
@@ -51,6 +51,8 @@ export class UmbPropertyEditorUINumberRangeElement extends UmbLitElement impleme
 			.maxValue=${this._maxValue}
 			@change=${this._onChange}></umb-input-number-range>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUINumberRangeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts
index 3a8e51db01..8bcabdce57 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number/property-editor-ui-number.element.ts
@@ -6,14 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-property-editor-ui-number')
 export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@property()
 	value = '';
@@ -29,6 +22,15 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 	render() {
 		return html`<uui-input .value=${this.value} type="number" @input=${this.onInput}></uui-input>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUINumberElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
index 01ada182d8..2326a65f3c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/order-direction/property-editor-ui-order-direction.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-order-direction')
 export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement impl
 	render() {
 		return html`<div>umb-property-editor-ui-order-direction</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIOrderDirectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
index 562f5ca98b..7a30aad0fd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-overlay-size')
 export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIOverlaySizeElement extends UmbLitElement impleme
 	render() {
 		return html`<div>umb-property-editor-ui-overlay-size</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIOverlaySizeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
index 2860ec351a..51fa7e0288 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/radio-button-list/property-editor-ui-radio-button-list.element.ts
@@ -12,7 +12,7 @@ import type { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/
  */
 @customElement('umb-property-editor-ui-radio-button-list')
 export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	#value = '';
 	@property({ type: String })
@@ -59,6 +59,8 @@ export class UmbPropertyEditorUIRadioButtonListElement extends UmbLitElement imp
 			.selectedKey="${this.#value}"
 			.list="${this._list}"></umb-input-radio-button-list>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIRadioButtonListElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts
index 1e9e8d1fc0..5e8dfc75df 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/slider/property-editor-ui-slider.element.ts
@@ -11,7 +11,7 @@ import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backe
  */
 @customElement('umb-property-editor-ui-slider')
 export class UmbPropertyEditorUISliderElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value: {
@@ -81,6 +81,8 @@ export class UmbPropertyEditorUISliderElement extends UmbLitElement implements U
 			?enable-range=${this._enableRange}
 			@change="${this._onChange}"></umb-input-slider>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUISliderElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts
index 5c6952088a..e038f78551 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-tags-storage-type')
 export class UmbPropertyEditorUITagsStorageTypeElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUITagsStorageTypeElement extends UmbLitElement {
 	render() {
 		return html`<div>umb-property-editor-ui-tags-storage-type</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUITagsStorageTypeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts
index 3d1595083e..1c7255089f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/property-editor-ui-tags.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-tags')
 export class UmbPropertyEditorUITagsElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb
 	render() {
 		return html`<div>umb-property-editor-ui-tags</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUITagsElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
index bd108a43f4..ba23f7cc9c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/property-editor-ui-text-box.element.ts
@@ -6,14 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-property-editor-ui-text-box')
 export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@property()
 	value = '';
@@ -29,6 +22,15 @@ export class UmbPropertyEditorUITextBoxElement extends UmbLitElement implements
 	render() {
 		return html`<uui-input .value=${this.value} type="text" @input=${this.onInput}></uui-input>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUITextBoxElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
index f39539b6a9..5ff0acbb59 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/property-editor-ui-textarea.element.ts
@@ -11,14 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-property-editor-ui-textarea')
 export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-textarea {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@property()
 	value = '';
@@ -44,6 +37,15 @@ export class UmbPropertyEditorUITextareaElement extends UmbLitElement implements
 	render() {
 		return html` <uui-textarea .value=${this.value} @input=${this.onInput}></uui-textarea>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-textarea {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUITextareaElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts
index edcb9a17f0..3a4b68a643 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/config/configuration/property-editor-ui-tiny-mce-configuration.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-tiny-mce-configuration')
 export class UmbPropertyEditorUITinyMceConfigurationElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUITinyMceConfigurationElement extends UmbLitElemen
 	render() {
 		return html`<div>umb-property-editor-ui-tiny-mce-configuration</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUITinyMceConfigurationElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
index 82382969ee..350698fbd5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-tiny-mce')
 export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUITinyMceElement extends UmbLitElement implements
 	render() {
 		return html`<div>umb-property-editor-ui-tiny-mce</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUITinyMceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
index 1b7128c789..ee4552ae78 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/toggle/property-editor-ui-toggle.element.ts
@@ -11,7 +11,7 @@ import { DataTypePropertyPresentationModel } from '@umbraco-cms/backoffice/backe
  */
 @customElement('umb-property-editor-ui-toggle')
 export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = false;
@@ -53,6 +53,8 @@ export class UmbPropertyEditorUIToggleElement extends UmbLitElement implements U
 			?showLabels="${this._showLabels}"
 			@change="${this._onChange}"></umb-input-toggle>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIToggleElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index 39e0f4aba0..b2a222a380 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-tree-picker-start-node')
 export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -19,6 +19,8 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 	render() {
 		return html`<div>umb-property-editor-ui-tree-picker-start-node</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUITreePickerStartNodeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 94f3e28c9d..2054afaf0a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-tree-picker')
 export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	render() {
 		return html`<div>umb-property-editor-ui-tree-picker</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUITreePickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
index 56afaf29ca..794cb99568 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/upload-field/property-editor-ui-upload-field.element.ts
@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-upload-field')
 export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -42,6 +42,8 @@ export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement impleme
 			?multiple="${this._multiple}"
 			.fileExtensions="${this._fileExtensions}"></umb-input-upload-field>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIUploadFieldElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
index 0a24a724b4..f06c25f5bc 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-user-picker')
 export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implemen
 	render() {
 		return html`<div>umb-property-editor-ui-user-picker</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIUserPickerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
index 351777767a..919321a3a4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/value-type/property-editor-ui-value-type.element.ts
@@ -9,7 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-value-type')
 export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implements UmbPropertyEditorElement {
-	static styles = [UUITextStyles];
+	
 
 	@property()
 	value = '';
@@ -20,6 +20,8 @@ export class UmbPropertyEditorUIValueTypeElement extends UmbLitElement implement
 	render() {
 		return html`<div>umb-property-editor-ui-value-type</div>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbPropertyEditorUIValueTypeElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.element.ts
index 1d18dc610a..99f586c419 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/components/file-system-tree-item/file-system-tree-item.element.ts
@@ -22,7 +22,7 @@ umbExtensionsRegistry.register(manifest);
 
 @customElement('umb-file-system-tree-item')
 export class UmbFileSystemTreeItemElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	private _item?: FileSystemTreeItemPresentationModel;
 	@property({ type: Object, attribute: false })
@@ -40,6 +40,8 @@ export class UmbFileSystemTreeItemElement extends UmbLitElement {
 		if (!this.item) return nothing;
 		return html`<umb-tree-item-base></umb-tree-item-base>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace-edit.element.ts
index 69c89804e5..2de5896840 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace-edit.element.ts
@@ -4,6 +4,12 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-stylesheet-workspace-edit')
 export class UmbStylesheetWorkspaceEditElement extends LitElement {
+	
+
+	render() {
+		return html` <umb-workspace-layout alias="Umb.Workspace.Stylesheet">Stylesheet workspace</umb-workspace-layout> `;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -14,10 +20,6 @@ export class UmbStylesheetWorkspaceEditElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html` <umb-workspace-layout alias="Umb.Workspace.Stylesheet">Stylesheet workspace</umb-workspace-layout> `;
-	}
 }
 
 export default UmbStylesheetWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.element.ts
index 0d9d3487c1..b3026afaa7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/stylesheets/workspace/stylesheet-workspace.element.ts
@@ -9,16 +9,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-stylesheet-workspace')
 export class UmbStylesheetWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#workspaceContext = new UmbStylesheetWorkspaceContext(this);
 	#element = new UmbStylesheetWorkspaceEditElement();
@@ -39,6 +30,17 @@ export class UmbStylesheetWorkspaceElement extends UmbLitElement {
 	render() {
 		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbStylesheetWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts
index d0d6e21dfd..68b7f41475 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/templates/workspace/template-workspace.element.ts
@@ -8,30 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-template-workspace')
 export class UmbTemplateWorkspaceElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			umb-code-editor {
-				--editor-height: calc(100vh - 300px);
-			}
-
-			uui-box {
-				margin: 1em;
-				--uui-box-default-padding: 0;
-			}
-
-			uui-input {
-				width: 100%;
-				margin: 1em;
-			}
-		`,
-	];
+	
 
 	public load(entityId: string) {
 		this.#templateWorkspaceContext.load(entityId);
@@ -104,6 +81,31 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
 			</uui-box>
 		</umb-workspace-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			umb-code-editor {
+				--editor-height: calc(100vh - 300px);
+			}
+
+			uui-box {
+				margin: 1em;
+				--uui-box-default-padding: 0;
+			}
+
+			uui-input {
+				width: 100%;
+				margin: 1em;
+			}
+		`,
+	];
 }
 
 export default UmbTemplateWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
index 031192d45b..88f3db2a2d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts
@@ -11,33 +11,7 @@ import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-dashboard-translation-dictionary')
 export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				margin: var(--uui-size-layout-1);
-			}
-
-			#dictionary-top-bar {
-				margin-bottom: var(--uui-size-space-5);
-				display: flex;
-				justify-content: space-between;
-			}
-
-			umb-table {
-				display: inline;
-				padding: 0;
-			}
-
-			umb-empty-state {
-				margin: auto;
-				font-size: var(--uui-size-6);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _tableConfig: UmbTableConfig = {
@@ -192,6 +166,34 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 				() => html`<umb-empty-state>There were no dictionary items found.</umb-empty-state>`
 			)}`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				margin: var(--uui-size-layout-1);
+			}
+
+			#dictionary-top-bar {
+				margin-bottom: var(--uui-size-space-5);
+				display: flex;
+				justify-content: space-between;
+			}
+
+			umb-table {
+				display: inline;
+				padding: 0;
+			}
+
+			umb-empty-state {
+				margin: auto;
+				font-size: var(--uui-size-6);
+			}
+		`,
+	];
 }
 
 export default UmbDashboardTranslationDictionaryElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
index 6756740c65..93cb03cca0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/create/create-dictionary-modal-layout.element.ts
@@ -10,7 +10,7 @@ export class UmbCreateDictionaryModalElement extends UmbModalBaseElement<
 	UmbCreateDictionaryModalData,
 	UmbCreateDictionaryModalResult
 > {
-	static styles = [UUITextStyles];
+	
 
 	@query('#form')
 	private _form!: HTMLFormElement;
@@ -69,6 +69,8 @@ export class UmbCreateDictionaryModalElement extends UmbModalBaseElement<
 			<uui-button slot="actions" type="button" label="Create" look="primary" @click=${this.#submitForm}></uui-button>
 		</umb-body-layout>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbCreateDictionaryModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
index 9f746ae2e1..4c5b6523a3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/entity-actions/export/export-dictionary-modal.element.ts
@@ -9,7 +9,7 @@ export class UmbExportDictionaryModalElement extends UmbModalBaseElement<
 	UmbExportDictionaryModalData,
 	UmbExportDictionaryModalResult
 > {
-	static styles = [UUITextStyles];
+	
 
 	@query('#form')
 	private _form!: HTMLFormElement;
@@ -47,6 +47,8 @@ export class UmbExportDictionaryModalElement extends UmbModalBaseElement<
 			<uui-button slot="actions" type="button" label="Export" look="primary" @click=${this.#submitForm}></uui-button>
 		</umb-body-layout>`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbExportDictionaryModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace-edit.element.ts
index 0cf2947ecb..e03da52678 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace-edit.element.ts
@@ -8,20 +8,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-dictionary-workspace-edit')
 export class UmbDictionaryWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#header {
-				display: flex;
-				padding: 0 var(--uui-size-layout-1);
-				gap: var(--uui-size-space-4);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _name?: string | null = '';
@@ -65,6 +52,21 @@ export class UmbDictionaryWorkspaceEditElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-layout-1);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
 }
 
 export default UmbDictionaryWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.element.ts
index 68d93ba9c5..692759b71b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/dictionary-workspace.element.ts
@@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-dictionary-workspace')
 export class UmbWorkspaceDictionaryElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	#workspaceContext = new UmbDictionaryWorkspaceContext(this);
 	#element = new UmbDictionaryWorkspaceEditElement();
@@ -28,6 +28,8 @@ export class UmbWorkspaceDictionaryElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbWorkspaceDictionaryElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts
index d232ccd027..537e02d97c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/translation/dictionary/workspace/views/edit/workspace-view-dictionary-edit.element.ts
@@ -12,15 +12,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-workspace-view-dictionary-edit')
 export class UmbWorkspaceViewDictionaryEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				padding: var(--uui-size-space-6);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _dictionary?: DictionaryItemResponseModel;
@@ -88,6 +80,16 @@ export class UmbWorkspaceViewDictionaryEditElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-space-6);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewDictionaryEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
index 7cf07e767f..2462854ed5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/current-user-header-app.element.ts
@@ -8,15 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-current-user-header-app')
 export class UmbCurrentUserHeaderAppElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			uui-button {
-				font-size: 14px;
-				--uui-button-background-color: transparent;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _currentUser?: UserDetails;
@@ -56,6 +48,16 @@ export class UmbCurrentUserHeaderAppElement extends UmbLitElement {
 			</uui-button>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			uui-button {
+				font-size: 14px;
+				--uui-button-background-color: transparent;
+			}
+		`,
+	];
 }
 
 export default UmbCurrentUserHeaderAppElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
index f5fc28ad43..a6a487a455 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/change-password/change-password-modal.element.ts
@@ -6,23 +6,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-change-password-modal')
 export class UmbChangePasswordModalElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 400px;
-			}
-			uui-input-password {
-				width: 100%;
-			}
-			#actions {
-				display: flex;
-				justify-content: flex-end;
-				margin-top: var(--uui-size-layout-2);
-			}
-		`,
-	];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler;
@@ -99,6 +83,24 @@ export class UmbChangePasswordModalElement extends UmbLitElement {
 			</uui-dialog-layout>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 400px;
+			}
+			uui-input-password {
+				width: 100%;
+			}
+			#actions {
+				display: flex;
+				justify-content: flex-end;
+				margin-top: var(--uui-size-layout-2);
+			}
+		`,
+	];
 }
 
 export default UmbChangePasswordModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
index 862d2e5823..78bb4d041a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/modals/current-user/current-user-modal.element.ts
@@ -8,36 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-current-user-modal')
 export class UmbCurrentUserModalElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				color: var(--uui-color-text);
-			}
-			:host,
-			umb-workspace-layout {
-				width: 100%;
-				height: 100%;
-			}
-			#main {
-				padding: var(--uui-size-space-5);
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-			#umbraco-id-buttons {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-			#userProfileApps {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-		`,
-	];
+	
 
 	@property({ attribute: false })
 	modalHandler?: UmbModalHandler;
@@ -87,6 +58,37 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				color: var(--uui-color-text);
+			}
+			:host,
+			umb-workspace-layout {
+				width: 100%;
+				height: 100%;
+			}
+			#main {
+				padding: var(--uui-size-space-5);
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+			#umbraco-id-buttons {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+			#userProfileApps {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+		`,
+	];
 }
 
 export default UmbCurrentUserModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-external-login-providers.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-external-login-providers.element.ts
index 9ebcc291a5..6d6ef2a7a3 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-external-login-providers.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-external-login-providers.element.ts
@@ -5,7 +5,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-user-profile-app-external-login-providers')
 export class UmbUserProfileAppExternalLoginProvidersElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	render() {
 		return html`
@@ -15,6 +15,8 @@ export class UmbUserProfileAppExternalLoginProvidersElement extends UmbLitElemen
 			</uui-box>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbUserProfileAppExternalLoginProvidersElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-history.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-history.element.ts
index ffdd50ace4..a64daebe8c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-history.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-history.element.ts
@@ -10,48 +10,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-user-profile-app-history')
 export class UmbUserProfileAppHistoryElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			#recent-history {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-			#recent-history-items {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			.history-item {
-				display: grid;
-				grid-template-columns: 32px 1fr;
-				grid-template-rows: 1fr;
-				color: var(--uui-color-interactive);
-				text-decoration: none;
-			}
-			.history-item uui-icon {
-				margin-top: var(--uui-size-space-1);
-			}
-			.history-item:hover {
-				color: var(--uui-color-interactive-emphasis);
-			}
-			.history-item > div {
-				color: inherit;
-				text-decoration: none;
-				display: flex;
-				flex-direction: column;
-				line-height: 1.4em;
-			}
-			.history-item > div > span {
-				font-size: var(--uui-size-4);
-				opacity: 0.5;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _history: Array<UmbCurrentUserHistoryItem> = [];
@@ -107,6 +66,49 @@ export class UmbUserProfileAppHistoryElement extends UmbLitElement {
 			</a>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			#recent-history {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+			}
+			#recent-history-items {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			.history-item {
+				display: grid;
+				grid-template-columns: 32px 1fr;
+				grid-template-rows: 1fr;
+				color: var(--uui-color-interactive);
+				text-decoration: none;
+			}
+			.history-item uui-icon {
+				margin-top: var(--uui-size-space-1);
+			}
+			.history-item:hover {
+				color: var(--uui-color-interactive-emphasis);
+			}
+			.history-item > div {
+				color: inherit;
+				text-decoration: none;
+				display: flex;
+				flex-direction: column;
+				line-height: 1.4em;
+			}
+			.history-item > div > span {
+				font-size: var(--uui-size-4);
+				opacity: 0.5;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+			}
+		`,
+	];
 }
 
 export default UmbUserProfileAppHistoryElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-profile.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-profile.element.ts
index 840b280c6a..3c54bf51c1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-profile.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-profile.element.ts
@@ -8,7 +8,7 @@ import { UmbModalContext, UMB_CHANGE_PASSWORD_MODAL, UMB_MODAL_CONTEXT_TOKEN } f
 
 @customElement('umb-user-profile-app-profile')
 export class UmbUserProfileAppProfileElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@state()
 	private _currentUser?: UserDetails;
@@ -62,6 +62,8 @@ export class UmbUserProfileAppProfileElement extends UmbLitElement {
 			</uui-box>
 		`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbUserProfileAppProfileElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-themes.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-themes.element.ts
index b6bc69938f..4a7bd4e318 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-themes.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-profile-apps/user-profile-app-themes.element.ts
@@ -9,21 +9,7 @@ import { ManifestTheme } from '@umbraco-cms/backoffice/extensions-registry';
 
 @customElement('umb-user-profile-app-themes')
 export class UmbUserProfileAppThemesElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-				padding: var(--uui-size-space-5);
-				background: var(--uui-color-surface);
-				color: var(--uui-color-text);
-				border-radius: var(--uui-border-radius);
-				box-shadow: var(--uui-shadow-depth-1);
-			}
-		`,
-	];
+	
 
 	#themeService?: UmbThemeContext;
 
@@ -69,6 +55,22 @@ export class UmbUserProfileAppThemesElement extends UmbLitElement {
 				.options=${this.#options}></uui-select>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+				padding: var(--uui-size-space-5);
+				background: var(--uui-color-surface);
+				color: var(--uui-color-text);
+				border-radius: var(--uui-border-radius);
+				box-shadow: var(--uui-shadow-depth-1);
+			}
+		`,
+	];
 }
 
 export default UmbUserProfileAppThemesElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
index 3a06069852..d85c609eb1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
@@ -7,51 +7,7 @@ import type { UserGroupDetails } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-user-group-picker-modal')
 export class UmbUserGroupPickerModalElement extends UmbModalElementPickerBase<UserGroupDetails> {
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-input {
-				width: 100%;
-			}
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-			#item-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-1);
-			}
-			.item {
-				color: var(--uui-color-interactive);
-				display: grid;
-				grid-template-columns: var(--uui-size-8) 1fr;
-				padding: var(--uui-size-4) var(--uui-size-2);
-				gap: var(--uui-size-space-5);
-				align-items: center;
-				border-radius: var(--uui-border-radius);
-				cursor: pointer;
-			}
-			.item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-			.item:not(.selected):hover {
-				background-color: var(--uui-color-surface-emphasis);
-				color: var(--uui-color-interactive-emphasis);
-			}
-			.item.selected:hover {
-				background-color: var(--uui-color-selected-emphasis);
-			}
-			.item uui-icon {
-				width: 100%;
-				box-sizing: border-box;
-				display: flex;
-				height: fit-content;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _userGroups: Array<UserGroupDetails> = [];
@@ -98,6 +54,52 @@ export class UmbUserGroupPickerModalElement extends UmbModalElementPickerBase<Us
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			uui-input {
+				width: 100%;
+			}
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				margin: 16px 0;
+			}
+			#item-list {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-1);
+			}
+			.item {
+				color: var(--uui-color-interactive);
+				display: grid;
+				grid-template-columns: var(--uui-size-8) 1fr;
+				padding: var(--uui-size-4) var(--uui-size-2);
+				gap: var(--uui-size-space-5);
+				align-items: center;
+				border-radius: var(--uui-border-radius);
+				cursor: pointer;
+			}
+			.item.selected {
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+			}
+			.item:not(.selected):hover {
+				background-color: var(--uui-color-surface-emphasis);
+				color: var(--uui-color-interactive-emphasis);
+			}
+			.item.selected:hover {
+				background-color: var(--uui-color-selected-emphasis);
+			}
+			.item uui-icon {
+				width: 100%;
+				box-sizing: border-box;
+				display: flex;
+				height: fit-content;
+			}
+		`,
+	];
 }
 
 export default UmbUserGroupPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts
index 79a76bc2fb..767cb800b2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/actions/workspace-action-user-group-save.element.ts
@@ -8,7 +8,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-workspace-action-user-group-save')
 export class UmbWorkspaceActionUserGroupSaveElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@state()
 	private _saveButtonState?: UUIButtonState;
@@ -45,6 +45,8 @@ export class UmbWorkspaceActionUserGroupSaveElement extends UmbLitElement {
 			label="save"
 			.state="${this._saveButtonState}"></uui-button>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbWorkspaceActionUserGroupSaveElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts
index a997c5133a..d803d7f7d8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace-edit.element.ts
@@ -14,62 +14,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-user-group-workspace-edit')
 export class UmbUserGroupWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				height: 100%;
-			}
-
-			#main {
-				display: grid;
-				grid-template-columns: 1fr 350px;
-				gap: var(--uui-size-layout-1);
-				padding: var(--uui-size-layout-1);
-			}
-			#left-column {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			#right-column > uui-box > div {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-2);
-			}
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-			.faded-text {
-				color: var(--uui-color-text-alt);
-				font-size: 0.8rem;
-			}
-			#default-permissions {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			.default-permission {
-				display: flex;
-				align-items: center;
-				gap: var(--uui-size-space-4);
-				padding: var(--uui-size-space-2);
-			}
-			.default-permission:not(:last-child) {
-				border-bottom: 1px solid var(--uui-color-divider);
-			}
-			.permission-info {
-				display: flex;
-				flex-direction: column;
-			}
-		`,
-	];
+	
 
 	defaultPermissions: Array<{
 		name: string;
@@ -361,6 +306,63 @@ export class UmbUserGroupWorkspaceEditElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+			}
+
+			#main {
+				display: grid;
+				grid-template-columns: 1fr 350px;
+				gap: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
+			}
+			#left-column {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			#right-column > uui-box > div {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-2);
+			}
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+			.faded-text {
+				color: var(--uui-color-text-alt);
+				font-size: 0.8rem;
+			}
+			#default-permissions {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			.default-permission {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-space-4);
+				padding: var(--uui-size-space-2);
+			}
+			.default-permission:not(:last-child) {
+				border-bottom: 1px solid var(--uui-color-divider);
+			}
+			.permission-info {
+				display: flex;
+				flex-direction: column;
+			}
+		`,
+	];
 }
 
 export default UmbUserGroupWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts
index e27f918e93..89b05dd255 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-groups/workspace/user-group-workspace.element.ts
@@ -11,7 +11,7 @@ import type { IRoute } from '@umbraco-cms/backoffice/router';
 
 @customElement('umb-user-group-workspace')
 export class UmbUserGroupWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	#workspaceContext = new UmbUserGroupWorkspaceContext(this);
 	#element = new UmbUserGroupWorkspaceEditElement();
@@ -61,6 +61,8 @@ export class UmbUserGroupWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbUserGroupWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts
index 270825f4e6..c5abab729c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/section-view-user-groups.element.ts
@@ -6,6 +6,12 @@ import './workspace-view-user-groups.element';
 
 @customElement('umb-section-view-user-groups')
 export class UmbSectionViewUserGroupsElement extends LitElement {
+	
+
+	render() {
+		return html`<umb-workspace-view-user-groups></umb-workspace-view-user-groups>`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -18,10 +24,6 @@ export class UmbSectionViewUserGroupsElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`<umb-workspace-view-user-groups></umb-workspace-view-user-groups>`;
-	}
 }
 
 export default UmbSectionViewUserGroupsElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts
index 61ae8d8384..84567fcf85 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/user-groups/workspace-view-user-groups.element.ts
@@ -24,21 +24,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-workspace-view-user-groups')
 export class UmbWorkspaceViewUserGroupsElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-				margin: var(--uui-size-layout-1);
-			}
-
-			umb-table {
-				padding: 0;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _userGroups: Array<UserGroupDetails> = [];
@@ -154,6 +140,22 @@ export class UmbWorkspaceViewUserGroupsElement extends UmbLitElement {
 				@ordered="${this._handleOrdering}"></umb-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				margin: var(--uui-size-layout-1);
+			}
+
+			umb-table {
+				padding: 0;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewUserGroupsElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
index 0cdb0edede..22b88cef10 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/grid/workspace-view-users-grid.element.ts
@@ -14,32 +14,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-workspace-view-users-grid')
 export class UmbWorkspaceViewUsersGridElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-			}
-
-			#user-grid {
-				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-				gap: var(--uui-size-space-4);
-				margin: var(--uui-size-layout-1);
-				margin-top: var(--uui-size-space-2);
-			}
-
-			uui-card-user {
-				width: 100%;
-				height: 180px;
-			}
-
-			.user-login-time {
-				margin-top: auto;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _users: Array<UserDetails> = [];
@@ -155,6 +130,33 @@ export class UmbWorkspaceViewUsersGridElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+			}
+
+			#user-grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+				gap: var(--uui-size-space-4);
+				margin: var(--uui-size-layout-1);
+				margin-top: var(--uui-size-space-2);
+			}
+
+			uui-card-user {
+				width: 100%;
+				height: 180px;
+			}
+
+			.user-login-time {
+				margin-top: auto;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewUsersGridElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts
index 33b8e1aa1e..ec4a433208 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/workspace-view-users-table.element.ts
@@ -23,20 +23,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-workspace-view-users-table')
 export class UmbWorkspaceViewUsersTableElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-			}
-
-			umb-table {
-				padding: 0;
-				margin: 0 var(--uui-size-layout-1) var(--uui-size-layout-1);
-			}
-		`,
-	];
+	
 
 	@state()
 	private _users: Array<UserDetails> = [];
@@ -191,6 +178,21 @@ export class UmbWorkspaceViewUsersTableElement extends UmbLitElement {
 				@ordered="${this._handleOrdering}"></umb-table>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+			}
+
+			umb-table {
+				padding: 0;
+				margin: 0 var(--uui-size-layout-1) var(--uui-size-layout-1);
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewUsersTableElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts
index 64f9e96e23..c9ae7da4a0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/section-view-users.element.ts
@@ -16,18 +16,7 @@ import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extensions-regis
 
 @customElement('umb-section-view-users')
 export class UmbSectionViewUsersElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				height: 100%;
-			}
-
-			#router-slot {
-				height: calc(100% - var(--umb-header-layout-height));
-			}
-		`,
-	];
+	
 
 	@state()
 	private _routes: IRoute[] = [];
@@ -135,6 +124,19 @@ export class UmbSectionViewUsersElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				height: 100%;
+			}
+
+			#router-slot {
+				height: calc(100% - var(--umb-header-layout-height));
+			}
+		`,
+	];
 }
 
 export default UmbSectionViewUsersElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
index b770de3c2b..73f6e14627 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-overview.element.ts
@@ -20,64 +20,7 @@ import './workspace-view-users-selection.element';
 export type UsersViewType = 'list' | 'grid';
 @customElement('umb-workspace-view-users-overview')
 export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-			}
-
-			#sticky-top {
-				position: sticky;
-				top: 0px;
-				z-index: 1;
-				box-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
-				transition: 250ms box-shadow ease-in-out;
-			}
-
-			#sticky-top.header-shadow {
-				box-shadow: var(--uui-shadow-depth-2);
-			}
-
-			#user-list-top-bar {
-				padding: var(--uui-size-space-4) var(--uui-size-layout-1);
-				background-color: var(--uui-color-background);
-				display: flex;
-				justify-content: space-between;
-				white-space: nowrap;
-				gap: var(--uui-size-space-5);
-				align-items: center;
-			}
-			#user-list {
-				padding: var(--uui-size-layout-1);
-				padding-top: var(--uui-size-space-2);
-			}
-			#input-search {
-				width: 100%;
-			}
-
-			uui-popover {
-				width: unset;
-			}
-
-			.filter-dropdown {
-				display: flex;
-				gap: var(--uui-size-space-3);
-				flex-direction: column;
-				background-color: var(--uui-color-surface);
-				padding: var(--uui-size-space-4);
-				border-radius: var(--uui-size-border-radius);
-				box-shadow: var(--uui-shadow-depth-2);
-				width: fit-content;
-			}
-			a {
-				color: inherit;
-				text-decoration: none;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _selection: Array<string> = [];
@@ -229,6 +172,65 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 			${this._renderSelection()}
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+
+			#sticky-top {
+				position: sticky;
+				top: 0px;
+				z-index: 1;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
+				transition: 250ms box-shadow ease-in-out;
+			}
+
+			#sticky-top.header-shadow {
+				box-shadow: var(--uui-shadow-depth-2);
+			}
+
+			#user-list-top-bar {
+				padding: var(--uui-size-space-4) var(--uui-size-layout-1);
+				background-color: var(--uui-color-background);
+				display: flex;
+				justify-content: space-between;
+				white-space: nowrap;
+				gap: var(--uui-size-space-5);
+				align-items: center;
+			}
+			#user-list {
+				padding: var(--uui-size-layout-1);
+				padding-top: var(--uui-size-space-2);
+			}
+			#input-search {
+				width: 100%;
+			}
+
+			uui-popover {
+				width: unset;
+			}
+
+			.filter-dropdown {
+				display: flex;
+				gap: var(--uui-size-space-3);
+				flex-direction: column;
+				background-color: var(--uui-color-surface);
+				padding: var(--uui-size-space-4);
+				border-radius: var(--uui-size-border-radius);
+				box-shadow: var(--uui-shadow-depth-2);
+				width: fit-content;
+			}
+			a {
+				color: inherit;
+				text-decoration: none;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewUsersOverviewElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-selection.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-selection.element.ts
index 6cfff21f9f..8ce1af9b6e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-selection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/workspace-view-users-selection.element.ts
@@ -7,21 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-workspace-view-users-selection')
 export class UmbWorkspaceViewUsersSelectionElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				gap: var(--uui-size-3);
-				width: 100%;
-				padding: var(--uui-size-space-4) var(--uui-size-space-6);
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-				align-items: center;
-				box-sizing: border-box;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _selection: Array<string> = [];
@@ -71,6 +57,22 @@ export class UmbWorkspaceViewUsersSelectionElement extends UmbLitElement {
 			<uui-button label="Unlock" disabled look="secondary"></uui-button>
 			<uui-button label="Disable" look="secondary"></uui-button> `;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				gap: var(--uui-size-3);
+				width: 100%;
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+				background-color: var(--uui-color-selected);
+				color: var(--uui-color-selected-contrast);
+				align-items: center;
+				box-sizing: border-box;
+			}
+		`,
+	];
 }
 
 export default UmbWorkspaceViewUsersSelectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/create-user/create-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/create-user/create-user-modal.element.ts
index 39573a4e2c..095e3292fa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/create-user/create-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/create-user/create-user-modal.element.ts
@@ -15,44 +15,7 @@ import {
 export type UsersViewType = 'list' | 'grid';
 @customElement('umb-create-user-modal')
 export class UmbCreateUserModalElement extends UmbModalBaseElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 100%;
-				width: 100%;
-			}
-			uui-box {
-				max-width: 500px;
-			}
-			uui-form-layout-item {
-				display: flex;
-				flex-direction: column;
-			}
-			uui-input,
-			uui-input-password {
-				width: 100%;
-			}
-			form {
-				display: flex;
-				flex-direction: column;
-				box-sizing: border-box;
-			}
-			uui-form-layout-item {
-				margin-bottom: 0;
-			}
-			uui-textarea {
-				--uui-textarea-min-height: 100px;
-			}
-			/* TODO: Style below is to fix a11y contrast issue, find a proper solution */
-			[slot='description'] {
-				color: black;
-			}
-		`,
-	];
+	
 
 	@query('#form')
 	private _form!: HTMLFormElement;
@@ -208,6 +171,45 @@ export class UmbCreateUserModalElement extends UmbModalBaseElement {
 				  `}
 		</uui-dialog-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				width: 100%;
+			}
+			uui-box {
+				max-width: 500px;
+			}
+			uui-form-layout-item {
+				display: flex;
+				flex-direction: column;
+			}
+			uui-input,
+			uui-input-password {
+				width: 100%;
+			}
+			form {
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+			}
+			uui-form-layout-item {
+				margin-bottom: 0;
+			}
+			uui-textarea {
+				--uui-textarea-min-height: 100px;
+			}
+			/* TODO: Style below is to fix a11y contrast issue, find a proper solution */
+			[slot='description'] {
+				color: black;
+			}
+		`,
+	];
 }
 
 export default UmbCreateUserModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/invite-user/invite-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/invite-user/invite-user-modal.element.ts
index 2c1eaed271..acd89430d0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/invite-user/invite-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/invite-user/invite-user-modal.element.ts
@@ -9,43 +9,7 @@ import type { UserDetails } from '@umbraco-cms/backoffice/models';
 export type UsersViewType = 'list' | 'grid';
 @customElement('umb-invite-user-modal')
 export class UmbInviteUserModalElement extends UmbModalBaseElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 100%;
-				width: 100%;
-			}
-			uui-box {
-				max-width: 500px;
-			}
-			uui-form-layout-item {
-				display: flex;
-				flex-direction: column;
-			}
-			uui-input {
-				width: 100%;
-			}
-			form {
-				display: flex;
-				flex-direction: column;
-				box-sizing: border-box;
-			}
-			uui-form-layout-item {
-				margin-bottom: 0;
-			}
-			uui-textarea {
-				--uui-textarea-min-height: 100px;
-			}
-			/* TODO: Style below is to fix a11y contrast issue, find a proper solution */
-			[slot='description'] {
-				color: black;
-			}
-		`,
-	];
+	
 
 	@query('#form')
 	private _form!: HTMLFormElement;
@@ -180,6 +144,44 @@ export class UmbInviteUserModalElement extends UmbModalBaseElement {
 				  `}
 		</uui-dialog-layout>`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				width: 100%;
+			}
+			uui-box {
+				max-width: 500px;
+			}
+			uui-form-layout-item {
+				display: flex;
+				flex-direction: column;
+			}
+			uui-input {
+				width: 100%;
+			}
+			form {
+				display: flex;
+				flex-direction: column;
+				box-sizing: border-box;
+			}
+			uui-form-layout-item {
+				margin-bottom: 0;
+			}
+			uui-textarea {
+				--uui-textarea-min-height: 100px;
+			}
+			/* TODO: Style below is to fix a11y contrast issue, find a proper solution */
+			[slot='description'] {
+				color: black;
+			}
+		`,
+	];
 }
 
 export default UmbInviteUserModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
index a1f18890a1..0f9d94eb2e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/modals/user-picker/user-picker-modal.element.ts
@@ -7,6 +7,54 @@ import type { UserDetails } from '@umbraco-cms/backoffice/models';
 
 @customElement('umb-user-picker-modal')
 export class UmbUserPickerModalElement extends UmbModalElementPickerBase<UserDetails> {
+	
+
+	@state()
+	private _users: Array<UserDetails> = [];
+
+	private _userStore?: UmbUserStore;
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		this.consumeContext(UMB_USER_STORE_CONTEXT_TOKEN, (userStore) => {
+			this._userStore = userStore;
+			this._observeUsers();
+		});
+	}
+
+	private _observeUsers() {
+		if (!this._userStore) return;
+		this.observe(this._userStore.getAll(), (users) => (this._users = users));
+	}
+
+	render() {
+		return html`
+			<umb-workspace-layout headline="Select users">
+				<uui-box>
+					<uui-input label="search"></uui-input>
+					<hr />
+					<div id="item-list">
+						${this._users.map(
+							(item) => html`
+								<div
+									@click=${() => this.handleSelection(item.id)}
+									@keydown=${(e: KeyboardEvent) => this._handleKeydown(e, item.id)}
+									class=${this.isSelected(item.id) ? 'item selected' : 'item'}>
+									<uui-avatar .name=${item.name}></uui-avatar>
+									<span>${item.name}</span>
+								</div>
+							`
+						)}
+					</div>
+				</uui-box>
+				<div slot="actions">
+					<uui-button label="Close" @click=${this.close}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this.submit}></uui-button>
+				</div>
+			</umb-workspace-layout>
+		`;
+	}
+	
 	static styles = [
 		UUITextStyles,
 		css`
@@ -57,52 +105,6 @@ export class UmbUserPickerModalElement extends UmbModalElementPickerBase<UserDet
 			}
 		`,
 	];
-
-	@state()
-	private _users: Array<UserDetails> = [];
-
-	private _userStore?: UmbUserStore;
-
-	connectedCallback(): void {
-		super.connectedCallback();
-		this.consumeContext(UMB_USER_STORE_CONTEXT_TOKEN, (userStore) => {
-			this._userStore = userStore;
-			this._observeUsers();
-		});
-	}
-
-	private _observeUsers() {
-		if (!this._userStore) return;
-		this.observe(this._userStore.getAll(), (users) => (this._users = users));
-	}
-
-	render() {
-		return html`
-			<umb-workspace-layout headline="Select users">
-				<uui-box>
-					<uui-input label="search"></uui-input>
-					<hr />
-					<div id="item-list">
-						${this._users.map(
-							(item) => html`
-								<div
-									@click=${() => this.handleSelection(item.id)}
-									@keydown=${(e: KeyboardEvent) => this._handleKeydown(e, item.id)}
-									class=${this.isSelected(item.id) ? 'item selected' : 'item'}>
-									<uui-avatar .name=${item.name}></uui-avatar>
-									<span>${item.name}</span>
-								</div>
-							`
-						)}
-					</div>
-				</uui-box>
-				<div slot="actions">
-					<uui-button label="Close" @click=${this.close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this.submit}></uui-button>
-				</div>
-			</umb-workspace-layout>
-		`;
-	}
 }
 
 export default UmbUserPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts
index 8c55d415e3..505187cf1d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/actions/workspace-action-user-save.element.ts
@@ -8,7 +8,7 @@ import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-ap
 
 @customElement('umb-workspace-action-user-save')
 export class UmbWorkspaceActionUserSaveElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	
 
 	@state()
 	private _saveButtonState?: UUIButtonState;
@@ -45,6 +45,8 @@ export class UmbWorkspaceActionUserSaveElement extends UmbLitElement {
 			label="save"
 			.state="${this._saveButtonState}"></uui-button>`;
 	}
+	
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbWorkspaceActionUserSaveElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
index c0a9430280..a4b7fd3b18 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace-edit.element.ts
@@ -19,64 +19,7 @@ import '../../../shared/components/workspace/workspace-layout/workspace-layout.e
 
 @customElement('umb-user-workspace-edit')
 export class UmbUserWorkspaceEditElement extends UmbLitElement {
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				height: 100%;
-			}
-
-			#main {
-				display: grid;
-				grid-template-columns: 1fr 350px;
-				gap: var(--uui-size-layout-1);
-				padding: var(--uui-size-layout-1);
-			}
-
-			#left-column {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
-			#right-column > uui-box > div {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-2);
-			}
-			uui-avatar {
-				font-size: var(--uui-size-16);
-				place-self: center;
-			}
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				width: 100%;
-			}
-			uui-input {
-				width: 100%;
-			}
-			.faded-text {
-				color: var(--uui-color-text-alt);
-				font-size: 0.8rem;
-			}
-			uui-tag {
-				width: fit-content;
-			}
-			#user-info {
-				display: flex;
-				gap: var(--uui-size-space-6);
-			}
-			#user-info > div {
-				display: flex;
-				flex-direction: column;
-			}
-			#assign-access {
-				display: flex;
-				flex-direction: column;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _currentUser?: UserDetails;
@@ -337,6 +280,65 @@ export class UmbUserWorkspaceEditElement extends UmbLitElement {
 			</umb-workspace-layout>
 		`;
 	}
+	
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+			}
+
+			#main {
+				display: grid;
+				grid-template-columns: 1fr 350px;
+				gap: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
+			}
+
+			#left-column {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+			#right-column > uui-box > div {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-2);
+			}
+			uui-avatar {
+				font-size: var(--uui-size-16);
+				place-self: center;
+			}
+			hr {
+				border: none;
+				border-bottom: 1px solid var(--uui-color-divider);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+			.faded-text {
+				color: var(--uui-color-text-alt);
+				font-size: 0.8rem;
+			}
+			uui-tag {
+				width: fit-content;
+			}
+			#user-info {
+				display: flex;
+				gap: var(--uui-size-space-6);
+			}
+			#user-info > div {
+				display: flex;
+				flex-direction: column;
+			}
+			#assign-access {
+				display: flex;
+				flex-direction: column;
+			}
+		`,
+	];
 }
 
 export default UmbUserWorkspaceEditElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts
index 7cfea7028f..070d1a03dd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/users/workspace/user-workspace.element.ts
@@ -12,7 +12,7 @@ import '../../../shared/components/workspace/workspace-layout/workspace-layout.e
 
 @customElement('umb-user-workspace')
 export class UmbUserWorkspaceElement extends UmbLitElement {
-	static styles = [UUITextStyles];
+	
 
 	#workspaceContext = new UmbUserWorkspaceContext(this);
 	#element = new UmbUserWorkspaceEditElement();
@@ -32,6 +32,8 @@ export class UmbUserWorkspaceElement extends UmbLitElement {
 	render() {
 		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 export default UmbUserWorkspaceElement;
diff --git a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts
index a93352938d..50ff4d3824 100644
--- a/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/notification/layouts/default/notification-layout-default.element.ts
@@ -8,7 +8,7 @@ export type { UmbNotificationDefaultData };
 
 @customElement('umb-notification-layout-default')
 export class UmbNotificationLayoutDefaultElement extends LitElement {
-	static styles = [UUITextStyles];
+	
 
 	@property({ attribute: false })
 	notificationHandler!: UmbNotificationHandler;
@@ -23,6 +23,8 @@ export class UmbNotificationLayoutDefaultElement extends LitElement {
 			</uui-toast-notification-layout>
 		`;
 	}
+	
+	static styles = [UUITextStyles];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
index d055f41278..3120a5d02b 100644
--- a/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/router/router-slot.element.ts
@@ -16,19 +16,7 @@ import { UmbRouteContext, UmbRoute } from '@umbraco-cms/backoffice/router';
  */
 @customElement('umb-router-slot')
 export class UmbRouterSlotElement extends UmbLitElement {
-	static styles = [
-		css`
-			:host {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			router-slot {
-				height: 100%;
-			}
-		`,
-	];
+	
 
 	#router: RouterSlot = new RouterSlot();
 	#modalRouter: RouterSlot = new RouterSlot();
@@ -127,6 +115,20 @@ export class UmbRouterSlotElement extends UmbLitElement {
 	render() {
 		return html`${this.#router}${this.#modalRouter}`;
 	}
+	
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			router-slot {
+				height: 100%;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.element.ts b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.element.ts
index 21df7a7844..4f8c55c522 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/consent/installer-consent.element.ts
@@ -8,41 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-installer-consent')
 export class UmbInstallerConsentElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		css`
-			:host,
-			#container {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			uui-form {
-				height: 100%;
-			}
-
-			form {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-			}
-
-			h1 {
-				text-align: center;
-				margin-bottom: var(--uui-size-layout-3);
-			}
-
-			#buttons {
-				display: flex;
-				margin-top: auto;
-			}
-
-			#button-install {
-				margin-left: auto;
-				min-width: 120px;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _telemetryLevels: ConsentLevelPresentationModel[] = [];
@@ -132,6 +98,42 @@ export class UmbInstallerConsentElement extends UmbLitElement {
 			</div>
 		`;
 	}
+	
+	static styles: CSSResultGroup = [
+		css`
+			:host,
+			#container {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			uui-form {
+				height: 100%;
+			}
+
+			form {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+
+			h1 {
+				text-align: center;
+				margin-bottom: var(--uui-size-layout-3);
+			}
+
+			#buttons {
+				display: flex;
+				margin-top: auto;
+			}
+
+			#button-install {
+				margin-left: auto;
+				min-width: 120px;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts
index 7b6f8921df..bb0ff6178a 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/database/installer-database.element.ts
@@ -14,69 +14,7 @@ import { tryExecute } from '@umbraco-cms/backoffice/resources';
 
 @customElement('umb-installer-database')
 export class UmbInstallerDatabaseElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		css`
-			:host,
-			#container {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			uui-form {
-				height: 100%;
-			}
-
-			form {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-			}
-
-			uui-form-layout-item {
-				margin-top: 0;
-				margin-bottom: var(--uui-size-layout-1);
-			}
-
-			uui-input,
-			uui-input-password,
-			uui-combobox {
-				width: 100%;
-			}
-
-			hr {
-				width: 100%;
-				margin-top: var(--uui-size-space-2);
-				margin-bottom: var(--uui-size-layout-1);
-				border: none;
-				border-bottom: 1px solid var(--uui-color-border);
-			}
-
-			h1 {
-				text-align: center;
-				margin-bottom: var(--uui-size-layout-3);
-			}
-
-			h2 {
-				margin: 0;
-			}
-
-			#buttons {
-				display: flex;
-				margin-top: auto;
-			}
-
-			#button-install {
-				margin-left: auto;
-				min-width: 120px;
-			}
-
-			.error {
-				color: var(--uui-color-danger);
-				padding: var(--uui-size-space-2) 0;
-			}
-		`,
-	];
+	
 
 	@query('#button-install')
 	private _installButton!: UUIButtonElement;
@@ -424,6 +362,70 @@ export class UmbInstallerDatabaseElement extends UmbLitElement {
 			</uui-form>
 		</div>`;
 	}
+	
+	static styles: CSSResultGroup = [
+		css`
+			:host,
+			#container {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			uui-form {
+				height: 100%;
+			}
+
+			form {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+
+			uui-form-layout-item {
+				margin-top: 0;
+				margin-bottom: var(--uui-size-layout-1);
+			}
+
+			uui-input,
+			uui-input-password,
+			uui-combobox {
+				width: 100%;
+			}
+
+			hr {
+				width: 100%;
+				margin-top: var(--uui-size-space-2);
+				margin-bottom: var(--uui-size-layout-1);
+				border: none;
+				border-bottom: 1px solid var(--uui-color-border);
+			}
+
+			h1 {
+				text-align: center;
+				margin-bottom: var(--uui-size-layout-3);
+			}
+
+			h2 {
+				margin: 0;
+			}
+
+			#buttons {
+				display: flex;
+				margin-top: auto;
+			}
+
+			#button-install {
+				margin-left: auto;
+				min-width: 120px;
+			}
+
+			.error {
+				color: var(--uui-color-danger);
+				padding: var(--uui-size-space-2) 0;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.element.ts b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.element.ts
index e7939497ab..0b4e2dc6c1 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/error/installer-error.element.ts
@@ -7,24 +7,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-installer-error')
 export class UmbInstallerErrorElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		css`
-			:host,
-			#container {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			h1 {
-				text-align: center;
-			}
-
-			#error-message {
-				color: var(--uui-color-danger, #d42054);
-			}
-		`,
-	];
+	
 
 	@state()
 	_error?: ProblemDetailsModel;
@@ -92,6 +75,25 @@ export class UmbInstallerErrorElement extends UmbLitElement {
 			</uui-form>
 		</div>`;
 	}
+	
+	static styles: CSSResultGroup = [
+		css`
+			:host,
+			#container {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			h1 {
+				text-align: center;
+			}
+
+			#error-message {
+				color: var(--uui-color-danger, #d42054);
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts
index 25f6161721..9004a872bf 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installer.element.ts
@@ -12,7 +12,7 @@ import './user/installer-user.element';
 
 @customElement('umb-installer')
 export class UmbInstallerElement extends UmbLitElement {
-	static styles: CSSResultGroup = [css``];
+	
 
 	@state()
 	step = 1;
@@ -59,6 +59,8 @@ export class UmbInstallerElement extends UmbLitElement {
 	render() {
 		return html`<umb-installer-layout data-test="installer">${this._renderSection()}</umb-installer-layout> `;
 	}
+	
+	static styles: CSSResultGroup = [css``];
 }
 
 export default UmbInstallerElement;
diff --git a/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.element.ts b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.element.ts
index 9e70fddf17..92a6236e3c 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/installing/installer-installing.element.ts
@@ -3,13 +3,7 @@ import { customElement } from 'lit/decorators.js';
 
 @customElement('umb-installer-installing')
 export class UmbInstallerInstallingElement extends LitElement {
-	static styles: CSSResultGroup = [
-		css`
-			h1 {
-				text-align: center;
-			}
-		`,
-	];
+	
 
 	render() {
 		return html` <div class="uui-text" data-test="installer-installing">
@@ -17,6 +11,14 @@ export class UmbInstallerInstallingElement extends LitElement {
 			<uui-loader-bar></uui-loader-bar>
 		</div>`;
 	}
+	
+	static styles: CSSResultGroup = [
+		css`
+			h1 {
+				text-align: center;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts
index fb6817808e..55560242b9 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/shared/layout/installer-layout.element.ts
@@ -5,6 +5,24 @@ import installerImg from '/installer.jpg';
 
 @customElement('umb-installer-layout')
 export class UmbInstallerLayoutElement extends LitElement {
+	
+
+	render() {
+		return html`<div>
+			<div id="background" aria-hidden="true"></div>
+
+			<div id="logo" aria-hidden="true">
+				<img src="${logoImg}" alt="Umbraco" />
+			</div>
+
+			<main id="container">
+				<div id="box">
+					<slot></slot>
+				</div>
+			</main>
+		</div>`;
+	}
+	
 	static styles: CSSResultGroup = [
 		css`
 			#background {
@@ -49,22 +67,6 @@ export class UmbInstallerLayoutElement extends LitElement {
 			}
 		`,
 	];
-
-	render() {
-		return html`<div>
-			<div id="background" aria-hidden="true"></div>
-
-			<div id="logo" aria-hidden="true">
-				<img src="${logoImg}" alt="Umbraco" />
-			</div>
-
-			<main id="container">
-				<div id="box">
-					<slot></slot>
-				</div>
-			</main>
-		</div>`;
-	}
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.element.ts b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.element.ts
index a96d159a06..b5269880dd 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/installer/user/installer-user.element.ts
@@ -5,55 +5,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-installer-user')
 export class UmbInstallerUserElement extends UmbLitElement {
-	static styles: CSSResultGroup = [
-		css`
-			:host,
-			#container {
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-			}
-
-			uui-form-layout-item {
-				margin-top: 0;
-				margin-bottom: var(--uui-size-layout-1);
-			}
-
-			uui-form {
-				height: 100%;
-			}
-
-			form {
-				height: 100%;
-				display: flex;
-				flex-direction: column;
-			}
-
-			uui-input,
-			uui-input-password {
-				width: 100%;
-			}
-
-			h1 {
-				text-align: center;
-				margin-bottom: var(--uui-size-layout-3);
-			}
-
-			#news-checkbox {
-				margin-top: var(--uui-size-space-4);
-			}
-
-			#buttons {
-				display: flex;
-				margin-top: auto;
-			}
-
-			#button-install {
-				margin-left: auto;
-				min-width: 120px;
-			}
-		`,
-	];
+	
 
 	@state()
 	private _userFormData?: { name: string; password: string; email: string; subscribeToNewsletter: boolean };
@@ -157,6 +109,56 @@ export class UmbInstallerUserElement extends UmbLitElement {
 			</uui-form>
 		</div>`;
 	}
+	
+	static styles: CSSResultGroup = [
+		css`
+			:host,
+			#container {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
+			uui-form-layout-item {
+				margin-top: 0;
+				margin-bottom: var(--uui-size-layout-1);
+			}
+
+			uui-form {
+				height: 100%;
+			}
+
+			form {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+
+			uui-input,
+			uui-input-password {
+				width: 100%;
+			}
+
+			h1 {
+				text-align: center;
+				margin-bottom: var(--uui-size-layout-3);
+			}
+
+			#news-checkbox {
+				margin-top: var(--uui-size-space-4);
+			}
+
+			#buttons {
+				display: flex;
+				margin-top: auto;
+			}
+
+			#button-install {
+				margin-left: auto;
+				min-width: 120px;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts
index d66130096b..ebdb9cedab 100644
--- a/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts
@@ -9,18 +9,7 @@ import { UpgradeSettingsResponseModel } from '@umbraco-cms/backoffice/backend-ap
  */
 @customElement('umb-upgrader-view')
 export class UmbUpgraderViewElement extends LitElement {
-	static styles: CSSResultGroup = [
-		css`
-			.center {
-				display: grid;
-				place-items: center;
-				height: 100vh;
-			}
-			.error {
-				color: var(--uui-color-danger);
-			}
-		`,
-	];
+	
 
 	@property({ type: Boolean })
 	fetching = false;
@@ -98,6 +87,19 @@ export class UmbUpgraderViewElement extends LitElement {
 		e.preventDefault();
 		this.dispatchEvent(new CustomEvent('onAuthorizeUpgrade', { detail: e, bubbles: true }));
 	};
+	
+	static styles: CSSResultGroup = [
+		css`
+			.center {
+				display: grid;
+				place-items: center;
+				height: 100vh;
+			}
+			.error {
+				color: var(--uui-color-danger);
+			}
+		`,
+	];
 }
 
 export default UmbUpgraderViewElement;