diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts
index e0e2b4d05f..0f2d55d01b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts
@@ -1,6 +1,16 @@
+import { DOCUMENT_TYPE_TREE_ALIAS } from '../tree/manifests';
 import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry';
 
 const modals: Array<ManifestModal> = [
+	{
+		type: 'modal',
+		kind: 'treePicker',
+		alias: 'Umb.Modal.DocumentTypePicker',
+		name: 'Document Type Picker Modal',
+		meta: {
+			treeAlias: DOCUMENT_TYPE_TREE_ALIAS,
+		},
+	},
 	{
 		type: 'modal',
 		alias: 'Umb.Modal.AllowedDocumentTypes',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts
index 2f2bf1fd5b..83ddb777f1 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts
@@ -1,9 +1,11 @@
 import { DOCUMENT_TYPE_REPOSITORY_ALIAS } from '../repository/manifests';
 import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry';
 
+export const DOCUMENT_TYPE_TREE_ALIAS = 'Umb.Tree.DocumentTypes';
+
 const tree: ManifestTree = {
 	type: 'tree',
-	alias: 'Umb.Tree.DocumentTypes',
+	alias: DOCUMENT_TYPE_TREE_ALIAS,
 	name: 'Document Types Tree',
 	meta: {
 		repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts
index de5803d280..906930d539 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts
@@ -10,6 +10,7 @@ import {
 	UMB_MODAL_CONTEXT_TOKEN,
 	UMB_CONFIRM_MODAL,
 	UMB_DOCUMENT_PICKER_MODAL,
+	UMB_DOCUMENT_TYPE_PICKER_MODAL,
 } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -118,7 +119,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 
 	private _openPicker() {
 		// We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data:
-		const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, {
+		const modalHandler = this._modalContext?.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
 			multiple: this.max === 1 ? false : true,
 			selection: [...this._selectedIds],
 		});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts
deleted file mode 100644
index 69b5da52eb..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { css, html } from 'lit';
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, state } from 'lit/decorators.js';
-import type { UmbTreeElement } from '../../../../core/components/tree/tree.element';
-import { UmbDocumentTypePickerModalData, UmbDocumentTypePickerModalResult } from '@umbraco-cms/backoffice/modal';
-import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
-
-// TODO: make use of UmbPickerLayoutBase
-@customElement('umb-document-type-picker-modal')
-export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement<
-	UmbDocumentTypePickerModalData,
-	UmbDocumentTypePickerModalResult
-> {
-	@state()
-	_selection: Array<string | null> = [];
-
-	@state()
-	_multiple = true;
-
-	connectedCallback() {
-		super.connectedCallback();
-		this._selection = this.data?.selection ?? [];
-		this._multiple = this.data?.multiple ?? true;
-	}
-
-	private _handleSelectionChange(e: CustomEvent) {
-		e.stopPropagation();
-		const element = e.target as UmbTreeElement;
-		this._selection = element.selection;
-	}
-
-	private _submit() {
-		this.modalHandler?.submit({ selection: this._selection });
-	}
-
-	private _close() {
-		this.modalHandler?.reject();
-	}
-
-	render() {
-		return html`
-			<umb-workspace-editor headline="Select Content">
-				<uui-box>
-					<uui-input></uui-input>
-					<hr />
-					<umb-tree
-						alias="Umb.Tree.DocumentTypes"
-						@selected=${this._handleSelectionChange}
-						.selection=${this._selection}
-						selectable
-						?multiple=${this._multiple}></umb-tree>
-				</uui-box>
-				<div slot="actions">
-					<uui-button label="Close" @click=${this._close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
-				</div>
-			</umb-workspace-editor>
-		`;
-	}
-
-	static styles = [
-		UUITextStyles,
-		css`
-			h3 {
-				margin-left: var(--uui-size-space-5);
-				margin-right: var(--uui-size-space-5);
-			}
-
-			uui-input {
-				width: 100%;
-			}
-
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-
-			#content-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-			}
-
-			.content-item {
-				cursor: pointer;
-			}
-
-			.content-item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-		`,
-	];
-}
-
-export default UmbDocumentTypePickerModalElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-document-type-picker-modal': UmbDocumentTypePickerModalElement;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts
deleted file mode 100644
index f946b89fad..0000000000
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import '../../../../core/components/body-layout/body-layout.element';
-import './document-type-picker-modal.element';
-
-import { Meta, Story } from '@storybook/web-components';
-import { html } from 'lit';
-
-import type { UmbDocumentTypePickerModalElement } from './document-type-picker-modal.element';
-import type { UmbDocumentTypePickerModalData } from '@umbraco-cms/backoffice/modal';
-
-export default {
-	title: 'API/Modals/Layouts/Content Picker',
-	component: 'umb-document-type-picker-modal',
-	id: 'umb-document-type-picker-modal',
-} as Meta;
-
-const data: UmbDocumentTypePickerModalData = {
-	multiple: true,
-	selection: [],
-};
-
-export const Overview: Story<UmbDocumentTypePickerModalElement> = () => html`
-	<!-- TODO: figure out if generics are allowed for properties:
-	https://github.com/runem/lit-analyzer/issues/149
-	https://github.com/runem/lit-analyzer/issues/163 -->
-	<umb-document-picker-modal .data=${data as any}></umb-document-picker-modal>
-`;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts
index 7c2c4f7006..e125e8b4c8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts
@@ -11,12 +11,6 @@ const modals: Array<ManifestModal> = [
 			treeAlias: DOCUMENT_TREE_ALIAS,
 		},
 	},
-	{
-		type: 'modal',
-		alias: 'Umb.Modal.DocumentTypePicker',
-		name: 'Document Type Picker Modal',
-		loader: () => import('./document-type-picker/document-type-picker-modal.element'),
-	},
 ];
 
 export const manifests = [...modals];