diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
index c79dec547..ea55f6b09 100644
--- a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
+++ b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
@@ -43,7 +43,9 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
         alignItems={ALIGN_ITEMS.CENTER}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >
-        <QRCode value={currentQRCode.toUpperCase()} size={250} />
+        <div style={{ border: '20px solid var(--qr-code-white-background)' }}>
+          <QRCode value={currentQRCode.toUpperCase()} size={250} />
+        </div>
       </Box>
       <Box paddingBottom={4} paddingLeft={4} paddingRight={4}>
         <Typography align={TEXT_ALIGN.CENTER}>
diff --git a/ui/css/utilities/colors.scss b/ui/css/utilities/colors.scss
index fc3bdcd43..2d99683d9 100644
--- a/ui/css/utilities/colors.scss
+++ b/ui/css/utilities/colors.scss
@@ -8,4 +8,8 @@
   --goerli: #3099f2;
   --localhost: #29b6af;
   --flask-purple: #8b45b6;
+
+  // DO NOT CHANGE
+  // Required for the QR reader to work properly
+  --qr-code-white-background: '#fff';
 }