diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-data-type.element.ts
index 9895ee504a..7c2bd3aead 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-data-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/editor-data-type.element.ts
@@ -1,10 +1,27 @@
 import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 
 @customElement('umb-editor-data-type')
 export class UmbEditorDataTypeElement extends LitElement {
+	@property()
+	id!: string;
+
+	private _onSave() {
+		console.log('SAVE DATA TYPE');
+	}
+
 	render() {
-		return html`<div>Data types</div>`;
+		return html`
+			<umb-editor-layout>
+				<uui-input slot="name" value="name"></uui-input>
+
+				<div>Some Content Here: ${this.id}</div>
+
+				<div slot="actions">
+					<uui-button @click=${this._onSave} look="primary" color="positive" label="Save"></uui-button>
+				</div>
+			</umb-editor-layout>
+		`;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section-tree.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section-tree.element.ts
index 0aa7a1b7c4..49850d28d8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section-tree.element.ts
@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { data } from '../../../mocks/data/data-type.data';
 
 @customElement('umb-settings-section-tree')
 class UmbSettingsSectionTree extends LitElement {
@@ -13,6 +14,10 @@ class UmbSettingsSectionTree extends LitElement {
 		`,
 	];
 
+	// TODO: implement dynamic tree data
+	@state()
+	_dataTypes: Array<any> = data;
+
 	render() {
 		return html`
 			<a href="${'/section/settings'}">
@@ -21,7 +26,13 @@ class UmbSettingsSectionTree extends LitElement {
 
 			<!-- TODO: hardcoded tree items. These should come the extensions -->
 			<uui-menu-item label="Extensions" href="/section/settings/extensions"></uui-menu-item>
-			<uui-menu-item label="Data Types" href="/section/settings/data-types"></uui-menu-item>
+			<uui-menu-item label="Data Types" has-children>
+				${this._dataTypes.map(
+					(dataType) => html`
+						<uui-menu-item label="${dataType.name}" href="/section/settings/data-type/${dataType.id}"></uui-menu-item>
+					`
+				)}
+			</uui-menu-item>
 		`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts
index c24d543e84..bb03ef765b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts
@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { IRoute } from 'router-slot';
+import { customElement, property, state } from 'lit/decorators.js';
+import { IRoute, IRoutingInfo } from 'router-slot';
 import { UmbContextConsumerMixin } from '../../../core/context';
 
 import './settings-section-tree.element';
@@ -17,9 +17,13 @@ export class UmbSettingsSection extends UmbContextConsumerMixin(LitElement) {
 			path: 'extensions',
 			component: () => import('../../editors/editor-extensions.element'),
 		},
+		// TODO: who should own this logic? Should it be each tree/editor that knows sub-routes?
 		{
-			path: 'data-types',
+			path: 'data-type/:id',
 			component: () => import('../../editors/editor-data-type.element'),
+			setup(component: any, info: IRoutingInfo) {
+				component.id = info.match.params.id;
+			},
 		},
 		{
 			path: '**',
diff --git a/src/Umbraco.Web.UI.Client/src/core/stores/data-type.store.ts b/src/Umbraco.Web.UI.Client/src/core/stores/data-type.store.ts
index 78ba0fbb04..456004fad6 100644
--- a/src/Umbraco.Web.UI.Client/src/core/stores/data-type.store.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/stores/data-type.store.ts
@@ -1,37 +1,13 @@
 import { BehaviorSubject, map, Observable } from 'rxjs';
 import { DataTypeEntity } from '../../mocks/data/content.data';
+import { data } from '../../mocks/data/data-type.data';
 
 export class UmbDataTypeStore {
 	private _dataTypes: BehaviorSubject<Array<DataTypeEntity>> = new BehaviorSubject(<Array<DataTypeEntity>>[]);
 	public readonly dataTypes: Observable<Array<DataTypeEntity>> = this._dataTypes.asObservable();
 
 	constructor() {
-		this._dataTypes.next([
-			{
-				id: 1245,
-				key: 'dt-1',
-				name: 'TextString (DataType)',
-				propertyEditorUIAlias: 'Umb.PropertyEditorUI.Text',
-			},
-			{
-				id: 1244,
-				key: 'dt-2',
-				name: 'Textarea (DataType)',
-				propertyEditorUIAlias: 'Umb.PropertyEditorUI.Textarea',
-			},
-			{
-				id: 1246,
-				key: 'dt-3',
-				name: 'My JS Property Editor (DataType)',
-				propertyEditorUIAlias: 'My.PropertyEditorUI.Custom',
-			},
-			{
-				id: 1247,
-				key: 'dt-4',
-				name: 'Context Example (DataType)',
-				propertyEditorUIAlias: 'Umb.PropertyEditorUI.ContextExample',
-			},
-		]);
+		this._dataTypes.next(data);
 	}
 
 	getById(id: number): Observable<DataTypeEntity | null> {
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
new file mode 100644
index 0000000000..30232b10cd
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -0,0 +1,26 @@
+export const data: Array<any> = [
+	{
+		id: 1245,
+		key: 'dt-1',
+		name: 'TextString (DataType)',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Text',
+	},
+	{
+		id: 1244,
+		key: 'dt-2',
+		name: 'Textarea (DataType)',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Textarea',
+	},
+	{
+		id: 1246,
+		key: 'dt-3',
+		name: 'My JS Property Editor (DataType)',
+		propertyEditorUIAlias: 'My.PropertyEditorUI.Custom',
+	},
+	{
+		id: 1247,
+		key: 'dt-4',
+		name: 'Context Example (DataType)',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.ContextExample',
+	},
+];