diff --git a/native/account/qr-code-screen.react.js b/native/account/qr-code-screen.react.js
index d22603182..fa36bca2b 100644
--- a/native/account/qr-code-screen.react.js
+++ b/native/account/qr-code-screen.react.js
@@ -1,115 +1,126 @@
 // @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';
 import { qrCodeLinkURL } from 'lib/facts/links.js';
 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';
 
 type QRCodeScreenProps = {
   +navigation: SignInNavigationProp<'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);
+
+  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',
   },
   qrCodeContainer: {
     padding: 5,
     backgroundColor: 'panelForegroundLabel',
+    alignSelf: 'center',
   },
 };
 
 export default QRCodeScreen;
diff --git a/native/account/sign-in-navigator.react.js b/native/account/sign-in-navigator.react.js
index d78a27f32..888245759 100644
--- a/native/account/sign-in-navigator.react.js
+++ b/native/account/sign-in-navigator.react.js
@@ -1,76 +1,60 @@
 // @flow
 
 import type {
   StackNavigationProp,
   StackNavigationHelpers,
 } 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';
 import {
   type ScreenParamList,
   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>;
 
 const SignInStack = createStackNavigator<
   ScreenParamList,
   SignInParamList,
   StackNavigationHelpers<ScreenParamList>,
 >();
 
 type SignInNavigatorProps = {
   +navigation: RootNavigationProp<'SignInNavigator'>,
   ...
 };
 
 // eslint-disable-next-line no-unused-vars
 function SignInNavigator(props: SignInNavigatorProps): React.Node {
-  const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const screenOptions = React.useMemo(
     () => ({
       headerTransparent: true,
       headerBackTitleVisible: false,
       headerTitle: '',
       headerTintColor: colors.panelForegroundLabel,
       headerLeftContainerStyle: {
         paddingLeft: 12,
       },
     }),
     [colors.panelForegroundLabel],
   );
 
   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;