diff --git a/frontend/package.json b/frontend/package.json
index ceacd3e70..e7c7363c3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,6 +34,7 @@
 		"react-dom": "^19.2.8",
 		"react-intl": "^10.1.22",
 		"react-markdown": "^10.1.0",
+		"react-qr-code": "^2.2.0",
 		"react-router-dom": "^7.18.2",
 		"react-select": "^5.10.2",
 		"react-toastify": "^11.1.0",
diff --git a/frontend/src/modals/TwoFactorModal.tsx b/frontend/src/modals/TwoFactorModal.tsx
index fa46c89cc..2b8639fa9 100644
--- a/frontend/src/modals/TwoFactorModal.tsx
+++ b/frontend/src/modals/TwoFactorModal.tsx
@@ -7,6 +7,7 @@ import { disable2FA, enable2FA, get2FAStatus, regenerateBackupCodes, start2FASet
 import { Button } from "src/components";
 import { T } from "src/locale";
 import { validateString } from "src/modules/Validations";
+import QRCode from "react-qr-code";
 
 type Step = "loading" | "status" | "setup" | "verify" | "backup" | "disable";
 
@@ -155,11 +156,10 @@ const TwoFactorModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						<T id="2fa.setup-instructions" />
 					</p>
 					<div className="text-center mb-3">
-						<img
-							src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(setupData.otpauthUrl)}`}
-							alt="QR Code"
-							className="img-fluid"
-							style={{ maxWidth: "200px" }}
+						<QRCode
+							value={setupData.otpauthUrl}
+							size={200}
+							style={{ maxWidth: "200px", height: "auto" }}
 						/>
 					</div>
 					<label className="mb-3 d-block">
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 493088c86..6304819a2 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2260,6 +2260,11 @@ property-information@^7.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-7.2.0.tgz#0809b34264e995c0bfcd3227028a1e35210af80a"
   integrity sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==
 
+qrcode-generator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-2.0.4.tgz#e8b3f30922577eba52078aa9c0d5a2a74fe1fd94"
+  integrity sha512-mZSiP6RnbHl4xL2Ap5HfkjLnmxfKcPWpWe/c+5XxCuetEenqmNFf1FH/ftXPCtFG5/TDobjsjz6sSNL0Sr8Z9g==
+
 query-string@^9.5.0:
   version "9.5.0"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-9.5.0.tgz#e6f4003dcb321580dd043109b6fbe2a3890afff6"
@@ -2370,6 +2375,14 @@ react-markdown@^10.1.0:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
+react-qr-code@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.2.0.tgz#301b5dc4d2fed503e1e313f237a7f32c1885152a"
+  integrity sha512-e5nS0UUN22K3Nf8KBRUzemfdJ6OmnN5w+kbnj1lvJaol9RyVRFeGl05bCkxSN2ZegbLxjjYjX1+mmAoX9+fAhw==
+  dependencies:
+    prop-types "^15.8.1"
+    qrcode-generator "^2.0.4"
+
 react-router-dom@^7.18.2:
   version "7.18.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.18.2.tgz#00bf1d0ce8bf17a6d831949aacda72a6120e4926"