diff --git a/native/account/qr-code-screen.react.js b/native/account/qr-code-screen.react.js
--- a/native/account/qr-code-screen.react.js
+++ b/native/account/qr-code-screen.react.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, useWindowDimensions } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 
 import { useQRAuthContext } from 'lib/components/qr-auth-provider.react.js';
@@ -9,6 +9,8 @@
 import { platformToIdentityDeviceType } from 'lib/types/identity-service-types.js';
 import { getConfig } from 'lib/utils/config.js';
 
+import RegistrationContainer from './registration/registration-container.react.js';
+import RegistrationContentContainer from './registration/registration-content-container.react.js';
 import type { SignInNavigationProp } from './sign-in-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
@@ -37,71 +39,79 @@
   }, [platform, qrData]);
 
   const styles = useStyles(unboundStyles);
+
+  const { width } = useWindowDimensions();
+  const qrCodeSize = width * 0.7;
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.heading}>Log in to Comm</Text>
-      <Text style={styles.headingSubtext}>
-        Open the Comm app on your logged-in phone and scan the QR code below
-      </Text>
-      <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>
+    <RegistrationContainer>
+      <RegistrationContentContainer>
+        <View style={styles.container}>
+          <Text style={styles.heading}>Log in to Comm</Text>
+          <Text style={styles.headingSubtext}>
+            Open the Comm app on your logged-in phone and scan the QR code below
+          </Text>
+          <View style={styles.qrCodeContainer}>
+            <QRCode value={qrCodeURL} size={qrCodeSize} />
+          </View>
+          <View style={styles.instructionsBox}>
+            <Text style={styles.instructionsTitle}>
+              How to find the scanner:
+            </Text>
+            <Text style={styles.instructionsStep}>
+              <Text>{'\u2022 Go to '}</Text>
+              <Text style={styles.instructionsBold}>Profile</Text>
+            </Text>
+            <Text style={styles.instructionsStep}>
+              <Text>{'\u2022 Select '}</Text>
+              <Text style={styles.instructionsBold}>Linked devices </Text>
+            </Text>
+            <Text style={styles.instructionsStep}>
+              <Text>{'\u2022 Click '}</Text>
+              <Text style={styles.instructionsBold}>Add </Text>
+              <Text>on the top right</Text>
+            </Text>
+          </View>
+        </View>
+      </RegistrationContentContainer>
+    </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
-    alignItems: 'center',
-    marginTop: 125,
+    backgroundColor: 'panelBackground',
   },
   heading: {
     fontSize: 24,
     color: 'panelForegroundLabel',
-    paddingBottom: 12,
+    paddingBottom: 16,
   },
   headingSubtext: {
-    fontSize: 12,
-    color: 'panelForegroundLabel',
-    paddingBottom: 30,
-    textAlign: 'center',
-    width: 300,
+    fontFamily: 'Arial',
+    fontSize: 15,
+    lineHeight: 20,
+    color: 'panelForegroundSecondaryLabel',
+    paddingBottom: 32,
   },
   instructionsBox: {
-    alignItems: 'center',
-    width: 300,
-    marginTop: 40,
-    padding: 15,
-    borderColor: 'panelForegroundLabel',
-    borderWidth: 2,
-    borderRadius: 8,
+    alignSelf: 'stretch',
+    marginTop: 32,
   },
   instructionsTitle: {
-    fontSize: 12,
-    color: 'panelForegroundLabel',
+    fontFamily: 'Arial',
+    fontSize: 15,
+    lineHeight: 20,
+    color: 'panelForegroundSecondaryLabel',
     paddingBottom: 15,
   },
   instructionsStep: {
-    fontSize: 12,
+    fontFamily: 'Arial',
+    fontSize: 15,
+    lineHeight: 20,
     padding: 1,
-    color: 'panelForegroundLabel',
+    color: 'panelForegroundTertiaryLabel',
   },
   instructionsBold: {
     fontWeight: 'bold',
@@ -109,6 +119,7 @@
   qrCodeContainer: {
     padding: 5,
     backgroundColor: 'panelForegroundLabel',
+    alignSelf: 'center',
   },
 };
 
diff --git a/native/account/sign-in-navigator.react.js b/native/account/sign-in-navigator.react.js
--- a/native/account/sign-in-navigator.react.js
+++ b/native/account/sign-in-navigator.react.js
@@ -6,7 +6,6 @@
 } from '@react-navigation/core';
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 import QRCodeScreen from './qr-code-screen.react.js';
 import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
@@ -15,9 +14,7 @@
   type SignInParamList,
   QRCodeScreenRouteName,
 } from '../navigation/route-names.js';
-import { useStyles, useColors } from '../themes/colors.js';
-
-const safeAreaEdges = ['bottom'];
+import { useColors } from '../themes/colors.js';
 
 export type SignInNavigationProp<RouteName: $Keys<SignInParamList>> =
   StackNavigationProp<ScreenParamList, RouteName>;
@@ -35,7 +32,6 @@
 
 // eslint-disable-next-line no-unused-vars
 function SignInNavigator(props: SignInNavigatorProps): React.Node {
-  const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const screenOptions = React.useMemo(
@@ -52,25 +48,13 @@
   );
 
   return (
-    <SafeAreaView style={styles.safeArea} edges={safeAreaEdges}>
-      <SignInStack.Navigator screenOptions={screenOptions}>
-        <SignInStack.Screen
-          name={QRCodeScreenRouteName}
-          component={QRCodeScreen}
-        />
-      </SignInStack.Navigator>
-    </SafeAreaView>
+    <SignInStack.Navigator screenOptions={screenOptions}>
+      <SignInStack.Screen
+        name={QRCodeScreenRouteName}
+        component={QRCodeScreen}
+      />
+    </SignInStack.Navigator>
   );
 }
 
-const unboundStyles = {
-  safeArea: {
-    flex: 1,
-    backgroundColor: 'panelBackground',
-  },
-  headerLeftStyle: {
-    paddingLeft: 12,
-  },
-};
-
 export default SignInNavigator;