diff --git a/client/package.json b/client/package.json
index b2b294f..5fa12a9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@chat-e2ee/service": "file:../service",
-    "qrcode.react": "^3.1.0",
+    "qrcode.react": "^4.0.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^16.13.1",
diff --git a/client/src/components/LinkDisplay/index.tsx b/client/src/components/LinkDisplay/index.tsx
index 1f51d22..f4422f6 100644
--- a/client/src/components/LinkDisplay/index.tsx
+++ b/client/src/components/LinkDisplay/index.tsx
@@ -4,7 +4,7 @@ import { MdOutlineQrCode } from "react-icons/md";
 import styles from "./Style.module.css";
 import { ThemeContext } from "../../ThemeContext";
 import { LinkObjType } from "@chat-e2ee/service";
-import QRCode from "qrcode.react";
+import { QRCodeSVG } from "qrcode.react";
 import detectMobile from "../../utils/detectMobile";
 
 const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
@@ -81,7 +81,7 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
       </div>
       {showQR && (
         <div className={styles.qrCodeContainer}>
-          <QRCode value={chatLink} size={128} />
+          <QRCodeSVG value={chatLink} size={128} />
         </div>
       )}
     </div>