diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index 0b5518880b..46e4938a7b 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -243,7 +243,6 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		id: 'dt-datePicker-time',
 		parentId: null,
 		propertyEditorAlias: 'Umbraco.DateTime',
-		propertyEditorUiAlias: 'Umb.PropertyEditorUI.DatePicker',
 		values: [
 			{
 				alias: 'format',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-editor.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-editor.model.ts
index 89547a9173..20094189a2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-editor.model.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/property-editor.model.ts
@@ -22,6 +22,7 @@ export interface ManifestPropertyEditorModel extends ManifestBase {
 }
 
 export interface MetaPropertyEditorModel {
+	defaultUI: string;
 	config?: PropertyEditorConfig;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/models/Umbraco.DateTime.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/models/Umbraco.DateTime.ts
index 78e13d2191..2733d3cff8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/models/Umbraco.DateTime.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/models/Umbraco.DateTime.ts
@@ -6,6 +6,7 @@ export const manifest: ManifestPropertyEditorModel = {
 	name: 'Date/Time',
 	alias: 'Umbraco.DateTime',
 	meta: {
+		defaultUI: 'Umb.PropertyEditorUI.DatePicker',
 		config: {
 			properties: [
 				{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
index 4ef89d27f6..8c327c065a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
@@ -1,6 +1,6 @@
 import { UmbDataTypeWorkspaceContext } from '../../data-type-workspace.context.js';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, nothing , customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import {
 	UmbModalContext,
@@ -23,16 +23,16 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement
 	_dataType?: DataTypeResponseModel;
 
 	@state()
-	private _propertyEditorUIIcon = '';
+	private _propertyEditorUiIcon?: string;
 
 	@state()
-	private _propertyEditorUIName = '';
+	private _propertyEditorUiName?: string;
 
 	@state()
-	private _propertyEditorUiAlias = '';
+	private _propertyEditorUiAlias?: string;
 
 	@state()
-	private _propertyEditorAlias = '';
+	private _propertyEditorAlias?: string;
 
 	@state()
 	private _data: Array<any> = [];
@@ -65,8 +65,23 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement
 			// TODO: handle if model is not of the type wanted.
 			this._dataType = dataType;
 
-			if (this._dataType.propertyEditorUiAlias !== this._propertyEditorUiAlias) {
-				this._observePropertyEditorUI(this._dataType.propertyEditorUiAlias || undefined);
+			if (!this._dataType.propertyEditorUiAlias) {
+				if (this._dataType.propertyEditorAlias) {
+					// Get the property editor UI alias from the property editor alias:
+					this.observe(
+						umbExtensionsRegistry.getByTypeAndAlias('propertyEditorModel', this._dataType.propertyEditorAlias),
+						(propertyEditorModel) => {
+							// TODO: show error. We have stored a PropertyEditorModelAlias and can't find the PropertyEditorModel in the registry.
+							if (!propertyEditorModel) return;
+							this._setPropertyEditorUiAlias(propertyEditorModel.meta.defaultUI ?? undefined);
+						},
+						'_observePropertyEditorModelForDefaultUI'
+					);
+				} else {
+					this._setPropertyEditorUiAlias(undefined);
+				}
+			} else {
+				this._setPropertyEditorUiAlias(this._dataType.propertyEditorUiAlias);
 			}
 
 			if (this._dataType.values && this._dataType.values !== this._data) {
@@ -75,8 +90,23 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement
 		});
 	}
 
+	private _setPropertyEditorUiAlias(value: string | undefined) {
+		const oldValue = this._propertyEditorUiAlias;
+		if (oldValue !== value) {
+			this._propertyEditorUiAlias = value;
+			this._observePropertyEditorUI(value || undefined);
+		}
+	}
+
 	private _observePropertyEditorUI(propertyEditorUiAlias?: string) {
-		if (!propertyEditorUiAlias) return;
+		if (!propertyEditorUiAlias) {
+			this._propertyEditorUiName = this._propertyEditorUiIcon = this._propertyEditorUiAlias = undefined;
+			this.removeControllerByUnique('_observePropertyEditorUI');
+			return;
+		}
+
+		// remove the '_observePropertyEditorModelForDefaultUI' controller, as we do not want to observe for default value anymore:
+		this.removeControllerByUnique('_observePropertyEditorModelForDefaultUI');
 
 		this.observe(
 			umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUI', propertyEditorUiAlias),
@@ -84,13 +114,14 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement
 				// TODO: show error. We have stored a PropertyEditorUIAlias and can't find the PropertyEditorUI in the registry.
 				if (!propertyEditorUI) return;
 
-				this._propertyEditorUIName = propertyEditorUI?.meta.label ?? propertyEditorUI?.name ?? '';
+				this._propertyEditorUiName = propertyEditorUI?.meta.label ?? propertyEditorUI?.name ?? '';
 				this._propertyEditorUiAlias = propertyEditorUI?.alias ?? '';
-				this._propertyEditorUIIcon = propertyEditorUI?.meta.icon ?? '';
+				this._propertyEditorUiIcon = propertyEditorUI?.meta.icon ?? '';
 				this._propertyEditorAlias = propertyEditorUI?.meta.propertyEditorModel ?? '';
 
 				this._workspaceContext?.setPropertyEditorAlias(this._propertyEditorAlias);
-			}
+			},
+			'_observePropertyEditorUI'
 		);
 	}
 
@@ -107,9 +138,7 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement
 	}
 
 	private _selectPropertyEditorUI(propertyEditorUiAlias: string | undefined) {
-		if (!this._dataType || this._dataType.propertyEditorUiAlias === propertyEditorUiAlias) return;
 		this._workspaceContext?.setPropertyEditorUiAlias(propertyEditorUiAlias);
-		this._observePropertyEditorUI(propertyEditorUiAlias);
 	}
 
 	render() {
@@ -127,11 +156,11 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement
 							<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
 							<umb-ref-property-editor-ui
 								slot="editor"
-								name=${this._propertyEditorUIName}
+								name=${this._propertyEditorUiName}
 								alias=${this._propertyEditorUiAlias}
 								property-editor-model-alias=${this._propertyEditorAlias}
 								border>
-								<uui-icon name="${this._propertyEditorUIIcon}" slot="icon"></uui-icon>
+								<uui-icon name="${this._propertyEditorUiIcon}" slot="icon"></uui-icon>
 								<uui-action-bar slot="actions">
 									<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
 								</uui-action-bar>