diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts
index a443132a7e..9180dcb9bc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/components/input-media-type/input-media-type.element.ts
@@ -124,7 +124,7 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
 		if (this.max === 1 && this.selection.length >= this.max) return;
 		return html`
 			<uui-button
-				id="add-button"
+				id="btn-add"
 				look="placeholder"
 				@click=${this.#openPicker}
 				label="${this.localize.term('general_choose')}"></uui-button>
@@ -152,7 +152,7 @@ export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
 
 	static styles = [
 		css`
-			#add-button {
+			#btn-add {
 				width: 100%;
 			}
 		`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts
index 4d8ba6ece6..9947f2649d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts
@@ -1,8 +1,8 @@
-import type { UmbMediaItemModel } from '../../repository/item/types.js';
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/index.js';
+import type { UmbMediaItemModel } from '../../repository/item/types.js';
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbMediaPickerContext extends UmbPickerInputContext<UmbMediaItemModel> {
 	constructor(host: UmbControllerHost) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
index c4a4a44461..c49b8f68f8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
@@ -1,3 +1,4 @@
+import { UmbMediaPickerContext } from '../../../media/media/components/input-media/input-media.context.js';
 import { UmbPackageRepository } from '../../package/repository/index.js';
 import type { UmbCreatedPackageDefinition } from '../../types.js';
 import type { UmbInputLanguageElement } from '../../../language/components/input-language/input-language.element.js';
@@ -174,8 +175,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		return html`
 			<uui-box headline="Package Content">
 				${this.#renderDocumentSection()}
-
-			<umb-property-layout label="Media" description="">${this.#renderMediaSection()} </umb-property-layout>
+				${this.#renderMediaSection()}
 
 			<umb-property-layout label="Document Types" description="">
 				${this.#renderDocumentTypeSection()}
@@ -235,20 +235,38 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
 		`;
 	}
 
+	#onMediaChange(event: { target: UmbInputEntityElement }) {
+		if (!this._package) return;
+
+		this._package.mediaIds = event.target.selection ?? [];
+
+		if (this._package.mediaLoadChildNodes && !this._package.mediaIds.length) {
+			this._package.mediaLoadChildNodes = false;
+		}
+
+		this.requestUpdate('_package');
+	}
+
 	#renderMediaSection() {
+		if (!this._package) return nothing;
 		return html`
-			<div slot="editor">
-				<umb-input-media
-					.selection=${this._package.mediaIds ?? []}
-					@change="${(e: CustomEvent) =>
-						(this._package.mediaIds = (e.target as UmbInputMediaElement).selection)}"></umb-input-media>
-				<uui-checkbox
-					label="Include child nodes"
-					.checked="${this._package.mediaLoadChildNodes ?? false}"
-					@change="${(e: UUIBooleanInputEvent) => (this._package.mediaLoadChildNodes = e.target.checked)}">
-					Include child nodes
-				</uui-checkbox>
-			</div>
+			<umb-property-layout label="Media">
+				<div slot="editor">
+					<umb-input-entity
+						.getIcon=${(item: UmbMediaItemModel) => item.mediaType.icon ?? 'icon-picture'}
+						.pickerContext=${UmbMediaPickerContext}
+						.selection=${this._package.mediaIds ?? []}
+						@change=${this.#onMediaChange}>
+					</umb-input-entity>
+					<uui-checkbox
+						label="Include child nodes"
+						.checked=${this._package.mediaLoadChildNodes ?? false}
+						.disabled=${!this._package.mediaIds?.length}
+						@change=${(e: UUIBooleanInputEvent) => (this._package!.mediaLoadChildNodes = e.target.checked)}>
+						Include child nodes
+					</uui-checkbox>
+				</div>
+			</umb-property-layout>
 		`;
 	}