diff --git a/native/qr-code/qr-code-screen.react.js b/native/qr-code/qr-code-screen.react.js
index ab42dea61..798519b9d 100644
--- a/native/qr-code/qr-code-screen.react.js
+++ b/native/qr-code/qr-code-screen.react.js
@@ -1,107 +1,113 @@
 // @flow
 
 import * as React from 'react';
 import { View, Text } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 
 import { useQRAuthContext } from 'lib/components/qr-auth-provider.react.js';
 import { qrCodeLinkURL } from 'lib/facts/links.js';
 import { platformToIdentityDeviceType } from 'lib/types/identity-service-types.js';
 import { getConfig } from 'lib/utils/config.js';
 
 import type { QRCodeSignInNavigationProp } from './qr-code-sign-in-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 
 type QRCodeScreenProps = {
   +navigation: QRCodeSignInNavigationProp<'QRCodeScreen'>,
   +route: NavigationRoute<'QRCodeScreen'>,
 };
 
 // eslint-disable-next-line no-unused-vars
 function QRCodeScreen(props: QRCodeScreenProps): React.Node {
   const { qrData, generateQRCode } = useQRAuthContext();
 
   React.useEffect(() => {
     void generateQRCode();
   }, [generateQRCode]);
 
   const { platform } = getConfig().platformDetails;
   const qrCodeURL = React.useMemo(() => {
     if (!qrData) {
       return undefined;
     }
 
     const deviceType = platformToIdentityDeviceType[platform];
     return qrCodeLinkURL(qrData.aesKey, qrData.deviceID, deviceType);
   }, [platform, qrData]);
 
   const styles = useStyles(unboundStyles);
   return (
     <View style={styles.container}>
       <Text style={styles.heading}>Log in to Comm</Text>
       <Text style={styles.headingSubtext}>
         Open the Comm app on your phone and scan the QR code below
       </Text>
-      <QRCode value={qrCodeURL} size={200} />
+      <View style={styles.qrCodeContainer}>
+        <QRCode value={qrCodeURL} size={200} />
+      </View>
       <View style={styles.instructionsBox}>
         <Text style={styles.instructionsTitle}>How to find the scanner:</Text>
         <Text style={styles.instructionsStep}>
           <Text>Go to </Text>
           <Text style={styles.instructionsBold}>Profile</Text>
         </Text>
         <Text style={styles.instructionsStep}>
           <Text>Select </Text>
           <Text style={styles.instructionsBold}>Linked devices </Text>
         </Text>
         <Text style={styles.instructionsStep}>
           <Text>Click </Text>
           <Text style={styles.instructionsBold}>Add </Text>
           <Text>on the top right</Text>
         </Text>
       </View>
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
     alignItems: 'center',
     marginTop: 125,
   },
   heading: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 12,
   },
   headingSubtext: {
     fontSize: 12,
     color: 'panelForegroundLabel',
     paddingBottom: 30,
   },
   instructionsBox: {
     alignItems: 'center',
     width: 300,
     marginTop: 40,
     padding: 15,
     borderColor: 'panelForegroundLabel',
     borderWidth: 2,
     borderRadius: 8,
   },
   instructionsTitle: {
     fontSize: 12,
     color: 'panelForegroundLabel',
     paddingBottom: 15,
   },
   instructionsStep: {
     fontSize: 12,
     padding: 1,
     color: 'panelForegroundLabel',
   },
   instructionsBold: {
     fontWeight: 'bold',
   },
+  qrCodeContainer: {
+    padding: 5,
+    backgroundColor: 'panelForegroundLabel',
+  },
 };
 
 export default QRCodeScreen;
diff --git a/web/account/qr-code-login.css b/web/account/qr-code-login.css
index 0b7895fc5..7b01eca36 100644
--- a/web/account/qr-code-login.css
+++ b/web/account/qr-code-login.css
@@ -1,45 +1,53 @@
 div.qrContainer {
   display: flex;
   align-items: center;
   flex-direction: column;
   height: 100%;
   background-color: var(--bg);
 }
 
 div.title {
   padding-top: 90px;
   color: var(--label-default-color);
   font-size: var(--xxxl-font-32);
   font-weight: var(--bold);
 }
 
 div.scanInstructions {
   color: var(--label-default-color);
   font-size: var(--l-font-18);
   font-weight: var(--semi-bold);
   padding: 40px;
 }
 
 div.instructionsContainer {
   margin-top: 50px;
   width: 350px;
   border: solid var(--help-color) 2px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
 
 div.instructionsTitle {
   color: var(--help-color);
   font-weight: var(--bold);
   margin: 15px 0;
 }
 
 div.instructionsStep {
   color: var(--label-default-color);
 }
 
 div.instructionsStep:last-of-type {
   margin-bottom: 20px;
 }
+
+div.qrCodeContainer {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--fg);
+}
diff --git a/web/account/qr-code-login.react.js b/web/account/qr-code-login.react.js
index d6303482f..dc17c428a 100644
--- a/web/account/qr-code-login.react.js
+++ b/web/account/qr-code-login.react.js
@@ -1,54 +1,56 @@
 // @flow
 
 import { QRCodeSVG } from 'qrcode.react';
 import * as React from 'react';
 
 import { useQRAuthContext } from 'lib/components/qr-auth-provider.react.js';
 import { qrCodeLinkURL } from 'lib/facts/links.js';
 import { platformToIdentityDeviceType } from 'lib/types/identity-service-types.js';
 import { getConfig } from 'lib/utils/config.js';
 
 import css from './qr-code-login.css';
 
 function QRCodeLogin(): React.Node {
   const { qrData, generateQRCode } = useQRAuthContext();
 
   React.useEffect(() => {
     void generateQRCode();
   }, [generateQRCode]);
 
   const { platform } = getConfig().platformDetails;
   const qrCodeURL = React.useMemo(() => {
     if (!qrData) {
       return undefined;
     }
 
     const identityDeviceType = platformToIdentityDeviceType[platform];
 
     return qrCodeLinkURL(qrData.aesKey, qrData.deviceID, identityDeviceType);
   }, [platform, qrData]);
 
   return (
     <div className={css.qrContainer}>
       <div className={css.title}>Log in to Comm</div>
       <div className={css.scanInstructions}>
         Open the Comm app on your phone and scan the QR code below
       </div>
-      <QRCodeSVG value={qrCodeURL} size={300} marginSize={4} level="L" />
+      <div className={css.qrCodeContainer}>
+        <QRCodeSVG value={qrCodeURL} size={300} marginSize={4} level="L" />
+      </div>
       <div className={css.instructionsContainer}>
         <div className={css.instructionsTitle}>How to find the scanner:</div>
         <div className={css.instructionsStep}>
           Go to <strong>Profile</strong>
         </div>
         <div className={css.instructionsStep}>
           Select <strong>Linked devices</strong>
         </div>
         <div className={css.instructionsStep}>
           Click <strong>Add</strong> on the top right
         </div>
       </div>
     </div>
   );
 }
 
 export default QRCodeLogin;