diff --git a/src/common/component/QRCode.tsx b/src/common/component/QRCode.tsx
index 46f91a76..579611b7 100644
--- a/src/common/component/QRCode.tsx
+++ b/src/common/component/QRCode.tsx
@@ -4,29 +4,32 @@ import { useAppSelector } from '../../app/store';
 
 type Props = {
     link: string,
-    size?: number
+    size?: number,
+    level?: "L" | "M" | "H" | "Q"
 }
 
-const QRCode = ({ link, size = 512 }: Props) => {
+const QRCode = ({ link, size = 512, level = "L" }: Props) => {
     const logo = useAppSelector(store => store.server.logo);
     return (
-        <QR
-            renderAs='svg'
-            value={link}
-            className="rounded border border-solid border-gray-200 dark:border-none !w-full !h-full"
-            size={size}
-            bgColor={"#fff"}
-            fgColor={"#000"}
-            level={"L"}
-            includeMargin={true}
-            imageSettings={{
-                src: logo,
-                x: undefined,
-                y: undefined,
-                height: size / 6,
-                width: size / 6,
-                excavate: true,
-            }} />
+        <div className="p-2 bg-white dark:bg-slate-200 rounded">
+            <QR
+                renderAs='svg'
+                value={link}
+                className="rounded border border-solid border-gray-200 dark:border-none !w-full !h-full"
+                size={size}
+                bgColor={"#fff"}
+                fgColor={"#000"}
+                level={level}
+                // includeMargin={true}
+                imageSettings={{
+                    src: logo,
+                    x: undefined,
+                    y: undefined,
+                    height: size / 6,
+                    width: size / 6,
+                    excavate: true,
+                }} />
+        </div>
     );
 };
 
diff --git a/src/routes/chat/GuestBlankPlaceholder.tsx b/src/routes/chat/GuestBlankPlaceholder.tsx
index a39837b2..3b00ab82 100644
--- a/src/routes/chat/GuestBlankPlaceholder.tsx
+++ b/src/routes/chat/GuestBlankPlaceholder.tsx
@@ -27,7 +27,7 @@ const GuestBlankPlaceholder = () => {
       <div className="flex flex-col gap-2">
         <span className="text-gray-400 dark:text-gray-200 my-3 text-sm">{t("guest_login_tip")}</span>
         <div className="w-44 h-44 self-center mb-4">
-          <QRCode size={1200} link={`https://voce.chat/login?s=${encodeURIComponent(BASE_ORIGIN)}`} />
+          <QRCode level="Q" size={1200} link={`https://voce.chat/login?s=${encodeURIComponent(BASE_ORIGIN)}`} />
         </div>
         <Button onClick={handleSignIn} className="small">{t("sign_in")}</Button>
       </div>