diff --git a/src/context/modals/components/MFAEnableTOTP.tsx b/src/context/modals/components/MFAEnableTOTP.tsx
index 68e5ca84..0e18ef74 100644
--- a/src/context/modals/components/MFAEnableTOTP.tsx
+++ b/src/context/modals/components/MFAEnableTOTP.tsx
@@ -12,6 +12,17 @@ const Code = styled.code`
     user-select: all;
 `;
 
+const Qr = styled.div`
+    border-radius: 4px;
+    background: white;
+
+    width: 140px;
+    height: 140px;
+
+    display: grid;
+    place-items: center;
+`;
+
 /**
  * TOTP enable modal
  */
@@ -53,11 +64,13 @@ export default function MFAEnableTOTP({
             }}>
             <Column>
                 <Centred>
-                    <QRCodeSVG
-                        value={uri}
-                        bgColor="transparent"
-                        fgColor="var(--foreground)"
-                    />
+                    <Qr>
+                        <QRCodeSVG
+                            value={uri}
+                            bgColor="white"
+                            fgColor="black"
+                        />
+                    </Qr>
                 </Centred>
                 <Centred>
                     <Code>{secret}</Code>