diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/allowed-document-types-modal.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/allowed-document-types-modal.token.ts
index c4f7631758..d2dc13448e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/allowed-document-types-modal.token.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/token/allowed-document-types-modal.token.ts
@@ -1,7 +1,8 @@
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbAllowedDocumentTypesModalData {
-	id: string | null;
+	parentId: string | null;
+	parentName?: string;
 }
 
 export interface UmbAllowedDocumentTypesModalResult {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
index 27007bc7dd..34019ecbf8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.ts
@@ -1,5 +1,5 @@
 import { UmbDocumentTypeRepository } from '../../repository/document-type.repository.js';
-import { html, nothing , customElement, state , ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { html, nothing, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { UmbAllowedDocumentTypesModalData, UmbAllowedDocumentTypesModalResult } from '@umbraco-cms/backoffice/modal';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@@ -15,12 +15,28 @@ export class UmbAllowedDocumentTypesModalElement extends UmbModalBaseElement<
 	@state()
 	private _allowedDocumentTypes: DocumentTypeTreeItemResponseModel[] = [];
 
-	async firstUpdated() {
-		// TODO: Support root aka. id of null? or maybe its an active prop, like 'atRoot'.
-		// TODO: show error
-		if (!this.data?.id) return;
+	@state()
+	private _headline?: string;
 
-		const { data } = await this.#documentTypeRepository.requestAllowedChildTypesOf(this.data.id);
+	public connectedCallback() {
+		super.connectedCallback();
+
+		const parentName = this.data?.parentName;
+		if (parentName) {
+			this._headline = `Create at '${parentName}'`;
+		} else {
+			this._headline = `Create`;
+		}
+		if (this.data?.parentId) {
+			// TODO: Support root aka. id of null? or maybe its an active prop, like 'atRoot'.
+			// TODO: show error
+
+			this._retrieveAllowedChildrenOf(this.data.parentId);
+		}
+	}
+
+	private async _retrieveAllowedChildrenOf(id: string) {
+		const { data } = await this.#documentTypeRepository.requestAllowedChildTypesOf(id);
 
 		if (data) {
 			this._allowedDocumentTypes = data;
@@ -41,7 +57,7 @@ export class UmbAllowedDocumentTypesModalElement extends UmbModalBaseElement<
 
 	render() {
 		return html`
-			<umb-body-layout headline="Headline">
+			<umb-body-layout headline=${this._headline}>
 				<uui-box>
 					${this._allowedDocumentTypes.length === 0 ? html`<p>No allowed types</p>` : nothing}
 					${this._allowedDocumentTypes.map(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts
index 72576502e0..8bf7982dc8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/create.action.ts
@@ -29,23 +29,34 @@ export class UmbCreateDocumentEntityAction extends UmbEntityActionBase<UmbDocume
 
 	private async _executeWithParent() {
 		// TODO: what to do if modal service is not available?
-		if (!this.#modalContext) return;
 		if (!this.repository) return;
 
 		const { data } = await this.repository.requestById(this.unique);
 
 		if (data && data.contentTypeId) {
-			const modalHandler = this.#modalContext?.open(UMB_ALLOWED_DOCUMENT_TYPES_MODAL, {
-				id: data.contentTypeId,
-			});
-
-			const { documentTypeKey } = await modalHandler.onSubmit();
-			// TODO: how do we want to generate these urls?
-			history.pushState(null, '', `section/content/workspace/document/create/${this.unique}/${documentTypeKey}`);
+			// TODO: We need to get the APP language context, use its VariantId to retrieve the right variant. The variant of which we get the name from.
+			this._openModal(data.contentTypeId, data.variants?.[0]?.name);
 		}
 	}
 
 	private async _executeAtRoot() {
-		alert('At root.');
+		this._openModal(null);
+	}
+
+	private async _openModal(parentId: string | null, parentName?: string) {
+		if (!this.#modalContext) return;
+		const modalHandler = this.#modalContext.open(UMB_ALLOWED_DOCUMENT_TYPES_MODAL, {
+			parentId: parentId,
+			parentName: parentName,
+		});
+
+		const { documentTypeKey } = await modalHandler.onSubmit();
+
+		// TODO: how do we want to generate these urls?
+		history.pushState(
+			null,
+			'',
+			`section/content/workspace/document/create/${this.unique ?? 'null'}/${documentTypeKey}`
+		);
 	}
 }