diff --git a/native/qr-code/qr-code-screen.react.js b/native/qr-code/qr-code-screen.react.js
--- a/native/qr-code/qr-code-screen.react.js
+++ b/native/qr-code/qr-code-screen.react.js
@@ -43,7 +43,9 @@
       <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}>
@@ -102,6 +104,10 @@
   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
--- a/web/account/qr-code-login.css
+++ b/web/account/qr-code-login.css
@@ -43,3 +43,11 @@
 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
--- a/web/account/qr-code-login.react.js
+++ b/web/account/qr-code-login.react.js
@@ -34,7 +34,9 @@
       <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}>