diff --git a/src/Umbraco.Web.UI.Client/examples/ufm-custom-component/index.ts b/src/Umbraco.Web.UI.Client/examples/ufm-custom-component/index.ts
index af49cdc0f3..67d3281921 100644
--- a/src/Umbraco.Web.UI.Client/examples/ufm-custom-component/index.ts
+++ b/src/Umbraco.Web.UI.Client/examples/ufm-custom-component/index.ts
@@ -8,6 +8,7 @@ export const manifests: Array<ManifestUfmComponent> = [
 		api: () => import('./custom-ufm-component.js'),
 		meta: {
 			marker: '%',
+			alias: 'myCustomComponent',
 		},
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/examples/validation-context/index.ts b/src/Umbraco.Web.UI.Client/examples/validation-context/index.ts
new file mode 100644
index 0000000000..b64c960171
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/examples/validation-context/index.ts
@@ -0,0 +1,23 @@
+import type { ManifestDashboard } from '@umbraco-cms/backoffice/dashboard';
+
+const dashboard : ManifestDashboard = {
+	type: 'dashboard',
+	alias: 'Demo.Dashboard',
+	name: 'Demo Dashboard Validation Context',
+	weight: 1000,
+	element: () => import('./validation-context-dashboard.js'),
+	meta: {
+			label: 'Validation Context Demo',
+			pathname: 'demo'
+	},
+	conditions : [
+			{
+					alias : "Umb.Condition.SectionAlias",
+					match : "Umb.Section.Content"
+			}
+	]
+}
+
+export const manifests = [
+	dashboard
+];
diff --git a/src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts
new file mode 100644
index 0000000000..8fd8587c34
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts
@@ -0,0 +1,219 @@
+import { html, customElement, css, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_VALIDATION_CONTEXT, umbBindToValidation, UmbValidationContext } from '@umbraco-cms/backoffice/validation';
+
+@customElement('umb-example-validation-context-dashboard')
+export class UmbExampleValidationContextDashboard extends UmbLitElement {
+
+	readonly validation = new UmbValidationContext(this);
+
+	@state()
+	name = '';
+
+	@state()
+	email = '';
+
+	@state()
+	city = '';
+
+	@state()
+	country = '';
+
+	@state()
+  messages? : any[]
+
+	@state()
+	totalErrorCount = 0;
+
+	@state()
+	tab1ErrorCount = 0;
+
+	@state()
+	tab2ErrorCount = 0;
+
+	@state()
+	tab = "1";
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_VALIDATION_CONTEXT,(validationContext)=>{
+
+      this.observe(validationContext.messages.messages,(messages)=>{
+        this.messages = messages;
+      },'observeValidationMessages')
+
+			// Observe all errors
+			this.validation.messages.messagesOfPathAndDescendant('$.form').subscribe((value)=>{
+				this.totalErrorCount = [...new Set(value.map(x=>x.path))].length;
+			});
+
+			// Observe errors for tab1, note that we only use part of the full JSONPath
+			this.validation.messages.messagesOfPathAndDescendant('$.form.tab1').subscribe((value)=>{
+				this.tab1ErrorCount = [...new Set(value.map(x=>x.path))].length;
+			});
+
+			// Observe errors for tab2, note that we only use part of the full JSONPath
+			this.validation.messages.messagesOfPathAndDescendant('$.form.tab2').subscribe((value)=>{
+				this.tab2ErrorCount = [...new Set(value.map(x=>x.path))].length;
+			});
+
+    });
+	}
+
+	#onTabChange(e:Event) {
+		this.tab = (e.target as HTMLElement).getAttribute('data-tab') as string;
+	}
+
+	#handleSave() {
+
+		// fake server validation-errors for all fields
+		if(this.name == '')
+			this.validation.messages.addMessage('server','$.form.tab1.name','Name server-error message','4875e113-cd0c-4c57-ac92-53d677ba31ec');
+		if(this.email == '')
+			this.validation.messages.addMessage('server','$.form.tab1.email','Email server-error message','a47e287b-4ce6-4e8b-8e05-614e7cec1a2a');
+		if(this.city == '')
+			this.validation.messages.addMessage('server','$.form.tab2.city','City server-error message','8dfc2f15-fb9a-463b-bcec-2c5d3ba2d07d');
+		if(this.country == '')
+			this.validation.messages.addMessage('server','$.form.tab2.country','Country server-error message','d98624f6-82a2-4e94-822a-776b44b01495');
+	}
+
+	override render() {
+		return html`
+			<uui-box>
+				This is a demo of how the Validation Context can be used to validate a form with multiple steps. Start typing in the form or press Save to trigger validation.
+				<hr/>
+				Total errors: ${this.totalErrorCount}
+				<hr/>
+				<uui-tab-group @click=${this.#onTabChange}>
+          <uui-tab ?active=${this.tab == '1'} data-tab="1">
+						Tab 1
+						${when(this.tab1ErrorCount,()=>html`
+							<uui-badge color="danger">${this.tab1ErrorCount}</uui-badge>
+						`)}
+					</uui-tab>
+          <uui-tab ?active=${this.tab == '2'} data-tab="2">
+						Tab 2
+						${when(this.tab2ErrorCount,()=>html`
+							<uui-badge color="danger">${this.tab2ErrorCount}</uui-badge>
+						`)}
+					</uui-tab>
+        </uui-tab-group>
+
+				${when(this.tab=='1',()=>html`
+					${this.#renderTab1()}
+				`)}
+				${when(this.tab=='2',()=>html`
+					${this.#renderTab2()}
+				`)}
+
+				<uui-button look="primary" color="positive" @click=${this.#handleSave}>Save</uui-button>
+				<hr/>
+				<h3>Validation Context Messages</h3>
+				<pre>${JSON.stringify(this.messages ?? [],null,3)}</pre>
+			</uui-box>
+		`
+	}
+
+	#renderTab1() {
+		return html`
+			<uui-form>
+				<form>
+					<div>
+					<label>Name</label>
+					<uui-form-validation-message>
+						<uui-input
+							type="text"
+							.value=${this.name}
+							@input=${(e: InputEvent)=>this.name = (e.target as HTMLInputElement).value}
+							${umbBindToValidation(this,'$.form.tab1.name',this.name)}
+							required></uui-input>
+					</uui-form-validation-message>
+					</div>
+					<label>E-mail</label>
+					<uui-form-validation-message>
+						<uui-input
+							type="email"
+							.value=${this.email}
+							@input=${(e: InputEvent)=>this.email = (e.target as HTMLInputElement).value}
+							${umbBindToValidation(this,'$.form.tab1.email',this.email)}
+							required></uui-input>
+					</uui-form-validation-message>
+				</form>
+			</uui-form>
+		`
+	}
+
+	#renderTab2() {
+		return html`
+			<uui-form>
+				<form>
+					<div>
+					<label>City</label>
+					<uui-form-validation-message>
+						<uui-input
+							type="text"
+							.value=${this.city}
+							@input=${(e: InputEvent)=>this.city = (e.target as HTMLInputElement).value}
+							${umbBindToValidation(this,'$.form.tab2.city',this.city)}
+							required></uui-input>
+					</uui-form-validation-message>
+					</div>
+					<label>Country</label>
+					<uui-form-validation-message>
+						<uui-input
+							type="text"
+							.value=${this.country}
+							@input=${(e: InputEvent)=>this.country = (e.target as HTMLInputElement).value}
+							${umbBindToValidation(this,'$.form.tab2.country',this.country)}
+							required></uui-input>
+					</uui-form-validation-message>
+				</form>
+			</uui-form>
+		`
+	}
+
+
+
+	static override styles = [css`
+
+		uui-badge {
+			top:0;
+			right:0;
+			font-size:10px;
+			min-width:17px;
+			min-height:17px;
+
+		}
+
+		label {
+			display:block;
+		}
+
+    uui-box {
+      margin:20px;
+    }
+
+		uui-button {
+			margin-top:1rem;
+		}
+
+		pre {
+      text-align:left;
+      padding:10px;
+      border:1px dotted #6f6f6f;
+      background: #f2f2f2;
+      font-size: 11px;
+      line-height: 1.3em;
+    }
+
+  `]
+}
+
+export default UmbExampleValidationContextDashboard;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-example-validation-context-dashboard': UmbExampleValidationContextDashboard;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/index.ts b/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/index.ts
index 2bd252893b..edc248b4a9 100644
--- a/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/index.ts
+++ b/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/index.ts
@@ -1,3 +1,5 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'workspaceContext',
@@ -6,7 +8,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./counter-workspace-context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
@@ -25,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
@@ -43,7 +45,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 0242e359b1..168c6ae73d 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -41,6 +41,7 @@
 		"./document": "./dist-cms/packages/documents/documents/index.js",
 		"./entity-action": "./dist-cms/packages/core/entity-action/index.js",
 		"./entity-bulk-action": "./dist-cms/packages/core/entity-bulk-action/index.js",
+		"./entity-create-option-action": "./dist-cms/packages/core/entity-create-option-action/index.js",
 		"./entity": "./dist-cms/packages/core/entity/index.js",
 		"./event": "./dist-cms/packages/core/event/index.js",
 		"./extension-registry": "./dist-cms/packages/core/extension-registry/index.js",
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts
index 5f57427859..8211f08edc 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/ar.ts
@@ -481,7 +481,7 @@ export default {
 			'قد يكون تغيير الثقافة للغة عملية مكلفة وستؤدي إلى إعادة بناء ذاكرة التخزين المؤقت للمحتوى والفهارس',
 		lastEdited: 'آخر تحرير',
 		link: 'رابط',
-		linkinternal: 'رابط داخلي:',
+		linkinternal: 'رابط داخلي',
 		linklocaltip: 'عند استخدام الروابط المحلية، أدخل "#" أمام الرابط',
 		linknewwindow: 'فتح في نافذة جديدة؟',
 		macroDoesNotHaveProperties: 'هذا الماكرو لا يحتوي على خصائص يمكنك تحريرها',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts
index 159d15d541..eebc3ee1e5 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/bs.ts
@@ -482,7 +482,7 @@ export default {
 			'Promjena kulture jezika može biti skupa operacija i rezultirat će\n       u kešu sadržaja i indeksima koji se rekonstruišu\n    ',
 		lastEdited: 'Posljednji put uređeno',
 		link: 'Link',
-		linkinternal: 'Interni link:',
+		linkinternal: 'Interni link',
 		linklocaltip: 'Kada koristite lokalne veze, umetnite "#" ispred linka',
 		linknewwindow: 'Otvori u novom prozoru?',
 		macroDoesNotHaveProperties: 'Ovaj makro ne sadrži svojstva koja možete uređivati',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts
index 0f47ba053f..90f89601a6 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/cs-cz.ts
@@ -429,7 +429,7 @@ export default {
 			'Změna kultury jazyka může být náročná operace a bude mít za následek opětovné sestavení mezipaměti obsahu a indexů',
 		lastEdited: 'Naposledy editováno',
 		link: 'Odkaz',
-		linkinternal: 'Místní odkaz:',
+		linkinternal: 'Místní odkaz',
 		linklocaltip: 'Při používání místních odkazů vložte znak "#" před odkaz',
 		linknewwindow: 'Otevřít v novém okně?',
 		macroDoesNotHaveProperties: 'Toto makro nemá žádné vlastnosti, které by bylo možno editovat',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts
index 01ca531714..a3b0dc27b5 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/cy-gb.ts
@@ -504,7 +504,7 @@ export default {
 			"Gall newid y diwylliant ar gyfer iaith fod yn weithrediad drud a bydd yn arwain at ailadeiladu'r storfa cynnwys a'r mynegeion",
 		lastEdited: 'Golygwyd ddiwethaf',
 		link: 'Dolen',
-		linkinternal: 'Dolen fewnol:',
+		linkinternal: 'Dolen fewnol',
 		linklocaltip: 'Wrth ddefnyddio dolenni leol, defnyddiwch "#" o flaen y ddolen',
 		linknewwindow: 'Agor mewn ffenestr newydd?',
 		macroDoesNotHaveProperties: "Nid yw'r macro yma yn cynnwys unrhyw briodweddau gallwch chi olygu",
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts
index b95bdce162..224cf316de 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts
@@ -499,7 +499,7 @@ export default {
 			'Ændring af kulturen for et sprog kan forsage en krævende opration og vil\n      resultere i indholds cache og indeksering vil blive genlavet\n    ',
 		lastEdited: 'Sidst redigeret',
 		link: 'Link',
-		linkinternal: 'Internt link:',
+		linkinternal: 'Internt link',
 		linklocaltip: 'Ved lokalt link, indsæt da en "#" foran linket',
 		linknewwindow: 'Åben i nyt vindue?',
 		macroDoesNotHaveProperties: 'Denne makro har ingen egenskaber du kan redigere',
@@ -783,6 +783,7 @@ export default {
 		email: 'E-mail',
 		error: 'Fejl',
 		field: 'Felt',
+		fieldFor: 'Felt for %0%',
 		findDocument: 'Find',
 		first: 'Første',
 		focalPoint: 'Fokuspunkt',
@@ -900,6 +901,7 @@ export default {
 		avatar: 'Avatar til',
 		header: 'Overskrift',
 		systemField: 'system felt',
+		readOnly: 'Skrivebeskyttet',
 		restore: 'Genskab',
 		generic: 'Generic',
 		media: 'Media',
@@ -2362,7 +2364,8 @@ export default {
 		allowBlockInAreas: 'Allow in areas',
 		allowBlockInAreasHelp:
 			'Make this block available by default within the areas of other Blocks (unless explicit permissions are set for these areas).',
-		createThisFor: 'Opret %0% for %1%',
+		createThisFor: (name: string, variantName: string) =>
+			variantName ? `Opret ${name} for ${variantName}` : `Create ${name}`,
 		insertBlock: 'Indsæt Block',
 		labelInlineMode: 'Indsæt på linje med tekst',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts
index 66000861c1..7733d6fa34 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/de-de.ts
@@ -503,7 +503,7 @@ export default {
 			'\n      Die Kultur-Variante einer Sprache zu ändern ist möglicherweise eine aufwendige Operation und führt zum Erneuern von Inhalts-Zwischenspeicher und Such-Index.\n    ',
 		lastEdited: 'Zuletzt bearbeitet',
 		link: 'Verknüpfung',
-		linkinternal: 'Anker:',
+		linkinternal: 'Internen Link',
 		linklocaltip: 'Wenn lokale Links verwendet werden, füge ein "#" vor den Link ein',
 		linknewwindow: 'In einem neuen Fenster öffnen?',
 		macroDoesNotHaveProperties: 'Dieses Makro enthält keine einstellbaren Eigenschaften.',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
index ccc472ee6b..6f53119e14 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
@@ -521,7 +521,7 @@ export default {
 			'Changing the culture for a language may be an expensive operation and will result\n      in the content cache and indexes being rebuilt\n    ',
 		lastEdited: 'Last Edited',
 		link: 'Link',
-		linkinternal: 'Internal link:',
+		linkinternal: 'Internal link',
 		linklocaltip: 'When using local links, insert "#" in front of link',
 		linknewwindow: 'Open in new window?',
 		macroDoesNotHaveProperties: 'This macro does not contain any properties you can edit',
@@ -553,7 +553,7 @@ export default {
 		relateToOriginalLabel: 'Relate to original',
 		includeDescendants: 'Include descendants',
 		theFriendliestCommunity: 'The friendliest community',
-		linkToPage: 'Link to page',
+		linkToPage: 'Link to document',
 		openInNewWindow: 'Opens the linked document in a new window or tab',
 		linkToMedia: 'Link to media',
 		selectContentStartNode: 'Select content start node',
@@ -566,8 +566,8 @@ export default {
 		selectContent: 'Select content',
 		selectContentType: 'Select content type',
 		selectMediaStartNode: 'Select media start node',
-		selectMember: 'Select member',
-		selectMembers: 'Select members',
+		selectMember: 'Choose member',
+		selectMembers: 'Choose members',
 		selectMemberGroup: 'Select member group',
 		selectMemberType: 'Select member type',
 		selectNode: 'Select node',
@@ -803,6 +803,7 @@ export default {
 		email: 'Email',
 		error: 'Error',
 		field: 'Field',
+		fieldFor: 'Field for %0%',
 		findDocument: 'Find',
 		first: 'First',
 		focalPoint: 'Focal point',
@@ -935,6 +936,7 @@ export default {
 		skipToMenu: 'Skip to menu',
 		skipToContent: 'Skip to content',
 		restore: 'Restore',
+		readOnly: 'Read-only',
 		newVersionAvailable: 'New version available',
 	},
 	colors: {
@@ -2515,7 +2517,8 @@ export default {
 		configureArea: 'Configure area',
 		deleteArea: 'Delete area',
 		addColumnSpanOption: 'Add spanning %0% columns option',
-		createThisFor: 'Create %0% for %1%',
+		createThisFor: (name: string, variantName: string) =>
+			variantName ? `Create ${name} for ${variantName}` : `Create ${name}`,
 		insertBlock: 'Insert Block',
 		labelInlineMode: 'Display inline with text',
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
index 968a0fe484..27fb01708b 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
@@ -47,6 +47,7 @@ export default {
 		notify: 'Notifications',
 		protect: 'Public Access',
 		publish: 'Publish',
+		readOnly: 'Read-only',
 		refreshNode: 'Reload',
 		remove: 'Remove',
 		rename: 'Rename',
@@ -519,7 +520,7 @@ export default {
 			'Changing the culture for a language may be an expensive operation and will result\n      in the content cache and indexes being rebuilt\n    ',
 		lastEdited: 'Last Edited',
 		link: 'Link',
-		linkinternal: 'Internal link:',
+		linkinternal: 'Internal link',
 		linklocaltip: 'When using local links, insert "#" in front of link',
 		linknewwindow: 'Open in new window?',
 		macroDoesNotHaveProperties: 'This macro does not contain any properties you can edit',
@@ -551,7 +552,7 @@ export default {
 		relateToOriginalLabel: 'Relate to original',
 		includeDescendants: 'Include descendants',
 		theFriendliestCommunity: 'The friendliest community',
-		linkToPage: 'Link to page',
+		linkToPage: 'Link to document',
 		openInNewWindow: 'Opens the linked document in a new window or tab',
 		linkToMedia: 'Link to media',
 		selectContentStartNode: 'Select content start node',
@@ -565,8 +566,8 @@ export default {
 		selectContent: 'Select content',
 		selectContentType: 'Select content type',
 		selectMediaStartNode: 'Select media start node',
-		selectMember: 'Select member',
-		selectMembers: 'Select members',
+		selectMember: 'Choose member',
+		selectMembers: 'Choose members',
 		selectMemberGroup: 'Select member group',
 		selectMemberType: 'Select member type',
 		selectNode: 'Select node',
@@ -805,6 +806,7 @@ export default {
 		email: 'Email',
 		error: 'Error',
 		field: 'Field',
+		fieldFor: 'Field for %0%',
 		findDocument: 'Find',
 		first: 'First',
 		focalPoint: 'Focal point',
@@ -2573,7 +2575,8 @@ export default {
 		configureArea: 'Configure area',
 		deleteArea: 'Delete area',
 		addColumnSpanOption: 'Add spanning %0% columns option',
-		createThisFor: 'Create %0% for %1%',
+		createThisFor: (name: string, variantName: string) =>
+			variantName ? `Create ${name} for ${variantName}` : `Create ${name}`,
 		insertBlock: 'Insert Block',
 		labelInlineMode: 'Display inline with text',
 	},
@@ -2650,5 +2653,15 @@ export default {
 		extGroup_interactive: 'Interactive elements',
 		extGroup_media: 'Embeds and media',
 		extGroup_structure: 'Content structure',
+		extGroup_unknown: 'Uncategorized',
+		toobar_availableItems: 'Available toolbar items',
+		toobar_availableItemsEmpty: 'There are no toolbar extensions to show',
+		toolbar_designer: 'Toolbar designer',
+		toolbar_addRow: 'Add row configuration',
+		toolbar_addGroup: 'Add group',
+		toolbar_addItems: 'Add items',
+		toolbar_removeRow: 'Remove row',
+		toolbar_removeGroup: 'Remove group',
+		toolbar_removeItem: 'Remove item',
 	},
 } as UmbLocalizationDictionary;
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts
index f465f3c76d..f62092bcea 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/fr-fr.ts
@@ -442,7 +442,7 @@ export default {
 			"Modifier la culture d'une langue peut être une opération lourde qui aura pour conséquence la réinitialisation de la cache de contenu et des index",
 		lastEdited: 'Dernière modification',
 		link: 'Lien',
-		linkinternal: 'Lien interne :',
+		linkinternal: 'Lien interne',
 		linklocaltip: 'Si vous utilisez des ancres, insérez # au début du lien',
 		linknewwindow: 'Ouvrir dans une nouvelle fenêtre?',
 		macroDoesNotHaveProperties: 'Cette macro ne contient aucune propriété éditable',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/he-il.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/he-il.ts
index 827b5e8b09..005f465fcc 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/he-il.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/he-il.ts
@@ -178,7 +178,7 @@ export default {
 		inserttable: 'הוסף טבלה',
 		lastEdited: 'נערך לאחרונה',
 		link: 'קישור',
-		linkinternal: 'קישור פנימי:',
+		linkinternal: 'קישור פנימי',
 		linklocaltip: 'בעת שימוש בקישוריים פנימיים, הוסף "#" בתחילת הקישור',
 		linknewwindow: 'לפתוח בחלון חדש?',
 		macroDoesNotHaveProperties: 'המאקרו לא מכיל מאפיינים שניתן לערוך',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts
index 3519e19060..23ee4b8d21 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/hr-hr.ts
@@ -484,7 +484,7 @@ export default {
 			'Promjena kulture jezika može biti skupa operacija i rezultirat će promjenama u predmemoriji sadržaja i indeksima koji se rekonstruiraju\n    ',
 		lastEdited: 'Zadnje uređivano',
 		link: 'Link',
-		linkinternal: 'Interni link:',
+		linkinternal: 'Interni link',
 		linklocaltip: 'Kada koristite lokalni linkovi, umetnite "#" ispred linka',
 		linknewwindow: 'Otvoriti u novom prozoru?',
 		macroDoesNotHaveProperties: 'Ovaj makro ne sadrži svojstva koja možete uređivati',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts
index 9a7dfb9eec..e991e84f29 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/it-it.ts
@@ -495,7 +495,7 @@ export default {
 			"La modifica della cultura di una lingua può essere un'operazione costosa e comporterà la ricostruzione della cache dei contenuti e degli indici",
 		lastEdited: 'Ultima modifica',
 		link: 'Link',
-		linkinternal: 'Link interno:',
+		linkinternal: 'Link interno',
 		linklocaltip: 'Quando usi il link locale, inserisci # prima del link',
 		linknewwindow: 'Apri in nuova finestra?',
 		macroContainerSettings: 'Impostazioni della macro',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/ja-jp.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/ja-jp.ts
index 8f1c6130e6..489fc8c939 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/ja-jp.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/ja-jp.ts
@@ -227,7 +227,7 @@ export default {
 		inserttable: '表の挿入',
 		lastEdited: '最近の更新',
 		link: 'リンク',
-		linkinternal: '内部リンク:',
+		linkinternal: '内部リンク',
 		linklocaltip: '内部リンクを使うときは、リンクの前に "#" を挿入してください。',
 		linknewwindow: '新規ウィンドウで開きますか?',
 		macroDoesNotHaveProperties: 'このマクロは編集できるプロパティがありません',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/ko-kr.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/ko-kr.ts
index 961d322c5a..2b3508ca9b 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/ko-kr.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/ko-kr.ts
@@ -178,7 +178,7 @@ export default {
 		inserttable: '테이블 삽입',
 		lastEdited: '마지막 수정',
 		link: '링크',
-		linkinternal: '내부링크:',
+		linkinternal: '내부링크',
 		linklocaltip: '내부링크를 사용하실 때 링크앞에 "#"를 넣어주세요',
 		linknewwindow: '새 창으로 여시겠습니까?',
 		macroDoesNotHaveProperties: '이 매크로에는 편집할 수 있는 항목이 포함되어 있지 않습니다.',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/nb-no.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/nb-no.ts
index 92e082b4db..f25989e84d 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/nb-no.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/nb-no.ts
@@ -222,7 +222,7 @@ export default {
 		inserttable: 'Sett inn tabell',
 		lastEdited: 'Sist redigert',
 		link: 'Lenke',
-		linkinternal: 'Intern link:',
+		linkinternal: 'Intern link',
 		linklocaltip: 'Ved lokal link, sett inn "#" foran link',
 		linknewwindow: 'Åpne i nytt vindu?',
 		macroDoesNotHaveProperties: 'Denne makroen har ingen egenskaper du kan endre',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts
index 9833b8905d..5b7a3e7408 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/nl-nl.ts
@@ -452,7 +452,7 @@ export default {
 			'De cultuur veranderen voor een taal kan een langdurige operatie zijn en zal ertoe\n      leiden dat de inhoudscache en indexen opnieuw worden opgebouwd\n    ',
 		lastEdited: 'Laatst aangepast op',
 		link: 'Link',
-		linkinternal: 'Interne link:',
+		linkinternal: 'Interne link',
 		linklocaltip: 'Plaats een hekje (“#”) voor voor interne links.',
 		linknewwindow: 'In nieuw venster openen?',
 		macroDoesNotHaveProperties: 'Deze macro heeft geen eigenschappen die u kunt bewerken',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/pl-pl.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/pl-pl.ts
index b02b668dcc..cd22efb437 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/pl-pl.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/pl-pl.ts
@@ -302,7 +302,7 @@ export default {
 		inserttable: 'Wstaw tabelę',
 		lastEdited: 'Ostatnio edytowane',
 		link: 'Link',
-		linkinternal: 'Link wewnętrzny:',
+		linkinternal: 'Link wewnętrzny',
 		linklocaltip: 'Kiedy używasz odnośników lokalnych, wstaw znak "#" na początku linku',
 		linknewwindow: 'Otworzyć w nowym oknie?',
 		macroDoesNotHaveProperties: 'To makro nie posiada żadnych właściwości, które można edytować',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/pt-br.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/pt-br.ts
index 5ab8d07bc2..49e374abb5 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/pt-br.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/pt-br.ts
@@ -178,7 +178,7 @@ export default {
 		inserttable: 'Inserir tabela',
 		lastEdited: 'Última Edição',
 		link: 'Link',
-		linkinternal: 'Link interno:',
+		linkinternal: 'Link interno',
 		linklocaltip: 'Ao usar links locais insira "#" na frente do link',
 		linknewwindow: 'Abrir em nova janela?',
 		macroDoesNotHaveProperties: 'Este macro não contém nenhuma propriedade que possa ser editada',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/ru-ru.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/ru-ru.ts
index 7dd7d145de..4bb00f41c4 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/ru-ru.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/ru-ru.ts
@@ -359,7 +359,7 @@ export default {
 		inserttable: 'Вставить таблицу',
 		lastEdited: 'Последняя правка',
 		link: 'Ссылка',
-		linkinternal: 'Внутренняя ссылка:',
+		linkinternal: 'Внутренняя ссылка',
 		linklocaltip: 'Для того чтобы определить локальную ссылку, используйте "#" первым символом',
 		linknewwindow: 'Открыть в новом окне?',
 		macroDoesNotHaveProperties: 'Этот макрос не имеет редактируемых свойств',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/sv-se.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/sv-se.ts
index 12e5c2b75b..95ff3be286 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/sv-se.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/sv-se.ts
@@ -372,10 +372,12 @@ export default {
 		inserttable: 'Infoga tabell',
 		lastEdited: 'Senast redigerad',
 		link: 'Länk',
-		linkinternal: 'Intern länk:',
+		linkinternal: 'Intern länk',
 		linklocaltip: 'När du använder lokala länkar, lägg till "#" framför länken',
 		linknewwindow: 'Öppna i nytt fönster?',
 		macroDoesNotHaveProperties: 'Detta makro innehåller inga egenskaper som du kan redigera',
+		selectMember: 'Välj medlem',
+		selectMembers: 'Välj medlemmar',
 		paste: 'Klistra in',
 		permissionsEdit: 'Redigera rättigheter för',
 		recycleBinDeleting: 'Allt som ligger i papperskorgen tas nu bort. Stäng inte detta fönster förrän detta är klart',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts
index 681a683680..a347f09442 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/tr-tr.ts
@@ -437,7 +437,7 @@ export default {
 			'Bir dil için kültürü değiştirmek pahalı bir işlem olabilir ve içerik önbelleğinin ve dizinlerin yeniden oluşturulmasına neden olabilir',
 		lastEdited: 'Son Düzenleme',
 		link: 'Bağlantı',
-		linkinternal: 'Dahili bağlantı:',
+		linkinternal: 'Dahili bağlantı',
 		linklocaltip: 'Yerel bağlantıları kullanırken, bağlantının önüne "#" ekleyin',
 		linknewwindow: 'Yeni pencerede açılsın mı?',
 		macroDoesNotHaveProperties: 'Bu makro düzenleyebileceğiniz herhangi bir özellik içermiyor',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/uk-ua.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/uk-ua.ts
index 687193843a..d480b68234 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/uk-ua.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/uk-ua.ts
@@ -358,7 +358,7 @@ export default {
 		inserttable: 'Вставити таблицю',
 		lastEdited: 'Остання зміна',
 		link: 'Посилання',
-		linkinternal: 'Внутрішнє посилання:',
+		linkinternal: 'Внутрішнє посилання',
 		linklocaltip: 'Для визначення локального посилання, використовуйте "#" першим символом',
 		linknewwindow: 'Відкрити у новому вікні?',
 		macroDoesNotHaveProperties: 'Цей макрос не має властивостей, що редагуються.',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/zh-cn.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/zh-cn.ts
index 1681a72f11..41809f04d0 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/zh-cn.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/zh-cn.ts
@@ -233,7 +233,7 @@ export default {
 		inserttable: '插入表格',
 		lastEdited: '最近编辑',
 		link: '链接',
-		linkinternal: '内部链接：',
+		linkinternal: '内部链接',
 		linklocaltip: '本地链接请用“#”号开头',
 		linknewwindow: '在新窗口中打开？',
 		macroDoesNotHaveProperties: '该宏没有可编辑的属性',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/zh-tw.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/zh-tw.ts
index 6dfd7f5186..3d08d514a5 100644
--- a/src/Umbraco.Web.UI.Client/src/assets/lang/zh-tw.ts
+++ b/src/Umbraco.Web.UI.Client/src/assets/lang/zh-tw.ts
@@ -232,7 +232,7 @@ export default {
 		inserttable: '插入表格',
 		lastEdited: '最近編輯',
 		link: '連結',
-		linkinternal: '內部連結：',
+		linkinternal: '內部連結',
 		linklocaltip: '本地連結請用“#”號開頭',
 		linknewwindow: '在新視窗中打開？',
 		macroDoesNotHaveProperties: '本巨集沒有包含您可以編輯的屬性',
diff --git a/src/Umbraco.Web.UI.Client/src/json-schema/all-packages.ts b/src/Umbraco.Web.UI.Client/src/json-schema/all-packages.ts
index 11e3b72b14..2f8a997a00 100644
--- a/src/Umbraco.Web.UI.Client/src/json-schema/all-packages.ts
+++ b/src/Umbraco.Web.UI.Client/src/json-schema/all-packages.ts
@@ -33,6 +33,7 @@ import '@umbraco-cms/backoffice/document-type';
 import '@umbraco-cms/backoffice/document';
 import '@umbraco-cms/backoffice/entity-action';
 import '@umbraco-cms/backoffice/entity-bulk-action';
+import '@umbraco-cms/backoffice/entity-create-option-action';
 import '@umbraco-cms/backoffice/entity';
 import '@umbraco-cms/backoffice/event';
 import '@umbraco-cms/backoffice/extension-registry';
diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extensions-initializer.controller.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extensions-initializer.controller.ts
index f4e1b9d4fc..48d5fd8f49 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extensions-initializer.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extensions-initializer.controller.ts
@@ -201,6 +201,7 @@ export abstract class UmbBaseExtensionsInitializer<
 		if (!this.#extensionRegistry) return;
 
 		const oldPermittedExtsLength = this.#exposedPermittedExts?.length ?? 0;
+		this._extensions.forEach((extension) => extension.destroy());
 		(this._extensions as unknown) = undefined;
 		(this.#permittedExts as unknown) = undefined;
 		this.#exposedPermittedExts = undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.test.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.test.ts
index caed039f60..5a9cfce9b5 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.test.ts
@@ -8,6 +8,7 @@ import type {
 } from '../types/index.js';
 import { UmbExtensionRegistry } from './extension.registry.js';
 import { expect } from '@open-wc/testing';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 interface TestManifestWithMeta extends ManifestBase {
 	meta: unknown;
@@ -535,7 +536,7 @@ describe('Add Conditions', () => {
 
 		// Add a condition with a specific config to Section2
 		const workspaceCondition: WorkspaceAliasConditionConfig = {
-			alias: 'Umb.Condition.WorkspaceAlias',
+			alias: UMB_WORKSPACE_CONDITION_ALIAS,
 			match: 'Umb.Workspace.Document',
 		};
 
@@ -543,7 +544,7 @@ describe('Add Conditions', () => {
 
 		const updatedWorkspaceExt = extensionRegistry.getByAlias('Umb.Test.Section.2') as ManifestWithDynamicConditions;
 		expect(updatedWorkspaceExt.conditions?.length).to.equal(1);
-		expect(updatedWorkspaceExt.conditions?.[0]?.alias).to.equal('Umb.Condition.WorkspaceAlias');
+		expect(updatedWorkspaceExt.conditions?.[0]?.alias).to.equal(UMB_WORKSPACE_CONDITION_ALIAS);
 	});
 
 	it('allows an extension to update with multiple conditions', async () => {
@@ -555,7 +556,7 @@ describe('Add Conditions', () => {
 				alias: 'Umb.Test.Condition.Valid',
 			},
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			} as WorkspaceAliasConditionConfig,
 		];
@@ -566,7 +567,7 @@ describe('Add Conditions', () => {
 		expect(extUpdated.conditions?.length).to.equal(3);
 		expect(extUpdated.conditions?.[0]?.alias).to.equal('Umb.Test.Condition.Invalid');
 		expect(extUpdated.conditions?.[1]?.alias).to.equal('Umb.Test.Condition.Valid');
-		expect(extUpdated.conditions?.[2]?.alias).to.equal('Umb.Condition.WorkspaceAlias');
+		expect(extUpdated.conditions?.[2]?.alias).to.equal(UMB_WORKSPACE_CONDITION_ALIAS);
 	});
 
 	it('allows conditions to be prepended when an extension is loaded later on', async () => {
@@ -575,7 +576,7 @@ describe('Add Conditions', () => {
 				alias: 'Umb.Test.Condition.Invalid',
 			},
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			} as WorkspaceAliasConditionConfig,
 		];
@@ -606,7 +607,7 @@ describe('Add Conditions', () => {
 		expect(extUpdated.conditions?.length).to.equal(3);
 		expect(extUpdated.conditions?.[0]?.alias).to.equal('Umb.Test.Condition.Valid');
 		expect(extUpdated.conditions?.[1]?.alias).to.equal('Umb.Test.Condition.Invalid');
-		expect(extUpdated.conditions?.[2]?.alias).to.equal('Umb.Condition.WorkspaceAlias');
+		expect(extUpdated.conditions?.[2]?.alias).to.equal(UMB_WORKSPACE_CONDITION_ALIAS);
 	});
 
 	/**
@@ -622,7 +623,7 @@ describe('Add Conditions', () => {
 				alias: 'Umb.Test.Condition.Invalid',
 			},
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			} as WorkspaceAliasConditionConfig,
 		];
diff --git a/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.ts b/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.ts
index 580da1cb1f..0d53be4b26 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.ts
@@ -100,6 +100,7 @@ const sortExtensions = (a: ManifestBase, b: ManifestBase): number => (b.weight |
 
 export class UmbExtensionRegistry<
 	IncomingManifestTypes extends ManifestBase,
+	IncomingConditionConfigTypes extends UmbConditionConfigBase = UmbConditionConfigBase,
 	ManifestTypes extends ManifestBase = IncomingManifestTypes | ManifestBase,
 > {
 	readonly MANIFEST_TYPES: ManifestTypes = undefined as never;
@@ -490,7 +491,7 @@ export class UmbExtensionRegistry<
 	 * @param {string} alias - The alias of the extension to append the condition to.
 	 * @param  {UmbConditionConfigBase} newCondition - The condition to append to the extension.
 	 */
-	appendCondition(alias: string, newCondition: UmbConditionConfigBase) {
+	appendCondition(alias: string, newCondition: IncomingConditionConfigTypes) {
 		this.appendConditions(alias, [newCondition]);
 	}
 
@@ -499,7 +500,7 @@ export class UmbExtensionRegistry<
 	 * @param {string} alias  - The alias of the extension to append the condition to
 	 * @param {Array<UmbConditionConfigBase>} newConditions  - An array of conditions to be appended to an extension manifest.
 	 */
-	appendConditions(alias: string, newConditions: Array<UmbConditionConfigBase>) {
+	appendConditions(alias: string, newConditions: Array<IncomingConditionConfigTypes>) {
 		const existingConditionsToBeAdded = this.#additionalConditions.get(alias);
 		this.#additionalConditions.set(
 			alias,
diff --git a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts
index 587f7b14d8..d855db82a1 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/localization-api/localization.controller.ts
@@ -109,8 +109,9 @@ export class UmbLocalizationController<LocalizationSetType extends UmbLocalizati
 
 	/**
 	 * Outputs a translated term.
-	 * @param key
-	 * @param {...any} args
+	 * @param {string} key - the localization key, the indicator of what localization entry you want to retrieve.
+	 * @param {...any} args - the arguments to parse for this localization entry.
+	 * @returns {string} - the translated term as a string.
 	 */
 	term<K extends keyof LocalizationSetType>(key: K, ...args: FunctionParams<LocalizationSetType[K]>): string {
 		if (!this.#usedKeys.includes(key)) {
diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/basic-state.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/basic-state.ts
index 7f5f609da4..d37def15d7 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/basic-state.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/basic-state.ts
@@ -1,4 +1,4 @@
-import { BehaviorSubject } from '@umbraco-cms/backoffice/external/rxjs';
+import { BehaviorSubject, type Observable } from '@umbraco-cms/backoffice/external/rxjs';
 
 /**
  * @class UmbBasicState
@@ -20,30 +20,31 @@ export class UmbBasicState<T> {
 	 *
 	 * this.observe(myState, (latestStateValue) => console.log("Value is: ", latestStateValue));
 	 */
-	public asObservable(): ReturnType<BehaviorSubject<T>['asObservable']> {
+	public asObservable(): Observable<T> {
 		return this._subject.asObservable();
 	}
 
 	/**
-	 * @property value
+	 * @property {unknown} value - the value of the State.
 	 * @description - Holds the current data of this state.
+	 * @returns {unknown} Observable that
 	 * @example <caption>Example retrieve the current data of a state</caption>
 	 * const myState = new UmbArrayState('Hello world');
 	 * console.log("Value is: ", myState.value);
 	 */
-	public get value(): BehaviorSubject<T>['value'] {
+	public get value(): T {
 		return this.getValue();
 	}
 
 	/**
 	 * @function getValue
-	 * @returns {T} The current data of this state.
+	 * @returns {unknown} The current data of this state.
 	 * @description - Provides the current data of this state.
 	 * @example <caption>Example retrieve the current data of a state</caption>
 	 * const myState = new UmbArrayState('Hello world');
 	 * console.log("Value is: ", myState.value);
 	 */
-	public getValue(): ReturnType<BehaviorSubject<T>['getValue']> {
+	public getValue(): T {
 		return this._subject.getValue();
 	}
 
@@ -58,7 +59,7 @@ export class UmbBasicState<T> {
 
 	/**
 	 * @function setValue
-	 * @param {T} data - The next data for this state to hold.
+	 * @param {unknown} data - The next data for this state to hold.
 	 * @description - Set the data of this state, if data is different than current this will trigger observations to update.
 	 * @example <caption>Example change the data of a state</caption>
 	 * const myState = new UmbArrayState('Good morning');
diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/class-state.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/class-state.ts
index 26fc104415..fad45c4175 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/class-state.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/states/class-state.ts
@@ -1,12 +1,9 @@
 import type { MappingFunction } from '../types/mapping-function.type.js';
 import type { MemoizationFunction } from '../types/memoization-function.type.js';
+import type { UmbClassStateData } from '../utils/class-equal-memoization.function.js';
 import { createObservablePart } from '../utils/create-observable-part.function.js';
 import { UmbBasicState } from './basic-state.js';
 
-export interface UmbClassStateData {
-	equal(otherClass: this | undefined): boolean;
-}
-
 /**
  * @class UmbClassState
  * @augments {UmbBasicState<T>}
@@ -18,10 +15,10 @@ export class UmbClassState<T extends UmbClassStateData | undefined> extends UmbB
 	}
 
 	/**
-	 
 	 * @function createObservablePart
-	 * @param {(mappable: T) => R} mappingFunction - Method to return the part for this Observable to return.
-	 * @param {(previousResult: R, currentResult: R) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different.
+	 * @param {(mappable: UmbClassStateData | undefined) => unknown} mappingFunction - Method to return the part for this Observable to return.
+	 * @param {(previousResult: unknown, currentResult: unknown) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different.
+	 * @returns {Observable<unknown>} - an observable.
 	 * @description - Creates an Observable from this State.
 	 */
 	asObservablePart<ReturnType>(
@@ -33,7 +30,7 @@ export class UmbClassState<T extends UmbClassStateData | undefined> extends UmbB
 
 	/**
 	 * @function setValue
-	 * @param {T} data - The next data for this state to hold.
+	 * @param {UmbClassStateData | undefined} data - The next data for this state to hold.
 	 * @description - Set the data of this state, if data is different than current this will trigger observations to update.
 	 */
 	override setValue(data: T): void {
diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/class-equal-memoization.function.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/class-equal-memoization.function.ts
new file mode 100644
index 0000000000..ab4cdada11
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/class-equal-memoization.function.ts
@@ -0,0 +1,20 @@
+/**
+ * @function classEqualMemoization
+ * @param {UmbClassStateData | undefined} previousValue - The previous value to compare.
+ * @param {UmbClassStateData | undefined} currentValue - The current value to compare.
+ * @returns {boolean} - Returns true if the values are identical.
+ * @description - Compares the two values using strict equality.
+ */
+export function classEqualMemoization(
+	previousValue: UmbClassStateData | undefined,
+	currentValue: UmbClassStateData | undefined,
+): boolean {
+	return (
+		(previousValue && currentValue && previousValue.equal(currentValue)) ||
+		(previousValue === undefined && currentValue === undefined)
+	);
+}
+
+export interface UmbClassStateData {
+	equal(otherClass: this | undefined): boolean;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/create-observable-part.function.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/create-observable-part.function.ts
index d8762bf36d..f878d7cced 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/create-observable-part.function.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/create-observable-part.function.ts
@@ -9,6 +9,7 @@ import { distinctUntilChanged, map, shareReplay } from '@umbraco-cms/backoffice/
  * @param {Observable<T>} source - RxJS Subject to use for this Observable.
  * @param {(mappable: T) => R} mappingFunction - Method to return the part for this Observable to return.
  * @param {(previousResult: R, currentResult: R) => boolean} [memoizationFunction] - Method to Compare if the data has changed. Should return true when data is different.
+ * @returns {Observable<T>}
  * @description - Creates a RxJS Observable from RxJS Subject.
  * @example <caption>Example create a Observable for part of the data Subject.</caption>
  * public readonly myPart = CreateObservablePart(this._data, (data) => data.myPart);
diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts
index ff6dfc7e0d..03ffd9d6e6 100644
--- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/index.ts
@@ -1,5 +1,6 @@
 export * from './append-to-frozen-array.function.js';
 export * from './assign-to-frozen-object.function.js';
+export * from './class-equal-memoization.function.js';
 export * from './create-observable-part.function.js';
 export * from './deep-freeze.function.js';
 export * from './default-memoization.function.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts
index 0acaf4f569..906c503a57 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/block-grid-area-type-workspace.context.ts
@@ -1,5 +1,5 @@
 import type { UmbBlockGridTypeAreaType } from '../../../types.js';
-import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
+import type { UmbPropertyDatasetContext, UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type {
 	UmbInvariantDatasetWorkspaceContext,
@@ -10,12 +10,14 @@ import type {
 import {
 	UmbSubmittableWorkspaceContextBase,
 	UmbInvariantWorkspacePropertyDatasetContext,
+	umbObjectToPropertyValueArray,
 } from '@umbraco-cms/backoffice/workspace';
 import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { PropertyEditorSettingsProperty } from '@umbraco-cms/backoffice/property-editor';
 import { UmbId } from '@umbraco-cms/backoffice/id';
+import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 
 export class UmbBlockGridAreaTypeWorkspaceContext
 	extends UmbSubmittableWorkspaceContextBase<UmbBlockGridTypeAreaType>
@@ -28,6 +30,13 @@ export class UmbBlockGridAreaTypeWorkspaceContext
 	#data = new UmbObjectState<UmbBlockGridTypeAreaType | undefined>(undefined);
 	readonly data = this.#data.asObservable();
 
+	readonly values = this.#data.asObservablePart((data) => {
+		return umbObjectToPropertyValueArray(data);
+	});
+	async getValues(): Promise<Array<UmbPropertyValueData> | undefined> {
+		return umbObjectToPropertyValueArray(await firstValueFrom(this.data));
+	}
+
 	// TODO: Get the name of the contentElementType..
 	readonly name = this.#data.asObservablePart((data) => data?.alias);
 	readonly unique = this.#data.asObservablePart((data) => data?.key);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/manifests.ts
index e8d2b915e8..10eb00ca0a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/manifests.ts
@@ -1,6 +1,7 @@
 import { manifests as workspaceViewManifests } from './views/manifests.js';
 import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_ALIAS } from './index.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	...workspaceViewManifests,
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/views/manifests.ts
index e30f10ceda..ba7238c442 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/views/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/workspace/views/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_ALIAS } from '../index.js';
 import type { ManifestWorkspaceView } from '@umbraco-cms/backoffice/workspace';
 
@@ -15,7 +16,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 36be37cd9b..82e3f4333f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -1,12 +1,27 @@
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../../context/block-grid-entry.context-token.js';
-import { UmbBlockGridInlinePropertyDatasetContext } from './block-grid-inline-property-dataset.context.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
 import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
-import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
+import {
+	type UMB_BLOCK_WORKSPACE_CONTEXT,
+	UMB_BLOCK_WORKSPACE_ALIAS,
+	type UmbBlockDataType,
+} from '@umbraco-cms/backoffice/block';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import {
+	UmbExtensionApiInitializer,
+	UmbExtensionsApiInitializer,
+	type UmbApiConstructorArgumentsMethodType,
+} from '@umbraco-cms/backoffice/extension-api';
+import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
+	return [{ manifest }];
+};
 
 /**
  * @element umb-block-grid-block-inline
@@ -14,15 +29,19 @@ import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 @customElement('umb-block-grid-block-inline')
 export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	//
+	#blockContext?: typeof UMB_BLOCK_GRID_ENTRY_CONTEXT.TYPE;
+	#workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
+	#contentKey?: string;
+
 	@property({ attribute: false })
+	config?: UmbBlockEditorCustomViewConfiguration;
+
+	@property({ type: String, reflect: false })
 	label?: string;
 
 	@property({ type: String, reflect: false })
 	icon?: string;
 
-	@property({ attribute: false })
-	config?: UmbBlockEditorCustomViewConfiguration;
-
 	@property({ type: Boolean, reflect: true })
 	unpublished?: boolean;
 
@@ -30,38 +49,137 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	content?: UmbBlockDataType;
 
 	@state()
-	_inlineProperty: UmbPropertyTypeModel | undefined;
+	_inlineProperty?: UmbPropertyTypeModel;
+
+	@state()
+	private _ownerContentTypeName?: string;
+
+	@state()
+	private _variantName?: string;
 
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_BLOCK_GRID_ENTRY_CONTEXT, (context) => {
-			new UmbBlockGridInlinePropertyDatasetContext(this, context);
-
+		this.consumeContext(UMB_BLOCK_GRID_ENTRY_CONTEXT, (blockContext) => {
+			this.#blockContext = blockContext;
 			this.observe(
-				context.firstPropertyType,
-				(property) => {
-					this._inlineProperty = property;
+				this.#blockContext.unique,
+				(contentKey) => {
+					this.#contentKey = contentKey;
+					this.#load();
 				},
-				'inlineProperty',
+				'observeContentKey',
 			);
 		});
+		new UmbExtensionApiInitializer(
+			this,
+			umbExtensionsRegistry,
+			UMB_BLOCK_WORKSPACE_ALIAS,
+			apiArgsCreator,
+			(permitted, ctrl) => {
+				const context = ctrl.api as typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
+				if (permitted && context) {
+					this.#workspaceContext = context;
+					this.#workspaceContext.establishLiveSync();
+
+					this.#load();
+
+					this.observe(
+						this.#workspaceContext.content.structure.contentTypeProperties,
+						(contentTypeProperties) => {
+							this._inlineProperty = contentTypeProperties[0];
+						},
+						'observeProperties',
+					);
+
+					this.observe(
+						context.content.structure.ownerContentTypeName,
+						(name) => {
+							this._ownerContentTypeName = name;
+						},
+						'observeContentTypeName',
+					);
+
+					this.observe(
+						context.variantId,
+						async (variantId) => {
+							if (variantId) {
+								context.content.setup(this, variantId);
+								// TODO: Support segment name?
+								const culture = variantId.culture;
+								if (culture) {
+									const languageRepository = new UmbLanguageItemRepository(this);
+									const { data } = await languageRepository.requestItems([culture]);
+									const name = data?.[0].name;
+									this._variantName = name ? this.localize.string(name) : undefined;
+								}
+							}
+						},
+						'observeVariant',
+					);
+
+					new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [
+						this,
+						this.#workspaceContext,
+					]);
+				}
+			},
+		);
 	}
 
+	#load() {
+		if (!this.#workspaceContext || !this.#contentKey) return;
+		this.#workspaceContext.load(this.#contentKey);
+	}
+
+	#expose = () => {
+		this.#workspaceContext?.expose();
+	};
+
 	override render() {
-		return html`<umb-ref-grid-block
-			standalone
-			href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
-			<umb-icon slot="icon" .name=${this.icon}></umb-icon>
-			<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
-			<umb-property-type-based-property
-				.property=${this._inlineProperty}
-				slot="areas"></umb-property-type-based-property>
-			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
-		</umb-ref-grid-block>`;
+		return html`
+			<div id="host">
+				<button id="open-part" tabindex="0">
+					${this.#renderBlockInfo()}
+					<slot></slot>
+					<slot name="tag"></slot>
+				</button>
+				<div id="inside">${this.#renderInside()}</div>
+			</div>
+		`;
+	}
+
+	#renderBlockInfo() {
+		return html`
+			<span id="content">
+				<span id="icon">
+					<umb-icon .name=${this.icon}></umb-icon>
+				</span>
+				<div id="info">
+					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
+				</div>
+			</span>
+		`;
+	}
+
+	#renderInside() {
+		if (this.unpublished === true) {
+			return html`<uui-button id="exposeButton" @click=${this.#expose}
+				><uui-icon name="icon-add"></uui-icon>
+				<umb-localize
+					key="blockEditor_createThisFor"
+					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
+			></uui-button>`;
+		} else {
+			return html`<umb-property-type-based-property
+					.property=${this._inlineProperty}
+					slot="areas"></umb-property-type-based-property>
+				<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>`;
+		}
 	}
 
 	static override styles = [
+		UmbTextStyles,
 		css`
 			umb-block-grid-areas-container {
 				margin-top: calc(var(--uui-size-2) + 1px);
@@ -69,10 +187,114 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
-			:host([unpublished]) umb-icon,
-			:host([unpublished]) umb-ufm-render {
+
+			#exposeButton {
+				width: 100%;
+				min-height: var(--uui-size-layout-3);
+			}
+
+			#host {
+				position: relative;
+				display: block;
+				width: 100%;
+
+				box-sizing: border-box;
+				border-radius: var(--uui-border-radius);
+				background-color: var(--uui-color-surface);
+
+				border: 1px solid var(--uui-color-border);
+				transition: border-color 80ms;
+
+				min-width: 250px;
+			}
+			#open-part + * {
+				border-top: 1px solid var(--uui-color-border);
+			}
+			:host([disabled]) #open-part {
+				cursor: default;
+				transition: border-color 80ms;
+			}
+			:host(:not([disabled])) #host:has(#open-part:hover) {
+				border-color: var(--uui-color-border-emphasis);
+			}
+			:host(:not([disabled])) #open-part:hover + * {
+				border-color: var(--uui-color-border-emphasis);
+			}
+			:host([disabled]) #host {
+				border-color: var(--uui-color-disabled-standalone);
+			}
+
+			:host([unpublished]) #open-part {
 				opacity: 0.6;
 			}
+
+			slot[name='tag'] {
+				flex-grow: 1;
+
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+
+			button {
+				font-size: inherit;
+				font-family: inherit;
+				border: 0;
+				padding: 0;
+				background-color: transparent;
+				text-align: left;
+				color: var(--uui-color-text);
+			}
+
+			#content {
+				align-self: stretch;
+				line-height: normal;
+				display: flex;
+				position: relative;
+				align-items: center;
+			}
+
+			#open-part {
+				color: inherit;
+				text-decoration: none;
+				cursor: pointer;
+
+				display: flex;
+				text-align: left;
+				align-items: center;
+				justify-content: flex-start;
+				width: 100%;
+				border: none;
+				background: none;
+
+				min-height: var(--uui-size-16);
+				padding: calc(var(--uui-size-2) + 1px);
+			}
+
+			#icon {
+				font-size: 1.2em;
+				margin-left: var(--uui-size-2);
+				margin-right: var(--uui-size-1);
+			}
+
+			:host(:not([disabled])) #open-part:hover #icon {
+				color: var(--uui-color-interactive-emphasis);
+			}
+			:host(:not([disabled])) #open-part:hover #name {
+				color: var(--uui-color-interactive-emphasis);
+			}
+
+			:host([disabled]) #icon {
+				color: var(--uui-color-disabled-contrast);
+			}
+			:host([disabled]) #name {
+				color: var(--uui-color-disabled-contrast);
+			}
+
+			#inside {
+				position: relative;
+				display: block;
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context-token.ts
deleted file mode 100644
index 56cb885b93..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context-token.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { UmbBlockGridInlinePropertyDatasetContext } from './block-grid-inline-property-dataset.context.js';
-import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-
-// TODO: Add discriminator:
-export const UMB_BLOCK_GRID_INLINE_PROPERTY_DATASET_CONTEXT =
-	new UmbContextToken<UmbBlockGridInlinePropertyDatasetContext>('UmbPropertyDatasetContext');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts
deleted file mode 100644
index a320f9914a..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-inline-property-dataset.context.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js';
-import { UMB_BLOCK_GRID_INLINE_PROPERTY_DATASET_CONTEXT } from './block-grid-inline-property-dataset.context-token.js';
-import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
-import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
-import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
-
-export class UmbBlockGridInlinePropertyDatasetContext extends UmbControllerBase implements UmbPropertyDatasetContext {
-	#entryContext: UmbBlockGridEntryContext;
-
-	#readOnly = new UmbBooleanState(false);
-	public readOnly = this.#readOnly.asObservable();
-
-	// default data:
-
-	getVariantId() {
-		return UmbVariantId.CreateInvariant();
-	}
-	getEntityType() {
-		return this.#entryContext.getEntityType();
-	}
-	getUnique() {
-		return this.#entryContext.getUnique();
-	}
-
-	getName(): string | undefined {
-		return 'TODO: get label';
-	}
-	readonly name: Observable<string | undefined> = 'TODO: get label observable' as any;
-
-	constructor(host: UmbControllerHost, entryContext: UmbBlockGridEntryContext) {
-		// The controller alias, is a very generic name cause we want only one of these for this controller host.
-		super(host, UMB_PROPERTY_DATASET_CONTEXT.toString());
-		this.#entryContext = entryContext;
-
-		this.provideContext(UMB_BLOCK_GRID_INLINE_PROPERTY_DATASET_CONTEXT, this);
-	}
-
-	/**
-	 * @function propertyValueByAlias
-	 * @param {string} propertyAlias
-	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
-	 * @description Get an Observable for the value of this property.
-	 */
-	async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
-		// TODO: Investigate how I do that with the workspaces..
-		return await this.#entryContext.contentPropertyValueByAlias<ReturnType>(propertyAlias);
-	}
-
-	/**
-	 * @function setPropertyValue
-	 * @param {string} propertyAlias
-	 * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
-	 * @returns {Promise<void>}
-	 * @description Set the value of this property.
-	 */
-	async setPropertyValue(propertyAlias: string, value: unknown) {
-		// TODO: Investigate how I do that with the workspaces..
-		return this.#entryContext.setContentPropertyValue(propertyAlias, value);
-	}
-
-	/**
-	 * Gets the read-only state of the current variant culture.
-	 * @returns {*}  {boolean}
-	 * @memberof UmbBlockGridInlinePropertyDatasetContext
-	 */
-	getReadOnly(): boolean {
-		return this.#readOnly.getValue();
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
index 57047f4b4e..6c4a76df0e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts
@@ -149,7 +149,7 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 			// Currently there is no server validation for areas. So we can leave out the data path for it for now. [NL]
 			this.#controlValidator = new UmbFormControlValidator(this, this);
 
-			//new UmbBindServerValidationToFormControl(this, this, "$.values.[?(@.alias = 'my-input-alias')].value");
+			//new UmbBindServerValidationToFormControl(this, this, "$.values.[?(@.alias == 'my-input-alias')].value");
 		}
 	}
 	public get areaKey(): string | null | undefined {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
index 5bd07e2aba..4e39f774d5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
@@ -1,5 +1,5 @@
 import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
 import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
@@ -61,6 +61,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	_contentTypeAlias?: string;
 
+	@state()
+	_contentTypeName?: string;
+
 	@state()
 	_columnSpan?: number;
 
@@ -325,6 +328,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			},
 			'contentElementTypeAlias',
 		);
+		this.observe(
+			this.#context.contentElementTypeName,
+			(contentElementTypeName) => {
+				this._contentTypeName = contentElementTypeName;
+			},
+			'contentElementTypeName',
+		);
 
 		this.#callUpdateInlineCreateButtons();
 	}
@@ -336,6 +346,10 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 		}
 	}
 
+	#expose = () => {
+		this.#context.expose();
+	};
+
 	#callUpdateInlineCreateButtons() {
 		clearTimeout(this.#renderTimeout);
 		this.#renderTimeout = setTimeout(this.#updateInlineCreateButtons, 100) as unknown as number;
@@ -400,7 +414,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block-inline>`;
+			.settings=${this._blockViewProps.settings}
+			${umbDestroyOnDisconnect()}></umb-block-grid-block-inline>`;
 	}
 
 	#renderRefBlock() {
@@ -411,7 +426,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 			.unpublished=${!this._exposed}
 			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-block-grid-block>`;
+			.settings=${this._blockViewProps.settings}
+			${umbDestroyOnDisconnect()}></umb-block-grid-block>`;
 	}
 
 	#renderBlock() {
@@ -479,20 +495,25 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
 	}
 
 	#renderEditAction() {
-		return html`
-			${this._showContentEdit && this._workspaceEditContentPath
+		return this._showContentEdit && this._workspaceEditContentPath
+			? html`<uui-button
+					label="edit"
+					look="secondary"
+					color=${this._contentInvalid ? 'danger' : ''}
+					href=${this._workspaceEditContentPath}>
+					<uui-icon name="icon-edit"></uui-icon>
+					${this._contentInvalid
+						? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
+						: nothing}
+				</uui-button>`
+			: this._showContentEdit === false && this._exposed === false
 				? html`<uui-button
-						label="edit"
+						@click=${this.#expose}
+						label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
 						look="secondary"
-						color=${this._contentInvalid ? 'danger' : ''}
-						href=${this._workspaceEditContentPath}>
-						<uui-icon name="icon-edit"></uui-icon>
-						${this._contentInvalid
-							? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
-							: nothing}
-					</uui-button>`
-				: nothing}
-		`;
+						><uui-icon name="icon-add"></uui-icon
+					></uui-button>`
+				: nothing;
 	}
 
 	#renderEditSettingsAction() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/constants.ts
new file mode 100644
index 0000000000..9f70d25c93
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/constants.ts
@@ -0,0 +1,2 @@
+export const UMB_BLOCK_GRID_TYPE = 'block-grid-type';
+export const UMB_BLOCK_GRID = 'block-grid';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts
index fdda04c514..a458b7f49c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts
@@ -9,13 +9,11 @@ import {
 	UmbArrayState,
 	UmbBooleanState,
 	UmbNumberState,
-	UmbObjectState,
 	appendToFrozenArray,
 	mergeObservables,
 	observeMultiple,
 } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbBlockEntryContext } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockGridTypeModel, UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
 
@@ -68,9 +66,6 @@ export class UmbBlockGridEntryContext
 		([a, b]) => a === true && b === false,
 	);
 
-	#firstPropertyType = new UmbObjectState<UmbPropertyTypeModel | undefined>(undefined);
-	readonly firstPropertyType = this.#firstPropertyType.asObservable();
-
 	readonly scaleManager = new UmbBlockGridScaleManager(this);
 
 	constructor(host: UmbControllerHost) {
@@ -253,9 +248,7 @@ export class UmbBlockGridEntryContext
 		);
 	}
 
-	_gotContentType(contentType: UmbContentTypeModel | undefined) {
-		this.#firstPropertyType.setValue(contentType?.properties[0]);
-	}
+	_gotContentType() {}
 
 	#calcColumnSpan(columnSpan: number, relevantColumnSpanOptions: number[], layoutColumns: number) {
 		if (relevantColumnSpanOptions.length > 0) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts
index 7a34386848..2f411cfd2b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-manager.context.ts
@@ -186,7 +186,7 @@ export class UmbBlockGridManagerContext<
 		originData: UmbBlockGridWorkspaceOriginData,
 	) {
 		this.setOneLayout(layoutEntry, originData);
-		this.insertBlockData(layoutEntry, content, settings);
+		this.insertBlockData(layoutEntry, content, settings, originData);
 
 		return true;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/index.ts
index 577eea75f4..79d559f5c7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/index.ts
@@ -1,3 +1,4 @@
+export * from './constants.js';
 export * from './context/index.js';
-export * from './types.js';
 export * from './workspace/index.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts
index 5f192aedfe..b22f5a7b07 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts
@@ -1,9 +1,6 @@
 import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeWithGroupKey } from '@umbraco-cms/backoffice/block-type';
 
-export const UMB_BLOCK_GRID_TYPE = 'block-grid-type';
-export const UMB_BLOCK_GRID = 'block-grid';
-
 // Configuration models:
 export interface UmbBlockGridTypeModel extends UmbBlockTypeWithGroupKey {
 	columnSpanOptions: Array<UmbBlockGridTypeColumnSpanOption>;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/block-grid-type-workspace.modal-token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/block-grid-type-workspace.modal-token.ts
index 61b344ca99..fdd64d49ad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/block-grid-type-workspace.modal-token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/block-grid-type-workspace.modal-token.ts
@@ -1,4 +1,5 @@
-import { UMB_BLOCK_GRID_TYPE, type UmbBlockGridTypeModel } from '../types.js';
+import type { UmbBlockGridTypeModel } from '../types.js';
+import { UMB_BLOCK_GRID_TYPE } from '../constants.js';
 import type { UmbWorkspaceModalData, UmbWorkspaceModalValue } from '@umbraco-cms/backoffice/workspace';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
index 9879949f7c..c11ea6c9b8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
@@ -1,4 +1,4 @@
-import { UMB_BLOCK_GRID } from '../../types.js';
+import { UMB_BLOCK_GRID } from '../../constants.js';
 import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts
index a81da4e20d..8722b9f764 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS } from '../index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -14,7 +15,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -32,7 +33,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -50,7 +51,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
index 19aa589759..f23b039e1b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
@@ -1,6 +1,7 @@
 import { UmbBlockListEntryContext } from '../../context/block-list-entry.context.js';
-import { UMB_BLOCK_LIST, type UmbBlockListLayoutModel } from '../../types.js';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbBlockListLayoutModel } from '../../types.js';
+import { UMB_BLOCK_LIST } from '../../constants.js';
+import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
 import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
 import '../ref-list-block/index.js';
@@ -53,6 +54,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	@state()
 	_contentTypeAlias?: string;
 
+	@state()
+	_contentTypeName?: string;
+
 	@state()
 	_showContentEdit = false;
 	@state()
@@ -247,8 +251,19 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			},
 			'contentElementTypeAlias',
 		);
+		this.observe(
+			this.#context.contentElementTypeName,
+			(contentElementTypeName) => {
+				this._contentTypeName = contentElementTypeName;
+			},
+			'contentElementTypeName',
+		);
 	}
 
+	#expose = () => {
+		this.#context.expose();
+	};
+
 	#extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
 		if (
 			manifest.forContentTypeAlias &&
@@ -267,8 +282,10 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			.label=${this._label}
 			.icon=${this._icon}
 			.unpublished=${!this._exposed}
+			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-ref-list-block>`;
+			.settings=${this._blockViewProps.settings}
+			${umbDestroyOnDisconnect()}></umb-ref-list-block>`;
 	}
 
 	#renderInlineBlock() {
@@ -276,8 +293,10 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 			.label=${this._label}
 			.icon=${this._icon}
 			.unpublished=${!this._exposed}
+			.config=${this._blockViewProps.config}
 			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-inline-list-block>`;
+			.settings=${this._blockViewProps.settings}
+			${umbDestroyOnDisconnect()}></umb-inline-list-block>`;
 	}
 
 	#renderBlock() {
@@ -300,7 +319,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 	}
 
 	#renderEditContentAction() {
-		return html` ${this._showContentEdit && this._workspaceEditContentPath
+		return this._showContentEdit && this._workspaceEditContentPath
 			? html`<uui-button
 					label="edit"
 					look="secondary"
@@ -311,7 +330,14 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
 						? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
 						: nothing}
 				</uui-button>`
-			: nothing}`;
+			: this._showContentEdit === false && this._exposed === false
+				? html`<uui-button
+						@click=${this.#expose}
+						label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
+						look="secondary"
+						><uui-icon name="icon-add"></uui-icon
+					></uui-button>`
+				: nothing;
 	}
 
 	#renderEditSettingsAction() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts
index 9c7ae7378f..b0685a4828 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts
@@ -4,13 +4,22 @@ import {
 	type UmbBlockDataType,
 	type UMB_BLOCK_WORKSPACE_CONTEXT,
 } from '@umbraco-cms/backoffice/block';
-import { UmbExtensionsApiInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
+import {
+	UmbExtensionApiInitializer,
+	UmbExtensionsApiInitializer,
+	type UmbApiConstructorArgumentsMethodType,
+} from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
+import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
+
+const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
+	return [{ manifest }];
+};
 
 /**
  * @element umb-inline-list-block
@@ -33,9 +42,18 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@state()
+	private _exposed?: boolean;
+
 	@state()
 	_isOpen = false;
 
+	@state()
+	private _ownerContentTypeName?: string;
+
+	@state()
+	private _variantName?: string;
+
 	constructor() {
 		super();
 
@@ -50,22 +68,60 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 				'observeContentKey',
 			);
 		});
-		this.observe(umbExtensionsRegistry.byTypeAndAlias('workspace', UMB_BLOCK_WORKSPACE_ALIAS), (manifest) => {
-			if (manifest) {
-				createExtensionApi(this, manifest, [{ manifest: manifest }]).then((context) => {
-					if (context) {
-						this.#workspaceContext = context as typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
-						this.#workspaceContext.establishLiveSync();
-						this.#load();
 
-						new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [
-							this,
-							this.#workspaceContext,
-						]);
-					}
-				});
-			}
-		});
+		new UmbExtensionApiInitializer(
+			this,
+			umbExtensionsRegistry,
+			UMB_BLOCK_WORKSPACE_ALIAS,
+			apiArgsCreator,
+			(permitted, ctrl) => {
+				const context = ctrl.api as typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
+				if (permitted && context) {
+					this.#workspaceContext = context;
+					this.#workspaceContext.establishLiveSync();
+					this.#load();
+
+					this.observe(
+						this.#workspaceContext.exposed,
+						(exposed) => {
+							this._exposed = exposed;
+						},
+						'observeExposed',
+					);
+
+					this.observe(
+						context.content.structure.ownerContentTypeName,
+						(name) => {
+							this._ownerContentTypeName = name;
+						},
+						'observeContentTypeName',
+					);
+
+					this.observe(
+						context.variantId,
+						async (variantId) => {
+							if (variantId) {
+								context.content.setup(this, variantId);
+								// TODO: Support segment name?
+								const culture = variantId.culture;
+								if (culture) {
+									const languageRepository = new UmbLanguageItemRepository(this);
+									const { data } = await languageRepository.requestItems([culture]);
+									const name = data?.[0].name;
+									this._variantName = name ? this.localize.string(name) : undefined;
+								}
+							}
+						},
+						'observeVariant',
+					);
+
+					new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [
+						this,
+						this.#workspaceContext,
+					]);
+				}
+			},
+		);
 	}
 
 	#load() {
@@ -73,6 +129,10 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 		this.#workspaceContext.load(this.#contentKey);
 	}
 
+	#expose = () => {
+		this.#workspaceContext?.expose();
+	};
+
 	override render() {
 		return html`
 			<div id="host">
@@ -89,18 +149,16 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 						this._isOpen = !this._isOpen;
 					}}>
 					<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
-					${this.#renderContent()}
+					${this.#renderBlockInfo()}
 					<slot></slot>
 					<slot name="tag"></slot>
 				</button>
-				${this._isOpen === true
-					? html`<umb-block-workspace-view-edit-content-no-router></umb-block-workspace-view-edit-content-no-router>`
-					: ''}
+				${this._isOpen === true ? this.#renderInside() : ''}
 			</div>
 		`;
 	}
 
-	#renderContent() {
+	#renderBlockInfo() {
 		return html`
 			<span id="content">
 				<span id="icon">
@@ -113,6 +171,19 @@ export class UmbInlineListBlockElement extends UmbLitElement {
 		`;
 	}
 
+	#renderInside() {
+		if (this._exposed === false) {
+			return html`<uui-button style="position:absolute; inset:0;" @click=${this.#expose}
+				><uui-icon name="icon-add"></uui-icon>
+				<umb-localize
+					key="blockEditor_createThisFor"
+					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
+			></uui-button>`;
+		} else {
+			return html`<umb-block-workspace-view-edit-content-no-router></umb-block-workspace-view-edit-content-no-router>`;
+		}
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
index 556d67460f..2e9695f545 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
@@ -1,13 +1,10 @@
 import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 
 import '@umbraco-cms/backoffice/ufm';
+import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
 
-/**
- * @element umb-ref-list-block
- */
 @customElement('umb-ref-list-block')
 export class UmbRefListBlockElement extends UmbLitElement {
 	//
@@ -23,27 +20,12 @@ export class UmbRefListBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
-	@property()
-	_workspaceEditPath?: string;
-
-	constructor() {
-		super();
-
-		// UMB_BLOCK_LIST_ENTRY_CONTEXT
-		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, async (context) => {
-			this.observe(
-				context.workspaceEditContentPath,
-				(workspaceEditPath) => {
-					this._workspaceEditPath = workspaceEditPath;
-				},
-				'observeWorkspaceEditPath',
-			);
-		});
-	}
+	@property({ attribute: false })
+	config?: UmbBlockEditorCustomViewConfiguration;
 
 	override render() {
 		return html`
-			<uui-ref-node standalone href=${this._workspaceEditPath ?? '#'}>
+			<uui-ref-node standalone href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
 				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
 			</uui-ref-node>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/constants.ts
new file mode 100644
index 0000000000..cae284bdee
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/constants.ts
@@ -0,0 +1,2 @@
+export const UMB_BLOCK_LIST_TYPE = 'block-list-type';
+export const UMB_BLOCK_LIST = 'block-list';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entries.context.ts
index 2e20c5836e..0ddd1eb326 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entries.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entries.context.ts
@@ -48,7 +48,11 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 			})
 			.onSubmit(async (value, data) => {
 				if (value?.create && data) {
-					const created = await this.create(value.create.contentElementTypeKey, {});
+					const created = await this.create(
+						value.create.contentElementTypeKey,
+						{},
+						data.originData as UmbBlockListWorkspaceOriginData,
+					);
 					if (created) {
 						this.insert(
 							created.layout,
@@ -127,9 +131,13 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 		this._manager?.setLayouts(layouts);
 	}
 
-	async create(contentElementTypeKey: string, partialLayoutEntry?: Omit<UmbBlockListLayoutModel, 'contentKey'>) {
+	async create(
+		contentElementTypeKey: string,
+		partialLayoutEntry?: Omit<UmbBlockListLayoutModel, 'contentKey'>,
+		originData?: UmbBlockListWorkspaceOriginData,
+	) {
 		await this._retrieveManager;
-		return this._manager?.create(contentElementTypeKey, partialLayoutEntry);
+		return this._manager?.create(contentElementTypeKey, partialLayoutEntry, originData);
 	}
 
 	// insert Block?
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
index b2b8d3d065..ccc98f903a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
@@ -21,7 +21,13 @@ export class UmbBlockListManagerContext<
 		return this.#inlineEditingMode.getValue();
 	}
 
-	create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>) {
+	create(
+		contentElementTypeKey: string,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		// This property is used by some implementations, but not used in this. Do not remove. [NL]
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_originData?: UmbBlockListWorkspaceOriginData,
+	) {
 		return super._createBlockData(contentElementTypeKey, partialLayoutEntry);
 	}
 
@@ -33,7 +39,7 @@ export class UmbBlockListManagerContext<
 	) {
 		this._layouts.appendOneAt(layoutEntry, originData.index ?? -1);
 
-		this.insertBlockData(layoutEntry, content, settings);
+		this.insertBlockData(layoutEntry, content, settings, originData);
 
 		return true;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/index.ts
index 577eea75f4..79d559f5c7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/index.ts
@@ -1,3 +1,4 @@
+export * from './constants.js';
 export * from './context/index.js';
-export * from './types.js';
 export * from './workspace/index.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
index f86b7c72c3..67e1291272 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts
@@ -117,7 +117,6 @@ export class UmbPropertyEditorUIBlockListElement
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
 	 * @type {boolean}
-	 * @attr
 	 * @default
 	 */
 	@property({ type: Boolean, reflect: true })
@@ -155,8 +154,6 @@ export class UmbPropertyEditorUIBlockListElement
 	constructor() {
 		super();
 
-		//this.#validationContext.messages.debug('block list');
-
 		this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
 			this.observe(
 				context.dataPath,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
index 772b8068c2..054b47d124 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.ts
@@ -1,5 +1,5 @@
 import '../../../block-type/components/input-block-type/index.js';
-import { UMB_BLOCK_LIST_TYPE } from '../../types.js';
+import { UMB_BLOCK_LIST_TYPE } from '../../constants.js';
 import type { UmbBlockTypeBaseModel, UmbInputBlockTypeElement } from '@umbraco-cms/backoffice/block-type';
 import {
 	type UmbPropertyEditorUiElement,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
index 94ff232c27..2903ee03b3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/types.ts
@@ -1,9 +1,6 @@
 import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
 
-export const UMB_BLOCK_LIST_TYPE = 'block-list-type';
-export const UMB_BLOCK_LIST = 'block-list';
-
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface UmbBlockListTypeModel extends UmbBlockTypeBaseModel {}
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/manifests.ts
index 2668e8db6a..04d75d39ab 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/views/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS } from '../index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -14,7 +15,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
index f835c064c1..e5f8fd3486 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
@@ -1,7 +1,8 @@
-import { UMB_BLOCK_RTE, type UmbBlockRteLayoutModel } from '../../types.js';
+import type { UmbBlockRteLayoutModel } from '../../types.js';
+import { UMB_BLOCK_RTE } from '../../constants.js';
 import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, css, property, state, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { html, css, property, state, customElement, nothing } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type {
@@ -11,6 +12,8 @@ import type {
 import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
 
 import '../ref-rte-block/index.js';
+import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
+import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
 
 /**
  * @class UmbBlockRteEntryElement
@@ -26,6 +29,16 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		if (!value) return;
 		this._contentKey = value;
 		this.#context.setContentKey(value);
+
+		new UmbObserveValidationStateController(
+			this,
+			`$.contentData[${UmbDataPathBlockElementDataQuery({ key: value })}]`,
+			(hasMessages) => {
+				this._contentInvalid = hasMessages;
+				this._blockViewProps.contentInvalid = hasMessages;
+			},
+			'observeMessagesForContent',
+		);
 	}
 	private _contentKey?: string | undefined;
 
@@ -55,12 +68,23 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 	@state()
 	_contentElementTypeAlias?: string;
 
+	@state()
+	_contentTypeName?: string;
+
 	@state()
 	_blockViewProps: UmbBlockEditorCustomViewProperties<UmbBlockRteLayoutModel> = {
 		contentKey: undefined!,
 		config: { showContentEdit: false, showSettingsEdit: false },
 	}; // Set to undefined cause it will be set before we render.
 
+	// 'content-invalid' attribute is used for styling purpose.
+	@property({ type: Boolean, attribute: 'content-invalid', reflect: true })
+	_contentInvalid?: boolean;
+
+	// 'settings-invalid' attribute is used for styling purpose.
+	@property({ type: Boolean, attribute: 'settings-invalid', reflect: true })
+	_settingsInvalid?: boolean;
+
 	#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockRteLayoutModel>>) {
 		this._blockViewProps = { ...this._blockViewProps, ...incoming };
 		this.requestUpdate('_blockViewProps');
@@ -72,17 +96,36 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		// We do not have index for RTE Blocks at the moment.
 		this.#context.setIndex(0);
 
-		this.observe(this.#context.showContentEdit, (showContentEdit) => {
-			this._showContentEdit = showContentEdit;
-			this.#updateBlockViewProps({ config: { ...this._blockViewProps.config!, showContentEdit } });
-		});
-		this.observe(this.#context.settingsElementTypeKey, (key) => {
-			this._hasSettings = !!key;
-			this.#updateBlockViewProps({ config: { ...this._blockViewProps.config!, showSettingsEdit: !!key } });
-		});
-		this.observe(this.#context.contentElementTypeAlias, (alias) => {
-			this._contentElementTypeAlias = alias;
-		});
+		this.observe(
+			this.#context.showContentEdit,
+			(showContentEdit) => {
+				this._showContentEdit = showContentEdit;
+				this.#updateBlockViewProps({ config: { ...this._blockViewProps.config!, showContentEdit } });
+			},
+			null,
+		);
+		this.observe(
+			this.#context.settingsElementTypeKey,
+			(key) => {
+				this._hasSettings = !!key;
+				this.#updateBlockViewProps({ config: { ...this._blockViewProps.config!, showSettingsEdit: !!key } });
+			},
+			null,
+		);
+		this.observe(
+			this.#context.contentElementTypeAlias,
+			(alias) => {
+				this._contentElementTypeAlias = alias;
+			},
+			null,
+		);
+		this.observe(
+			this.#context.contentElementTypeName,
+			(contentElementTypeName) => {
+				this._contentTypeName = contentElementTypeName;
+			},
+			null,
+		);
 		this.observe(
 			this.#context.blockType,
 			(blockType) => {
@@ -126,8 +169,6 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 
 		this.#observeData();
 
-		// TODO: Implement validation for RTE Blocks: [NL]
-		/*
 		this.observe(
 			this.#context.settingsKey,
 			(settingsKey) => {
@@ -147,7 +188,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 			},
 			null,
 		);
-		*/
+
 		this.observe(
 			this.#context.workspaceEditContentPath,
 			(path) => {
@@ -188,15 +229,6 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		this.setAttribute('contenteditable', 'false');
 	}
 
-	#renderRefBlock() {
-		return html`<umb-ref-rte-block
-			.label=${this._label}
-			.icon=${this._icon}
-			.unpublished=${!this._exposed}
-			.content=${this._blockViewProps.content}
-			.settings=${this._blockViewProps.settings}></umb-ref-rte-block>`;
-	}
-
 	readonly #filterBlockCustomViews = (manifest: ManifestBlockEditorCustomView) => {
 		const elementTypeAlias = this._contentElementTypeAlias ?? '';
 		const isForBlockEditor =
@@ -206,6 +238,10 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 		return isForBlockEditor && isForContentTypeAlias;
 	};
 
+	#expose = () => {
+		this.#context.expose();
+	};
+
 	#renderBlock() {
 		return html`
 			<div class="uui-text uui-font">
@@ -217,22 +253,62 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
 					single>
 					${this.#renderRefBlock()}
 				</umb-extension-slot>
-				<uui-action-bar>
-					${this._showContentEdit && this._workspaceEditContentPath
-						? html`<uui-button label="edit" compact href=${this._workspaceEditContentPath}>
-								<uui-icon name="icon-edit"></uui-icon>
-							</uui-button>`
-						: ''}
-					${this._hasSettings && this._workspaceEditSettingsPath
-						? html`<uui-button label="Edit settings" compact href=${this._workspaceEditSettingsPath}>
-								<uui-icon name="icon-settings"></uui-icon>
-							</uui-button>`
-						: ''}
-				</uui-action-bar>
+				<uui-action-bar> ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} </uui-action-bar>
+				${!this._showContentEdit && this._contentInvalid
+					? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
+					: nothing}
 			</div>
 		`;
 	}
 
+	#renderRefBlock() {
+		return html`<umb-ref-rte-block
+			.label=${this._label}
+			.icon=${this._icon}
+			.unpublished=${!this._exposed}
+			.content=${this._blockViewProps.content}
+			.settings=${this._blockViewProps.settings}></umb-ref-rte-block>`;
+	}
+
+	#renderEditAction() {
+		return this._showContentEdit && this._workspaceEditContentPath
+			? html`<uui-button
+					label="edit"
+					look="secondary"
+					color=${this._contentInvalid ? 'danger' : ''}
+					href=${this._workspaceEditContentPath}>
+					<uui-icon name="icon-edit"></uui-icon>
+					${this._contentInvalid
+						? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
+						: nothing}
+				</uui-button>`
+			: this._showContentEdit === false && this._exposed === false
+				? html`<uui-button
+						@click=${this.#expose}
+						label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
+						look="secondary"
+						><uui-icon name="icon-add"></uui-icon
+					></uui-button>`
+				: nothing;
+	}
+
+	#renderEditSettingsAction() {
+		return html`
+			${this._hasSettings && this._workspaceEditSettingsPath
+				? html`<uui-button
+						label="Edit settings"
+						look="secondary"
+						color=${this._settingsInvalid ? 'danger' : ''}
+						href=${this._workspaceEditSettingsPath}>
+						<uui-icon name="icon-settings"></uui-icon>
+						${this._settingsInvalid
+							? html`<uui-badge attention color="danger" label="Invalid settings">!</uui-badge>`
+							: nothing}
+					</uui-button>`
+				: nothing}
+		`;
+	}
+
 	override render() {
 		return this.#renderBlock();
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/constants.ts
new file mode 100644
index 0000000000..4aaa6a7406
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/constants.ts
@@ -0,0 +1,2 @@
+export const UMB_BLOCK_RTE_TYPE = 'block-rte-type';
+export const UMB_BLOCK_RTE = 'block-rte';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts
index 441f6c17fb..70846d23fd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts
@@ -53,7 +53,12 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 						{} as any,
 					);
 					if (created) {
-						this.insert(created.layout, created.content, created.settings);
+						this.insert(
+							created.layout,
+							created.content,
+							created.settings,
+							data.originData as UmbBlockRteWorkspaceOriginData,
+						);
 					} else {
 						throw new Error('Failed to create block');
 					}
@@ -122,9 +127,13 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 		this._manager?.setLayouts(layouts);
 	}
 
-	async create(contentElementTypeKey: string, partialLayoutEntry?: Omit<UmbBlockRteLayoutModel, 'contentKey'>) {
+	async create(
+		contentElementTypeKey: string,
+		partialLayoutEntry?: Omit<UmbBlockRteLayoutModel, 'contentKey'>,
+		originData?: UmbBlockRteWorkspaceOriginData,
+	) {
 		await this._retrieveManager;
-		return this._manager?.create(contentElementTypeKey, partialLayoutEntry);
+		return this._manager?.create(contentElementTypeKey, partialLayoutEntry, originData);
 	}
 
 	// insert Block?
@@ -133,9 +142,10 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 		layoutEntry: UmbBlockRteLayoutModel,
 		content: UmbBlockDataModel,
 		settings: UmbBlockDataModel | undefined,
+		originData: UmbBlockRteWorkspaceOriginData,
 	) {
 		await this._retrieveManager;
-		return this._manager?.insert(layoutEntry, content, settings) ?? false;
+		return this._manager?.insert(layoutEntry, content, settings, originData) ?? false;
 	}
 
 	// create Block?
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts
index 876dfb06d8..4fefc64e27 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts
@@ -1,3 +1,4 @@
+import type { UmbBlockRteWorkspaceOriginData } from '../workspace/block-rte-workspace.modal-token.js';
 import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js';
 import type { UmbBlockDataModel } from '../../block/types.js';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
@@ -14,7 +15,13 @@ export class UmbBlockRteManagerContext<
 		this._layouts.removeOne(contentKey);
 	}
 
-	create(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>) {
+	create(
+		contentElementTypeKey: string,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		// This property is used by some implementations, but not used in this, do not remove. [NL]
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_originData?: UmbBlockRteWorkspaceOriginData,
+	) {
 		const data = super._createBlockData(contentElementTypeKey, partialLayoutEntry);
 
 		// Find block type.
@@ -30,10 +37,15 @@ export class UmbBlockRteManagerContext<
 		return data;
 	}
 
-	insert(layoutEntry: BlockLayoutType, content: UmbBlockDataModel, settings: UmbBlockDataModel | undefined) {
+	insert(
+		layoutEntry: BlockLayoutType,
+		content: UmbBlockDataModel,
+		settings: UmbBlockDataModel | undefined,
+		originData: UmbBlockRteWorkspaceOriginData,
+	) {
 		this._layouts.appendOne(layoutEntry);
 
-		this.insertBlockData(layoutEntry, content, settings);
+		this.insertBlockData(layoutEntry, content, settings, originData);
 
 		return true;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts
index 5ce24a84b0..40cb3510e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts
@@ -1,4 +1,5 @@
+export * from './constants.js';
 export * from './components/index.js';
 export * from './context/index.js';
 export * from './workspace/index.js';
-export * from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts
index f6e44b3beb..c7e8bff28b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/types.ts
@@ -1,9 +1,6 @@
 import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
 import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '@umbraco-cms/backoffice/block';
 
-export const UMB_BLOCK_RTE_TYPE = 'block-rte-type';
-export const UMB_BLOCK_RTE = 'block-rte';
-
 export interface UmbBlockRteTypeModel extends UmbBlockTypeBaseModel {
 	displayInline: boolean;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/manifests.ts
index a6f11440a5..5b8abf2041 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/views/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_BLOCK_RTE_TYPE_WORKSPACE_ALIAS } from '../index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -14,7 +15,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_RTE_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
index 5ec53ac6a3..376e077785 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts
@@ -6,13 +6,14 @@ import { html, customElement, property, state, ifDefined } from '@umbraco-cms/ba
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
-import { removeLastSlashFromPath, transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
+import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UUICardEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-block-type-card')
 export class UmbBlockTypeCardElement extends UmbLitElement {
-	readonly #init: Promise<void>;
-	#appUrl: string = '';
+	//
+	#init: Promise<void>;
+	#serverUrl: string = '';
 
 	readonly #itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
 		this,
@@ -28,7 +29,8 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 		value = transformServerPathToClientPath(value);
 		if (value) {
 			this.#init.then(() => {
-				this._iconFile = removeLastSlashFromPath(this.#appUrl) + value;
+				const url = new URL(value, this.#serverUrl);
+				this._iconFile = url.href;
 			});
 		} else {
 			this._iconFile = undefined;
@@ -76,7 +78,7 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 		super();
 
 		this.#init = this.getContext(UMB_APP_CONTEXT).then((appContext) => {
-			this.#appUrl = appContext.getServerUrl() + appContext.getBackofficePath();
+			this.#serverUrl = appContext.getServerUrl();
 		});
 
 		this.observe(this.#itemManager.items, (items) => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts
index 814adba5f3..76a7e33393 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/index.ts
@@ -1,3 +1,3 @@
 export * from './components/index.js';
-export * from './types.js';
 export * from './workspace/index.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
index 8b9d425241..1d17eb81ec 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
@@ -1,6 +1,6 @@
 import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../types.js';
 import { UmbBlockTypeWorkspaceEditorElement } from './block-type-workspace-editor.element.js';
-import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
+import type { UmbPropertyDatasetContext, UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type {
 	UmbInvariantDatasetWorkspaceContext,
@@ -12,9 +12,11 @@ import {
 	UmbInvariantWorkspacePropertyDatasetContext,
 	UmbWorkspaceIsNewRedirectController,
 	UmbWorkspaceIsNewRedirectControllerAlias,
+	umbObjectToPropertyValueArray,
 } from '@umbraco-cms/backoffice/workspace';
 import { UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 
 export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWithGroupKey = UmbBlockTypeWithGroupKey>
 	extends UmbSubmittableWorkspaceContextBase<BlockTypeData>
@@ -25,12 +27,18 @@ export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWith
 
 	#entityType: string;
 	#data = new UmbObjectState<BlockTypeData | undefined>(undefined);
-	//readonly data = this.#data.asObservable();
+	readonly data = this.#data.asObservable();
 
-	// TODO: Get the name of the contentElementType..
-	readonly name = this.#data.asObservablePart(() => 'block');
+	readonly name = this.#data.asObservablePart(() => 'block type');
 	readonly unique = this.#data.asObservablePart((data) => data?.contentElementTypeKey);
 
+	readonly values = this.#data.asObservablePart((data) => {
+		return umbObjectToPropertyValueArray(data);
+	});
+	async getValues(): Promise<Array<UmbPropertyValueData> | undefined> {
+		return umbObjectToPropertyValueArray(await firstValueFrom(this.data));
+	}
+
 	constructor(host: UmbControllerHost, args: { manifest: ManifestWorkspace }) {
 		super(host, args.manifest.alias);
 		const manifest = args.manifest;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/manifests.ts
index eadd29a17c..3fcdb6fb10 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS } from '../../block-grid/workspace/index.js';
 import { UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS } from '../../block-list/workspace/index.js';
 import { UMB_BLOCK_RTE_TYPE_WORKSPACE_ALIAS } from '../../block-rte/workspace/index.js';
@@ -17,7 +18,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				oneOf: [
 					UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
 					UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
index 0d2189840a..1e5e0cd222 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts
@@ -46,10 +46,10 @@ export abstract class UmbBlockEntryContext<
 
 	#contentKey?: string;
 	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
-	protected _variantId = this.#variantId.asObservable();
+	protected readonly _variantId = this.#variantId.asObservable();
 
 	#hasExpose = new UmbBooleanState(undefined);
-	hasExpose = this.#hasExpose.asObservable();
+	readonly hasExpose = this.#hasExpose.asObservable();
 
 	public readonly readOnlyState = new UmbReadOnlyVariantStateManager(this);
 
@@ -376,10 +376,10 @@ export abstract class UmbBlockEntryContext<
 
 	/**
 	 * Get the current value of this Blocks label.
-	 * @function getLabel
+	 * @function getName
 	 * @returns {string} - the value of the label.
 	 */
-	getLabel() {
+	getName() {
 		return this.#labelRender.toString();
 	}
 
@@ -638,7 +638,7 @@ export abstract class UmbBlockEntryContext<
 	}
 
 	async requestDelete() {
-		const blockName = this.getLabel();
+		const blockName = this.getName();
 		// TODO: Localizations missing [NL]
 		await umbConfirmModal(this, {
 			headline: `Delete ${blockName}`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts
index c650cee4c0..4fb02dc221 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts
@@ -78,7 +78,7 @@ export abstract class UmbBlockManagerContext<
 	setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) {
 		this._editorConfiguration.setValue(configs);
 		if (this._liveEditingMode.getValue() === undefined) {
-			this._liveEditingMode.setValue(configs.getValueByAlias<boolean>('liveEditingMode'));
+			this._liveEditingMode.setValue(configs.getValueByAlias<boolean>('useLiveEditing'));
 		}
 	}
 	getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined {
@@ -206,7 +206,9 @@ export abstract class UmbBlockManagerContext<
 	getContentOf(contentKey: string) {
 		return this.#contents.value.find((x) => x.key === contentKey);
 	}
-	setOneLayout(layoutData: BlockLayoutType) {
+	// originData param is used by some implementations. [NL] should be here, do not remove it.
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	setOneLayout(layoutData: BlockLayoutType, _originData?: BlockOriginDataType) {
 		this._layouts.appendOne(layoutData);
 	}
 	setOneContent(contentData: UmbBlockDataModel) {
@@ -319,7 +321,13 @@ export abstract class UmbBlockManagerContext<
 		originData: BlockOriginDataType,
 	): boolean;
 
-	protected insertBlockData(layoutEntry: BlockLayoutType, content: UmbBlockDataModel, settings?: UmbBlockDataModel) {
+	protected insertBlockData(
+		layoutEntry: BlockLayoutType,
+		content: UmbBlockDataModel,
+		settings: UmbBlockDataModel | undefined,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_originData: BlockOriginDataType,
+	) {
 		// Create content entry:
 		if (layoutEntry.contentKey) {
 			this.#contents.appendOne(content);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts
index 866baaf319..216c98bbe6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts
@@ -1,6 +1,6 @@
 export * from './context/index.js';
 export * from './modals/index.js';
-export type * from './types.js';
+export * from './property-value-resolver/index.js';
 export * from './validation/index.js';
 export * from './workspace/index.js';
-export * from './property-value-resolver/index.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/block-value-resolver.api.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/block-value-resolver.api.ts
index 08ffcdc3f6..7abc94574f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/block-value-resolver.api.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/block-value-resolver.api.ts
@@ -1,14 +1,14 @@
 import type { UmbBlockDataValueModel, UmbBlockExposeModel, UmbBlockValueDataPropertiesBaseType } from '../types.js';
-import type { UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbElementValueModel } from '@umbraco-cms/backoffice/content';
 import type { UmbPropertyValueResolver } from '@umbraco-cms/backoffice/property';
 
 export abstract class UmbBlockValueResolver<ValueType>
-	implements UmbPropertyValueResolver<UmbContentValueModel<ValueType>, UmbBlockDataValueModel, UmbBlockExposeModel>
+	implements UmbPropertyValueResolver<UmbElementValueModel<ValueType>, UmbBlockDataValueModel, UmbBlockExposeModel>
 {
 	abstract processValues(
-		property: UmbContentValueModel<ValueType>,
+		property: UmbElementValueModel<ValueType>,
 		valuesCallback: (values: Array<UmbBlockDataValueModel>) => Promise<Array<UmbBlockDataValueModel> | undefined>,
-	): Promise<UmbContentValueModel<ValueType>>;
+	): Promise<UmbElementValueModel<ValueType>>;
 
 	protected async _processValueBlockData<ValueType extends UmbBlockValueDataPropertiesBaseType>(
 		value: ValueType,
@@ -30,9 +30,9 @@ export abstract class UmbBlockValueResolver<ValueType>
 	}
 
 	abstract processVariants(
-		property: UmbContentValueModel<ValueType>,
+		property: UmbElementValueModel<ValueType>,
 		variantsCallback: (values: Array<UmbBlockExposeModel>) => Promise<Array<UmbBlockExposeModel> | undefined>,
-	): Promise<UmbContentValueModel<ValueType>>;
+	): Promise<UmbElementValueModel<ValueType>>;
 
 	protected async _processVariantBlockData<ValueType extends UmbBlockValueDataPropertiesBaseType>(
 		value: ValueType,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/standard-block-value-resolver.api.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/standard-block-value-resolver.api.ts
index 7837845e70..2f3c42d1f8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/standard-block-value-resolver.api.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/property-value-resolver/standard-block-value-resolver.api.ts
@@ -1,10 +1,10 @@
 import type { UmbBlockDataValueModel, UmbBlockExposeModel, UmbBlockValueType } from '../types.js';
 import { UmbBlockValueResolver } from './block-value-resolver.api.js';
-import type { UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbElementValueModel } from '@umbraco-cms/backoffice/content';
 
 export class UmbStandardBlockValueResolver extends UmbBlockValueResolver<UmbBlockValueType> {
 	async processValues(
-		property: UmbContentValueModel<UmbBlockValueType>,
+		property: UmbElementValueModel<UmbBlockValueType>,
 		valuesCallback: (values: Array<UmbBlockDataValueModel>) => Promise<Array<UmbBlockDataValueModel> | undefined>,
 	) {
 		if (property.value) {
@@ -17,7 +17,7 @@ export class UmbStandardBlockValueResolver extends UmbBlockValueResolver<UmbBloc
 	}
 
 	async processVariants(
-		property: UmbContentValueModel<UmbBlockValueType>,
+		property: UmbElementValueModel<UmbBlockValueType>,
 		variantsCallback: (values: Array<UmbBlockExposeModel>) => Promise<Array<UmbBlockExposeModel> | undefined>,
 	) {
 		if (property.value) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
index a95b0dab57..011f9763f1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
@@ -1,4 +1,7 @@
-import type { UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbElementValueModel } from '@umbraco-cms/backoffice/content';
+
+export type * from './conditions/types.js';
+export type * from './clipboard/types.js';
 
 export interface UmbBlockLayoutBaseModel {
 	contentKey: string;
@@ -6,7 +9,7 @@ export interface UmbBlockLayoutBaseModel {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface UmbBlockDataValueModel<ValueType = unknown> extends UmbContentValueModel<ValueType> {}
+export interface UmbBlockDataValueModel<ValueType = unknown> extends UmbElementValueModel<ValueType> {}
 
 export interface UmbBlockDataModel {
 	key: string;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-property-validation-path-translator.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-property-validation-path-translator.controller.ts
deleted file mode 100644
index 096eec3967..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-property-validation-path-translator.controller.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import {
-	GetPropertyNameFromPath,
-	UmbDataPathPropertyValueQuery,
-	UmbValidationPathTranslatorBase,
-} from '@umbraco-cms/backoffice/validation';
-
-export class UmbBlockElementDataValidationPathTranslator extends UmbValidationPathTranslatorBase {
-	constructor(host: UmbControllerHost) {
-		super(host);
-	}
-
-	translate(path: string) {
-		if (!this._context) return;
-		if (path.indexOf('$.') !== 0) {
-			// We do not handle this path.
-			return false;
-		}
-
-		const rest = path.substring(2);
-		const key = GetPropertyNameFromPath(rest);
-
-		const specificValue = { alias: key };
-		// replace the values[ number ] with JSON-Path filter values[@.(...)], continues by the rest of the path:
-		//return '$.values' + UmbVariantValuesValidationPathTranslator(specificValue) + path.substring(path.indexOf(']'));
-		return '$.values[' + UmbDataPathPropertyValueQuery(specificValue) + '.value';
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-validation-path-translator.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-element-data-validation-path-translator.controller.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-validation-path-translator.controller.ts
rename to src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-element-data-validation-path-translator.controller.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-element-values-validation-path-translator.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-element-values-validation-path-translator.controller.ts
new file mode 100644
index 0000000000..2c2b9da88c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-element-values-validation-path-translator.controller.ts
@@ -0,0 +1,17 @@
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import {
+	UmbAbstractArrayValidationPathTranslator,
+	UmbDataPathPropertyValueQuery,
+} from '@umbraco-cms/backoffice/validation';
+
+export class UmbBlockElementValuesDataValidationPathTranslator extends UmbAbstractArrayValidationPathTranslator {
+	constructor(host: UmbControllerHost) {
+		super(host, '$.values[', UmbDataPathPropertyValueQuery);
+	}
+
+	getDataFromIndex(index: number) {
+		if (!this._context) return;
+		const data = this._context.getTranslationData();
+		return data.values[index];
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/data-path-element-data-query.function.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/data-path-element-data-query.function.ts
index 517e393897..1d624a3123 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/data-path-element-data-query.function.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/data-path-element-data-query.function.ts
@@ -2,14 +2,14 @@ import type { UmbBlockDataModel } from '../types.js';
 
 /**
  * Validation Data Path Query generator for Block Element Data.
- * write a JSON-Path filter similar to `?(@.key = 'my-key://1234')`
+ * write a JSON-Path filter similar to `?(@.key == 'my-key://1234')`
  * @param key {string} - The key of the block Element data.
  * @param data {{key: string}} - A data object with the key property.
  * @returns
  */
 export function UmbDataPathBlockElementDataQuery(data: Pick<UmbBlockDataModel, 'key'>): string {
 	// write a array of strings for each property, where alias must be present and culture and segment are optional
-	//const filters: Array<string> = [`@.key = '${key}'`];
+	//const filters: Array<string> = [`@.key == '${key}'`];
 	//return `?(${filters.join(' && ')})`;
-	return `?(@.key = '${data.key}')`;
+	return `?(@.key == '${data.key}')`;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/index.ts
index 331352a0d8..f2af316128 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/index.ts
@@ -1,2 +1,3 @@
-export * from './block-data-validation-path-translator.controller.js';
+export * from './block-element-values-validation-path-translator.controller.js';
+export * from './block-element-data-validation-path-translator.controller.js';
 export * from './data-path-element-data-query.function.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
index d2c642d652..bac6c7d5bd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
@@ -1,11 +1,12 @@
-import type { UmbBlockDataModel, UmbBlockDataValueModel } from '../types.js';
+import type { UmbBlockDataModel, UmbBlockDataValueModel, UmbBlockLayoutBaseModel } from '../types.js';
+import { UmbBlockElementValuesDataValidationPathTranslator } from '../validation/block-element-values-validation-path-translator.controller.js';
 import { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js';
+import type { UmbBlockWorkspaceContext } from './block-workspace.context.js';
 import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypeStructureManager } from '@umbraco-cms/backoffice/content-type';
 import {
 	type Observable,
 	UmbClassState,
-	UmbObjectState,
 	appendToFrozenArray,
 	mergeObservables,
 } from '@umbraco-cms/backoffice/observable-api';
@@ -14,21 +15,42 @@ import { type UmbClassInterface, UmbControllerBase } from '@umbraco-cms/backoffi
 import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { UmbValidationController } from '@umbraco-cms/backoffice/validation';
+import { UmbElementWorkspaceDataManager, type UmbElementPropertyDataOwner } from '@umbraco-cms/backoffice/content';
+import { UmbReadOnlyVariantStateManager } from '@umbraco-cms/backoffice/utils';
 
-export class UmbBlockElementManager extends UmbControllerBase {
+import { UmbDataTypeItemRepositoryManager } from '@umbraco-cms/backoffice/data-type';
+
+export class UmbBlockElementManager<LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel>
+	extends UmbControllerBase
+	implements UmbElementPropertyDataOwner<UmbBlockDataModel, UmbContentTypeModel>
+{
 	//
-	#data = new UmbObjectState<UmbBlockDataModel | undefined>(undefined);
-	readonly data = this.#data.asObservable();
+
+	readonly #data = new UmbElementWorkspaceDataManager<UmbBlockDataModel>(this);
+	//#data = new UmbObjectState<UmbBlockDataModel | undefined>(undefined);
+	readonly data = this.#data.current;
 	#getDataPromise = new Promise<void>((resolve) => {
 		this.#getDataResolver = resolve;
 	});
 	#getDataResolver!: () => void;
 
+	public readonly readOnlyState = new UmbReadOnlyVariantStateManager(this);
+
 	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
 	readonly variantId = this.#variantId.asObservable();
 
-	readonly unique = this.#data.asObservablePart((data) => data?.key);
-	readonly contentTypeId = this.#data.asObservablePart((data) => data?.contentTypeKey);
+	readonly name;
+	readonly getName;
+	readonly unique = this.#data.createObservablePartOfCurrent((data) => data?.key);
+	readonly contentTypeId = this.#data.createObservablePartOfCurrent((data) => data?.contentTypeKey);
+
+	readonly values = this.#data.createObservablePartOfCurrent((data) => data?.values);
+	getValues() {
+		return this.#data.getCurrent()?.values;
+	}
+
+	readonly #dataTypeItemManager = new UmbDataTypeItemRepositoryManager(this);
+	#dataTypeSchemaAliasMap = new Map<string, string>();
 
 	readonly structure = new UmbContentTypeStructureManager<UmbContentTypeModel>(
 		this,
@@ -37,19 +59,47 @@ export class UmbBlockElementManager extends UmbControllerBase {
 
 	readonly validation = new UmbValidationController(this);
 
-	constructor(host: UmbControllerHost, dataPathPropertyName: string) {
+	constructor(host: UmbBlockWorkspaceContext<LayoutDataType>, dataPathPropertyName: string) {
 		super(host);
 
+		// Ugly, but we just inherit these from the workspace context: [NL]
+		this.name = host.name;
+		this.getName = host.getName;
+
 		this.observe(this.contentTypeId, (id) => this.structure.loadType(id));
 		this.observe(this.unique, (key) => {
 			if (key) {
-				this.validation.setDataPath('$.' + dataPathPropertyName + `[?(@.key = '${key}')]`);
+				this.validation.setDataPath('$.' + dataPathPropertyName + `[?(@.key == '${key}')]`);
 			}
 		});
+
+		this.observe(
+			this.structure.contentTypeDataTypeUniques,
+			(dataTypeUniques: Array<string>) => {
+				this.#dataTypeItemManager.setUniques(dataTypeUniques);
+			},
+			null,
+		);
+		this.observe(
+			this.#dataTypeItemManager.items,
+			(dataTypes) => {
+				// Make a map of the data type unique and editorAlias:
+				this.#dataTypeSchemaAliasMap = new Map(
+					dataTypes.map((dataType) => {
+						return [dataType.unique, dataType.propertyEditorSchemaAlias];
+					}),
+				);
+			},
+			null,
+		);
 	}
 
-	reset() {
-		this.#data.setValue(undefined);
+	public isLoaded() {
+		return this.#getDataPromise;
+	}
+
+	resetState() {
+		this.#data.clear();
 	}
 
 	setVariantId(variantId: UmbVariantId | undefined) {
@@ -61,12 +111,13 @@ export class UmbBlockElementManager extends UmbControllerBase {
 
 	// TODO: rename to currentData:
 	setData(data: UmbBlockDataModel | undefined) {
-		this.#data.setValue(data);
+		this.#data.setPersisted(data);
+		this.#data.setCurrent(data);
 		this.#getDataResolver();
 	}
 
 	getData() {
-		return this.#data.getValue();
+		return this.#data.getCurrent();
 	}
 
 	getUnique() {
@@ -100,107 +151,88 @@ export class UmbBlockElementManager extends UmbControllerBase {
 
 	/**
 	 * @function propertyValueByAlias
-	 * @param {string} propertyAlias - Property Alias to observe the value of.
-	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>} - Promise which resolves to an Observable
+	 * @param {string} propertyAlias - The alias of the property
+	 * @param {UmbVariantId} variantId - The variant
+	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>} - An observable for the value of the property
 	 * @description Get an Observable for the value of this property.
 	 */
 	async propertyValueByAlias<PropertyValueType = unknown>(
 		propertyAlias: string,
+		variantId?: UmbVariantId,
 	): Promise<Observable<PropertyValueType | undefined> | undefined> {
-		await this.#getDataPromise;
-
-		return mergeObservables(
-			[
-				this.#data.asObservablePart((data) => data?.values?.filter((x) => x?.alias === propertyAlias)),
-				await this.propertyVariantId(propertyAlias),
-			],
-			([propertyValues, propertyVariantId]) => {
-				if (!propertyValues || !propertyVariantId) return;
-
-				return propertyValues.find((x) => propertyVariantId.compare(x))?.value as PropertyValueType;
-			},
+		return this.#data.createObservablePartOfCurrent(
+			(data) =>
+				data?.values?.find((x) => x?.alias === propertyAlias && (variantId ? variantId.compare(x) : true))
+					?.value as PropertyValueType,
 		);
 	}
 
 	/**
 	 * Get the current value of the property with the given alias and variantId.
 	 * @param {string} alias - The alias of the property
-	 * @returns {ReturnType} The value or undefined if not set or found.
+	 * @param {UmbVariantId | undefined} variantId - The variant id of the property
+	 * @returns {ReturnType | undefined} The value or undefined if not set or found.
 	 */
-	async getPropertyValue<ReturnType = unknown>(alias: string) {
-		await this.#getDataPromise;
-		const managerVariantId = this.#variantId.getValue();
-		if (!managerVariantId) return;
-		const property = await this.structure.getPropertyStructureByAlias(alias);
-		if (!property) return;
-		const variantId = this.#createPropertyVariantId(property, managerVariantId);
-		const currentData = this.getData();
-		if (!currentData) return;
-		const newDataSet = currentData.values?.find((x) => x.alias === alias && (variantId ? variantId.compare(x) : true));
-		return newDataSet?.value as ReturnType;
+	getPropertyValue<ReturnType = unknown>(alias: string, variantId?: UmbVariantId) {
+		const currentData = this.#data.getCurrent();
+		if (currentData) {
+			const newDataSet = currentData.values?.find(
+				(x) => x.alias === alias && (variantId ? variantId.compare(x) : true),
+			);
+			return newDataSet?.value as ReturnType;
+		}
+		return undefined;
 	}
-
-	/**
-	 * @function setPropertyValue
-	 * @param {string} alias - The alias of the property
-	 * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
-	 * @returns {Promise<void>}
-	 * @description Set the value of this property.
-	 */
-	async setPropertyValue<ValueType = unknown>(alias: string, value: ValueType) {
+	async setPropertyValue<ValueType = unknown>(alias: string, value: ValueType, variantId?: UmbVariantId) {
 		this.initiatePropertyValueChange();
-		await this.#getDataPromise;
-		const managerVariantId = this.#variantId.getValue();
-		if (!managerVariantId) return;
+		variantId ??= UmbVariantId.CreateInvariant();
 		const property = await this.structure.getPropertyStructureByAlias(alias);
-		if (!property) return;
-		const variantId = this.#createPropertyVariantId(property, managerVariantId);
 
-		const entry = { ...variantId.toObject(), alias, value } as UmbBlockDataValueModel<ValueType>;
+		if (!property) {
+			throw new Error(`Property alias "${alias}" not found.`);
+		}
+
+		const editorAlias = this.#dataTypeSchemaAliasMap.get(property.dataType.unique);
+		if (!editorAlias) {
+			throw new Error(`Editor Alias of "${property.dataType.unique}" not found.`);
+		}
+
+		const entry = { ...variantId.toObject(), alias, editorAlias, value } as UmbBlockDataValueModel<ValueType>;
+
 		const currentData = this.getData();
 		if (currentData) {
 			const values = appendToFrozenArray(
 				currentData.values ?? [],
 				entry,
-				(x) => x.alias === alias && variantId.compare(x),
+				(x) => x.alias === alias && variantId!.compare(x),
 			);
-			this.#data.update({ values });
+			this.#data.updateCurrent({ values });
 		}
 		this.finishPropertyValueChange();
 	}
 
-	#updateLock = 0;
 	initiatePropertyValueChange() {
-		this.#updateLock++;
-		this.#data.mute();
-		// TODO: When ready enable this code will enable handling a finish automatically by this implementation 'using myState.initiatePropertyValueChange()' (Relies on TS support of Using) [NL]
-		/*return {
-			[Symbol.dispose]: this.finishPropertyValueChange,
-		};*/
+		this.#data.initiatePropertyValueChange();
 	}
 	finishPropertyValueChange = () => {
-		this.#updateLock--;
-		this.#triggerPropertyValueChanges();
+		this.#data.finishPropertyValueChange();
 	};
-	#triggerPropertyValueChanges() {
-		if (this.#updateLock === 0) {
-			this.#data.unmute();
-		}
+
+	public createPropertyDatasetContext(host: UmbControllerHost, variantId: UmbVariantId) {
+		return new UmbBlockElementPropertyDatasetContext(host, this, variantId);
 	}
 
-	public createPropertyDatasetContext(host: UmbControllerHost) {
-		return new UmbBlockElementPropertyDatasetContext(host, this, this.getVariantId());
-	}
-
-	public setup(host: UmbClassInterface) {
-		this.createPropertyDatasetContext(host);
+	public setup(host: UmbClassInterface, variantId: UmbVariantId) {
+		this.createPropertyDatasetContext(host, variantId);
 
 		// Provide Validation Context for this view:
 		this.validation.provideAt(host);
+
+		// TODO: Implement ctrl alias.
+		new UmbBlockElementValuesDataValidationPathTranslator(host);
 	}
 
 	public override destroy(): void {
-		this.#data.destroy();
 		this.structure.destroy();
 		super.destroy();
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts
index 8daff7f3fb..34e17f069a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts
@@ -1,89 +1,27 @@
-import { UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT } from './block-element-property-dataset.context-token.js';
 import type { UmbBlockElementManager } from './block-element-manager.js';
-import { UMB_BLOCK_WORKSPACE_CONTEXT } from './block-workspace.context-token.js';
 import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
-import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbElementPropertyDatasetContext } from '@umbraco-cms/backoffice/content';
+import { createObservablePart } from '@umbraco-cms/backoffice/observable-api';
 
-export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase implements UmbPropertyDatasetContext {
-	#elementManager: UmbBlockElementManager;
-	public getVariantId() {
-		return this.#elementManager.getVariantId();
-	}
-	#variantId: UmbVariantId;
-
-	#readOnly = new UmbBooleanState(false);
-	public readOnly = this.#readOnly.asObservable();
-
-	// default data:
-
-	getEntityType() {
-		return this.#elementManager.getEntityType();
-	}
-	getUnique() {
-		return this.#elementManager.getUnique();
-	}
-
-	getName(): string | undefined {
-		return 'TODO: get label';
-	}
-	readonly name: Observable<string | undefined> = 'TODO: get label observable' as any;
+export class UmbBlockElementPropertyDatasetContext
+	extends UmbElementPropertyDatasetContext
+	implements UmbPropertyDatasetContext
+{
+	readonly name;
+	readonly culture;
+	readonly segment;
+	readonly getName;
 
 	constructor(host: UmbControllerHost, elementManager: UmbBlockElementManager, variantId?: UmbVariantId) {
 		// The controller alias, is a very generic name cause we want only one of these for this controller host.
-		super(host, UMB_PROPERTY_DATASET_CONTEXT.toString());
-		this.#elementManager = elementManager;
-		this.#variantId = variantId ?? UmbVariantId.CreateInvariant();
+		super(host, elementManager, variantId);
 
-		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspace) => {
-			this.observe(
-				workspace.readOnlyState.states,
-				(states) => {
-					const isReadOnly = states.some((state) => state.variantId.equal(this.#variantId));
-					this.#readOnly.setValue(isReadOnly);
-				},
-				'umbObserveReadOnlyStates',
-			);
-		});
-
-		this.provideContext(UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT, this);
-	}
-
-	propertyVariantId?(propertyAlias: string): Promise<Observable<UmbVariantId | undefined>> {
-		return this.#elementManager.propertyVariantId(propertyAlias);
-	}
-
-	/**
-	 * @function propertyValueByAlias
-	 * @param {string} propertyAlias
-	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
-	 * @description Get an Observable for the value of this property.
-	 */
-	async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
-		return await this.#elementManager.propertyValueByAlias<ReturnType>(propertyAlias);
-	}
-
-	/**
-	 * @function setPropertyValue
-	 * @param {string} alias
-	 * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
-	 * @returns {Promise<void>}
-	 * @description Set the value of this property.
-	 */
-	async setPropertyValue(alias: string, value: PromiseLike<unknown>) {
-		this.#elementManager.setPropertyValue(alias, value);
-	}
-
-	/**
-	 * Gets the read-only state of the current variant culture.
-	 * @returns {*}  {boolean}
-	 * @memberof UmbBlockGridInlinePropertyDatasetContext
-	 */
-	getReadOnly(): boolean {
-		return this.#readOnly.getValue();
+		// Ugly, but we just inherit these from the workspace context: [NL]
+		this.name = elementManager.name;
+		this.getName = elementManager.getName;
+		this.culture = createObservablePart(elementManager.variantId, (v) => v?.culture);
+		this.segment = createObservablePart(elementManager.variantId, (v) => v?.segment);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
index fa1a5c4f08..31cf151c32 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
@@ -23,6 +23,7 @@ import {
 	UMB_BLOCK_MANAGER_CONTEXT,
 	type UmbBlockWorkspaceOriginData,
 	type UmbBlockWorkspaceData,
+	UMB_BLOCK_ENTRY_CONTEXT,
 } from '@umbraco-cms/backoffice/block';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
@@ -59,9 +60,8 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 
 	readonly settings = new UmbBlockElementManager(this, 'settingsData');
 
-	// TODO: Get the name from the content element type. Or even better get the Label, but that has to be re-actively updated.
-	#label = new UmbStringState<string | undefined>(undefined);
-	readonly name = this.#label.asObservable();
+	#name = new UmbStringState<string | undefined>(undefined);
+	readonly name = this.#name.asObservable();
 
 	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
 	readonly variantId = this.#variantId.asObservable();
@@ -90,7 +90,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			this.observe(
 				manager.liveEditingMode,
 				(liveEditingMode) => {
-					this.#liveEditingMode = liveEditingMode;
+					this.#liveEditingMode = liveEditingMode ?? false;
 				},
 				'observeLiveEditingMode',
 			);
@@ -116,6 +116,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 				'observeBlockType',
 			);
 
+			this.removeUmbControllerByAlias('observeHasExpose');
 			this.observe(
 				this.contentKey,
 				(contentKey) => {
@@ -152,12 +153,16 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 				},
 				'observeIsReadOnly',
 			);
-		}).asPromise();
+		});
 
 		this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {
 			this.#blockEntries = context;
 		}).asPromise();
 
+		this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
+			this.#name.setValue(context.getName());
+		});
+
 		this.observe(this.variantId, (variantId) => {
 			this.content.setVariantId(variantId);
 			this.settings.setVariantId(variantId);
@@ -194,13 +199,13 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 
 	protected override resetState() {
 		super.resetState();
-		this.#label.setValue(undefined);
+		this.#name.setValue(undefined);
 		this.#layout.setValue(undefined);
 		this.#initialLayout = undefined;
 		this.#initialContent = undefined;
 		this.#initialSettings = undefined;
-		this.content.reset();
-		this.settings.reset();
+		this.content.resetState();
+		this.settings.resetState();
 		this.removeUmbControllerByAlias(UmbWorkspaceIsNewRedirectControllerAlias);
 	}
 
@@ -252,13 +257,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 
 		// TODO: We should investigate if it makes sense to gather
 
-		if (!this.#liveEditingMode) {
-			this.#layout.setValue(blockCreated.layout as LayoutDataType);
-			this.content.setData(blockCreated.content);
-			if (blockCreated.settings) {
-				this.settings.setData(blockCreated.settings);
-			}
-		} else {
+		if (this.#liveEditingMode) {
 			// Insert already, cause we are in live editing mode:
 			const blockInserted = await this.#blockEntries.insert(
 				blockCreated.layout,
@@ -274,6 +273,12 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 
 			this.#observeBlockData(unique);
 			this.establishLiveSync();
+		} else {
+			this.#layout.setValue(blockCreated.layout as LayoutDataType);
+			this.content.setData(blockCreated.content);
+			if (blockCreated.settings) {
+				this.settings.setData(blockCreated.settings);
+			}
 		}
 	}
 
@@ -347,7 +352,10 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			this.layout,
 			(layoutData) => {
 				if (layoutData) {
-					this.#blockManager?.setOneLayout(layoutData);
+					this.#blockManager?.setOneLayout(
+						layoutData,
+						this.#modalContext?.data.originData as UmbBlockWorkspaceOriginData,
+					);
 				}
 			},
 			'observeThisLayout',
@@ -443,7 +451,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			} else {
 				// Update data:
 
-				this.#blockManager.setOneLayout(layoutData);
+				this.#blockManager.setOneLayout(layoutData, this.#modalContext.data.originData as UmbBlockWorkspaceOriginData);
 				if (contentData) {
 					this.#blockManager.setOneContent(contentData);
 				}
@@ -480,7 +488,10 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			} else {
 				// Revert the layout, content & settings data to the original state: [NL]
 				if (this.#initialLayout) {
-					this.#blockManager?.setOneLayout(this.#initialLayout);
+					this.#blockManager?.setOneLayout(
+						this.#initialLayout,
+						this.#modalContext?.data.originData as UmbBlockWorkspaceOriginData,
+					);
 				}
 				if (this.#initialContent) {
 					this.#blockManager?.setOneContent(this.#initialContent);
@@ -495,7 +506,7 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	public override destroy(): void {
 		super.destroy();
 		this.#layout.destroy();
-		this.#label.destroy();
+		this.#name.destroy();
 		this.#blockManager = undefined;
 		this.#modalContext = undefined;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts
index e5a5645042..1b67a6e46e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_BLOCK_WORKSPACE_ALIAS } from './index.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -15,7 +16,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_WORKSPACE_ALIAS,
 			},
 			{
@@ -37,7 +38,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_WORKSPACE_ALIAS,
 			},
 			{
@@ -69,7 +70,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_WORKSPACE_ALIAS,
 			},
 		],
@@ -94,7 +95,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_BLOCK_WORKSPACE_ALIAS,
 			},
 			{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts
index 29a1e01e71..652400020c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts
@@ -6,7 +6,6 @@ import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
-import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
 
 /**
  * @element umb-block-workspace-view-edit-content-no-router
@@ -29,15 +28,6 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 	//@state()
 	//private _activeTabName?: string | null | undefined;
 
-	@state()
-	private _ownerContentTypeName?: string;
-
-	@state()
-	private _variantName?: string;
-
-	@state()
-	private _exposed?: boolean;
-
 	#blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
 	#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
 
@@ -57,41 +47,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 			this.#blockWorkspace = context;
 			this.#tabsStructureHelper.setStructureManager(context.content.structure);
 
-			context.content.setup(this);
 			this.#observeRootGroups();
-
-			this.observe(
-				context.content.structure.ownerContentTypeName,
-				(name) => {
-					this._ownerContentTypeName = name;
-				},
-				'observeContentTypeName',
-			);
-
-			this.observe(
-				context.variantId,
-				async (variantId) => {
-					if (variantId) {
-						// TODO: Support segment name?
-						const culture = variantId.culture;
-						if (culture) {
-							const languageRepository = new UmbLanguageItemRepository(this);
-							const { data } = await languageRepository.requestItems([culture]);
-							const name = data?.[0].name;
-							this._variantName = name ? this.localize.string(name) : undefined;
-						}
-					}
-				},
-				'observeVariant',
-			);
-
-			this.observe(
-				context.exposed,
-				(exposed) => {
-					this._exposed = exposed;
-				},
-				'observeExposed',
-			);
 		});
 	}
 
@@ -128,19 +84,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 		this._activeTabId = tabId;
 	}
 
-	#expose = () => {
-		this.#blockWorkspace?.expose();
-	};
-
 	override render() {
-		if (this._exposed === false) {
-			return html`<uui-button style="position:absolute; inset:0;" @click=${this.#expose}
-				><uui-icon name="icon-add"></uui-icon>
-				<umb-localize
-					key="blockEditor_createThisFor"
-					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
-			></uui-button>`;
-		}
 		if (!this._tabs) return;
 		return html`
 			${this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups)
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts
index cd570f360d..1b1acc7425 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts
@@ -5,6 +5,8 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbDataPathPropertyValueQuery } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-block-workspace-view-edit-properties')
 export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
@@ -38,12 +40,22 @@ export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
 	@state()
 	private _ownerEntityType?: string;
 
+	#variantId?: UmbVariantId;
+
 	constructor() {
 		super();
 
 		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
 			this.#blockWorkspace = workspaceContext;
 			this._ownerEntityType = this.#blockWorkspace.getEntityType();
+			this.observe(
+				workspaceContext.variantId,
+				(variantId) => {
+					this.#variantId = variantId;
+					this.#generatePropertyDataPath();
+				},
+				'observeVariantId',
+			);
 			this.#setStructureManager();
 		});
 	}
@@ -61,10 +73,24 @@ export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
 		);
 	}
 
+	/*
 	#generatePropertyDataPath() {
 		if (!this._propertyStructure) return;
 		this._dataPaths = this._propertyStructure.map((property) => `$.${property.alias}`);
 	}
+		*/
+
+	#generatePropertyDataPath() {
+		if (!this.#variantId || !this._propertyStructure) return;
+		this._dataPaths = this._propertyStructure.map(
+			(property) =>
+				`$.values[${UmbDataPathPropertyValueQuery({
+					alias: property.alias,
+					culture: property.variesByCulture ? this.#variantId!.culture : null,
+					segment: property.variesBySegment ? this.#variantId!.segment : null,
+				})}].value`,
+		);
+	}
 
 	override render() {
 		return repeat(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts
index 3b5f9c6fda..21205661e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts
@@ -69,8 +69,16 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 		const blockManager = this.#blockWorkspace[this.#managerName];
 		this.#tabsStructureHelper.setStructureManager(blockManager.structure);
 
-		// Create Data Set & setup Validation Context:
-		blockManager.setup(this);
+		this.observe(
+			this.#blockWorkspace.variantId,
+			(variantId) => {
+				if (variantId) {
+					// Create Data Set & setup Validation Context:
+					blockManager.setup(this, variantId);
+				}
+			},
+			'observeVariantId',
+		);
 
 		this.observe(
 			await this.#blockWorkspace![this.#managerName!].structure.hasRootContainers('Group'),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/collection-create-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/collection-create-action.element.ts
new file mode 100644
index 0000000000..fd80de09a2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/collection-create-action.element.ts
@@ -0,0 +1,157 @@
+import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
+import type { ManifestEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action';
+
+type ManifestType = ManifestEntityCreateOptionAction;
+
+const elementName = 'umb-collection-create-action-button';
+@customElement(elementName)
+export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
+	@state()
+	private _popoverOpen = false;
+
+	@state()
+	private _multipleOptions = false;
+
+	@state()
+	private _apiControllers: Array<UmbExtensionApiInitializer<ManifestType>> = [];
+
+	@state()
+	_hrefList: Array<string | undefined> = [];
+
+	#createLabel = this.localize.term('general_create');
+	#entityContext?: typeof UMB_ENTITY_CONTEXT.TYPE;
+
+	#onPopoverToggle(event: PointerEvent) {
+		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		this._popoverOpen = event.newState === 'open';
+	}
+
+	async #onClick(event: Event, controller: UmbExtensionApiInitializer<ManifestType>, href?: string) {
+		event.stopPropagation();
+
+		// skip if href is defined
+		if (href) {
+			return;
+		}
+
+		if (!controller.api) throw new Error('No API found');
+		await controller.api.execute();
+	}
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
+			this.#entityContext = context;
+			this.#initApi();
+		});
+	}
+
+	#initApi() {
+		if (!this.#entityContext) return;
+
+		const entityType = this.#entityContext.getEntityType();
+		if (!entityType) throw new Error('No entityType found');
+
+		const unique = this.#entityContext.getUnique();
+		if (unique === undefined) throw new Error('No unique found');
+
+		new UmbExtensionsApiInitializer(
+			this,
+			umbExtensionsRegistry,
+			'entityCreateOptionAction',
+			(manifest: ManifestType) => {
+				return [{ entityType, unique, meta: manifest.meta }];
+			},
+			(manifest: ManifestType) => manifest.forEntityTypes.includes(entityType),
+			async (controllers) => {
+				this._apiControllers = controllers as unknown as Array<UmbExtensionApiInitializer<ManifestType>>;
+				this._multipleOptions = controllers.length > 1;
+				const hrefPromises = this._apiControllers.map((controller) => controller.api?.getHref());
+				this._hrefList = await Promise.all(hrefPromises);
+			},
+		);
+	}
+
+	#getTarget(href?: string) {
+		if (href && href.startsWith('http')) {
+			return '_blank';
+		}
+
+		return '_self';
+	}
+
+	override render() {
+		return this._multipleOptions ? this.#renderMultiOptionAction() : this.#renderSingleOptionAction();
+	}
+
+	#renderSingleOptionAction() {
+		return html` <uui-button
+			label=${this.#createLabel}
+			color="default"
+			look="outline"
+			@click=${(event: Event) => this.#onClick(event, this._apiControllers[0])}></uui-button>`;
+	}
+
+	#renderMultiOptionAction() {
+		return html`
+			<uui-button
+				popovertarget="collection-action-menu-popover"
+				label=${this.#createLabel}
+				color="default"
+				look="outline">
+				${this.#createLabel}
+				<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
+			</uui-button>
+			${this.#renderDropdown()}
+		`;
+	}
+
+	#renderDropdown() {
+		return html`
+			<uui-popover-container
+				id="collection-action-menu-popover"
+				placement="bottom-start"
+				@toggle=${this.#onPopoverToggle}>
+				<umb-popover-layout>
+					<uui-scroll-container>
+						${this._apiControllers.map((controller, index) => this.#renderMenuItem(controller, index))}
+					</uui-scroll-container>
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
+	}
+
+	#renderMenuItem(controller: UmbExtensionApiInitializer<ManifestType>, index: number) {
+		const manifest = controller.manifest;
+		if (!manifest) throw new Error('No manifest found');
+
+		const label = manifest.meta.label ? this.localize.string(manifest.meta.label) : manifest.name;
+		const href = this._hrefList[index];
+
+		return html`
+			<uui-menu-item
+				label=${label}
+				@click=${(event: Event) => this.#onClick(event, controller, href)}
+				href=${ifDefined(href)}
+				target=${this.#getTarget(href)}>
+				<umb-icon slot="icon" .name=${manifest.meta.icon}></umb-icon>
+			</uui-menu-item>
+		`;
+	}
+}
+
+export { UmbCollectionCreateActionButtonElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbCollectionCreateActionButtonElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/manifests.ts
new file mode 100644
index 0000000000..429fb41b26
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/manifests.ts
@@ -0,0 +1,19 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	{
+		type: 'kind',
+		alias: 'Umb.Kind.CollectionAction.Create',
+		matchKind: 'create',
+		matchType: 'collectionAction',
+		manifest: {
+			type: 'collectionAction',
+			kind: 'create',
+			element: () => import('./collection-create-action.element.js'),
+			weight: 1200,
+			meta: {
+				label: '#actions_create',
+			},
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/types.ts
new file mode 100644
index 0000000000..50ef773e2c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/create/types.ts
@@ -0,0 +1,12 @@
+import type { ManifestCollectionAction } from '../../extensions/index.js';
+
+export interface ManifestCollectionActionCreateKind extends ManifestCollectionAction {
+	type: 'collectionAction';
+	kind: 'create';
+}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbCollectionActionCreateKind: ManifestCollectionActionCreateKind;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/manifests.ts
new file mode 100644
index 0000000000..19f4780244
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/action/manifests.ts
@@ -0,0 +1,4 @@
+import { manifests as createManifests } from './create/manifests.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [...createManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-alias.manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-alias.manifest.ts
deleted file mode 100644
index 52eadd23f3..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-alias.manifest.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { ManifestCondition, UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
-
-export type CollectionAliasConditionConfig = UmbConditionConfigBase<typeof UMB_COLLECTION_ALIAS_CONDITION> & {
-	/**
-	 * The collection that this extension should be available in
-	 * @example
-	 * "Umb.Collection.User"
-	 */
-	match: string;
-};
-
-export const UMB_COLLECTION_ALIAS_CONDITION = 'Umb.Condition.CollectionAlias';
-export const manifest: ManifestCondition = {
-	type: 'condition',
-	name: 'Collection Alias Condition',
-	alias: UMB_COLLECTION_ALIAS_CONDITION,
-	api: () => import('./collection-alias.condition.js'),
-};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-bulk-action-permission.manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-bulk-action-permission.manifest.ts
deleted file mode 100644
index 17fb2ba24c..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-bulk-action-permission.manifest.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { UmbCollectionBulkActionPermissions } from './types.js';
-import type { ManifestCondition, UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
-
-export type CollectionBulkActionPermissionConditionConfig = UmbConditionConfigBase<
-	typeof UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION
-> & {
-	match: (permissions: UmbCollectionBulkActionPermissions) => boolean;
-};
-
-export const UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION = 'Umb.Condition.CollectionBulkActionPermission';
-
-export const manifest: ManifestCondition = {
-	type: 'condition',
-	name: 'Collection Bulk Action Permission Condition',
-	alias: UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION,
-	api: () => import('./collection-bulk-action-permission.condition.js'),
-};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-action-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-action-bundle.element.ts
index 40bcbe93b6..eb205435e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-action-bundle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-action-bundle.element.ts
@@ -1,4 +1,4 @@
-import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-collection-action-bundle')
@@ -6,6 +6,14 @@ export class UmbCollectionActionBundleElement extends UmbLitElement {
 	override render() {
 		return html`<umb-extension-slot type="collectionAction"></umb-extension-slot>`;
 	}
+
+	static override readonly styles = [
+		css`
+			:host {
+				display: contents;
+			}
+		`,
+	];
 }
 
 declare global {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-filter-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-filter-field.element.ts
new file mode 100644
index 0000000000..7f1d3f9f8b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-filter-field.element.ts
@@ -0,0 +1,47 @@
+import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { debounce } from '@umbraco-cms/backoffice/utils';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-collection-filter-field')
+export class UmbCollectionFilterFieldElement extends UmbLitElement {
+	#collectionContext?: typeof UMB_COLLECTION_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
+			this.#collectionContext = context;
+		});
+	}
+
+	#debouncedFilter = debounce((filter: string) => this.#collectionContext?.setFilter({ filter }), 500);
+
+	#onInput(event: InputEvent & { target: HTMLInputElement }) {
+		const filter = event.target.value ?? '';
+		this.#debouncedFilter(filter);
+	}
+
+	override render() {
+		return html`
+			<uui-input
+				label=${this.localize.term('general_search')}
+				placeholder=${this.localize.term('placeholders_search')}
+				@input=${this.#onInput}></uui-input>
+		`;
+	}
+
+	static override readonly styles = [
+		css`
+			uui-input {
+				display: block;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-collection-filter-field': UmbCollectionFilterFieldElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
index ff873f9671..d26d5aaccd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts
@@ -1,8 +1,7 @@
-import type { UmbDefaultCollectionContext } from '../default/index.js';
 import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
-import type { UmbCollectionLayoutConfiguration } from '../types.js';
 import type { ManifestCollectionView } from '../extensions/index.js';
-import { css, html, customElement, state, nothing, repeat, query } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbCollectionLayoutConfiguration } from '../types.js';
+import { css, customElement, html, nothing, query, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -30,7 +29,7 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 	@state()
 	private _entityUnique?: string;
 
-	#collectionContext?: UmbDefaultCollectionContext<any, any>;
+	#collectionContext?: typeof UMB_COLLECTION_CONTEXT.TYPE;
 
 	constructor() {
 		super();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/index.ts
index 4b753400bf..7abcffff90 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/index.ts
@@ -1,11 +1,13 @@
-import './pagination/collection-pagination.element.js';
+import './collection-action-bundle.element.js';
+import './collection-filter-field.element.js';
 import './collection-selection-actions.element.js';
 import './collection-toolbar.element.js';
 import './collection-view-bundle.element.js';
-import './collection-action-bundle.element.js';
+import './pagination/collection-pagination.element.js';
 
-export * from './pagination/collection-pagination.element.js';
+export * from './collection-action-bundle.element.js';
+export * from './collection-filter-field.element.js';
 export * from './collection-selection-actions.element.js';
 export * from './collection-toolbar.element.js';
 export * from './collection-view-bundle.element.js';
-export * from './collection-action-bundle.element.js';
+export * from './pagination/collection-pagination.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-alias.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/collection-alias.condition.ts
similarity index 83%
rename from src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-alias.condition.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/collection-alias.condition.ts
index 166d81e131..6a4a03f6e0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-alias.condition.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/collection-alias.condition.ts
@@ -1,5 +1,5 @@
-import { UMB_COLLECTION_CONTEXT } from './default/index.js';
-import type { CollectionAliasConditionConfig } from './collection-alias.manifest.js';
+import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
+import type { CollectionAliasConditionConfig } from './types.js';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-bulk-action-permission.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/collection-bulk-action-permission.condition.ts
similarity index 89%
rename from src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-bulk-action-permission.condition.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/collection-bulk-action-permission.condition.ts
index 3b13ad47e2..885ad3f982 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-bulk-action-permission.condition.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/collection-bulk-action-permission.condition.ts
@@ -1,5 +1,5 @@
-import { UMB_COLLECTION_CONTEXT } from './default/index.js';
-import type { CollectionBulkActionPermissionConditionConfig } from './collection-bulk-action-permission.manifest.js';
+import { UMB_COLLECTION_CONTEXT } from '../default/index.js';
+import type { CollectionBulkActionPermissionConditionConfig } from './types.js';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/constants.ts
new file mode 100644
index 0000000000..36fa086ad7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/constants.ts
@@ -0,0 +1,3 @@
+export const UMB_COLLECTION_ALIAS_CONDITION = 'Umb.Condition.CollectionAlias';
+
+export const UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION = 'Umb.Condition.CollectionBulkActionPermission';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/index.ts
new file mode 100644
index 0000000000..83279e8836
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/index.ts
@@ -0,0 +1,4 @@
+export * from './collection-bulk-action-permission.condition.js';
+export * from './collection-alias.condition.js';
+export * from './constants.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/manifests.ts
new file mode 100644
index 0000000000..3e4eadfc62
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/manifests.ts
@@ -0,0 +1,17 @@
+import { UMB_COLLECTION_ALIAS_CONDITION, UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION } from './constants.js';
+import type { ManifestCondition } from '@umbraco-cms/backoffice/extension-api';
+
+export const manifests: Array<ManifestCondition> = [
+	{
+		type: 'condition',
+		name: 'Collection Alias Condition',
+		alias: UMB_COLLECTION_ALIAS_CONDITION,
+		api: () => import('./collection-alias.condition.js'),
+	},
+	{
+		type: 'condition',
+		name: 'Collection Bulk Action Permission Condition',
+		alias: UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION,
+		api: () => import('./collection-bulk-action-permission.condition.js'),
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/types.ts
new file mode 100644
index 0000000000..6a19e0a3c9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/conditions/types.ts
@@ -0,0 +1,25 @@
+import type { UmbCollectionBulkActionPermissions } from '../types.js';
+import type { UMB_COLLECTION_ALIAS_CONDITION, UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION } from './constants.js';
+import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
+
+export type CollectionBulkActionPermissionConditionConfig = UmbConditionConfigBase<
+	typeof UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION
+> & {
+	match: (permissions: UmbCollectionBulkActionPermissions) => boolean;
+};
+
+export type CollectionAliasConditionConfig = UmbConditionConfigBase<typeof UMB_COLLECTION_ALIAS_CONDITION> & {
+	/**
+	 * The collection that this extension should be available in
+	 * @example
+	 * "Umb.Collection.User"
+	 */
+	match: string;
+};
+
+declare global {
+	interface UmbExtensionConditionConfigMap {
+		CollectionBulkActionPermissionConditionConfig: CollectionBulkActionPermissionConditionConfig;
+		CollectionAliasConditionConfig: CollectionAliasConditionConfig;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts
index ba4eedfb8a..ca9701d258 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/index.ts
@@ -5,15 +5,13 @@ import './components/index.js';
 export * from './default/collection-default.element.js';
 export * from './collection.element.js';
 export * from './components/index.js';
+export * from './conditions/index.js';
 export * from './collection-item-picker-modal/index.js';
 
 export * from './default/collection-default.context.js';
 export * from './default/collection-default.context-token.js';
 export * from './collection-filter-model.interface.js';
-export * from './types.js';
-
-export { UMB_COLLECTION_ALIAS_CONDITION } from './collection-alias.manifest.js';
-export { UMB_COLLECTION_BULK_ACTION_PERMISSION_CONDITION } from './collection-bulk-action-permission.manifest.js';
+export type * from './types.js';
 
 export { UmbCollectionActionElement, UmbCollectionActionBase } from './action/index.js';
 export type { UmbCollectionDataSource, UmbCollectionRepository } from './repository/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/manifests.ts
index 1ee0674ee8..c59c5fa9f4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/manifests.ts
@@ -1,10 +1,10 @@
 import type { UmbExtensionManifestKind } from '../extension-registry/registry.js';
-import { manifest as collectionAliasCondition } from './collection-alias.manifest.js';
-import { manifest as collectionBulkActionPermissionCondition } from './collection-bulk-action-permission.manifest.js';
+import { manifests as conditionManifests } from './conditions/manifests.js';
+import { manifests as actionManifests } from './action/manifests.js';
 import { manifests as workspaceViewManifests } from './workspace-view/manifests.js';
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	...actionManifests,
 	...workspaceViewManifests,
-	collectionAliasCondition,
-	collectionBulkActionPermissionCondition,
+	...conditionManifests,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
index 153dae2e3d..352a8176c7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/types.ts
@@ -3,6 +3,7 @@ import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
 
 export type * from './extensions/index.js';
+export type * from './conditions/types.js';
 
 export interface UmbCollectionBulkActionPermissions {
 	allowBulkCopy: boolean;
@@ -48,4 +49,4 @@ export interface UmbCollectionContext {
 	totalItems: Observable<number>;
 }
 
-export * from './extensions/index.js';
+export type * from './extensions/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
index 92671b347c..a5814884c3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/history/history-item.element.ts
@@ -63,6 +63,7 @@ export class UmbHistoryItemElement extends UmbLitElement {
 			.user-info div {
 				display: flex;
 				flex-direction: column;
+				min-width: var(--uui-size-60);
 			}
 
 			.detail {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts
index 03701d17e5..79f883296b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts
@@ -1,7 +1,7 @@
 export * from './components/index.js';
+export * from './composition/index.js';
 export * from './modals/index.js';
 export * from './repository/index.js';
 export * from './structure/index.js';
-export * from './types.js';
 export * from './workspace/index.js';
-export * from './composition/index.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts
index 2cc6b7187f..eb0826f824 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts
@@ -67,9 +67,9 @@ export class UmbContentTypeStructureManager<
 		// Notice this may need to use getValue to avoid resetting it self. [NL]
 		return contentTypes.some((x) => x.properties.length > 0);
 	});
-	readonly contentTypePropertyAliases = this.#contentTypes.asObservablePart((contentTypes) => {
-		return contentTypes.flatMap((x) => x.properties ?? []).map((x) => x.alias);
-	});
+	readonly contentTypePropertyAliases = createObservablePart(this.contentTypeProperties, (properties) =>
+		properties.map((x) => x.alias),
+	);
 	readonly contentTypeUniques = this.#contentTypes.asObservablePart((x) => x.map((y) => y.unique));
 	readonly contentTypeAliases = this.#contentTypes.asObservablePart((x) => x.map((y) => y.alias));
 
@@ -105,6 +105,8 @@ export class UmbContentTypeStructureManager<
 	 * @returns {Promise} - Promise resolved
 	 */
 	public async loadType(unique?: string) {
+		//if (!unique) return;
+		//if (this.#ownerContentTypeUnique === unique) return;
 		this._reset();
 
 		this.#ownerContentTypeUnique = unique;
@@ -724,6 +726,7 @@ export class UmbContentTypeStructureManager<
 	}
 
 	private _reset() {
+		this.#contentTypes.setValue([]);
 		this.#contentTypeObservers.forEach((observer) => observer.destroy());
 		this.#contentTypeObservers = [];
 		this.#contentTypes.setValue([]);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/types.ts
index 132af25ee5..3d76913002 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/types.ts
@@ -1,6 +1,8 @@
 import type { CompositionTypeModel } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbReferenceByUnique } from '@umbraco-cms/backoffice/models';
 
+export type * from './composition/types.js';
+
 export type UmbPropertyContainerTypes = 'Group' | 'Tab';
 
 export interface UmbPropertyTypeContainerModel {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
index 31059a012f..ead29d145b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
@@ -228,7 +228,7 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
 				opacity: 0.5;
 			}
 
-			:host([drag-placeholder]) > * {
+			:host([drag-placeholder]) > uui-box > * {
 				visibility: hidden;
 			}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
index b34a765d96..02374f4f8a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
@@ -414,7 +414,6 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
 				position: sticky;
 				top: var(--uui-size-space-4);
 				height: min-content;
-				z-index: 2;
 			}
 
 			#editor {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts
index 9ab77fca89..9105d91fd0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts
@@ -478,7 +478,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		const ownedTab = this.#tabsStructureHelper.isOwnerChildContainer(tab.id!) ?? false;
 
 		return html`<uui-tab
-			label=${tab.name && tab.name !== '' ? tab.name : 'unnamed'}
+			label=${tab.name && tab.name !== '' ? tab.name : 'Unnamed'}
 			.active=${tabActive}
 			href=${path}
 			data-umb-tab-id=${ifDefined(tab.id)}
@@ -489,10 +489,12 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 
 	renderTabInner(tab: UmbPropertyTypeContainerModel, tabActive: boolean, ownedTab: boolean) {
 		// TODO: Localize this:
+		const hasTabName = tab.name && tab.name !== '';
+		const tabName = hasTabName ? tab.name : 'Unnamed';
 		if (this._sortModeActive) {
 			return html`<div class="tab">
 				${ownedTab
-					? html`<uui-icon name="icon-navigation" class="drag-${tab.id}"> </uui-icon>${tab.name!}
+					? html`<uui-icon name="icon-navigation" class="drag-${tab.id}"> </uui-icon>${tabName}
 							<uui-input
 								label="sort order"
 								type="number"
@@ -512,6 +514,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 					label=${tab.name!}
 					value="${tab.name!}"
 					auto-width
+					minlength="1"
 					@change=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
 					@input=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
 					@blur=${(e: FocusEvent) => this.#tabNameBlur(e, tab)}>
@@ -521,7 +524,11 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		}
 
 		if (ownedTab) {
-			return html`<div class="not-active">${tab.name!} ${this.renderDeleteFor(tab)}</div>`;
+			return html`<div class="not-active">
+				<span class=${hasTabName ? '' : 'invaild'}>${hasTabName ? tab.name : 'Unnamed'}</span> ${this.renderDeleteFor(
+					tab,
+				)}
+			</div>`;
 		} else {
 			return html`<div class="not-active"><uui-icon name="icon-merge"></uui-icon>${tab.name!}</div>`;
 		}
@@ -630,6 +637,10 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 				gap: var(--uui-size-space-3);
 			}
 
+			.invaild {
+				color: var(--uui-color-danger, #d42054);
+			}
+
 			.trash {
 				opacity: 1;
 				transition: opacity 100ms;
@@ -640,7 +651,7 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 				transition: opacity 100ms;
 			}
 
-			uui-input:not(:focus, :hover) {
+			uui-input:not(:focus, :hover, :invalid) {
 				border: 1px solid transparent;
 			}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/controller/merge-content-variant-data.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/controller/merge-content-variant-data.controller.ts
index e4ecfc2c04..aa50029af8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/controller/merge-content-variant-data.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/controller/merge-content-variant-data.controller.ts
@@ -1,5 +1,5 @@
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import type { UmbContentDetailModel, UmbPotentialContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbContentLikeDetailModel, UmbPotentialContentValueModel } from '@umbraco-cms/backoffice/content';
 import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbVariantId, type UmbVariantDataModel } from '@umbraco-cms/backoffice/variant';
@@ -17,13 +17,13 @@ function defaultCompareVariantMethod(a: UmbVariantDataModel, b: UmbVariantDataMo
 export class UmbMergeContentVariantDataController extends UmbControllerBase {
 	/**
 	 * Merges content variant data based on selected variants and variants to store.
-	 * @param {UmbContentDetailModel | undefined} persistedData - The persisted content variant data.
-	 * @param {UmbContentDetailModel} currentData - The current content variant data.
+	 * @param {UmbContentLikeDetailModel | undefined} persistedData - The persisted content variant data.
+	 * @param {UmbContentLikeDetailModel} currentData - The current content variant data.
 	 * @param {Array<UmbVariantId>} selectedVariants - The selected variants.
 	 * @param {Array<UmbVariantId>} variantsToStore - The variants to store, we sometimes have additional variants that we like to process. This is typically the invariant variant, which we do not want to have as part of the variants data therefore a difference.
-	 * @returns {Promise<UmbContentDetailModel>} - A promise that resolves to the merged content variant data.
+	 * @returns {Promise<UmbContentLikeDetailModel>} - A promise that resolves to the merged content variant data.
 	 */
-	async process<ModelType extends UmbContentDetailModel>(
+	async process<ModelType extends UmbContentLikeDetailModel>(
 		persistedData: ModelType | undefined,
 		currentData: ModelType,
 		selectedVariants: Array<UmbVariantId>,
@@ -39,14 +39,17 @@ export class UmbMergeContentVariantDataController extends UmbControllerBase {
 				currentData.values,
 				variantsToStore,
 			),
+		};
+
+		if (currentData.variants) {
 			// Notice for variants we do not want to include all the variants that we are processing. but just the once selected for the process. (Not include invariant if we are in a variant document) [NL]
-			variants: this.#processVariants(
+			result.variants = this.#processVariants(
 				persistedData?.variants,
 				currentData.variants,
 				selectedVariants,
 				defaultCompareVariantMethod,
-			),
-		};
+			);
+		}
 
 		this.destroy();
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/index.ts
index 0a951a2634..1fe642380a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/index.ts
@@ -1,9 +1,9 @@
 export { UMB_CONTENT_PROPERTY_CONTEXT } from './content-property.context-token.js';
 export { UmbContentPropertyContext } from './content-property.context.js';
-export * from './manager/content-data-manager.js';
-export * from './controller/merge-content-variant-data.controller.js';
-export * from './property-dataset-context/content-property-dataset.context.js';
-export * from './workspace/index.js';
 export * from './collection/index.js';
 export * from './constants.js';
+export * from './controller/merge-content-variant-data.controller.js';
+export * from './manager/index.js';
+export * from './property-dataset-context/index.js';
+export * from './workspace/index.js';
 export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/content-data-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/content-data-manager.ts
index e9cad5be02..3c6601037f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/content-data-manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/content-data-manager.ts
@@ -1,63 +1,24 @@
-import { UmbMergeContentVariantDataController } from '../controller/merge-content-variant-data.controller.js';
+import { UmbElementWorkspaceDataManager } from './element-data-manager.js';
 import type { UmbContentDetailModel } from '@umbraco-cms/backoffice/content';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { appendToFrozenArray, jsonStringComparison } from '@umbraco-cms/backoffice/observable-api';
 import { UmbVariantId, type UmbEntityVariantModel } from '@umbraco-cms/backoffice/variant';
-import { UmbEntityWorkspaceDataManager, type UmbWorkspaceDataManager } from '@umbraco-cms/backoffice/workspace';
 
 export class UmbContentWorkspaceDataManager<
-		ModelType extends UmbContentDetailModel,
-		ModelVariantType extends UmbEntityVariantModel = ModelType extends { variants: UmbEntityVariantModel[] }
-			? ModelType['variants'][0]
-			: never,
-	>
-	extends UmbEntityWorkspaceDataManager<ModelType>
-	implements UmbWorkspaceDataManager<ModelType>
-{
+	ModelType extends UmbContentDetailModel,
+	ModelVariantType extends UmbEntityVariantModel = ModelType extends { variants: UmbEntityVariantModel[] }
+		? ModelType['variants'][0]
+		: never,
+> extends UmbElementWorkspaceDataManager<ModelType> {
 	//
 	//#repository;
 	#variantScaffold?: ModelVariantType;
 
-	#varies?: boolean;
-	//#variesByCulture?: boolean;
-	//#variesBySegment?: boolean;
-
 	constructor(host: UmbControllerHost, variantScaffold: ModelVariantType) {
 		super(host);
 		this.#variantScaffold = variantScaffold;
 	}
 
-	#updateLock = 0;
-	initiatePropertyValueChange() {
-		this.#updateLock++;
-		this._current.mute();
-		// TODO: When ready enable this code will enable handling a finish automatically by this implementation 'using myState.initiatePropertyValueChange()' (Relies on TS support of Using) [NL]
-		/*return {
-			[Symbol.dispose]: this.finishPropertyValueChange,
-		};*/
-	}
-	finishPropertyValueChange = () => {
-		this.#updateLock--;
-		this.#triggerPropertyValueChanges();
-	};
-	#triggerPropertyValueChanges() {
-		if (this.#updateLock === 0) {
-			this._current.unmute();
-		}
-	}
-
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	setVariesByCulture(vary: boolean | undefined) {
-		//this.#variesByCulture = vary;
-	}
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	setVariesBySegment(vary: boolean | undefined) {
-		//this.#variesBySegment = vary;
-	}
-	setVaries(vary: boolean | undefined) {
-		this.#varies = vary;
-	}
-
 	ensureVariantData(variantId: UmbVariantId) {
 		this.updateVariantData(variantId);
 	}
@@ -66,7 +27,7 @@ export class UmbContentWorkspaceDataManager<
 		const currentData = this.getCurrent();
 		if (!currentData) throw new Error('Data is missing');
 		if (!this.#variantScaffold) throw new Error('Variant scaffold data is missing');
-		if (this.#varies === true) {
+		if (this._varies === true) {
 			// If variant Id is invariant, we don't to have the variant appended to our data.
 			if (variantId.isInvariant()) return;
 			const variant = currentData.variants.find((x) => variantId.compare(x));
@@ -82,7 +43,7 @@ export class UmbContentWorkspaceDataManager<
 			) as Array<ModelVariantType>;
 			// TODO: I have some trouble with TypeScript here, I does not look like me, but i had to give up. [NL]
 			this._current.update({ variants: newVariants } as any);
-		} else if (this.#varies === false) {
+		} else if (this._varies === false) {
 			// TODO: Beware about segments, in this case we need to also consider segments, if its allowed to vary by segments.
 			const invariantVariantId = UmbVariantId.CreateInvariant();
 			const variant = currentData.variants.find((x) => invariantVariantId.compare(x));
@@ -102,32 +63,6 @@ export class UmbContentWorkspaceDataManager<
 		}
 	}
 
-	async constructData(selectedVariants: Array<UmbVariantId>): Promise<ModelType> {
-		// Lets correct the selected variants, so invariant is included, or the only one if invariant.
-		// TODO: VDIVD: Could a document be set to invariant but hold variant data inside it?
-		const invariantVariantId = UmbVariantId.CreateInvariant();
-		let variantsToStore = [invariantVariantId];
-		if (this.#varies === false) {
-			// If we do not vary, we wil just pick the invariant variant id.
-			selectedVariants = [invariantVariantId];
-		} else {
-			variantsToStore = [...selectedVariants, invariantVariantId];
-		}
-
-		const data = this._current.getValue();
-		if (!data) throw new Error('Current data is missing');
-		if (!data.unique) throw new Error('Unique of current data is missing');
-
-		const persistedData = this.getPersisted();
-
-		return await new UmbMergeContentVariantDataController(this).process(
-			persistedData,
-			data,
-			selectedVariants,
-			variantsToStore,
-		);
-	}
-
 	getChangedVariants() {
 		const persisted = this.getPersisted();
 		const current = this.getCurrent();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/element-data-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/element-data-manager.ts
new file mode 100644
index 0000000000..7dd3ddc91e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/element-data-manager.ts
@@ -0,0 +1,70 @@
+import { UmbMergeContentVariantDataController } from '../controller/merge-content-variant-data.controller.js';
+import type { UmbElementDetailModel } from '@umbraco-cms/backoffice/content';
+import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import { UmbEntityWorkspaceDataManager, type UmbWorkspaceDataManager } from '@umbraco-cms/backoffice/workspace';
+
+export class UmbElementWorkspaceDataManager<ModelType extends UmbElementDetailModel>
+	extends UmbEntityWorkspaceDataManager<ModelType>
+	implements UmbWorkspaceDataManager<ModelType>
+{
+	protected _varies?: boolean;
+	//#variesByCulture?: boolean;
+	//#variesBySegment?: boolean;
+
+	#updateLock = 0;
+	initiatePropertyValueChange() {
+		this.#updateLock++;
+		this._current.mute();
+		// TODO: When ready enable this code will enable handling a finish automatically by this implementation 'using myState.initiatePropertyValueChange()' (Relies on TS support of Using) [NL]
+		/*return {
+			[Symbol.dispose]: this.finishPropertyValueChange,
+		};*/
+	}
+	finishPropertyValueChange = () => {
+		this.#updateLock--;
+		this.#triggerPropertyValueChanges();
+	};
+	#triggerPropertyValueChanges() {
+		if (this.#updateLock === 0) {
+			this._current.unmute();
+		}
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	setVariesByCulture(vary: boolean | undefined) {
+		//this.#variesByCulture = vary;
+	}
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	setVariesBySegment(vary: boolean | undefined) {
+		//this.#variesBySegment = vary;
+	}
+	setVaries(vary: boolean | undefined) {
+		this._varies = vary;
+	}
+
+	async constructData(selectedVariants: Array<UmbVariantId>): Promise<ModelType> {
+		// Lets correct the selected variants, so invariant is included, or the only one if invariant.
+		// TODO: VDIVD: Could a document be set to invariant but hold variant data inside it?
+		const invariantVariantId = UmbVariantId.CreateInvariant();
+		let variantsToStore = [invariantVariantId];
+		if (this._varies === false) {
+			// If we do not vary, we wil just pick the invariant variant id.
+			selectedVariants = [invariantVariantId];
+		} else {
+			variantsToStore = [...selectedVariants, invariantVariantId];
+		}
+
+		const data = this._current.getValue();
+		if (!data) throw new Error('Current data is missing');
+		//if (!data.unique) throw new Error('Unique of current data is missing');
+
+		const persistedData = this.getPersisted();
+
+		return await new UmbMergeContentVariantDataController(this).process(
+			persistedData,
+			data,
+			selectedVariants,
+			variantsToStore,
+		);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/index.ts
new file mode 100644
index 0000000000..f590f322ce
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/manager/index.ts
@@ -0,0 +1,2 @@
+export * from './content-data-manager.js';
+export * from './element-data-manager.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts
index 13551548c1..3fff502923 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/content-property-dataset.context.ts
@@ -1,162 +1,57 @@
 import type { UmbContentWorkspaceContext } from '../workspace/index.js';
 import type { UmbContentDetailModel } from '../types.js';
-import type { UmbNameablePropertyDatasetContext, UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { UmbElementPropertyDatasetContext } from './element-property-dataset.context.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
-import { type Observable, map } from '@umbraco-cms/backoffice/external/rxjs';
-import { UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbEntityVariantModel } from '@umbraco-cms/backoffice/variant';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
-import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
-import type { UmbWorkspaceUniqueType } from '@umbraco-cms/backoffice/workspace';
+import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
+import type { UmbEntityVariantModel, UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
 
 export class UmbContentPropertyDatasetContext<
-		ContentModel extends UmbContentDetailModel = UmbContentDetailModel,
-		ContentTypeModel extends UmbContentTypeModel = UmbContentTypeModel,
-		VariantModelType extends UmbEntityVariantModel = UmbEntityVariantModel,
-	>
-	extends UmbContextBase<UmbPropertyDatasetContext>
-	implements UmbPropertyDatasetContext, UmbNameablePropertyDatasetContext
-{
-	#workspace: UmbContentWorkspaceContext<ContentModel, ContentTypeModel, VariantModelType>;
-	#variantId: UmbVariantId;
-	public getVariantId() {
-		return this.#variantId;
-	}
-
-	#currentVariant = new UmbObjectState<UmbEntityVariantModel | undefined>(undefined);
+	ContentModel extends UmbContentDetailModel = UmbContentDetailModel,
+	ContentTypeModel extends UmbContentTypeModel = UmbContentTypeModel,
+	VariantModelType extends UmbEntityVariantModel = UmbEntityVariantModel,
+> extends UmbElementPropertyDatasetContext<
+	ContentModel,
+	ContentTypeModel,
+	UmbContentWorkspaceContext<ContentModel, ContentTypeModel, VariantModelType>
+> {
+	//
+	#currentVariant = new UmbObjectState<VariantModelType | undefined>(undefined);
 	currentVariant = this.#currentVariant.asObservable();
 
 	name = this.#currentVariant.asObservablePart((x) => x?.name);
 	culture = this.#currentVariant.asObservablePart((x) => x?.culture);
 	segment = this.#currentVariant.asObservablePart((x) => x?.segment);
 
-	#readOnly = new UmbBooleanState(false);
-	public readOnly = this.#readOnly.asObservable();
-
-	getEntityType(): string {
-		return this.#workspace.getEntityType();
-	}
-	getUnique(): UmbWorkspaceUniqueType | undefined {
-		return this.#workspace.getUnique();
-	}
 	getName(): string | undefined {
-		return this.#workspace.getName(this.#variantId);
+		return this._dataOwner.getName(this.getVariantId());
 	}
 	setName(name: string) {
-		this.#workspace.setName(name, this.#variantId);
+		this._dataOwner.setName(name, this.getVariantId());
 	}
+	/**
+	 * @deprecated Its not clear why we have this. We should either document the need better or get rid of it.
+	 * @returns {UmbEntityVariantModel | undefined} - gives information about the current variant.
+	 */
 	getVariantInfo() {
-		return this.#workspace.getVariant(this.#variantId);
-	}
-
-	getReadOnly() {
-		return this.#readOnly.getValue();
+		return this._dataOwner.getVariant(this.getVariantId());
 	}
 
 	constructor(
 		host: UmbControllerHost,
-		workspace: UmbContentWorkspaceContext<ContentModel, ContentTypeModel, VariantModelType>,
+		dataOwner: UmbContentWorkspaceContext<ContentModel, ContentTypeModel, VariantModelType>,
 		variantId?: UmbVariantId,
 	) {
 		// The controller alias, is a very generic name cause we want only one of these for this controller host.
-		super(host, UMB_PROPERTY_DATASET_CONTEXT);
-		this.#workspace = workspace;
-		this.#variantId = variantId ?? UmbVariantId.CreateInvariant();
+		super(host, dataOwner, variantId);
 
 		this.observe(
-			this.#workspace.variantById(this.#variantId),
+			this._dataOwner.variantById(this.getVariantId()),
 			async (variantInfo) => {
 				if (!variantInfo) return;
 				this.#currentVariant.setValue(variantInfo);
 			},
-			'_observeActiveVariant',
+			null,
 		);
-
-		this.observe(
-			this.#workspace.readOnlyState.states,
-			(states) => {
-				const isReadOnly = states.some((state) => state.variantId.equal(this.#variantId));
-				this.#readOnly.setValue(isReadOnly);
-			},
-			'umbObserveReadOnlyStates',
-		);
-	}
-
-	#createPropertyVariantId(property: UmbPropertyTypeModel) {
-		return UmbVariantId.Create({
-			culture: property.variesByCulture ? this.#variantId.culture : null,
-			segment: property.variesBySegment ? this.#variantId.segment : null,
-		});
-	}
-
-	/**
-	 * @function propertyVariantId
-	 * @param {string} propertyAlias
-	 * @returns {Promise<Observable<UmbVariantId | undefined> | undefined>}
-	 * @description Get an Observable for the variant id of this property.
-	 */
-	async propertyVariantId(propertyAlias: string) {
-		return (await this.#workspace.structure.propertyStructureByAlias(propertyAlias)).pipe(
-			map((property) => (property ? this.#createPropertyVariantId(property) : undefined)),
-		);
-	}
-
-	/**
-	 * @function propertyValueByAlias
-	 * @param {string} propertyAlias
-	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
-	 * @description Get an Observable for the value of this property.
-	 */
-	async propertyValueByAlias<ReturnType = unknown>(
-		propertyAlias: string,
-	): Promise<Observable<ReturnType | undefined> | undefined> {
-		await this.#workspace.isLoaded();
-		const structure = await this.#workspace.structure.getPropertyStructureByAlias(propertyAlias);
-		if (structure) {
-			return this.#workspace.propertyValueByAlias<ReturnType>(propertyAlias, this.#createPropertyVariantId(structure));
-		}
-		return;
-	}
-
-	// TODO: Refactor: Not used currently, but should investigate if we can implement this, to spare some energy.
-	async propertyValueByAliasAndVariantId<ReturnType = unknown>(
-		propertyAlias: string,
-		propertyVariantId: UmbVariantId,
-	): Promise<Observable<ReturnType | undefined> | undefined> {
-		return this.#workspace.propertyValueByAlias<ReturnType>(propertyAlias, propertyVariantId);
-	}
-
-	/**
-	 * @function setPropertyValueByVariant
-	 * @param {string} propertyAlias
-	 * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
-	 * @param {UmbVariantId} propertyVariantId - The variant id for the value to be set for.
-	 * @returns {Promise<unknown>}
-	 * @description Get the value of this property.
-	 */
-	setPropertyValueByVariant(propertyAlias: string, value: unknown, propertyVariantId: UmbVariantId): Promise<void> {
-		return this.#workspace.setPropertyValue(propertyAlias, value, propertyVariantId);
-	}
-
-	/**
-	 * @function setPropertyValue
-	 * @param {string} propertyAlias
-	 * @param {PromiseLike<unknown>} value - value can be a promise resolving into the actual value or the raw value it self.
-	 * @returns {Promise<void>}
-	 * @description Set the value of this property.
-	 */
-	async setPropertyValue(propertyAlias: string, value: PromiseLike<unknown>) {
-		this.#workspace.initiatePropertyValueChange();
-		// This is not reacting to if the property variant settings changes while running.
-		const property = await this.#workspace.structure.getPropertyStructureByAlias(propertyAlias);
-		if (property) {
-			const variantId = this.#createPropertyVariantId(property);
-
-			// This is not reacting to if the property variant settings changes while running.
-			this.#workspace.setPropertyValue(propertyAlias, await value, variantId);
-		}
-		this.#workspace.finishPropertyValueChange();
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/element-property-data-owner.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/element-property-data-owner.interface.ts
new file mode 100644
index 0000000000..142f7172de
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/element-property-data-owner.interface.ts
@@ -0,0 +1,36 @@
+import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
+import type { UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
+import type { UmbContentTypeModel, UmbContentTypeStructureManager } from '@umbraco-cms/backoffice/content-type';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
+import type { UmbReadOnlyVariantStateManager } from '@umbraco-cms/backoffice/utils';
+
+/**
+ * The data supplier for a Element Property Dataset
+ */
+export interface UmbElementPropertyDataOwner<
+	ContentModel extends { values: Array<UmbPropertyValueData> },
+	ContentTypeModel extends UmbContentTypeModel = UmbContentTypeModel,
+> extends UmbApi {
+	unique: Observable<UmbEntityUnique | undefined>;
+	getUnique(): UmbEntityUnique | undefined;
+	getEntityType(): string;
+	readonly structure: UmbContentTypeStructureManager<ContentTypeModel>;
+	readonly values: Observable<ContentModel['values'] | undefined>;
+	getValues(): ContentModel['values'] | undefined;
+
+	isLoaded(): Promise<unknown> | undefined;
+	readonly readOnlyState: UmbReadOnlyVariantStateManager;
+
+	// Same as from UmbVariantDatasetWorkspaceContext, could be refactored later [NL]
+	propertyValueByAlias<ReturnValue = unknown>(
+		alias: string,
+		variantId?: UmbVariantId,
+	): Promise<Observable<ReturnValue | undefined> | undefined>;
+	getPropertyValue<ReturnValue = unknown>(alias: string, variantId?: UmbVariantId): ReturnValue | undefined;
+	setPropertyValue(alias: string, value: unknown, variantId?: UmbVariantId): Promise<void>;
+
+	initiatePropertyValueChange(): void;
+	finishPropertyValueChange(): void;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/element-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/element-property-dataset.context.ts
new file mode 100644
index 0000000000..0490888eb7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/element-property-dataset.context.ts
@@ -0,0 +1,221 @@
+import type { UmbElementDetailModel } from '../types.js';
+import type { UmbElementPropertyDataOwner } from './element-property-data-owner.interface.js';
+import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
+import {
+	UmbBasicState,
+	UmbBooleanState,
+	classEqualMemoization,
+	createObservablePart,
+	mergeObservables,
+} from '@umbraco-cms/backoffice/observable-api';
+import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+import type { UmbContentTypeModel, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
+import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
+
+type UmbPropertyVariantIdMapType = Array<{ alias: string; variantId: UmbVariantId }>;
+
+export abstract class UmbElementPropertyDatasetContext<
+		ContentModel extends UmbElementDetailModel = UmbElementDetailModel,
+		ContentTypeModel extends UmbContentTypeModel = UmbContentTypeModel,
+		DataOwnerType extends UmbElementPropertyDataOwner<ContentModel, ContentTypeModel> = UmbElementPropertyDataOwner<
+			ContentModel,
+			ContentTypeModel
+		>,
+	>
+	extends UmbContextBase<UmbPropertyDatasetContext>
+	implements UmbPropertyDatasetContext
+{
+	protected readonly _dataOwner: DataOwnerType;
+	#variantId: UmbVariantId;
+	public getVariantId() {
+		return this.#variantId;
+	}
+
+	abstract name: Observable<string | undefined>;
+	abstract culture: Observable<string | null | undefined>;
+	abstract segment: Observable<string | null | undefined>;
+
+	#propertyVariantIdPromise?: Promise<never>;
+	#propertyVariantIdPromiseResolver?: () => void;
+	#propertyVariantIdMap = new UmbBasicState<UmbPropertyVariantIdMapType>([]);
+	private readonly _propertyVariantIdMap = this.#propertyVariantIdMap.asObservable();
+
+	#readOnly = new UmbBooleanState(false);
+	public readOnly = this.#readOnly.asObservable();
+
+	getEntityType(): string {
+		return this._dataOwner.getEntityType();
+	}
+	getUnique(): UmbEntityUnique | undefined {
+		return this._dataOwner.getUnique();
+	}
+	abstract getName(): string | undefined;
+
+	getReadOnly() {
+		return this.#readOnly.getValue();
+	}
+
+	constructor(host: UmbControllerHost, dataOwner: DataOwnerType, variantId?: UmbVariantId) {
+		// The controller alias, is a very generic name cause we want only one of these for this controller host.
+		super(host, UMB_PROPERTY_DATASET_CONTEXT);
+		this._dataOwner = dataOwner;
+		this.#variantId = variantId ?? UmbVariantId.CreateInvariant();
+
+		this.#propertyVariantIdPromise = new Promise((resolve) => {
+			this.#propertyVariantIdPromiseResolver = resolve as any;
+		});
+
+		this.observe(
+			this._dataOwner.readOnlyState.states,
+			(states) => {
+				const isReadOnly = states.some((state) => state.variantId.equal(this.#variantId));
+				this.#readOnly.setValue(isReadOnly);
+			},
+			null,
+		);
+
+		// TODO: Refactor this into a separate manager/controller of some sort? [NL]
+		this.observe(
+			this._dataOwner.structure.contentTypeProperties,
+			(props: UmbPropertyTypeModel[]) => {
+				const map = props.map((prop) => ({ alias: prop.alias, variantId: this.#createPropertyVariantId(prop) }));
+				this.#propertyVariantIdMap.setValue(map);
+				// Resolve promise, to let the once waiting on this know.
+				if (this.#propertyVariantIdPromiseResolver) {
+					this.#propertyVariantIdPromiseResolver();
+					this.#propertyVariantIdPromiseResolver = undefined;
+					this.#propertyVariantIdPromise = undefined;
+				}
+			},
+			null,
+		);
+	}
+
+	#createPropertyVariantId(property: UmbPropertyTypeModel) {
+		return UmbVariantId.Create({
+			culture: property.variesByCulture ? this.#variantId.culture : null,
+			segment: property.variesBySegment ? this.#variantId.segment : null,
+		});
+	}
+
+	#propertiesObservable?: Observable<ContentModel['values']>;
+	// Should it be possible to get the properties as a list of property aliases?
+	get properties(): Observable<ContentModel['values']> {
+		if (!this.#propertiesObservable) {
+			this.#propertiesObservable = mergeObservables(
+				[this._propertyVariantIdMap, this._dataOwner.values],
+				this.#mergeVariantIdsAndValues,
+			);
+		}
+
+		return this.#propertiesObservable;
+	}
+
+	#mergeVariantIdsAndValues([props, values]: [UmbPropertyVariantIdMapType, ContentModel['values'] | undefined]) {
+		const r: ContentModel['values'] = [];
+		if (values) {
+			for (const prop of props) {
+				const f = values.find((v) => prop.alias === v.alias && prop.variantId.compare(v));
+				if (f) {
+					r.push(f);
+				}
+			}
+		}
+		return r as ContentModel['values'];
+	}
+
+	async getProperties(): Promise<ContentModel['values']> {
+		await this.#propertyVariantIdPromise;
+		return this.#mergeVariantIdsAndValues([
+			this.#propertyVariantIdMap.getValue(),
+			this._dataOwner.getValues(),
+		]) as ContentModel['values'];
+	}
+
+	/**
+	 * @function propertyVariantId
+	 * @param {string} propertyAlias - The property alias to observe the variantId of.
+	 * @returns {Promise<Observable<UmbVariantId | undefined> | undefined>} - The observable for this properties variantId.
+	 * @description Get an Observable for the variant id of this property.
+	 */
+	async propertyVariantId(propertyAlias: string) {
+		/*
+		return (await this.#workspace.structure.propertyStructureByAlias(propertyAlias)).pipe(
+			map((property) => (property ? this.#createPropertyVariantId(property) : undefined)),
+		);
+		*/
+		return createObservablePart(
+			this._propertyVariantIdMap,
+			(x) => x.find((v) => v.alias === propertyAlias)?.variantId,
+			classEqualMemoization,
+		);
+	}
+
+	/**
+	 * @function propertyValueByAlias
+	 * @param {string} propertyAlias  The alias of the property
+	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>} - An observable of the property value
+	 * @description Get an Observable for the value of this property.
+	 */
+	async propertyValueByAlias<ReturnType = unknown>(
+		propertyAlias: string,
+	): Promise<Observable<ReturnType | undefined> | undefined> {
+		await this._dataOwner.isLoaded();
+		await this.#propertyVariantIdPromise;
+		return mergeObservables(
+			[await this.propertyVariantId(propertyAlias), this._dataOwner.values],
+			([variantId, values]) => {
+				return variantId
+					? (values?.find((x) => x?.alias === propertyAlias && variantId.compare(x))?.value as ReturnType)
+					: undefined;
+			},
+		);
+	}
+
+	// TODO: Refactor: Not used currently, but should investigate if we can implement this, to spare some energy.
+	async propertyValueByAliasAndVariantId<ReturnType = unknown>(
+		propertyAlias: string,
+		propertyVariantId: UmbVariantId,
+	): Promise<Observable<ReturnType | undefined> | undefined> {
+		return this._dataOwner.propertyValueByAlias<ReturnType>(propertyAlias, propertyVariantId);
+	}
+
+	/**
+	 * @function setPropertyValueByVariant
+	 * @param {string} propertyAlias - The alias of the property
+	 * @param {unknown} value - value can be a promise resolving into the actual value or the raw value it self.
+	 * @param {UmbVariantId} propertyVariantId - The variant id for the value to be set for.
+	 * @returns {Promise<unknown>} - A promise that resolves once the value has been set.
+	 * @description Get the value of this property.
+	 */
+	setPropertyValueByVariant(propertyAlias: string, value: unknown, propertyVariantId: UmbVariantId): Promise<void> {
+		return this._dataOwner.setPropertyValue(propertyAlias, value, propertyVariantId);
+	}
+
+	/**
+	 * @function setPropertyValue
+	 * @param {string} propertyAlias - The alias for the value to be set
+	 * @param {PromiseLike<unknown>} value - value can be a promise resolving into the actual value or the raw value it self.
+	 * @returns {Promise<void>}
+	 * @description Set the value of this property.
+	 */
+	async setPropertyValue(propertyAlias: string, value: PromiseLike<unknown>) {
+		this._dataOwner.initiatePropertyValueChange();
+		await this.#propertyVariantIdPromise;
+		const propVariantId = this.#propertyVariantIdMap.getValue().find((x) => x.alias === propertyAlias)?.variantId;
+		if (propVariantId) {
+			await this._dataOwner.setPropertyValue(propertyAlias, await value, propVariantId);
+		}
+		this._dataOwner.finishPropertyValueChange();
+	}
+
+	override destroy() {
+		super.destroy();
+		this.#propertyVariantIdMap.destroy();
+		(this.#propertyVariantIdMap as unknown) = undefined;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/index.ts
new file mode 100644
index 0000000000..69c6bea4c8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/property-dataset-context/index.ts
@@ -0,0 +1,3 @@
+export * from './content-property-dataset.context.js';
+export * from './element-property-data-owner.interface.js';
+export * from './element-property-dataset.context.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/types.ts
index e049e2250a..a1e7c8cd01 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/types.ts
@@ -1,11 +1,17 @@
 import type { UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
 import type { UmbEntityVariantModel } from '@umbraco-cms/backoffice/variant';
 
-export interface UmbContentValueModel<ValueType = unknown> extends UmbPropertyValueData<ValueType> {
+export interface UmbElementDetailModel {
+	values: Array<UmbElementValueModel>;
+}
+
+export interface UmbElementValueModel<ValueType = unknown> extends UmbPropertyValueData<ValueType> {
 	editorAlias: string;
 	culture: string | null;
 	segment: string | null;
 }
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbContentValueModel<ValueType = unknown> extends UmbElementValueModel<ValueType> {}
 
 export interface UmbPotentialContentValueModel<ValueType = unknown> extends UmbPropertyValueData<ValueType> {
 	editorAlias?: string;
@@ -13,9 +19,12 @@ export interface UmbPotentialContentValueModel<ValueType = unknown> extends UmbP
 	segment?: string | null;
 }
 
-export interface UmbContentDetailModel {
+export interface UmbContentDetailModel extends UmbElementDetailModel {
 	unique: string;
 	entityType: string;
-	values: Array<UmbContentValueModel>;
 	variants: Array<UmbEntityVariantModel>;
 }
+
+export interface UmbContentLikeDetailModel
+	extends UmbElementDetailModel,
+		Partial<Pick<UmbContentDetailModel, 'variants'>> {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/content-workspace-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/content-workspace-context.interface.ts
index c9fd0665cb..ecaeca41a7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/content-workspace-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/content-workspace-context.interface.ts
@@ -1,7 +1,6 @@
-import type { UmbContentDetailModel } from '@umbraco-cms/backoffice/content';
+import type { UmbContentDetailModel, UmbElementPropertyDataOwner } from '@umbraco-cms/backoffice/content';
 import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
-import type { UmbReadOnlyVariantStateManager } from '@umbraco-cms/backoffice/utils';
 import type { UmbVariantId, UmbEntityVariantModel } from '@umbraco-cms/backoffice/variant';
 import type {
 	UmbPropertyStructureWorkspaceContext,
@@ -13,11 +12,13 @@ export interface UmbContentWorkspaceContext<
 	ContentModel extends UmbContentDetailModel = UmbContentDetailModel,
 	ContentTypeModel extends UmbContentTypeModel = UmbContentTypeModel,
 	VariantModelType extends UmbEntityVariantModel = UmbEntityVariantModel,
-> extends UmbRoutableWorkspaceContext,
+> extends UmbElementPropertyDataOwner<ContentModel, ContentTypeModel>,
+		UmbRoutableWorkspaceContext,
 		UmbVariantDatasetWorkspaceContext<VariantModelType>,
 		UmbPropertyStructureWorkspaceContext<ContentTypeModel> {
 	readonly IS_CONTENT_WORKSPACE_CONTEXT: true;
-	readonly readOnlyState: UmbReadOnlyVariantStateManager;
+	//readonly values: Observable<ContentModel['values'] | undefined>;
+	//getValues(): ContentModel['values'] | undefined;
 
 	// Data:
 	getData(): ContentModel | undefined;
@@ -25,6 +26,6 @@ export interface UmbContentWorkspaceContext<
 	isLoaded(): Promise<unknown> | undefined;
 	variantById(variantId: UmbVariantId): Observable<VariantModelType | undefined>;
 
-	initiatePropertyValueChange(): void;
-	finishPropertyValueChange(): void;
+	//initiatePropertyValueChange(): void;
+	//finishPropertyValueChange(): void;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.kind.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.kind.ts
new file mode 100644
index 0000000000..a220d955aa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.kind.ts
@@ -0,0 +1,22 @@
+import { UMB_ENTITY_ACTION_DEFAULT_KIND_MANIFEST } from '../../default/default.action.kind.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: UmbExtensionManifestKind = {
+	type: 'kind',
+	alias: 'Umb.Kind.EntityAction.Create',
+	matchKind: 'create',
+	matchType: 'entityAction',
+	manifest: {
+		...UMB_ENTITY_ACTION_DEFAULT_KIND_MANIFEST.manifest,
+		type: 'entityAction',
+		kind: 'create',
+		api: () => import('./create.action.js'),
+		weight: 1200,
+		forEntityTypes: [],
+		meta: {
+			icon: 'icon-add',
+			label: '#actions_create',
+			additionalOptions: true,
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.ts
new file mode 100644
index 0000000000..e341354768
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create.action.ts
@@ -0,0 +1,59 @@
+import { UmbEntityActionBase } from '../../entity-action-base.js';
+import type { UmbEntityActionArgs } from '../../types.js';
+import type { MetaEntityActionCreateKind } from './types.js';
+import { UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL } from './modal/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { createExtensionApi, UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
+import type { ManifestEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action';
+
+export class UmbCreateEntityAction extends UmbEntityActionBase<MetaEntityActionCreateKind> {
+	#hasSingleOption = true;
+	#singleActionOptionManifest?: ManifestEntityCreateOptionAction;
+
+	constructor(host: UmbControllerHost, args: UmbEntityActionArgs<MetaEntityActionCreateKind>) {
+		super(host, args);
+
+		new UmbExtensionsManifestInitializer(
+			this,
+			umbExtensionsRegistry,
+			'entityCreateOptionAction',
+			(ext) => ext.forEntityTypes.includes(this.args.entityType),
+			async (actionOptions) => {
+				this.#hasSingleOption = actionOptions.length === 1;
+				this.#singleActionOptionManifest = this.#hasSingleOption
+					? (actionOptions[0].manifest as unknown as ManifestEntityCreateOptionAction)
+					: undefined;
+			},
+			'umbEntityActionsObserver',
+		);
+	}
+
+	override async execute() {
+		if (this.#hasSingleOption) {
+			if (!this.#singleActionOptionManifest) throw new Error('No first action manifest found');
+
+			const api = await createExtensionApi(this, this.#singleActionOptionManifest, [
+				{ unique: this.args.unique, entityType: this.args.entityType, meta: this.#singleActionOptionManifest.meta },
+			]);
+
+			if (!api) throw new Error(`Could not create api for ${this.#singleActionOptionManifest.alias}`);
+
+			await api.execute();
+			return;
+		}
+
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		const modalContext = modalManager.open(this, UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL, {
+			data: {
+				unique: this.args.unique,
+				entityType: this.args.entityType,
+			},
+		});
+
+		await modalContext.onSubmit();
+	}
+}
+
+export { UmbCreateEntityAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/index.ts
new file mode 100644
index 0000000000..d44c5eca74
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/index.ts
@@ -0,0 +1 @@
+export { UmbCreateEntityAction } from './create.action.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/manifests.ts
new file mode 100644
index 0000000000..d1e496f559
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/manifests.ts
@@ -0,0 +1,4 @@
+import { manifest as createKindManifest } from './create.action.kind.js';
+import { manifests as modalManifests } from './modal/manifests.js';
+
+export const manifests = [createKindManifest, ...modalManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/constants.ts
new file mode 100644
index 0000000000..ab81577a04
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/constants.ts
@@ -0,0 +1 @@
+export const UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL_ALIAS = 'Umb.Modal.Entity.CreateOptionActionList';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts
new file mode 100644
index 0000000000..5150c3946d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts
@@ -0,0 +1,134 @@
+import type {
+	UmbEntityCreateOptionActionListModalData,
+	UmbEntityCreateOptionActionListModalValue,
+} from './entity-create-option-action-list-modal.token.js';
+import type { ManifestEntityCreateOptionAction } from '@umbraco-cms/backoffice/entity-create-option-action';
+import type { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import {
+	html,
+	customElement,
+	state,
+	repeat,
+	ifDefined,
+	type PropertyValues,
+} from '@umbraco-cms/backoffice/external/lit';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+
+type ManifestType = ManifestEntityCreateOptionAction;
+
+const elementName = 'umb-entity-create-option-action-list-modal';
+@customElement(elementName)
+export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseElement<
+	UmbEntityCreateOptionActionListModalData,
+	UmbEntityCreateOptionActionListModalValue
+> {
+	@state()
+	private _apiControllers: Array<UmbExtensionApiInitializer<ManifestType>> = [];
+
+	@state()
+	_hrefList: Array<string | undefined> = [];
+
+	protected override updated(_changedProperties: PropertyValues): void {
+		super.updated(_changedProperties);
+
+		if (_changedProperties.has('data')) {
+			this.#initApi();
+		}
+	}
+
+	#initApi() {
+		const data = this.data;
+		if (!data) throw new Error('No data found');
+
+		if (!data.entityType) throw new Error('No entityType found');
+		if (data.unique === undefined) throw new Error('No unique found');
+
+		new UmbExtensionsApiInitializer(
+			this,
+			umbExtensionsRegistry,
+			'entityCreateOptionAction',
+			(manifest: ManifestType) => {
+				return [{ entityType: data.entityType, unique: data.unique, meta: manifest.meta }];
+			},
+			(manifest: ManifestType) => manifest.forEntityTypes.includes(data.entityType),
+			async (controllers) => {
+				this._apiControllers = controllers as unknown as Array<UmbExtensionApiInitializer<ManifestType>>;
+				const hrefPromises = this._apiControllers.map((controller) => controller.api?.getHref());
+				this._hrefList = await Promise.all(hrefPromises);
+			},
+		);
+	}
+
+	async #onClick(event: Event, controller: UmbExtensionApiInitializer<ManifestType>, href?: string) {
+		event.stopPropagation();
+
+		// skip if href is defined
+		if (href) {
+			return;
+		}
+
+		if (!controller.api) throw new Error('No API found');
+		await controller.api.execute();
+	}
+
+	#getTarget(href?: string) {
+		if (href && href.startsWith('http')) {
+			return '_blank';
+		}
+
+		return '_self';
+	}
+
+	override render() {
+		return html`
+			<umb-body-layout headline="${this.localize.term('user_createUser')}">
+				<uui-box>
+					${this._apiControllers.length === 0
+						? html`<div>No create options available.</div>`
+						: html`<uui-ref-list>
+								${repeat(
+									this._apiControllers,
+									(controller) => controller.manifest?.alias,
+									(controller, index) => this.#renderRefItem(controller, index),
+								)}
+							</uui-ref-list>`}
+				</uui-box>
+				<uui-button
+					slot="actions"
+					label=${this.localize.term('general_cancel')}
+					@click=${this._rejectModal}></uui-button>
+			</umb-body-layout>
+		`;
+	}
+
+	#renderRefItem(controller: UmbExtensionApiInitializer<ManifestType>, index: number) {
+		const manifest = controller.manifest;
+		if (!manifest) throw new Error('No manifest found');
+
+		const label = manifest.meta.label ? this.localize.string(manifest.meta.label) : manifest.name;
+		const href = this._hrefList[index];
+
+		return html`
+			<uui-ref-node
+				name=${label}
+				detail=${ifDefined(manifest.meta.description)}
+				@click=${(event: Event) => this.#onClick(event, controller, href)}
+				href=${ifDefined(href)}
+				target=${this.#getTarget(href)}
+				?selectable=${!href}
+				?readonly=${!href}>
+				<uui-icon slot="icon" name=${manifest.meta.icon}></uui-icon>
+			</uui-ref-node>
+		`;
+	}
+}
+
+export { UmbEntityCreateOptionActionListModalElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbEntityCreateOptionActionListModalElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.token.ts
new file mode 100644
index 0000000000..dd1aba66b4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.token.ts
@@ -0,0 +1,20 @@
+import { UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL_ALIAS } from './constants.js';
+import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
+import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbEntityCreateOptionActionListModalData {
+	unique: UmbEntityUnique;
+	entityType: string;
+}
+
+export type UmbEntityCreateOptionActionListModalValue = never;
+
+export const UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL = new UmbModalToken<
+	UmbEntityCreateOptionActionListModalData,
+	UmbEntityCreateOptionActionListModalValue
+>(UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL_ALIAS, {
+	modal: {
+		type: 'sidebar',
+		size: 'small',
+	},
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/index.ts
new file mode 100644
index 0000000000..876d392b23
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/index.ts
@@ -0,0 +1,2 @@
+export * from './constants.js';
+export * from './entity-create-option-action-list-modal.token.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/manifests.ts
new file mode 100644
index 0000000000..2b6ee6ed47
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/manifests.ts
@@ -0,0 +1,10 @@
+import { UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'modal',
+		alias: UMB_ENTITY_CREATE_OPTION_ACTION_LIST_MODAL_ALIAS,
+		name: 'Entity Create Option Action List Modal',
+		element: () => import('./entity-create-option-action-list-modal.element.js'),
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/types.ts
new file mode 100644
index 0000000000..7d102e750a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/types.ts
@@ -0,0 +1,16 @@
+import type { MetaEntityActionDefaultKind } from '../../default/index.js';
+import type { ManifestEntityAction } from '../../entity-action.extension.js';
+
+export interface ManifestEntityActionCreateKind extends ManifestEntityAction<MetaEntityActionCreateKind> {
+	type: 'entityAction';
+	kind: 'create';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MetaEntityActionCreateKind extends MetaEntityActionDefaultKind {}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbEntityActionCreateKind: ManifestEntityActionCreateKind;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/index.ts
index 30877954f8..5a7c2ae86b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/index.ts
@@ -1,2 +1,3 @@
-export * from './duplicate/index.js';
+export * from './create/index.js';
 export * from './delete/index.js';
+export * from './duplicate/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts
index 0fd5ba6de0..60881da438 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/index.ts
@@ -5,8 +5,8 @@ export * from './entity-action-list.element.js';
 export * from './entity-action.event.js';
 export * from './entity-action.extension.js';
 export * from './entity-action.interface.js';
-export * from './types.js';
 export type * from './entity-action-element.interface.js';
+export type * from './types.js';
 
 export { UmbRequestReloadStructureForEntityEvent } from './request-reload-structure-for-entity.event.js';
 export { UmbRequestReloadChildrenOfEntityEvent } from './request-reload-children-of-entity.event.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/manifests.ts
index aeaaceafc0..7d6813e49a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-action/manifests.ts
@@ -1,9 +1,12 @@
+import { manifests as createEntityActionManifests } from './common/create/manifests.js';
 import { manifests as defaultEntityActionManifests } from './default/manifests.js';
 import { manifests as deleteEntityActionManifests } from './common/delete/manifests.js';
 import { manifests as duplicateEntityActionManifests } from './common/duplicate/manifests.js';
+
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	...createEntityActionManifests,
 	...defaultEntityActionManifests,
 	...deleteEntityActionManifests,
 	...duplicateEntityActionManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts
index bf14ffa917..601493c5b2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-bulk-action/index.ts
@@ -1,8 +1,8 @@
-export * from './types.js';
 export * from './common/index.js';
 export * from './entity-bulk-action-base.js';
 export * from './entity-bulk-action.element.js';
 export * from './entity-bulk-action.interface.js';
 export type * from './entity-bulk-action-element.interface.js';
+export type * from './types.js';
 
 export { UMB_ENTITY_BULK_ACTION_DEFAULT_KIND_MANIFEST } from './default/default.action.kind.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/constants.ts
new file mode 100644
index 0000000000..4c25e59099
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/constants.ts
@@ -0,0 +1 @@
+export const UMB_EXTENSION_TYPE_ENTITY_CREATE_OPTION_ACTION = 'entityCreateOptionAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action-base.ts
new file mode 100644
index 0000000000..236d7e6394
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action-base.ts
@@ -0,0 +1,30 @@
+import type { UmbEntityCreateOptionActionArgs } from './types.js';
+import type { UmbEntityCreateOptionAction } from './entity-create-option-action.interface.js';
+import type { MetaEntityCreateOptionAction } from './entity-create-option-action.extension.js';
+import { UmbActionBase } from '@umbraco-cms/backoffice/action';
+
+export abstract class UmbEntityCreateOptionActionBase<
+		ArgsMetaType extends MetaEntityCreateOptionAction = MetaEntityCreateOptionAction,
+	>
+	extends UmbActionBase<UmbEntityCreateOptionActionArgs<ArgsMetaType>>
+	implements UmbEntityCreateOptionAction<ArgsMetaType>
+{
+	/**
+	 * By specifying the href, the action will act as a link.
+	 * The `execute` method will not be called.
+	 * @abstract
+	 * @returns {string | undefined} - A promise which resolves into a HREF string or undefined.
+	 */
+	public getHref(): Promise<string | undefined> {
+		return Promise.resolve(undefined);
+	}
+
+	/**
+	 * By specifying the `execute` method, the action will act as a button.
+	 * @abstract
+	 * @returns {Promise<void>}
+	 */
+	public execute(): Promise<void> {
+		return Promise.resolve();
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action.extension.ts
new file mode 100644
index 0000000000..4f62ecd3de
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action.extension.ts
@@ -0,0 +1,54 @@
+import type { UmbEntityCreateOptionAction } from './entity-create-option-action.interface.js';
+import type { UMB_EXTENSION_TYPE_ENTITY_CREATE_OPTION_ACTION } from './constants.js';
+import type { ManifestApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
+
+export interface ManifestEntityCreateOptionAction<
+	MetaType extends MetaEntityCreateOptionAction = MetaEntityCreateOptionAction,
+> extends ManifestApi<UmbEntityCreateOptionAction<MetaType>>,
+		ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
+	type: typeof UMB_EXTENSION_TYPE_ENTITY_CREATE_OPTION_ACTION;
+	forEntityTypes: Array<string>;
+	meta: MetaType;
+}
+
+export interface MetaEntityCreateOptionAction {
+	/**
+	 * An icon to represent the action to be performed
+	 * @examples [
+	 *   "icon-box",
+	 *   "icon-grid"
+	 * ]
+	 */
+	icon: string;
+
+	/**
+	 * The friendly name of the action to perform
+	 * @examples [
+	 *   "Create with Template",
+	 *   "Create from Blueprint"
+	 * ]
+	 */
+	label: string;
+
+	/**
+	 * A description of the action to be performed
+	 * @examples [
+	 *   "Create a document type with a template",
+	 *   "Create a document from a blueprint"
+	 * ]
+	 */
+	description?: string;
+
+	/**
+	 * The action requires additional input from the user.
+	 * A dialog will prompt the user for more information or to make a choice.
+	 * @type {boolean}
+	 */
+	additionalOptions?: boolean;
+}
+
+declare global {
+	interface UmbExtensionManifestMap {
+		umbEntityCreateOptionAction: ManifestEntityCreateOptionAction;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action.interface.ts
new file mode 100644
index 0000000000..141e9dd084
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/entity-create-option-action.interface.ts
@@ -0,0 +1,19 @@
+import type { MetaEntityCreateOptionAction } from './entity-create-option-action.extension.js';
+import type { UmbEntityCreateOptionActionArgs } from './types.js';
+import type { UmbAction } from '@umbraco-cms/backoffice/action';
+
+export interface UmbEntityCreateOptionAction<
+	ArgsMetaType extends MetaEntityCreateOptionAction = MetaEntityCreateOptionAction,
+> extends UmbAction<UmbEntityCreateOptionActionArgs<ArgsMetaType>> {
+	/**
+	 * The href location, the action will act as a link.
+	 * @returns {Promise<string | undefined>}
+	 */
+	getHref(): Promise<string | undefined>;
+
+	/**
+	 * The `execute` method, the action will act as a button.
+	 * @returns {Promise<void>}
+	 */
+	execute(): Promise<void>;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/index.ts
new file mode 100644
index 0000000000..566d9306e5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/index.ts
@@ -0,0 +1,5 @@
+export * from './constants.js';
+export * from './entity-create-option-action-base.js';
+export * from './entity-create-option-action.extension.js';
+export * from './entity-create-option-action.interface.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/types.ts
new file mode 100644
index 0000000000..ca6db2fc24
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity-create-option-action/types.ts
@@ -0,0 +1,5 @@
+import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+
+export interface UmbEntityCreateOptionActionArgs<MetaArgsType> extends UmbEntityModel {
+	meta: MetaArgsType;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entity/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entity/index.ts
index d3f60a90c0..737d7bf482 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entity/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entity/index.ts
@@ -1,3 +1,3 @@
 export { UMB_ENTITY_CONTEXT } from './entity.context-token.js';
 export { UmbEntityContext } from './entity.context.js';
-export * from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/conditions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/conditions/types.ts
index 9005394877..ee46b35085 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/conditions/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/conditions/types.ts
@@ -1,13 +1,7 @@
-import type { CollectionAliasConditionConfig } from '../../collection/collection-alias.manifest.js';
-import type { CollectionBulkActionPermissionConditionConfig } from '../../collection/collection-bulk-action-permission.manifest.js';
 import type { SwitchConditionConfig } from './switch.condition.js';
 import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
 
-export type UmbCoreConditionConfigs =
-	| CollectionAliasConditionConfig
-	| CollectionBulkActionPermissionConditionConfig
-	| SwitchConditionConfig
-	| UmbConditionConfigBase;
+export type UmbCoreConditionConfigs = SwitchConditionConfig | UmbConditionConfigBase;
 
 /**
  * @deprecated instead use global UmbExtensionConditionConfig
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts
index 7c562c37af..2b3c1e5178 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/index.ts
@@ -1,6 +1,29 @@
 import type { ManifestBase, ManifestBundle, ManifestCondition } from '@umbraco-cms/backoffice/extension-api';
 
-export type ManifestTypes = ManifestBundle<ManifestTypes> | ManifestCondition | ManifestBase;
+/**
+ * @deprecated Follow these steps to get Extension Manifest Type for v.15+ projects:
+ *
+ * Setup your `tsconfig.json` to include the extension-types as global types. Like this:
+ * ```
+	{
+		"compilerOptions": {
+			...
+			"types": [
+				"@umbraco-cms/backoffice/extension-types"
+			]
+		}
+	}
+ * ```
+ *
+ * Once done, you can use the global type `UmbExtensionManifest`.
+ *
+ * If defining your own extension types, then follow the link below for more information.
+ *
+ * [Read more on the change announcement]{https://github.com/umbraco/Announcements/issues/22}
+ */
+export type ManifestTypes = never;
+
+type UmbCoreManifestTypes = ManifestBundle<UmbCoreManifestTypes> | ManifestCondition | ManifestBase;
 
 type UnionOfProperties<T> = T extends object ? T[keyof T] : never;
 
@@ -25,7 +48,7 @@ declare global {
 	 ```
 	 */
 	interface UmbExtensionManifestMap {
-		UMB_CORE: ManifestTypes;
+		UMB_CORE: UmbCoreManifestTypes;
 	}
 
 	/**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/registry.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/registry.ts
index 0985b3226e..22849345b6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/registry.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/registry.ts
@@ -2,9 +2,12 @@ import type { ManifestKind } from '@umbraco-cms/backoffice/extension-api';
 import { UmbExtensionRegistry } from '@umbraco-cms/backoffice/extension-api';
 
 export type UmbExtensionManifestKind = ManifestKind<UmbExtensionManifest>;
-export type UmbBackofficeExtensionRegistry = UmbExtensionRegistry<UmbExtensionManifest>;
+export type UmbBackofficeExtensionRegistry = UmbExtensionRegistry<UmbExtensionManifest, UmbExtensionConditionConfig>;
 
-export const umbExtensionsRegistry = new UmbExtensionRegistry<UmbExtensionManifest>() as UmbBackofficeExtensionRegistry;
+export const umbExtensionsRegistry = new UmbExtensionRegistry<
+	UmbExtensionManifest,
+	UmbExtensionConditionConfig
+>() as UmbBackofficeExtensionRegistry;
 
 /**
  * @deprecated Use `UmbExtensionManifestKind` instead.
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
index cc6923a5d9..d358487927 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json
@@ -366,6 +366,10 @@
 			"name": "icon-circuits",
 			"file": "circuit-board.svg"
 		},
+		{
+			"name": "icon-clear-formatting",
+			"file": "remove-formatting.svg"
+		},
 		{
 			"name": "icon-client",
 			"file": "user.svg",
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
index 6edd8ec784..8855310df5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons.ts
@@ -355,6 +355,10 @@ name: "icon-circuits",
 
 path: () => import("./icons/icon-circuits.js"),
 },{
+name: "icon-clear-formatting",
+
+path: () => import("./icons/icon-clear-formatting.js"),
+},{
 name: "icon-client",
 legacy: true,
 path: () => import("./icons/icon-client.js"),
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-clear-formatting.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-clear-formatting.ts
new file mode 100644
index 0000000000..09fbab564a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icons/icon-clear-formatting.ts
@@ -0,0 +1,18 @@
+export default `<!-- @license lucide-static v0.446.0 - ISC -->
+<svg
+  class="lucide lucide-remove-formatting"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.75"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 7V4h16v3" />
+  <path d="M5 20h6" />
+  <path d="M13 4 8 20" />
+  <path d="m15 15 5 5" />
+  <path d="m20 15-5 5" />
+</svg>
+`;
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/index.ts
index 1da66f89d4..d2d7785f3b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/index.ts
@@ -2,5 +2,5 @@ export * from './icon-picker-modal/index.js';
 export * from './icon-registry.context-token.js';
 export * from './icon-registry.context.js';
 export * from './icon.registry.js';
-export * from './types.js';
+export type * from './types.js';
 export type * from './extensions/icons.extension.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/stories/localize.element.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/localization/stories/localize.element.stories.ts
index 7b3f352e9d..cef1a3f7ee 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/stories/localize.element.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/localization/stories/localize.element.stories.ts
@@ -9,13 +9,6 @@ const meta: Meta<UmbLocalizeElement> = {
 	args: {
 		key: 'general_areyousure',
 	},
-	argTypes: {
-		args: {
-			control: {
-				type: 'text',
-			},
-		},
-	},
 	decorators: [
 		(story) => {
 			return html`<div style="padding: 1rem; margin: 1rem; border: 1px solid green; max-width:50%;">
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts
index 255e8a9ae8..1509c986d2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/index.ts
@@ -1,9 +1,9 @@
 export * from './components/index.js';
 export * from './menu-tree-structure-workspace-context-base.js';
 export * from './menu-variant-tree-structure-workspace-context-base.js';
-export * from './types.js';
 export type * from './menu-item-element.interface.js';
 export type * from './menu-item.extension.js';
 export type * from './menu.extension.js';
+export type * from './types.js';
 
 export type { UmbMenuStructureWorkspaceContext } from './menu-structure-workspace-context.interface.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts
index 82ba7df803..8d89588a1d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/menu/menu-variant-tree-structure-workspace-context-base.ts
@@ -45,7 +45,7 @@ export abstract class UmbMenuVariantTreeStructureWorkspaceContextBase extends Um
 		let structureItems: Array<UmbVariantStructureItemModel> = [];
 
 		const unique = (await this.observe(uniqueObservable, () => {})?.asPromise()) as string;
-		if (!unique) throw new Error('Unique is not available');
+		if (unique === undefined) throw new Error('Unique is not available');
 
 		const entityType = (await this.observe(entityTypeObservable, () => {})?.asPromise()) as string;
 		if (!entityType) throw new Error('Entity type is not available');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/index.ts
index 55ca1f1885..5403700cff 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/index.ts
@@ -5,4 +5,4 @@ export * from './component/modal-base.element.js';
 export * from './component/modal.element.js';
 export * from './context/index.js';
 export * from './token/index.js';
-export * from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts
index 3549e429c8..a1c61b09c0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts
@@ -1,4 +1,4 @@
-export * from './extensions/index.js';
+export type * from './extensions/index.js';
 
 export interface UmbPickerModalData<ItemType> {
 	multiple?: boolean;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts
index b19f3e47db..0074a61d85 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts
@@ -1,4 +1,4 @@
 export * from './search/index.js';
 export * from './picker.context.js';
 export * from './picker.context.token.js';
-export * from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/extensions/property-editor-ui-element.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/extensions/property-editor-ui-element.interface.ts
index 39f40cde5b..58163db2d9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/extensions/property-editor-ui-element.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/extensions/property-editor-ui-element.interface.ts
@@ -1,8 +1,10 @@
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
 export interface UmbPropertyEditorUiElement extends HTMLElement {
+	name?: string;
 	value?: unknown;
 	config?: UmbPropertyEditorConfigCollection;
 	mandatory?: boolean;
 	mandatoryMessage?: string;
+	destroy?: () => void;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/manifests.ts
index 14d045bb48..23bb2d577c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/manifests.ts
@@ -1,5 +1,5 @@
 import { UMB_PROPERTY_TYPE_ENTITY_TYPE, UMB_PROPERTY_TYPE_WORKSPACE_ALIAS } from './constants.js';
-import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_CONDITION_ALIAS, UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -25,7 +25,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_PROPERTY_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -43,7 +43,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				oneOf: [UMB_PROPERTY_TYPE_WORKSPACE_ALIAS],
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts
index 858c6197e1..b9bcfe9751 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/property-type-workspace.context.ts
@@ -1,6 +1,6 @@
 import { UmbPropertyTypeWorkspaceEditorElement } from './property-type-workspace-editor.element.js';
 import type { UmbPropertyTypeWorkspaceData } from './property-type-workspace.modal-token.js';
-import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
+import type { UmbPropertyDatasetContext, UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
 import type {
 	UmbInvariantDatasetWorkspaceContext,
 	UmbRoutableWorkspaceContext,
@@ -11,6 +11,7 @@ import {
 	UmbInvariantWorkspacePropertyDatasetContext,
 	UmbWorkspaceIsNewRedirectController,
 	UmbWorkspaceIsNewRedirectControllerAlias,
+	umbObjectToPropertyValueArray,
 } from '@umbraco-cms/backoffice/workspace';
 import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -18,6 +19,7 @@ import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type'
 import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content-type';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbValidationContext } from '@umbraco-cms/backoffice/validation';
+import { firstValueFrom } from '@umbraco-cms/backoffice/external/rxjs';
 
 export class UmbPropertyTypeWorkspaceContext<PropertyTypeData extends UmbPropertyTypeModel = UmbPropertyTypeModel>
 	extends UmbSubmittableWorkspaceContextBase<PropertyTypeData>
@@ -39,6 +41,13 @@ export class UmbPropertyTypeWorkspaceContext<PropertyTypeData extends UmbPropert
 	readonly name = this.#data.asObservablePart((data) => data?.name);
 	readonly unique = this.#data.asObservablePart((data) => data?.id);
 
+	readonly values = this.#data.asObservablePart((data) => {
+		return umbObjectToPropertyValueArray(data);
+	});
+	async getValues(): Promise<Array<UmbPropertyValueData> | undefined> {
+		return umbObjectToPropertyValueArray(await firstValueFrom(this.data));
+	}
+
 	constructor(host: UmbControllerHost, args: { manifest: ManifestWorkspace }) {
 		super(host, args.manifest.alias);
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts
index d51def11c0..7b7a4c2822 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-base-context.ts
@@ -19,8 +19,13 @@ export class UmbPropertyDatasetContextBase
 	#name = new UmbStringState(undefined);
 	name = this.#name.asObservable();
 
-	#values = new UmbArrayState<UmbPropertyValueData>([], (x) => x.alias);
-	public readonly values = this.#values.asObservable();
+	#properties = new UmbArrayState<UmbPropertyValueData>([], (x) => x.alias);
+	public readonly properties = this.#properties.asObservable();
+	/**
+	 * @deprecated - use `properties` instead.
+	 */
+	readonly values = this.properties;
+
 	private _entityType!: string;
 	private _unique!: string;
 
@@ -51,12 +56,11 @@ export class UmbPropertyDatasetContextBase
 
 	/**
 	 * @function propertyValueByAlias
-	 * @param {string} propertyAlias
-	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>}
-	 * @description Get an Observable for the value of this property.
+	 * @param {string} propertyAlias - the alias to observe
+	 * @returns {Promise<Observable<ReturnType | undefined> | undefined>} - an Observable for the value of this property.
 	 */
 	async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
-		return this.#values.asObservablePart((values) => {
+		return this.#properties.asObservablePart((values) => {
 			const valueObj = values.find((x) => x.alias === propertyAlias);
 			return valueObj ? (valueObj.value as ReturnType) : undefined;
 		});
@@ -64,26 +68,45 @@ export class UmbPropertyDatasetContextBase
 
 	/**
 	 * @function setPropertyValue
-	 * @param {string} alias
+	 * @param {string} alias - The alias to set this value for
 	 * @param {PromiseLike<unknown>} value - value can be a promise resolving into the actual value or the raw value it self.
-	 * @returns {Promise<void>}
 	 * @description Set the value of this property.
 	 */
 	setPropertyValue(alias: string, value: unknown) {
-		this.#values.appendOne({ alias, value });
+		this.#properties.appendOne({ alias, value });
 	}
 
+	/**
+	 * @deprecated Use `getProperties`
+	 * @returns {Array<UmbPropertyValueData>} - Array of properties as objects with alias and value properties.
+	 */
 	getValues() {
-		return this.#values.getValue();
+		return this.#properties.getValue();
 	}
-	setValues(map: Array<UmbPropertyValueData>) {
-		this.#values.setValue(map);
+	/**
+	 * @param {Array<UmbPropertyValueData>} properties - Properties array with alias and value properties.
+	 * @deprecated Use `setProperties`
+	 */
+	setValues(properties: Array<UmbPropertyValueData>) {
+		this.#properties.setValue(properties);
+	}
+
+	/**
+	 * @returns {Array<UmbPropertyValueData>} - Array of properties as objects with alias and value properties.
+	 */
+	async getProperties() {
+		return this.#properties.getValue();
+	}
+	/**
+	 * @param {Array<UmbPropertyValueData>} properties - Properties array with alias and value properties.
+	 */
+	setProperties(properties: Array<UmbPropertyValueData>) {
+		this.#properties.setValue(properties);
 	}
 
 	/**
 	 * Gets the read-only state of the current variant culture.
 	 * @returns {*}  {boolean}
-	 * @memberof UmbBlockGridInlinePropertyDatasetContext
 	 */
 	getReadOnly(): boolean {
 		return this.#readOnly.getValue();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts
index c33b0896ed..6bdb7565ef 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset-context.interface.ts
@@ -1,4 +1,5 @@
 import type { UmbVariantId } from '../../variant/variant-id.class.js';
+import type { UmbPropertyValueData } from '../types.js';
 import type { UmbContext } from '@umbraco-cms/backoffice/class-api';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
@@ -29,7 +30,9 @@ export interface UmbPropertyDatasetContext extends UmbContext {
 	readonly readOnly: Observable<boolean>;
 
 	// Should it be possible to get the properties as a list of property aliases?
-	//readonly properties: Observable<Array<string>>;
+	readonly properties: Observable<Array<UmbPropertyValueData> | undefined>;
+	getProperties(): Promise<Array<UmbPropertyValueData> | undefined>;
+	//setProperties(properties: Array<UmbPropertyValueData>): void;
 
 	// Property methods:
 	propertyVariantId?: (propertyAlias: string) => Promise<Observable<UmbVariantId | undefined>>;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts
index 04e4cb7c54..e11efdbb81 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-dataset/property-dataset.element.ts
@@ -96,7 +96,7 @@ export class UmbPropertyDatasetElement extends UmbLitElement {
 		this.observe(this.context.name, this.#observerCallback);
 		// prevent the first change event from firing:
 		this.#allowChangeEvent = false;
-		this.observe(this.context.values, this.#observerCallback);
+		this.observe(this.context.properties, this.#observerCallback);
 	}
 
 	#observerCallback = () => {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
index f54e2dc1e1..1ec36a2abe 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
@@ -190,6 +190,9 @@ export class UmbPropertyElement extends UmbLitElement {
 			this.#propertyContext.label,
 			(label) => {
 				this._label = label;
+				if (this._element) {
+					this._element.name = label;
+				}
 			},
 			null,
 		);
@@ -285,6 +288,7 @@ export class UmbPropertyElement extends UmbLitElement {
 			this.#controlValidator?.destroy();
 			oldElement?.removeEventListener('change', this._onPropertyEditorChange as any as EventListener);
 			oldElement?.removeEventListener('property-value-change', this._onPropertyEditorChange as any as EventListener);
+			oldElement?.destroy?.();
 
 			this._element = el as ManifestPropertyEditorUi['ELEMENT_TYPE'];
 
@@ -293,8 +297,9 @@ export class UmbPropertyElement extends UmbLitElement {
 			if (this._element) {
 				this._element.addEventListener('change', this._onPropertyEditorChange as any as EventListener);
 				this._element.addEventListener('property-value-change', this._onPropertyEditorChange as any as EventListener);
-				// No need to observe mandatory, as we already do so and set it on the _element if present: [NL]
+				// No need to observe mandatory or label, as we already do so and set it on the _element if present: [NL]
 				this._element.mandatory = this._mandatory;
+				this._element.name = this._label;
 
 				// No need for a controller alias, as the clean is handled via the observer prop:
 				this.#valueObserver = this.observe(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/is-not-trashed/entity-is-not-trashed.condition-config.ts b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/is-not-trashed/entity-is-not-trashed.condition-config.ts
new file mode 100644
index 0000000000..d15c08ade0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/is-not-trashed/entity-is-not-trashed.condition-config.ts
@@ -0,0 +1,12 @@
+import type { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from './constants.js';
+import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbEntityIsNotTrashedConditionConfig
+	extends UmbConditionConfigBase<typeof UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS> {}
+
+declare global {
+	interface UmbExtensionConditionConfigMap {
+		UmbEntityIsNotTrashedConditionConfig: UmbEntityIsNotTrashedConditionConfig;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/is-trashed/entity-is-trashed.condition-config.ts b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/is-trashed/entity-is-trashed.condition-config.ts
new file mode 100644
index 0000000000..9aeff180b4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/is-trashed/entity-is-trashed.condition-config.ts
@@ -0,0 +1,12 @@
+import type { UMB_ENTITY_IS_TRASHED_CONDITION_ALIAS } from './constants.js';
+import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbEntityIsTrashedConditionConfig
+	extends UmbConditionConfigBase<typeof UMB_ENTITY_IS_TRASHED_CONDITION_ALIAS> {}
+
+declare global {
+	interface UmbExtensionConditionConfigMap {
+		UmbEntityIsTrashedConditionConfig: UmbEntityIsTrashedConditionConfig;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/types.ts
new file mode 100644
index 0000000000..906a89c23d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/conditions/types.ts
@@ -0,0 +1,2 @@
+export type * from './is-not-trashed/entity-is-not-trashed.condition-config.js';
+export type * from './is-trashed/entity-is-trashed.condition-config.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/types.ts
index 3a74c7c86f..358d08e0d3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/recycle-bin/types.ts
@@ -1,3 +1,5 @@
+export type * from './conditions/types.js';
+
 export interface UmbRecycleBinRestoreRequestArgs {
 	unique: string;
 	destination: {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-repository-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-repository-base.ts
index 5f7d695eaa..12a77e5437 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-repository-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-repository-base.ts
@@ -124,7 +124,7 @@ export abstract class UmbDetailRepositoryBase<
 			this.#notificationContext!.peek('positive', notification);
 		}
 
-		return { data: model, error };
+		return { data: updatedData, error };
 	}
 
 	/**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/index.ts
index 7e9361b328..398e7201da 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/index.ts
@@ -1,19 +1,6 @@
-import type { ManifestSectionRoute } from './section-route.extension.js';
-import type { ManifestSectionSidebarApp } from './section-sidebar-app.extension.js';
-import type { ManifestSectionView } from './section-view.extension.js';
-import type { ManifestSection } from './section.extension.js';
-
 export type * from './section-route.extension.js';
 export type * from './section-sidebar-app.extension.js';
 export type * from './section-view.extension.js';
 export type * from './section.extension.js';
 
 export type * from './types.js';
-
-type UmbSectionExtensions = ManifestSection | ManifestSectionRoute | ManifestSectionSidebarApp | ManifestSectionView;
-
-declare global {
-	interface UmbExtensionManifestMap {
-		UmbSectionExtensions: UmbSectionExtensions;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts
index 028e21bc99..e4d5de7f8b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/section/extensions/types.ts
@@ -1,3 +1,16 @@
 export type * from './section-element.interface.js';
 export type * from './section-sidebar-app-element.interface.js';
 export type * from './section-view-element.interface.js';
+
+import type { ManifestSectionRoute } from './section-route.extension.js';
+import type { ManifestSectionSidebarApp } from './section-sidebar-app.extension.js';
+import type { ManifestSectionView } from './section-view.extension.js';
+import type { ManifestSection } from './section.extension.js';
+
+type UmbSectionExtensions = ManifestSection | ManifestSectionRoute | ManifestSectionSidebarApp | ManifestSectionView;
+
+declare global {
+	interface UmbExtensionManifestMap {
+		UmbSectionExtensions: UmbSectionExtensions;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts
index 227749055d..8e52de540b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts
@@ -74,7 +74,9 @@ export class UmbTemporaryFileManager<
 	async #handleUpload(item: UploadableItem) {
 		if (!item.temporaryUnique) throw new Error(`Unique is missing for item ${item}`);
 
-		const { error } = await this.#temporaryFileRepository.upload(item.temporaryUnique, item.file);
+		const { error } = await this.#temporaryFileRepository
+			.upload(item.temporaryUnique, item.file)
+			.catch(() => ({ error: true }));
 
 		let status: TemporaryFileStatus;
 		if (error) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/README.md b/src/Umbraco.Web.UI.Client/src/packages/core/validation/README.md
index d034fb6ca4..b5a79df4e0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/README.md
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/README.md
@@ -15,7 +15,7 @@ A Validation message consist of a type, path and body. This typically looks like
 ```
 {
 	type: "client",
-	path: "$.values[?(@.alias = 'my-property-alias')].value",
+	path: "$.values[?(@.alias == 'my-property-alias')].value",
 	message: "Must contain at least 3 words"
 }
 ```
@@ -61,7 +61,7 @@ Data:
 
 JsonPath:
 ```
-"$.values.[?(@.alias = 'my-alias')].value"
+"$.values.[?(@.alias == 'my-alias')].value"
 ```
 
 Paths are based on JSONPath, using JSON Path Queries when looking up data of an Array. Using Queries enables Paths to not point to specific index, but what makes a entry unique.
@@ -107,7 +107,7 @@ Such conversation could be from this path:
 
 To this path:
 ```
-"$.values.[?(@.alias = 'my-alias')].value"
+"$.values.[?(@.alias == 'my-alias')].value"
 ```
 
 Once this path is converted to use Json Path Queries, the Data can be changed. The concerned entry might get another index. Without that affecting the accuracy of the path.
@@ -135,7 +135,7 @@ The Data Path is a JSON Path defining where the data of this input is located in
 	this.#validationMessageBinder = new UmbBindServerValidationToFormControl(
 		this,
 		this.querySelector('#myInput"),
-		"$.values.[?(@.alias = 'my-input-alias')].value",
+		"$.values.[?(@.alias == 'my-input-alias')].value",
 	);
 ```
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/bind-server-validation-to-form-control.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/bind-server-validation-to-form-control.controller.ts
index 9b2857a841..e2951a2b78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/bind-server-validation-to-form-control.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/bind-server-validation-to-form-control.controller.ts
@@ -1,11 +1,10 @@
 import type { UmbValidationMessage } from '../context/validation-messages.manager.js';
 import { UMB_VALIDATION_CONTEXT } from '../context/validation.context-token.js';
 import type { UmbFormControlMixinInterface } from '../mixins/form-control.mixin.js';
-import { defaultMemoization } from '@umbraco-cms/backoffice/observable-api';
+import { defaultMemoization, simpleHashCode } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
-const ctrlSymbol = Symbol();
 const observeSymbol = Symbol();
 
 /**
@@ -13,6 +12,7 @@ const observeSymbol = Symbol();
  * This controller will add a custom error to the form control if the validation context has any messages for the specified data path.
  */
 export class UmbBindServerValidationToFormControl extends UmbControllerBase {
+
 	#context?: typeof UMB_VALIDATION_CONTEXT.TYPE;
 
 	#control: UmbFormControlMixinInterface<unknown>;
@@ -41,7 +41,7 @@ export class UmbBindServerValidationToFormControl extends UmbControllerBase {
 	}
 
 	constructor(host: UmbControllerHost, formControl: UmbFormControlMixinInterface<unknown>, dataPath: string) {
-		super(host, ctrlSymbol);
+		super(host,'umbFormControlValidation_'+simpleHashCode(dataPath));
 		this.#control = formControl;
 		this.consumeContext(UMB_VALIDATION_CONTEXT, (context) => {
 			this.#context = context;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/validation.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/validation.controller.ts
index 594b65ca45..feaf76897a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/validation.controller.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/controllers/validation.controller.ts
@@ -100,10 +100,10 @@ export class UmbValidationController extends UmbControllerBase implements UmbVal
 	 * @example
 	 * ```ts
 	 * const validationContext = new UmbValidationContext(this);
-	 * validationContext.setDataPath("$.values[?(@.alias='my-property')].value");
+	 * validationContext.setDataPath("$.values[?(@.alias == 'my-property')].value");
 	 * ```
 	 *
-	 * A message with the path: '$.values[?(@.alias='my-property')].value.innerProperty', will for above example become '$.innerProperty' for the local Validation Context.
+	 * A message with the path: '$.values[?(@.alias == 'my-property')].value.innerProperty', will for above example become '$.innerProperty' for the local Validation Context.
 	 */
 	setDataPath(dataPath: string): void {
 		if (this.#baseDataPath) {
@@ -225,8 +225,8 @@ export class UmbValidationController extends UmbControllerBase implements UmbVal
 		this.#validationMode = true;
 
 		const resultsStatus = await Promise.all(this.#validators.map((v) => v.validate())).then(
-			() => Promise.resolve(true),
-			() => Promise.resolve(false),
+			() => true,
+			() => false,
 		);
 
 		if (!this.messages) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-query.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-query.function.ts
index d184f6e205..76fb54ce10 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-query.function.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-query.function.ts
@@ -3,21 +3,21 @@ import type { UmbVariantPropertyValueModel } from '@umbraco-cms/backoffice/varia
 
 /**
  * Validation Data Path Query generator for Property Value.
- * write a JSON-Path filter similar to `?(@.alias = 'myAlias' && @.culture == 'en-us' && @.segment == 'mySegment')`
+ * write a JSON-Path filter similar to `?(@.alias == 'myAlias' && @.culture == 'en-us' && @.segment == 'mySegment')`
  * where culture and segment are optional
- * @param value
- * @returns
+ * @param {UmbVariantPropertyValueModel} value - the object holding value and alias.
+ * @returns {string} - a JSON-path query
  */
 export function UmbDataPathPropertyValueQuery(
 	value: UmbPartialSome<Omit<UmbVariantPropertyValueModel, 'value'>, 'culture' | 'segment'>,
 ): string {
 	// write a array of strings for each property, where alias must be present and culture and segment are optional
-	const filters: Array<string> = [`@.alias = '${value.alias}'`];
+	const filters: Array<string> = [`@.alias == '${value.alias}'`];
 	if (value.culture !== undefined) {
-		filters.push(`@.culture = ${value.culture ? `'${value.culture}'` : 'null'}`);
+		filters.push(`@.culture == ${value.culture ? `'${value.culture}'` : 'null'}`);
 	}
 	if (value.segment !== undefined) {
-		filters.push(`@.segment = ${value.segment ? `'${value.segment}'` : 'null'}`);
+		filters.push(`@.segment == ${value.segment ? `'${value.segment}'` : 'null'}`);
 	}
 	return `?(${filters.join(' && ')})`;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-variant-query.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-variant-query.function.ts
index 25666269cd..175b744992 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-variant-query.function.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-variant-query.function.ts
@@ -12,9 +12,9 @@ export function UmbDataPathVariantQuery(
 	value: UmbPartialSome<Pick<UmbVariantPropertyValueModel, 'culture' | 'segment'>, 'segment'>,
 ): string {
 	// write a array of strings for each property, where culture must be present and segment is optional
-	const filters: Array<string> = [`@.culture = ${value.culture ? `'${value.culture}'` : 'null'}`];
+	const filters: Array<string> = [`@.culture == ${value.culture ? `'${value.culture}'` : 'null'}`];
 	if (value.segment !== undefined) {
-		filters.push(`@.segment = ${value.segment ? `'${value.segment}'` : 'null'}`);
+		filters.push(`@.segment == ${value.segment ? `'${value.segment}'` : 'null'}`);
 	}
 	return `?(${filters.join(' && ')})`;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.function.ts
index c7c1244fc0..40ceb3f9da 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.function.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.function.ts
@@ -1,9 +1,10 @@
 /**
  *
- * @param data
- * @param path
+ * @param {object} data - object to traverse for the value.
+ * @param {string} path - the JSON path to the value that should be found
+ * @returns {unknown} - the found value.
  */
-export function GetValueByJsonPath(data: any, path: string): any {
+export function GetValueByJsonPath(data: unknown, path: string): unknown {
 	// strip $ from the path:
 	const strippedPath = path.startsWith('$.') ? path.slice(2) : path;
 	// get value from the path:
@@ -12,23 +13,9 @@ export function GetValueByJsonPath(data: any, path: string): any {
 
 /**
  *
- * @param path
- */
-export function GetPropertyNameFromPath(path: string): string {
-	// find next '.' or '[' in the path, using regex:
-	const match = path.match(/\.|\[/);
-	// If no match is found, we assume its a single key so lets return the value of the key:
-	if (match === null || match.index === undefined) return path;
-
-	// split the path at the first match:
-	return path.slice(0, match.index);
-}
-
-/**
- *
- * @param data
- * @param path
- * @returns {any}
+ * @param {object} data - object to traverse for the value.
+ * @param {string} path - the JSON path to the value that should be found
+ * @returns {unknown} - the found value.
  */
 function GetNextPropertyValueFromPath(data: any, path: string): any {
 	if (!data) return undefined;
@@ -90,8 +77,8 @@ function GetNextPropertyValueFromPath(data: any, path: string): any {
 }
 
 /**
- * @param filter
- * @returns {Array<(queryFilter: any) => boolean>} - array of methods that returns true if the given items property value matches the value of the query.
+ * @param {string} filter - A JSON Query, limited to filtering features. Do not support other JSON PATH Query features.
+ * @returns {Array<(queryFilter: any) => boolean>} - An array of methods that returns true if the given items property value matches the value of the query.
  */
 function JsFilterFromJsonPathFilter(filter: string): Array<(item: any) => boolean> {
 	// strip ?( and ) from the filter
@@ -101,7 +88,7 @@ function JsFilterFromJsonPathFilter(filter: string): Array<(item: any) => boolea
 	// map each part to a function that returns true if the part is true
 	return parts.map((part) => {
 		// split the part into key and value
-		const [path, equal] = part.split(' = ');
+		const [path, equal] = part.split(' == ');
 		// remove @.
 		const key = path.slice(2);
 		// remove quotes:
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.test.ts
index 3673b28ecd..906463e1e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/json-path.test.ts
@@ -30,7 +30,7 @@ describe('UmbJsonPathFunctions', () => {
 	});
 
 	it('query of first entry in an array', () => {
-		const result = GetValueByJsonPath({ values: [{ id: '123', value: 'test' }] }, "$.values[?(@.id = '123')].value");
+		const result = GetValueByJsonPath({ values: [{ id: '123', value: 'test' }] }, "$.values[?(@.id == '123')].value");
 
 		expect(result).to.eq('test');
 	});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
index a4cb479492..5a0214273d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/vite.config.ts
@@ -23,6 +23,7 @@ export default defineConfig({
 			'debug/index': './debug/index.ts',
 			'entity-action/index': './entity-action/index.ts',
 			'entity-bulk-action/index': './entity-bulk-action/index.ts',
+			'entity-create-option-action/index': './entity-create-option-action/index.ts',
 			'entity/index': './entity/index.ts',
 			'entry-point': 'entry-point.ts',
 			'event/index': './event/index.ts',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts
index 377cc7cf7f..d7647ae806 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-entity-action-menu/workspace-entity-action-menu.element.ts
@@ -1,16 +1,16 @@
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../contexts/index.js';
-import type { UmbWorkspaceUniqueType } from '../../types.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state, nothing, query } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUIPopoverContainerElement } from '@umbraco-cms/backoffice/external/uui';
+import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
 @customElement('umb-workspace-entity-action-menu')
 export class UmbWorkspaceEntityActionMenuElement extends UmbLitElement {
 	private _workspaceContext?: typeof UMB_ENTITY_WORKSPACE_CONTEXT.TYPE;
 
 	@state()
-	private _unique?: UmbWorkspaceUniqueType;
+	private _unique?: UmbEntityUnique;
 
 	@state()
 	private _entityType?: string;
@@ -39,14 +39,14 @@ export class UmbWorkspaceEntityActionMenuElement extends UmbLitElement {
 	#onActionExecuted(event: UmbActionExecutedEvent) {
 		event.stopPropagation();
 
-		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+		// TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		this._popover?.hidePopover();
 	}
 
 	#onPopoverToggle(event: ToggleEvent) {
-		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+		// TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		this._popoverOpen = event.newState === 'open';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
index d7be226d99..f32f98bc68 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts
@@ -307,7 +307,9 @@ export class UmbWorkspaceSplitViewVariantSelectorElement extends UmbLitElement {
 
 	#renderReadOnlyTag(culture?: string | null) {
 		if (!culture) return nothing;
-		return this.#isReadOnly(culture) ? html`<uui-tag look="secondary">Read-only</uui-tag>` : nothing;
+		return this.#isReadOnly(culture)
+			? html`<uui-tag look="secondary">${this.localize.term('general_readOnly')}</uui-tag>`
+			: nothing;
 	}
 
 	#renderSplitViewButton(variant: UmbDocumentVariantOptionModel) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/const.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/const.ts
index 4f333d6e35..00c36c7222 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/const.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/const.ts
@@ -1,2 +1,27 @@
-export const UMB_WORKSPACE_HAS_COLLECTION_CONDITION = 'Umb.Condition.WorkspaceHasCollection';
-export const UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION = 'Umb.Condition.WorkspaceEntityIsNew';
+/**
+ * Workspace has collection condition alias
+ */
+export const UMB_WORKSPACE_HAS_COLLECTION_CONDITION_ALIAS = 'Umb.Condition.WorkspaceHasCollection';
+
+/**
+ * [Deperecated] Workspace has collection condition alias
+ * @deprecated Use {UMB_WORKSPACE_HAS_COLLECTION_CONDITION_ALIAS} instead. This will be removed in Umbraco 16.
+ */
+export const UMB_WORKSPACE_HAS_COLLECTION_CONDITION = UMB_WORKSPACE_HAS_COLLECTION_CONDITION_ALIAS;
+
+/**
+ * Workspace entity is new condition alias
+ */
+export const UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION_ALIAS = 'Umb.Condition.WorkspaceEntityIsNew';
+
+/**
+ * [Deperecated] Workspace entity is new condition alias
+ * @deprecated Use {UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION_ALIAS} instead. This will be removed in Umbraco 16.
+ */
+export const UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION = UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION_ALIAS;
+
+/**
+ * Workspace alias condition alias
+ */
+export const UMB_WORKSPACE_CONDITION_ALIAS = 'Umb.Condition.WorkspaceAlias';
+
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/types.ts
index 68f753151a..e13151df82 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/types.ts
@@ -1,20 +1,21 @@
-import type { UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION, UMB_WORKSPACE_HAS_COLLECTION_CONDITION } from './const.js';
+import type { UMB_WORKSPACE_CONDITION_ALIAS, UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION_ALIAS, UMB_WORKSPACE_HAS_COLLECTION_CONDITION_ALIAS } from './const.js';
 import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
 
-export type WorkspaceAliasConditionConfig = UmbConditionConfigBase<'Umb.Condition.WorkspaceAlias'> & {
-	/**
-	 * Define the workspace that this extension should be available in
-	 * @example
-	 * "Umb.Workspace.Document"
-	 */
-	match?: string;
-	/**
-	 * Define one or more workspaces that this extension should be available in
-	 * @example
-	 * ["Umb.Workspace.Document", "Umb.Workspace.Media"]
-	 */
-	oneOf?: Array<string>;
-};
+export interface WorkspaceAliasConditionConfig
+	extends UmbConditionConfigBase<typeof UMB_WORKSPACE_CONDITION_ALIAS> {
+		/**
+		 * Define the workspace that this extension should be available in
+		 * @example
+		 * "Umb.Workspace.Document"
+		 */
+		match?: string;
+		/**
+		 * Define one or more workspaces that this extension should be available in
+		 * @example
+		 * ["Umb.Workspace.Document", "Umb.Workspace.Media"]
+		 */
+		oneOf?: Array<string>;
+	}
 
 export type WorkspaceContentTypeAliasConditionConfig =
 	UmbConditionConfigBase<'Umb.Condition.WorkspaceContentTypeAlias'> & {
@@ -42,11 +43,11 @@ export type WorkspaceEntityTypeConditionConfig = UmbConditionConfigBase<'Umb.Con
 };
 
 export type WorkspaceHasCollectionConditionConfig = UmbConditionConfigBase<
-	typeof UMB_WORKSPACE_HAS_COLLECTION_CONDITION
+	typeof UMB_WORKSPACE_HAS_COLLECTION_CONDITION_ALIAS
 >;
 
 export interface WorkspaceEntityIsNewConditionConfig
-	extends UmbConditionConfigBase<typeof UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION> {
+	extends UmbConditionConfigBase<typeof UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION_ALIAS> {
 	match: boolean;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-alias.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-alias.condition.ts
index d327ca6a12..7e6c421ebf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-alias.condition.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-alias.condition.ts
@@ -4,6 +4,7 @@ import type { WorkspaceAliasConditionConfig } from './types.js';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from './const.js';
 
 export class UmbWorkspaceAliasCondition
 	extends UmbConditionBase<WorkspaceAliasConditionConfig>
@@ -25,7 +26,7 @@ export class UmbWorkspaceAliasCondition
 			});
 		} else {
 			throw new Error(
-				'Condition `Umb.Condition.WorkspaceAlias` could not be initialized properly. Either "match" or "oneOf" must be defined',
+				`Condition [UMB_WORKSPACE_CONDITION_ALIAS] (${UMB_WORKSPACE_CONDITION_ALIAS}) could not be initialized properly. Either "match" or "oneOf" must be defined.`,
 			);
 		}
 	}
@@ -34,6 +35,6 @@ export class UmbWorkspaceAliasCondition
 export const manifest: UmbExtensionManifest = {
 	type: 'condition',
 	name: 'Workspace Alias Condition',
-	alias: 'Umb.Condition.WorkspaceAlias',
+	alias: UMB_WORKSPACE_CONDITION_ALIAS,
 	api: UmbWorkspaceAliasCondition,
 };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-entity-is-new.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-entity-is-new.condition.ts
index c608988944..c3522278c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-entity-is-new.condition.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-entity-is-new.condition.ts
@@ -1,6 +1,6 @@
 import { UMB_SUBMITTABLE_WORKSPACE_CONTEXT } from '../index.js';
 import type { WorkspaceEntityIsNewConditionConfig } from './types.js';
-import { UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION } from './const.js';
+import { UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION_ALIAS } from './const.js';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -32,6 +32,6 @@ export class UmbWorkspaceEntityIsNewCondition
 export const manifest: UmbExtensionManifest = {
 	type: 'condition',
 	name: 'Workspace Entity Is New Condition',
-	alias: UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION,
+	alias: UMB_WORKSPACE_ENTITY_IS_NEW_CONDITION_ALIAS,
 	api: UmbWorkspaceEntityIsNewCondition,
 };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-has-collection.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-has-collection.condition.ts
index ea06b69196..9709d9c758 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-has-collection.condition.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/conditions/workspace-has-collection.condition.ts
@@ -1,6 +1,6 @@
 import { UMB_CONTENT_COLLECTION_WORKSPACE_CONTEXT } from '../../content/collection/content-collection-workspace.context-token.js';
 import type { WorkspaceHasCollectionConditionConfig } from './types.js';
-import { UMB_WORKSPACE_HAS_COLLECTION_CONDITION } from './const.js';
+import { UMB_WORKSPACE_HAS_COLLECTION_CONDITION_ALIAS } from './const.js';
 import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -29,6 +29,6 @@ export class UmbWorkspaceHasCollectionCondition
 export const manifest: UmbExtensionManifest = {
 	type: 'condition',
 	name: 'Workspace Has Collection Condition',
-	alias: UMB_WORKSPACE_HAS_COLLECTION_CONDITION,
+	alias: UMB_WORKSPACE_HAS_COLLECTION_CONDITION_ALIAS,
 	api: UmbWorkspaceHasCollectionCondition,
 };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/entity-workspace-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/entity-workspace-context.interface.ts
index 46fa7a12c7..022b385e73 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/entity-workspace-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/entity-workspace-context.interface.ts
@@ -1,8 +1,8 @@
 import type { UmbWorkspaceContext } from '../../workspace-context.interface.js';
-import type { UmbWorkspaceUniqueType } from './../../types.js';
+import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 
 export interface UmbEntityWorkspaceContext extends UmbWorkspaceContext {
-	unique: Observable<UmbWorkspaceUniqueType | undefined>;
-	getUnique(): UmbWorkspaceUniqueType | undefined;
+	unique: Observable<UmbEntityUnique | undefined>;
+	getUnique(): UmbEntityUnique | undefined;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/invariant-dataset-workspace-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/invariant-dataset-workspace-context.interface.ts
index faec9d65a3..0ee14795cc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/invariant-dataset-workspace-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/invariant-dataset-workspace-context.interface.ts
@@ -1,8 +1,8 @@
-import type { UmbVariantId } from '../../../variant/variant-id.class.js';
-import type { UmbPropertyDatasetContext } from '../../../property/property-dataset/property-dataset-context.interface.js';
 import type { UmbSubmittableWorkspaceContext } from './submittable-workspace-context.interface.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
+import type { UmbPropertyDatasetContext, UmbPropertyValueData } from '@umbraco-cms/backoffice/property';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 export interface UmbInvariantDatasetWorkspaceContext extends UmbSubmittableWorkspaceContext {
 	// Name:
@@ -10,6 +10,9 @@ export interface UmbInvariantDatasetWorkspaceContext extends UmbSubmittableWorks
 	getName(): string | undefined;
 	setName(name: string): void;
 
+	readonly values: Observable<Array<UmbPropertyValueData> | undefined>;
+	getValues(): Promise<Array<UmbPropertyValueData> | undefined>;
+
 	// Property:
 	propertyValueByAlias<ReturnType = unknown>(alias: string): Promise<Observable<ReturnType | undefined>>;
 	getPropertyValue<ReturnType = unknown>(alias: string): ReturnType;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/property-structure-workspace-context.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/property-structure-workspace-context.interface.ts
index 566299a425..52ee7e88bf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/property-structure-workspace-context.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/contexts/tokens/property-structure-workspace-context.interface.ts
@@ -9,7 +9,7 @@ import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 export interface UmbPropertyStructureWorkspaceContext<
 	ContentTypeModel extends UmbContentTypeModel = UmbContentTypeModel,
 > extends UmbEntityWorkspaceContext {
-	structure: UmbContentTypeStructureManager<ContentTypeModel>;
+	readonly structure: UmbContentTypeStructureManager<ContentTypeModel>;
 	// TODO: propertyStructureById is not used by anything in the codebase, should we remove it? [NL]
 	propertyStructureById(id: string): Promise<Observable<UmbPropertyTypeModel | undefined>>;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/data-manager/workspace-data-manager.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/data-manager/workspace-data-manager.interface.ts
index 568895229a..a07f81ae54 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/data-manager/workspace-data-manager.interface.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/data-manager/workspace-data-manager.interface.ts
@@ -1,8 +1,7 @@
 import type { UmbController } from '@umbraco-cms/backoffice/controller-api';
-import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
 import type { MappingFunction, Observable } from '@umbraco-cms/backoffice/observable-api';
 
-export interface UmbWorkspaceDataManager<ModelType extends UmbEntityModel> extends UmbController {
+export interface UmbWorkspaceDataManager<ModelType> extends UmbController {
 	getPersisted(): ModelType | undefined;
 	getCurrent(): ModelType | undefined;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts
index 4a85b64773..5a3e30e821 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity-detail/entity-detail-workspace-base.ts
@@ -196,6 +196,12 @@ export abstract class UmbEntityDetailWorkspaceContextBase<
 	#onWillNavigate = async (e: CustomEvent) => {
 		const newUrl = e.detail.url;
 
+		/* TODO: temp removal of discard changes in workspace modals.
+		 The modal closes before the discard changes dialog is resolved.*/
+		if (newUrl.includes('/modal/umb-modal-workspace/')) {
+			return true;
+		}
+
 		if (this._checkWillNavigateAway(newUrl) && this._data.getHasUnpersistedChanges()) {
 			e.preventDefault();
 			const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
@@ -244,9 +250,8 @@ export abstract class UmbEntityDetailWorkspaceContextBase<
 	}
 
 	public override destroy(): void {
-		this._data.destroy();
-		this._detailRepository?.destroy();
 		window.removeEventListener('willchangestate', this.#onWillNavigate);
+		this._detailRepository?.destroy();
 		super.destroy();
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity/entity-workspace-data-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity/entity-workspace-data-manager.ts
index baceb7e7c8..add9fe42c9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity/entity-workspace-data-manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/entity/entity-workspace-data-manager.ts
@@ -1,6 +1,5 @@
 import type { UmbWorkspaceDataManager } from '../data-manager/workspace-data-manager.interface.js';
 import { jsonStringComparison, UmbObjectState, type MappingFunction } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 
 /**
@@ -10,7 +9,7 @@ import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
  * @implements {UmbWorkspaceDataManager<ModelType>}
  * @template ModelType
  */
-export class UmbEntityWorkspaceDataManager<ModelType extends UmbEntityModel>
+export class UmbEntityWorkspaceDataManager<ModelType>
 	extends UmbControllerBase
 	implements UmbWorkspaceDataManager<ModelType>
 {
@@ -134,8 +133,11 @@ export class UmbEntityWorkspaceDataManager<ModelType extends UmbEntityModel>
 	}
 
 	override destroy() {
-		this._persisted.destroy();
-		this._current.destroy();
+		this._persisted?.destroy();
+		this._current?.destroy();
+
+		(this._persisted as any) = undefined;
+		(this._current as any) = undefined;
 		super.destroy();
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts
index a568fc8775..32a945865d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/index.ts
@@ -1,4 +1,5 @@
 export * from './components/index.js';
+export * from './conditions/const.js';
 export * from './contexts/index.js';
 export * from './controllers/index.js';
 export * from './data-manager/index.js';
@@ -7,10 +8,10 @@ export * from './entity/index.js';
 export * from './modals/index.js';
 export * from './paths.js';
 export * from './submittable/index.js';
+export * from './utils/object-to-property-value-array.function.js';
 export * from './workspace-context.interface.js';
 export * from './workspace-property-dataset/index.js';
 export * from './workspace.context-token.js';
 export * from './workspace.element.js';
-export * from './workspace.element.js';
 export type * from './conditions/index.js';
 export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/types.ts
index 93c0e81b21..eae653cf08 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/types.ts
@@ -1,2 +1,7 @@
+import type { UmbEntityUnique } from '@umbraco-cms/backoffice/entity';
+
 export type * from './extensions/types.js';
-export type UmbWorkspaceUniqueType = string | null;
+/**
+ * @deprecated Use `UmbEntityUnique`instead.
+ */
+export type UmbWorkspaceUniqueType = UmbEntityUnique;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/utils/object-to-property-value-array.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/utils/object-to-property-value-array.function.ts
new file mode 100644
index 0000000000..67b72045bb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/utils/object-to-property-value-array.function.ts
@@ -0,0 +1,14 @@
+import type { UmbPropertyValueData } from '../../property/types.js';
+
+/**
+ * @function UmbObjectToPropertyValueArray
+ * @param {object} data - an object with properties to be converted.
+ * @returns {Array<UmbPropertyValueData> | undefined} - and array of property values or undefined
+ */
+export function umbObjectToPropertyValueArray(data: object | undefined): Array<UmbPropertyValueData> | undefined {
+	if (!data) return;
+	return Object.keys(data).map((key) => ({
+		alias: key,
+		value: (data as any)[key],
+	}));
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts
index 8039e78632..6a5a35038d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-property-dataset/invariant-workspace-property-dataset-context.ts
@@ -1,10 +1,14 @@
-import type { UmbPropertyDatasetContext, UmbNameablePropertyDatasetContext } from '@umbraco-cms/backoffice/property';
+import type {
+	UmbPropertyDatasetContext,
+	UmbNameablePropertyDatasetContext,
+	UmbPropertyValueData,
+} from '@umbraco-cms/backoffice/property';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbInvariantDatasetWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
-import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbBooleanState, type Observable } from '@umbraco-cms/backoffice/observable-api';
 
 /**
  * A property dataset context that hooks directly into the workspace context.
@@ -47,6 +51,13 @@ export class UmbInvariantWorkspacePropertyDatasetContext<
 		this.name = this.#workspace.name;
 	}
 
+	get properties(): Observable<Array<UmbPropertyValueData> | undefined> {
+		return this.#workspace.values;
+	}
+	getProperties(): Promise<Array<UmbPropertyValueData> | undefined> {
+		return this.#workspace.getValues();
+	}
+
 	/**
 	 * @function propertyValueByAlias
 	 * @param {string} propertyAlias
@@ -58,9 +69,9 @@ export class UmbInvariantWorkspacePropertyDatasetContext<
 	}
 
 	/**
-	 * TODO: Write proper JSDocs here.
-	 * @param propertyAlias
-	 * @param value
+	 * @param {string} propertyAlias - The alias of the property
+	 * @param {unknown} value - The value to be set for this property
+	 * @returns {Promise<void>} - an promise which resolves once the value has been set.
 	 */
 	async setPropertyValue(propertyAlias: string, value: unknown) {
 		return this.#workspace.setPropertyValue(propertyAlias, value);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/index.ts
index 5b2c179b14..c516f24d51 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/index.ts
@@ -9,4 +9,4 @@ export * from './paths.js';
 
 export { UmbMoveDataTypeRepository, UMB_MOVE_DATA_TYPE_REPOSITORY_ALIAS } from './entity-actions/move-to/index.js';
 
-export type { UmbDataTypeDetailModel } from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts
index 7fc04fe562..bcd1dda1ba 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/menu/manifests.ts
@@ -1,3 +1,5 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'menuItem',
@@ -19,7 +21,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./data-type-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.DataType',
 			},
 		],
@@ -31,7 +33,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Data Type Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.DataType',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
index aaf4b0dfdf..b266122c4f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
@@ -169,6 +169,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
 				grid-template-rows: 40px 1fr;
 				height: 100%;
 				width: 100%;
+				word-break: break-word;
 			}
 			.icon {
 				font-size: 2em;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
index d42bd3f948..44daf00885 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
@@ -448,6 +448,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 				grid-template-rows: 40px 1fr;
 				height: 100%;
 				width: 100%;
+				word-break: break-word;
 			}
 
 			#item-grid .item .icon {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/detail/data-type-detail.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/detail/data-type-detail.server.data-source.ts
index 9e31fd975a..3eb91ed61f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/detail/data-type-detail.server.data-source.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/detail/data-type-detail.server.data-source.ts
@@ -1,4 +1,4 @@
-import type { UmbDataTypeDetailModel, UmbDataTypePropertyModel } from '../../types.js';
+import type { UmbDataTypeDetailModel, UmbDataTypePropertyValueModel } from '../../types.js';
 import { UMB_DATA_TYPE_ENTITY_TYPE } from '../../entity.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import type { UmbDetailDataSource } from '@umbraco-cms/backoffice/repository';
@@ -70,7 +70,7 @@ export class UmbDataTypeServerDataSource implements UmbDetailDataSource<UmbDataT
 			name: data.name,
 			editorAlias: data.editorAlias,
 			editorUiAlias: data.editorUiAlias || null,
-			values: data.values as Array<UmbDataTypePropertyModel>,
+			values: data.values as Array<UmbDataTypePropertyValueModel>,
 		};
 
 		return { data: dataType };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/tree/folder/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/tree/folder/workspace/manifests.ts
index e1b8108bc0..78447f41ce 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/tree/folder/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/tree/folder/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DATA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
 import { UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DATA_TYPE_FOLDER_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/types.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/types.ts
index 366f7823f3..53c18c6e45 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/types.ts
@@ -6,10 +6,10 @@ export interface UmbDataTypeDetailModel {
 	name: string;
 	editorAlias: string | undefined;
 	editorUiAlias: string | null;
-	values: Array<UmbDataTypePropertyModel>;
+	values: Array<UmbDataTypePropertyValueModel>;
 }
 
-export interface UmbDataTypePropertyModel {
+export interface UmbDataTypePropertyValueModel<ValueType = unknown> {
 	alias: string;
-	value: any;
+	value: ValueType;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts
index d2c01bc008..b29b1beac2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace.context.ts
@@ -1,4 +1,4 @@
-import type { UmbDataTypeDetailModel, UmbDataTypePropertyModel } from '../types.js';
+import type { UmbDataTypeDetailModel, UmbDataTypePropertyValueModel } from '../types.js';
 import { type UmbDataTypeDetailRepository, UMB_DATA_TYPE_DETAIL_REPOSITORY_ALIAS } from '../repository/index.js';
 import { UMB_DATA_TYPE_ENTITY_TYPE } from '../entity.js';
 import { UmbDataTypeWorkspaceEditorElement } from './data-type-workspace-editor.element.js';
@@ -49,6 +49,11 @@ export class UmbDataTypeWorkspaceContext
 	readonly propertyEditorUiAlias = this._data.createObservablePartOfCurrent((data) => data?.editorUiAlias);
 	readonly propertyEditorSchemaAlias = this._data.createObservablePartOfCurrent((data) => data?.editorAlias);
 
+	readonly values = this._data.createObservablePartOfCurrent((data) => data?.values);
+	async getValues() {
+		return this._data.getCurrent()?.values;
+	}
+
 	#properties = new UmbArrayState<PropertyEditorSettingsProperty>([], (x) => x.alias).sortBy(
 		(a, b) => (a.weight || 0) - (b.weight || 0),
 	);
@@ -242,7 +247,7 @@ export class UmbDataTypeWorkspaceContext
 		this.#settingsDefaultData = [
 			...this.#propertyEditorSchemaSettingsDefaultData,
 			...this.#propertyEditorUISettingsDefaultData,
-		] satisfies Array<UmbDataTypePropertyModel>;
+		] satisfies Array<UmbDataTypePropertyValueModel>;
 		// We check for satisfied type, because we will be directly transferring them to become value. Future note, if they are not satisfied, we need to transfer alias and value. [NL]
 
 		this._data.updatePersisted({ values: this.#settingsDefaultData });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/manifests.ts
index 06c4007e1e..c83c6cb153 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DATA_TYPE_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -25,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DATA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -43,7 +44,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DATA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -61,7 +62,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DATA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts
index d4372f22ec..f6eac66c42 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts
@@ -1,51 +1,18 @@
-import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
-import {
-	UMB_COLLECTION_CONTEXT,
-	UmbCollectionDefaultElement,
-	type UmbDefaultCollectionContext,
-} from '@umbraco-cms/backoffice/collection';
+import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 
 @customElement('umb-dictionary-collection')
 export class UmbDictionaryCollectionElement extends UmbCollectionDefaultElement {
-	#collectionContext?: UmbDefaultCollectionContext;
-	#inputTimer?: NodeJS.Timeout;
-	#inputTimerAmount = 500;
-
-	constructor() {
-		super();
-		this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
-			this.#collectionContext = context;
-		});
-	}
-
-	#updateSearch(event: InputEvent) {
-		const target = event.target as HTMLInputElement;
-		const filter = target.value || '';
-		clearTimeout(this.#inputTimer);
-		this.#inputTimer = setTimeout(() => this.#collectionContext?.setFilter({ filter }), this.#inputTimerAmount);
-	}
-
 	protected override renderToolbar() {
-		return html`<umb-collection-toolbar slot="header">${this.#renderSearch()}</umb-collection-toolbar>`;
+		return html`
+			<umb-collection-toolbar slot="header">
+				<umb-collection-filter-field></umb-collection-filter-field>
+			</umb-collection-toolbar>
+		`;
 	}
-
-	#renderSearch() {
-		return html`<uui-input
-			id="input-search"
-			@input=${this.#updateSearch}
-			placeholder=${this.localize.term('placeholders_search')}></uui-input>`;
-	}
-
-	static override styles = [
-		css`
-			#input-search {
-				width: 100%;
-			}
-		`,
-	];
 }
 
-export default UmbDictionaryCollectionElement;
+export { UmbDictionaryCollectionElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/index.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/index.ts
index 1001b2fa0f..ea8abf649f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/index.ts
@@ -1,2 +1,4 @@
 export { UmbDictionaryCollectionRepository } from './repository/index.js';
 export { UMB_DICTIONARY_COLLECTION_ALIAS } from './constants.js';
+
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts
index 447eb8727b..f3a87bd76a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/menu-item/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DICTIONARY_ENTITY_TYPE } from '../entity.js';
 import { UMB_DICTIONARY_TREE_ALIAS } from '../tree/index.js';
 import { UMB_TRANSLATION_MENU_ALIAS } from '@umbraco-cms/backoffice/translation';
@@ -25,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./dictionary-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Dictionary',
 			},
 		],
@@ -37,7 +38,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Data Type Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Dictionary',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/tree/index.ts
index 0940ddc29a..4f23f5ab53 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/tree/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/tree/index.ts
@@ -6,4 +6,5 @@ export {
 } from './constants.js';
 export { UMB_DICTIONARY_TREE_STORE_CONTEXT } from './dictionary-tree.store.js';
 export { type UmbDictionaryTreeStore } from './dictionary-tree.store.js';
-export * from './types.js';
+
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/workspace/manifests.ts
index a2618139f2..a78e4a8ef3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DICTIONARY_ENTITY_TYPE } from '../entity.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DICTIONARY_WORKSPACE_ALIAS,
 			},
 		],
@@ -46,7 +47,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DICTIONARY_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/tree/folder/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/tree/folder/workspace/manifests.ts
index af23fb61dd..52f6f4e34f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/tree/folder/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/tree/folder/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DOCUMENT_BLUEPRINT_FOLDER_ENTITY_TYPE } from '../../../entity.js';
 import { UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_BLUEPRINT_FOLDER_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/types.ts
index 0c93761201..5b8d1ac93e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/types.ts
@@ -2,7 +2,7 @@ import type { UmbDocumentBlueprintEntityType } from './entity.js';
 import type { UmbEntityVariantModel, UmbEntityVariantOptionModel } from '@umbraco-cms/backoffice/variant';
 import type { UmbReferenceByUnique } from '@umbraco-cms/backoffice/models';
 import { DocumentVariantStateModel as UmbDocumentBlueprintVariantState } from '@umbraco-cms/backoffice/external/backend-api';
-import type { UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbElementValueModel } from '@umbraco-cms/backoffice/content';
 export { UmbDocumentBlueprintVariantState };
 
 export interface UmbDocumentBlueprintDetailModel {
@@ -27,7 +27,7 @@ export interface UmbDocumentBlueprintUrlInfoModel {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface UmbDocumentBlueprintValueModel<ValueType = unknown> extends UmbContentValueModel<ValueType> {}
+export interface UmbDocumentBlueprintValueModel<ValueType = unknown> extends UmbElementValueModel<ValueType> {}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface UmbDocumentBlueprintVariantOptionModel
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts
index a3959a1686..c3b5b3264f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace.context.ts
@@ -84,6 +84,11 @@ export class UmbDocumentBlueprintWorkspaceContext
 
 	readonly variants = this.#data.createObservablePartOfCurrent((data) => data?.variants || []);
 
+	readonly values = this.#data.createObservablePartOfCurrent((data) => data?.values);
+	getValues() {
+		return this.#data.getCurrent()?.values;
+	}
+
 	//readonly urls = this.#data.current.asObservablePart((data) => data?.urls || []);
 
 	readonly structure = new UmbContentTypeStructureManager(this, new UmbDocumentTypeDetailRepository(this));
@@ -465,7 +470,6 @@ export class UmbDocumentBlueprintWorkspaceContext
 	}
 
 	public override destroy(): void {
-		this.#data.destroy();
 		this.structure.destroy();
 		this.#languageRepository.destroy();
 		super.destroy();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts
index f7f68a32bf..ba2884d0e4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DOCUMENT_BLUEPRINT_ENTITY_TYPE } from '../entity.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_BLUEPRINT_WORKSPACE_ALIAS,
 			},
 		],
@@ -47,7 +48,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_BLUEPRINT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts
index 2e98f9edd5..73d7506420 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DOCUMENT_TYPE_TREE_ALIAS } from '../tree/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -20,7 +21,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./document-type-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.DocumentType',
 			},
 		],
@@ -32,7 +33,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Document Type Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.DocumentType',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/folder/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/folder/workspace/manifests.ts
index 52c211ec2f..d0a5f120c4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/folder/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/tree/folder/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DOCUMENT_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
 import { UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_TYPE_FOLDER_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/manifests.ts
index f4230143a2..028faf033a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DOCUMENT_TYPE_COMPOSITION_REPOSITORY_ALIAS } from '../repository/composition/index.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -45,7 +46,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -63,7 +64,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -81,7 +82,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -99,7 +100,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/index.ts
index b8d46eff26..8dd29326e4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/audit-log/index.ts
@@ -1 +1,2 @@
 export { UmbDocumentAuditLogRepository } from './repository/index.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts
index e65071e87e..ed675276b4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection-toolbar.element.ts
@@ -3,6 +3,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
 import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 
+/** @deprecated This component is no longer used in core; to be removed in Umbraco 17. */
 @customElement('umb-document-collection-toolbar')
 export class UmbDocumentCollectionToolbarElement extends UmbLitElement {
 	#collectionContext?: UmbDefaultCollectionContext;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts
index 1befc2e76f..f1bf71c7a6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.element.ts
@@ -1,17 +1,22 @@
-import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 
-import './document-collection-toolbar.element.js';
-
 @customElement('umb-document-collection')
 export class UmbDocumentCollectionElement extends UmbCollectionDefaultElement {
 	protected override renderToolbar() {
-		return html`<umb-document-collection-toolbar slot="header"></umb-document-collection-toolbar>`;
+		return html`
+			<umb-collection-toolbar slot="header">
+				<umb-collection-filter-field></umb-collection-filter-field>
+			</umb-collection-toolbar>
+		`;
 	}
 }
 
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 17. */
 export default UmbDocumentCollectionElement;
 
+export { UmbDocumentCollectionElement as element };
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-document-collection': UmbDocumentCollectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
index 7ade0434a2..05015e1cf8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -4,10 +4,12 @@ import {
 	css,
 	customElement,
 	html,
+	ifDefined,
 	nothing,
 	property,
 	repeat,
 	state,
+	when,
 } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -201,12 +203,14 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 		if (this.readonly && this.selection.length > 0) {
 			return nothing;
 		} else {
-			return html` <uui-button
-				id="btn-add"
-				look="placeholder"
-				@click=${this.#openPicker}
-				label=${this.localize.term('general_choose')}
-				?disabled=${this.readonly}></uui-button>`;
+			return html`
+				<uui-button
+					id="btn-add"
+					look="placeholder"
+					@click=${this.#openPicker}
+					label=${this.localize.term('general_choose')}
+					?disabled=${this.readonly}></uui-button>
+			`;
 		}
 	}
 
@@ -225,16 +229,26 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 
 	#renderItem(item: UmbDocumentItemModel) {
 		if (!item.unique) return;
+		const href = !this.readonly && this.showOpenButton ? `${this._editDocumentPath}edit/${item.unique}` : undefined;
 		return html`
 			<uui-ref-node
-				name=${item.name}
 				id=${item.unique}
 				class=${classMap({ draft: this.#isDraft(item) })}
-				?readonly=${this.readonly}>
+				name=${item.name}
+				href=${ifDefined(href)}
+				?readonly=${this.readonly}
+				?standalone=${this.max === 1}>
 				${this.#renderIcon(item)} ${this.#renderIsTrashed(item)}
-				<uui-action-bar slot="actions">
-					${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)}
-				</uui-action-bar>
+				${when(
+					!this.readonly,
+					() => html`
+						<uui-action-bar slot="actions">
+							<uui-button
+								label=${this.localize.term('general_remove')}
+								@click=${() => this.#onRemove(item)}></uui-button>
+						</uui-action-bar>
+					`,
+				)}
 			</uui-ref-node>
 		`;
 	}
@@ -249,25 +263,6 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 		return html`<uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag>`;
 	}
 
-	#renderRemoveButton(item: UmbDocumentItemModel) {
-		if (this.readonly) return nothing;
-		return html`
-			<uui-button @click=${() => this.#onRemove(item)} label=${this.localize.term('general_remove')}></uui-button>
-		`;
-	}
-
-	#renderOpenButton(item: UmbDocumentItemModel) {
-		if (this.readonly) return nothing;
-		if (!this.showOpenButton) return nothing;
-		return html`
-			<uui-button
-				href="${this._editDocumentPath}edit/${item.unique}"
-				label="${this.localize.term('general_open')} ${item.name}">
-				${this.localize.term('general_open')}
-			</uui-button>
-		`;
-	}
-
 	static override styles = [
 		css`
 			#btn-add {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts
index a0eca87a0e..b31709a246 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts
@@ -176,7 +176,8 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
 									.alias=${this.localize.string(documentType.description ?? '')}
 									select-only
 									selectable
-									@selected=${() => this.#onSelectDocumentType(documentType.unique)}>
+									@selected=${() => this.#onSelectDocumentType(documentType.unique)}
+									@open=${() => this.#onSelectDocumentType(documentType.unique)}>
 									<umb-icon slot="icon" name=${documentType.icon || 'icon-circle-dotted'}></umb-icon>
 								</uui-ref-node-document-type>
 							`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/unpublish.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/unpublish.action.ts
index ff9d645a17..46d3471ea3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/unpublish.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/unpublish.action.ts
@@ -77,15 +77,17 @@ export class UmbUnpublishDocumentEntityAction extends UmbEntityActionBase<never>
 
 		if (variantIds.length) {
 			const publishingRepository = new UmbDocumentPublishingRepository(this._host);
-			await publishingRepository.unpublish(this.args.unique, variantIds);
+			const { error } = await publishingRepository.unpublish(this.args.unique, variantIds);
 
-			const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-			const event = new UmbRequestReloadStructureForEntityEvent({
-				unique: this.args.unique,
-				entityType: this.args.entityType,
-			});
+			if (!error) {
+				const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+				const event = new UmbRequestReloadStructureForEntityEvent({
+					unique: this.args.unique,
+					entityType: this.args.entityType,
+				});
 
-			actionEventContext.dispatchEvent(event);
+				actionEventContext.dispatchEvent(event);
+			}
 		}
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts
index 1d1145d447..a842fa686c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DOCUMENT_TREE_ALIAS } from '../tree/index.js';
 
 export const UMB_CONTENT_MENU_ALIAS = 'Umb.Menu.Content';
@@ -28,7 +29,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./document-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
@@ -40,7 +41,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Document Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/index.ts
new file mode 100644
index 0000000000..6585fe3792
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-dataset-context/index.ts
@@ -0,0 +1 @@
+export * from './document-property-dataset-context.token.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/repository/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/recycle-bin/repository/types.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/detail/document-detail.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/detail/document-detail.server.data-source.ts
index 46708951d5..21eb2be780 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/detail/document-detail.server.data-source.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/detail/document-detail.server.data-source.ts
@@ -42,6 +42,7 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 			documentType: {
 				unique: '',
 				collection: null,
+				icon: null,
 			},
 			isTrashed: false,
 			values: [],
@@ -120,6 +121,7 @@ export class UmbDocumentServerDataSource implements UmbDetailDataSource<UmbDocum
 			documentType: {
 				unique: data.documentType.id,
 				collection: data.documentType.collection ? { unique: data.documentType.collection.id } : null,
+				icon: data.documentType.icon,
 			},
 			isTrashed: data.isTrashed,
 		};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/index.ts
index f80023cfbe..1a4cea0484 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/index.ts
@@ -1,6 +1,7 @@
 export { UmbDocumentDetailRepository, UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS } from './detail/index.js';
 export { UmbDocumentItemRepository, UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from './item/index.js';
 export { UmbDocumentPublishingRepository, UMB_DOCUMENT_PUBLISHING_REPOSITORY_ALIAS } from './publishing/index.js';
+export { UmbDocumentUrlRepository, UMB_DOCUMENT_URL_REPOSITORY_ALIAS } from './url/index.js';
 export { UmbDocumentPreviewRepository } from './preview/index.js';
 
-export type { UmbDocumentItemModel } from './item/types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/manifests.ts
index 71c01115e5..c7ab4b7fdc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/manifests.ts
@@ -1,5 +1,11 @@
 import { manifests as detailManifests } from './detail/manifests.js';
 import { manifests as itemManifests } from './item/manifests.js';
 import { manifests as publishingManifests } from './publishing/manifests.js';
+import { manifests as urlManifests } from './url/manifests.js';
 
-export const manifests: Array<UmbExtensionManifest> = [...detailManifests, ...itemManifests, ...publishingManifests];
+export const manifests: Array<UmbExtensionManifest> = [
+	...detailManifests,
+	...itemManifests,
+	...publishingManifests,
+	...urlManifests,
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/types.ts
new file mode 100644
index 0000000000..204e345ff9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/types.ts
@@ -0,0 +1 @@
+export type { UmbDocumentItemModel } from './item/types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/constants.ts
new file mode 100644
index 0000000000..ba77e1ff72
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/constants.ts
@@ -0,0 +1,2 @@
+export const UMB_DOCUMENT_URL_REPOSITORY_ALIAS = 'Umb.Repository.Document.Url';
+export const UMB_DOCUMENT_URL_STORE_ALIAS = 'Umb.Store.Document.Url';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.repository.ts
new file mode 100644
index 0000000000..6b65fe3545
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.repository.ts
@@ -0,0 +1,13 @@
+import type { UmbDocumentUrlsModel } from './types.js';
+import { UMB_DOCUMENT_URL_STORE_CONTEXT } from './document-url.store.context-token.js';
+import { UmbDocumentUrlServerDataSource } from './document-url.server.data-source.js';
+import { UmbItemRepositoryBase } from '@umbraco-cms/backoffice/repository';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbDocumentUrlRepository extends UmbItemRepositoryBase<UmbDocumentUrlsModel> {
+	constructor(host: UmbControllerHost) {
+		super(host, UmbDocumentUrlServerDataSource, UMB_DOCUMENT_URL_STORE_CONTEXT);
+	}
+}
+
+export { UmbDocumentUrlRepository as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.server.data-source.ts
new file mode 100644
index 0000000000..2993e37a40
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.server.data-source.ts
@@ -0,0 +1,29 @@
+import type { UmbDocumentUrlsModel } from './types.js';
+import { DocumentService } from '@umbraco-cms/backoffice/external/backend-api';
+import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository';
+import type { DocumentUrlInfoResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+/**
+ * A server data source for Document URLs
+ * @class UmbDocumentUrlServerDataSource
+ * @implements {DocumentTreeDataSource}
+ */
+export class UmbDocumentUrlServerDataSource extends UmbItemServerDataSourceBase<
+	DocumentUrlInfoResponseModel,
+	UmbDocumentUrlsModel
+> {
+	/**
+	 * Creates an instance of UmbDocumentUrlServerDataSource.
+	 * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+	 * @memberof UmbDocumentUrlServerDataSource
+	 */
+	constructor(host: UmbControllerHost) {
+		super(host, { getItems, mapper });
+	}
+}
+
+/* eslint-disable local-rules/no-direct-api-import */
+const getItems = (uniques: Array<string>) => DocumentService.getDocumentUrls({ id: uniques });
+
+const mapper = (item: DocumentUrlInfoResponseModel): UmbDocumentUrlsModel => ({ unique: item.id, urls: item.urlInfos });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.context-token.ts
new file mode 100644
index 0000000000..f2ac89657f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.context-token.ts
@@ -0,0 +1,4 @@
+import type UmbDocumentUrlStore from './document-url.store.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_DOCUMENT_URL_STORE_CONTEXT = new UmbContextToken<UmbDocumentUrlStore>('UmbDocumentUrlStore');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.ts
new file mode 100644
index 0000000000..3f5a9f514e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/document-url.store.ts
@@ -0,0 +1,23 @@
+import type { UmbDocumentDetailModel } from '../../types.js';
+import { UMB_DOCUMENT_URL_STORE_CONTEXT } from './document-url.store.context-token.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbItemStoreBase } from '@umbraco-cms/backoffice/store';
+
+/**
+ * @class UmbDocumentUrlStore
+ * @augments {UmbStoreBase}
+ * @description - Data Store for Document URLs
+ */
+
+export class UmbDocumentUrlStore extends UmbItemStoreBase<UmbDocumentDetailModel> {
+	/**
+	 * Creates an instance of UmbDocumentUrlStore.
+	 * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+	 * @memberof UmbDocumentUrlStore
+	 */
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_DOCUMENT_URL_STORE_CONTEXT.toString());
+	}
+}
+
+export default UmbDocumentUrlStore;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/index.ts
new file mode 100644
index 0000000000..f5bc60dacd
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/index.ts
@@ -0,0 +1,2 @@
+export { UmbDocumentUrlRepository } from './document-url.repository.js';
+export { UMB_DOCUMENT_URL_REPOSITORY_ALIAS } from './constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/manifests.ts
new file mode 100644
index 0000000000..d4545015b2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/manifests.ts
@@ -0,0 +1,18 @@
+import { UMB_DOCUMENT_URL_REPOSITORY_ALIAS, UMB_DOCUMENT_URL_STORE_ALIAS } from './constants.js';
+import type { ManifestItemStore, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+
+const urlRepository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_DOCUMENT_URL_REPOSITORY_ALIAS,
+	name: 'Document Url Repository',
+	api: () => import('./document-url.repository.js'),
+};
+
+const urlStore: ManifestItemStore = {
+	type: 'itemStore',
+	alias: UMB_DOCUMENT_URL_STORE_ALIAS,
+	name: 'Document Url Store',
+	api: () => import('./document-url.store.js'),
+};
+
+export const manifests = [urlRepository, urlStore];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/types.ts
new file mode 100644
index 0000000000..7291179f31
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/repository/url/types.ts
@@ -0,0 +1,9 @@
+export interface UmbDocumentUrlsModel {
+	unique: string;
+	urls: Array<UmbDocumentUrlModel>;
+}
+
+export interface UmbDocumentUrlModel {
+	culture?: string | null;
+	url?: string;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/rollback/entity-action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/rollback/entity-action/manifests.ts
index 88dcf25c5c..2bed9b0321 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/rollback/entity-action/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/rollback/entity-action/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_USER_PERMISSION_DOCUMENT_ROLLBACK } from '../../user-permissions/index.js';
 import { UMB_DOCUMENT_WORKSPACE_ALIAS } from '../../workspace/index.js';
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 			/* Currently the rollback is tightly coupled to the workspace contexts so we only allow it to show up
 			 In the document workspace. */
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/index.ts
index db48eed3f7..628bc2c8da 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/index.ts
@@ -6,4 +6,4 @@ export {
 } from './manifests.js';
 export { UMB_DOCUMENT_TREE_STORE_CONTEXT } from './document-tree.store.context-token.js';
 export type { UmbDocumentTreeStore } from './document-tree.store.js';
-export * from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
index 3c5c94c536..634f3d8bad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
@@ -1,4 +1,5 @@
 import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
+import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { css, html, nothing, customElement, state, classMap } from '@umbraco-cms/backoffice/external/lit';
 import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
 import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
@@ -31,7 +32,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 	#observeAppCulture() {
 		this.observe(this.#appLanguageContext!.appLanguageCulture, (value) => {
 			this._currentCulture = value;
-			this._variant = this.#getVariant(value);
+			this._variant = this.#findVariant(value);
 		});
 	}
 
@@ -41,7 +42,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 		});
 	}
 
-	#getVariant(culture: string | undefined) {
+	#findVariant(culture: string | undefined) {
 		return this.item?.variants.find((x) => x.culture === culture);
 	}
 
@@ -56,16 +57,22 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 			return this._item?.variants[0].name;
 		}
 
-		const fallbackName = this.#getVariant(this._defaultCulture)?.name ?? this._item?.variants[0].name ?? 'Unknown';
+		// ensure we always have the correct variant data
+		this._variant = this.#findVariant(this._currentCulture);
+
+		const fallbackName = this.#findVariant(this._defaultCulture)?.name ?? this._item?.variants[0].name ?? 'Unknown';
 		return this._variant?.name ?? `(${fallbackName})`;
 	}
 
 	#isDraft() {
 		if (this.#isInvariant()) {
-			return this._item?.variants[0].state === 'Draft';
+			return this._item?.variants[0].state === DocumentVariantStateModel.DRAFT;
 		}
 
-		return this._variant?.state === 'Draft';
+		// ensure we always have the correct variant data
+		this._variant = this.#findVariant(this._currentCulture);
+
+		return this._variant?.state === DocumentVariantStateModel.DRAFT;
 	}
 
 	override renderIconContainer() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts
index 39c63629e1..8f27a81993 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/types.ts
@@ -6,13 +6,21 @@ import type {
 } from '@umbraco-cms/backoffice/variant';
 import type { UmbReferenceByUnique } from '@umbraco-cms/backoffice/models';
 import { DocumentVariantStateModel as UmbDocumentVariantState } from '@umbraco-cms/backoffice/external/backend-api';
-import type { UmbContentDetailModel, UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbContentDetailModel, UmbElementValueModel } from '@umbraco-cms/backoffice/content';
 export { UmbDocumentVariantState };
 
+export type * from './audit-log/types.js';
+export type * from './collection/types.js';
+export type * from './modals/types.js';
+export type * from './repository/types.js';
+export type * from './tree/types.js';
+export type * from './user-permissions/types.js';
+
 export interface UmbDocumentDetailModel extends UmbContentDetailModel {
 	documentType: {
 		unique: string;
 		collection: UmbReferenceByUnique | null;
+		icon?: string | null;
 	};
 	entityType: UmbDocumentEntityType;
 	isTrashed: boolean;
@@ -34,7 +42,7 @@ export interface UmbDocumentUrlInfoModel {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface UmbDocumentValueModel<ValueType = unknown> extends UmbContentValueModel<ValueType> {}
+export interface UmbDocumentValueModel<ValueType = unknown> extends UmbElementValueModel<ValueType> {}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface UmbDocumentVariantOptionModel extends UmbEntityVariantOptionModel<UmbDocumentVariantModel> {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/index.ts
index 4991633288..3ed3c5c183 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/user-permissions/index.ts
@@ -1,2 +1,3 @@
 export * from './repository/index.js';
 export * from './constants.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts
index 9766f8261f..4c21724833 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts
@@ -75,6 +75,7 @@ import { UmbIsTrashedEntityContext } from '@umbraco-cms/backoffice/recycle-bin';
 import { UmbReadOnlyVariantStateManager } from '@umbraco-cms/backoffice/utils';
 import { UmbDataTypeItemRepositoryManager } from '@umbraco-cms/backoffice/data-type';
 import type { UmbRepositoryResponse } from '@umbraco-cms/backoffice/repository';
+import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 
 type EntityModel = UmbDocumentDetailModel;
 type EntityTypeModel = UmbDocumentTypeDetailModel;
@@ -120,6 +121,10 @@ export class UmbDocumentWorkspaceContext
 	readonly unique = this.#data.createObservablePartOfCurrent((data) => data?.unique);
 	readonly entityType = this.#data.createObservablePartOfCurrent((data) => data?.entityType);
 	readonly isTrashed = this.#data.createObservablePartOfCurrent((data) => data?.isTrashed);
+	readonly values = this.#data.createObservablePartOfCurrent((data) => data?.values);
+	getValues() {
+		return this.#data.getCurrent()?.values;
+	}
 
 	readonly contentTypeUnique = this.#data.createObservablePartOfCurrent((data) => data?.documentType.unique);
 	readonly contentTypeHasCollection = this.#data.createObservablePartOfCurrent(
@@ -287,6 +292,7 @@ export class UmbDocumentWorkspaceContext
 	override resetState() {
 		super.resetState();
 		this.#data.clear();
+		this.removeUmbControllerByAlias(UmbWorkspaceIsNewRedirectControllerAlias);
 	}
 
 	async loadLanguages() {
@@ -298,6 +304,7 @@ export class UmbDocumentWorkspaceContext
 	async load(unique: string) {
 		this.resetState();
 		this.#getDataPromise = this.repository.requestByUnique(unique);
+
 		type GetDataType = Awaited<ReturnType<UmbDocumentDetailRepository['requestByUnique']>>;
 		const { data, asObservable } = (await this.#getDataPromise) as GetDataType;
 
@@ -598,7 +605,9 @@ export class UmbDocumentWorkspaceContext
 		// Tell the server that we're entering preview mode.
 		await new UmbDocumentPreviewRepository(this).enter();
 
-		const previewUrl = new URL('preview', window.location.origin);
+		const appContext = await this.getContext(UMB_APP_CONTEXT);
+
+		const previewUrl = new URL(appContext.getBackofficePath() + '/preview', appContext.getServerUrl());
 		previewUrl.searchParams.set('id', unique);
 
 		if (culture && culture !== UMB_INVARIANT_CULTURE) {
@@ -707,18 +716,20 @@ export class UmbDocumentWorkspaceContext
 
 		await this.#performSaveOrCreate(variantIds, saveData);
 
-		await this.publishingRepository.publish(
+		const { error } = await this.publishingRepository.publish(
 			unique,
 			variantIds.map((variantId) => ({ variantId })),
 		);
 
-		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-		const event = new UmbRequestReloadStructureForEntityEvent({
-			unique: this.getUnique()!,
-			entityType: this.getEntityType(),
-		});
+		if (!error) {
+			const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+			const event = new UmbRequestReloadStructureForEntityEvent({
+				unique: this.getUnique()!,
+				entityType: this.getEntityType(),
+			});
 
-		eventContext.dispatchEvent(event);
+			eventContext.dispatchEvent(event);
+		}
 	}
 
 	async #handleSave() {
@@ -823,6 +834,12 @@ export class UmbDocumentWorkspaceContext
 	}
 
 	public async publishWithDescendants() {
+		const unique = this.getUnique();
+		if (!unique) throw new Error('Unique is missing');
+
+		const entityType = this.getEntityType();
+		if (!entityType) throw new Error('Entity type is missing');
+
 		const { options, selected } = await this.#determineVariantOptions();
 
 		const modalManagerContext = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
@@ -844,15 +861,30 @@ export class UmbDocumentWorkspaceContext
 
 		if (!variantIds.length) return;
 
-		// TODO: Validate content & Save changes for the selected variants — This was how it worked in v.13 [NL]
-
-		const unique = this.getUnique();
-		if (!unique) throw new Error('Unique is missing');
-		await this.publishingRepository.publishWithDescendants(
+		const { error } = await this.publishingRepository.publishWithDescendants(
 			unique,
 			variantIds,
 			result.includeUnpublishedDescendants ?? false,
 		);
+
+		if (!error) {
+			const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+
+			// request reload of this entity
+			const structureEvent = new UmbRequestReloadStructureForEntityEvent({
+				entityType,
+				unique,
+			});
+
+			// request reload of the children
+			const childrenEvent = new UmbRequestReloadChildrenOfEntityEvent({
+				entityType,
+				unique,
+			});
+
+			eventContext.dispatchEvent(structureEvent);
+			eventContext.dispatchEvent(childrenEvent);
+		}
 	}
 
 	async delete() {
@@ -870,7 +902,6 @@ export class UmbDocumentWorkspaceContext
 	}
 
 	public override destroy(): void {
-		this.#data.destroy();
 		this.structure.destroy();
 		this.#languageRepository.destroy();
 		super.destroy();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
index 0301ab190c..a79c270056 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/manifests.ts
@@ -7,6 +7,7 @@ import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js';
 import { UMB_DOCUMENT_WORKSPACE_ALIAS } from './constants.js';
 import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
 import { UMB_CONTENT_HAS_PROPERTIES_WORKSPACE_CONDITION } from '@umbraco-cms/backoffice/content';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -31,7 +32,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
 			},
 			{
@@ -52,7 +53,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
 			},
 			{
@@ -73,7 +74,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
 			},
 		],
@@ -92,7 +93,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
 			},
 			{
@@ -114,7 +115,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
 			},
 			{
@@ -134,7 +135,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_DOCUMENT_WORKSPACE_ALIAS,
 			},
 			{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
index 889c24988a..cfa0bc151a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
@@ -1,32 +1,40 @@
 import type { UmbDocumentAuditLogModel } from '../../../audit-log/types.js';
 import { UmbDocumentAuditLogRepository } from '../../../audit-log/index.js';
 import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js';
-import { TimeOptions, getDocumentHistoryTagStyleAndText } from './utils.js';
-import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { getDocumentHistoryTagStyleAndText, TimeOptions } from './utils.js';
+import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
-import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
-import type { UmbUserItemModel } from '@umbraco-cms/backoffice/user';
+import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbUserItemRepository } from '@umbraco-cms/backoffice/user';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import type { ManifestEntityAction } from '@umbraco-cms/backoffice/entity-action';
+import type { UmbUserItemModel } from '@umbraco-cms/backoffice/user';
+import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-document-workspace-view-info-history')
 export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
-	@state()
-	_currentPageNumber = 1;
+	#allowedActions = new Set(['Umb.EntityAction.Document.Rollback']);
+
+	#auditLogRepository = new UmbDocumentAuditLogRepository(this);
+
+	#pagination = new UmbPaginationManager();
+
+	#userItemRepository = new UmbUserItemRepository(this);
+
+	#userMap = new Map<string, UmbUserItemModel>();
+
+	#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
 
 	@state()
-	_totalPages = 1;
+	private _currentPageNumber = 1;
 
 	@state()
 	private _items: Array<UmbDocumentAuditLogModel> = [];
 
-	#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
-	#auditLogRepository = new UmbDocumentAuditLogRepository(this);
-	#pagination = new UmbPaginationManager();
-	#userItemRepository = new UmbUserItemRepository(this);
-
-	#userMap = new Map<string, UmbUserItemModel>();
+	@state()
+	private _totalPages = 1;
 
 	constructor() {
 		super();
@@ -35,12 +43,23 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 		this.observe(this.#pagination.currentPage, (number) => (this._currentPageNumber = number));
 		this.observe(this.#pagination.totalPages, (number) => (this._totalPages = number));
 
+		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => {
+			context.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, () => {
+				this.#requestAuditLogs();
+			});
+		});
+
 		this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => {
 			this.#workspaceContext = instance;
 			this.#requestAuditLogs();
 		});
 	}
 
+	#onPageChange(event: UUIPaginationEvent) {
+		this.#pagination.setCurrentPageNumber(event.target?.current);
+		this.#requestAuditLogs();
+	}
+
 	async #requestAuditLogs() {
 		const unique = this.#workspaceContext?.getUnique();
 		if (!unique) throw new Error('Document unique is required');
@@ -58,11 +77,6 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 		}
 	}
 
-	#onPageChange(event: UUIPaginationEvent) {
-		this.#pagination.setCurrentPageNumber(event.target?.current);
-		this.#requestAuditLogs();
-	}
-
 	async #requestAndCacheUserItems() {
 		const allUsers = this._items?.map((item) => item.user.unique).filter(Boolean) as string[];
 		const uniqueUsers = [...new Set(allUsers)];
@@ -83,90 +97,84 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<uui-box>
-			<umb-localize slot="headline" key="general_history">History</umb-localize>
-			<umb-extension-with-api-slot
+		return html`
+			<uui-box headline=${this.localize.term('general_history')}>
+				<umb-extension-with-api-slot
 				slot="header-actions"
 				type="entityAction"
-				.filter=${(manifest: any) => manifest.alias === 'Umb.EntityAction.Document.Rollback'}></umb-extension-with-api-slot>
+				.filter=${(manifest: ManifestEntityAction) => this.#allowedActions.has(manifest.alias)}></umb-extension-with-api-slot>
 			</uui-button>
-			${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `}
+			${when(
+				this._items,
+				() => this.#renderHistory(),
+				() => html`<div id="loader"><uui-loader></uui-loader></div>`,
+			)}
 			${this.#renderPagination()}
-		</uui-box> `;
+		</uui-box>
+		`;
 	}
 
 	#renderHistory() {
-		if (this._items && this._items.length) {
-			return html`
-				<umb-history-list>
-					${repeat(
-						this._items,
-						(item) => item.timestamp,
-						(item) => {
-							const { text, style } = getDocumentHistoryTagStyleAndText(item.logType);
-							const user = this.#userMap.get(item.user.unique);
+		if (!this._items?.length) return html`${this.localize.term('content_noItemsToShow')}`;
+		return html`
+			<umb-history-list>
+				${repeat(
+					this._items,
+					(item) => item.timestamp,
+					(item) => {
+						const { text, style } = getDocumentHistoryTagStyleAndText(item.logType);
+						const user = this.#userMap.get(item.user.unique);
 
-							return html`<umb-history-item
+						return html`
+							<umb-history-item
 								.name=${user?.name ?? 'Unknown'}
 								.detail=${this.localize.date(item.timestamp, TimeOptions)}>
 								<umb-user-avatar
 									slot="avatar"
 									.name=${user?.name}
 									.kind=${user?.kind}
-									.imgUrls=${user?.avatarUrls ?? []}></umb-user-avatar>
-
-								<span class="log-type">
+									.imgUrls=${user?.avatarUrls ?? []}>
+								</umb-user-avatar>
+								<div class="log-type">
 									<uui-tag look=${style.look} color=${style.color}>
 										${this.localize.term(text.label, item.parameters)}
 									</uui-tag>
-									${this.localize.term(text.desc, item.parameters)}
-								</span>
-							</umb-history-item>`;
-						},
-					)}
-				</umb-history-list>
-			`;
-		} else {
-			return html`${this.localize.term('content_noItemsToShow')}`;
-		}
+									<span>${this.localize.term(text.desc, item.parameters)}</span>
+								</div>
+							</umb-history-item>
+						`;
+					},
+				)}
+			</umb-history-list>
+		`;
 	}
 
 	#renderPagination() {
+		if (this._totalPages <= 1) return nothing;
 		return html`
-			${this._totalPages > 1
-				? html`
-						<uui-pagination
-							class="pagination"
-							.current=${this._currentPageNumber}
-							.total=${this._totalPages}
-							@change=${this.#onPageChange}></uui-pagination>
-					`
-				: nothing}
+			<uui-pagination
+				.current=${this._currentPageNumber}
+				.total=${this._totalPages}
+				@change=${this.#onPageChange}></uui-pagination>
 		`;
 	}
 
 	static override styles = [
 		UmbTextStyles,
 		css`
-			uui-loader-circle {
-				font-size: 2rem;
-			}
-
-			uui-tag uui-icon {
-				margin-right: var(--uui-size-space-1);
+			#loader {
+				display: flex;
+				justify-content: center;
 			}
 
 			.log-type {
-				flex-grow: 1;
-				gap: var(--uui-size-space-2);
+				display: grid;
+				grid-template-columns: var(--uui-size-40) auto;
+				gap: var(--uui-size-layout-1);
 			}
 
 			uui-pagination {
 				flex: 1;
-				display: inline-block;
-			}
-
-			.pagination {
 				display: flex;
 				justify-content: center;
 				margin-top: var(--uui-size-layout-1);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-links.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-links.element.ts
new file mode 100644
index 0000000000..f244371dfa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-links.element.ts
@@ -0,0 +1,178 @@
+import { UmbDocumentUrlRepository } from '../../../repository/url/document-url.repository.js';
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js';
+import type { UmbDocumentVariantOptionModel } from '../../../types.js';
+import { css, customElement, html, map, nothing, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
+import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
+
+@customElement('umb-document-workspace-view-info-links')
+export class UmbDocumentWorkspaceViewInfoLinksElement extends UmbLitElement {
+	#documentUrlRepository = new UmbDocumentUrlRepository(this);
+
+	@state()
+	private _isNew = false;
+
+	@state()
+	private _unique?: string;
+
+	@state()
+	private _variantOptions?: Array<UmbDocumentVariantOptionModel>;
+
+	@state()
+	private _lookup: Record<string, string> = {};
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => {
+			context.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, () => {
+				this.#requestUrls();
+			});
+		});
+
+		this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+			this.observe(
+				observeMultiple([context.isNew, context.unique, context.variantOptions]),
+				([isNew, unique, variantOptions]) => {
+					this._isNew = isNew === true;
+					this._unique = unique;
+					this._variantOptions = variantOptions;
+					this.#requestUrls();
+				},
+			);
+		});
+	}
+
+	async #requestUrls() {
+		if (this._isNew) return;
+
+		if (!this._unique) throw new Error('Document unique is required');
+
+		const { data } = await this.#documentUrlRepository.requestItems([this._unique]);
+
+		if (data?.length) {
+			data[0].urls.forEach((item) => {
+				if (item.culture && item.url) {
+					this._lookup[item.culture] = item.url;
+				}
+			});
+			this.requestUpdate('_lookup');
+		}
+	}
+
+	#getStateLocalizationKey(variantOption: UmbDocumentVariantOptionModel) {
+		switch (variantOption.variant?.state) {
+			case null:
+			case undefined:
+			case DocumentVariantStateModel.NOT_CREATED:
+				return 'content_notCreated';
+			case DocumentVariantStateModel.DRAFT:
+				return 'content_itemNotPublished';
+			case DocumentVariantStateModel.PUBLISHED:
+				return 'content_routeErrorCannotRoute';
+			default:
+				return 'content_parentNotPublishedAnomaly';
+		}
+	}
+
+	override render() {
+		return html`
+			<uui-box headline=${this.localize.term('general_links')}>
+				${when(
+					this._isNew,
+					() => this.#renderNotCreated(),
+					() => this.#renderUrls(),
+				)}
+			</uui-box>
+		`;
+	}
+
+	#renderNotCreated() {
+		return html`
+			<div class="link-item">
+				<span>
+					<em><umb-localize key="content_notCreated"></umb-localize></em>
+				</span>
+			</div>
+		`;
+	}
+
+	#renderUrls() {
+		if (!this._variantOptions?.length) return nothing;
+		return map(this._variantOptions, (variantOption) => this.#renderUrl(variantOption));
+	}
+
+	#renderUrl(variantOption: UmbDocumentVariantOptionModel) {
+		const varies = !!variantOption.culture;
+		const culture = varies ? variantOption.culture! : variantOption.language.unique;
+		const url = this._lookup[culture];
+		return when(
+			url,
+			() => html`
+				<a class="link-item" href=${url} target="_blank">
+					<span>
+						<span class="culture">${varies ? culture : nothing}</span>
+						<span>${url}</span>
+					</span>
+					<uui-icon name="icon-out"></uui-icon>
+				</a>
+			`,
+			() => html`
+				<div class="link-item">
+					<span>
+						${when(varies, () => html`<span class="culture">${culture}</span>`)}
+						<em><umb-localize key=${this.#getStateLocalizationKey(variantOption)}></umb-localize></em>
+					</span>
+				</div>
+			`,
+		);
+	}
+
+	static override styles = [
+		css`
+			uui-box {
+				--uui-box-default-padding: 0;
+			}
+
+			.link-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				gap: var(--uui-size-6);
+
+				padding: var(--uui-size-space-4) var(--uui-size-space-6);
+
+				&:is(a) {
+					cursor: pointer;
+					color: inherit;
+					text-decoration: none;
+				}
+
+				&:is(a):hover {
+					background: var(--uui-color-divider);
+				}
+
+				& > span {
+					display: flex;
+					align-items: center;
+					gap: var(--uui-size-6);
+				}
+
+				.culture {
+					color: var(--uui-color-divider-emphasis);
+				}
+			}
+		`,
+	];
+}
+
+export default UmbDocumentWorkspaceViewInfoLinksElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-workspace-view-info-links': UmbDocumentWorkspaceViewInfoLinksElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
index 28ad1b37ae..12cccd21f1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts
@@ -1,21 +1,18 @@
 import { UmbDocumentReferenceRepository } from '../../../reference/index.js';
-import { css, html, customElement, state, nothing, repeat, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { isDefaultReference, isDocumentReference, isMediaReference } from '@umbraco-cms/backoffice/relations';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import {
-	isDefaultReference,
-	isDocumentReference,
-	isMediaReference,
-	type UmbReferenceModel,
-} from '@umbraco-cms/backoffice/relations';
+import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
+import type { UmbReferenceModel } from '@umbraco-cms/backoffice/relations';
+import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-document-workspace-view-info-reference')
 export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement {
 	#itemsPerPage = 10;
-	#referenceRepository;
+
+	#referenceRepository = new UmbDocumentReferenceRepository(this);
 
 	@property()
 	documentUnique = '';
@@ -34,7 +31,6 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 
 	constructor() {
 		super();
-		this.#referenceRepository = new UmbDocumentReferenceRepository(this);
 
 		new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
 			.addAdditionalPath('document')
@@ -113,63 +109,65 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement
 	}
 
 	override render() {
-		if (this._items && this._items.length > 0) {
-			return html` <uui-box
-					headline=${this.localize.term('references_labelUsedByItems')}
-					style="--uui-box-default-padding:0">
-					<uui-table>
-						<uui-table-head>
-							<uui-table-head-cell></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_name">Name</umb-localize></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_status">Status</umb-localize></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_typeName">Type Name</umb-localize></uui-table-head-cell>
-							<uui-table-head-cell><umb-localize key="general_type">Type</umb-localize></uui-table-head-cell>
-						</uui-table-head>
-
-						${repeat(
-							this._items,
-							(item) => item.id,
-							(item) =>
-								html`<uui-table-row>
-									<uui-table-cell style="text-align:center;">
-										<umb-icon name=${this.#getIcon(item)}></umb-icon>
-									</uui-table-cell>
-									<uui-table-cell class="link-cell">
-										${isDocumentReference(item)
-											? html` <uui-button
-													label="${this.localize.term('general_edit')} ${item.name}"
-													href=${`${this._editDocumentPath}edit/${item.id}`}>
-													${item.name}
-												</uui-button>`
-											: item.name}
-									</uui-table-cell>
-									<uui-table-cell>
-										${this.#getPublishedStatus(item)
-											? this.localize.term('content_published')
-											: this.localize.term('content_unpublished')}
-									</uui-table-cell>
-									<uui-table-cell>${this.#getContentTypeName(item)}</uui-table-cell>
-									<uui-table-cell>${this.#getContentType(item)}</uui-table-cell>
-								</uui-table-row>`,
-						)}
-					</uui-table>
-				</uui-box>
-				${this.#renderReferencePagination()}`;
-		} else {
-			return nothing;
-		}
+		if (!this._items?.length) return nothing;
+		return html`
+			<uui-box headline=${this.localize.term('references_labelUsedByItems')} style="--uui-box-default-padding:0">
+				<uui-table>
+					<uui-table-head>
+						<uui-table-head-cell></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_name">Name</umb-localize></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_status">Status</umb-localize></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_typeName">Type Name</umb-localize></uui-table-head-cell>
+						<uui-table-head-cell><umb-localize key="general_type">Type</umb-localize></uui-table-head-cell>
+					</uui-table-head>
+					${repeat(
+						this._items,
+						(item) => item.id,
+						(item) => html`
+							<uui-table-row>
+								<uui-table-cell style="text-align:center;">
+									<umb-icon name=${this.#getIcon(item)}></umb-icon>
+								</uui-table-cell>
+								<uui-table-cell class="link-cell">
+									${when(
+										isDocumentReference(item),
+										() => html`
+											<uui-button
+												label="${this.localize.term('general_edit')} ${item.name}"
+												href="${this._editDocumentPath}edit/${item.id}">
+												${item.name}
+											</uui-button>
+										`,
+										() => item.name,
+									)}
+								</uui-table-cell>
+								<uui-table-cell>
+									${this.#getPublishedStatus(item)
+										? this.localize.term('content_published')
+										: this.localize.term('content_unpublished')}
+								</uui-table-cell>
+								<uui-table-cell>${this.#getContentTypeName(item)}</uui-table-cell>
+								<uui-table-cell>${this.#getContentType(item)}</uui-table-cell>
+							</uui-table-row>
+						`,
+					)}
+				</uui-table>
+			</uui-box>
+			${this.#renderReferencePagination()}
+		`;
 	}
 
 	#renderReferencePagination() {
 		if (!this._total) return nothing;
 
 		const totalPages = Math.ceil(this._total / this.#itemsPerPage);
-
 		if (totalPages <= 1) return nothing;
 
-		return html`<div class="pagination">
-			<uui-pagination .total=${totalPages} @change="${this.#onPageChange}"></uui-pagination>
-		</div>`;
+		return html`
+			<div class="pagination">
+				<uui-pagination .total=${totalPages} @change="${this.#onPageChange}"></uui-pagination>
+			</div>
+		`;
 	}
 
 	static override styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
index 3a0eee8dc7..576f954bbc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
@@ -1,39 +1,30 @@
+import { UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT } from '../../../property-dataset-context/index.js';
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js';
+import type { UmbDocumentVariantModel } from '../../../types.js';
 import { TimeOptions } from './utils.js';
-import { css, customElement, html, ifDefined, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, ifDefined, nothing, state } from '@umbraco-cms/backoffice/external/lit';
 import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import { UMB_TEMPLATE_PICKER_MODAL, UmbTemplateItemRepository } from '@umbraco-cms/backoffice/template';
-import type { DocumentUrlInfoModel } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type';
-import type { UmbDocumentVariantModel } from '@umbraco-cms/backoffice/document';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
 
 // import of local components
+import './document-workspace-view-info-links.element.js';
 import './document-workspace-view-info-history.element.js';
 import './document-workspace-view-info-reference.element.js';
 
 @customElement('umb-document-workspace-view-info')
 export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
-	@state()
-	private _invariantCulture = 'en-US';
-
 	@state()
 	private _documentUnique = '';
 
+	// Document Type
 	@state()
-	private _urls?: Array<DocumentUrlInfoModel>;
-
-	@state()
-	private _createDate?: string;
-
-	/**Document Type */
-	@state()
-	private _documentTypeUnique = '';
+	private _documentTypeUnique?: string = '';
 
 	@state()
 	private _documentTypeName?: string;
@@ -44,7 +35,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	@state()
 	private _allowedTemplates?: UmbDocumentTypeDetailModel['allowedTemplates'];
 
-	/**Template */
+	// Template
 	@state()
 	private _templateUnique = '';
 
@@ -52,7 +43,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	private _templateName?: string;
 
 	@state()
-	private _variants: UmbDocumentVariantModel[] = [];
+	private _variant?: UmbDocumentVariantModel;
 
 	#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
 
@@ -78,6 +69,12 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			this._documentTypeUnique = this.#workspaceContext.getContentTypeId()!;
 			this.#observeContent();
 		});
+
+		this.consumeContext(UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT, (context) => {
+			this.observe(context.currentVariant, (currentVariant) => {
+				this._variant = currentVariant;
+			});
+		});
 	}
 
 	#observeContent() {
@@ -93,14 +90,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			'_documentType',
 		);
 
-		this.observe(
-			this.#workspaceContext.urls,
-			(urls) => {
-				this._urls = urls;
-			},
-			'_documentUrls',
-		);
-
 		this.observe(
 			this.#workspaceContext.unique,
 			(unique) => {
@@ -121,44 +110,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			},
 			'_templateUnique',
 		);
-
-		this.observe(
-			this.#workspaceContext.variants,
-			(variants) => {
-				this._variants = variants;
-				this.#observeVariants();
-			},
-			'_variants',
-		);
 	}
 
-	#observeVariants() {
-		// Find the oldest variant
-		const oldestVariant =
-			this._variants.length > 0
-				? this._variants
-						.filter((v) => !!v.createDate)
-						.reduce((prev, current) => (prev.createDate! < current.createDate! ? prev : current))
-				: null;
-
-		this._createDate = oldestVariant?.createDate ?? new Date().toISOString();
-	}
-
-	#renderVariantStates() {
-		return repeat(
-			this._variants,
-			(variant) => `${variant.culture}_${variant.segment}`,
-			(variant) => html`
-				<div class="variant-state">
-					<span>${variant.culture ?? this._invariantCulture}</span>
-					${this.#renderStateTag(variant)}
-				</div>
-			`,
-		);
-	}
-
-	#renderStateTag(variant: UmbDocumentVariantModel) {
-		switch (variant.state) {
+	#renderStateTag() {
+		switch (this._variant?.state) {
 			case DocumentVariantStateModel.DRAFT:
 				return html`
 					<uui-tag look="secondary" label=${this.localize.term('content_unpublished')}>
@@ -174,13 +129,13 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			case DocumentVariantStateModel.PUBLISHED_PENDING_CHANGES:
 				return html`
 					<uui-tag color="positive" look="primary" label=${this.localize.term('content_publishedPendingChanges')}>
-						${this.localize.term('content_published')}
+						${this.localize.term('content_publishedPendingChanges')}
 					</uui-tag>
 				`;
 			default:
 				return html`
-					<uui-tag look="primary" label=${this.localize.term('content_published')}>
-						${this.localize.term('content_published')}
+					<uui-tag look="primary" label=${this.localize.term('content_notCreated')}>
+						${this.localize.term('content_notCreated')}
 					</uui-tag>
 				`;
 		}
@@ -189,65 +144,29 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	override render() {
 		return html`
 			<div class="container">
-				<uui-box headline=${this.localize.term('general_links')} style="--uui-box-default-padding: 0;">
-					<div id="link-section">${this.#renderLinksSection()}</div>
-				</uui-box>
-
+				<umb-document-workspace-view-info-links></umb-document-workspace-view-info-links>
 				<umb-document-workspace-view-info-reference
 					.documentUnique=${this._documentUnique}></umb-document-workspace-view-info-reference>
-
-				<umb-document-workspace-view-info-history
-					.documentUnique=${this._documentUnique}></umb-document-workspace-view-info-history>
+				<umb-document-workspace-view-info-history></umb-document-workspace-view-info-history>
 			</div>
 			<div class="container">
-				<uui-box headline=${this.localize.term('general_general')} id="general-section"
-					>${this.#renderGeneralSection()}</uui-box
-				>
+				<uui-box headline=${this.localize.term('general_general')} id="general-section">
+					${this.#renderGeneralSection()}
+				</uui-box>
 			</div>
 		`;
 	}
 
-	#renderLinksSection() {
-		/** TODO Make sure link section is completed */
-		if (this._urls && this._urls.length) {
-			return html`
-				${repeat(
-					this._urls,
-					(url) => url.culture,
-					(url) => html`
-						<a href=${url.url} target="_blank" class="link-item with-href">
-							<span class="link-language">${url.culture}</span>
-							<span class="link-content"> ${url.url}</span>
-							<uui-icon name="icon-out"></uui-icon>
-						</a>
-					`,
-				)}
-			`;
-		} else {
-			return html`
-				<div class="link-item">
-					<span class="link-language">${this._invariantCulture}</span>
-					<span class="link-content italic"><umb-localize key="content_parentNotPublishedAnomaly"></umb-localize></span>
-				</div>
-			`;
-		}
-	}
-
 	#renderGeneralSection() {
 		const editDocumentTypePath = this._routeBuilder?.({ entityType: 'document-type' }) ?? '';
-		const editTemplatePath = this._routeBuilder?.({ entityType: 'template' }) ?? '';
 
 		return html`
 			<div class="general-item">
 				<strong><umb-localize key="content_publishStatus">Publication Status</umb-localize></strong>
-				<umb-stack look="compact">${this.#renderVariantStates()}</umb-stack>
-			</div>
-			<div class="general-item">
-				<strong><umb-localize key="content_createDate">Created</umb-localize></strong>
-				<span>
-					<umb-localize-date .date=${this._createDate} .options=${TimeOptions}></umb-localize-date>
-				</span>
+				<span>${this.#renderStateTag()}</span>
 			</div>
+			${this.#renderCreateDate()}
+
 			<div class="general-item">
 				<strong><umb-localize key="content_documentType">Document Type</umb-localize></strong>
 				<uui-ref-node-document-type
@@ -257,6 +176,20 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 					<umb-icon slot="icon" name=${ifDefined(this._documentTypeIcon)}></umb-icon>
 				</uui-ref-node-document-type>
 			</div>
+			${this.#renderTemplateInput()}
+			<div class="general-item">
+				<strong><umb-localize key="template_id">Id</umb-localize></strong>
+				<span>${this._documentUnique}</span>
+			</div>
+		`;
+	}
+
+	#renderTemplateInput() {
+		if (this._allowedTemplates?.length === 0) return nothing;
+
+		const editTemplatePath = this._routeBuilder?.({ entityType: 'template' }) ?? '';
+
+		return html`
 			<div class="general-item">
 				<strong><umb-localize key="template_template">Template</umb-localize></strong>
 				${this._templateUnique
@@ -280,9 +213,18 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 								@click=${this.#openTemplatePicker}></uui-button>
 						`}
 			</div>
+		`;
+	}
+
+	#renderCreateDate() {
+		if (!this._variant?.createDate) return nothing;
+
+		return html`
 			<div class="general-item">
-				<strong><umb-localize key="template_id">Id</umb-localize></strong>
-				<span>${this._documentUnique}</span>
+				<strong><umb-localize key="content_createDate">Created</umb-localize></strong>
+				<span>
+					<umb-localize-date .date=${this._variant.createDate} .options=${TimeOptions}></umb-localize-date>
+				</span>
 			</div>
 		`;
 	}
@@ -312,7 +254,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 	}
 
 	static override styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				display: grid;
@@ -352,44 +293,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 			.variant-state > span {
 				color: var(--uui-color-divider-emphasis);
 			}
-
-			// 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: auto 1fr auto;
-				gap: var(--uui-size-6);
-				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);
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/extension-insights/collection/extension-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/extension-insights/collection/extension-collection.element.ts
index 3c22b9e54a..375daeb232 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/extension-insights/collection/extension-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/extension-insights/collection/extension-collection.element.ts
@@ -1,17 +1,14 @@
-import type { UmbExtensionCollectionFilterModel } from './types.js';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbExtensionCollectionFilterModel, UmbExtensionDetailModel } from './types.js';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_COLLECTION_CONTEXT, UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-extension-collection')
 export class UmbExtensionCollectionElement extends UmbCollectionDefaultElement {
-	#collectionContext?: UmbDefaultCollectionContext<any, UmbExtensionCollectionFilterModel>;
-
-	#inputTimer?: NodeJS.Timeout;
-	#inputTimerAmount = 500;
+	#collectionContext?: UmbDefaultCollectionContext<UmbExtensionDetailModel, UmbExtensionCollectionFilterModel>;
 
 	#options: Array<Option> = [];
 
@@ -34,40 +31,35 @@ export class UmbExtensionCollectionElement extends UmbCollectionDefaultElement {
 		this.#collectionContext?.setFilter({ type: extensionType });
 	}
 
-	#onSearch(event: InputEvent) {
-		const target = event.target as HTMLInputElement;
-		const filter = target.value || '';
-		clearTimeout(this.#inputTimer);
-		this.#inputTimer = setTimeout(() => this.#collectionContext?.setFilter({ filter }), this.#inputTimerAmount);
-	}
-
 	protected override renderToolbar() {
 		return html`
-			<div id="toolbar" slot="header">
-				<uui-input @input=${this.#onSearch} label="Search" placeholder="Search..." id="input-search"></uui-input>
-				<uui-select
-					label="Select type..."
-					placeholder="Select type..."
-					.options=${this.#options}
-					@change=${this.#onChange}></uui-select>
-			</div>
+			<umb-collection-toolbar slot="header">
+				<div id="toolbar">
+					<umb-collection-filter-field></umb-collection-filter-field>
+					<uui-select
+						label="Select type..."
+						placeholder="Select type..."
+						.options=${this.#options}
+						@change=${this.#onChange}></uui-select>
+				</div>
+			</umb-collection-toolbar>
 		`;
 	}
 
 	static override styles = [
 		css`
 			#toolbar {
+				flex: 1;
 				display: flex;
 				gap: var(--uui-size-space-5);
 				justify-content: space-between;
 				align-items: center;
-				padding-left: var(--uui-size-space-4);
-				padding-right: var(--uui-size-space-6);
-				width: 100%;
-			}
-			uui-input {
+			}
+
+			umb-collection-filter-field {
 				width: 100%;
 			}
+
 			uui-select {
 				width: 100%;
 			}
@@ -75,8 +67,11 @@ export class UmbExtensionCollectionElement extends UmbCollectionDefaultElement {
 	];
 }
 
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 17. */
 export default UmbExtensionCollectionElement;
 
+export { UmbExtensionCollectionElement as element };
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-extension-collection': UmbExtensionCollectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/extension-insights/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/extension-insights/workspace/manifests.ts
index 1fafb06a69..6cd95677fb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/extension-insights/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/extension-insights/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_EXTENSION_COLLECTION_ALIAS } from '../collection/manifests.js';
 import { UMB_EXTENSION_ROOT_ENTITY_TYPE } from '../entity.js';
 import { UMB_EXTENSION_ROOT_WORKSPACE_ALIAS } from './constants.js';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_EXTENSION_ROOT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/app-language-select/app-language-select.element.ts b/src/Umbraco.Web.UI.Client/src/packages/language/app-language-select/app-language-select.element.ts
index 940bd928a5..4b76521814 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/app-language-select/app-language-select.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/app-language-select/app-language-select.element.ts
@@ -2,8 +2,18 @@ import { UmbLanguageCollectionRepository } from '../collection/index.js';
 import type { UmbLanguageDetailModel } from '../types.js';
 import { type UmbAppLanguageContext, UMB_APP_LANGUAGE_CONTEXT } from '../global-contexts/index.js';
 import type { UUIMenuItemEvent, UUIPopoverContainerElement } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, state, repeat, ifDefined, query } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	html,
+	customElement,
+	state,
+	repeat,
+	ifDefined,
+	query,
+	nothing,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
 
 @customElement('umb-app-language-select')
 export class UmbAppLanguageSelectElement extends UmbLitElement {
@@ -16,6 +26,9 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 	@state()
 	private _appLanguage?: UmbLanguageDetailModel;
 
+	@state()
+	private _appLanguageIsReadOnly = false;
+
 	@state()
 	private _isOpen = false;
 
@@ -23,6 +36,12 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 	#appLanguageContext?: UmbAppLanguageContext;
 	#languagesObserver?: any;
 
+	#currentUserAllowedLanguages?: Array<string>;
+	#currentUserHasAccessToAllLanguages?: boolean;
+
+	@state()
+	_disallowedLanguages: Array<UmbLanguageDetailModel> = [];
+
 	constructor() {
 		super();
 
@@ -30,6 +49,29 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 			this.#appLanguageContext = instance;
 			this.#observeAppLanguage();
 		});
+
+		this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
+			this.observe(context.languages, (languages) => {
+				this.#currentUserAllowedLanguages = languages;
+				this.#checkForLanguageAccess();
+			});
+
+			this.observe(context.hasAccessToAllLanguages, (hasAccessToAllLanguages) => {
+				this.#currentUserHasAccessToAllLanguages = hasAccessToAllLanguages;
+				this.#checkForLanguageAccess();
+			});
+		});
+	}
+
+	#checkForLanguageAccess() {
+		// find all disallowed languages
+		this._disallowedLanguages = this._languages?.filter((language) => {
+			if (this.#currentUserHasAccessToAllLanguages) {
+				return false;
+			}
+
+			return !this.#currentUserAllowedLanguages?.includes(language.unique);
+		});
 	}
 
 	async #observeAppLanguage() {
@@ -38,6 +80,10 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 		this.observe(this.#appLanguageContext.appLanguage, (language) => {
 			this._appLanguage = language;
 		});
+
+		this.observe(this.#appLanguageContext.appLanguageReadOnlyState.isReadOnly, (isReadOnly) => {
+			this._appLanguageIsReadOnly = isReadOnly;
+		});
 	}
 
 	async #observeLanguages() {
@@ -46,6 +92,7 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 		// TODO: listen to changes
 		if (data) {
 			this._languages = data.items;
+			this.#checkForLanguageAccess();
 		}
 	}
 
@@ -83,7 +130,11 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 
 	#renderTrigger() {
 		return html`<button id="toggle" popovertarget="dropdown-popover">
-			${this._appLanguage?.name} <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+			<span
+				>${this._appLanguage?.name}
+				${this._appLanguageIsReadOnly ? this.#renderReadOnlyTag(this._appLanguage?.unique) : nothing}</span
+			>
+			<uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
 		</button>`;
 	}
 
@@ -98,13 +149,25 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 							label=${ifDefined(language.name)}
 							@click-label=${this.#onLabelClick}
 							data-unique=${ifDefined(language.unique)}
-							?active=${language.unique === this._appLanguage?.unique}></uui-menu-item>
+							?active=${language.unique === this._appLanguage?.unique}>
+							${this.#isLanguageReadOnly(language.unique) ? this.#renderReadOnlyTag(language.unique) : nothing}
+						</uui-menu-item>
 					`,
 				)}
 			</umb-popover-layout>
 		</uui-popover-container>`;
 	}
 
+	#isLanguageReadOnly(culture?: string) {
+		if (!culture) return false;
+		return this._disallowedLanguages.find((language) => language.unique === culture) ? true : false;
+	}
+
+	#renderReadOnlyTag(culture?: string) {
+		if (!culture) return nothing;
+		return html`<uui-tag slot="badge" look="secondary">${this.localize.term('general_readOnly')}</uui-tag>`;
+	}
+
 	static override styles = [
 		css`
 			:host {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/app-language.context.ts b/src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/app-language.context.ts
index 6a0d4b7d8b..bb6da03b19 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/app-language.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/app-language.context.ts
@@ -6,30 +6,35 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import { UMB_AUTH_CONTEXT } from '@umbraco-cms/backoffice/auth';
+import { UmbReadOnlyStateManager } from '@umbraco-cms/backoffice/utils';
+import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
 
 // TODO: Make a store for the App Languages.
 // TODO: Implement default language end-point, in progress at backend team, so we can avoid getting all languages.
 export class UmbAppLanguageContext extends UmbContextBase<UmbAppLanguageContext> implements UmbApi {
-	#languageCollectionRepository: UmbLanguageCollectionRepository;
 	#languages = new UmbArrayState<UmbLanguageDetailModel>([], (x) => x.unique);
-	moreThanOneLanguage = this.#languages.asObservablePart((x) => x.length > 1);
 
 	#appLanguage = new UmbObjectState<UmbLanguageDetailModel | undefined>(undefined);
-	appLanguage = this.#appLanguage.asObservable();
+	public readonly appLanguage = this.#appLanguage.asObservable();
+	public readonly appLanguageCulture = this.#appLanguage.asObservablePart((x) => x?.unique);
 
-	appLanguageCulture = this.#appLanguage.asObservablePart((x) => x?.unique);
+	public readonly appLanguageReadOnlyState = new UmbReadOnlyStateManager(this);
 
-	appDefaultLanguage = createObservablePart(this.#languages.asObservable(), (languages) =>
+	public readonly appDefaultLanguage = createObservablePart(this.#languages.asObservable(), (languages) =>
 		languages.find((language) => language.isDefault),
 	);
 
-	getAppCulture() {
-		return this.#appLanguage.getValue()?.unique;
-	}
+	public readonly moreThanOneLanguage = this.#languages.asObservablePart((x) => x.length > 1);
+
+	#languageCollectionRepository = new UmbLanguageCollectionRepository(this);
+	#currentUserAllowedLanguages: Array<string> = [];
+	#currentUserHasAccessToAllLanguages = false;
+
+	#readOnlyStateIdentifier = 'UMB_LANGUAGE_PERMISSION_';
+	#localStorageKey = 'umb:appLanguage';
 
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_APP_LANGUAGE_CONTEXT);
-		this.#languageCollectionRepository = new UmbLanguageCollectionRepository(this);
 
 		// TODO: We need to ensure this request is called every time the user logs in, but this should be done somewhere across the app and not here [JOV]
 		this.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
@@ -38,12 +43,46 @@ export class UmbAppLanguageContext extends UmbContextBase<UmbAppLanguageContext>
 				this.#observeLanguages();
 			});
 		});
+
+		this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
+			this.observe(context.languages, (languages) => {
+				this.#currentUserAllowedLanguages = languages || [];
+				this.#setIsReadOnly();
+			});
+
+			this.observe(context.hasAccessToAllLanguages, (hasAccessToAllLanguages) => {
+				this.#currentUserHasAccessToAllLanguages = hasAccessToAllLanguages || false;
+				this.#setIsReadOnly();
+			});
+		});
+	}
+
+	getAppCulture() {
+		return this.#appLanguage.getValue()?.unique;
 	}
 
 	setLanguage(unique: string) {
-		const languages = this.#languages.getValue();
-		const language = languages.find((x) => x.unique === unique);
+		// clear the previous read-only state
+		const appLanguage = this.#appLanguage.getValue();
+		if (appLanguage?.unique) {
+			this.appLanguageReadOnlyState.removeState(this.#readOnlyStateIdentifier + appLanguage.unique);
+		}
+
+		// find the language
+		const language = this.#findLanguage(unique);
+
+		if (!language) {
+			throw new Error(`Language with unique ${unique} not found`);
+		}
+
+		// set the new language
 		this.#appLanguage.update(language);
+
+		// store the new language in local storage
+		localStorage.setItem(this.#localStorageKey, language?.unique);
+
+		// set the new read-only state
+		this.#setIsReadOnly();
 	}
 
 	async #observeLanguages() {
@@ -61,6 +100,17 @@ export class UmbAppLanguageContext extends UmbContextBase<UmbAppLanguageContext>
 	}
 
 	#initAppLanguage() {
+		// get the selected language from local storage
+		const uniqueFromLocalStorage = localStorage.getItem(this.#localStorageKey);
+
+		if (uniqueFromLocalStorage) {
+			const language = this.#findLanguage(uniqueFromLocalStorage);
+			if (language) {
+				this.setLanguage(language.unique);
+				return;
+			}
+		}
+
 		const defaultLanguage = this.#languages.getValue().find((x) => x.isDefault);
 		// TODO: do we always have a default language?
 		// do we always get the default language on the first request, or could it be on page 2?
@@ -68,6 +118,37 @@ export class UmbAppLanguageContext extends UmbContextBase<UmbAppLanguageContext>
 		if (!defaultLanguage?.unique) return;
 		this.setLanguage(defaultLanguage.unique);
 	}
+
+	#findLanguage(unique: string) {
+		return this.#languages.getValue().find((x) => x.unique === unique);
+	}
+
+	#setIsReadOnly() {
+		const appLanguage = this.#appLanguage.getValue();
+
+		if (!appLanguage) {
+			this.appLanguageReadOnlyState.clear();
+			return;
+		}
+
+		const unique = this.#readOnlyStateIdentifier + appLanguage.unique;
+		this.appLanguageReadOnlyState.removeState(unique);
+
+		if (this.#currentUserHasAccessToAllLanguages) {
+			return;
+		}
+
+		const isReadOnly = !this.#currentUserAllowedLanguages.includes(appLanguage.unique);
+
+		if (isReadOnly) {
+			const readOnlyState = {
+				unique,
+				message: 'You do not have permission to edit to this culture',
+			};
+
+			this.appLanguageReadOnlyState.addState(readOnlyState);
+		}
+	}
 }
 
 // Default export to enable this as a globalContext extension js:
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/index.ts b/src/Umbraco.Web.UI.Client/src/packages/language/index.ts
index 37e1e94844..b3a5c61dcc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/index.ts
@@ -7,4 +7,4 @@ export * from './repository/index.js';
 export * from './collection/index.js';
 export * from './global-contexts/index.js';
 
-export type { UmbLanguageDetailModel } from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/language/manifests.ts
index 4767edb2f9..c15d3fa682 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/manifests.ts
@@ -7,6 +7,7 @@ import { manifests as modalManifests } from './modals/manifests.js';
 import { manifests as collectionManifests } from './collection/manifests.js';
 import { manifests as globalContextManifests } from './global-contexts/manifests.js';
 import { manifest as conditionsManifest } from './conditions/multiple-app-languages.condition.js';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	...repositoryManifests,
@@ -25,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./permissions/language-access.workspace-context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Document',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/language/menu/manifests.ts
index a5349c78d8..957ef86f02 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/menu/manifests.ts
@@ -1,3 +1,5 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'menuItem',
@@ -18,7 +20,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./language-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Language',
 			},
 		],
@@ -30,7 +32,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Language Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Language',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language-root/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language-root/manifests.ts
index 08d9f3509f..e0fef2efe7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language-root/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language-root/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_LANGUAGE_COLLECTION_ALIAS } from '../../collection/index.js';
 import { UMB_LANGUAGE_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_LANGUAGE_ROOT_WORKSPACE_ALIAS } from './constants.js';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias:UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_LANGUAGE_ROOT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/manifests.ts
index c65b6e0a19..b0e3508017 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/language/workspace/language/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_LANGUAGE_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -25,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_LANGUAGE_WORKSPACE_ALIAS,
 			},
 		],
@@ -43,7 +44,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_LANGUAGE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/manifests.ts
index 57a6885292..1ca41da4d0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/manifests.ts
@@ -1,3 +1,5 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
 const UMB_LOG_VIEWER_WORKSPACE_ALIAS = 'Umb.Workspace.LogViewer';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -24,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_LOG_VIEWER_WORKSPACE_ALIAS,
 			},
 		],
@@ -42,7 +44,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_LOG_VIEWER_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts
index 9921108fdc..39e3004534 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts
@@ -7,6 +7,7 @@ import {
 	query,
 	state,
 	unsafeHTML,
+	when,
 } from '@umbraco-cms/backoffice/external/lit';
 import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
 import { marked } from '@umbraco-cms/backoffice/external/marked';
@@ -23,13 +24,15 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { sanitizeHTML } from '@umbraco-cms/backoffice/utils';
 
-const elementName = 'umb-input-markdown';
+interface UmbMarkdownEditorAction extends monaco.editor.IActionDescriptor {
+	icon?: string | null;
+}
 
 /**
  * @element umb-input-markdown
  * @fires change - when the value of the input changes
  */
-@customElement(elementName)
+@customElement('umb-input-markdown')
 export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement, '') {
 	protected override getFormElement() {
 		return this._codeEditor;
@@ -65,7 +68,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 	private _codeEditor?: UmbCodeEditorElement;
 
 	@state()
-	private _actionExtensions: Array<monaco.editor.IActionDescriptor> = [];
+	private _actionExtensions: Array<UmbMarkdownEditorAction> = [];
 
 	#mediaUrlRepository = new UmbMediaUrlRepository(this);
 
@@ -82,9 +85,10 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 			this.observe(umbExtensionsRegistry.byType('monacoMarkdownEditorAction'), (manifests) => {
 				manifests.forEach(async (manifest) => {
 					const api = await createExtensionApi(this, manifest, [this]);
-					const action: monaco.editor.IActionDescriptor = {
-						id: api.getUnique(),
-						label: api.getLabel(),
+					const action: UmbMarkdownEditorAction = {
+						id: manifest.alias ?? api.getUnique(),
+						label: this.localize.string(manifest.meta?.label ?? api.getLabel()),
+						icon: manifest.meta?.icon,
 						keybindings: api.getKeybindings(),
 						run: async () => await api.execute({ editor: this.#editor, overlaySize: this.overlaySize }),
 					};
@@ -180,7 +184,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 			run: () => this._insertBetweenSelection('```', '```', 'Code'),
 		});
 		this.#editor?.monacoEditor?.addAction({
-			label: 'Add Line',
+			label: 'Add Horizontal Line',
 			id: 'line',
 			run: () => this._insertLine(),
 		});
@@ -193,7 +197,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 		});
 	}
 
-	#onActionClick(event: any, action: monaco.editor.IActionDescriptor) {
+	#onActionClick(event: Event, action: monaco.editor.IActionDescriptor) {
 		event.stopPropagation();
 		const hasAction = this.#editor?.monacoEditor?.getAction(action.id);
 		if (!hasAction) throw new Error(`Action ${action.id} not found in the editor.`);
@@ -429,6 +433,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 	override render() {
 		return html`
 			${this.#renderToolbar()}
+
 			<umb-code-editor
 				language="markdown"
 				.code=${this.value as string}
@@ -439,6 +444,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 				@keypress=${this.#onKeyPress}
 				@loaded=${this.#onCodeEditorLoaded}>
 			</umb-code-editor>
+
 			${this.#renderPreview()}
 		`;
 	}
@@ -447,112 +453,120 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 		if (this.readonly) return nothing;
 		return html`
 			<div id="toolbar">
-				<uui-button-group>
-					<uui-button
-						compact
-						look="secondary"
-						label="Heading"
-						title="Heading, &lt;Ctrl+Shift+1&gt;"
-						@click=${() => this.#editor?.monacoEditor?.getAction('h1')?.run()}>
-						H
-					</uui-button>
-					<uui-button
-						compact
-						look="secondary"
-						label="Bold"
-						title="Bold, &lt;Ctrl+B&gt;"
-						@click=${() => this.#editor?.monacoEditor?.getAction('b')?.run()}>
-						B
-					</uui-button>
-					<uui-button
-						compact
-						look="secondary"
-						label="Italic"
-						title="Italic, &lt;Ctrl+I&gt;"
-						@click=${() => this.#editor?.monacoEditor?.getAction('i')?.run()}>
-						I
-					</uui-button>
-				</uui-button-group>
+				<div id="buttons">
+					<uui-button-group>
+						<uui-button
+							compact
+							look="default"
+							label="Heading"
+							title="Heading, &lt;Ctrl+Shift+1&gt;"
+							@click=${() => this.#editor?.monacoEditor?.getAction('h1')?.run()}>
+							<umb-icon name="icon-heading-1"></umb-icon>
+						</uui-button>
+						<uui-button
+							compact
+							look="default"
+							label="Bold"
+							title="Bold, &lt;Ctrl+B&gt;"
+							@click=${() => this.#editor?.monacoEditor?.getAction('b')?.run()}>
+							<umb-icon name="icon-bold"></umb-icon>
+						</uui-button>
+						<uui-button
+							compact
+							look="default"
+							label="Italic"
+							title="Italic, &lt;Ctrl+I&gt;"
+							@click=${() => this.#editor?.monacoEditor?.getAction('i')?.run()}>
+							<umb-icon name="icon-italic"></umb-icon>
+						</uui-button>
+					</uui-button-group>
 
-				<uui-button-group>
-					<uui-button
-						compact
-						look="secondary"
-						label="Quote"
-						title="Quote, &lt;Ctrl+Shift+.&gt;"
-						@click=${() => this.#editor?.monacoEditor?.getAction('q')?.run()}>
-						<uui-icon name="icon-quote"></uui-icon>
-					</uui-button>
-					<uui-button
-						compact
-						look="secondary"
-						label="Ordered List"
-						title="Ordered List, &lt;Ctrl+Shift+7&gt;"
-						@click=${() => this.#editor?.monacoEditor?.getAction('ol')?.run()}>
-						<uui-icon name="icon-ordered-list"></uui-icon>
-					</uui-button>
-					<uui-button
-						compact
-						look="secondary"
-						label="Unordered List"
-						title="Unordered List, &lt;Ctrl+Shift+8&gt;"
-						@click=${() => this.#editor?.monacoEditor?.getAction('ul')?.run()}>
-						<uui-icon name="icon-bulleted-list"></uui-icon>
-					</uui-button>
-				</uui-button-group>
-				<uui-button-group>
-					<uui-button
-						compact
-						look="secondary"
-						label="Code"
-						title="Code, &lt;Ctrl+E&gt;"
-						@click=${() => this.#editor?.monacoEditor?.getAction('code')?.run()}>
-						<uui-icon name="icon-code"></uui-icon>
-					</uui-button>
-					<uui-button
-						compact
-						look="secondary"
-						label="Line"
-						title="Line"
-						@click=${() => this.#editor?.monacoEditor?.getAction('line')?.run()}>
-						<uui-icon name="icon-width"></uui-icon>
-					</uui-button>
-					<uui-button
-						compact
-						look="secondary"
-						label="Image"
-						title="Image"
-						@click=${() => this.#editor?.monacoEditor?.getAction('image')?.run()}>
-						<uui-icon name="icon-picture"></uui-icon>
-					</uui-button>
-				</uui-button-group>
+					<uui-button-group>
+						<uui-button
+							compact
+							look="default"
+							label="Blockquote"
+							title="Blockquote, &lt;Ctrl+Shift+.&gt;"
+							@click=${() => this.#editor?.monacoEditor?.getAction('q')?.run()}>
+							<uui-icon name="icon-blockquote"></uui-icon>
+						</uui-button>
+						<uui-button
+							compact
+							look="default"
+							label="Ordered List"
+							title="Ordered List, &lt;Ctrl+Shift+7&gt;"
+							@click=${() => this.#editor?.monacoEditor?.getAction('ol')?.run()}>
+							<uui-icon name="icon-ordered-list"></uui-icon>
+						</uui-button>
+						<uui-button
+							compact
+							look="default"
+							label="Unordered List"
+							title="Unordered List, &lt;Ctrl+Shift+8&gt;"
+							@click=${() => this.#editor?.monacoEditor?.getAction('ul')?.run()}>
+							<uui-icon name="icon-bulleted-list"></uui-icon>
+						</uui-button>
+					</uui-button-group>
+					<uui-button-group>
+						<uui-button
+							compact
+							look="default"
+							label="Code"
+							title="Code, &lt;Ctrl+E&gt;"
+							@click=${() => this.#editor?.monacoEditor?.getAction('code')?.run()}>
+							<uui-icon name="icon-code"></uui-icon>
+						</uui-button>
+						<uui-button
+							compact
+							look="default"
+							label="Horizontal Rule"
+							title="Horizontal Rule"
+							@click=${() => this.#editor?.monacoEditor?.getAction('line')?.run()}>
+							<uui-icon name="icon-horizontal-rule"></uui-icon>
+						</uui-button>
+						<uui-button
+							compact
+							look="default"
+							label="Image"
+							title="Image"
+							@click=${() => this.#editor?.monacoEditor?.getAction('image')?.run()}>
+							<uui-icon name="icon-picture"></uui-icon>
+						</uui-button>
+					</uui-button-group>
 
-				<uui-button-group>
-					${this._actionExtensions.map(
-						(action) => html`
-							<uui-button
-								compact
-								look="secondary"
-								label=${action.label}
-								@click=${(event: any) => this.#onActionClick(event, action)}>
-								<uui-icon name="icon-link"></uui-icon>
-							</uui-button>
-						`,
-					)}
-				</uui-button-group>
-
-				<uui-button-group>
-					<uui-button
-						compact
-						label="Press F1 for all actions"
-						title="Press F1 for all actions"
-						@click=${() => {
-							this._focusEditor();
-							this.#editor?.monacoEditor?.trigger('', 'editor.action.quickCommand', '');
-						}}>
-						<uui-key>F1</uui-key>
-					</uui-button>
-				</uui-button-group>
+					<uui-button-group>
+						${this._actionExtensions.map(
+							(action) => html`
+								<uui-button
+									compact
+									look="default"
+									label=${this.localize.string(action.label)}
+									title=${this.localize.string(action.label)}
+									@click=${(event: Event) => this.#onActionClick(event, action)}>
+									${when(
+										action.icon,
+										() => html`<uui-icon name=${action.icon!}></uui-icon>`,
+										() => html`<span>${this.localize.string(action.label)}</span>`,
+									)}
+								</uui-button>
+							`,
+						)}
+					</uui-button-group>
+				</div>
+				<div id="actions">
+					<uui-button-group>
+						<uui-button
+							compact
+							label="Press F1 for all actions"
+							title="Press F1 for all actions"
+							@click=${() => {
+								this._focusEditor();
+								this.#editor?.monacoEditor?.trigger('', 'editor.action.quickCommand', '');
+							}}>
+							<uui-key>F1</uui-key>
+						</uui-button>
+					</uui-button-group>
+				</div>
 			</div>
 		`;
 	}
@@ -573,21 +587,58 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 			}
 
 			#toolbar {
-				background-color: var(--uui-color-background-alt);
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				border-radius: var(--uui-border-radius);
+				border: 1px solid var(--uui-color-border);
+				border-bottom: 0;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+				box-shadow:
+					0 2px 2px -2px rgba(34, 47, 62, 0.1),
+					0 8px 8px -4px rgba(34, 47, 62, 0.07);
+
+				background-color: var(--uui-color-surface-alt);
+				color: var(--color-text);
+
+				position: sticky;
+				top: -25px;
+				left: 0px;
+				right: 0px;
+				padding: var(--uui-size-3);
+				z-index: 9999999;
+
+				uui-key {
+					text-transform: uppercase;
+				}
+			}
+
+			#buttons {
+				flex: 1;
 				display: flex;
 				flex-wrap: wrap;
-				gap: var(--uui-size-2);
-				margin-bottom: var(--uui-size-2);
+				align-items: center;
+
+				uui-button-group:not(:last-child)::after {
+					content: '';
+					background-color: var(--uui-color-border);
+					width: 1px;
+					place-self: center;
+					height: 22px;
+					margin: 0 var(--uui-size-3);
+				}
 			}
 
 			umb-code-editor {
 				height: 200px;
 				border-radius: var(--uui-border-radius);
-				border: 1px solid var(--uui-color-divider-emphasis);
-			}
-
-			uui-button {
-				width: 50px;
+				border: 1px solid var(--uui-color-border);
+				border-top: 0;
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+				padding-top: var(--uui-size-3);
 			}
 
 			#preview {
@@ -623,6 +674,6 @@ export default UmbInputMarkdownElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbInputMarkdownElement;
+		'umb-input-markdown': UmbInputMarkdownElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/monaco-markdown-editor-action.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/monaco-markdown-editor-action.extension.ts
index ebe216aa1b..95aedbe030 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/monaco-markdown-editor-action.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/monaco-markdown-editor-action.extension.ts
@@ -5,7 +5,10 @@ export interface ManifestMonacoMarkdownEditorAction extends ManifestApi<any> {
 	meta?: MetaMonacoMarkdownEditorAction;
 }
 
-export type MetaMonacoMarkdownEditorAction = object;
+export type MetaMonacoMarkdownEditorAction = {
+	icon?: string | null;
+	label?: string | null;
+};
 
 declare global {
 	interface UmbExtensionManifestMap {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/imaging/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/imaging/index.ts
index d05152d5dc..2b1564e061 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/imaging/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/imaging/index.ts
@@ -1,3 +1,5 @@
 export * from './components/index.js';
 export { UmbImagingRepository } from './imaging.repository.js';
 export { UMB_IMAGING_REPOSITORY_ALIAS } from './constants.js';
+
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts
index 4fdc741116..4c4642c7cb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/index.ts
@@ -4,8 +4,9 @@ export * from './components/index.js';
 export * from './entity.js';
 export * from './repository/index.js';
 export * from './tree/types.js';
-export * from './types.js';
 export * from './utils.ts/index.js';
 export * from './workspace/index.js';
 
+export type * from './types.js';
+
 export { UMB_MEDIA_TYPE_PICKER_MODAL } from './tree/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts
index db67666029..7295ae54db 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEDIA_TYPE_TREE_ALIAS } from '../tree/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -20,7 +21,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./media-type-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.MediaType',
 			},
 		],
@@ -32,7 +33,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Media Type Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.MediaType',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts
index afc7e22354..00f6310476 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
 import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts
index 55c5dd0374..5fd768d67b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEDIA_TYPE_COMPOSITION_REPOSITORY_ALIAS } from '../repository/index.js';
 import { UMB_MEDIA_TYPE_WORKSPACE_ALIAS } from './constants.js';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -45,7 +46,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -63,7 +64,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts
index aa60af7914..17e832f7bf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection-toolbar.element.ts
@@ -3,6 +3,7 @@ import { UMB_MEDIA_COLLECTION_CONTEXT } from './media-collection.context-token.j
 import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
+/** @deprecated This component is no longer used in core; to be removed in Umbraco 17. */
 @customElement('umb-media-collection-toolbar')
 export class UmbMediaCollectionToolbarElement extends UmbLitElement {
 	#collectionContext?: UmbMediaCollectionContext;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
index 38f89d775d..c2625da049 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts
@@ -2,17 +2,15 @@ import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../entity.js'
 import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../workspace/media-workspace.context-token.js';
 import { UmbFileDropzoneItemStatus, type UmbUploadableItem } from '../dropzone/types.js';
 import type { UmbDropzoneElement } from '../dropzone/dropzone.element.js';
-import type { UmbMediaCollectionContext } from './media-collection.context.js';
 import { UMB_MEDIA_COLLECTION_CONTEXT } from './media-collection.context-token.js';
 import { customElement, html, query, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
-import './media-collection-toolbar.element.js';
-import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 
 @customElement('umb-media-collection')
 export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
-	#mediaCollection?: UmbMediaCollectionContext;
+	#collectionContext?: typeof UMB_MEDIA_COLLECTION_CONTEXT.TYPE;
 
 	@state()
 	private _progress = -1;
@@ -25,9 +23,11 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 
 	constructor() {
 		super();
-		this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (instance) => {
-			this.#mediaCollection = instance;
+
+		this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (context) => {
+			this.#collectionContext = context;
 		});
+
 		this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (instance) => {
 			this.observe(instance.unique, (unique) => {
 				this._unique = unique ?? null;
@@ -42,7 +42,7 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 				progressItems.forEach((item) => {
 					if (item.status === UmbFileDropzoneItemStatus.COMPLETE && !item.folder?.name) {
 						// We do not update folders as it may have children still being uploaded.
-						this.#mediaCollection?.updatePlaceholderStatus(item.unique, UmbFileDropzoneItemStatus.COMPLETE);
+						this.#collectionContext?.updatePlaceholderStatus(item.unique, UmbFileDropzoneItemStatus.COMPLETE);
 					}
 				});
 			},
@@ -57,13 +57,13 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 			.filter((p) => p.parentUnique === this._unique)
 			.map((p) => ({ unique: p.unique, status: p.status, name: p.temporaryFile?.file.name ?? p.folder?.name }));
 
-		this.#mediaCollection?.setPlaceholders(placeholders);
+		this.#collectionContext?.setPlaceholders(placeholders);
 		this.#observeProgressItems();
 	}
 
 	async #onComplete() {
 		this._progress = -1;
-		this.#mediaCollection?.requestCollection();
+		this.#collectionContext?.requestCollection();
 
 		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
 		const event = new UmbRequestReloadChildrenOfEntityEvent({
@@ -82,7 +82,9 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 
 	protected override renderToolbar() {
 		return html`
-			<umb-media-collection-toolbar slot="header"></umb-media-collection-toolbar>
+			<umb-collection-toolbar slot="header">
+				<umb-collection-filter-field></umb-collection-filter-field>
+			</umb-collection-toolbar>
 			${when(this._progress >= 0, () => html`<uui-loader-bar progress=${this._progress}></uui-loader-bar>`)}
 			<umb-dropzone
 				id="dropzone"
@@ -95,8 +97,11 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	}
 }
 
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 17. */
 export default UmbMediaCollectionElement;
 
+export { UmbMediaCollectionElement as element };
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-media-collection': UmbMediaCollectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/crop-change.event.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/crop-change.event.ts
new file mode 100644
index 0000000000..0c9b076fba
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/crop-change.event.ts
@@ -0,0 +1,8 @@
+export class UmbImageCropChangeEvent extends Event {
+	public static readonly TYPE = 'imagecrop-change';
+
+	public constructor(args?: EventInit) {
+		// mimics the native change event
+		super(UmbImageCropChangeEvent.TYPE, { bubbles: false, composed: false, cancelable: false, ...args });
+	}
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/focalpoint-change.event.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/focalpoint-change.event.ts
new file mode 100644
index 0000000000..ba38c5e87f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/focalpoint-change.event.ts
@@ -0,0 +1,13 @@
+import type { UmbFocalPointModel } from '../../types.js';
+
+export class UmbFocalPointChangeEvent extends Event {
+	public static readonly TYPE = 'focalpoint-change';
+
+	public focalPoint: UmbFocalPointModel;
+
+	public constructor(focalPoint: UmbFocalPointModel, args?: EventInit) {
+		// mimics the native change event
+		super(UmbFocalPointChangeEvent.TYPE, { bubbles: false, composed: false, cancelable: false, ...args });
+		this.focalPoint = focalPoint;
+	}
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
index c330b50c43..3ca9812849 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-field.element.ts
@@ -7,6 +7,8 @@ import type {
 	UmbImageCropperCrops,
 	UmbImageCropperFocalPoint,
 	UmbImageCropperPropertyEditorValue,
+	UmbFocalPointChangeEvent,
+	UmbImageCropChangeEvent,
 } from './index.js';
 import { css, customElement, html, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -87,7 +89,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 		this.currentCrop = { ...this.crops[index] };
 	}
 
-	#onCropChange = (event: CustomEvent) => {
+	#onCropChange = (event: UmbImageCropChangeEvent) => {
 		const target = event.target as UmbImageCropperElement;
 		const value = target.value;
 
@@ -102,8 +104,8 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 		this.#updateValue();
 	};
 
-	#onFocalPointChange = (event: CustomEvent) => {
-		this.focalPoint = event.detail;
+	#onFocalPointChange = (event: UmbFocalPointChangeEvent) => {
+		this.focalPoint = { top: event.focalPoint.top, left: event.focalPoint.left };
 		this.#updateValue();
 	};
 
@@ -137,7 +139,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 					.src=${this.source}
 					.value=${this.currentCrop}
 					?hideFocalPoint=${this.hideFocalPoint}
-					@change=${this.#onCropChange}>
+					@imagecrop-change=${this.#onCropChange}>
 				</umb-image-cropper>
 			`;
 		}
@@ -147,7 +149,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 				.focalPoint=${this.focalPoint}
 				.src=${this.source}
 				?hideFocalPoint=${this.hideFocalPoint}
-				@change=${this.#onFocalPointChange}>
+				@focalpoint-change=${this.#onFocalPointChange}>
 			</umb-image-cropper-focus-setter>
 			<div id="actions">${this.renderActions()}</div>
 		`;
@@ -200,6 +202,7 @@ export class UmbInputImageCropperFieldElement extends UmbLitElement {
 		#actions {
 			display: flex;
 			justify-content: space-between;
+			margin-top: 0.5rem;
 		}
 
 		umb-image-cropper-focus-setter {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
index 2760dbfae0..0963940875 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
@@ -1,45 +1,51 @@
-import type { UmbImageCropperFocalPoint } from './index.js';
+import { type UmbImageCropperFocalPoint, UmbFocalPointChangeEvent } from './index.js';
+import type { UmbFocalPointModel } from '../../types.js';
+import { drag } from '@umbraco-cms/backoffice/external/uui';
 import { clamp } from '@umbraco-cms/backoffice/utils';
-import { css, customElement, html, nothing, property, query, LitElement } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, classMap, ifDefined, html, nothing, state, property, query } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-image-cropper-focus-setter')
-export class UmbImageCropperFocusSetterElement extends LitElement {
+export class UmbImageCropperFocusSetterElement extends UmbLitElement {
 	@query('#image')
 	imageElement!: HTMLImageElement;
 
 	@query('#wrapper')
-	wrapperElement?: HTMLImageElement;
+	wrapperElement?: HTMLElement;
 
 	@query('#focal-point')
-	focalPointElement!: HTMLImageElement;
+	focalPointElement!: HTMLElement;
+
+	@state()
+	private _isDraggingGridHandle = false;
+
+	@state()
+	private coords = { x: 0, y: 0 };
 
 	@property({ attribute: false })
-	focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
+	set focalPoint(value) {
+		this.#focalPoint = value;
+		this.#setFocalPointStyle(this.#focalPoint.left, this.#focalPoint.top);
+		this.#onFocalPointUpdated();
+	}
+	get focalPoint() {
+		return this.#focalPoint;
+	}
+
+	#focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
 
 	@property({ type: Boolean })
 	hideFocalPoint = false;
+	
+	@property({ type: Boolean, reflect: true })
+	disabled = false;
 
 	@property({ type: String })
 	src?: string;
 
-	#DOT_RADIUS = 6 as const;
-
-	override disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#removeEventListeners();
-	}
-
-	protected override updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-		super.updated(_changedProperties);
-
-		if (this.hideFocalPoint) return;
-
-		if (_changedProperties.has('focalPoint') && this.focalPointElement) {
-			this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
-			this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
-		}
-	}
+	#DOT_RADIUS = 8 as const;
 
 	protected override update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.update(changedProperties);
@@ -61,8 +67,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 		await this.updateComplete; // Wait for the @query to be resolved
 
 		if (!this.hideFocalPoint) {
-			this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
-			this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
+			this.#setFocalPointStyle(this.focalPoint.left, this.focalPoint.top);
 		}
 
 		this.imageElement.onload = () => {
@@ -78,73 +83,143 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 				this.imageElement.style.height = '100%';
 			}
 
+			this.#resetCoords();
+			
 			this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
 			this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
 		};
+	}
 
-		if (!this.hideFocalPoint) {
-			this.#addEventListeners();
+	#onFocalPointUpdated() {
+		if (this.#isCentered(this.#focalPoint)) {
+			this.#resetCoords();
 		}
 	}
 
-	async #addEventListeners() {
-		await this.updateComplete; // Wait for the @query to be resolved
-		this.imageElement?.addEventListener('mousedown', this.#onStartDrag);
-		window.addEventListener('mouseup', this.#onEndDrag);
+	#coordsToFactor(x: number, y: number) {
+		const top = (y / 100) / y * 50;
+		const left = (x / 100) / x * 50;
+
+		return { top, left }; 
 	}
 
-	#removeEventListeners() {
-		this.imageElement?.removeEventListener('mousedown', this.#onStartDrag);
-		window.removeEventListener('mouseup', this.#onEndDrag);
+	#setFocalPoint(x: number, y: number, width: number, height: number) {
+
+		const left = clamp((x / width), 0, 1);
+		const top = clamp((y / height), 0, 1);
+
+		this.#coordsToFactor(x, y);
+
+		const focalPoint = { left, top } as UmbFocalPointModel;
+
+		console.log("setFocalPoint", focalPoint)
+
+		this.dispatchEvent(new UmbFocalPointChangeEvent(focalPoint));
 	}
 
-	#onStartDrag = (event: MouseEvent) => {
-		event.preventDefault();
-		window.addEventListener('mousemove', this.#onDrag);
-	};
-
-	#onEndDrag = (event: MouseEvent) => {
-		event.preventDefault();
-		window.removeEventListener('mousemove', this.#onDrag);
-	};
-
-	#onDrag = (event: MouseEvent) => {
-		event.preventDefault();
-		this.#onSetFocalPoint(event);
-	};
-
-	#onSetFocalPoint(event: MouseEvent) {
-		event.preventDefault();
-		if (this.hideFocalPoint) return;
-
-		if (!this.focalPointElement || !this.imageElement) return;
-
-		const image = this.imageElement.getBoundingClientRect();
-
-		const x = clamp(event.clientX - image.left, 0, image.width);
-		const y = clamp(event.clientY - image.top, 0, image.height);
-
-		const left = clamp(x / image.width, 0, 1);
-		const top = clamp(y / image.height, 0, 1);
+	#setFocalPointStyle(left: number, top: number) {
+		if (!this.focalPointElement) return;
 
 		this.focalPointElement.style.left = `calc(${left * 100}% - ${this.#DOT_RADIUS}px)`;
 		this.focalPointElement.style.top = `calc(${top * 100}% - ${this.#DOT_RADIUS}px)`;
+	}
 
-		this.dispatchEvent(
-			new CustomEvent('change', {
-				detail: { left, top },
-				bubbles: false,
-				composed: false,
-			}),
-		);
+	#isCentered(focalPoint: UmbImageCropperFocalPoint) {
+		if (!this.focalPoint) return;
+
+		return focalPoint.left === 0.5 && focalPoint.top === 0.5;
+	}
+
+	#resetCoords() {
+		if (!this.imageElement) return;
+
+		// Init x and y coords from half of rendered image size, which is equavalient to focal point { left: 0.5, top: 0.5 }.
+		this.coords.x = this.imageElement?.clientWidth / 2;
+		this.coords.y = this.imageElement.clientHeight / 2;
+	}
+
+	#handleGridDrag(event: PointerEvent) {
+		if (this.disabled || this.hideFocalPoint) return;
+
+		const grid = this.wrapperElement;
+		const handle = this.focalPointElement;
+
+		if (!grid) return;
+
+		const { width, height } = grid.getBoundingClientRect();
+
+		handle?.focus();
+		event.preventDefault();
+		event.stopPropagation();
+
+		this._isDraggingGridHandle = true;
+
+		drag(grid, {
+			onMove: (x, y) => {
+				// check if coordinates are not NaN (can happen when dragging outside of the grid)
+				if (isNaN(x) || isNaN(y)) return;
+
+				this.coords.x = x;
+				this.coords.y = y;
+
+				this.#setFocalPoint(x, y, width, height);
+			},
+			onStop: () => (this._isDraggingGridHandle = false),
+			initialEvent: event,
+		});
+	}
+
+	#handleGridKeyDown(event: KeyboardEvent) {
+		if (this.disabled || this.hideFocalPoint) return;
+		
+		const increment = event.shiftKey ? 1 : 10;
+
+		const grid = this.wrapperElement;
+		if (!grid) return;
+
+		const { width, height } = grid.getBoundingClientRect();
+
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			this.coords.x = clamp(this.coords.x - increment, 0, width);
+			this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+		}
+
+		if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			this.coords.x = clamp(this.coords.x + increment, 0, width);
+			this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+		}
+
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			this.coords.y = clamp(this.coords.y - increment, 0, height);
+			this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+		}
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			this.coords.y = clamp(this.coords.y + increment, 0, height);
+			this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+		}
 	}
 
 	override render() {
 		if (!this.src) return nothing;
 		return html`
-			<div id="wrapper">
-				<img id="image" @click=${this.#onSetFocalPoint} @keydown=${() => nothing} src=${this.src} alt="" />
-				<div id="focal-point" class=${this.hideFocalPoint ? 'hidden' : ''}></div>
+			<div id="wrapper"
+				@mousedown=${this.#handleGridDrag}
+        		@touchstart=${this.#handleGridDrag}>
+				<img id="image" @keydown=${() => nothing} src=${this.src} alt="" />
+				<span id="focal-point"
+					class=${classMap({
+						'focal-point--dragging': this._isDraggingGridHandle,
+						'hidden': this.hideFocalPoint
+					})}
+					tabindex=${ifDefined(this.disabled ? undefined : '0')}
+					aria-label="${this.localize.term('general_focalPoint')}"
+					@keydown=${this.#handleGridKeyDown}>
+				</span>
 			</div>
 		`;
 	}
@@ -161,12 +236,16 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 		}
 		/* Wrapper is used to make the focal point position responsive to the image size */
 		#wrapper {
-			overflow: hidden;
 			position: relative;
 			display: flex;
 			margin: auto;
 			max-width: 100%;
 			max-height: 100%;
+			box-sizing: border-box;	
+			forced-color-adjust: none;
+		}
+		:host(:not([hidefocalpoint])) #wrapper {
+			cursor: crosshair;
 		}
 		#image {
 			margin: auto;
@@ -178,11 +257,18 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 			position: absolute;
 			width: calc(2 * var(--dot-radius));
 			height: calc(2 * var(--dot-radius));
-			outline: 3px solid black;
 			top: 0;
+			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+			border: solid 2px white;
 			border-radius: 50%;
 			pointer-events: none;
-			background-color: white;
+			background-color: var(--uui-palette-spanish-pink-light);
+			transition: 150ms transform;
+			box-sizing: inherit;
+		}
+		.focal-point--dragging {
+			cursor: none;
+			transform: scale(1.5);
 		}
 		#focal-point.hidden {
 			display: none;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
index 1f838f82bd..6f99d7bd40 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
@@ -1,10 +1,11 @@
-import type { UmbImageCropperCrop, UmbImageCropperFocalPoint } from './index.js';
+import { UmbImageCropChangeEvent, type UmbImageCropperCrop, type UmbImageCropperFocalPoint } from './index.js';
 import { calculateExtrapolatedValue, clamp, inverseLerp, lerp } from '@umbraco-cms/backoffice/utils';
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { customElement, property, query, state, LitElement, css, html } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, property, query, state, css, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-image-cropper')
-export class UmbImageCropperElement extends LitElement {
+export class UmbImageCropperElement extends UmbLitElement {
 	@query('#viewport') viewportElement!: HTMLElement;
 	@query('#mask') maskElement!: HTMLElement;
 	@query('#image') imageElement!: HTMLImageElement;
@@ -261,19 +262,19 @@ export class UmbImageCropperElement extends LitElement {
 			coordinates: { x1, x2, y1, y2 },
 		};
 
-		this.dispatchEvent(new CustomEvent('change'));
+		this.dispatchEvent(new UmbImageCropChangeEvent());
 	}
 
 	#onCancel() {
 		//TODO: How should we handle canceling the crop?
-		this.dispatchEvent(new CustomEvent('change'));
+		this.dispatchEvent(new UmbImageCropChangeEvent());
 	}
 
 	#onReset() {
 		if (!this.value) return;
 
 		delete this.value.coordinates;
-		this.dispatchEvent(new CustomEvent('change'));
+		this.dispatchEvent(new UmbImageCropChangeEvent());
 	}
 
 	#onSliderUpdate(event: InputEvent) {
@@ -330,11 +331,12 @@ export class UmbImageCropperElement extends LitElement {
 				min="0"
 				max="1"
 				value="0"
-				step="0.001"></uui-slider>
+				step="0.001">
+			</uui-slider>
 			<div id="actions">
-				<uui-button @click=${this.#onReset} label="Reset"></uui-button>
-				<uui-button look="secondary" @click=${this.#onCancel} label="Cancel"></uui-button>
-				<uui-button look="primary" color="positive" @click=${this.#onSave} label="Save"></uui-button>
+				<uui-button @click=${this.#onReset} label="${this.localize.term('general_reset')}"></uui-button>
+				<uui-button look="secondary" @click=${this.#onCancel} label="${this.localize.term('general_cancel')}"></uui-button>
+				<uui-button look="primary" color="positive" @click=${this.#onSave} label="${this.localize.term('buttons_save')}"></uui-button>
 			</div>
 		`;
 	}
@@ -364,6 +366,7 @@ export class UmbImageCropperElement extends LitElement {
 			display: flex;
 			justify-content: flex-end;
 			gap: var(--uui-size-space-1);
+			margin-top: 0.5rem;
 		}
 
 		#mask {
@@ -379,6 +382,10 @@ export class UmbImageCropperElement extends LitElement {
 			user-select: none;
 		}
 
+		#viewport #image {
+			cursor: move;
+		}
+
 		#slider {
 			width: 100%;
 			height: 0px; /* TODO: FIX - This is needed to prevent the slider from taking up more space than needed */
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/index.ts
index 8e082a62c0..558f325be0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/index.ts
@@ -1,2 +1,4 @@
 export * from './input-image-cropper.element.js';
+export * from './crop-change.event.js';
+export * from './focalpoint-change.event.js';
 export * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
index 7a33b3de12..01223f0fdd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
@@ -108,7 +108,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
 	}
 
 	@property({ type: Array })
-	allowedContentTypeIds?: string[] | undefined;
+	allowedContentTypeIds?: Array<string> | undefined;
 
 	@property({ type: Boolean })
 	showOpenButton?: boolean;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts
index c1114d7815..1681aedd98 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEDIA_TREE_ALIAS } from '../tree/index.js';
 import { UMB_MEDIA_MENU_ALIAS } from './constants.js';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./media-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Media',
 			},
 		],
@@ -39,7 +40,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Media Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Media',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/index.ts
index 134ffc53a6..16952e6ae1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/index.ts
@@ -1,4 +1,4 @@
 export * from './components/index.js';
 export * from './media-picker-modal.element.js';
 export * from './media-picker-modal.token.js';
-export * from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts
index 89e4f3ee1f..34cdee7872 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/repository/detail/media-detail.server.data-source.ts
@@ -38,6 +38,7 @@ export class UmbMediaServerDataSource implements UmbDetailDataSource<UmbMediaDet
 			mediaType: {
 				unique: '',
 				collection: null,
+				icon: null,
 			},
 			isTrashed: false,
 			values: [],
@@ -90,6 +91,7 @@ export class UmbMediaServerDataSource implements UmbDetailDataSource<UmbMediaDet
 			mediaType: {
 				unique: data.mediaType.id,
 				collection: data.mediaType.collection ? { unique: data.mediaType.collection.id } : null,
+				icon: data.mediaType.icon,
 			},
 			isTrashed: data.isTrashed,
 		};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/index.ts
index ee32f4921b..f46e1142c6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/tree/index.ts
@@ -3,4 +3,4 @@ export { UMB_MEDIA_TREE_REPOSITORY_ALIAS, UMB_MEDIA_TREE_STORE_ALIAS, UMB_MEDIA_
 export { UMB_MEDIA_TREE_STORE_CONTEXT } from './media-tree.store.context-token.js';
 export { UMB_MEDIA_TREE_PICKER_MODAL } from './media-tree-picker-modal.token.js';
 export { type UmbMediaTreeStore } from './media-tree.store.js';
-export * from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts
index c1bde82de5..2b88e6435d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/types.ts
@@ -1,12 +1,13 @@
 import type { UmbMediaEntityType } from './entity.js';
 import type { UmbEntityVariantModel, UmbEntityVariantOptionModel } from '@umbraco-cms/backoffice/variant';
 import type { UmbReferenceByUnique } from '@umbraco-cms/backoffice/models';
-import type { UmbContentDetailModel, UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbContentDetailModel, UmbElementValueModel } from '@umbraco-cms/backoffice/content';
 
 export interface UmbMediaDetailModel extends UmbContentDetailModel {
 	mediaType: {
 		unique: string;
 		collection: UmbReferenceByUnique | null;
+		icon?: string | null;
 	};
 	entityType: UmbMediaEntityType;
 	isTrashed: boolean;
@@ -25,7 +26,7 @@ export interface UmbMediaUrlInfoModel {
 export interface UmbMediaVariantModel extends UmbEntityVariantModel {}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface UmbMediaValueModel<ValueType = unknown> extends UmbContentValueModel<ValueType> {}
+export interface UmbMediaValueModel<ValueType = unknown> extends UmbElementValueModel<ValueType> {}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface UmbMediaVariantOptionModel extends UmbEntityVariantOptionModel<UmbEntityVariantModel> {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
index 37161fba4b..a48480ee07 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
@@ -1,6 +1,7 @@
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
 import { UMB_CONTENT_HAS_PROPERTIES_WORKSPACE_CONDITION } from '@umbraco-cms/backoffice/content';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const UMB_MEDIA_WORKSPACE_ALIAS = 'Umb.Workspace.Media';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_WORKSPACE_ALIAS,
 			},
 			{
@@ -48,7 +49,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_WORKSPACE_ALIAS,
 			},
 			{
@@ -69,7 +70,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_WORKSPACE_ALIAS,
 			},
 		],
@@ -87,7 +88,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEDIA_WORKSPACE_ALIAS,
 			},
 			{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts
index 173dad9b46..e22db20690 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace.context.ts
@@ -81,6 +81,11 @@ export class UmbMediaWorkspaceContext
 
 	readonly variants = this.#data.createObservablePartOfCurrent((data) => data?.variants || []);
 
+	readonly values = this.#data.createObservablePartOfCurrent((data) => data?.values);
+	getValues() {
+		return this.#data.getCurrent()?.values;
+	}
+
 	readonly urls = this.#data.createObservablePartOfCurrent((data) => data?.urls || []);
 
 	readonly structure = new UmbContentTypeStructureManager(this, new UmbMediaTypeDetailRepository(this));
@@ -461,7 +466,6 @@ export class UmbMediaWorkspaceContext
 	}
 
 	public override destroy(): void {
-		this.#data.destroy();
 		this.structure.destroy();
 		this.#languageRepository.destroy();
 		super.destroy();
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-root/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-root/manifests.ts
index 25634ebe02..a066e19b59 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-root/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-root/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEMBER_GROUP_COLLECTION_ALIAS } from '../../collection/manifests.js';
 import { UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEMBER_GROUP_ROOT_WORKSPACE_ALIAS } from './constants.js';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_GROUP_ROOT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group/manifests.ts
index 3f82c51f36..ebfd58fccb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group/manifests.ts
@@ -5,6 +5,7 @@ import type {
 	ManifestWorkspaceView,
 } from '@umbraco-cms/backoffice/workspace';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const UMB_MEMBER_GROUP_WORKSPACE_ALIAS = 'Umb.Workspace.MemberGroup';
 
@@ -33,7 +34,7 @@ const workspaceActions: Array<ManifestWorkspaceActions> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
 			},
 		],
@@ -54,7 +55,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts
index 69aea21501..39f0b5b1e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEMBER_TYPE_TREE_ALIAS } from '../tree/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -20,7 +21,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./member-type-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.MemberType',
 			},
 		],
@@ -32,7 +33,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Member Type Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.MemberType',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/manifests.ts
index c0d1aea14d..1d9925c118 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEMBER_TYPE_COMPOSITION_REPOSITORY_ALIAS } from '../repository/index.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_TYPE_WORKSPACE_ALIAS,
 			},
 		],
@@ -45,7 +46,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/index.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/index.ts
index 89461c5f07..7e24407b1c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/index.ts
@@ -1,2 +1,4 @@
 export { UmbMemberCollectionRepository } from './repository/index.js';
 export { UMB_MEMBER_COLLECTION_ALIAS } from './manifests.js';
+
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection-header.element.ts
index be278233d0..5c6dde6c9a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection-header.element.ts
@@ -1,22 +1,19 @@
 import { UmbMemberTypeTreeRepository } from '../../member-type/tree/member-type-tree.repository.js';
 import type { UmbMemberTypeItemModel } from '../../member-type/repository/item/types.js';
-import type { UmbMemberCollectionContext } from './member-collection.context.js';
 import { UMB_MEMBER_COLLECTION_CONTEXT } from './member-collection.context-token.js';
 import { css, customElement, html, ifDefined, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-member-collection-header')
 export class UmbMemberCollectionHeaderElement extends UmbLitElement {
-	@state()
-	private _contentTypes: Array<UmbMemberTypeItemModel> = [];
+	#collectionContext?: typeof UMB_MEMBER_COLLECTION_CONTEXT.TYPE;
 
-	#inputTimer?: NodeJS.Timeout;
-	#inputTimerAmount = 300;
-
-	#collectionContext?: UmbMemberCollectionContext;
 	// TODO: Should we make a collection repository for member types?
 	#contentTypeRepository = new UmbMemberTypeTreeRepository(this);
 
+	@state()
+	private _contentTypes: Array<UmbMemberTypeItemModel> = [];
+
 	@state()
 	private _selectedContentTypeUnique?: string;
 
@@ -45,33 +42,23 @@ export class UmbMemberCollectionHeaderElement extends UmbLitElement {
 
 	get #getContentTypeFilterLabel() {
 		if (!this._selectedContentTypeUnique) return this.localize.term('general_all') + ' Member types';
-
 		return (
 			this._contentTypes.find((type) => type.unique === this._selectedContentTypeUnique)?.name ||
 			this.localize.term('general_all')
 		);
 	}
 
-	#onSearch(event: InputEvent) {
-		const target = event.target as HTMLInputElement;
-		const filter = target.value || '';
-		clearTimeout(this.#inputTimer);
-		this.#inputTimer = setTimeout(() => this.#collectionContext?.setFilter({ filter }), this.#inputTimerAmount);
-	}
-
 	#onContentTypeFilterChange(contentTypeUnique: string) {
 		this._selectedContentTypeUnique = contentTypeUnique;
 		this.#collectionContext?.setMemberTypeFilter(contentTypeUnique);
 	}
 
 	override render() {
-		return html`<umb-collection-action-bundle></umb-collection-action-bundle>
-			<uui-input
-				@input=${this.#onSearch}
-				label=${this.localize.term('general_search')}
-				placeholder=${this.localize.term('general_search')}
-				id="input-search"></uui-input>
-			${this.#renderContentTypeFilter()} `;
+		return html`
+			<umb-collection-action-bundle></umb-collection-action-bundle>
+			<umb-collection-filter-field></umb-collection-filter-field>
+			${this.#renderContentTypeFilter()}
+		`;
 	}
 
 	#renderContentTypeFilter() {
@@ -117,7 +104,7 @@ export class UmbMemberCollectionHeaderElement extends UmbLitElement {
 				--uui-button-content-align: left;
 			}
 
-			uui-input {
+			umb-collection-filter-field {
 				width: 100%;
 			}
 		`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection.element.ts
index 91ad00b929..6c63585f1d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/collection/member-collection.element.ts
@@ -6,12 +6,15 @@ import './member-collection-header.element.js';
 @customElement('umb-member-collection')
 export class UmbMemberCollectionElement extends UmbCollectionDefaultElement {
 	protected override renderToolbar() {
-		return html`<umb-member-collection-header slot="header"></umb-member-collection-header> `;
+		return html`<umb-member-collection-header slot="header"></umb-member-collection-header>`;
 	}
 }
 
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 17. */
 export default UmbMemberCollectionElement;
 
+export { UmbMemberCollectionElement as element };
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-member-collection': UmbMemberCollectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
index ec3dcca072..1ed25c4d41 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts
@@ -117,7 +117,7 @@ export class UmbMemberPickerModalElement extends UmbModalBaseElement<
 				<uui-button
 					color="positive"
 					look="primary"
-					label=${this.localize.term('general_submit')}
+					label=${this.localize.term('general_choose')}
 					@click=${() => this.modalContext?.submit()}></uui-button>
 			</div>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/types.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/types.ts
index ca70bdbb59..ffc39069ec 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/types.ts
@@ -1,8 +1,9 @@
 import type { UmbMemberEntityType } from './entity.js';
 import type { UmbMemberKindType } from './utils/index.js';
 import type { UmbEntityVariantModel, UmbEntityVariantOptionModel } from '@umbraco-cms/backoffice/variant';
-import type { UmbContentDetailModel, UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbContentDetailModel, UmbElementValueModel } from '@umbraco-cms/backoffice/content';
 
+export type * from './collection/types.js';
 export interface UmbMemberDetailModel extends UmbContentDetailModel {
 	email: string;
 	entityType: UmbMemberEntityType;
@@ -28,7 +29,7 @@ export interface UmbMemberDetailModel extends UmbContentDetailModel {
 export interface UmbMemberVariantModel extends UmbEntityVariantModel {}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface UmbMemberValueModel<ValueType = unknown> extends UmbContentValueModel<ValueType> {}
+export interface UmbMemberValueModel<ValueType = unknown> extends UmbElementValueModel<ValueType> {}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface UmbMemberVariantOptionModel extends UmbEntityVariantOptionModel<UmbMemberVariantModel> {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-root/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-root/manifests.ts
index afe1a7fa56..bfc4101ec5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-root/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member-root/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEMBER_COLLECTION_ALIAS } from '../../collection/manifests.js';
 import { UMB_MEMBER_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_MEMBER_ROOT_WORKSPACE_ALIAS } from './constants.js';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_ROOT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/manifests.ts
index dc4946fb60..cb8be75248 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/manifests.ts
@@ -6,6 +6,7 @@ import type {
 } from '@umbraco-cms/backoffice/workspace';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import { UMB_CONTENT_HAS_PROPERTIES_WORKSPACE_CONDITION } from '@umbraco-cms/backoffice/content';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const UMB_MEMBER_WORKSPACE_ALIAS = 'Umb.Workspace.Member';
 
@@ -34,7 +35,7 @@ const workspaceActions: Array<ManifestWorkspaceActions> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_WORKSPACE_ALIAS,
 			},
 		],
@@ -55,7 +56,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_WORKSPACE_ALIAS,
 			},
 			{
@@ -76,7 +77,7 @@ export const workspaceViews: Array<ManifestWorkspaceView> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_MEMBER_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace.context.ts
index 12ecd26c37..0c54e85606 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace.context.ts
@@ -77,6 +77,11 @@ export class UmbMemberWorkspaceContext
 
 	readonly variants = this.#data.createObservablePartOfCurrent((data) => data?.variants ?? []);
 
+	readonly values = this.#data.createObservablePartOfCurrent((data) => data?.values);
+	getValues() {
+		return this.#data.getCurrent()?.values;
+	}
+
 	readonly structure = new UmbContentTypeStructureManager(this, new UmbMemberTypeDetailRepository(this));
 	readonly variesByCulture = this.structure.ownerContentTypeObservablePart((x) => x?.variesByCulture);
 	readonly variesBySegment = this.structure.ownerContentTypeObservablePart((x) => x?.variesBySegment);
@@ -449,7 +454,6 @@ export class UmbMemberWorkspaceContext
 	}
 
 	public override destroy(): void {
-		this.#data.destroy();
 		super.destroy();
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts
index e1f29e9592..9f11c59b59 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts
@@ -9,6 +9,7 @@ import {
 	property,
 	repeat,
 	state,
+	when,
 } from '@umbraco-cms/backoffice/external/lit';
 import { simpleHashCode } from '@umbraco-cms/backoffice/observable-api';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -204,6 +205,7 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 					},
 					value: {
 						link: {
+							icon: data?.icon,
 							name: data?.name,
 							published: data?.published,
 							queryString: data?.queryString,
@@ -311,25 +313,20 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 				detail=${(link.url || '') + (link.queryString || '')}
 				?readonly=${this.readonly}>
 				<umb-icon slot="icon" name=${link.icon || 'icon-link'}></umb-icon>
-				<uui-action-bar slot="actions">
-					${this.#renderEditAction(href)} ${this.#renderRemoveAction(index)}
-				</uui-action-bar>
+				${when(
+					!this.readonly,
+					() => html`
+						<uui-action-bar slot="actions">
+							<uui-button
+								label=${this.localize.term('general_remove')}
+								@click=${() => this.#requestRemoveItem(index)}></uui-button>
+						</uui-action-bar>
+					`,
+				)}
 			</uui-ref-node>
 		`;
 	}
 
-	#renderEditAction(href?: string) {
-		if (this.readonly || !href) return nothing;
-		return html` <uui-button href=${href} label=${this.localize.term('general_edit')}></uui-button> `;
-	}
-
-	#renderRemoveAction(index: number) {
-		if (this.readonly) return nothing;
-		return html` <uui-button
-			@click=${() => this.#requestRemoveItem(index)}
-			label=${this.localize.term('general_remove')}></uui-button>`;
-	}
-
 	static override styles = [
 		css`
 			#btn-add {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts
index 88060e1e19..39c8a87112 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.ts
@@ -1,145 +1,154 @@
-import type { UmbLinkPickerLink, UmbLinkPickerLinkType } from './types.js';
+import type { UmbLinkPickerLink } from './types.js';
 import type {
 	UmbLinkPickerConfig,
 	UmbLinkPickerModalData,
 	UmbLinkPickerModalValue,
 } from './link-picker-modal.token.js';
-import type { UmbTreeElement, UmbTreeSelectionConfiguration } from '@umbraco-cms/backoffice/tree';
-import { css, html, nothing, customElement, query, state, styleMap } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
+import { css, customElement, html, nothing, query, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbDocumentDetailRepository } from '@umbraco-cms/backoffice/document';
+import { UmbMediaDetailRepository } from '@umbraco-cms/backoffice/media';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { UMB_DOCUMENT_TREE_ALIAS } from '@umbraco-cms/backoffice/document';
+import type { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
+import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
+import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { isUmbracoFolder, UmbMediaTypeStructureRepository } from '@umbraco-cms/backoffice/media-type';
+
+type UmbInputPickerEvent = CustomEvent & { target: { value?: string } };
 
 @customElement('umb-link-picker-modal')
 export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPickerModalData, UmbLinkPickerModalValue> {
 	@state()
-	private _selectionConfiguration: UmbTreeSelectionConfiguration = {
-		multiple: false,
-		selectable: true,
-		selection: [],
-	};
-
-	@state()
-	_selectedKey?: string;
-
-	/**
-	 * The link object, notice this is frozen, as it comes directly from the State. So it cannot be manipulated.
-	 */
-	@state()
-	readonly _link: UmbLinkPickerLink = {};
-
-	@state()
-	_layout: UmbLinkPickerConfig = {
+	private _config: UmbLinkPickerConfig = {
 		hideAnchor: false,
+		hideTarget: false,
 	};
 
 	@state()
-	documentExpand = false;
+	private _allowedMediaTypeIds?: Array<string>;
 
-	@state()
-	mediaExpanded = false;
+	@query('umb-input-document')
+	private _documentPickerElement?: UmbInputDocumentElement;
 
-	@query('#link-input')
-	private _linkInput!: UUIInputElement;
+	@query('umb-input-media')
+	private _mediaPickerElement?: UmbInputMediaElement;
 
-	@query('#anchor-input')
-	private _linkQueryInput?: UUIInputElement;
-
-	@query('#link-title-input')
-	private _linkTitleInput!: UUIInputElement;
-
-	override connectedCallback() {
-		super.connectedCallback();
-		if (!this.data) return;
-
-		if (this.modalContext) {
-			this.observe(this.modalContext.value, (value) => {
-				(this._link as any) = value.link;
-				this._selectedKey = this._link?.unique ?? undefined;
-				this._selectionConfiguration.selection = this._selectedKey ? [this._selectedKey] : [];
-			});
+	override async firstUpdated() {
+		if (this.data?.config) {
+			this._config = this.data.config;
 		}
-		this._layout = this.data?.config;
+
+		// Get all the media types, excluding the folders, so that files are selectable media items.
+		const mediaTypeStructureRepository = new UmbMediaTypeStructureRepository(this);
+		const { data: mediaTypes } = await mediaTypeStructureRepository.requestAllowedChildrenOf(null);
+		this._allowedMediaTypeIds = mediaTypes?.items.map((x) => x.unique).filter((x) => !isUmbracoFolder(x)) ?? [];
 	}
 
-	#handleQueryString() {
-		if (!this._linkQueryInput) return;
-		const query = this._linkQueryInput.value as string;
+	#partialUpdateLink(linkObject: Partial<UmbLinkPickerLink>) {
+		this.modalContext?.updateValue({ link: { ...this.value.link, ...linkObject } });
+	}
 
+	#onLinkAnchorInput(event: UUIInputEvent) {
+		const query = (event.target.value as string) ?? '';
 		if (query.startsWith('#') || query.startsWith('?')) {
 			this.#partialUpdateLink({ queryString: query });
 			return;
 		}
 
 		if (query.includes('=')) {
-			this.#partialUpdateLink({ queryString: `#${query}` });
+			this.#partialUpdateLink({ queryString: `?${query}` });
 		} else {
 			this.#partialUpdateLink({ queryString: `#${query}` });
 		}
 	}
 
-	#handleSelectionChange(e: CustomEvent, entityType: string) {
-		//TODO: Update icon, published, trashed
-		e.stopPropagation();
-		const element = e.target as UmbTreeElement;
-		const selection = element.getSelection();
-		const selectedKey = selection[selection.length - 1];
-
-		if (!selectedKey) {
-			this.#partialUpdateLink({ type: undefined, unique: '', url: undefined });
-			this._selectedKey = undefined;
-			this._selectionConfiguration.selection = [];
-			this.requestUpdate();
-			return;
-		}
-
-		const linkType = (entityType as UmbLinkPickerLinkType) ?? 'external';
-
-		this._selectedKey = selectedKey;
-		if (this._selectedKey === undefined) return;
-		this._selectionConfiguration.selection = [this._selectedKey];
-		this.#partialUpdateLink({ type: linkType, unique: selectedKey, url: selectedKey });
-		this.requestUpdate();
+	#onLinkTitleInput(event: UUIInputEvent) {
+		this.#partialUpdateLink({ name: event.target.value as string });
 	}
 
-	#partialUpdateLink(linkObject: Partial<UmbLinkPickerLink>) {
-		this.modalContext?.updateValue({ link: { ...this._link, ...linkObject } });
+	#onLinkTargetInput(event: UUIBooleanInputEvent) {
+		this.#partialUpdateLink({ target: event.target.checked ? '_blank' : undefined });
+	}
+
+	#onLinkUrlInput(event: UUIInputEvent) {
+		const url = event.target.value as string;
+
+		let name;
+		if (url && !this.value.link.name) {
+			if (URL.canParse(url)) {
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				const parts = URL.parse(url);
+				name = parts?.hostname ?? url;
+			} else {
+				name = url;
+			}
+		}
+
+		this.#partialUpdateLink({
+			name: this.value.link.name || name,
+			type: 'external',
+			url,
+		});
+	}
+
+	async #onPickerSelection(event: UmbInputPickerEvent, type: 'document' | 'media') {
+		let icon, name, url;
+		const unique = event.target.value;
+
+		if (unique) {
+			if (type === 'document') {
+				const documentRepository = new UmbDocumentDetailRepository(this);
+				const { data: documentData } = await documentRepository.requestByUnique(unique);
+				if (documentData) {
+					icon = documentData.documentType.icon;
+					name = documentData.variants[0].name;
+					url = documentData.urls[0].url;
+				}
+			}
+
+			if (type === 'media') {
+				const mediaRepository = new UmbMediaDetailRepository(this);
+				const { data: mediaData } = await mediaRepository.requestByUnique(unique);
+				if (mediaData) {
+					icon = mediaData.mediaType.icon;
+					name = mediaData.variants[0].name;
+					url = mediaData.urls[0].url;
+				}
+			}
+		}
+
+		const link = {
+			icon,
+			name: this.value.link.name || name,
+			type: unique ? type : undefined,
+			unique,
+			url,
+		};
+
+		this.#partialUpdateLink(link);
+	}
+
+	#triggerDocumentPicker() {
+		this._documentPickerElement?.shadowRoot?.querySelector('#btn-add')?.dispatchEvent(new Event('click'));
+	}
+
+	#triggerMediaPicker() {
+		this._mediaPickerElement?.shadowRoot?.querySelector('#btn-add')?.dispatchEvent(new Event('click'));
 	}
 
 	override render() {
 		return html`
-			<umb-body-layout headline="Select Link">
+			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectLink')}>
 				<uui-box>
-					<div class="url-link">${this.#renderLinkUrlInput()} ${this.#renderAnchorInput()}</div>
-
-					<uui-label for="link-title-input">${this.localize.term('defaultdialogs_nodeNameLinkPicker')}</uui-label>
-					<uui-input
-						id="link-title-input"
-						placeholder=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
-						label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
-						@input=${() => this.#partialUpdateLink({ name: this._linkTitleInput.value as string })}
-						.value="${this._link.name ?? ''}"></uui-input>
-
-					<uui-label>${this.localize.term('content_target')}</uui-label>
-					<uui-toggle
-						id="#target-toggle"
-						label=${this.localize.term('defaultdialogs_openInNewWindow')}
-						.checked="${this._link.target === '_blank' ? true : false}"
-						@change="${(e: UUIBooleanInputEvent) =>
-							this.#partialUpdateLink({ target: e.target.checked ? '_blank' : '' })}">
-						${this.localize.term('defaultdialogs_openInNewWindow')}
-					</uui-toggle>
-
-					<hr />
-
-					${this.#renderTrees()}
+					${this.#renderLinkUrlInput()} ${this.#renderLinkTitleInput()} ${this.#renderLinkTargetInput()}
+					${this.#renderInternals()}
 				</uui-box>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 					<uui-button
-						label=${this.localize.term('general_submit')}
-						look="primary"
 						color="positive"
+						look="primary"
+						label=${this.localize.term('general_submit')}
 						@click=${this._submitModal}></uui-button>
 				</div>
 			</umb-body-layout>
@@ -147,97 +156,131 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 	}
 
 	#renderLinkUrlInput() {
-		return html`<span>
-			<uui-label for="link-input">${this.localize.term('defaultdialogs_link')}</uui-label>
-			<uui-input
-				id="link-input"
-				placeholder=${this.localize.term('general_url')}
-				label=${this.localize.term('general_url')}
-				.value="${this._link.unique ?? this._link.url ?? ''}"
-				@input=${() => this.#partialUpdateLink({ type: 'external', url: this._linkInput.value as string })}
-				?disabled="${this._link.unique ? true : false}"></uui-input>
-		</span>`;
-	}
-
-	#renderAnchorInput() {
-		if (this._layout.hideAnchor) return nothing;
-		return html`<span>
-			<uui-label for="anchor-input">${this.localize.term('defaultdialogs_anchorLinkPicker')}</uui-label>
-			<uui-input
-				id="anchor-input"
-				placeholder=${this.localize.term('placeholders_anchor')}
-				label=${this.localize.term('placeholders_anchor')}
-				@input=${this.#handleQueryString}
-				.value="${this._link.queryString ?? ''}"></uui-input>
-		</span>`;
-	}
-
-	#renderTrees() {
-		//TODO: Make search work (temporarily disabled)
 		return html`
-			<uui-symbol-expand
-				id="document-expand"
-				@click=${() => (this.documentExpand = !this.documentExpand)}
-				.open=${!this.documentExpand}></uui-symbol-expand>
-			<uui-label for="document-expand">${this.localize.term('defaultdialogs_linkToPage')}</uui-label>
-			<div style="${styleMap({ display: !this.documentExpand ? 'block' : 'none' })}">
-				<umb-tree
-					alias=${UMB_DOCUMENT_TREE_ALIAS}
-					.props=${{
-						hideTreeItemActions: true,
-						hideTreeRoot: true,
-						selectionConfiguration: this._selectionConfiguration,
-					}}
-					@selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'document')}></umb-tree>
-			</div>
-			<hr />
-			<uui-symbol-expand
-				id="media-expand"
-				@click=${() => (this.mediaExpanded = !this.mediaExpanded)}
-				.open=${!this.mediaExpanded}></uui-symbol-expand>
-			<uui-label for="media-expand">${this.localize.term('defaultdialogs_linkToMedia')}</uui-label>
-			<div style="${styleMap({ display: !this.mediaExpanded ? 'block' : 'none' })}">
-				<umb-tree
-					alias="Umb.Tree.Media"
-					.props=${{
-						hideTreeItemActions: true,
-						hideTreeRoot: true,
-						selectionConfiguration: this._selectionConfiguration,
-					}}
-					@selection-change=${(event: CustomEvent) => this.#handleSelectionChange(event, 'media')}></umb-tree>
-			</div>
+			<umb-property-layout orientation="vertical">
+				<div class="side-by-side" slot="editor">
+					<umb-property-layout
+						orientation="vertical"
+						label=${this.localize.term('defaultdialogs_link')}
+						style="padding:0;">
+						<uui-input
+							slot="editor"
+							placeholder=${this.localize.term('general_url')}
+							label=${this.localize.term('general_url')}
+							.value=${this.value.link.url ?? ''}
+							?disabled=${this.value.link.unique ? true : false}
+							@change=${this.#onLinkUrlInput}>
+						</uui-input>
+					</umb-property-layout>
+					${when(
+						!this._config.hideAnchor,
+						() => html`
+							<umb-property-layout
+								orientation="vertical"
+								label=${this.localize.term('defaultdialogs_anchorLinkPicker')}
+								style="padding:0;">
+								<uui-input
+									slot="editor"
+									placeholder=${this.localize.term('placeholders_anchor')}
+									label=${this.localize.term('placeholders_anchor')}
+									@change=${this.#onLinkAnchorInput}
+									.value=${this.value.link.queryString ?? ''}></uui-input>
+							</umb-property-layout>
+						`,
+					)}
+				</div>
+			</umb-property-layout>
+		`;
+	}
+
+	#renderLinkTitleInput() {
+		return html`
+			<umb-property-layout orientation="vertical" label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}>
+				<uui-input
+					slot="editor"
+					label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
+					placeholder=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
+					.value=${this.value.link.name ?? ''}
+					@change=${this.#onLinkTitleInput}>
+				</uui-input>
+			</umb-property-layout>
+		`;
+	}
+
+	#renderLinkTargetInput() {
+		if (this._config.hideTarget) return nothing;
+		return html`
+			<umb-property-layout orientation="vertical" label=${this.localize.term('content_target')}>
+				<uui-toggle
+					slot="editor"
+					label=${this.localize.term('defaultdialogs_openInNewWindow')}
+					.checked=${this.value.link.target === '_blank' ? true : false}
+					@change=${this.#onLinkTargetInput}>
+					${this.localize.term('defaultdialogs_openInNewWindow')}
+				</uui-toggle>
+			</umb-property-layout>
+		`;
+	}
+
+	#renderInternals() {
+		return html`
+			<umb-property-layout orientation="vertical" label=${this.localize.term('defaultdialogs_linkinternal')}>
+				<div slot="editor">
+					${when(
+						!this.value.link.unique,
+						() => html`
+							<uui-button-group>
+								<uui-button
+									look="placeholder"
+									label=${this.localize.term('defaultdialogs_linkToPage')}
+									@click=${this.#triggerDocumentPicker}></uui-button>
+								<uui-button
+									look="placeholder"
+									label=${this.localize.term('defaultdialogs_linkToMedia')}
+									@click=${this.#triggerMediaPicker}></uui-button>
+							</uui-button-group>
+						`,
+					)}
+					<umb-input-document
+						?hidden=${!this.value.link.unique || this.value.link.type !== 'document'}
+						.max=${1}
+						.showOpenButton=${true}
+						.value=${this.value.link.unique && this.value.link.type === 'document' ? this.value.link.unique : ''}
+						@change=${(e: UmbInputPickerEvent) => this.#onPickerSelection(e, 'document')}>
+					</umb-input-document>
+					<umb-input-media
+						?hidden=${!this.value.link.unique || this.value.link.type !== 'media'}
+						.allowedContentTypeIds=${this._allowedMediaTypeIds}
+						.max=${1}
+						.value=${this.value.link.unique && this.value.link.type === 'media' ? this.value.link.unique : ''}
+						@change=${(e: UmbInputPickerEvent) => this.#onPickerSelection(e, 'media')}></umb-input-media>
+				</div>
+			</umb-property-layout>
 		`;
 	}
 
 	static override styles = [
 		css`
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin-bottom: var(--uui-size-space-3);
+			uui-box {
+				--uui-box-default-padding: 0 var(--uui-size-space-5);
 			}
 
-			uui-input,
-			uui-toggle,
-			uui-label {
+			uui-button-group {
 				width: 100%;
 			}
 
-			uui-input:not(#search-input),
-			uui-label {
-				margin-bottom: var(--uui-size-space-6);
+			uui-input {
+				width: 100%;
 			}
 
-			.url-link {
+			.side-by-side {
 				display: flex;
-				gap: var(--uui-size-space-6);
-			}
-			.url-link span {
-				flex: 1 1 0px;
-			}
+				flex-wrap: wrap;
+				gap: var(--uui-size-space-5);
 
-			#select-media {
-				display: block;
+				umb-property-layout {
+					flex: 1 1 0px;
+				}
 			}
 		`,
 	];
@@ -245,6 +288,8 @@ export class UmbLinkPickerModalElement extends UmbModalBaseElement<UmbLinkPicker
 
 export default UmbLinkPickerModalElement;
 
+export { UmbLinkPickerModalElement as element };
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-link-picker-modal': UmbLinkPickerModalElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.token.ts
index 1a3b19b6d9..498b1ec6b8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/link-picker-modal/link-picker-modal.token.ts
@@ -9,9 +9,9 @@ export interface UmbLinkPickerModalData {
 
 export type UmbLinkPickerModalValue = { link: UmbLinkPickerLink };
 
-// TODO: investigate: this looks more like a property editor configuration. Is this used in the correct way?
 export interface UmbLinkPickerConfig {
 	hideAnchor?: boolean;
+	hideTarget?: boolean;
 }
 
 export const UMB_LINK_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, UmbLinkPickerModalValue>(
@@ -19,7 +19,7 @@ export const UMB_LINK_PICKER_MODAL = new UmbModalToken<UmbLinkPickerModalData, U
 	{
 		modal: {
 			type: 'sidebar',
-			size: 'small',
+			size: 'medium',
 		},
 	},
 );
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/manifests.ts
index 78748548a1..d76b047df1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/manifests.ts
@@ -3,6 +3,10 @@ export const manifests = [
 		type: 'monacoMarkdownEditorAction',
 		alias: 'Umb.MonacoMarkdownEditorAction.MultiUrlPicker',
 		name: 'Multi Url Picker Monaco Markdown Editor Action',
-		js: () => import('./url-picker-monaco-markdown-editor-action.js'),
+		api: () => import('./url-picker-monaco-markdown-editor-action.js'),
+		meta: {
+			label: '#buttons_linkInsert',
+			icon: 'icon-link',
+		},
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts
index 00046cc23c..6bdc8e54ff 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/tiny-mce-plugin/tiny-mce-multi-url-picker.plugin.ts
@@ -1,17 +1,19 @@
-import type { UmbLinkPickerModalValue } from '../link-picker-modal/link-picker-modal.token.js';
 import { UMB_LINK_PICKER_MODAL } from '../link-picker-modal/link-picker-modal.token.js';
-import type { UmbLinkPickerLink } from '../link-picker-modal/types.js';
-import { type TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/tiny-mce';
-import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import type { UmbLinkPickerLink, UmbLinkPickerLinkType } from '../link-picker-modal/types.js';
+import type { UmbLinkPickerModalValue } from '../link-picker-modal/link-picker-modal.token.js';
 import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
+import { UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/tiny-mce';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import type { TinyMcePluginArguments } from '@umbraco-cms/backoffice/tiny-mce';
 
 type AnchorElementAttributes = {
-	href?: string | null;
-	title?: string | null;
-	target?: string | null;
 	'data-anchor'?: string | null;
-	rel?: string | null;
+	href?: string | null;
+	target?: string | null;
 	text?: string;
+	title?: string | null;
+	type?: UmbLinkPickerLinkType;
+	rel?: string | null;
 };
 
 export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase {
@@ -21,17 +23,9 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
 
 	constructor(args: TinyMcePluginArguments) {
 		super(args);
+
 		const localize = new UmbLocalizationController(args.host);
 
-		// const editorEventSetupCallback = (buttonApi: { setEnabled: (state: boolean) => void }) => {
-		// 	const editorEventCallback = (eventApi: { element: Element}) => {
-		// 		buttonApi.setEnabled(eventApi.element.nodeName.toLowerCase() === 'a' && eventApi.element.hasAttribute('href'));
-		// 	};
-
-		// 	editor.on('NodeChange', editorEventCallback);
-		// 	return () => editor.off('NodeChange', editorEventCallback);
-		// };
-
 		this.editor.ui.registry.addToggleButton('link', {
 			icon: 'link',
 			tooltip: localize.term('general_addEditLink'),
@@ -57,39 +51,27 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
 		const selectedElm = this.editor.selection.getNode();
 		this.#anchorElement = this.editor.dom.getParent(selectedElm, 'a[href]') as HTMLAnchorElement;
 
-		const data: AnchorElementAttributes = {
-			text: this.#anchorElement
-				? this.#anchorElement.innerText || (this.#anchorElement.textContent ?? '')
-				: this.editor.selection.getContent({ format: 'text' }),
-			href: this.#anchorElement?.getAttribute('href') ?? '',
-			target: this.#anchorElement?.target ?? '',
-			rel: this.#anchorElement?.rel ?? '',
-		};
-
-		if (selectedElm.nodeName === 'IMG') {
-			data.text = ' ';
-		}
-
 		if (!this.#anchorElement) {
-			this.#openLinkPicker({ name: this.editor.selection.getContent() });
+			this.#openLinkPicker({ name: this.editor.selection.getContent({ format: 'text' }) });
 			return;
 		}
 
-		//if we already have a link selected, we want to pass that data over to the dialog
+		let url = this.#anchorElement.getAttribute('href') ?? this.#anchorElement.href ?? '';
+
+		const queryString = this.#anchorElement.getAttribute('data-anchor') ?? '';
+		if (queryString && url.endsWith(queryString)) {
+			url = url.substring(0, url.indexOf(queryString));
+		}
+
 		const currentTarget: UmbLinkPickerLink = {
 			name: this.#anchorElement.title || this.#anchorElement.textContent,
 			target: this.#anchorElement.target,
-			queryString: `${this.#anchorElement.search}${this.#anchorElement.hash}`,
+			queryString: queryString,
+			type: (this.#anchorElement.type as UmbLinkPickerLinkType) ?? 'external',
+			unique: url.includes('localLink:') ? url.substring(url.indexOf(':') + 1, url.indexOf('}')) : null,
+			url: url,
 		};
 
-		if (this.#anchorElement.href.includes('localLink:')) {
-			const href = this.#anchorElement.getAttribute('href')!;
-			currentTarget.unique = href.substring(href.indexOf(':') + 1, href.indexOf('}'));
-		} else if (this.#anchorElement.host.length) {
-			currentTarget.url = this.#anchorElement.protocol ? this.#anchorElement.protocol + '//' : undefined;
-			currentTarget.url += this.#anchorElement.host + this.#anchorElement.pathname;
-		}
-
 		this.#openLinkPicker(currentTarget);
 	}
 
@@ -112,35 +94,32 @@ export default class UmbTinyMceMultiUrlPickerPlugin extends UmbTinyMcePluginBase
 
 		// TODO: This is a workaround for the issue where the link picker modal is returning a frozen object, and we need to extract the link into smaller parts to avoid the frozen object issue.
 		this.#linkPickerData = { link: { ...linkPickerData.link } };
+
 		this.#updateLink();
 	}
 
-	//Create a json obj used to create the attributes for the tag
-	// TODO => where has rel gone?
 	#createElemAttributes() {
-		// Attribute 'name' because of linkPickerData. It should be 'title' .
-		const { name, ...linkPickerData } = this.#linkPickerData!.link;
-		const a: AnchorElementAttributes = Object.assign({}, linkPickerData);
+		const link = this.#linkPickerData!.link;
 
-		// always need to map back to href for tinymce to render correctly
-		// do this first as checking querystring below may modify the href property
-		if (this.#linkPickerData?.link.url) {
-			a.href = this.#linkPickerData.link.url;
+		const anchor: AnchorElementAttributes = {
+			href: link.url ?? '',
+			title: link.name ?? link.url ?? '',
+			target: link.target,
+			type: link.type ?? 'external',
+			rel: link.target === '_blank' ? 'noopener' : null,
+		};
+
+		if (link.queryString) {
+			anchor['data-anchor'] = link.queryString;
+
+			if (link.queryString.startsWith('?')) {
+				anchor.href += !anchor.href ? '/' + link.queryString : link.queryString;
+			} else if (link.queryString.startsWith('#')) {
+				anchor.href += link.queryString;
+			}
 		}
 
-		if (this.#linkPickerData?.link.name) {
-			a.title = name;
-		}
-
-		if (
-			this.#linkPickerData?.link.queryString?.startsWith('#') ||
-			this.#linkPickerData?.link.queryString?.startsWith('?')
-		) {
-			a['data-anchor'] = this.#linkPickerData?.link.queryString;
-			a.href += this.#linkPickerData?.link.queryString;
-		}
-
-		return a;
+		return anchor;
 	}
 
 	#insertLink() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts
index 06c2a50778..7913e1a50c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/text-box/property-editor-ui-text-box.element.ts
@@ -34,6 +34,13 @@ export class UmbPropertyEditorUITextBoxElement
 	@property({ type: String })
 	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
+	/**
+	 * The name of this field.
+	 * @type {string}
+	 */
+	@property({ type: String })
+	name?: string;
+
 	#defaultType: UuiInputTypeType = 'text';
 
 	@state()
@@ -72,6 +79,7 @@ export class UmbPropertyEditorUITextBoxElement
 
 	override render() {
 		return html`<uui-input
+			.label=${this.localize.term('general_fieldFor', [this.name])}
 			.value=${this.value ?? ''}
 			.type=${this._type}
 			placeholder=${ifDefined(this._placeholder)}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts
index 0e3ae33e2c..af316441f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/collection/relation-type-collection.element.ts
@@ -1,8 +1,7 @@
 import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 
-const elementName = 'umb-relation-type-collection';
-@customElement(elementName)
+@customElement('umb-relation-type-collection')
 export class UmbRelationTypeCollectionElement extends UmbCollectionDefaultElement {
 	// NOTE: Returns empty toolbar, so to remove the header padding.
 	protected override renderToolbar() {
@@ -10,10 +9,13 @@ export class UmbRelationTypeCollectionElement extends UmbCollectionDefaultElemen
 	}
 }
 
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 17. */
 export default UmbRelationTypeCollectionElement;
 
+export { UmbRelationTypeCollectionElement as element };
+
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbRelationTypeCollectionElement;
+		'umb-relation-type-collection': UmbRelationTypeCollectionElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/manifests.ts
index 33ac0d2a59..bbf2a517eb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/relation-types/workspace/relation-type/manifests.ts
@@ -1,3 +1,5 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
+
 export const UMB_RELATION_TYPE_WORKSPACE_ALIAS = 'Umb.Workspace.RelationType';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -24,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_RELATION_TYPE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/relations/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/relations/workspace/manifests.ts
index 54a076ba06..a3880d3329 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/relations/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/relations/workspace/manifests.ts
@@ -1,4 +1,5 @@
 import { UMB_RELATION_TYPE_COLLECTION_ALIAS } from '@umbraco-cms/backoffice/relation-type';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -24,7 +25,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.RelationsRoot',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/property-value-resolver/rte-block-value-resolver.api.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/property-value-resolver/rte-block-value-resolver.api.ts
index fbf8f45d17..b9d77a5d15 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/rte/property-value-resolver/rte-block-value-resolver.api.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/rte/property-value-resolver/rte-block-value-resolver.api.ts
@@ -4,11 +4,11 @@ import {
 	type UmbBlockDataValueModel,
 	type UmbBlockExposeModel,
 } from '@umbraco-cms/backoffice/block';
-import type { UmbContentValueModel } from '@umbraco-cms/backoffice/content';
+import type { UmbElementValueModel } from '@umbraco-cms/backoffice/content';
 
 export class UmbRteBlockValueResolver extends UmbBlockValueResolver<UmbPropertyEditorUiValueType> {
 	async processValues(
-		property: UmbContentValueModel<UmbPropertyEditorUiValueType>,
+		property: UmbElementValueModel<UmbPropertyEditorUiValueType>,
 		valuesCallback: (values: Array<UmbBlockDataValueModel>) => Promise<Array<UmbBlockDataValueModel> | undefined>,
 	) {
 		if (property.value) {
@@ -24,7 +24,7 @@ export class UmbRteBlockValueResolver extends UmbBlockValueResolver<UmbPropertyE
 	}
 
 	async processVariants(
-		property: UmbContentValueModel<UmbPropertyEditorUiValueType>,
+		property: UmbElementValueModel<UmbPropertyEditorUiValueType>,
 		variantsCallback: (values: Array<UmbBlockExposeModel>) => Promise<Array<UmbBlockExposeModel> | undefined>,
 	) {
 		if (property.value) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/index.ts b/src/Umbraco.Web.UI.Client/src/packages/search/index.ts
index c750f51952..1ed91d9469 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/index.ts
@@ -1,4 +1,4 @@
-export type { UmbSearchResultItemModel, UmbSearchRequestArgs, UmbSearchProvider } from './types.js';
+export type * from './types.js';
 export type { UmbSearchDataSource } from './search-data-source.interface.js';
 export type { UmbSearchRepository } from './search-repository.interface.js';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts
index dd8d091c2d..93b7206850 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/welcome/settings-welcome-dashboard.element.ts
@@ -29,18 +29,21 @@ export class UmbSettingsWelcomeDashboardElement extends UmbLitElement {
 							Ask a question in the community forum or our Discord community
 						</umb-localize>
 					</p>
-					<uui-button
-						look="primary"
-						href="https://our.umbraco.com/forum"
-						label=${this.localize.term('settingsDashboard_goForum')}
-						target="_blank"
-						rel="noopener"></uui-button>
-					<uui-button
-						look="primary"
-						href="https://discord.umbraco.com"
-						label=${this.localize.term('settingsDashboard_chatWithCommunity')}
-						target="_blank"
-						rel="noopener"></uui-button>
+
+					<div class="button-group">
+						<uui-button
+							look="primary"
+							href="https://our.umbraco.com/forum"
+							label=${this.localize.term('settingsDashboard_goForum')}
+							target="_blank"
+							rel="noopener"></uui-button>
+						<uui-button
+							look="primary"
+							href="https://discord.umbraco.com"
+							label=${this.localize.term('settingsDashboard_chatWithCommunity')}
+							target="_blank"
+							rel="noopener"></uui-button>
+					</div>
 				</uui-box>
 
 				<uui-box class="training">
@@ -115,6 +118,12 @@ export class UmbSettingsWelcomeDashboardElement extends UmbLitElement {
 					grid-template-columns: repeat(1, 1fr);
 				}
 			}
+
+			.button-group {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--uui-size-space-2);
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts
index bbe9e20bae..2c51692616 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts
@@ -393,7 +393,6 @@ export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '')
 			}
 
 			#matchlist {
-				display: none;
 				display: flex;
 				flex-direction: column;
 				background-color: var(--uui-color-surface);
@@ -403,6 +402,7 @@ export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '')
 				top: var(--uui-size-space-6);
 				border-radius: var(--uui-border-radius);
 				border: 1px solid var(--uui-color-border);
+				z-index: 10;
 			}
 
 			#matchlist label {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/index.ts
index 2ca9dc61a5..66315e994b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/index.ts
@@ -1,5 +1,6 @@
 export * from './entity.js';
 export * from './global-components/index.js';
 export * from './repository/index.js';
+export type * from './types.js';
 
 export { UMB_PARTIAL_VIEW_PICKER_MODAL } from './partial-view-picker/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts
index 9014ce1386..de2147b6f0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_PARTIAL_VIEW_TREE_ALIAS } from '../tree/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -20,7 +21,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./partial-view-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.PartialView',
 			},
 		],
@@ -32,7 +33,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Partial View Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.PartialView',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts
index ae6628e08c..7e21cc0506 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/workspace/manifests.ts
@@ -1,4 +1,5 @@
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const UMB_PARTIAL_VIEW_WORKSPACE_ALIAS = 'Umb.Workspace.PartialView';
 
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_PARTIAL_VIEW_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/index.ts
index cce5d23b51..315274ee1d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/index.ts
@@ -2,7 +2,7 @@ export * from './entity.js';
 export * from './global-components/index.js';
 export * from './repository/index.js';
 export * from './tree/index.js';
-export * from './types.js';
 export * from './workspace/script-workspace.context-token.js';
+export type * from './types.js';
 
 export { UMB_SCRIPT_PICKER_MODAL } from './modals/script-picker-modal.token.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts
index 8b5c8890a8..9dd63daaa8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_SCRIPT_TREE_ALIAS } from '../tree/index.js';
 export const UMB_SCRIPT_MENU_ITEM_ALIAS = 'Umb.MenuItem.Script';
 
@@ -21,7 +22,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./script-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Script',
 			},
 		],
@@ -33,7 +34,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Script Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Script',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts
index 1af7a9adc7..13664d8a9c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_SCRIPT_ENTITY_TYPE } from '../entity.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -28,7 +29,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_SCRIPT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts
index 1848331d21..81b2e7e339 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/index.ts
@@ -1,10 +1,9 @@
 import './global-components/index.js';
 
-export * from './repository/index.js';
 export * from './entity.js';
 export * from './global-components/index.js';
+export * from './repository/index.js';
+export * from './utils/index.js';
+export type * from './types.js';
 
 export { UmbStylesheetTreeRepository } from './tree/index.js';
-
-// Utils
-export { UmbStylesheetRuleManager } from './utils/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts
index 80e7c335e3..1a74c5f0f1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_STYLESHEET_TREE_ALIAS } from '../tree/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -20,7 +21,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./stylesheet-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Stylesheet',
 			},
 		],
@@ -32,7 +33,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Stylesheet Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Stylesheet',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts
index e7e74233ea..98911276c1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/manifests.ts
@@ -1,4 +1,5 @@
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const UMB_STYLESHEET_WORKSPACE_ALIAS = 'Umb.Workspace.Stylesheet';
 
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_STYLESHEET_WORKSPACE_ALIAS,
 			},
 		],
@@ -44,7 +45,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_STYLESHEET_WORKSPACE_ALIAS,
 			},
 		],
@@ -62,7 +63,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_STYLESHEET_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/constants.ts
new file mode 100644
index 0000000000..b986c98f18
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/constants.ts
@@ -0,0 +1 @@
+export const UMB_TEMPLATE_ALLOW_DELETE_ACTION_CONDITION_ALIAS = 'Umb.Condition.Template.AllowDeleteAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/index.ts
new file mode 100644
index 0000000000..4f07201dcf
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/index.ts
@@ -0,0 +1 @@
+export * from './constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/manifest.ts
new file mode 100644
index 0000000000..d1aac15331
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/manifest.ts
@@ -0,0 +1,10 @@
+import { UMB_TEMPLATE_ALLOW_DELETE_ACTION_CONDITION_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'condition',
+		name: 'Template Allow Delete Action Condition',
+		alias: UMB_TEMPLATE_ALLOW_DELETE_ACTION_CONDITION_ALIAS,
+		api: () => import('./template-allow-delete-action.condition.js'),
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/template-allow-delete-action.condition.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/template-allow-delete-action.condition.ts
new file mode 100644
index 0000000000..c1550dab72
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/allow-delete/template-allow-delete-action.condition.ts
@@ -0,0 +1,22 @@
+import { UmbConditionBase } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_TREE_ITEM_CONTEXT } from '@umbraco-cms/backoffice/tree';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbTemplateAllowDeleteActionCondition extends UmbConditionBase<never> implements UmbExtensionCondition {
+	constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<never>) {
+		super(host, args);
+
+		this.consumeContext(UMB_TREE_ITEM_CONTEXT, (context) => {
+			this.observe(
+				context.hasChildren,
+				(hasChildren) => {
+					this.permitted = hasChildren === false;
+				},
+				'_templateAllowDeleteActionCondition',
+			);
+		});
+	}
+}
+
+export { UmbTemplateAllowDeleteActionCondition as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/index.ts
new file mode 100644
index 0000000000..dc6ddce39a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/index.ts
@@ -0,0 +1 @@
+export * from './allow-delete/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/manifests.ts
new file mode 100644
index 0000000000..d11b41693e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/conditions/manifests.ts
@@ -0,0 +1,3 @@
+import { manifests as allowDeleteManifests } from './allow-delete/manifest.js';
+
+export const manifests: Array<UmbExtensionManifest> = [...allowDeleteManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/entity-actions/manifests.ts
index fb548f4166..4816de0c1e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/entity-actions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/entity-actions/manifests.ts
@@ -1,5 +1,6 @@
 import { UMB_TEMPLATE_DETAIL_REPOSITORY_ALIAS, UMB_TEMPLATE_ITEM_REPOSITORY_ALIAS } from '../repository/index.js';
 import { UMB_TEMPLATE_ENTITY_TYPE, UMB_TEMPLATE_ROOT_ENTITY_TYPE } from '../entity.js';
+import { UMB_TEMPLATE_ALLOW_DELETE_ACTION_CONDITION_ALIAS } from '../conditions/allow-delete/constants.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
@@ -26,5 +27,6 @@ export const manifests: Array<UmbExtensionManifest> = [
 			detailRepositoryAlias: UMB_TEMPLATE_DETAIL_REPOSITORY_ALIAS,
 			itemRepositoryAlias: UMB_TEMPLATE_ITEM_REPOSITORY_ALIAS,
 		},
+		conditions: [{ alias: UMB_TEMPLATE_ALLOW_DELETE_ACTION_CONDITION_ALIAS }],
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/index.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/index.ts
index 392b743cee..9bec7964b1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/index.ts
@@ -5,5 +5,6 @@ export * from './entity.js';
 export * from './modals/index.js';
 export * from './repository/index.js';
 export * from './tree/index.js';
+export * from './conditions/index.js';
 
 export type { UmbTemplateDetailModel } from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/manifests.ts
index eb8a2594d5..da057a5daa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/manifests.ts
@@ -1,3 +1,4 @@
+import { manifests as conditionsManifests } from './conditions/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as modalManifests } from './modals/manifests.js';
@@ -7,6 +8,7 @@ import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
+	...conditionsManifests,
 	...entityActionsManifests,
 	...menuManifests,
 	...modalManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts
index 17f3a60f38..ab40f89560 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/menu/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_TEMPLATE_TREE_ALIAS } from '../tree/index.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
@@ -21,7 +22,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		api: () => import('./template-menu-structure.context.js'),
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Template',
 			},
 		],
@@ -33,7 +34,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		name: 'Template Breadcrumb Workspace Footer App',
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: 'Umb.Workspace.Template',
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts
index 3fb187abfa..fc2b33e8ce 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts
@@ -1,4 +1,5 @@
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const UMB_TEMPLATE_WORKSPACE_ALIAS = 'Umb.Workspace.Template';
 
@@ -27,7 +28,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_TEMPLATE_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
index 54c16a3818..f524840f51 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/plugins/tiny-mce-code-editor.plugin.ts
@@ -25,13 +25,15 @@ export default class UmbTinyMceCodeEditorPlugin extends UmbTinyMcePluginBase {
 			},
 		});
 
-		if (!modal) return;
+		const value = await modal.onSubmit().catch(() => undefined);
+		if (!value) {
+			return;
+		}
 
-		const { content } = await modal.onSubmit();
-		if (!content) {
+		if (!value.content) {
 			this.editor.resetContent();
 		} else {
-			this.editor.setContent(content.toString());
+			this.editor.setContent(value.content.toString());
 		}
 
 		this.editor.dispatch('Change');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
index 4197a5075a..367d2c6edc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts
@@ -1,4 +1,5 @@
-import type { UmbTiptapExtensionApi, UmbTiptapToolbarValue } from '../../extensions/types.js';
+import type { UmbTiptapExtensionApi } from '../../extensions/types.js';
+import type { UmbTiptapToolbarValue } from '../types.js';
 import { css, customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@@ -92,7 +93,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 
 		const dimensions = this.configuration?.getValueByAlias<{ width?: number; height?: number }>('dimensions');
 		if (dimensions?.width) this.setAttribute('style', `max-width: ${dimensions.width}px;`);
-		if (dimensions?.height) element.setAttribute('style', `max-height: ${dimensions.height}px;`);
+		if (dimensions?.height) element.setAttribute('style', `height: ${dimensions.height}px;`);
 
 		this._toolbar = this.configuration?.getValueByAlias<UmbTiptapToolbarValue>('toolbar') ?? [[[]]];
 
@@ -172,6 +173,8 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 			}
 
 			#editor {
+				/* Required as overflow is set to auto, so that the scrollbars don't appear. */
+				display: flex;
 				overflow: auto;
 				border-radius: var(--uui-border-radius);
 				border: 1px solid var(--uui-color-border);
@@ -182,8 +185,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin<string, typeof Um
 				box-sizing: border-box;
 				height: 100%;
 				width: 100%;
-				min-height: 400px;
-				display: grid; /* Don't ask me why this is needed, but it is. */
+
 				pre {
 					background-color: var(--uui-color-surface-alt);
 					padding: var(--uui-size-space-2) var(--uui-size-space-4);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts
index 678ec6369a..087ee86123 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/tiptap-toolbar.element.ts
@@ -1,4 +1,4 @@
-import type { UmbTiptapToolbarValue } from '../../extensions/types.js';
+import type { UmbTiptapToolbarValue } from '../types.js';
 import { css, customElement, html, map, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbExtensionsElementAndApiInitializer } from '@umbraco-cms/backoffice/extension-api';
@@ -93,11 +93,16 @@ export class UmbTiptapToolbarElement extends UmbLitElement {
 			border: 1px solid var(--uui-color-border);
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
-			background-color: var(--uui-color-surface);
+			box-shadow:
+				0 2px 2px -2px rgba(34, 47, 62, 0.1),
+				0 8px 8px -4px rgba(34, 47, 62, 0.07);
+
+			background-color: var(--uui-color-surface-alt);
 			color: var(--color-text);
 			display: grid;
 			grid-template-columns: repeat(auto-fill, 10px);
 			grid-auto-flow: row;
+
 			position: sticky;
 			top: -25px;
 			left: 0px;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/types.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/types.ts
new file mode 100644
index 0000000000..5167150c48
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/types.ts
@@ -0,0 +1 @@
+export type UmbTiptapToolbarValue = Array<Array<Array<string>>>;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/base.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/base.ts
new file mode 100644
index 0000000000..3fba20f6ba
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/base.ts
@@ -0,0 +1,61 @@
+import type {
+	ManifestTiptapExtension,
+	ManifestTiptapToolbarExtension,
+	UmbTiptapExtensionApi,
+	UmbTiptapExtensionArgs,
+	UmbTiptapToolbarElementApi,
+} from './types.js';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { Editor, Extension, Mark, Node } from '@umbraco-cms/backoffice/external/tiptap';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+
+export abstract class UmbTiptapExtensionApiBase extends UmbControllerBase implements UmbTiptapExtensionApi {
+	/**
+	 * The manifest for the extension.
+	 */
+	manifest?: ManifestTiptapExtension;
+
+	/**
+	 * The editor instance.
+	 */
+	protected _editor?: Editor;
+
+	/**
+	 * @inheritdoc
+	 */
+	setEditor(editor: Editor): void {
+		this._editor = editor;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	abstract getTiptapExtensions(args?: UmbTiptapExtensionArgs): Array<Extension | Mark | Node>;
+}
+
+export abstract class UmbTiptapToolbarElementApiBase extends UmbControllerBase implements UmbTiptapToolbarElementApi {
+	/**
+	 * The manifest for the extension.
+	 */
+	manifest?: ManifestTiptapToolbarExtension;
+
+	/**
+	 * The data type configuration for the property editor that the editor is used for.
+	 */
+	configuration?: UmbPropertyEditorConfigCollection;
+
+	/**
+	 * A method to execute the toolbar element action.
+	 */
+	public abstract execute(editor: Editor): void;
+
+	/**
+	 * Informs the toolbar element if it is active or not. It uses the manifest meta alias to check if the toolbar element is active.
+	 * @see {ManifestTiptapToolbarExtension}
+	 * @param {Editor} editor The editor instance.
+	 * @returns {boolean} Returns true if the toolbar element is active.
+	 */
+	public isActive(editor: Editor) {
+		return editor && this.manifest?.meta.alias ? editor?.isActive(this.manifest.meta.alias) : false;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/embedded-media.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/embedded-media.extension.ts
index 0e64a0153a..4cbc0188f2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/embedded-media.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/embedded-media.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { umbEmbeddedMedia } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapEmbeddedMediaExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/figure.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/figure.extension.ts
index 1da6bdec35..0b879bb89e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/figure.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/figure.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { Figure, Figcaption } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapFigureExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/image.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/image.extension.ts
index 7254da3b61..7bb79bf2c1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/image.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/image.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { UmbImage } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapImageExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/link.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/link.extension.ts
index 4800000fda..e09d36f5dc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/link.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/link.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { UmbLink } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapLinkExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/media-upload.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/media-upload.extension.ts
index 1af085137c..b6770bc230 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/media-upload.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/media-upload.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import type { UmbTiptapExtensionArgs } from '../types.js';
 import { imageSize } from '@umbraco-cms/backoffice/utils';
 import { Extension } from '@umbraco-cms/backoffice/external/tiptap';
@@ -67,6 +67,13 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
 
 						self.#uploadTemporaryFile(files, this.editor);
 					});
+
+					host.addEventListener('paste', (event) => {
+						const files = event.clipboardData?.files;
+						if (!files) return;
+
+						self.#uploadTemporaryFile(files, this.editor);
+					});
 				},
 			}),
 		];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/subscript.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/subscript.extension.ts
index 57bfb91472..be83a3236e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/subscript.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/subscript.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { Subscript } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapBoldExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/superscript.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/superscript.extension.ts
index 453efb13e5..e7757efc5d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/superscript.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/superscript.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { Superscript } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapBoldExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/table.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/table.extension.ts
index d8c00b5d39..d3acf8c647 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/table.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/table.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { Table, TableHeader, TableRow, TableCell } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapTableExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/text-align.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/text-align.extension.ts
index 9855c4d150..3d2598d5e3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/text-align.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/text-align.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { TextAlign } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapTextAlignExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/underline.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/underline.extension.ts
index f9663f91c8..3946d0b259 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/underline.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/core/underline.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapExtensionApiBase } from '../types.js';
+import { UmbTiptapExtensionApiBase } from '../base.js';
 import { Underline } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapUnderlineExtensionApi extends UmbTiptapExtensionApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/index.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/index.ts
index 8f09498433..ffd2be35b6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/index.ts
@@ -1,3 +1,2 @@
-export type * from './tiptap-extension.js';
-export type * from './tiptap-toolbar-extension.js';
-export * from './types.js';
+export * from './base.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
index ed8f9f7f56..719793c65f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
@@ -132,298 +132,6 @@ const coreExtensions: Array<ManifestTiptapExtension> = [
 ];
 
 const toolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Blockquote',
-		name: 'Blockquote Tiptap Extension',
-		api: () => import('./toolbar/blockquote.extension.js'),
-		weight: 995,
-		meta: {
-			alias: 'blockquote',
-			icon: 'icon-blockquote',
-			label: 'Blockquote',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Bold',
-		name: 'Bold Tiptap Extension',
-		api: () => import('./toolbar/bold.extension.js'),
-		weight: 999,
-		meta: {
-			alias: 'bold',
-			icon: 'icon-bold',
-			label: 'Bold',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.CodeBlock',
-		name: 'Code Block Tiptap Extension',
-		api: () => import('./toolbar/code-block.extension.js'),
-		weight: 994,
-		meta: {
-			alias: 'codeBlock',
-			icon: 'icon-code',
-			label: 'Code Block',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.BulletList',
-		name: 'Bullet List Tiptap Extension',
-		api: () => import('./toolbar/bullet-list.extension.js'),
-		weight: 993,
-		meta: {
-			alias: 'bulletList',
-			icon: 'icon-bulleted-list',
-			label: 'Bullet List',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.OrderedList',
-		name: 'Ordered List Tiptap Extension',
-		api: () => import('./toolbar/ordered-list.extension.js'),
-		weight: 992,
-		meta: {
-			alias: 'orderedList',
-			icon: 'icon-ordered-list',
-			label: 'Ordered List',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Redo',
-		name: 'Redo Tiptap Extension',
-		api: () => import('./toolbar/redo.extension.js'),
-		element: () => import('../components/toolbar/tiptap-toolbar-button-disabled.element.js'),
-		weight: 994,
-		meta: {
-			alias: 'redo',
-			icon: 'icon-redo',
-			label: 'Redo',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Strike',
-		name: 'Strike Tiptap Extension',
-		api: () => import('./toolbar/strike.extension.js'),
-		weight: 996,
-		meta: {
-			alias: 'strike',
-			icon: 'icon-strikethrough',
-			label: 'Strike',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Subscript',
-		name: 'Subscript Tiptap Extension',
-		api: () => import('./toolbar/subscript.extension.js'),
-		weight: 1010,
-		meta: {
-			alias: 'subscript',
-			icon: 'icon-subscript',
-			label: 'Subscript',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Superscript',
-		name: 'Superscript Tiptap Extension',
-		api: () => import('./toolbar/superscript.extension.js'),
-		weight: 1011,
-		meta: {
-			alias: 'superscript',
-			icon: 'icon-superscript',
-			label: 'Superscript',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Table',
-		name: 'Table Tiptap Extension',
-		api: () => import('./toolbar/table.extension.js'),
-		weight: 909,
-		meta: {
-			alias: 'table',
-			icon: 'icon-table',
-			label: 'Table',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Heading1',
-		name: 'Heading 1 Tiptap Extension',
-		api: () => import('./toolbar/heading1.extension.js'),
-		weight: 949,
-		meta: {
-			alias: 'heading1',
-			icon: 'icon-heading-1',
-			label: 'Heading 1',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Heading2',
-		name: 'Heading 2 Tiptap Extension',
-		api: () => import('./toolbar/heading2.extension.js'),
-		weight: 948,
-		meta: {
-			alias: 'heading2',
-			icon: 'icon-heading-2',
-			label: 'Heading 2',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Heading3',
-		name: 'Heading 3 Tiptap Extension',
-		api: () => import('./toolbar/heading3.extension.js'),
-		weight: 947,
-		meta: {
-			alias: 'heading3',
-			icon: 'icon-heading-3',
-			label: 'Heading 3',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.HorizontalRule',
-		name: 'Horizontal Rule Tiptap Extension',
-		api: () => import('./toolbar/horizontal-rule.extension.js'),
-		weight: 991,
-		meta: {
-			alias: 'horizontalRule',
-			icon: 'icon-horizontal-rule',
-			label: 'Horizontal Rule',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Italic',
-		name: 'Italic Tiptap Extension',
-		api: () => import('./toolbar/italic.extension.js'),
-		weight: 998,
-		meta: {
-			alias: 'italic',
-			icon: 'icon-italic',
-			label: 'Italic',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.TextAlignCenter',
-		name: 'Text Align Center Tiptap Extension',
-		api: () => import('./toolbar/text-align-center.extension.js'),
-		weight: 918,
-		meta: {
-			alias: 'text-align-center',
-			icon: 'icon-text-align-center',
-			label: 'Text Align Center',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.TextAlignJustify',
-		name: 'Text Align Justify Tiptap Extension',
-		api: () => import('./toolbar/text-align-justify.extension.js'),
-		weight: 916,
-		meta: {
-			alias: 'text-align-justify',
-			icon: 'icon-text-align-justify',
-			label: 'Text Align Justify',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.TextAlignLeft',
-		name: 'Text Align Left Tiptap Extension',
-		api: () => import('./toolbar/text-align-left.extension.js'),
-		weight: 919,
-		meta: {
-			alias: 'text-align-left',
-			icon: 'icon-text-align-left',
-			label: 'Text Align Left',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.TextAlignRight',
-		name: 'Text Align Right Tiptap Extension',
-		api: () => import('./toolbar/text-align-right.extension.js'),
-		weight: 917,
-		meta: {
-			alias: 'text-align-right',
-			icon: 'icon-text-align-right',
-			label: 'Text Align Right',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Underline',
-		name: 'Underline Tiptap Extension',
-		api: () => import('./toolbar/underline.extension.js'),
-		weight: 997,
-		meta: {
-			alias: 'underline',
-			icon: 'icon-underline',
-			label: 'Underline',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Undo',
-		name: 'Undo Tiptap Extension',
-		api: () => import('./toolbar/undo.extension.js'),
-		element: () => import('../components/toolbar/tiptap-toolbar-button-disabled.element.js'),
-		weight: 994,
-		meta: {
-			alias: 'undo',
-			icon: 'icon-undo',
-			label: 'Undo',
-		},
-	},
-	{
-		type: 'tiptapToolbarExtension',
-		kind: 'button',
-		alias: 'Umb.Tiptap.Toolbar.Unlink',
-		name: 'Unlink Tiptap Extension',
-		api: () => import('./toolbar/unlink.extension.js'),
-		element: () => import('../components/toolbar/tiptap-toolbar-button-disabled.element.js'),
-		weight: 101,
-		meta: {
-			alias: 'unlink',
-			icon: 'icon-unlink',
-			label: 'Unlink',
-		},
-	},
-];
-
-const umbToolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'button',
@@ -436,24 +144,301 @@ const umbToolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
 			label: '#general_viewSourceCode',
 		},
 	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Bold',
+		name: 'Bold Tiptap Extension',
+		api: () => import('./toolbar/bold.extension.js'),
+		meta: {
+			alias: 'bold',
+			icon: 'icon-bold',
+			label: 'Bold',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Italic',
+		name: 'Italic Tiptap Extension',
+		api: () => import('./toolbar/italic.extension.js'),
+		meta: {
+			alias: 'italic',
+			icon: 'icon-italic',
+			label: 'Italic',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Underline',
+		name: 'Underline Tiptap Extension',
+		api: () => import('./toolbar/underline.extension.js'),
+		forExtensions: ['Umb.Tiptap.Underline'],
+		meta: {
+			alias: 'underline',
+			icon: 'icon-underline',
+			label: 'Underline',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Strike',
+		name: 'Strike Tiptap Extension',
+		api: () => import('./toolbar/strike.extension.js'),
+		meta: {
+			alias: 'strike',
+			icon: 'icon-strikethrough',
+			label: 'Strike',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.ClearFormatting',
+		name: 'Clear Formatting Tiptap Extension',
+		api: () => import('./toolbar/clear-formatting.extension.js'),
+		meta: {
+			alias: 'clear-formatting',
+			icon: 'icon-clear-formatting',
+			label: 'Clear Formatting',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.TextAlignLeft',
+		name: 'Text Align Left Tiptap Extension',
+		api: () => import('./toolbar/text-align-left.extension.js'),
+		forExtensions: ['Umb.Tiptap.TextAlign'],
+		meta: {
+			alias: 'text-align-left',
+			icon: 'icon-text-align-left',
+			label: 'Text Align Left',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.TextAlignCenter',
+		name: 'Text Align Center Tiptap Extension',
+		api: () => import('./toolbar/text-align-center.extension.js'),
+		forExtensions: ['Umb.Tiptap.TextAlign'],
+		meta: {
+			alias: 'text-align-center',
+			icon: 'icon-text-align-center',
+			label: 'Text Align Center',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.TextAlignRight',
+		name: 'Text Align Right Tiptap Extension',
+		api: () => import('./toolbar/text-align-right.extension.js'),
+		forExtensions: ['Umb.Tiptap.TextAlign'],
+		meta: {
+			alias: 'text-align-right',
+			icon: 'icon-text-align-right',
+			label: 'Text Align Right',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.TextAlignJustify',
+		name: 'Text Align Justify Tiptap Extension',
+		api: () => import('./toolbar/text-align-justify.extension.js'),
+		forExtensions: ['Umb.Tiptap.TextAlign'],
+		meta: {
+			alias: 'text-align-justify',
+			icon: 'icon-text-align-justify',
+			label: 'Text Align Justify',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Heading1',
+		name: 'Heading 1 Tiptap Extension',
+		api: () => import('./toolbar/heading1.extension.js'),
+		meta: {
+			alias: 'heading1',
+			icon: 'icon-heading-1',
+			label: 'Heading 1',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Heading2',
+		name: 'Heading 2 Tiptap Extension',
+		api: () => import('./toolbar/heading2.extension.js'),
+		meta: {
+			alias: 'heading2',
+			icon: 'icon-heading-2',
+			label: 'Heading 2',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Heading3',
+		name: 'Heading 3 Tiptap Extension',
+		api: () => import('./toolbar/heading3.extension.js'),
+		meta: {
+			alias: 'heading3',
+			icon: 'icon-heading-3',
+			label: 'Heading 3',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.BulletList',
+		name: 'Bullet List Tiptap Extension',
+		api: () => import('./toolbar/bullet-list.extension.js'),
+		meta: {
+			alias: 'bulletList',
+			icon: 'icon-bulleted-list',
+			label: 'Bullet List',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.OrderedList',
+		name: 'Ordered List Tiptap Extension',
+		api: () => import('./toolbar/ordered-list.extension.js'),
+		meta: {
+			alias: 'orderedList',
+			icon: 'icon-ordered-list',
+			label: 'Ordered List',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Blockquote',
+		name: 'Blockquote Tiptap Extension',
+		api: () => import('./toolbar/blockquote.extension.js'),
+		meta: {
+			alias: 'blockquote',
+			icon: 'icon-blockquote',
+			label: 'Blockquote',
+		},
+	},
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.Link',
 		name: 'Link Tiptap Extension',
 		api: () => import('./toolbar/link.extension.js'),
+		forExtensions: ['Umb.Tiptap.Link'],
 		meta: {
 			alias: 'umbLink',
 			icon: 'icon-link',
 			label: '#defaultdialogs_urlLinkPicker',
 		},
 	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Unlink',
+		name: 'Unlink Tiptap Extension',
+		api: () => import('./toolbar/unlink.extension.js'),
+		element: () => import('../components/toolbar/tiptap-toolbar-button-disabled.element.js'),
+		forExtensions: ['Umb.Tiptap.Link'],
+		meta: {
+			alias: 'unlink',
+			icon: 'icon-unlink',
+			label: 'Unlink',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.CodeBlock',
+		name: 'Code Block Tiptap Extension',
+		api: () => import('./toolbar/code-block.extension.js'),
+		meta: {
+			alias: 'codeBlock',
+			icon: 'icon-code',
+			label: 'Code Block',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Subscript',
+		name: 'Subscript Tiptap Extension',
+		api: () => import('./toolbar/subscript.extension.js'),
+		forExtensions: ['Umb.Tiptap.Subscript'],
+		meta: {
+			alias: 'subscript',
+			icon: 'icon-subscript',
+			label: 'Subscript',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Superscript',
+		name: 'Superscript Tiptap Extension',
+		api: () => import('./toolbar/superscript.extension.js'),
+		forExtensions: ['Umb.Tiptap.Superscript'],
+		meta: {
+			alias: 'superscript',
+			icon: 'icon-superscript',
+			label: 'Superscript',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.HorizontalRule',
+		name: 'Horizontal Rule Tiptap Extension',
+		api: () => import('./toolbar/horizontal-rule.extension.js'),
+		meta: {
+			alias: 'horizontalRule',
+			icon: 'icon-horizontal-rule',
+			label: 'Horizontal Rule',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Undo',
+		name: 'Undo Tiptap Extension',
+		api: () => import('./toolbar/undo.extension.js'),
+		element: () => import('../components/toolbar/tiptap-toolbar-button-disabled.element.js'),
+		meta: {
+			alias: 'undo',
+			icon: 'icon-undo',
+			label: 'Undo',
+		},
+	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Redo',
+		name: 'Redo Tiptap Extension',
+		api: () => import('./toolbar/redo.extension.js'),
+		element: () => import('../components/toolbar/tiptap-toolbar-button-disabled.element.js'),
+		meta: {
+			alias: 'redo',
+			icon: 'icon-redo',
+			label: 'Redo',
+		},
+	},
 	{
 		type: 'tiptapToolbarExtension',
 		kind: 'button',
 		alias: 'Umb.Tiptap.Toolbar.MediaPicker',
 		name: 'Media Picker Tiptap Extension',
 		api: () => import('./toolbar/media-picker.extension.js'),
+		forExtensions: ['Umb.Tiptap.Figure', 'Umb.Tiptap.Image'],
 		meta: {
 			alias: 'umbMedia',
 			icon: 'icon-picture',
@@ -466,14 +451,28 @@ const umbToolbarExtensions: Array<ManifestTiptapToolbarExtension> = [
 		alias: 'Umb.Tiptap.Toolbar.EmbeddedMedia',
 		name: 'Embedded Media Tiptap Extension',
 		api: () => import('./toolbar/embedded-media.extension.js'),
+		forExtensions: ['Umb.Tiptap.Embed'],
 		meta: {
 			alias: 'umbEmbeddedMedia',
 			icon: 'icon-embed',
 			label: '#general_embed',
 		},
 	},
+	{
+		type: 'tiptapToolbarExtension',
+		kind: 'button',
+		alias: 'Umb.Tiptap.Toolbar.Table',
+		name: 'Table Tiptap Extension',
+		api: () => import('./toolbar/table.extension.js'),
+		forExtensions: ['Umb.Tiptap.Table'],
+		meta: {
+			alias: 'table',
+			icon: 'icon-table',
+			label: 'Table',
+		},
+	},
 ];
 
-const extensions = [...coreExtensions, ...toolbarExtensions, ...umbToolbarExtensions];
+const extensions = [...coreExtensions, ...toolbarExtensions];
 
 export const manifests = [...kinds, ...extensions];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-extension.ts
index 619792c6bb..351325ec37 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-extension.ts
@@ -15,6 +15,6 @@ export interface MetaTiptapExtension {
 
 declare global {
 	interface UmbExtensionManifestMap {
-		tiptapExtension: ManifestTiptapExtension;
+		umbTiptapExtension: ManifestTiptapExtension;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-toolbar-extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-toolbar-extension.ts
index a97d658328..36d5c74f4a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-toolbar-extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-toolbar-extension.ts
@@ -6,6 +6,7 @@ export interface ManifestTiptapToolbarExtension<
 	MetaType extends MetaTiptapToolbarExtension = MetaTiptapToolbarExtension,
 > extends ManifestElementAndApi<UmbControllerHostElement, UmbTiptapToolbarElementApi> {
 	type: 'tiptapToolbarExtension';
+	forExtensions?: Array<string>;
 	meta: MetaType;
 }
 
@@ -24,6 +25,6 @@ export interface ManifestTiptapToolbarExtensionButtonKind<
 
 declare global {
 	interface UmbExtensionManifestMap {
-		tiptapToolbarExtension: ManifestTiptapToolbarExtension | ManifestTiptapToolbarExtensionButtonKind;
+		umbTiptapToolbarExtension: ManifestTiptapToolbarExtension | ManifestTiptapToolbarExtensionButtonKind;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/blockquote.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/blockquote.extension.ts
index f061e7e6b6..efd704be60 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/blockquote.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/blockquote.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarBlockquoteExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bold.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bold.extension.ts
index 5ec1124963..8206a62dc4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bold.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bold.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarBoldExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bullet-list.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bullet-list.extension.ts
index 983adb0c3d..79fb5d338f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bullet-list.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/bullet-list.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarBulletListExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/clear-formatting.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/clear-formatting.extension.ts
new file mode 100644
index 0000000000..2541a24615
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/clear-formatting.extension.ts
@@ -0,0 +1,8 @@
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
+import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
+
+export default class UmbTiptapToolbarClearFormattingExtensionApi extends UmbTiptapToolbarElementApiBase {
+	override execute(editor?: Editor) {
+		editor?.chain().focus().unsetAllMarks().run();
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/code-block.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/code-block.extension.ts
index a3a30b0f5d..f1c8930516 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/code-block.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/code-block.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarCodeBlockExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/embedded-media.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/embedded-media.extension.ts
index b50872c1f0..0a91f0801b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/embedded-media.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/embedded-media.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import { umbEmbeddedMedia } from '@umbraco-cms/backoffice/external/tiptap';
 import { UMB_EMBEDDED_MEDIA_MODAL } from '@umbraco-cms/backoffice/embedded-media';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading1.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading1.extension.ts
index b301f438e1..a9fd015ba9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading1.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading1.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarHeading1ExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading2.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading2.extension.ts
index 663bc09d22..1274bd0e26 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading2.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading2.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarHeading2ExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading3.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading3.extension.ts
index 3c3aed7cba..cb40b09cde 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading3.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/heading3.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarHeading3ExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/horizontal-rule.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/horizontal-rule.extension.ts
index 58836d2257..2ac3ddd0ab 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/horizontal-rule.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/horizontal-rule.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarHorizontalRuleExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/italic.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/italic.extension.ts
index 2ac2c77649..9e329a1c37 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/italic.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/italic.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarItalicExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/link.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/link.extension.ts
index 3c1ef5f0af..31760d8f07 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/link.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/link.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import { UmbLink } from '@umbraco-cms/backoffice/external/tiptap';
 import { UMB_LINK_PICKER_MODAL } from '@umbraco-cms/backoffice/multi-url-picker';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/media-picker.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/media-picker.extension.ts
index 0ba24357bd..e77af1787d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/media-picker.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/media-picker.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import { getGuidFromUdi, getProcessedImageUrl, imageSize } from '@umbraco-cms/backoffice/utils';
 import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UMB_MEDIA_CAPTION_ALT_TEXT_MODAL, UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/media';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/ordered-list.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/ordered-list.extension.ts
index f95d7da3d2..26956cfcde 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/ordered-list.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/ordered-list.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import { OrderedList, ListItem } from '@umbraco-cms/backoffice/external/tiptap';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/redo.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/redo.extension.ts
index 0aae301bba..74c6696158 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/redo.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/redo.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarRedoExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/source-editor.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/source-editor.extension.ts
index 7ff4fcd4ca..b40bd86234 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/source-editor.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/source-editor.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import { UMB_CODE_EDITOR_MODAL } from '@umbraco-cms/backoffice/code-editor';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/strike.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/strike.extension.ts
index 1428e2009b..7062ab000e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/strike.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/strike.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarStrikeExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/subscript.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/subscript.extension.ts
index 121e5210a6..d78312e01e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/subscript.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/subscript.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarSubscriptExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/superscript.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/superscript.extension.ts
index d46e966d29..5da21dc34d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/superscript.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/superscript.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarSuperscriptExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/table.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/table.extension.ts
index 3ef38f6f13..3589f6f138 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/table.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/table.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarTableExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-center.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-center.extension.ts
index a027bc18c1..683f9cef2c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-center.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-center.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarTextAlignCenterExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-justify.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-justify.extension.ts
index 38a53fc008..10e4825664 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-justify.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-justify.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarTextAlignJustifyExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-left.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-left.extension.ts
index 86b90b7e81..df6fb9fedb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-left.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-left.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarTextAlignLeftExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-right.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-right.extension.ts
index 8f3984bb5c..1f0c703b87 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-right.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/text-align-right.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarTextAlignRightExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/underline.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/underline.extension.ts
index 9a2aab8b50..f0c91ab0af 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/underline.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/underline.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarUnderlineExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/undo.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/undo.extension.ts
index 1cc600442b..63b6183323 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/undo.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/undo.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarUndoExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/unlink.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/unlink.extension.ts
index a3137f6ec5..947ff35307 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/unlink.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/unlink.extension.ts
@@ -1,4 +1,4 @@
-import { UmbTiptapToolbarElementApiBase } from '../types.js';
+import { UmbTiptapToolbarElementApiBase } from '../base.js';
 import type { Editor } from '@umbraco-cms/backoffice/external/tiptap';
 
 export default class UmbTiptapToolbarUnlinkExtensionApi extends UmbTiptapToolbarElementApiBase {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/types.ts
index 927d22cf63..67bdb4adfc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/types.ts
@@ -1,10 +1,12 @@
 import type { ManifestTiptapExtension } from './tiptap-extension.js';
 import type { ManifestTiptapToolbarExtension } from './tiptap-toolbar-extension.js';
-import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { Editor, Extension, Mark, Node } from '@umbraco-cms/backoffice/external/tiptap';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
+export type * from './tiptap-extension.js';
+export type * from './tiptap-toolbar-extension.js';
+
 export interface UmbTiptapExtensionApi extends UmbApi {
 	/**
 	 * The manifest for the extension.
@@ -22,30 +24,6 @@ export interface UmbTiptapExtensionApi extends UmbApi {
 	getTiptapExtensions(args?: UmbTiptapExtensionArgs): Array<Extension | Mark | Node>;
 }
 
-export abstract class UmbTiptapExtensionApiBase extends UmbControllerBase implements UmbTiptapExtensionApi {
-	/**
-	 * The manifest for the extension.
-	 */
-	manifest?: ManifestTiptapExtension;
-
-	/**
-	 * The editor instance.
-	 */
-	protected _editor?: Editor;
-
-	/**
-	 * @inheritdoc
-	 */
-	setEditor(editor: Editor): void {
-		this._editor = editor;
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	abstract getTiptapExtensions(args?: UmbTiptapExtensionArgs): Array<Extension | Mark | Node>;
-}
-
 export interface UmbTiptapExtensionArgs {
 	/**
 	 * The data type configuration for the property editor that the editor is used for.
@@ -71,32 +49,3 @@ export interface UmbTiptapToolbarElementApi extends UmbApi, UmbTiptapExtensionAr
 	 */
 	isActive(editor: Editor): boolean;
 }
-
-export abstract class UmbTiptapToolbarElementApiBase extends UmbControllerBase implements UmbTiptapToolbarElementApi {
-	/**
-	 * The manifest for the extension.
-	 */
-	manifest?: ManifestTiptapToolbarExtension;
-
-	/**
-	 * The data type configuration for the property editor that the editor is used for.
-	 */
-	configuration?: UmbPropertyEditorConfigCollection;
-
-	/**
-	 * A method to execute the toolbar element action.
-	 */
-	public abstract execute(editor: Editor): void;
-
-	/**
-	 * Informs the toolbar element if it is active or not. It uses the manifest meta alias to check if the toolbar element is active.
-	 * @see {ManifestTiptapToolbarExtension}
-	 * @param {Editor} editor The editor instance.
-	 * @returns {boolean} Returns true if the toolbar element is active.
-	 */
-	public isActive(editor: Editor) {
-		return editor && this.manifest?.meta.alias ? editor?.isActive(this.manifest.meta.alias) : false;
-	}
-}
-
-export type UmbTiptapToolbarValue = Array<Array<Array<string>>>;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/index.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/index.ts
index f0f1ade33d..72d8944e05 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/index.ts
@@ -1,2 +1,4 @@
 export * from './components/index.js';
 export * from './extensions/index.js';
+
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/plugins/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/plugins/manifests.ts
index aafd570b89..7701a5f10a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/plugins/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/plugins/manifests.ts
@@ -19,7 +19,7 @@ export const manifests: Array<ManifestTiptapExtension | ManifestTiptapToolbarExt
 		alias: 'Umb.Tiptap.Toolbar.BlockPicker',
 		name: 'Block Picker Tiptap Extension Button',
 		api: () => import('./block-picker-toolbar.extension.js'),
-		weight: 90,
+		forExtensions: ['Umb.Tiptap.Block'],
 		meta: {
 			alias: 'umbblockpicker',
 			icon: 'icon-plugin',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts
index d020ec400d..3762eae369 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-extensions-configuration.element.ts
@@ -1,33 +1,44 @@
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { customElement, css, html, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import {
-	UmbPropertyValueChangeEvent,
-	type UmbPropertyEditorConfigCollection,
-	type UmbPropertyEditorUiElement,
+	customElement,
+	css,
+	html,
+	ifDefined,
+	nothing,
+	property,
+	state,
+	repeat,
+	when,
+} from '@umbraco-cms/backoffice/external/lit';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import type {
+	UmbPropertyEditorConfigCollection,
+	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 
-type UmbTiptapExtensionConfig = {
+type UmbTiptapExtension = {
 	alias: string;
 	label: string;
 	icon?: string;
-	group: string;
+	group?: string;
+	description?: string;
 };
 
-type UmbTiptapExtensionGroupItem = {
-	alias: string;
-	label: string;
-	icon?: string;
+type UmbTiptapExtensionGroupItem = UmbTiptapExtension & {
 	selected: boolean;
 };
 
 type UmbTiptapExtensionGroup = {
 	group: string;
-	extensions: UmbTiptapExtensionGroupItem[];
+	extensions: Array<UmbTiptapExtensionGroupItem>;
 };
 
+const TIPTAP_CORE_EXTENSION_ALIAS = 'Umb.Tiptap.RichTextEssentials';
+const TIPTAP_BLOCK_EXTENSION_ALIAS = 'Umb.Tiptap.Block';
+
 const elementName = 'umb-property-editor-ui-tiptap-extensions-configuration';
 
 @customElement(elementName)
@@ -35,167 +46,177 @@ export class UmbPropertyEditorUiTiptapExtensionsConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
+	#disabledExtensions = new Set<string>([TIPTAP_CORE_EXTENSION_ALIAS]);
+
 	@property({ attribute: false })
-	value?: Array<string> = [];
+	value?: Array<string> = [TIPTAP_CORE_EXTENSION_ALIAS];
 
 	@property({ attribute: false })
 	config?: UmbPropertyEditorConfigCollection;
 
 	@state()
-	private _extensionCategories: UmbTiptapExtensionGroup[] = [];
+	private _extensions: Array<UmbTiptapExtension> = [];
 
 	@state()
-	private _extensionConfigs: UmbTiptapExtensionConfig[] = [];
+	private _groups: Array<UmbTiptapExtensionGroup> = [];
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (dataset) => {
+			this.observe(
+				await dataset.propertyValueByAlias<Array<unknown>>('blocks'),
+				(blocks) => {
+					const tmpValue = this.value ? [...this.value] : [];
+
+					// When blocks are configured, the block extension can be enabled;
+					// otherwise, the block extension must be disabled.
+					if (blocks?.length) {
+						// Check if the block extension is already enabled, if not, add it.
+						if (!tmpValue.includes(TIPTAP_BLOCK_EXTENSION_ALIAS)) {
+							tmpValue.push(TIPTAP_BLOCK_EXTENSION_ALIAS);
+						}
+						this.#disabledExtensions.delete(TIPTAP_BLOCK_EXTENSION_ALIAS);
+					} else {
+						// Check if the block extension is enabled, if so, remove it.
+						const idx = tmpValue.indexOf(TIPTAP_BLOCK_EXTENSION_ALIAS) ?? -1;
+						if (idx >= 0) {
+							tmpValue.splice(idx, 1);
+						}
+						this.#disabledExtensions.add(TIPTAP_BLOCK_EXTENSION_ALIAS);
+					}
+
+					if (!this.value || !this.#isArrayEqualTo(tmpValue, this.value)) {
+						this.#setValue(tmpValue);
+						this.#syncViewModel();
+					}
+				},
+				'_observeBlocks',
+			);
+		});
+	}
 
 	protected override async firstUpdated(_changedProperties: PropertyValueMap<unknown>) {
 		super.firstUpdated(_changedProperties);
 
 		this.observe(umbExtensionsRegistry.byType('tiptapExtension'), (extensions) => {
-			this._extensionConfigs = extensions
+			this._extensions = extensions
 				.sort((a, b) => a.alias.localeCompare(b.alias))
-				.map((ext) => {
-					return {
-						alias: ext.alias,
-						label: ext.meta.label,
-						icon: ext.meta.icon,
-						group: ext.meta.group,
-					};
-				});
+				.map((ext) => ({ alias: ext.alias, label: ext.meta.label, icon: ext.meta.icon, group: ext.meta.group }));
+
+			// Hardcoded core extension
+			this._extensions.unshift({
+				alias: TIPTAP_CORE_EXTENSION_ALIAS,
+				label: 'Rich Text Essentials',
+				icon: 'icon-browser-window',
+				group: '#tiptap_extGroup_formatting',
+				description: 'This is a core extension, it must be enabled',
+			});
 
 			if (!this.value) {
 				// The default value is all extensions enabled
-				this.value = this._extensionConfigs.map((ext) => ext.alias);
-				this.dispatchEvent(new UmbPropertyValueChangeEvent());
+				this.#setValue(this._extensions.map((ext) => ext.alias));
 			}
 
-			this.#setupExtensionCategories();
+			this.#syncViewModel();
 		});
 	}
 
-	#setupExtensionCategories() {
-		const useDefault = !this.value; // The default value is all extensions enabled
-		const withSelectedProperty = this._extensionConfigs.map((extensionConfig) => {
-			return {
-				...extensionConfig,
-				selected: useDefault ? true : this.value!.includes(extensionConfig.alias),
-			};
-		});
-
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-expect-error
-		const grouped = Object.groupBy(
-			withSelectedProperty,
-			(item: UmbTiptapExtensionConfig) => item.group || 'Uncategorized',
-		);
-
-		this._extensionCategories = Object.keys(grouped)
-			.sort((a, b) => a.localeCompare(b))
-			.map((key) => ({
-				group: key,
-				extensions: grouped[key],
-			}));
+	#isArrayEqualTo(a: Array<string>, b: Array<string>) {
+		return a.length === b.length && a.every((item) => b.includes(item)) && b.every((item) => a.includes(item));
 	}
 
-	#onExtensionClick(item: UmbTiptapExtensionGroupItem) {
+	#onClick(item: UmbTiptapExtensionGroupItem) {
 		item.selected = !item.selected;
 
-		if (!this.value) {
-			this.value = [];
-		}
+		const tmpValue = item.selected
+			? [...(this.value ?? []), item.alias]
+			: (this.value ?? []).filter((alias) => alias !== item.alias);
 
-		if (item.selected) {
-			this.value = [...this.value, item.alias];
-		} else {
-			this.value = this.value.filter((alias) => alias !== item.alias);
-		}
+		this.#setValue(tmpValue);
+	}
 
-		this.requestUpdate('_extensionCategories');
+	#setValue(value: Array<string>) {
+		this.value = value;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
+	#syncViewModel() {
+		const items: Array<UmbTiptapExtensionGroupItem> = this._extensions.map((extension) => ({
+			...extension,
+			selected: this.value!.includes(extension.alias) || extension.alias === TIPTAP_CORE_EXTENSION_ALIAS,
+		}));
+
+		const uncategorizedLabel = this.localize.term('tiptap_extGroup_unknown');
+
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		const grouped = Object.groupBy(items, (item: UmbTiptapExtensionGroupItem) => item.group || uncategorizedLabel);
+
+		this._groups = Object.keys(grouped)
+			.sort((a, b) => a.localeCompare(b))
+			.map((key) => ({ group: key, extensions: grouped[key] }));
+	}
+
 	override render() {
+		if (!this._groups.length) return nothing;
 		return html`
-			<div class="extensions">
-				${repeat(
-					this._extensionCategories,
-					(group) => html`
-						<div class="group">
-							<p class="group-name">${this.localize.string(group.group)}</p>
+			${repeat(
+				this._groups,
+				(group) => html`
+					<div class="group">
+						<uui-label>${this.localize.string(group.group)}</uui-label>
+						<ul>
 							${repeat(
 								group.extensions,
 								(item) => html`
-									<div class="extension-item">
-										<uui-button
-											compact
-											class=${item.selected ? 'selected' : ''}
+									<li title=${ifDefined(item.description)}>
+										<uui-checkbox
 											label=${this.localize.string(item.label)}
-											look="outline"
-											.value=${item.alias}
-											@click=${() => this.#onExtensionClick(item)}>
-											<umb-icon name=${item.icon ?? ''}></umb-icon>
-										</uui-button>
-										<uui-button
-											compact
-											label=${this.localize.string(item.label)}
-											look="default"
-											style="--uui-button-content-align:left;"
-											@click=${() => this.#onExtensionClick(item)}></uui-button>
-									</div>
+											value=${item.alias}
+											?checked=${item.selected}
+											?disabled=${this.#disabledExtensions.has(item.alias)}
+											@change=${() => this.#onClick(item)}>
+											<div class="inner">
+												${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
+												<span>${this.localize.string(item.label)}</span>
+											</div>
+										</uui-checkbox>
+									</li>
 								`,
 							)}
-						</div>
-					`,
-				)}
-			</div>
+						</ul>
+					</div>
+				`,
+			)}
 		`;
 	}
 
 	static override readonly styles = [
-		UmbTextStyles,
 		css`
-			uui-icon {
-				width: unset;
-				height: unset;
-				display: flex;
-				vertical-align: unset;
-			}
-
-			uui-button.selected {
-				--uui-button-border-color: var(--uui-color-selected);
-				--uui-button-border-width: 2px;
-			}
-
-			.extensions {
+			:host {
 				display: flex;
 				flex-wrap: wrap;
-				gap: 16px;
-				margin-top: 16px;
-			}
-
-			.extension-item {
-				display: grid;
-				grid-template-columns: 36px 1fr;
-				grid-template-rows: 1fr;
-				align-items: center;
-				gap: 9px;
+				gap: 1rem;
 			}
 
 			.group {
 				flex: 1;
-				display: flex;
-				flex-direction: column;
-				gap: 6px;
-				padding: 12px;
-				background-color: var(--uui-color-surface-alt);
-				border: 1px solid var(--uui-color-border);
-				border-radius: 6px;
-			}
 
-			.group-name {
-				grid-column: 1 / -1;
-				display: flex;
-				font-weight: bold;
-				margin: 0;
+				ul {
+					list-style: none;
+					padding: 0;
+					margin: 1rem 0 0;
+
+					.inner {
+						display: flex;
+						flex-direction: row;
+						gap: 0.5rem;
+
+						umb-icon {
+							font-size: 1.2rem;
+						}
+					}
+				}
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts
index 7078d2318a..4fd205cead 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts
@@ -1,16 +1,16 @@
-import type { UmbTiptapToolbarValue } from '../../../extensions/types.js';
-import { customElement, css, html, property, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbTiptapToolbarConfigurationContext } from '../contexts/tiptap-toolbar-configuration.context.js';
+import type {
+	UmbTiptapToolbarExtension,
+	UmbTiptapToolbarGroupViewModel,
+	UmbTiptapToolbarRowViewModel,
+} from '../types.js';
+import type { UmbTiptapToolbarValue } from '../../../components/types.js';
+import { customElement, css, html, property, repeat, state, when, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { debounce } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbPropertyValueChangeEvent, type UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
-import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
 
-type UmbTiptapToolbarExtension = {
-	alias: string;
-	label: string;
-	icon: string;
-};
 const elementName = 'umb-property-editor-ui-tiptap-toolbar-configuration';
 
 @customElement(elementName)
@@ -18,56 +18,59 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
-	readonly #inUse: Set<string> = new Set();
+	#context = new UmbTiptapToolbarConfigurationContext(this);
 
-	#currentDragItem?: {
-		alias: string;
-		fromPos?: [number, number, number];
-	};
+	#currentDragItem?: { alias: string; fromPos?: [number, number, number] };
 
-	#lookup?: Map<string, UmbTiptapToolbarExtension>;
+	#debouncedFilter = debounce((query: string) => {
+		this._availableExtensions = this.#context.filterExtensions(query);
+	}, 250);
 
 	@state()
-	private _extensions: Array<UmbTiptapToolbarExtension> = [];
+	private _availableExtensions: Array<UmbTiptapToolbarExtension> = [];
+
+	@state()
+	private _toolbar: Array<UmbTiptapToolbarRowViewModel> = [];
 
 	@property({ attribute: false })
 	set value(value: UmbTiptapToolbarValue | undefined) {
-		if (!this.#isValidTiptapToolbarValue(value)) {
-			this.#value = [[[]]];
-			return;
-		}
-
-		if (value.length > 0) {
-			this.#value = value.map((rows) => rows.map((groups) => [...groups]));
-			value.forEach((row) => row.forEach((group) => group.forEach((alias) => this.#inUse.add(alias))));
-		}
+		if (!value) value = [[[]]];
+		if (value === this.#value) return;
+		this.#context.setToolbar(value);
 	}
-	get value(): UmbTiptapToolbarValue {
-		return this.#value;
+	get value(): UmbTiptapToolbarValue | undefined {
+		return this.#value?.map((rows) => rows.map((groups) => [...groups]));
 	}
-	#value: UmbTiptapToolbarValue = [[[]]];
+	#value?: UmbTiptapToolbarValue;
 
-	protected override async firstUpdated(_changedProperties: PropertyValueMap<unknown>) {
-		super.firstUpdated(_changedProperties);
+	constructor() {
+		super();
 
-		this.observe(umbExtensionsRegistry.byType('tiptapToolbarExtension'), (extensions) => {
-			this._extensions = extensions.map((ext) => ({ alias: ext.alias, label: ext.meta.label, icon: ext.meta.icon }));
-			this.#lookup = new Map(this._extensions.map((ext) => [ext.alias, ext]));
+		this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
+			this.observe(this.#context.extensions, (extensions) => {
+				this._availableExtensions = extensions;
+			});
+
+			this.observe(this.#context.reload, (reload) => {
+				if (reload) {
+					this.requestUpdate();
+				}
+			});
+
+			this.observe(this.#context.toolbar, (toolbar) => {
+				if (!toolbar.length) return;
+				this._toolbar = toolbar;
+				this.#value = toolbar.map((rows) => rows.data.map((groups) => [...groups.data]));
+				propertyContext.setValue(this.#value);
+			});
 		});
 	}
 
-	#isValidTiptapToolbarValue(value: unknown): value is UmbTiptapToolbarValue {
-		if (!Array.isArray(value)) return false;
-		for (const row of value) {
-			if (!Array.isArray(row)) return false;
-			for (const group of row) {
-				if (!Array.isArray(group)) return false;
-				for (const alias of group) {
-					if (typeof alias !== 'string') return false;
-				}
-			}
-		}
-		return true;
+	#onClick(item: UmbTiptapToolbarExtension) {
+		const lastRow = (this.#value?.length ?? 1) - 1;
+		const lastGroup = (this.#value?.[lastRow].length ?? 1) - 1;
+		const lastItem = this.#value?.[lastRow][lastGroup].length ?? 0;
+		this.#context.insertToolbarItem(item.alias, [lastRow, lastGroup, lastItem]);
 	}
 
 	#onDragStart(event: DragEvent, alias: string, fromPos?: [number, number, number]) {
@@ -86,7 +89,7 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 			const { fromPos } = this.#currentDragItem ?? {};
 			if (!fromPos) return;
 
-			this.#removeItem(fromPos);
+			this.#context.removeToolbarItem(fromPos);
 		}
 	}
 
@@ -96,240 +99,353 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement
 
 		// Remove item if no destination position is provided
 		if (fromPos && !toPos) {
-			this.#removeItem(fromPos);
+			this.#context.removeToolbarItem(fromPos);
 			return;
 		}
+
 		// Move item if both source and destination positions are available
 		if (fromPos && toPos) {
-			this.#moveItem(fromPos, toPos);
+			this.#context.moveToolbarItem(fromPos, toPos);
 			return;
 		}
+
 		// Insert item if an alias and a destination position are provided
 		if (alias && toPos) {
-			this.#insertItem(alias, toPos);
+			this.#context.insertToolbarItem(alias, toPos);
 		}
 	}
 
-	#moveItem(from: [number, number, number], to: [number, number, number]) {
-		const [rowIndex, groupIndex, itemIndex] = from;
-
-		// Get the item to move from the 'from' position
-		const itemToMove = this.#value[rowIndex][groupIndex][itemIndex];
-
-		// Remove the item from the original position
-		this.#value[rowIndex][groupIndex].splice(itemIndex, 1);
-
-		this.#insertItem(itemToMove, to);
-	}
-
-	#insertItem(alias: string, toPos: [number, number, number]) {
-		const [rowIndex, groupIndex, itemIndex] = toPos;
-
-		// Insert the item into the new position
-		const inserted = this.#value[rowIndex][groupIndex].splice(itemIndex, 0, alias);
-		inserted.forEach((alias) => this.#inUse.add(alias));
-
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	#removeItem(from: [number, number, number]) {
-		const [rowIndex, groupIndex, itemIndex] = from;
-
-		const removed = this.#value[rowIndex][groupIndex].splice(itemIndex, 1);
-		removed.forEach((alias) => this.#inUse.delete(alias));
-
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	#addGroup(rowIndex: number, groupIndex: number) {
-		this.#value[rowIndex].splice(groupIndex, 0, []);
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	#removeGroup(rowIndex: number, groupIndex: number) {
-		if (this.#value[rowIndex].length > groupIndex) {
-			const removed = this.#value[rowIndex].splice(groupIndex, 1);
-			removed.forEach((group) => group.forEach((alias) => this.#inUse.delete(alias)));
-		}
-
-		// Prevent leaving an empty group
-		if (this.#value[rowIndex].length === 0) {
-			this.#value[rowIndex][groupIndex] = [];
-		}
-
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	#addRow(rowIndex: number) {
-		this.#value.splice(rowIndex, 0, [[]]);
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
-	}
-
-	#removeRow(rowIndex: number) {
-		if (this.#value.length > rowIndex) {
-			const removed = this.#value.splice(rowIndex, 1);
-			removed.forEach((row) => row.forEach((group) => group.forEach((alias) => this.#inUse.delete(alias))));
-		}
-
-		// Prevent leaving an empty row
-		if (this.#value.length === 0) {
-			this.#value[rowIndex] = [[]];
-		}
-
-		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	#onFilterInput(event: InputEvent & { target: HTMLInputElement }) {
+		const query = (event.target.value ?? '').toLocaleLowerCase();
+		this.#debouncedFilter(query);
 	}
 
 	override render() {
-		return html`
-			${repeat(this.#value, (row, rowIndex) => this.#renderRow(row, rowIndex))}
-			<uui-button look="secondary" @click=${() => this.#addRow(this.#value.length)}>
-				<uui-icon name="add"></uui-icon>
-				<span>Add row</span>
-			</uui-button>
-			${this.#renderExtensions()}
-		`;
+		return html`${this.#renderAvailableItems()} ${this.#renderDesigner()}`;
 	}
 
-	#renderRow(row: string[][], rowIndex: number) {
+	#renderAvailableItems() {
 		return html`
-			<div class="row">
-				${repeat(row, (group, groupIndex) => this.#renderGroup(group, rowIndex, groupIndex))}
-				<uui-button look="secondary" @click=${() => this.#addGroup(rowIndex, row.length)}>
-					<uui-icon name="add"></uui-icon>
-					<span>Add group</span>
-				</uui-button>
-				<uui-button
-					compact
-					color="danger"
-					look="primary"
-					class="remove-row-button ${rowIndex === 0 && row.length === 1 && row[0].length === 0 ? 'hidden' : undefined}"
-					@click=${() => this.#removeRow(rowIndex)}>
-					<umb-icon name="icon-trash"></umb-icon>
-				</uui-button>
-			</div>
-		`;
-	}
-
-	#renderGroup(group: string[], rowIndex: number, groupIndex: number) {
-		return html`
-			<div
-				class="group"
-				dropzone="move"
-				@dragover=${this.#onDragOver}
-				@drop=${(e: DragEvent) => this.#onDrop(e, [rowIndex, groupIndex, group.length])}>
-				${group.map((alias, itemIndex) => this.#renderItem(alias, rowIndex, groupIndex, itemIndex))}
-				<uui-button
-					compact
-					color="danger"
-					look="primary"
-					class="remove-group-button ${groupIndex === 0 && group.length === 0 ? 'hidden' : undefined}"
-					@click=${() => this.#removeGroup(rowIndex, groupIndex)}>
-					<umb-icon name="icon-trash"></umb-icon>
-				</uui-button>
-			</div>
-		`;
-	}
-
-	#renderItem(alias: string, rowIndex: number, groupIndex: number, itemIndex: number) {
-		const extension = this.#lookup?.get(alias);
-		if (!extension) return nothing;
-		return html`
-			<div
-				title=${this.localize.string(extension.label)}
-				class="item"
-				draggable="true"
-				@dragend=${this.#onDragEnd}
-				@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
-				<umb-icon name=${extension.icon ?? ''}></umb-icon>
-			</div>
-		`;
-	}
-
-	#renderExtensions() {
-		return html`
-			<div class="extensions" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
-				${repeat(
-					this._extensions.filter((ext) => !this.#inUse.has(ext.alias)),
-					(extension) => html`
-						<div
-							class="item"
-							draggable="true"
-							title=${this.localize.string(extension.label)}
-							@dragstart=${(e: DragEvent) => this.#onDragStart(e, extension.alias)}
-							@dragend=${this.#onDragEnd}>
-							<umb-icon name=${extension.icon ?? ''}></umb-icon>
+			<uui-box class="minimal" headline=${this.localize.term('tiptap_toobar_availableItems')}>
+				<div slot="header-actions">
+					<uui-input
+						type="search"
+						autocomplete="off"
+						placeholder=${this.localize.term('placeholders_filter')}
+						@input=${this.#onFilterInput}>
+						<div slot="prepend">
+							<uui-icon name="search"></uui-icon>
 						</div>
+					</uui-input>
+				</div>
+				<div class="available-items" dropzone="move" @drop=${this.#onDrop} @dragover=${this.#onDragOver}>
+					${when(
+						this._availableExtensions.length === 0,
+						() =>
+							html`<umb-localize key="tiptap_toobar_availableItemsEmpty"
+								>There are no toolbar extensions to show</umb-localize
+							>`,
+						() => repeat(this._availableExtensions, (item) => this.#renderAvailableItem(item)),
+					)}
+				</div>
+			</uui-box>
+		`;
+	}
+
+	#renderAvailableItem(item: UmbTiptapToolbarExtension) {
+		const forbidden = !this.#context.isExtensionEnabled(item.alias);
+		const inUse = this.#context.isExtensionInUse(item.alias);
+		return html`
+			<uui-button
+				compact
+				class=${forbidden ? 'forbidden' : ''}
+				draggable="true"
+				look=${forbidden ? 'placeholder' : 'outline'}
+				?disabled=${forbidden || inUse}
+				@click=${() => this.#onClick(item)}
+				@dragstart=${(e: DragEvent) => this.#onDragStart(e, item.alias)}
+				@dragend=${this.#onDragEnd}>
+				<div class="inner">
+					${when(item.icon, () => html`<umb-icon .name=${item.icon}></umb-icon>`)}
+					<span>${this.localize.string(item.label)}</span>
+				</div>
+			</uui-button>
+		`;
+	}
+
+	#renderDesigner() {
+		return html`
+			<uui-box class="minimal" headline=${this.localize.term('tiptap_toolbar_designer')}>
+				<div id="rows">
+					${repeat(
+						this._toolbar,
+						(row) => row.unique,
+						(row, idx) => this.#renderRow(row, idx),
+					)}
+				</div>
+				<uui-button
+					id="btnAddRow"
+					look="placeholder"
+					label=${this.localize.term('tiptap_toolbar_addRow')}
+					@click=${() => this.#context.insertToolbarRow(this._toolbar.length)}></uui-button>
+			</uui-box>
+		`;
+	}
+
+	#renderRow(row?: UmbTiptapToolbarRowViewModel, rowIndex = 0) {
+		if (!row) return nothing;
+		const hideActionBar = this._toolbar.length === 1;
+		return html`
+			<uui-button-inline-create
+				label=${this.localize.term('tiptap_toolbar_addRow')}
+				@click=${() => this.#context?.insertToolbarRow(rowIndex)}></uui-button-inline-create>
+			<div class="row">
+				<div class="groups">
+					<uui-button-inline-create
+						vertical
+						label=${this.localize.term('tiptap_toolbar_addGroup')}
+						@click=${() => this.#context?.insertToolbarGroup(rowIndex, 0)}></uui-button-inline-create>
+					${repeat(
+						row.data,
+						(group) => group.unique,
+						(group, idx) => this.#renderGroup(group, rowIndex, idx),
+					)}
+				</div>
+				${when(
+					!hideActionBar,
+					() => html`
+						<uui-action-bar>
+							<uui-button
+								color="danger"
+								look="secondary"
+								label=${this.localize.term('tiptap_toolbar_removeRow')}
+								@click=${() => this.#context?.removeToolbarRow(rowIndex)}>
+								<uui-icon name="icon-trash"></uui-icon>
+							</uui-button>
+						</uui-action-bar>
 					`,
 				)}
 			</div>
 		`;
 	}
 
+	#renderGroup(group?: UmbTiptapToolbarGroupViewModel, rowIndex = 0, groupIndex = 0) {
+		if (!group) return nothing;
+		const hideActionBar = this._toolbar[rowIndex].data.length === 1 && group.data.length === 0;
+		return html`
+			<div
+				class="group"
+				dropzone="move"
+				@dragover=${this.#onDragOver}
+				@drop=${(e: DragEvent) => this.#onDrop(e, [rowIndex, groupIndex, group.data.length - 1])}>
+				<div class="items">
+					${when(
+						group?.data.length === 0,
+						() => html`<em><umb-localize key="tiptap_toolbar_addItems">Add items</umb-localize></em>`,
+						() => html`${group!.data.map((alias, idx) => this.#renderItem(alias, rowIndex, groupIndex, idx))}`,
+					)}
+				</div>
+				${when(
+					!hideActionBar,
+					() => html`
+						<uui-action-bar>
+							<uui-button
+								color="danger"
+								look="secondary"
+								label=${this.localize.term('tiptap_toolbar_removeGroup')}
+								@click=${() => this.#context?.removeToolbarGroup(rowIndex, groupIndex)}>
+								<uui-icon name="icon-trash"></uui-icon>
+							</uui-button>
+						</uui-action-bar>
+					`,
+				)}
+			</div>
+			<uui-button-inline-create
+				vertical
+				label=${this.localize.term('tiptap_toolbar_addGroup')}
+				@click=${() => this.#context?.insertToolbarGroup(rowIndex, groupIndex + 1)}></uui-button-inline-create>
+		`;
+	}
+
+	#renderItem(alias: string, rowIndex = 0, groupIndex = 0, itemIndex = 0) {
+		const item = this.#context?.getExtensionByAlias(alias);
+		if (!item) return nothing;
+		const forbidden = !this.#context?.isExtensionEnabled(item.alias);
+		return html`
+			<uui-button
+				compact
+				class=${forbidden ? 'forbidden' : ''}
+				draggable="true"
+				look=${forbidden ? 'placeholder' : 'outline'}
+				title=${this.localize.string(item.label)}
+				?disabled=${forbidden}
+				@click=${() => this.#context.removeToolbarItem([rowIndex, groupIndex, itemIndex])}
+				@dragend=${this.#onDragEnd}
+				@dragstart=${(e: DragEvent) => this.#onDragStart(e, alias, [rowIndex, groupIndex, itemIndex])}>
+				<div class="inner">
+					${when(
+						item.icon,
+						() => html`<umb-icon .name=${item.icon}></umb-icon>`,
+						() => html`<span>${this.localize.string(item.label)}</span>`,
+					)}
+				</div>
+			</uui-button>
+		`;
+	}
+
 	static override readonly styles = [
-		UmbTextStyles,
 		css`
 			:host {
 				display: flex;
 				flex-direction: column;
-				gap: 6px;
+				gap: var(--uui-size-1);
 			}
-			.extensions {
+
+			uui-box.minimal {
+				--uui-box-header-padding: 0;
+				--uui-box-default-padding: var(--uui-size-2) 0;
+				--uui-box-box-shadow: none;
+
+				[slot='header-actions'] {
+					margin-bottom: var(--uui-size-2);
+
+					uui-icon {
+						color: var(--uui-color-border);
+					}
+				}
+			}
+
+			.available-items {
 				display: flex;
 				flex-wrap: wrap;
-				gap: 3px;
-				border-radius: var(--uui-border-radius);
+				gap: var(--uui-size-3);
 				background-color: var(--uui-color-surface-alt);
-				padding: 6px;
-				min-height: 30px;
-				min-width: 30px;
-			}
-			.row {
-				position: relative;
-				display: flex;
-				gap: 12px;
-			}
-			.group {
-				position: relative;
-				display: flex;
-				gap: 3px;
 				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-surface-alt);
-				padding: 6px;
-				min-height: 32px;
-				min-width: 32px;
+				padding: var(--uui-size-3);
+
+				uui-button {
+					--uui-button-font-weight: normal;
+
+					&[draggable='true'],
+					&[draggable='true'] > .inner {
+						cursor: move;
+					}
+
+					&[disabled],
+					&[disabled] > .inner {
+						cursor: not-allowed;
+					}
+
+					&.forbidden {
+						--color: var(--uui-color-danger);
+						--color-standalone: var(--uui-color-danger-standalone);
+						--color-emphasis: var(--uui-color-danger-emphasis);
+						--color-contrast: var(--uui-color-danger);
+						--uui-button-contrast-disabled: var(--uui-color-danger);
+						--uui-button-border-color-disabled: var(--uui-color-danger);
+						opacity: 0.5;
+					}
+
+					div {
+						display: flex;
+						gap: var(--uui-size-1);
+					}
+				}
 			}
-			.item {
-				padding: var(--uui-size-space-2);
-				border: 1px solid var(--uui-color-border);
-				border-radius: var(--uui-border-radius);
-				background-color: var(--uui-color-surface);
+
+			#rows {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-1);
+
+				.row {
+					display: flex;
+					align-items: flex-start;
+					justify-content: space-between;
+					gap: var(--uui-size-3);
+					border: 1px solid var(--uui-color-border);
+					border-radius: var(--uui-border-radius);
+					padding: var(--uui-size-3) var(--uui-size-2);
+
+					&:hover {
+						border-color: var(--uui-button-contrast-hover);
+					}
+
+					.groups {
+						flex: 1;
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						align-items: center;
+						justify-content: flex-start;
+						gap: var(--uui-size-1);
+
+						uui-button-inline-create {
+							height: 40px;
+						}
+
+						.group {
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							justify-content: space-between;
+							gap: var(--uui-size-3);
+
+							border: 1px dashed var(--uui-color-border-standalone);
+							border-radius: var(--uui-border-radius);
+							padding: var(--uui-size-3);
+
+							&:hover {
+								border-color: var(--uui-button-contrast-hover);
+							}
+
+							.items {
+								display: flex;
+								flex-direction: row;
+								flex-wrap: wrap;
+								gap: var(--uui-size-1);
+
+								uui-button {
+									--uui-button-font-weight: normal;
+
+									&[draggable='true'],
+									&[draggable='true'] > .inner {
+										cursor: move;
+									}
+
+									&[disabled],
+									&[disabled] > .inner {
+										cursor: not-allowed;
+									}
+
+									&.forbidden {
+										--color: var(--uui-color-danger);
+										--color-standalone: var(--uui-color-danger-standalone);
+										--color-emphasis: var(--uui-color-danger-emphasis);
+										--color-contrast: var(--uui-color-danger);
+										--uui-button-contrast-disabled: var(--uui-color-danger);
+										--uui-button-border-color-disabled: var(--uui-color-danger);
+										opacity: 0.5;
+									}
+
+									div {
+										display: flex;
+										gap: var(--uui-size-1);
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+
+			#btnAddRow {
+				display: block;
+				margin-top: var(--uui-size-1);
+			}
+
+			.handle {
 				cursor: move;
-				display: flex;
-				box-sizing: border-box;
-				width: 32px;
-				height: 32px;
-				justify-content: center;
-			}
-
-			.remove-row-button,
-			.remove-group-button {
-				display: none;
-			}
-			.remove-group-button {
-				position: absolute;
-				top: -26px;
-				left: 50%;
-				transform: translateX(-50%);
-				z-index: 1;
-			}
-
-			.row:hover .remove-row-button:not(.hidden),
-			.group:hover .remove-group-button:not(.hidden) {
-				display: flex;
-			}
-			umb-icon {
-				/* Prevents titles from bugging out */
-				pointer-events: none;
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts
new file mode 100644
index 0000000000..a6d73979c5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts
@@ -0,0 +1,247 @@
+import type { UmbTiptapToolbarValue } from '../../../components/types.js';
+import type {
+	UmbTiptapToolbarExtension,
+	UmbTiptapToolbarGroupViewModel,
+	UmbTiptapToolbarRowViewModel,
+} from '../types.js';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbArrayState, UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UmbId } from '@umbraco-cms/backoffice/id';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbTiptapToolbarConfigurationContext extends UmbContextBase<UmbTiptapToolbarConfigurationContext> {
+	#extensions = new UmbArrayState<UmbTiptapToolbarExtension>([], (x) => x.alias);
+	public readonly extensions = this.#extensions.asObservable();
+
+	#reload = new UmbBooleanState(false);
+	public readonly reload = this.#reload.asObservable();
+
+	#extensionsEnabled = new Set<string>();
+
+	#extensionsInUse = new Set<string>();
+
+	#lookup?: Map<string, UmbTiptapToolbarExtension>;
+
+	#toolbar = new UmbArrayState<UmbTiptapToolbarRowViewModel>([], (x) => x.unique);
+	public readonly toolbar = this.#toolbar.asObservable();
+
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_TIPTAP_TOOLBAR_CONFIGURATION_CONTEXT);
+
+		this.observe(umbExtensionsRegistry.byType('tiptapToolbarExtension'), (extensions) => {
+			const _extensions = extensions.map((ext) => ({
+				alias: ext.alias,
+				label: ext.meta.label,
+				icon: ext.meta.icon,
+				dependencies: ext.forExtensions,
+			}));
+
+			this.#extensions.setValue(_extensions);
+
+			this.#lookup = new Map(_extensions.map((ext) => [ext.alias, ext]));
+		});
+
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (dataset) => {
+			this.observe(
+				await dataset.propertyValueByAlias<Array<string>>('extensions'),
+				(extensions) => {
+					if (extensions) {
+						this.#extensionsEnabled.clear();
+						this.#reload.setValue(false);
+
+						this.#extensions
+							.getValue()
+							.filter((x) => !x.dependencies || x.dependencies.every((z) => extensions.includes(z)))
+							.map((x) => x.alias)
+							.forEach((alias) => this.#extensionsEnabled.add(alias));
+
+						this.#reload.setValue(true);
+					}
+				},
+				'_observeExtensions',
+			);
+		});
+	}
+
+	public filterExtensions(query: string): Array<UmbTiptapToolbarExtension> {
+		return this.#extensions
+			.getValue()
+			.filter((ext) => ext.alias?.toLowerCase().includes(query) || ext.label?.toLowerCase().includes(query));
+	}
+
+	public getExtensionByAlias(alias: string): UmbTiptapToolbarExtension | undefined {
+		return this.#lookup?.get(alias);
+	}
+
+	public isExtensionEnabled(alias: string): boolean {
+		return this.#extensionsEnabled.has(alias);
+	}
+
+	public isExtensionInUse(alias: string): boolean {
+		return this.#extensionsInUse.has(alias);
+	}
+
+	public isValidToolbarValue(value: unknown): value is UmbTiptapToolbarValue {
+		if (!Array.isArray(value)) return false;
+		for (const row of value) {
+			if (!Array.isArray(row)) return false;
+			for (const group of row) {
+				if (!Array.isArray(group)) return false;
+				for (const alias of group) {
+					if (typeof alias !== 'string') return false;
+				}
+			}
+		}
+		return true;
+	}
+
+	public insertToolbarItem(alias: string, to: [number, number, number]) {
+		const toolbar = [...this.#toolbar.getValue()];
+
+		const [rowIndex, groupIndex, itemIndex] = to;
+
+		const row = toolbar[rowIndex];
+		const rowData = [...row.data];
+		const group = rowData[groupIndex];
+		const items = [...group.data];
+
+		items.splice(itemIndex, 0, alias);
+		this.#extensionsInUse.add(alias);
+
+		rowData[groupIndex] = { unique: group.unique, data: items };
+		toolbar[rowIndex] = { unique: row.unique, data: rowData };
+
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public insertToolbarGroup(rowIndex: number, groupIndex: number) {
+		const toolbar = [...this.#toolbar.getValue()];
+		const row = toolbar[rowIndex];
+		const groups = [...row.data];
+		groups.splice(groupIndex, 0, { unique: UmbId.new(), data: [] });
+		toolbar[rowIndex] = { unique: row.unique, data: groups };
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public insertToolbarRow(rowIndex: number) {
+		const toolbar = [...this.#toolbar.getValue()];
+		toolbar.splice(rowIndex, 0, { unique: UmbId.new(), data: [{ unique: UmbId.new(), data: [] }] });
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public moveToolbarItem(from: [number, number, number], to: [number, number, number]) {
+		const [fromRowIndex, fromGroupIndex, fromItemIndex] = from;
+		const [toRowIndex, toGroupIndex, toItemIndex] = to;
+
+		const toolbar = [...this.#toolbar.getValue()];
+
+		const fromRow = toolbar[fromRowIndex];
+		const fromRowData = [...fromRow.data];
+		const fromGroup = fromRowData[fromGroupIndex];
+		const fromItems = [...fromGroup.data];
+
+		const toBeMoved = fromItems.splice(fromItemIndex, 1);
+
+		fromRowData[fromGroupIndex] = { unique: fromGroup.unique, data: fromItems };
+		toolbar[fromRowIndex] = { unique: fromRow.unique, data: fromRowData };
+
+		const toRow = toolbar[toRowIndex];
+		const toRowData = [...toRow.data];
+		const toGroup = toRowData[toGroupIndex];
+		const toItems = [...toGroup.data];
+
+		toItems.splice(toItemIndex, 0, toBeMoved[0]);
+
+		toRowData[toGroupIndex] = { unique: toGroup.unique, data: toItems };
+		toolbar[toRowIndex] = { unique: toRow.unique, data: toRowData };
+
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public removeToolbarItem(from: [number, number, number]) {
+		const [rowIndex, groupIndex, itemIndex] = from;
+
+		const toolbar = [...this.#toolbar.getValue()];
+		const row = toolbar[rowIndex];
+		const rowData = [...row.data];
+		const group = rowData[groupIndex];
+		const items = [...group.data];
+
+		const removed = items.splice(itemIndex, 1);
+		removed.forEach((alias) => this.#extensionsInUse.delete(alias));
+
+		rowData[groupIndex] = { unique: group.unique, data: items };
+		toolbar[rowIndex] = { unique: row.unique, data: rowData };
+
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public removeToolbarGroup(rowIndex: number, groupIndex: number) {
+		const toolbar = [...this.#toolbar.getValue()];
+
+		if (toolbar[rowIndex].data.length > groupIndex) {
+			const row = toolbar[rowIndex];
+			const groups = [...row.data];
+			const removed = groups.splice(groupIndex, 1);
+			removed.forEach((group) => group.data.forEach((alias) => this.#extensionsInUse.delete(alias)));
+			toolbar[rowIndex] = { unique: row.unique, data: groups };
+		}
+
+		// Prevent leaving an empty group
+		if (toolbar[rowIndex].data.length === 0) {
+			toolbar[rowIndex].data[0] = { unique: UmbId.new(), data: [] };
+		}
+
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public removeToolbarRow(rowIndex: number) {
+		const toolbar = [...this.#toolbar.getValue()];
+
+		if (toolbar.length > rowIndex) {
+			const removed = toolbar.splice(rowIndex, 1);
+			removed.forEach((row) =>
+				row.data.forEach((group) => group.data.forEach((alias) => this.#extensionsInUse.delete(alias))),
+			);
+		}
+
+		// Prevent leaving an empty row
+		if (toolbar.length === 0) {
+			toolbar[0] = { unique: UmbId.new(), data: [{ unique: UmbId.new(), data: [] }] };
+		}
+
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public setToolbar(value?: UmbTiptapToolbarValue | null) {
+		if (!this.isValidToolbarValue(value)) {
+			value = [[[]]];
+		}
+
+		this.#extensionsInUse.clear();
+		value.forEach((row) => row.forEach((group) => group.forEach((alias) => this.#extensionsInUse.add(alias))));
+
+		const toolbar = value.map((row) => ({
+			unique: UmbId.new(),
+			data: row.map((group) => ({ unique: UmbId.new(), data: group })),
+		}));
+
+		this.#toolbar.setValue(toolbar);
+	}
+
+	public updateToolbarRow(rowIndex: number, groups: Array<UmbTiptapToolbarGroupViewModel>) {
+		const toolbar = [...this.#toolbar.getValue()];
+
+		const row = toolbar[rowIndex];
+		toolbar[rowIndex] = { unique: row.unique, data: groups };
+
+		this.#toolbar.setValue(toolbar);
+	}
+}
+
+export const UMB_TIPTAP_TOOLBAR_CONFIGURATION_CONTEXT = new UmbContextToken<UmbTiptapToolbarConfigurationContext>(
+	'UmbTiptapToolbarConfigurationContext',
+);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts
index a2791c4935..b0526ffd57 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/manifests.ts
@@ -13,20 +13,24 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 			group: 'richContent',
 			settings: {
 				properties: [
-					{
-						alias: 'toolbar',
-						label: 'Toolbar',
-						description: 'Pick the toolbar items that should be available when editing',
-						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration',
-						weight: 5,
-					},
 					{
 						alias: 'extensions',
-						label: 'Extensions',
-						description: 'Extensions to enable',
+						label: 'Capabilities',
+						description: `Enable extensions enhance the capabilities of the Tiptap editor.
+
+_Once enabled, the extensions will be available in the toolbar._`,
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ExtensionsConfiguration',
 						weight: 10,
 					},
+					{
+						alias: 'toolbar',
+						label: 'Toolbar',
+						description: `Configure the toolbar for the intended editing experience.
+
+_Drag and drop the available items onto the toolbar designer._`,
+						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Tiptap.ToolbarConfiguration',
+						weight: 15,
+					},
 					{
 						alias: 'dimensions',
 						label: 'Dimensions',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/types.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/types.ts
new file mode 100644
index 0000000000..305cd36967
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/types.ts
@@ -0,0 +1,10 @@
+export type UmbTiptapToolbarExtension = {
+	alias: string;
+	label: string;
+	icon: string;
+	dependencies?: Array<string>;
+};
+
+export type UmbTiptapToolbarSortableViewModel<T> = { unique: string; data: T };
+export type UmbTiptapToolbarRowViewModel = UmbTiptapToolbarSortableViewModel<Array<UmbTiptapToolbarGroupViewModel>>;
+export type UmbTiptapToolbarGroupViewModel = UmbTiptapToolbarSortableViewModel<Array<string>>;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/types.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/types.ts
index 1d9964b88b..fcbfd9b7eb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/types.ts
@@ -1,6 +1,8 @@
 import type { UmbBlockValueType } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockRteLayoutModel } from '@umbraco-cms/backoffice/block-rte';
 
+export type * from './extensions/types.js';
+
 // TODO: Rename this type:
 export interface UmbPropertyEditorUiValueType {
 	markup: string;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/content-name/content-name.component.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/content-name/content-name.component.ts
index dfcd5c6e2b..49a84361e7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/content-name/content-name.component.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/content-name/content-name.component.ts
@@ -7,6 +7,13 @@ export class UmbUfmContentNameComponent extends UmbUfmComponentBase {
 	render(token: UfmToken) {
 		if (!token.text) return;
 
+		if (token.prefix === '~') {
+			/*
+	    * @deprecated since version 15.0-rc3
+	    */
+			console.warn(`Please update your UFM syntax from \`${token.raw}\` to \`{umbContentName:${token.text}}\`.`);
+		}
+
 		const attributes = super.getAttributes(token.text);
 		return `<ufm-content-name ${attributes}></ufm-content-name>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/manifests.ts
index 99ec024f17..b9c7f5dc6f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/manifests.ts
@@ -6,20 +6,20 @@ export const manifests: Array<ManifestUfmComponent> = [
 		alias: 'Umb.Markdown.LabelValue',
 		name: 'Label Value UFM Component',
 		api: () => import('./label-value/label-value.component.js'),
-		meta: { marker: '=' },
+		meta: { alias: 'umbValue', marker: '=' },
 	},
 	{
 		type: 'ufmComponent',
 		alias: 'Umb.Markdown.Localize',
 		name: 'Localize UFM Component',
 		api: () => import('./localize/localize.component.js'),
-		meta: { marker: '#' },
+		meta: { alias: 'umbLocalize', marker: '#' },
 	},
 	{
 		type: 'ufmComponent',
 		alias: 'Umb.Markdown.ContentName',
 		name: 'Content Name UFM Component',
 		api: () => import('./content-name/content-name.component.js'),
-		meta: { marker: '~' },
+		meta: { alias: 'umbContentName', marker: '~' },
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
index 76de2ba178..a589c32d34 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts
@@ -59,6 +59,14 @@ export class UmbUfmRenderElement extends UmbLitElement {
 			pre {
 				overflow: auto;
 			}
+
+			:host > :first-child {
+				margin-block-start: 0;
+			}
+
+			:host > :last-child {
+				margin-block-end: 0;
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts
index 86563bc56d..a82415085e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/contexts/ufm.context.ts
@@ -60,7 +60,7 @@ export class UmbUfmContext extends UmbContextBase<UmbUfmContext> {
 							const ctrl = controller as unknown as UmbExtensionApiInitializer<ManifestUfmComponent>;
 							if (!ctrl.manifest || !ctrl.api) return;
 							return {
-								alias: ctrl.manifest.alias,
+								alias: ctrl.manifest.meta.alias || ctrl.manifest.alias,
 								marker: ctrl.manifest.meta.marker,
 								render: ctrl.api.render,
 							};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/base.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/base.filter.ts
new file mode 100644
index 0000000000..76433cbe17
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/base.filter.ts
@@ -0,0 +1,6 @@
+import type { UmbUfmFilterApi } from '../ufm-filter.extension.js';
+
+export abstract class UmbUfmFilterBase implements UmbUfmFilterApi {
+	abstract filter(...args: Array<unknown>): string | undefined | null;
+	destroy() {}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/fallback.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/fallback.filter.ts
index ceb8001754..fe99db94a3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/fallback.filter.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/fallback.filter.ts
@@ -1,4 +1,4 @@
-import { UmbUfmFilterBase } from '../types.js';
+import { UmbUfmFilterBase } from './base.filter.js';
 
 class UmbUfmFallbackFilterApi extends UmbUfmFilterBase {
 	filter(str: string, fallback: string) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/lowercase.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/lowercase.filter.ts
index bf175a2a65..3b70e65cee 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/lowercase.filter.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/lowercase.filter.ts
@@ -1,4 +1,4 @@
-import { UmbUfmFilterBase } from '../types.js';
+import { UmbUfmFilterBase } from './base.filter.js';
 
 class UmbUfmLowercaseFilterApi extends UmbUfmFilterBase {
 	filter(str?: string) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/strip-html.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/strip-html.filter.ts
index 6d19708e59..98b7e394d8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/strip-html.filter.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/strip-html.filter.ts
@@ -1,4 +1,4 @@
-import { UmbUfmFilterBase } from '../types.js';
+import { UmbUfmFilterBase } from './base.filter.js';
 
 class UmbUfmStripHtmlFilterApi extends UmbUfmFilterBase {
 	filter(value: string | { markup: string } | undefined | null) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/title-case.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/title-case.filter.ts
index ab546b7ee3..d4204a6203 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/title-case.filter.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/title-case.filter.ts
@@ -1,4 +1,4 @@
-import { UmbUfmFilterBase } from '../types.js';
+import { UmbUfmFilterBase } from './base.filter.js';
 
 class UmbUfmTitleCaseFilterApi extends UmbUfmFilterBase {
 	filter(str?: string) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/truncate.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/truncate.filter.ts
index 34360ae41d..49d78554af 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/truncate.filter.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/truncate.filter.ts
@@ -1,4 +1,4 @@
-import { UmbUfmFilterBase } from '../types.js';
+import { UmbUfmFilterBase } from './base.filter.js';
 
 class UmbUfmTruncateFilterApi extends UmbUfmFilterBase {
 	filter(str: string, length: number, tail?: string) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/uppercase.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/uppercase.filter.ts
index 76af187aa9..b260f195fc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/uppercase.filter.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/uppercase.filter.ts
@@ -1,4 +1,4 @@
-import { UmbUfmFilterBase } from '../types.js';
+import { UmbUfmFilterBase } from './base.filter.js';
 
 class UmbUfmUppercaseFilterApi extends UmbUfmFilterBase {
 	filter(str?: string) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/word-limit.filter.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/word-limit.filter.ts
index 8924386638..6abaea4680 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/word-limit.filter.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/filters/word-limit.filter.ts
@@ -1,4 +1,4 @@
-import { UmbUfmFilterBase } from '../types.js';
+import { UmbUfmFilterBase } from './base.filter.js';
 
 class UmbUfmWordLimitFilterApi extends UmbUfmFilterBase {
 	filter(str: string, limit: number) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/index.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/index.ts
index 6735e76614..0a2edf9d05 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/index.ts
@@ -1,6 +1,7 @@
 export * from './components/index.js';
 export * from './contexts/index.js';
 export * from './controllers/ufm-virtual-render.controller.js';
+export * from './filters/base.filter.js';
 export * from './plugins/index.js';
 export * from './types.js';
 export * from './ufm-component.extension.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.plugin.ts
index edebdefcca..604b4a4b1e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.plugin.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.plugin.ts
@@ -2,11 +2,12 @@ import type { MarkedExtension, Tokens } from '@umbraco-cms/backoffice/external/m
 
 export interface UfmPlugin {
 	alias: string;
-	marker: string;
+	marker?: string;
 	render?: (token: UfmToken) => string | undefined;
 }
 
 export interface UfmToken extends Tokens.Generic {
+	prefix: string;
 	text?: string;
 }
 
@@ -18,21 +19,23 @@ export interface UfmToken extends Tokens.Generic {
 export function ufm(plugins: Array<UfmPlugin> = []): MarkedExtension {
 	return {
 		extensions: plugins.map(({ alias, marker, render }) => {
+			const prefix = `(${alias}:${marker ? `|${marker}` : ''})`;
 			return {
 				name: alias,
 				level: 'inline',
-				start: (src: string) => src.indexOf(`{${marker}`),
+				start: (src: string) => src.search(`{${prefix}`),
 				tokenizer: (src: string) => {
-					const pattern = `^\\{${marker}([^}]*)\\}`;
+					const pattern = `^\\{${prefix}([^}]*)\\}`;
 					const regex = new RegExp(pattern);
 					const match = src.match(regex);
 
 					if (match) {
-						const [raw, content = ''] = match;
+						const [raw, prefix, content = ''] = match;
 						return {
 							type: alias,
 							raw: raw,
 							tokens: [],
+							prefix: prefix,
 							text: content.trim(),
 						};
 					}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.test.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.test.ts
index 71a2177ddb..565040a143 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.test.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/plugins/marked-ufm.test.ts
@@ -16,16 +16,22 @@ describe('UmbMarkedUfm', () => {
 				ufm: '{= prop1 | strip-html | truncate:30}',
 				expected: '<ufm-label-value filters="strip-html | truncate:30" alias="prop1"></ufm-label-value>',
 			},
+			{ ufm: '{umbValue:prop1}', expected: '<ufm-label-value alias="prop1"></ufm-label-value>' },
 			{ ufm: '{#general_add}', expected: '<ufm-localize alias="general_add"></ufm-localize>' },
+			{ ufm: '{umbLocalize:general_add}', expected: '<ufm-localize alias="general_add"></ufm-localize>' },
 			{ ufm: '{~contentPicker}', expected: '<ufm-content-name alias="contentPicker"></ufm-content-name>' },
+			{
+				ufm: '{umbContentName: contentPicker}',
+				expected: '<ufm-content-name alias="contentPicker"></ufm-content-name>',
+			},
 		];
 
 		// Manually configuring the UFM components for testing.
 		UmbMarked.use(
 			ufm([
-				{ alias: 'Umb.Markdown.ContentName', marker: '~', render: new UmbUfmContentNameComponent().render },
-				{ alias: 'Umb.Markdown.LabelValue', marker: '=', render: new UmbUfmLabelValueComponent().render },
-				{ alias: 'Umb.Markdown.Localize', marker: '#', render: new UmbUfmLocalizeComponent().render },
+				{ alias: 'umbContentName', marker: '~', render: new UmbUfmContentNameComponent().render },
+				{ alias: 'umbValue', marker: '=', render: new UmbUfmLabelValueComponent().render },
+				{ alias: 'umbLocalize', marker: '#', render: new UmbUfmLocalizeComponent().render },
 			]),
 		);
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/types.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/types.ts
index e97116b6c1..5a25901cdb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/types.ts
@@ -1,7 +1 @@
-import type { UmbUfmFilterApi } from './ufm-filter.extension.js';
-
-// TODO: This is not a type? So it should ideally be move to a different file. [NL]
-export abstract class UmbUfmFilterBase implements UmbUfmFilterApi {
-	abstract filter(...args: Array<unknown>): string | undefined | null;
-	destroy() {}
-}
+export type * from './ufm-filter.extension.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-component.extension.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-component.extension.ts
index bf3c3ee9d5..bc321232e0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-component.extension.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/ufm/ufm-component.extension.ts
@@ -6,7 +6,8 @@ export interface UmbUfmComponentApi extends UmbApi {
 }
 
 export interface MetaUfmComponent {
-	marker: string;
+	alias: string;
+	marker?: string;
 }
 
 export interface ManifestUfmComponent extends ManifestApi<UmbUfmComponentApi> {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/is-admin/index.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/is-admin/index.ts
index 4f07201dcf..07a3192a17 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/is-admin/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/is-admin/index.ts
@@ -1 +1,2 @@
 export * from './constants.js';
+export * from './is-admin.condition-config.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/is-admin/is-admin.condition-config.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/is-admin/is-admin.condition-config.ts
new file mode 100644
index 0000000000..8e8f47a516
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/is-admin/is-admin.condition-config.ts
@@ -0,0 +1,12 @@
+import type { UMB_CURRENT_USER_IS_ADMIN_CONDITION_ALIAS } from './constants.js';
+import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface UmbIsAdminConditionConfig
+	extends UmbConditionConfigBase<typeof UMB_CURRENT_USER_IS_ADMIN_CONDITION_ALIAS> {}
+
+declare global {
+	interface UmbExtensionConditionConfigMap {
+		UmbIsAdminConditionConfig: UmbIsAdminConditionConfig;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/types.ts
new file mode 100644
index 0000000000..17dc928ab5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/conditions/types.ts
@@ -0,0 +1 @@
+export type * from './is-admin/is-admin.condition-config.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts
index 0453be866b..32bd2469e1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/types.ts
@@ -8,6 +8,8 @@ import type {
 } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbReferenceByUnique } from '@umbraco-cms/backoffice/models';
 
+export type * from './conditions/types.js';
+
 export interface UmbCurrentUserModel {
 	allowedSections: Array<string>;
 	avatarUrls: Array<string>;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/index.ts b/src/Umbraco.Web.UI.Client/src/packages/user/index.ts
index dc92400e30..40765df7a8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/index.ts
@@ -1,4 +1,5 @@
 export * from './current-user/index.js';
-export * from './user-group/index.js';
-export * from './user/index.js';
 export * from './manifests.js';
+export * from './user-group/index.js';
+export * from './user-permission/index.js';
+export * from './user/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection-header.element.ts
index 2fb7b7a3de..8308819f01 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection-header.element.ts
@@ -5,6 +5,8 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { debounce } from '@umbraco-cms/backoffice/utils';
 
 const elementName = 'umb-user-group-collection-header';
+
+/** @deprecated This component is no longer used in core; to be removed in Umbraco 17. */
 @customElement(elementName)
 export class UmbUserGroupCollectionHeaderElement extends UmbLitElement {
 	#collectionContext: UmbUserGroupCollectionContext | undefined;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection.element.ts
index 138aa29944..b2ea6e0e10 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/collection/user-group-collection.element.ts
@@ -1,20 +1,54 @@
-import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UMB_USER_GROUP_COLLECTION_CONTEXT } from './user-group-collection.context-token.js';
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { debounce } from '@umbraco-cms/backoffice/utils';
 import { UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 
 import './user-group-collection-header.element.js';
 
-const elementName = 'umb-user-group-collection';
-@customElement(elementName)
+@customElement('umb-user-group-collection')
 export class UmbUserGroupCollectionElement extends UmbCollectionDefaultElement {
-	protected override renderToolbar() {
-		return html`<umb-user-group-collection-header slot="header"></umb-user-group-collection-header> `;
+	#collectionContext?: typeof UMB_USER_GROUP_COLLECTION_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_USER_GROUP_COLLECTION_CONTEXT, (instance) => {
+			this.#collectionContext = instance;
+		});
 	}
+
+	#onSearch(event: InputEvent) {
+		const target = event.target as HTMLInputElement;
+		const query = target.value || '';
+		this.#debouncedSearch(query);
+	}
+
+	#debouncedSearch = debounce((query: string) => this.#collectionContext?.setFilter({ query }), 500);
+
+	protected override renderToolbar() {
+		return html`
+			<umb-collection-toolbar slot="header">
+				<uui-input
+					@input=${this.#onSearch}
+					label=${this.localize.term('general_search')}
+					placeholder=${this.localize.term('general_search')}
+					id="input-search"></uui-input>
+			</umb-collection-toolbar>
+		`;
+	}
+
+	static override styles = [
+		css`
+			uui-input {
+				display: block;
+			}
+		`,
+	];
 }
 
 export { UmbUserGroupCollectionElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbUserGroupCollectionElement;
+		'umb-user-group-collection': UmbUserGroupCollectionElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/index.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/index.ts
index ac05b1f292..47adea1251 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/index.ts
@@ -1,7 +1,7 @@
 export * from './collection/index.js';
 export * from './components/index.js';
-export * from './repository/index.js';
-export * from './types.js';
 export * from './entity.js';
+export * from './repository/index.js';
+export type * from './types.js';
 
 export { UMB_USER_GROUP_PICKER_MODAL } from './modals/user-group-picker/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-root/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-root/manifests.ts
index 3a269c71ff..0d528f9fc7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-root/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-root/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_USER_GROUP_COLLECTION_ALIAS } from '../../collection/index.js';
 import { UMB_USER_GROUP_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_USER_GROUP_WORKSPACE_ALIAS } from './constants.js';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_USER_GROUP_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/manifests.ts
index 6eacae864d..3a2e096501 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group/manifests.ts
@@ -1,4 +1,5 @@
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 
 export const UMB_USER_GROUP_WORKSPACE_ALIAS = 'Umb.Workspace.UserGroup';
 
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_USER_GROUP_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/index.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/index.ts
index 856a12661c..a23bfc02a7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user-permission/index.ts
@@ -3,4 +3,4 @@ export * from './modals/index.js';
 export * from './user-granular-permission.extension.js';
 export * from './entity-user-permission.extension.js';
 
-export type { UmbUserPermissionModel } from './types.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/create-user-collection-action.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/create-user-collection-action.element.ts
deleted file mode 100644
index 4ffcc353d0..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/create-user-collection-action.element.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { UMB_CREATE_USER_MODAL } from '../../modals/create/create-user-modal.token.js';
-import type { UmbUserKindType } from '../../utils/index.js';
-import { UmbUserKind } from '../../utils/index.js';
-import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
-import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
-import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
-import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action';
-
-const elementName = 'umb-create-user-collection-action-button';
-@customElement(elementName)
-export class UmbCollectionActionButtonElement extends UmbLitElement {
-	@state()
-	private _popoverOpen = false;
-
-	async #onClick(event: Event, kind: UmbUserKindType) {
-		event.stopPropagation();
-		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
-
-		const unique = entityContext.getUnique();
-		const entityType = entityContext.getEntityType();
-
-		if (unique === undefined) throw new Error('Missing unique');
-		if (!entityType) throw new Error('Missing entityType');
-
-		const modalContext = modalManager.open(this, UMB_CREATE_USER_MODAL, {
-			data: {
-				user: {
-					kind,
-				},
-			},
-		});
-
-		modalContext
-			?.onSubmit()
-			.then(() => {
-				this.#requestReloadChildrenOfEntity({ entityType, unique });
-			})
-			.catch(async () => {
-				// modal is closed after creation instead of navigating to the new user.
-				// We therefore need to reload the children of the entity
-				this.#requestReloadChildrenOfEntity({ entityType, unique });
-			});
-	}
-
-	async #requestReloadChildrenOfEntity({ entityType, unique }: UmbEntityModel) {
-		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-		const event = new UmbRequestReloadChildrenOfEntityEvent({
-			entityType,
-			unique,
-		});
-
-		eventContext.dispatchEvent(event);
-	}
-
-	#onPopoverToggle(event: ToggleEvent) {
-		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		this._popoverOpen = event.newState === 'open';
-	}
-
-	override render() {
-		const label = this.localize.term('general_create');
-
-		return html`
-			<uui-button popovertarget="collection-action-menu-popover" label=${label} color="default" look="outline">
-				${label}
-				<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
-			</uui-button>
-			<uui-popover-container
-				id="collection-action-menu-popover"
-				placement="bottom-start"
-				@toggle=${this.#onPopoverToggle}>
-				<umb-popover-layout>
-					<uui-scroll-container>
-						<uui-menu-item
-							label=${this.localize.term('user_userKindDefault')}
-							@click=${(event: Event) => this.#onClick(event, UmbUserKind.DEFAULT)}>
-							<umb-icon slot="icon" name="icon-user"></umb-icon>
-						</uui-menu-item>
-						<uui-menu-item
-							label=${this.localize.term('user_userKindApi')}
-							@click=${(event: Event) => this.#onClick(event, UmbUserKind.API)}>
-							<umb-icon slot="icon" name="icon-unplug"></umb-icon>
-						</uui-menu-item>
-					</uui-scroll-container>
-				</umb-popover-layout>
-			</uui-popover-container>
-		`;
-	}
-}
-
-export { UmbCollectionActionButtonElement as element };
-
-declare global {
-	interface HTMLElementTagNameMap {
-		[elementName]: UmbCollectionActionButtonElement;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/manifests.ts
index 70aa992311..fd976dbe0d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/manifests.ts
@@ -1,16 +1,16 @@
+import { UMB_USER_COLLECTION_ALIAS } from '../constants.js';
 import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'collectionAction',
+		kind: 'create',
 		name: 'Create User Collection Action',
 		alias: 'Umb.CollectionAction.User.Create',
-		element: () => import('./create-user-collection-action.element.js'),
-		weight: 200,
 		conditions: [
 			{
 				alias: UMB_COLLECTION_ALIAS_CONDITION,
-				match: 'Umb.Collection.User',
+				match: UMB_USER_COLLECTION_ALIAS,
 			},
 		],
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts
index bd20e36652..2dec9fc4a3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection-header.element.ts
@@ -1,14 +1,13 @@
-import type { UmbUserCollectionContext } from './user-collection.context.js';
-import type { UmbUserOrderByOption } from './types.js';
-import type { UmbUserStateFilterType } from './utils/index.js';
 import { UmbUserStateFilter } from './utils/index.js';
 import { UMB_USER_COLLECTION_CONTEXT } from './user-collection.context-token.js';
-import type { UUIBooleanInputEvent, UUICheckboxElement } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbUserGroupDetailModel } from '@umbraco-cms/backoffice/user-group';
-import { UmbUserGroupCollectionRepository } from '@umbraco-cms/backoffice/user-group';
+import type { UmbUserOrderByOption } from './types.js';
+import type { UmbUserStateFilterType } from './utils/index.js';
+import { css, customElement, html, ifDefined, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbUserGroupCollectionRepository } from '@umbraco-cms/backoffice/user-group';
+import type { UmbUserGroupDetailModel } from '@umbraco-cms/backoffice/user-group';
+import type { UUIBooleanInputEvent, UUICheckboxElement } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-user-collection-header')
 export class UmbUserCollectionHeaderElement extends UmbLitElement {
@@ -30,9 +29,7 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 	@state()
 	_activeOrderByOption?: UmbUserOrderByOption;
 
-	#collectionContext?: UmbUserCollectionContext;
-	#inputTimer?: NodeJS.Timeout;
-	#inputTimerAmount = 500;
+	#collectionContext?: typeof UMB_USER_COLLECTION_CONTEXT.TYPE;
 
 	#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
 
@@ -75,13 +72,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 		}
 	}
 
-	private _updateSearch(event: InputEvent) {
-		const target = event.target as HTMLInputElement;
-		const filter = target.value || '';
-		clearTimeout(this.#inputTimer);
-		this.#inputTimer = setTimeout(() => this.#collectionContext?.setFilter({ filter }), this.#inputTimerAmount);
-	}
-
 	#onStateFilterChange(event: UUIBooleanInputEvent) {
 		event.stopPropagation();
 		const target = event.currentTarget as UUICheckboxElement;
@@ -141,26 +131,15 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 
 	override render() {
 		return html`
-			<umb-collection-action-bundle></umb-collection-action-bundle>
-			${this.#renderSearch()}
-			<div>${this.#renderFilters()} ${this.#renderCollectionViews()}</div>
+			<umb-collection-toolbar slot="header">
+				<div id="toolbar">
+					<umb-collection-filter-field></umb-collection-filter-field>
+					${this.#renderStatusFilter()} ${this.#renderUserGroupFilter()} ${this.#renderOrderBy()}
+				</div>
+			</umb-collection-toolbar>
 		`;
 	}
 
-	#renderSearch() {
-		return html`
-			<uui-input
-				@input=${this._updateSearch}
-				label=${this.localize.term('visuallyHiddenTexts_userSearchLabel')}
-				placeholder=${this.localize.term('visuallyHiddenTexts_userSearchLabel')}
-				id="input-search"></uui-input>
-		`;
-	}
-
-	#renderFilters() {
-		return html` ${this.#renderStatusFilter()} ${this.#renderUserGroupFilter()} ${this.#renderOrderBy()} `;
-	}
-
 	#renderStatusFilter() {
 		return html`
 			<uui-button popovertarget="popover-user-status-filter" label="status">
@@ -230,10 +209,6 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 		`;
 	}
 
-	#renderCollectionViews() {
-		return html` <umb-collection-view-bundle></umb-collection-view-bundle> `;
-	}
-
 	static override styles = [
 		css`
 			:host {
@@ -246,7 +221,15 @@ export class UmbUserCollectionHeaderElement extends UmbLitElement {
 				align-items: center;
 			}
 
-			#input-search {
+			#toolbar {
+				flex: 1;
+				display: flex;
+				gap: var(--uui-size-space-5);
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			umb-collection-filter-field {
 				width: 100%;
 			}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection.element.ts
index 1561273d9b..a974ce3cbf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/user-collection.element.ts
@@ -6,12 +6,15 @@ import './user-collection-header.element.js';
 @customElement('umb-user-collection')
 export class UmbUserCollectionElement extends UmbCollectionDefaultElement {
 	protected override renderToolbar() {
-		return html`<umb-user-collection-header slot="header"></umb-user-collection-header> `;
+		return html`<umb-user-collection-header slot="header"></umb-user-collection-header>`;
 	}
 }
 
+/** @deprecated Should be exported as `element` only; to be removed in Umbraco 17. */
 export default UmbUserCollectionElement;
 
+export { UmbUserCollectionElement as element };
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'umb-user-collection': UmbUserCollectionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-change-password/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-change-password/constants.ts
new file mode 100644
index 0000000000..31baf82e9f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-change-password/constants.ts
@@ -0,0 +1 @@
+export const UMB_USER_ALLOW_CHANGE_PASSWORD_CONDITION_ALIAS = 'Umb.Condition.User.AllowChangePassword';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-change-password/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-change-password/manifests.ts
index 368f12e683..568650836e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-change-password/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-change-password/manifests.ts
@@ -1,8 +1,10 @@
+import { UMB_USER_ALLOW_CHANGE_PASSWORD_CONDITION_ALIAS } from './constants.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'condition',
 		name: 'User Allow Change Password Condition',
-		alias: 'Umb.Condition.User.AllowChangePassword',
+		alias: UMB_USER_ALLOW_CHANGE_PASSWORD_CONDITION_ALIAS,
 		api: () => import('./user-allow-change-password-action.condition.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-delete/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-delete/constants.ts
new file mode 100644
index 0000000000..8183df1002
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-delete/constants.ts
@@ -0,0 +1 @@
+export const UMB_USER_ALLOW_DELETE_CONDITION_ALIAS = 'Umb.Condition.User.AllowDeleteAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-delete/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-delete/manifests.ts
index b25eba1462..d05317a682 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-delete/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-delete/manifests.ts
@@ -1,8 +1,10 @@
+import { UMB_USER_ALLOW_DELETE_CONDITION_ALIAS } from './constants.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'condition',
 		name: 'User Allow Delete Action Condition',
-		alias: 'Umb.Condition.User.AllowDeleteAction',
+		alias: UMB_USER_ALLOW_DELETE_CONDITION_ALIAS,
 		api: () => import('./user-allow-delete-action.condition.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-disable/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-disable/constants.ts
new file mode 100644
index 0000000000..965922176c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-disable/constants.ts
@@ -0,0 +1 @@
+export const UMB_USER_ALLOW_DISABLE_CONDITION_ALIAS = 'Umb.Condition.User.AllowDisableAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-disable/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-disable/manifests.ts
index 34ba7e7d38..a7ce9b3a1f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-disable/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-disable/manifests.ts
@@ -1,8 +1,10 @@
+import { UMB_USER_ALLOW_DISABLE_CONDITION_ALIAS } from './constants.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'condition',
 		name: 'User Allow Disable Action Condition',
-		alias: 'Umb.Condition.User.AllowDisableAction',
+		alias: UMB_USER_ALLOW_DISABLE_CONDITION_ALIAS,
 		api: () => import('./user-allow-disable-action.condition.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-enable/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-enable/constants.ts
new file mode 100644
index 0000000000..f2221ec92a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-enable/constants.ts
@@ -0,0 +1 @@
+export const UMB_USER_ALLOW_ENABLE_CONDITION_ALIAS = 'Umb.Condition.User.AllowEnableAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-external-login/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-external-login/constants.ts
new file mode 100644
index 0000000000..8b7e01c6c1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-external-login/constants.ts
@@ -0,0 +1 @@
+export const UMB_USER_ALLOW_EXTERNAL_LOGIN_CONDITION_ALIAS = 'Umb.Condition.User.AllowExternalLoginAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-external-login/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-external-login/manifests.ts
index 966f5aa137..4ff36ca25c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-external-login/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-external-login/manifests.ts
@@ -1,8 +1,10 @@
+import { UMB_USER_ALLOW_EXTERNAL_LOGIN_CONDITION_ALIAS } from './constants.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'condition',
 		name: 'User Allow ExternalLogin Action Condition',
-		alias: 'Umb.Condition.User.AllowExternalLoginAction',
+		alias: UMB_USER_ALLOW_EXTERNAL_LOGIN_CONDITION_ALIAS,
 		api: () => import('./user-allow-external-login-action.condition.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-mfa/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-mfa/constants.ts
new file mode 100644
index 0000000000..872ba596a7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-mfa/constants.ts
@@ -0,0 +1 @@
+export const UMB_USER_ALLOW_MFA_CONDITION_ALIAS = 'Umb.Condition.User.AllowMfaAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-mfa/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-mfa/manifests.ts
index a9cb89568d..c25c206618 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-mfa/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-mfa/manifests.ts
@@ -1,8 +1,10 @@
+import { UMB_USER_ALLOW_MFA_CONDITION_ALIAS } from './constants.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'condition',
 		name: 'User Allow Mfa Action Condition',
-		alias: 'Umb.Condition.User.AllowMfaAction',
+		alias: UMB_USER_ALLOW_MFA_CONDITION_ALIAS,
 		api: () => import('./user-allow-mfa-action.condition.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-unlock/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-unlock/constants.ts
new file mode 100644
index 0000000000..8e29b48475
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-unlock/constants.ts
@@ -0,0 +1 @@
+export const UMB_USER_ALLOW_UNLOCK_CONDITION_ALIAS = 'Umb.Condition.User.AllowUnlockAction';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-unlock/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-unlock/manifests.ts
index 9fafc5d5be..69c89702a8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-unlock/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/allow-unlock/manifests.ts
@@ -1,8 +1,10 @@
+import { UMB_USER_ALLOW_UNLOCK_CONDITION_ALIAS } from './constants.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'condition',
 		name: 'User Allow Unlock Action Condition',
-		alias: 'Umb.Condition.User.AllowUnlockAction',
+		alias: UMB_USER_ALLOW_UNLOCK_CONDITION_ALIAS,
 		api: () => import('./user-allow-unlock-action.condition.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/types.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/types.ts
new file mode 100644
index 0000000000..006ccf837d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/conditions/types.ts
@@ -0,0 +1,23 @@
+import type { UMB_USER_ALLOW_CHANGE_PASSWORD_CONDITION_ALIAS } from './allow-change-password/constants.js';
+import type { UMB_USER_ALLOW_DELETE_CONDITION_ALIAS } from './allow-delete/constants.js';
+import type { UMB_USER_ALLOW_DISABLE_CONDITION_ALIAS } from './allow-disable/constants.js';
+import type { UMB_USER_ALLOW_ENABLE_CONDITION_ALIAS } from './allow-enable/constants.js';
+import type { UMB_USER_ALLOW_EXTERNAL_LOGIN_CONDITION_ALIAS } from './allow-external-login/constants.js';
+import type { UMB_USER_ALLOW_MFA_CONDITION_ALIAS } from './allow-mfa/constants.js';
+import type { UMB_USER_ALLOW_UNLOCK_CONDITION_ALIAS } from './allow-unlock/constants.js';
+import type { UmbConditionConfigBase } from '@umbraco-cms/backoffice/extension-api';
+
+type UmbUserConditionConfigs =
+	| UmbConditionConfigBase<typeof UMB_USER_ALLOW_CHANGE_PASSWORD_CONDITION_ALIAS>
+	| UmbConditionConfigBase<typeof UMB_USER_ALLOW_DELETE_CONDITION_ALIAS>
+	| UmbConditionConfigBase<typeof UMB_USER_ALLOW_DISABLE_CONDITION_ALIAS>
+	| UmbConditionConfigBase<typeof UMB_USER_ALLOW_ENABLE_CONDITION_ALIAS>
+	| UmbConditionConfigBase<typeof UMB_USER_ALLOW_EXTERNAL_LOGIN_CONDITION_ALIAS>
+	| UmbConditionConfigBase<typeof UMB_USER_ALLOW_MFA_CONDITION_ALIAS>
+	| UmbConditionConfigBase<typeof UMB_USER_ALLOW_UNLOCK_CONDITION_ALIAS>;
+
+declare global {
+	interface UmbExtensionConditionConfigMap {
+		UmbUserConditionConfigs: UmbUserConditionConfigs;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/api-user/api-user-entity-create-option-action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/api-user/api-user-entity-create-option-action.ts
new file mode 100644
index 0000000000..2fd165fed7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/api-user/api-user-entity-create-option-action.ts
@@ -0,0 +1,18 @@
+import { UmbUserEntityCreateOptionActionBase } from '../user-entity-create-option-action-base.js';
+import { UmbUserKind } from '../../../utils/index.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type {
+	MetaEntityCreateOptionAction,
+	UmbEntityCreateOptionActionArgs,
+} from '@umbraco-cms/backoffice/entity-create-option-action';
+
+export class UmbApiUserEntityCreateOptionAction extends UmbUserEntityCreateOptionActionBase {
+	constructor(host: UmbControllerHost, args: UmbEntityCreateOptionActionArgs<MetaEntityCreateOptionAction>) {
+		super(host, {
+			...args,
+			kind: UmbUserKind.API,
+		});
+	}
+}
+
+export { UmbApiUserEntityCreateOptionAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/api-user/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/api-user/manifests.ts
new file mode 100644
index 0000000000..8232d63fbc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/api-user/manifests.ts
@@ -0,0 +1,17 @@
+import { UMB_USER_ROOT_ENTITY_TYPE } from '../../../entity.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'entityCreateOptionAction',
+		alias: 'Umb.EntityCreateOptionAction.User.Api',
+		name: 'Api User Entity Create Option Action',
+		weight: 1100,
+		api: () => import('./api-user-entity-create-option-action.js'),
+		forEntityTypes: [UMB_USER_ROOT_ENTITY_TYPE],
+		meta: {
+			icon: 'icon-unplug',
+			label: '#user_userKindApi',
+			additionalOptions: true,
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/create-user-entity-action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/create-user-entity-action.ts
deleted file mode 100644
index a6da26da4f..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/create-user-entity-action.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { UMB_USER_CREATE_OPTIONS_MODAL } from './modal/index.js';
-import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
-import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-
-export class UmbCreateUserEntityAction extends UmbEntityActionBase<never> {
-	override async execute() {
-		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const modalContext = modalManager.open(this, UMB_USER_CREATE_OPTIONS_MODAL, {
-			data: {
-				parent: {
-					unique: this.args.unique,
-					entityType: this.args.entityType,
-				},
-			},
-		});
-
-		await modalContext.onSubmit();
-	}
-}
-
-export { UmbCreateUserEntityAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/default-user/default-user-entity-create-option-action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/default-user/default-user-entity-create-option-action.ts
new file mode 100644
index 0000000000..9c67384285
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/default-user/default-user-entity-create-option-action.ts
@@ -0,0 +1,18 @@
+import { UmbUserKind } from '../../../utils/index.js';
+import { UmbUserEntityCreateOptionActionBase } from '../user-entity-create-option-action-base.js';
+import type {
+	MetaEntityCreateOptionAction,
+	UmbEntityCreateOptionActionArgs,
+} from '@umbraco-cms/backoffice/entity-create-option-action';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbDefaultUserEntityCreateOptionAction extends UmbUserEntityCreateOptionActionBase {
+	constructor(host: UmbControllerHost, args: UmbEntityCreateOptionActionArgs<MetaEntityCreateOptionAction>) {
+		super(host, {
+			...args,
+			kind: UmbUserKind.DEFAULT,
+		});
+	}
+}
+
+export { UmbDefaultUserEntityCreateOptionAction as api };
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/default-user/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/default-user/manifests.ts
new file mode 100644
index 0000000000..cccb602cfc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/default-user/manifests.ts
@@ -0,0 +1,17 @@
+import { UMB_USER_ROOT_ENTITY_TYPE } from '../../../entity.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'entityCreateOptionAction',
+		alias: 'Umb.EntityCreateOptionAction.User.Default',
+		name: 'Default User Entity Create Option Action',
+		weight: 1200,
+		api: () => import('./default-user-entity-create-option-action.js'),
+		forEntityTypes: [UMB_USER_ROOT_ENTITY_TYPE],
+		meta: {
+			icon: 'icon-user',
+			label: '#user_userKindDefault',
+			additionalOptions: true,
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/index.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/index.ts
new file mode 100644
index 0000000000..28d9f38fba
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/index.ts
@@ -0,0 +1 @@
+export * from './modal/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/manifests.ts
index b92ae65395..095b44610b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/manifests.ts
@@ -1,5 +1,6 @@
 import { UMB_USER_ROOT_ENTITY_TYPE } from '../../entity.js';
-
+import { manifests as apiUser } from './api-user/manifests.js';
+import { manifests as defaultUser } from './default-user/manifests.js';
 import { manifests as modalManifests } from './modal/manifests.js';
 
 import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
@@ -7,17 +8,12 @@ import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension
 export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
 	{
 		type: 'entityAction',
-		kind: 'default',
+		kind: 'create',
 		alias: 'Umb.EntityAction.User.Create',
 		name: 'Create User Entity Action',
-		weight: 1200,
-		api: () => import('./create-user-entity-action.js'),
 		forEntityTypes: [UMB_USER_ROOT_ENTITY_TYPE],
-		meta: {
-			icon: 'icon-add',
-			label: '#actions_create',
-			additionalOptions: true,
-		},
 	},
+	...apiUser,
+	...defaultUser,
 	...modalManifests,
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/constants.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/constants.ts
rename to src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/constants.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-modal.element.ts
similarity index 97%
rename from src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-modal.element.ts
index 863fc88bec..cea24184d8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-modal.element.ts
@@ -1,5 +1,5 @@
-import { UmbUserDetailRepository } from '../../repository/index.js';
-import { UmbUserKind } from '../../utils/index.js';
+import { UmbUserDetailRepository } from '../../../repository/index.js';
+import { UmbUserKind } from '../../../utils/index.js';
 import { UMB_CREATE_USER_SUCCESS_MODAL } from './create-user-success-modal.token.js';
 import type { UmbCreateUserModalData } from './create-user-modal.token.js';
 import type { UmbUserGroupInputElement } from '@umbraco-cms/backoffice/user-group';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-modal.token.ts
similarity index 85%
rename from src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.token.ts
rename to src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-modal.token.ts
index 4486b12f4f..3fb7a19847 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-modal.token.ts
@@ -1,4 +1,4 @@
-import type { UmbUserKindType } from '../../utils/index.js';
+import type { UmbUserKindType } from '../../../utils/index.js';
 import { UMB_CREATE_USER_MODAL_ALIAS } from './constants.js';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-success-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-success-modal.element.ts
similarity index 92%
rename from src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-success-modal.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-success-modal.element.ts
index f30bf145be..d3c43c0a0d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-success-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-success-modal.element.ts
@@ -1,7 +1,7 @@
-import { UmbUserItemRepository } from '../../repository/item/index.js';
-import { UmbNewUserPasswordRepository } from '../../repository/new-password/index.js';
-import type { UmbUserItemModel } from '../../repository/item/types.js';
-import { UMB_USER_WORKSPACE_PATH } from '../../paths.js';
+import { UmbUserItemRepository } from '../../../repository/item/index.js';
+import { UmbNewUserPasswordRepository } from '../../../repository/new-password/index.js';
+import type { UmbUserItemModel } from '../../../repository/item/index.js';
+import { UMB_USER_WORKSPACE_PATH } from '../../../paths.js';
 import type {
 	UmbCreateUserSuccessModalData,
 	UmbCreateUserSuccessModalValue,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-success-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-success-modal.token.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/user/user/modals/create/create-user-success-modal.token.ts
rename to src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/create-user-success-modal.token.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/index.ts
index 778a1fe38d..4f07201dcf 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/index.ts
@@ -1,8 +1 @@
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
-
-export const UMB_USER_CREATE_OPTIONS_MODAL = new UmbModalToken('Umb.Modal.User.CreateOptions', {
-	modal: {
-		type: 'sidebar',
-		size: 'small',
-	},
-});
+export * from './constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/manifests.ts
index 08dc77d154..ca86e33e91 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/manifests.ts
@@ -1,8 +1,16 @@
+import { UMB_CREATE_USER_MODAL_ALIAS } from './constants.js';
+
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'modal',
-		alias: 'Umb.Modal.User.CreateOptions',
-		name: 'User Create Options Modal',
-		element: () => import('./user-create-options-modal.element.js'),
+		alias: UMB_CREATE_USER_MODAL_ALIAS,
+		name: 'Create User Modal',
+		js: () => import('./create-user-modal.element.js'),
+	},
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.User.CreateSuccess',
+		name: 'Create Success User Modal',
+		js: () => import('./create-user-success-modal.element.js'),
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/user-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/user-create-options-modal.element.ts
deleted file mode 100644
index 74e8646990..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/user-create-options-modal.element.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { UMB_CREATE_USER_MODAL } from '../../../modals/create/create-user-modal.token.js';
-import { UmbUserKind, type UmbUserKindType } from '../../../utils/index.js';
-import { html, customElement, map } from '@umbraco-cms/backoffice/external/lit';
-import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
-import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity';
-import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
-import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action';
-
-interface UmbUserCreateOptionModel {
-	label: string;
-	description?: string;
-	icon: string;
-	kind: UmbUserKindType;
-}
-
-const elementName = 'umb-user-create-options-modal';
-@customElement(elementName)
-export class UmbUserCreateOptionsModalElement extends UmbModalBaseElement {
-	#options: Array<UmbUserCreateOptionModel> = [
-		{
-			label: this.localize.term('user_userKindDefault'),
-			icon: 'icon-user',
-			kind: UmbUserKind.DEFAULT,
-		},
-		{
-			label: this.localize.term('user_userKindApi'),
-			icon: 'icon-unplug',
-			kind: UmbUserKind.API,
-		},
-	];
-
-	async #onClick(event: Event, kind: UmbUserKindType) {
-		event.stopPropagation();
-		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const entityContext = await this.getContext(UMB_ENTITY_CONTEXT);
-
-		const unique = entityContext.getUnique();
-		const entityType = entityContext.getEntityType();
-
-		if (unique === undefined) throw new Error('Missing unique');
-		if (!entityType) throw new Error('Missing entityType');
-
-		const modalContext = modalManager.open(this, UMB_CREATE_USER_MODAL, {
-			data: {
-				user: {
-					kind,
-				},
-			},
-		});
-
-		modalContext
-			?.onSubmit()
-			.then(() => {
-				this.#requestReloadChildrenOfEntity({ entityType, unique });
-			})
-			.catch(async () => {
-				// modal is closed after creation instead of navigating to the new user.
-				// We therefore need to reload the children of the entity
-				this.#requestReloadChildrenOfEntity({ entityType, unique });
-			});
-	}
-
-	async #requestReloadChildrenOfEntity({ entityType, unique }: UmbEntityModel) {
-		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-		const event = new UmbRequestReloadChildrenOfEntityEvent({
-			entityType,
-			unique,
-		});
-
-		eventContext.dispatchEvent(event);
-	}
-
-	override render() {
-		return html`
-			<umb-body-layout headline="${this.localize.term('user_createUser')}">
-				<uui-box>
-					<uui-ref-list>
-						${map(
-							this.#options,
-							(item) => html`
-								<umb-ref-item
-									name=${item.label}
-									detail=${item.description}
-									icon=${item.icon}
-									@click=${(event: Event) => this.#onClick(event, item.kind)}></umb-ref-item>
-							`,
-						)}
-					</uui-ref-list>
-				</uui-box>
-				<uui-button
-					slot="actions"
-					label=${this.localize.term('general_cancel')}
-					@click=${this._rejectModal}></uui-button>
-			</umb-body-layout>
-		`;
-	}
-}
-
-export { UmbUserCreateOptionsModalElement as element };
-
-declare global {
-	interface HTMLElementTagNameMap {
-		[elementName]: UmbUserCreateOptionsModalElement;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/user-entity-create-option-action-base.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/user-entity-create-option-action-base.ts
new file mode 100644
index 0000000000..ca55652d5a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/user-entity-create-option-action-base.ts
@@ -0,0 +1,58 @@
+import type { UmbUserKindType } from '../../utils/index.js';
+import { UMB_CREATE_USER_MODAL } from './modal/create-user-modal.token.js';
+import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action';
+import {
+	UmbEntityCreateOptionActionBase,
+	type MetaEntityCreateOptionAction,
+	type UmbEntityCreateOptionActionArgs,
+} from '@umbraco-cms/backoffice/entity-create-option-action';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+
+export interface UmbUserEntityCreateOptionActionBaseArgs
+	extends UmbEntityCreateOptionActionArgs<MetaEntityCreateOptionAction> {
+	kind: UmbUserKindType;
+}
+
+export abstract class UmbUserEntityCreateOptionActionBase extends UmbEntityCreateOptionActionBase {
+	#kind: UmbUserKindType;
+
+	constructor(host: UmbControllerHost, args: UmbUserEntityCreateOptionActionBaseArgs) {
+		super(host, args);
+		this.#kind = args.kind;
+	}
+
+	override async execute() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+
+		const modalContext = modalManager.open(this, UMB_CREATE_USER_MODAL, {
+			data: {
+				user: {
+					kind: this.#kind,
+				},
+			},
+		});
+
+		await modalContext
+			?.onSubmit()
+			.then(() => {
+				this.#requestReloadChildrenOfEntity();
+			})
+			.catch(async () => {
+				// modal is closed after creation instead of navigating to the new user.
+				// We therefore need to reload the children of the entity
+				this.#requestReloadChildrenOfEntity();
+			});
+	}
+
+	async #requestReloadChildrenOfEntity() {
+		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
+		const event = new UmbRequestReloadChildrenOfEntityEvent({
+			entityType: this.args.entityType,
+			unique: this.args.unique,
+		});
+
+		eventContext.dispatchEvent(event);
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/manifests.ts
index 614f3e0d7b..03273e88df 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/modals/manifests.ts
@@ -1,18 +1,4 @@
-import { UMB_CREATE_USER_MODAL_ALIAS } from './create/constants.js';
-
 export const manifests: Array<UmbExtensionManifest> = [
-	{
-		type: 'modal',
-		alias: UMB_CREATE_USER_MODAL_ALIAS,
-		name: 'Create User Modal',
-		js: () => import('./create/create-user-modal.element.js'),
-	},
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.User.CreateSuccess',
-		name: 'Create Success User Modal',
-		js: () => import('./create/create-user-success-modal.element.js'),
-	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.User.Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/disable/disable-user.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/disable/disable-user.repository.ts
index d7c94c6beb..81bc35ff41 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/disable/disable-user.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/disable/disable-user.repository.ts
@@ -1,10 +1,14 @@
 import { UmbUserRepositoryBase } from '../user-repository-base.js';
+import { UmbUserItemRepository } from '../item/index.js';
 import { UmbDisableUserServerDataSource } from './disable-user.server.data-source.js';
+import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UserStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 
 export class UmbDisableUserRepository extends UmbUserRepositoryBase {
 	#disableSource: UmbDisableUserServerDataSource;
+	#localize = new UmbLocalizationController(this);
+	#userItemRepository = new UmbUserItemRepository(this);
 
 	constructor(host: UmbControllerHost) {
 		super(host);
@@ -18,11 +22,22 @@ export class UmbDisableUserRepository extends UmbUserRepositoryBase {
 		const { data, error } = await this.#disableSource.disable(ids);
 
 		if (!error) {
+			const { data: items } = await this.#userItemRepository.requestItems(ids);
+			if (!items) throw new Error('Could not load user item');
+
+			// TODO: get state from item when available
 			ids.forEach((id) => {
 				this.detailStore?.updateItem(id, { state: UserStateModel.DISABLED });
 			});
 
-			const notification = { data: { message: `User disabled` } };
+			let message = this.#localize.term('speechBubbles_disableUsersSuccess', items.length);
+
+			if (items.length === 1) {
+				const names = items?.map((item) => item.name).join(', ');
+				message = this.#localize.term('speechBubbles_disableUserSuccess', names);
+			}
+
+			const notification = { data: { message } };
 			this.notificationContext?.peek('positive', notification);
 		}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/enable/enable-user.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/enable/enable-user.repository.ts
index 2728c4807d..4c871e5fd5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/enable/enable-user.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/repository/enable/enable-user.repository.ts
@@ -1,10 +1,14 @@
 import { UmbUserRepositoryBase } from '../user-repository-base.js';
+import { UmbUserItemRepository } from '../item/index.js';
 import { UmbEnableUserServerDataSource } from './enable-user.server.data-source.js';
+import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UserStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 
 export class UmbEnableUserRepository extends UmbUserRepositoryBase {
 	#enableSource: UmbEnableUserServerDataSource;
+	#localize = new UmbLocalizationController(this);
+	#userItemRepository = new UmbUserItemRepository(this);
 
 	constructor(host: UmbControllerHost) {
 		super(host);
@@ -18,11 +22,22 @@ export class UmbEnableUserRepository extends UmbUserRepositoryBase {
 		const { data, error } = await this.#enableSource.enable(ids);
 
 		if (!error) {
+			const { data: items } = await this.#userItemRepository.requestItems(ids);
+			if (!items) throw new Error('Could not load user item');
+
+			// TODO: get state from item when available
 			ids.forEach((id) => {
 				this.detailStore?.updateItem(id, { state: UserStateModel.ACTIVE });
 			});
 
-			const notification = { data: { message: `User disabled` } };
+			let message = this.#localize.term('speechBubbles_enableUsersSuccess', items.length);
+
+			if (items.length === 1) {
+				const names = items?.map((item) => item.name).join(', ');
+				message = this.#localize.term('speechBubbles_enableUserSuccess', names);
+			}
+
+			const notification = { data: { message } };
 			this.notificationContext?.peek('positive', notification);
 		}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/types.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/types.ts
index cbb8fe2fe2..804493858d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/types.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/types.ts
@@ -7,6 +7,8 @@ import {
 	type UserTwoFactorProviderModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
 
+export type * from './conditions/types.js';
+
 export type UmbUserStateEnum = UserStateModel;
 export const UmbUserStateEnum = UserStateModel;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-root/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-root/manifests.ts
index 90662322da..44217e9ba9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-root/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user-root/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_USER_COLLECTION_ALIAS } from '../../collection/constants.js';
 import { UMB_USER_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_USER_ROOT_WORKSPACE_ALIAS } from './constants.js';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_USER_ROOT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/manifests.ts
index 3e96474084..1149050381 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/workspace/user/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_USER_ENTITY_TYPE } from '../../entity.js';
 import { UMB_USER_WORKSPACE_ALIAS } from './constants.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_USER_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/index.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/index.ts
index db0f1027eb..ebe4439610 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/webhook/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/index.ts
@@ -1,4 +1,4 @@
+export * from './repository/index.js';
 export * from './collection/index.js';
-
-export type * from './types.js';
 export * from './entity.js';
+export type * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/manifests.ts
index 1bd1cbc0e0..c837a613e0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook-root/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_WEBHOOK_COLLECTION_ALIAS } from '../../collection/manifests.js';
 import { UMB_WEBHOOK_ROOT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_WEBHOOK_ROOT_WORKSPACE_ALIAS } from './constants.js';
@@ -26,7 +27,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_WEBHOOK_ROOT_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/manifests.ts
index 4bc1e0757d..ae338f664e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/manifests.ts
@@ -1,3 +1,4 @@
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_WEBHOOK_ENTITY_TYPE, UMB_WEBHOOK_WORKSPACE_ALIAS } from '../../entity.js';
 import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
@@ -25,7 +26,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_WEBHOOK_WORKSPACE_ALIAS,
 			},
 		],
@@ -43,7 +44,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 		},
 		conditions: [
 			{
-				alias: 'Umb.Condition.WorkspaceAlias',
+				alias: UMB_WORKSPACE_CONDITION_ALIAS,
 				match: UMB_WEBHOOK_WORKSPACE_ALIAS,
 			},
 		],
diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts
index cab305752c..c727415667 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/workspace/webhook/views/webhook-details-workspace-view.element.ts
@@ -2,7 +2,7 @@ import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '../webhook-workspace.context-toke
 import type { UmbInputWebhookHeadersElement } from '../../../components/input-webhook-headers.element.js';
 import type { UmbInputWebhookEventsElement } from '../../../components/input-webhook-events.element.js';
 import { css, customElement, html, state, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbInputDocumentTypeElement } from '@umbraco-cms/backoffice/document-type';
@@ -110,9 +110,15 @@ export class UmbWebhookDetailsWorkspaceViewElement extends UmbLitElement impleme
 		return html`
 			<uui-box>
 				<umb-property-layout
+					mandatory
 					label=${this.localize.term('webhooks_url')}
 					description=${this.localize.term('webhooks_urlDescription')}>
-					<uui-input @input=${this.#onUrlChange} .value=${this._webhook.url} slot="editor"></uui-input>
+					<uui-input
+						@input=${this.#onUrlChange}
+						.value=${this._webhook.url}
+						slot="editor"
+						required="true"
+						${umbFocus()}></uui-input>
 				</umb-property-layout>
 				<umb-property-layout
 					label=${this.localize.term('webhooks_events')}
diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json
index 40f18ca7ce..3fc4bfabed 100644
--- a/src/Umbraco.Web.UI.Client/tsconfig.json
+++ b/src/Umbraco.Web.UI.Client/tsconfig.json
@@ -68,6 +68,9 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 			"@umbraco-cms/backoffice/document": ["./src/packages/documents/documents/index.ts"],
 			"@umbraco-cms/backoffice/entity-action": ["./src/packages/core/entity-action/index.ts"],
 			"@umbraco-cms/backoffice/entity-bulk-action": ["./src/packages/core/entity-bulk-action/index.ts"],
+			"@umbraco-cms/backoffice/entity-create-option-action": [
+				"./src/packages/core/entity-create-option-action/index.ts"
+			],
 			"@umbraco-cms/backoffice/entity": ["./src/packages/core/entity/index.ts"],
 			"@umbraco-cms/backoffice/event": ["./src/packages/core/event/index.ts"],
 			"@umbraco-cms/backoffice/extension-registry": ["./src/packages/core/extension-registry/index.ts"],
diff --git a/src/Umbraco.Web.UI.Client/typedoc.config.js b/src/Umbraco.Web.UI.Client/typedoc.config.js
index 55816e1c05..7af62f460f 100644
--- a/src/Umbraco.Web.UI.Client/typedoc.config.js
+++ b/src/Umbraco.Web.UI.Client/typedoc.config.js
@@ -1,6 +1,6 @@
 import { packageJsonExports } from './devops/package/meta.js';
 
-const excludePaths = ['./src/external', '.src/apps'];
+const excludePaths = ['./src/external', '.src/apps', './src/packages/extension-types/index.d.ts'];
 const entryPoints = [];
 
 for (const [key, value] of Object.entries(packageJsonExports || {})) {