diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
index 75bc97b2a9..f712272b8c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/image-crops-configuration/property-editor-ui-image-crops-configuration.element.ts
@@ -4,6 +4,7 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 export type UmbCrop = {
+	label: string;
 	alias: string;
 	width: number;
 	height: number;
@@ -35,12 +36,14 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 		const form = this.shadowRoot?.querySelector('form') as HTMLFormElement;
 		if (!form) return;
 
+		const label = form.querySelector('#label') as HTMLInputElement;
 		const alias = form.querySelector('#alias') as HTMLInputElement;
 		const width = form.querySelector('#width') as HTMLInputElement;
 		const height = form.querySelector('#height') as HTMLInputElement;
 
 		if (!alias || !width || !height) return;
 
+		label.value = crop.label;
 		alias.value = crop.alias;
 		width.value = crop.width.toString();
 		height.value = crop.height.toString();
@@ -59,14 +62,16 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 
 		const formData = new FormData(form);
 
+		const label = formData.get('label') as string;
 		const alias = formData.get('alias') as string;
 		const width = formData.get('width') as string;
 		const height = formData.get('height') as string;
 
-		if (!alias || !width || !height) return;
+		if (!label || !alias || !width || !height) return;
 		if (!this.value) this.value = [];
 
 		const newCrop = {
+			label,
 			alias,
 			width: parseInt(width),
 			height: parseInt(height),
@@ -101,6 +106,10 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 		return html`
 			<uui-form>
 				<form @submit=${this.#onSubmit}>
+				<div class="input">
+						<uui-label for="label">Label</uui-label>
+						<uui-input label="Label" id="label" name="label" type="text" autocomplete="false" value=""></uui-input>
+					</div>
 					<div class="input">
 						<uui-label for="alias">Alias</uui-label>
 						<uui-input label="Alias" id="alias" name="alias" type="text" autocomplete="false" value=""></uui-input>
@@ -127,7 +136,7 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 					(item) => html`
 						<div class="crop">
 							<span class="crop-drag">+</span>
-							<span class="crop-alias">${item.alias}</span>
+							<span><strong>${item.label}</strong> <em>(${item.alias})</em></span>
 							<span class="crop-size">(${item.width} x ${item.height}px)</span>
 							<div class="crop-actions">
 								<uui-button label="Edit" @click=${() => this.#onEdit(item)}>Edit</uui-button>
@@ -163,9 +172,6 @@ export class UmbPropertyEditorUIImageCropsConfigurationElement
 				color: var(--uui-color-disabled-contrast);
 				font-weight: bold;
 			}
-			.crop-alias {
-				font-weight: bold;
-			}
 			.crop-size {
 				font-size: 0.9em;
 				padding-inline: var(--uui-size-space-4);