diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
index afea971d3d..9cd0f507f9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts
@@ -46,6 +46,7 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 						@selection-change=${this.#onSelectionChange}
 						.selection=${this._selection}
 						selectable
+						.filter=${this.data?.filter}
 						.selectableFilter=${this.data?.pickableFilter}
 						?multiple=${this._multiple}></umb-tree>
 				</uui-box>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts
index 2c89cfe9c5..4aff14c26d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.ts
@@ -30,6 +30,8 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 	public repository?: UmbTreeRepository<TreeItemType>;
 	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
 
+	public filter?: (item: TreeItemType) => boolean = () => true;
+
 	public readonly selection = new UmbSelectionManager(this._host);
 
 	#treeAlias?: string;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
index fc28079c8a..70e5ca72cb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.element.ts
@@ -66,6 +66,14 @@ export class UmbTreeElement extends UmbLitElement {
 		this.#treeContext.selectableFilter = newVal;
 	}
 
+	@property()
+	get filter() {
+		return this.#treeContext.filter;
+	}
+	set filter(newVal) {
+		this.#treeContext.filter = newVal;
+	}
+
 	@state()
 	private _items: UmbTreeItemModelBase[] = [];
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts
index 121f921f4a..5286fb0a32 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/document-type-input/document-type-input.element.ts
@@ -1,5 +1,5 @@
 import { UmbDocumentTypePickerContext } from './document-type-input.context.js';
-import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { DocumentTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -7,6 +7,15 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-document-type-input')
 export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement) {
+	/**
+	 * Selects the element types only
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, attribute: 'element-types-only' })
+	elementTypesOnly: boolean = false;
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -102,19 +111,28 @@ export class UmbDocumentTypeInputElement extends FormControlMixin(UmbLitElement)
 		return undefined;
 	}
 
+	#openPicker() {
+		if (this.elementTypesOnly) {
+			this.#pickerContext.openPicker({
+				hideTreeRoot: true,
+				pickableFilter: (x) => x.isElement!,
+			});
+		} else {
+			this.#pickerContext.openPicker({ hideTreeRoot: true });
+		}
+	}
+
 	render() {
 		return html`
 			<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
-			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open"
-				>Add</uui-button
-			>
+			<uui-button id="add-button" look="placeholder" @click=${this.#openPicker} label="open">Add</uui-button>
 		`;
 	}
 
 	private _renderItem(item: DocumentTypeItemResponseModel) {
 		if (!item.id) return;
 		return html`
-			<uui-ref-node-document-type name=${item.name}>
+			<uui-ref-node-document-type name=${ifDefined(item.name)}>
 				<uui-action-bar slot="actions">
 					<uui-button
 						@click=${() => this.#pickerContext.requestRemoveItem(item.id!)}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
index bcda0f288e..2c5ee32c9e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
@@ -60,6 +60,7 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement
 					<div slot="editor">
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
 						<umb-document-type-input
+							element-types-only
 							.selectedIds=${this._allowedContentTypeIDs ?? []}
 							@change="${(e: CustomEvent) => {
 								const sortedContentTypesList = (e.target as UmbDocumentTypeInputElement).selectedIds.map(