diff --git a/ui/src/components/account/MfaSection.tsx b/ui/src/components/account/MfaSection.tsx
index fb50592..e9dde51 100644
--- a/ui/src/components/account/MfaSection.tsx
+++ b/ui/src/components/account/MfaSection.tsx
@@ -162,7 +162,11 @@ export function MfaSection() {
           Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.), then enter the 6-digit code below.
         </p>
         <div style={{ display: 'flex', justifyContent: 'center', padding: '16px 0' }}>
-          <QRCodeSVG value={setupData.secretQrCode} size={200} />
+          {setupData.secretQrCode.startsWith('data:') ? (
+            <img src={setupData.secretQrCode} alt="TOTP QR Code" width={200} height={200} />
+          ) : (
+            <QRCodeSVG value={setupData.secretQrCode} size={200} />
+          )}
         </div>
         <div style={{
           textAlign: 'center',