diff --git a/src/Umbraco.Web.UI.Client/.env b/src/Umbraco.Web.UI.Client/.env
index 76438bfb23..dadbe466c0 100644
--- a/src/Umbraco.Web.UI.Client/.env
+++ b/src/Umbraco.Web.UI.Client/.env
@@ -2,3 +2,4 @@
 VITE_UMBRACO_USE_MSW=on # on = turns on MSW, off = disables all mock handlers
 VITE_UMBRACO_API_URL=http://localhost:11000
 VITE_UMBRACO_INSTALL_STATUS=running # running or must-install or must-upgrade
+VITE_MSW_QUIET=off # on = turns off MSW console logs, off = turns on MSW console logs
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-api/create-extension-element-or-fallback.function.ts b/src/Umbraco.Web.UI.Client/libs/extensions-api/create-extension-element-or-fallback.function.ts
new file mode 100644
index 0000000000..8b207b1191
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-api/create-extension-element-or-fallback.function.ts
@@ -0,0 +1,10 @@
+import { createExtensionElement } from './create-extension-element.function';
+import { isManifestElementableType } from './is-manifest-elementable-type.function';
+
+export async function createExtensionElementOrFallback(manifest: any, fallbackElementName: string): Promise<HTMLElement | undefined> {
+	if (isManifestElementableType(manifest)) {
+		return createExtensionElement(manifest);
+	}
+
+	return Promise.resolve(document.createElement(fallbackElementName));
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-api/index.ts b/src/Umbraco.Web.UI.Client/libs/extensions-api/index.ts
index bd0c6626ca..4104a16115 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-api/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-api/index.ts
@@ -8,5 +8,6 @@ export * from './is-manifest-elementable-type.function';
 export * from './is-manifest-js-type.function';
 export * from './is-manifest-loader-type.function';
 export * from './load-extension.function';
+export * from './create-extension-element-or-fallback.function';
 
 export const umbExtensionsRegistry = new UmbExtensionRegistry();
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts b/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts
index 146003b0c6..7e562cb17b 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-api/registry/extension.registry.ts
@@ -1,5 +1,5 @@
 import { BehaviorSubject, map, Observable } from 'rxjs';
-import type { ManifestTypes, ManifestTypeMap, ManifestBase } from '../../models';
+import type { ManifestTypes, ManifestTypeMap, ManifestBase, ManifestWithLoader, ManifestEntrypoint } from '../../models';
 import { hasDefaultExport } from '../has-default-export.function';
 import { loadExtension } from '../load-extension.function';
 
@@ -13,7 +13,7 @@ export class UmbExtensionRegistry {
 	private _extensions = new BehaviorSubject<Array<ManifestBase>>([]);
 	public readonly extensions = this._extensions.asObservable();
 
-	register(manifest: ManifestTypes & { loader?: () => Promise<object | HTMLElement> }): void {
+	register(manifest: ManifestTypes): void {
 		const extensionsValues = this._extensions.getValue();
 		const extension = extensionsValues.find((extension) => extension.alias === manifest.alias);
 
@@ -26,7 +26,7 @@ export class UmbExtensionRegistry {
 
 		// If entrypoint extension, we should load and run it immediately
 		if (manifest.type === 'entrypoint') {
-			loadExtension(manifest).then((js) => {
+			loadExtension(manifest as ManifestEntrypoint).then((js) => {
 				if (hasDefaultExport(js)) {
 					new js.default();
 				} else {
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts
index d8762da1e0..02856862df 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/models.ts
@@ -18,6 +18,7 @@ import type { ManifestCollectionBulkAction } from './collection-bulk-action.mode
 import type { ManifestCollectionView } from './collection-view.models';
 import type { ManifestHealthCheck } from './health-check.models';
 import type { ManifestSidebarMenuItem } from './sidebar-menu-item.models';
+import type { ManifestTheme } from './theme.models';
 
 export * from './header-app.models';
 export * from './section.models';
@@ -39,6 +40,7 @@ export * from './collection-bulk-action.models';
 export * from './collection-view.models';
 export * from './health-check.models';
 export * from './sidebar-menu-item.models';
+export * from './theme.models';
 
 export type ManifestTypes =
 	| ManifestCustom
@@ -63,7 +65,8 @@ export type ManifestTypes =
 	| ManifestCollectionBulkAction
 	| ManifestCollectionView
 	| ManifestHealthCheck
-	| ManifestSidebarMenuItem;
+	| ManifestSidebarMenuItem
+	| ManifestTheme;
 
 export type ManifestStandardTypes = ManifestTypes['type'];
 
@@ -78,14 +81,29 @@ export interface ManifestBase {
 	weight?: number;
 }
 
-export interface ManifestElement extends ManifestBase {
+export interface ManifestWithLoader<LoaderReturnType> extends ManifestBase {
+	loader?: () => Promise<LoaderReturnType>;
+}
+
+export interface ManifestElement extends ManifestWithLoader<object | HTMLElement> {
 	type: ManifestStandardTypes;
 	js?: string;
 	elementName?: string;
-	loader?: () => Promise<object | HTMLElement>;
+	//loader?: () => Promise<object | HTMLElement>;
 	meta?: any;
 }
 
+export interface ManifestWithView extends ManifestElement {
+	meta: MetaManifestWithView;
+}
+
+export interface MetaManifestWithView {
+	pathname: string;
+	label: string;
+	icon: string;
+}
+
+
 export interface ManifestElementWithElementName extends ManifestElement {
 	elementName: string;
 }
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts
new file mode 100644
index 0000000000..ff2cdcb3f9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/theme.models.ts
@@ -0,0 +1,8 @@
+import type { ManifestWithLoader } from "./models";
+
+
+// TODO: make or find type for JS Module with default export: Would be nice to support css file directly.
+export interface ManifestTheme extends ManifestWithLoader<string> {
+	type: 'theme';
+	css?: string;
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/extensions-registry/workspace-view.models.ts b/src/Umbraco.Web.UI.Client/libs/extensions-registry/workspace-view.models.ts
index 066b37b3ef..acfc5e9062 100644
--- a/src/Umbraco.Web.UI.Client/libs/extensions-registry/workspace-view.models.ts
+++ b/src/Umbraco.Web.UI.Client/libs/extensions-registry/workspace-view.models.ts
@@ -1,6 +1,6 @@
-import type { ManifestElement } from './models';
+import type { ManifestWithView } from './models';
 
-export interface ManifestWorkspaceView extends ManifestElement {
+export interface ManifestWorkspaceView extends ManifestWithView {
 	type: 'workspaceView';
 	meta: MetaEditorView;
 }
diff --git a/src/Umbraco.Web.UI.Client/libs/router/index.ts b/src/Umbraco.Web.UI.Client/libs/router/index.ts
new file mode 100644
index 0000000000..9ba378560a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/router/index.ts
@@ -0,0 +1,3 @@
+export * from './router-slot.element';
+export * from './router-slot-change.event';
+export * from './router-slot-init.event';
diff --git a/src/Umbraco.Web.UI.Client/libs/router/rollup.config.js b/src/Umbraco.Web.UI.Client/libs/router/rollup.config.js
new file mode 100644
index 0000000000..945c0afe88
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/router/rollup.config.js
@@ -0,0 +1,4 @@
+import config from '../../utils/rollup.config.js';
+export default {
+	...config,
+};
diff --git a/src/Umbraco.Web.UI.Client/libs/router/router-slot-change.event.ts b/src/Umbraco.Web.UI.Client/libs/router/router-slot-change.event.ts
new file mode 100644
index 0000000000..d5004c1d27
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/router/router-slot-change.event.ts
@@ -0,0 +1,7 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import type { UmbRouterSlotElement } from './router-slot.element';
+export class UmbRouterSlotChangeEvent extends UUIEvent<never, UmbRouterSlotElement> {
+	constructor() {
+		super('change');
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/router/router-slot-init.event.ts b/src/Umbraco.Web.UI.Client/libs/router/router-slot-init.event.ts
new file mode 100644
index 0000000000..896abe1825
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/router/router-slot-init.event.ts
@@ -0,0 +1,7 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import type { UmbRouterSlotElement } from './router-slot.element';
+export class UmbRouterSlotInitEvent extends UUIEvent<never, UmbRouterSlotElement> {
+	constructor() {
+		super('init');
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/libs/router/router-slot.element.ts
new file mode 100644
index 0000000000..26fbbfd9bb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/libs/router/router-slot.element.ts
@@ -0,0 +1,79 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { IRoute, RouterSlot } from 'router-slot';
+import { UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/router';
+
+/**
+ *  @element umb-router-slot-element
+ *  @description - Component for wrapping Router Slot element, providing some local events for implementation.
+ *  @extends UmbRouterSlotElement
+ */
+@customElement('umb-router-slot')
+export class UmbRouterSlotElement extends LitElement {
+	#router: RouterSlot;
+	#listening = false;
+
+	@property()
+	public get routes(): IRoute[] | undefined {
+		return (this.#router as any).routes;
+	}
+	public set routes(value: IRoute[] | undefined) {
+		(this.#router as any).routes = value;
+	}
+
+	private _routerPath?: string;
+	public get absoluteRouterPath() {
+		return this._routerPath;
+	}
+
+	private _activeLocalPath?: string;
+	public get localActiveViewPath() {
+		return this._activeLocalPath;
+	}
+
+	public get absoluteActiveViewPath() {
+		return this._routerPath + '/' + this._activeLocalPath;
+	}
+
+	constructor() {
+		super();
+		this.#router = document.createElement('router-slot');
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.#listening === false) {
+			window.addEventListener('navigationsuccess', this._onNavigationChanged);
+			this.#listening = true;
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener('navigationsuccess', this._onNavigationChanged);
+		this.#listening = false;
+	}
+
+	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.firstUpdated(_changedProperties);
+		this._routerPath = this.#router.constructAbsolutePath('') || '';
+		this.dispatchEvent(new UmbRouterSlotInitEvent());
+	}
+
+	private _onNavigationChanged = (event?: any) => {
+		if (event.detail.slot === this.#router) {
+			this._activeLocalPath = event.detail.match.route.path;
+			this.dispatchEvent(new UmbRouterSlotChangeEvent());
+		}
+	};
+
+	render() {
+		return this.#router;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-router-slot': UmbRouterSlotElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/libs/utils/umbraco-path.ts b/src/Umbraco.Web.UI.Client/libs/utils/umbraco-path.ts
index 5e0043d3b2..b536ed8a2e 100644
--- a/src/Umbraco.Web.UI.Client/libs/utils/umbraco-path.ts
+++ b/src/Umbraco.Web.UI.Client/libs/utils/umbraco-path.ts
@@ -1,4 +1,3 @@
-import type { Path } from 'msw';
-export function umbracoPath(path: string): Path {
+export function umbracoPath(path: string) {
 	return `/umbraco/management/api/v1${path}`;
 }
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 1d632380f0..056599ad87 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts
@@ -34,10 +34,12 @@ import { UmbDataTypeDetailStore } from './settings/data-types/data-type.detail.s
 import { UmbDataTypeTreeStore } from './settings/data-types/tree/data-type.tree.store';
 import { UmbTemplateTreeStore } from './templating/templates/tree/data/template.tree.store';
 import { UmbTemplateDetailStore } from './templating/templates/workspace/data/template.detail.store';
+import { UmbThemeContext } from './themes/theme.context';
 import { UmbLanguageStore } from './settings/languages/language.store';
-import { UmbThemeService, UMB_THEME_SERVICE_CONTEXT_TOKEN } from './themes/theme.service';
 import { UmbNotificationService, UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/notification';
 
+import '@umbraco-cms/router';
+
 // Domains
 import './settings';
 import './documents';
@@ -102,7 +104,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 
 		this.provideContext(UMB_BACKOFFICE_CONTEXT_TOKEN, new UmbBackofficeContext());
 		this.provideContext(UMB_CURRENT_USER_HISTORY_STORE_CONTEXT_TOKEN, new UmbCurrentUserHistoryStore());
-		this.provideContext(UMB_THEME_SERVICE_CONTEXT_TOKEN, new UmbThemeService());
+		new UmbThemeContext(this);
 	}
 
 	render() {
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 595da98b54..ff30f6b5d5 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
@@ -14,9 +14,9 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 		css`
 			.actions {
 				display: flex;
-				gap: 4px;
+				gap: var(--uui-size-space-1);
 				justify-content: space-between;
-				margin-bottom: 12px;
+				margin-bottom: var(--uui-size-space-4);
 			}
 
 			.actions uui-icon {
@@ -56,7 +56,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
 			}
 			.trackerDisabled::after {
 				content: '';
-				background-color: rgba(250, 250, 250, 0.7);
+				background-color: var(--uui-color-disabled);
 				position: absolute;
 				border-radius: 2px;
 				left: 0;
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 ab1e999c0d..ce43b2b8cd 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
@@ -21,7 +21,7 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
 				display: flex;
 				flex-direction: column;
 				height: 100%;
-				background-color: white;
+				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);
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 be77bffe68..233f1dc28e 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
@@ -16,7 +16,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
 				display: flex;
 				flex-direction: column;
 				height: 100%;
-				background-color: white;
+				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);
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 41c98164f8..66747d2c50 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
@@ -17,7 +17,7 @@ export class UmbDashboardHealthCheckActionElement extends UmbLitElement {
 				margin: var(--uui-size-space-4) 0;
 				display: block;
 				border-radius: var(--uui-border-radius);
-				background-color: #eee;
+				background-color: var(--uui-color-surface-alt);
 			}
 			form {
 				margin: 0;
@@ -30,7 +30,7 @@ export class UmbDashboardHealthCheckActionElement extends UmbLitElement {
 			}
 
 			.action {
-				padding: 20px 25px;
+				padding: var(--uui-size-space-5) var(--uui-size-space-6);
 				width: 100%;
 			}
 
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 3bfa9c7d81..1cf83e820a 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
@@ -43,7 +43,7 @@ export class UmbHealthCheckGroupBoxOverviewElement extends UmbLitElement {
 				cursor: pointer;
 				text-decoration: none;
 				color: var(--uui-color-text);
-				margin-bottom: 10px;
+				margin-bottom: var(--uui-size-space-3);
 				display: block;
 			}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
index 7757f2c912..fc0d05b2bf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/views/edit/data-type-workspace-view-edit.element.ts
@@ -118,7 +118,7 @@ export class UmbDataTypeWorkspaceViewEditElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<uui-box style="margin-bottom: 20px;"> ${this._renderPropertyEditorUI()} </uui-box>
+			<uui-box style="margin-bottom: var(--uui-size-space-5);"> ${this._renderPropertyEditorUI()} </uui-box>
 			${this._renderConfig()} </uui-box>
 		`;
 	}
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 f27e0a9d5d..6d66febbe2 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
@@ -26,6 +26,7 @@ export class UmbBackofficeHeader extends LitElement {
 				--uui-button-padding-top-factor: 1;
 				--uui-button-padding-bottom-factor: 0.5;
 				margin-right: var(--uui-size-space-2);
+				--uui-button-background-color: transparent;
 			}
 
 			#logo img {
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 d876d97a8e..e2c04a8cfe 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
@@ -4,11 +4,10 @@ import { css, html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { IRoutingInfo } from 'router-slot';
 import { UmbSectionContext, UMB_SECTION_CONTEXT_TOKEN } from '../section/section.context';
-import { UmbSectionElement } from '../section/section.element';
 import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context';
-import { createExtensionElement } from '@umbraco-cms/extensions-api';
 import type { ManifestSection } from '@umbraco-cms/models';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { createExtensionElementOrFallback } from '@umbraco-cms/extensions-api';
 
 @defineElement('umb-backoffice-main')
 export class UmbBackofficeMain extends UmbLitElement {
@@ -45,15 +44,18 @@ export class UmbBackofficeMain extends UmbLitElement {
 			this._backofficeContext = _instance;
 			this._observeBackoffice();
 		});
-
 	}
 
 	private async _observeBackoffice() {
-		if(this._backofficeContext) {
-			this.observe(this._backofficeContext.getAllowedSections(), (sections) => {
-				this._sections = sections;
-				this._createRoutes();
-			}, 'observeAllowedSections');
+		if (this._backofficeContext) {
+			this.observe(
+				this._backofficeContext.getAllowedSections(),
+				(sections) => {
+					this._sections = sections;
+					this._createRoutes();
+				},
+				'observeAllowedSections'
+			);
 		}
 	}
 
@@ -64,8 +66,10 @@ export class UmbBackofficeMain extends UmbLitElement {
 		this._routes = this._sections.map((section) => {
 			return {
 				path: this._routePrefix + section.meta.pathname,
-				component: () => this._getSectionElement(section),
-				setup: this._onRouteSetup, // TODO: sometimes we can end up in a state where this callback doesn't get called. It could look like a bug in the router-slot.
+				component: () => createExtensionElementOrFallback(section, 'umb-section'),
+				setup: this._onRouteSetup,
+				// TODO: sometimes we can end up in a state where this callback doesn't get called. It could look like a bug in the router-slot.
+				// Niels: Could this be because _backofficeContext is not available at that state?
 			};
 		});
 
@@ -75,15 +79,6 @@ export class UmbBackofficeMain extends UmbLitElement {
 		});
 	}
 
-	// TODO: Make this a common shared method on @umbraco-cms/extensions-api
-	private _getSectionElement(section: ManifestSection) {
-		if (!section.loader || !section.elementName || !section.js) {
-			return UmbSectionElement;
-		}
-
-		return createExtensionElement(section);
-	}
-
 	private _onRouteSetup = (_component: HTMLElement, info: IRoutingInfo) => {
 		const currentPath = info.match.route.path;
 		const section = this._sections.find((s) => this._routePrefix + s.meta.pathname === currentPath);
@@ -102,7 +97,7 @@ export class UmbBackofficeMain extends UmbLitElement {
 	}
 
 	render() {
-		return html`<router-slot .routes=${this._routes}></router-slot>`;
+		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 
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 6a3b5f9d68..92f2b23cfc 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
@@ -57,7 +57,7 @@ export class UmbBodyLayout extends LitElement {
 
 			#actions {
 				display: flex;
-				gap: 6px;
+				gap: var(--uui-size-space-2);
 				margin: 0 var(--uui-size-layout-1);
 				margin-left: auto;
 			}
@@ -89,18 +89,39 @@ export class UmbBodyLayout extends LitElement {
 
 	render() {
 		return html`
-			<div id="header" style="display:${this.headline || this._headerSlotHasChildren || this._tabsSlotHasChildren ? '' : 'none'}">
+			<div
+				id="header"
+				style="display:${this.headline || this._headerSlotHasChildren || this._tabsSlotHasChildren ? '' : 'none'}">
 				${this.headline ? html`<h3 id="headline">${this.headline}</h3>` : nothing}
 
-				<slot name="header" @slotchange=${(e: Event) => { this._headerSlotHasChildren = this.hasNodes(e)}}></slot>
-				<slot id="tabs" name="tabs" @slotchange=${(e: Event) => { this._tabsSlotHasChildren = this.hasNodes(e)}}></slot>
+				<slot
+					name="header"
+					@slotchange=${(e: Event) => {
+						this._headerSlotHasChildren = this.hasNodes(e);
+					}}></slot>
+				<slot
+					id="tabs"
+					name="tabs"
+					@slotchange=${(e: Event) => {
+						this._tabsSlotHasChildren = this.hasNodes(e);
+					}}></slot>
 			</div>
 			<uui-scroll-container id="main">
 				<slot></slot>
 			</uui-scroll-container>
 			<div id="footer" style="display:${this._footerSlotHasChildren || this._actionsSlotHasChildren ? '' : 'none'}">
-				<slot name="footer" @slotchange=${(e: Event) => { this._footerSlotHasChildren = this.hasNodes(e)}}></slot>
-				<slot id="actions" name="actions" style="display:${this._actionsSlotHasChildren ? '' : 'none'}" @slotchange=${(e: Event) => { this._actionsSlotHasChildren = this.hasNodes(e)}}></slot>
+				<slot
+					name="footer"
+					@slotchange=${(e: Event) => {
+						this._footerSlotHasChildren = this.hasNodes(e);
+					}}></slot>
+				<slot
+					id="actions"
+					name="actions"
+					style="display:${this._actionsSlotHasChildren ? '' : 'none'}"
+					@slotchange=${(e: Event) => {
+						this._actionsSlotHasChildren = this.hasNodes(e);
+					}}></slot>
 			</div>
 		`;
 	}
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 be8e42c548..2095d825fd 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
@@ -6,12 +6,12 @@ import { ManifestHeaderApp } from '@umbraco-cms/extensions-registry';
 
 @customElement('umb-header-app-button')
 export class UmbHeaderAppButton extends LitElement {
-	
 	static styles: CSSResultGroup = [
 		UUITextStyles,
 		css`
 			uui-button {
 				font-size: 18px;
+				--uui-button-background-color: transparent;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
index 3b20551708..90379166a8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts
@@ -23,6 +23,7 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 			#tabs {
 				background-color: var(--uui-color-surface);
 				height: 70px;
+				border-bottom: 1px solid var(--uui-color-border);
 			}
 
 			#scroll-container {
@@ -109,10 +110,11 @@ export class UmbSectionDashboardsElement extends UmbLitElement {
 					setup: (component: Promise<HTMLElement> | HTMLElement, info: IRoutingInfo) => {
 						this._currentDashboardPathname = info.match.route.path;
 						// When its using import, we get an element, when using createExtensionElement we get a Promise.
-						// TODO: this is a bit hacky, can we do it in a more appropriate way
-						(component as any).manifest = dashboard;
+						// TODO: this is a bit hacky, can we do it in a more appropriate way:
 						if ((component as any).then) {
 							(component as any).then((el: any) => (el.manifest = dashboard));
+						} else {
+							(component as any).manifest = dashboard;
 						}
 					},
 				};
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 4f00f0afbe..85d0d581a3 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
@@ -29,7 +29,6 @@ export class UmbSectionSidebarMenuElement extends UmbLitElement {
 		if (!this._sectionContext) return;
 
 		this.observe(this._sectionContext.alias, (alias) => {
-			console.log("this._sectionContext?.alias", alias)
 			this._currentSectionAlias = alias;
 		});
 	}
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 722377a020..43d33d331e 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
@@ -74,6 +74,7 @@ export class UmbTableElement extends LitElement {
 				top: 0;
 				background: white;
 				z-index: 1;
+				background-color: var(--uui-color-surface);
 			}
 
 			uui-table-row uui-checkbox {
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 5ca1c0dbcb..fc697a56c8 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
@@ -1,10 +1,12 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { IRoutingInfo, RouterSlot } from 'router-slot';
+import { IRoutingInfo } from 'router-slot';
 import { map } from 'rxjs';
+import { repeat } from 'lit/directives/repeat.js';
 
-import { createExtensionElement , umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
+import type { UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent } from '@umbraco-cms/router';
+import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
 import type {
 	ManifestWorkspaceAction,
 	ManifestWorkspaceView,
@@ -54,7 +56,7 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 
 			umb-extension-slot[slot='actions'] {
 				display: flex;
-				gap: 6px;
+				gap: var(--uui-size-space-2);
 			}
 		`,
 	];
@@ -62,6 +64,7 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 	@property()
 	public headline = '';
 
+	private _alias = '';
 	/**
 	 * Alias of the workspace. The Layout will render the workspace views that are registered for this workspace alias.
 	 * @public
@@ -70,27 +73,29 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 	 * @default ''
 	 */
 	@property()
-	public alias = '';
+	public get alias() {
+		return this._alias;
+	}
+	public set alias(value) {
+		const oldValue = this._alias;
+		this._alias = value;
+		if (oldValue !== this._alias) {
+			this._observeWorkspaceViews();
+			this.requestUpdate('alias', oldValue);
+		}
+	}
 
 	@state()
 	private _workspaceViews: Array<ManifestWorkspaceView | ManifestWorkspaceViewCollection> = [];
 
 	@state()
-	private _currentView = '';
+	private _routes: any[] = [];
 
 	@state()
-	private _routes: Array<any> = [];
+	private _routerPath?: string;
 
-	private _routerFolder = '';
-
-	connectedCallback(): void {
-		super.connectedCallback();
-
-		this._observeWorkspaceViews();
-
-		/* TODO: find a way to construct absolute urls */
-		this._routerFolder = window.location.pathname.split('/view')[0];
-	}
+	@state()
+	private _activePath?: string;
 
 	private _observeWorkspaceViews() {
 		this.observe(
@@ -104,7 +109,7 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 		);
 	}
 
-	private async _createRoutes() {
+	private _createRoutes() {
 		this._routes = [];
 
 		if (this._workspaceViews.length > 0) {
@@ -120,11 +125,11 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 						return createExtensionElement(view);
 					},
 					setup: (component: Promise<HTMLElement> | HTMLElement, info: IRoutingInfo) => {
-						this._currentView = info.match.route.path;
 						// When its using import, we get an element, when using createExtensionElement we get a Promise.
-						(component as any).manifest = view;
 						if ((component as any).then) {
 							(component as any).then((el: any) => (el.manifest = view));
+						} else {
+							(component as any).manifest = view;
 						}
 					},
 				};
@@ -134,19 +139,6 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 				path: '**',
 				redirectTo: `view/${this._workspaceViews[0].meta.pathname}`,
 			});
-
-			this.requestUpdate();
-			await this.updateComplete;
-
-			this._forceRouteRender();
-		}
-	}
-
-	// TODO: Figure out why this has been necessary for this case. Come up with another case
-	private _forceRouteRender() {
-		const routerSlotEl = this.shadowRoot?.querySelector('router-slot') as RouterSlot;
-		if (routerSlotEl) {
-			routerSlotEl.render();
 		}
 	}
 
@@ -155,12 +147,14 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 			${this._workspaceViews.length > 0
 				? html`
 						<uui-tab-group slot="tabs">
-							${this._workspaceViews.map(
-								(view: ManifestWorkspaceView | ManifestWorkspaceViewCollection) => html`
+							${repeat(
+								this._workspaceViews,
+								(view) => view.alias,
+								(view) => html`
 									<uui-tab
 										.label="${view.meta.label || view.name}"
-										href="${this._routerFolder}/view/${view.meta.pathname}"
-										?active="${this._currentView.includes(view.meta.pathname)}">
+										href="${this._routerPath}/view/${view.meta.pathname}"
+										?active="${'view/' + view.meta.pathname === this._activePath}">
 										<uui-icon slot="icon" name="${view.meta.icon}"></uui-icon>
 										${view.meta.label || view.name}
 									</uui-tab>
@@ -178,7 +172,14 @@ export class UmbWorkspaceLayout extends UmbLitElement {
 				<slot name="header" slot="header"></slot>
 				${this._renderTabs()}
 
-				<router-slot .routes="${this._routes}"></router-slot>
+				<umb-router-slot
+					.routes="${this._routes}"
+					@init=${(event: UmbRouterSlotInitEvent) => {
+						this._routerPath = event.target.absoluteRouterPath;
+					}}
+					@change=${(event: UmbRouterSlotChangeEvent) => {
+						this._activePath = event.target.localActiveViewPath;
+					}}></umb-router-slot>
 				<slot></slot>
 
 				<slot name="footer" slot="footer"></slot>
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 8988fad47c..585629cb9f 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
@@ -29,14 +29,14 @@ export class UmbPropertyActionMenuElement extends UmbLitElement {
 			}
 
 			#dropdown {
-				background-color: white;
+				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: black; /* Change to variable */
+				color: var(--uui-color-text);
 			}
 		`,
 	];
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 32cc9d951d..98a77120c0 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
@@ -32,7 +32,11 @@ export class UmbPropertyEditorUIIconPickerElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<uui-button label="open-icon-picker" look="secondary" @click=${this._openModal} style="margin-right: 9px;">
+			<uui-button
+				label="open-icon-picker"
+				look="secondary"
+				@click=${this._openModal}
+				style="margin-right: var(--uui-size-space-3)">
 				Pick an icon
 			</uui-button>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts
new file mode 100644
index 0000000000..be1f5ad5f7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/manifests.ts
@@ -0,0 +1,26 @@
+import type { ManifestTheme } from '@umbraco-cms/models';
+
+export const themes: Array<ManifestTheme> = [
+	{
+		type: 'theme',
+		alias: 'umb-light-theme',
+		name: 'Light',
+		weight: 300,
+	},
+	{
+		type: 'theme',
+		alias: 'umb-dark-theme',
+		name: 'Dark',
+		css: 'src/backoffice/themes/themes/dark.theme.css',
+		weight: 200,
+	},
+	{
+		type: 'theme',
+		alias: 'umb-high-contrast-theme',
+		name: 'High contrast',
+		css: 'src/backoffice/themes/themes/high-contrast.theme.css',
+		weight: 100,
+	},
+];
+
+export const manifests = themes;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
new file mode 100644
index 0000000000..5e246bc46e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.context.ts
@@ -0,0 +1,88 @@
+import { map } from 'rxjs';
+import { manifests } from './manifests';
+import { UmbContextProviderController, UmbContextToken } from '@umbraco-cms/context-api';
+import { StringState, UmbObserverController } from '@umbraco-cms/observable-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
+import { UmbControllerHostInterface } from '@umbraco-cms/controller';
+import { ManifestTheme } from '@umbraco-cms/extensions-registry';
+
+const LOCAL_STORAGE_KEY = 'umb-theme-alias';
+
+export class UmbThemeContext {
+	private _host: UmbControllerHostInterface;
+
+	#theme = new StringState('umb-light-theme');
+	public readonly theme = this.#theme.asObservable();
+
+	private themeSubscription?: UmbObserverController;
+
+	#styleElement: HTMLLinkElement| HTMLStyleElement | null = null;
+
+	constructor(host: UmbControllerHostInterface) {
+		this._host = host;
+
+		new UmbContextProviderController(host, UMB_THEME_CONTEXT_TOKEN, this);
+
+		const storedTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
+		if (storedTheme) {
+			this.setThemeByAlias(storedTheme);
+		}
+	}
+
+	public setThemeByAlias(themeAlias: string) {
+		this.#theme.next(themeAlias);
+
+		this.themeSubscription?.destroy();
+		if (themeAlias) {
+			localStorage.setItem(LOCAL_STORAGE_KEY, themeAlias);
+			this.themeSubscription = new UmbObserverController(
+				this._host,
+				umbExtensionsRegistry
+					.extensionsOfType('theme')
+					.pipe(map((extensions) => extensions.filter((extension) => extension.alias === themeAlias))),
+				async (themes) => {
+					this.#styleElement?.remove();
+					if (themes.length > 0) {
+						if(themes[0].loader) {
+
+							const styleEl = this.#styleElement = document.createElement('style');
+							styleEl.setAttribute('type', 'text/css');
+							document.head.appendChild(styleEl);
+
+							const result = await themes[0].loader();
+							// Checking that this is still our styleElement, it has not been replaced with another theme in between.
+							if(styleEl === this.#styleElement) {
+								(styleEl as any).appendChild(document.createTextNode(result));
+							}
+
+						} else if (themes[0].css) {
+
+							this.#styleElement = document.createElement('link');
+							this.#styleElement.setAttribute('rel', 'stylesheet');
+							this.#styleElement.setAttribute('href', themes[0].css);
+							document.head.appendChild(this.#styleElement);
+
+						}
+					} else {
+						localStorage.removeItem(LOCAL_STORAGE_KEY);
+						this.#styleElement?.setAttribute('href', '');
+					}
+				}
+			);
+		} else {
+			localStorage.removeItem(LOCAL_STORAGE_KEY);
+			this.#styleElement?.setAttribute('href', '');
+		}
+	}
+}
+
+export const UMB_THEME_CONTEXT_TOKEN = new UmbContextToken<UmbThemeContext>('umbThemeContext');
+
+// TODO: Can we do this in a smarter way:
+const registerExtensions = (manifests: Array<ManifestTheme>) => {
+	manifests.forEach((manifest) => {
+		umbExtensionsRegistry.register(manifest);
+	});
+};
+
+registerExtensions([...manifests]);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.service.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.service.ts
deleted file mode 100644
index d56b4d57a7..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/theme.service.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { dark, highContrast } from './themes';
-import { UmbContextToken } from '@umbraco-cms/context-api';
-import { ArrayState, StringState } from '@umbraco-cms/observable-api';
-
-export interface UmbTheme {
-	name: string;
-	css: string;
-}
-
-export class UmbThemeService {
-
-	// TODO: Turn this into a extension type, get rid of the #themes subject and #themes observable
-	#themes = new ArrayState(<Array<UmbTheme>>[
-		{
-			name: 'Light',
-			css: '',
-		},
-	]);
-	public readonly themes = this.#themes.asObservable();
-
-	#theme = new StringState('Light');
-	public readonly theme = this.#theme.asObservable();
-
-	#styleElement: HTMLStyleElement;
-
-	constructor() {
-		//TODO: Figure out how to extend this with themes from packages
-		this.addTheme(dark);
-		this.addTheme(highContrast);
-
-		this.#styleElement = document.createElement('style');
-		const storedTheme = localStorage.getItem('umb-theme');
-		this.changeTheme(storedTheme ?? this.#theme.value);
-
-		document.documentElement.insertAdjacentElement('beforeend', this.#styleElement);
-	}
-
-	public changeTheme(theme: string) {
-		this.#theme.next(theme);
-		localStorage.setItem('umb-theme', theme);
-
-		// TODO: This should come from the extension API:
-		const themeCss = this.#themes.value.find((t) => t.name === theme)?.css;
-
-		if (themeCss !== undefined) {
-			this.#styleElement.innerHTML = themeCss;
-		}
-	}
-
-	public addTheme(theme: UmbTheme) {
-		this.#themes.next([...this.#themes.value, theme]);
-	}
-}
-
-export const UMB_THEME_SERVICE_CONTEXT_TOKEN = new UmbContextToken<UmbThemeService>(UmbThemeService.name);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/dark.theme.css b/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/dark.theme.css
new file mode 100644
index 0000000000..3b5c546d2c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/dark.theme.css
@@ -0,0 +1,47 @@
+:root {
+	--uui-color-selected: #316dca;
+	--uui-color-selected-emphasis: #3e79d0;
+	--uui-color-selected-standalone: #5b8dd7;
+	--uui-color-selected-contrast: #eeeeef;
+	--uui-color-current: #316dca;
+	--uui-color-current-emphasis: #3e79d0;
+	--uui-color-current-standalone: #5b8dd7;
+	--uui-color-current-contrast: #f000;
+	--uui-color-disabled: #434c56;
+	--uui-color-disabled-standalone: #545d68;
+	--uui-color-disabled-contrast: #fcfcfc4d;
+	--uui-color-header-surface: #21262e;
+	--uui-color-header-contrast: #eeeeef;
+	--uui-color-header-contrast-emphasis: #eeeeef;
+	--uui-color-focus: #316dca;
+	--uui-color-surface: #2d333b;
+	--uui-color-surface-alt: #373e47;
+	--uui-color-surface-emphasis: #434c56;
+	--uui-color-background: #21262e;
+	--uui-color-text: #eeeeef;
+	--uui-color-text-alt: #eeeeef;
+	--uui-color-interactive: #eeeeef;
+	--uui-color-interactive-emphasis: #eeeeef;
+	--uui-color-border: #434c56;
+	--uui-color-border-standalone: #545d68;
+	--uui-color-border-emphasis: #626e7b;
+	--uui-color-divider: #373e47;
+	--uui-color-divider-standalone: #434c56;
+	--uui-color-divider-emphasis: #545d68;
+	--uui-color-default: #316dca;
+	--uui-color-default-emphasis: #316dca;
+	--uui-color-default-standalone: #316dca;
+	--uui-color-default-contrast: #eeeeef;
+	--uui-color-warning: #af7c12;
+	--uui-color-warning-emphasis: #af7c12;
+	--uui-color-warning-standalone: #af7c12;
+	--uui-color-warning-contrast: #eeeeef;
+	--uui-color-danger: #ca3b37;
+	--uui-color-danger-emphasis: #ca3b37;
+	--uui-color-danger-standalone: #ca3b37;
+	--uui-color-danger-contrast: #eeeeef;
+	--uui-color-positive: #347d39;
+	--uui-color-positive-emphasis: #347d39;
+	--uui-color-positive-standalone: #347d39;
+	--uui-color-positive-contrast: #eeeeef;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/dark.theme.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/dark.theme.ts
deleted file mode 100644
index 205d01ec14..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/dark.theme.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { css } from 'lit';
-import { UmbTheme } from '../theme.service';
-
-// TODO: We should get this from UUI, and it should be served through an extension.
-const name = 'Dark';
-const cssResult = css`
-	:root {
-		--uui-color-selected: #316dca;
-		--uui-color-selected-emphasis: #3e79d0;
-		--uui-color-selected-standalone: #5b8dd7;
-		--uui-color-selected-contrast: #eeeeef;
-		--uui-color-current: #316dca;
-		--uui-color-current-emphasis: #3e79d0;
-		--uui-color-current-standalone: #5b8dd7;
-		--uui-color-current-contrast: #f000;
-		--uui-color-disabled: #434c56;
-		--uui-color-disabled-standalone: #545d68;
-		--uui-color-disabled-contrast: #fcfcfc4d;
-		--uui-color-header-surface: #21262e;
-		--uui-color-header-contrast: #eeeeef;
-		--uui-color-header-contrast-emphasis: #eeeeef;
-		--uui-color-focus: #316dca;
-		--uui-color-surface: #2d333b;
-		--uui-color-surface-alt: #373e47;
-		--uui-color-surface-emphasis: #434c56;
-		--uui-color-background: #21262e;
-		--uui-color-text: #eeeeef;
-		--uui-color-text-alt: #eeeeef;
-		--uui-color-interactive: #eeeeef;
-		--uui-color-interactive-emphasis: #eeeeef;
-		--uui-color-border: #434c56;
-		--uui-color-border-standalone: #545d68;
-		--uui-color-border-emphasis: #626e7b;
-		--uui-color-divider: #373e47;
-		--uui-color-divider-standalone: #434c56;
-		--uui-color-divider-emphasis: #545d68;
-		--uui-color-default: #316dca;
-		--uui-color-default-emphasis: #316dca;
-		--uui-color-default-standalone: #316dca;
-		--uui-color-default-contrast: #eeeeef;
-		--uui-color-warning: #af7c12;
-		--uui-color-warning-emphasis: #af7c12;
-		--uui-color-warning-standalone: #af7c12;
-		--uui-color-warning-contrast: #eeeeef;
-		--uui-color-danger: #ca3b37;
-		--uui-color-danger-emphasis: #ca3b37;
-		--uui-color-danger-standalone: #ca3b37;
-		--uui-color-danger-contrast: #eeeeef;
-		--uui-color-positive: #347d39;
-		--uui-color-positive-emphasis: #347d39;
-		--uui-color-positive-standalone: #347d39;
-		--uui-color-positive-contrast: #eeeeef;
-	}
-`;
-
-export const dark: UmbTheme = {
-	name: name,
-	css: cssResult.cssText,
-};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/high-contrast.theme.css b/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/high-contrast.theme.css
new file mode 100644
index 0000000000..6e84c57c7e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/high-contrast.theme.css
@@ -0,0 +1,53 @@
+:root {
+	--uui-color-selected: var(--uui-palette-violet-blue, #3544b1);
+	--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light, rgb(70, 86, 200));
+	--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark, rgb(54, 65, 156));
+	--uui-color-selected-contrast: #fff;
+	--uui-color-current: var(--uui-palette-spanish-pink, #f5c1bc);
+	--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light, rgb(248, 214, 211));
+	--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark, rgb(232, 192, 189));
+	--uui-color-current-contrast: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-disabled: var(--uui-palette-sand, #f3f3f5);
+	--uui-color-disabled-standalone: var(--uui-palette-sand-dark, rgb(226, 226, 226));
+	--uui-color-disabled-contrast: var(--uui-palette-grey, #c4c4c4);
+	--uui-color-header-surface: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-header-contrast: #fff;
+	--uui-color-header-contrast-emphasis: #fff;
+	--uui-color-focus: var(--uui-palette-malibu, #3879ff);
+	--uui-color-surface: #fff;
+	--uui-color-surface-alt: #fff;
+	--uui-color-surface-emphasis: #dadada;
+	--uui-color-background: #fff;
+	--uui-color-text: var(--uui-palette-black, #060606);
+	--uui-color-text-alt: var(--uui-palette-dune-black, #2e2b29);
+	--uui-color-interactive: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-interactive-emphasis: var(--uui-palette-violet-blue, #3544b1);
+	--uui-color-border: #000000;
+	--uui-color-border-standalone: #000000;
+	--uui-color-border-emphasis: #000000;
+	--uui-color-divider: #000000;
+	--uui-color-divider-standalone: #000000;
+	--uui-color-divider-emphasis: #000000;
+	--uui-color-default: var(--uui-palette-space-cadet, #1b264f);
+	--uui-color-default-emphasis: var(--uui-palette-violet-blue, #3544b1);
+	--uui-color-default-standalone: var(--uui-palette-space-cadet-dark, rgb(28, 35, 59));
+	--uui-color-default-contrast: #fff;
+	--uui-color-warning: #ffd621;
+	--uui-color-warning-emphasis: #ffdc41;
+	--uui-color-warning-standalone: #ffdd43;
+	--uui-color-warning-contrast: #000;
+	--uui-color-danger: #c60239;
+	--uui-color-danger-emphasis: #da114a;
+	--uui-color-danger-standalone: #d0003b;
+	--uui-color-danger-contrast: white;
+	--uui-color-positive: #0d8844;
+	--uui-color-positive-emphasis: #159c52;
+	--uui-color-positive-standalone: #1cae5e;
+	--uui-color-positive-contrast: #fff;
+
+	--uui-shadow-depth-1: 0 0 0px 1px black;
+	--uui-shadow-depth-2: 0 0 0px 1px black;
+	--uui-shadow-depth-3: 0 0 0px 1px black;
+	--uui-shadow-depth-4: 0 0 0px 1px black;
+	--uui-shadow-depth-5: 0 0 0px 1px black;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/high-contrast.theme.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/high-contrast.theme.ts
deleted file mode 100644
index d7b1090c91..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/high-contrast.theme.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { css } from 'lit';
-import { UmbTheme } from '../theme.service';
-
-// TODO: We should get this from UUI, and it should be served through an extension.
-const name = 'High Contrast';
-const cssResult = css`
-	:root {
-		--uui-color-selected: var(--uui-palette-violet-blue, #3544b1);
-		--uui-color-selected-emphasis: var(--uui-palette-violet-blue-light, rgb(70, 86, 200));
-		--uui-color-selected-standalone: var(--uui-palette-violet-blue-dark, rgb(54, 65, 156));
-		--uui-color-selected-contrast: #fff;
-		--uui-color-current: var(--uui-palette-spanish-pink, #f5c1bc);
-		--uui-color-current-emphasis: var(--uui-palette-spanish-pink-light, rgb(248, 214, 211));
-		--uui-color-current-standalone: var(--uui-palette-spanish-pink-dark, rgb(232, 192, 189));
-		--uui-color-current-contrast: var(--uui-palette-space-cadet, #1b264f);
-		--uui-color-disabled: var(--uui-palette-sand, #f3f3f5);
-		--uui-color-disabled-standalone: var(--uui-palette-sand-dark, rgb(226, 226, 226));
-		--uui-color-disabled-contrast: var(--uui-palette-grey, #c4c4c4);
-		--uui-color-header-surface: var(--uui-palette-space-cadet, #1b264f);
-		--uui-color-header-contrast: #fff;
-		--uui-color-header-contrast-emphasis: #fff;
-		--uui-color-focus: var(--uui-palette-malibu, #3879ff);
-		--uui-color-surface: #fff;
-		--uui-color-surface-alt: #fff;
-		--uui-color-surface-emphasis: #dadada;
-		--uui-color-background: #fff;
-		--uui-color-text: var(--uui-palette-black, #060606);
-		--uui-color-text-alt: var(--uui-palette-dune-black, #2e2b29);
-		--uui-color-interactive: var(--uui-palette-space-cadet, #1b264f);
-		--uui-color-interactive-emphasis: var(--uui-palette-violet-blue, #3544b1);
-		--uui-color-border: #000000;
-		--uui-color-border-standalone: #000000;
-		--uui-color-border-emphasis: #000000;
-		--uui-color-divider: #000000;
-		--uui-color-divider-standalone: #000000;
-		--uui-color-divider-emphasis: #000000;
-		--uui-color-default: var(--uui-palette-space-cadet, #1b264f);
-		--uui-color-default-emphasis: var(--uui-palette-violet-blue, #3544b1);
-		--uui-color-default-standalone: var(--uui-palette-space-cadet-dark, rgb(28, 35, 59));
-		--uui-color-default-contrast: #fff;
-		--uui-color-warning: #ffd621;
-		--uui-color-warning-emphasis: #ffdc41;
-		--uui-color-warning-standalone: #ffdd43;
-		--uui-color-warning-contrast: #000;
-		--uui-color-danger: #c60239;
-		--uui-color-danger-emphasis: #da114a;
-		--uui-color-danger-standalone: #d0003b;
-		--uui-color-danger-contrast: white;
-		--uui-color-positive: #0d8844;
-		--uui-color-positive-emphasis: #159c52;
-		--uui-color-positive-standalone: #1cae5e;
-		--uui-color-positive-contrast: #fff;
-
-		--uui-shadow-depth-1: 0 0 0px 1px black;
-		--uui-shadow-depth-2: 0 0 0px 1px black;
-		--uui-shadow-depth-3: 0 0 0px 1px black;
-		--uui-shadow-depth-4: 0 0 0px 1px black;
-		--uui-shadow-depth-5: 0 0 0px 1px black;
-	}
-`;
-
-export const highContrast: UmbTheme = {
-	name: name,
-	css: cssResult.cssText,
-};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/index.ts
deleted file mode 100644
index cbee9b178f..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/themes/themes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './dark.theme';
-export * from './high-contrast.theme';
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 d52ca87f5e..1c2112fbba 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
@@ -13,6 +13,7 @@ export class UmbCurrentUserHeaderApp extends UmbLitElement {
 		css`
 			uui-button {
 				font-size: 14px;
+				--uui-button-background-color: transparent;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts
index ffe608c698..84ce43e311 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/current-user/user-dashboard-themes.element.ts
@@ -2,8 +2,10 @@ import { css, html } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, state } from 'lit/decorators.js';
 import { UUISelectEvent } from '@umbraco-ui/uui';
-import { UmbThemeService, UMB_THEME_SERVICE_CONTEXT_TOKEN } from '../../themes/theme.service';
+import { UmbThemeContext, UMB_THEME_CONTEXT_TOKEN } from '../../themes/theme.context';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
+import { ManifestTheme } from '@umbraco-cms/extensions-registry';
 
 @customElement('umb-user-dashboard-test')
 export class UmbUserDashboardTestElement extends UmbLitElement {
@@ -15,32 +17,32 @@ export class UmbUserDashboardTestElement extends UmbLitElement {
 				flex-direction: column;
 				gap: var(--uui-size-space-4);
 				padding: var(--uui-size-space-5);
-				border: 1px solid var(--uui-color-border);
 				background: var(--uui-color-surface);
 				color: var(--uui-color-text);
 				border-radius: var(--uui-border-radius);
+				box-shadow: var(--uui-shadow-depth-1);
 			}
 		`,
 	];
 
-	#themeService?: UmbThemeService;
+	#themeService?: UmbThemeContext;
 
 	@state()
-	private _theme = '';
+	private _themeAlias: string | null = null;
 
 	@state()
-	private _themes: Array<string> = [];
+	private _themes: Array<ManifestTheme> = [];
 
 	constructor() {
 		super();
-		this.consumeContext(UMB_THEME_SERVICE_CONTEXT_TOKEN, (instance) => {
+		this.consumeContext(UMB_THEME_CONTEXT_TOKEN, (instance) => {
 			this.#themeService = instance;
-			instance.theme.subscribe((theme) => {
-				this._theme = theme;
+			instance.theme.subscribe((themeAlias) => {
+				this._themeAlias = themeAlias;
 			});
-			// TODO: We should get rid of the #themes state and instead use an extension point:
-			instance.themes.subscribe((themes) => {
-				this._themes = themes.map((t) => t.name);
+
+			umbExtensionsRegistry.extensionsOfType('theme').subscribe((themes) => {
+				this._themes = themes;
 			});
 		});
 	}
@@ -50,11 +52,11 @@ export class UmbUserDashboardTestElement extends UmbLitElement {
 
 		const theme = event.target.value.toString();
 
-		this.#themeService.changeTheme(theme);
+		this.#themeService.setThemeByAlias(theme);
 	}
 
 	get options() {
-		return this._themes.map((t) => ({ name: t, value: t, selected: t === this._theme }));
+		return this._themes.map((t) => ({ name: t.name, value: t.alias, selected: t.alias === this._themeAlias }));
 	}
 
 	render() {
@@ -63,7 +65,7 @@ export class UmbUserDashboardTestElement extends UmbLitElement {
 			<uui-select
 				label="theme select"
 				@change=${this._handleThemeChange}
-				.value=${this._theme}
+				.value=${this._themeAlias}
 				.options=${this.options}></uui-select>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/column-layouts/name/user-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/column-layouts/name/user-table-name-column-layout.element.ts
index 27bdc347ad..bf6d9fa7af 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/column-layouts/name/user-table-name-column-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/users/user-section/views/users/list-view-layouts/table/column-layouts/name/user-table-name-column-layout.element.ts
@@ -1,9 +1,6 @@
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type {
-	UmbTableColumn,
-	UmbTableItem,
-} from '../../../../../../../../shared/components/table/table.element';
+import type { UmbTableColumn, UmbTableItem } from '../../../../../../../../shared/components/table/table.element';
 
 @customElement('umb-user-table-name-column-layout')
 export class UmbUserTableNameColumnLayoutElement extends LitElement {
@@ -18,7 +15,7 @@ export class UmbUserTableNameColumnLayoutElement extends LitElement {
 
 	render() {
 		return html` <div style="display: flex; align-items: center;">
-			<uui-avatar name="${this.value.name}" style="margin-right: 10px;"></uui-avatar>
+			<uui-avatar name="${this.value.name}" style="margin-right: var(--uui-size-space-3);"></uui-avatar>
 			<a style="font-weight: bold;" href="section/users/view/users/user/${this.item.key}">${this.value.name}</a>
 		</div>`;
 	}
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 1cf7e2456e..474931b49f 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
@@ -44,7 +44,7 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 				display: flex;
 				justify-content: space-between;
 				white-space: nowrap;
-				gap: 16px;
+				gap: var(--uui-size-space-5);
 				align-items: center;
 			}
 			#user-list {
@@ -61,7 +61,7 @@ export class UmbWorkspaceViewUsersOverviewElement extends UmbLitElement {
 
 			.filter-dropdown {
 				display: flex;
-				gap: 8px;
+				gap: var(--uui-size-space-3);
 				flex-direction: column;
 				background-color: var(--uui-color-surface);
 				padding: var(--uui-size-space-4);
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/browser.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/browser.ts
index cbaa6de1f7..57b0cd42be 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/browser.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/browser.ts
@@ -1,19 +1,17 @@
 import { MockedRequest, setupWorker } from 'msw';
-
 import { handlers } from './browser-handlers';
+import { umbracoPath } from '@umbraco-cms/utils';
 
 const worker = setupWorker(...handlers);
 
 export const onUnhandledRequest = (req: MockedRequest) => {
-	if (req.url.pathname.startsWith('/node_modules/')) return;
-	if (req.url.pathname.startsWith('/src/')) return;
-	if (req.url.pathname.startsWith('/icons/')) return;
-	if (req.destination === 'image') return;
-
-	console.warn('Found an unhandled %s request to %s', req.method, req.url.href);
+	if (req.url.pathname.startsWith(umbracoPath(''))) {
+		console.warn('Found an unhandled %s request to %s', req.method, req.url.href);
+	}
 };
 
 export const startMockServiceWorker = () =>
 	worker.start({
 		onUnhandledRequest,
+		quiet: import.meta.env.VITE_MSW_QUIET === 'on',
 	});
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts
index 575654456c..49d823ebfb 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/content-picker/modal-layout-content-picker.element.ts
@@ -17,8 +17,8 @@ export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<Um
 		UUITextStyles,
 		css`
 			h3 {
-				margin-left: 16px;
-				margin-right: 16px;
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
 			}
 
 			uui-input {
@@ -34,7 +34,7 @@ export class UmbModalLayoutContentPickerElement extends UmbModalLayoutElement<Um
 			#content-list {
 				display: flex;
 				flex-direction: column;
-				gap: 8px;
+				gap: var(--uui-size-space-3);
 			}
 
 			.content-item {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
index f47294058e..fb85c037e8 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/icon-picker/modal-layout-icon-picker.element.ts
@@ -29,7 +29,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 				display: flex;
 				flex-direction: column;
 				height: 100%;
-				background-color: white;
+				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);
@@ -46,7 +46,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 				width: 100%;
 			}
 			#searchbar_icon {
-				padding-left: 6px;
+				padding-left: var(--uui-size-space-2);
 			}
 
 			#icon-selection {
@@ -60,10 +60,10 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 
 			#icon-selection .icon {
 				display: inline-block;
-				border-radius: 2px;
+				border-radius: var(--uui-border-radius);
 				width: 100%;
 				height: 100%;
-				padding: 8px;
+				padding: var(--uui-size-space-3);
 				box-sizing: border-box;
 			}
 
@@ -74,7 +74,7 @@ export class UmbModalLayoutIconPickerElement extends UmbModalLayoutElement<UmbMo
 			#icon-selection .icon:focus,
 			#icon-selection .icon:hover,
 			#icon-selection .icon.selected {
-				background-color: rgba(0, 0, 0, 0.1);
+				background-color: var(--uui-color-selected);
 			}
 
 			uui-button {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts
index df670b04ab..e48db5f49c 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/media-picker/modal-layout-media-picker.element.ts
@@ -16,8 +16,8 @@ export class UmbModalLayoutMediaPickerElement extends UmbModalLayoutElement<UmbM
 		UUITextStyles,
 		css`
 			h3 {
-				margin-left: 16px;
-				margin-right: 16px;
+				margin-left: var(--uui-size-space-5);
+				margin-right: var(--uui-size-space-5);
 			}
 
 			uui-input {
@@ -33,7 +33,7 @@ export class UmbModalLayoutMediaPickerElement extends UmbModalLayoutElement<UmbM
 			#content-list {
 				display: flex;
 				flex-direction: column;
-				gap: 8px;
+				gap: var(--uui-size-space-3);
 			}
 
 			.content-item {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts
index 0bfba481a9..ff3d8ac970 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/modal-layout-current-user.element.ts
@@ -21,6 +21,7 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
 		css`
 			:host {
 				display: block;
+				color: var(--uui-color-text);
 			}
 			:host,
 			umb-workspace-layout {
@@ -56,7 +57,7 @@ export class UmbModalLayoutCurrentUserElement extends UmbLitElement {
 				text-decoration: none;
 			}
 			.history-item uui-icon {
-				margin-top: 2px;
+				margin-top: var(--uui-size-space-1);
 			}
 			.history-item:hover {
 				color: var(--uui-color-interactive-emphasis);
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-section/picker-layout-section.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-section/picker-layout-section.element.ts
index 6b2db6d328..21b0608262 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-section/picker-layout-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-section/picker-layout-section.element.ts
@@ -30,7 +30,7 @@ export class UmbPickerLayoutSectionElement extends UmbModalLayoutPickerBase {
 				padding: var(--uui-size-4) var(--uui-size-2);
 				gap: var(--uui-size-space-5);
 				align-items: center;
-				border-radius: var(--uui-size-2);
+				border-radius: var(--uui-border-radius);
 				cursor: pointer;
 			}
 			.item.selected {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts
index 4ef941cf50..d05474cf87 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user-group/picker-layout-user-group.element.ts
@@ -31,7 +31,7 @@ export class UmbPickerLayoutUserGroupElement extends UmbModalLayoutPickerBase {
 				padding: var(--uui-size-4) var(--uui-size-2);
 				gap: var(--uui-size-space-5);
 				align-items: center;
-				border-radius: var(--uui-size-2);
+				border-radius: var(--uui-border-radius);
 				cursor: pointer;
 			}
 			.item.selected {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user/picker-layout-user.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user/picker-layout-user.element.ts
index cdbe21b290..452d26ca4f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user/picker-layout-user.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/picker-user/picker-layout-user.element.ts
@@ -33,7 +33,7 @@ export class UmbPickerLayoutUserElement extends UmbModalLayoutPickerBase {
 				gap: var(--uui-size-space-5);
 				cursor: pointer;
 				position: relative;
-				border-radius: var(--uui-size-2);
+				border-radius: var(--uui-border-radius);
 			}
 			.item.selected {
 				background-color: var(--uui-color-selected);
diff --git a/src/Umbraco.Web.UI.Client/src/vite-env.d.ts b/src/Umbraco.Web.UI.Client/src/vite-env.d.ts
index 794bc6182e..b045b61a0c 100644
--- a/src/Umbraco.Web.UI.Client/src/vite-env.d.ts
+++ b/src/Umbraco.Web.UI.Client/src/vite-env.d.ts
@@ -4,4 +4,5 @@ interface ImportMetaEnv {
 	VITE_UMBRACO_INSTALL_STATUS: 'running' | 'must-upgrade' | 'must-install';
 	VITE_UMBRACO_API_URL: string;
 	VITE_UMBRACO_USE_MSW: 'on' | 'off';
+	VITE_MSW_QUIET: 'on' | 'off';
 }
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 3a3e9d3560..3404ae3701 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -32,6 +32,7 @@
 			"@umbraco-cms/notification": ["libs/notification"],
 			"@umbraco-cms/observable-api": ["libs/observable-api"],
 			"@umbraco-cms/utils": ["libs/utils"],
+			"@umbraco-cms/router": ["libs/router"],
 			"@umbraco-cms/test-utils": ["libs/test-utils"],
 			"@umbraco-cms/resources": ["libs/resources"],
 			"@umbraco-cms/store": ["libs/store"],
diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
index b71228b062..c2af3f5141 100644
--- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
+++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs
@@ -25,7 +25,8 @@ export default {
 						'@umbraco-cms/store': './libs/store/index.ts',
 						'@umbraco-cms/utils': './libs/utils/index.ts',
 						'@umbraco-cms/test-utils': './libs/test-utils/index.ts',
-						'@umbraco-cms/resources': './libs/resources/index.ts'
+						'@umbraco-cms/resources': './libs/resources/index.ts',
+						'@umbraco-cms/router': './libs/router/index.ts'
 					},
 				},
 			},