diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts
index 083ec02289..3bbe517784 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts
@@ -98,9 +98,11 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 										</umb-localize>
 									</p>
 									<img
+										id="qrCode"
 										.src=${this._qrCodeSetupImageUrl}
 										alt=${this.localize.term('user_2faQrCodeAlt')}
-										title=${this.localize.term('user_2faQrCodeTitle')} />
+										title=${this.localize.term('user_2faQrCodeTitle')}
+										loading="eager" />
 								</div>
 								<uui-form-layout-item class="text-center">
 									<uui-label for="code" slot="label" required>
@@ -192,6 +194,11 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 				height: 100%;
 			}
 
+			#qrCode {
+				width: 100%;
+				aspect-ratio: 1;
+			}
+
 			#code {
 				width: 100%;
 				max-width: 300px;