diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
index e23da648b4..ce4783482f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.ts
@@ -5,20 +5,15 @@ import { LitElement, css, html, nothing, customElement, property, query } from '
 
 @customElement('umb-image-cropper-focus-setter')
 export class UmbImageCropperFocusSetterElement extends LitElement {
-	@query('#image') imageElement?: HTMLImageElement;
+	@query('#image') imageElement!: HTMLImageElement;
 	@query('#wrapper') wrapperElement?: HTMLImageElement;
-	@query('#focal-point') focalPointElement?: HTMLImageElement;
+	@query('#focal-point') focalPointElement!: HTMLImageElement;
 
 	@property({ type: String }) src?: string;
 	@property({ attribute: false }) focalPoint: UmbImageCropperFocalPoint = { left: 0.5, top: 0.5 };
 
 	#DOT_RADIUS = 6 as const;
 
-	connectedCallback() {
-		super.connectedCallback();
-		this.#addEventListeners();
-	}
-
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#removeEventListeners();
@@ -33,33 +28,46 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 		}
 	}
 
+	protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+		super.update(changedProperties);
+
+		if (changedProperties.has('src')) {
+			if (this.src) {
+				this.#initializeImage();
+			}
+		}
+	}
+
 	protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.firstUpdated(_changedProperties);
 
 		this.style.setProperty('--dot-radius', `${this.#DOT_RADIUS}px`);
+	}
 
-		if (this.focalPointElement) {
-			this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
-			this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
-		}
-		if (this.imageElement) {
-			this.imageElement.onload = () => {
-				if (!this.imageElement || !this.wrapperElement) return;
-				const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
-				const hostRect = this.getBoundingClientRect();
-				const image = this.imageElement.getBoundingClientRect();
+	async #initializeImage() {
+		await this.updateComplete; // Wait for the @query to be resolved
 
-				if (image.width > hostRect.width) {
-					this.imageElement.style.width = '100%';
-				}
-				if (image.height > hostRect.height) {
-					this.imageElement.style.height = '100%';
-				}
+		this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
+		this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
 
-				this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
-				this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
-			};
-		}
+		this.imageElement.onload = () => {
+			if (!this.imageElement || !this.wrapperElement) return;
+			const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
+			const hostRect = this.getBoundingClientRect();
+			const image = this.imageElement.getBoundingClientRect();
+
+			if (image.width > hostRect.width) {
+				this.imageElement.style.width = '100%';
+			}
+			if (image.height > hostRect.height) {
+				this.imageElement.style.height = '100%';
+			}
+
+			this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
+			this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
+		};
+
+		this.#addEventListeners();
 	}
 
 	async #addEventListeners() {
@@ -134,6 +142,7 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 		}
 		/* Wrapper is used to make the focal point position responsive to the image size */
 		#wrapper {
+			overflow: hidden;
 			position: relative;
 			display: flex;
 			margin: auto;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
index ffda92c71c..7d94c9740e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper-preview.element.ts
@@ -33,11 +33,7 @@ export class UmbImageCropperPreviewElement extends LitElement {
 		if (!this.crop) return;
 
 		await this.updateComplete; // Wait for the @query to be resolved
-
-		if (!this.imageElement.complete) {
-			// Wait for the image to load
-			await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
-		}
+		await new Promise((resolve) => (this.imageElement.onload = () => resolve(this.imageElement)));
 
 		const container = this.imageContainerElement.getBoundingClientRect();
 		const cropAspectRatio = this.crop.width / this.crop.height;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
index 6599c9a769..807193942c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts
@@ -376,6 +376,7 @@ export class UmbImageCropperElement extends LitElement {
 		#image {
 			display: block;
 			position: absolute;
+			user-select: none;
 		}
 
 		#slider {