diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/data-type-tree.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/data-type-tree.element.ts
new file mode 100644
index 0000000000..9e823c32eb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/data-type-tree.element.ts
@@ -0,0 +1,36 @@
+import { html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-data-type-tree')
+export class UmbDataTypeTreeElement extends UmbLitElement {
+	@state()
+	private _renderTree = false;
+
+	private _onShowChildren() {
+		this._renderTree = true;
+	}
+
+	private _onHideChildren() {
+		this._renderTree = false;
+	}
+
+	render() {
+		return html`<uui-menu-item
+			label="Data Types"
+			has-children
+			@show-children="${this._onShowChildren}"
+			@hide-children="${this._onHideChildren}">
+			<uui-icon slot="icon" name="umb:folder"></uui-icon>
+			${this._renderTree ? html`<umb-tree alias="Umb.Tree.DataTypes"></umb-tree>` : nothing}
+		</uui-menu-item> `;
+	}
+}
+
+export default UmbDataTypeTreeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-data-type-tree': UmbDataTypeTreeElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts
index fcd8b28771..fe52393bc8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts
@@ -5,6 +5,7 @@ const tree: ManifestTree = {
 	alias: 'Umb.Tree.DataTypes',
 	name: 'Data Types Tree',
 	weight: 100,
+	loader: () => import('./data-type-tree.element'),
 	meta: {
 		label: 'Data Types',
 		icon: 'umb:folder',