diff --git a/components/brave_sync/ui/components/modals/viewSyncCode.tsx b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
index c8f0b3e03808..15e59a27e3e0 100644
--- a/components/brave_sync/ui/components/modals/viewSyncCode.tsx
+++ b/components/brave_sync/ui/components/modals/viewSyncCode.tsx
@@ -37,10 +37,6 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
     return (
       <Modal id='viewSyncCodeModal' onClose={onClose} size='small'>
         <ViewSyncCodeGrid>
-          <div style={{ textAlign: 'center' }}>
-            <ModalTitle level={3}>{getLocale('qrCode')}</ModalTitle>
-            <QRCode size='small' src={syncData.seedQRImageSource} />
-          </div>
           <div>
             <ModalTitle level={3}>{getLocale('wordCode')}</ModalTitle>
             <TextAreaClipboard
@@ -50,6 +46,17 @@ export default class ViewSyncCodeModal extends React.PureComponent<Props, {}> {
               defaultValue={syncData.syncWords}
             />
           </div>
+          <div>
+            <ModalTitle level={3}>{getLocale('qrCode')}</ModalTitle>
+            <QRCode
+              size='small'
+              src={syncData.seedQRImageSource}
+              style={{
+                // TODO: @cezaraugusto fix this in brave-ui
+                border: '1px solid #DFDFE8'
+              }}
+            />
+          </div>
         </ViewSyncCodeGrid>
         <TwoColumnButtonGrid>
           <div>{getLocale('privateKey')}</div>