diff --git a/packages/next-common/components/login/web3/walletconnect.jsx b/packages/next-common/components/login/web3/walletconnect.jsx
index 10a7e284ed..00037e4d46 100644
--- a/packages/next-common/components/login/web3/walletconnect.jsx
+++ b/packages/next-common/components/login/web3/walletconnect.jsx
@@ -12,12 +12,12 @@ import qrcode from "qrcode";
 import { useEffect, useState } from "react";
 import { useInterval, useUnmount } from "react-use";
 
-const SIZE = 300;
+const SIZE = 200;
 const REFRESH_QRCODE_INTERVAL = 4 * 60 * 1000; // 4 minutes
 
 function Skeleton() {
   return (
-    <div className="w-full h-full rounded-md bg-gradient-to-r from-neutral200 to-neutral200 " />
+    <div className="w-full h-full rounded-lg bg-gradient-to-r from-neutral300-80 to-neutral300-20 " />
   );
 }
 
@@ -58,7 +58,7 @@ export default function LoginWeb3WalletConnect() {
       .toDataURL(uri, {
         width: SIZE,
         height: SIZE,
-        scale: 6,
+        margin: 0,
       })
       .then(setQrCode);
   }, [uri]);
@@ -96,9 +96,14 @@ export default function LoginWeb3WalletConnect() {
       <WalletGroupTitle>Scan With Your Phone</WalletGroupTitle>
 
       <div className="flex justify-center">
-        <div style={{ width: SIZE, height: SIZE }}>
+        <div
+          className="rounded-xl border border-neutral300"
+          style={{ width: SIZE + 16, height: SIZE + 16 }}
+        >
           {qrCode ? (
-            <img src={qrCode} alt="qrcode" className="rounded-md" />
+            <div className="p-4">
+              <img src={qrCode} alt="qrcode" />
+            </div>
           ) : (
             <Skeleton />
           )}
diff --git a/packages/next-common/styles/dark.js b/packages/next-common/styles/dark.js
index 9b6e8150b4..973a0b315e 100644
--- a/packages/next-common/styles/dark.js
+++ b/packages/next-common/styles/dark.js
@@ -46,6 +46,8 @@ const dark = {
   neutral200: "#1E2130",
   neutral200alpha: "#1E213080",
   neutral300: "#282B3B",
+  "neutral300-80": "rgba(40,43,59,0.8)",
+  "neutral300-20": "rgba(40,43,59,0.2)",
   neutral400: "rgba(54,58,77,1)",
   neutral500: "rgba(87,92,114,1)",
   tooltipBg: "rgba(0,0,0,0.800)",
diff --git a/packages/next-common/styles/light.js b/packages/next-common/styles/light.js
index 24f46352a7..50ca70e8c6 100644
--- a/packages/next-common/styles/light.js
+++ b/packages/next-common/styles/light.js
@@ -44,6 +44,8 @@ const light = {
   neutral200: "rgba(246,247,250,1)",
   neutral200alpha: "rgba(246,247,250,0.5)",
   neutral300: "rgba(235,238,244,1)",
+  "neutral300-80": "rgba(235,238,244,0.8)",
+  "neutral300-20": "rgba(235,238,244,0.2)",
   neutral400: "rgba(224,228,235,1)",
   neutral500: "rgba(194,200,212,1)",
   tooltipBg: "rgba(0,0,0,0.800)",