diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
index a463ba658..ef038048f 100644
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -1,132 +1,139 @@
 // @flow
 
 import * as React from 'react';
-import { Text, TextInput } from 'react-native';
+import { Text, TextInput, View } from 'react-native';
 
 import RegistrationButton from './registration-button.react.js';
 import RegistrationContainer from './registration-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import {
   RegistrationTile,
   RegistrationTileHeader,
 } from './registration-tile.react.js';
 import CommIcon from '../../components/comm-icon.react.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useStyles, useColors } from '../../themes/colors.js';
 
 type Selection = 'ashoat' | 'custom';
 
 type Props = {
   +navigation: RegistrationNavigationProp<'KeyserverSelection'>,
   +route: NavigationRoute<'KeyserverSelection'>,
 };
 // eslint-disable-next-line no-unused-vars
 function KeyserverSelection(props: Props): React.Node {
   const [customKeyserver, setCustomKeyserver] = React.useState('');
   const customKeyserverTextInputRef = React.useRef();
 
   const [currentSelection, setCurrentSelection] = React.useState<?Selection>();
   const selectAshoat = React.useCallback(() => {
     setCurrentSelection('ashoat');
     customKeyserverTextInputRef.current?.blur();
   }, []);
   const customKeyserverEmpty = !customKeyserver;
   const selectCustom = React.useCallback(() => {
     setCurrentSelection('custom');
     if (customKeyserverEmpty) {
       customKeyserverTextInputRef.current?.focus();
     }
   }, [customKeyserverEmpty]);
   const onCustomKeyserverFocus = React.useCallback(() => {
     setCurrentSelection('custom');
   }, []);
 
   const onSubmit = React.useCallback(() => {}, []);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   return (
-    <RegistrationContainer>
-      <Text style={styles.header}>Select a keyserver to join</Text>
-      <Text style={styles.body}>
-        Chat communities on Comm are hosted on keyservers, which are
-        user-operated backends.
-      </Text>
-      <Text style={styles.body}>
-        Keyservers allow Comm to offer strong privacy guarantees without
-        sacrificing functionality.
-      </Text>
-      <RegistrationTile
-        selected={currentSelection === 'ashoat'}
-        onSelect={selectAshoat}
-      >
-        <RegistrationTileHeader>
-          <CommIcon
-            name="cloud-filled"
-            size={16}
-            color={colors.panelForegroundLabel}
-            style={styles.cloud}
-          />
-          <Text style={styles.tileTitleText}>ashoat</Text>
-        </RegistrationTileHeader>
-        <Text style={styles.tileBody}>
-          Ashoat is Comm’s founder, and his keyserver currently hosts most of
-          the communities on Comm.
+    <View style={styles.container}>
+      <RegistrationContainer>
+        <Text style={styles.header}>Select a keyserver to join</Text>
+        <Text style={styles.body}>
+          Chat communities on Comm are hosted on keyservers, which are
+          user-operated backends.
+        </Text>
+        <Text style={styles.body}>
+          Keyservers allow Comm to offer strong privacy guarantees without
+          sacrificing functionality.
         </Text>
-      </RegistrationTile>
-      <RegistrationTile
-        selected={currentSelection === 'custom'}
-        onSelect={selectCustom}
-      >
-        <RegistrationTileHeader>
-          <Text style={styles.tileTitleText}>Enter a keyserver</Text>
-        </RegistrationTileHeader>
-        <TextInput
-          value={customKeyserver}
-          onChangeText={setCustomKeyserver}
-          style={styles.keyserverInput}
-          placeholderTextColor={colors.panelSecondaryForegroundBorder}
-          placeholder="Keyserver"
-          onFocus={onCustomKeyserverFocus}
-          ref={customKeyserverTextInputRef}
-        />
-      </RegistrationTile>
+        <RegistrationTile
+          selected={currentSelection === 'ashoat'}
+          onSelect={selectAshoat}
+        >
+          <RegistrationTileHeader>
+            <CommIcon
+              name="cloud-filled"
+              size={16}
+              color={colors.panelForegroundLabel}
+              style={styles.cloud}
+            />
+            <Text style={styles.tileTitleText}>ashoat</Text>
+          </RegistrationTileHeader>
+          <Text style={styles.tileBody}>
+            Ashoat is Comm’s founder, and his keyserver currently hosts most of
+            the communities on Comm.
+          </Text>
+        </RegistrationTile>
+        <RegistrationTile
+          selected={currentSelection === 'custom'}
+          onSelect={selectCustom}
+        >
+          <RegistrationTileHeader>
+            <Text style={styles.tileTitleText}>Enter a keyserver</Text>
+          </RegistrationTileHeader>
+          <TextInput
+            value={customKeyserver}
+            onChangeText={setCustomKeyserver}
+            style={styles.keyserverInput}
+            placeholderTextColor={colors.panelSecondaryForegroundBorder}
+            placeholder="Keyserver"
+            onFocus={onCustomKeyserverFocus}
+            ref={customKeyserverTextInputRef}
+          />
+        </RegistrationTile>
+      </RegistrationContainer>
       <RegistrationButton onPress={onSubmit} label="Next" />
-    </RegistrationContainer>
+    </View>
   );
 }
 
 const unboundStyles = {
+  container: {
+    backgroundColor: 'panelBackground',
+    justifyContent: 'space-between',
+    flex: 1,
+  },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
   },
   body: {
     fontSize: 15,
     lineHeight: 20,
     color: 'panelForegroundSecondaryLabel',
     paddingBottom: 16,
   },
   tileTitleText: {
     flex: 1,
     fontSize: 18,
     color: 'panelForegroundLabel',
   },
   tileBody: {
     fontSize: 13,
     color: 'panelForegroundSecondaryLabel',
   },
   cloud: {
     marginRight: 8,
   },
   keyserverInput: {
     color: 'panelForegroundLabel',
     borderColor: 'panelSecondaryForegroundBorder',
     borderWidth: 1,
     borderRadius: 4,
     padding: 12,
   },
 };
 
 export default KeyserverSelection;
diff --git a/native/account/registration/registration-button.react.js b/native/account/registration/registration-button.react.js
index 770458c8f..ec67ca0f9 100644
--- a/native/account/registration/registration-button.react.js
+++ b/native/account/registration/registration-button.react.js
@@ -1,36 +1,37 @@
 // @flow
 
 import * as React from 'react';
 import { Text } from 'react-native';
 
 import Button from '../../components/button.react.js';
 import { useStyles } from '../../themes/colors.js';
 
 type Props = {
   +onPress: () => mixed,
   +label: string,
 };
 function RegistrationButton(props: Props): React.Node {
   const { onPress, label } = props;
   const styles = useStyles(unboundStyles);
   return (
     <Button onPress={onPress} iosActiveOpacity={0.6} style={styles.button}>
       <Text style={styles.buttonText}>{label}</Text>
     </Button>
   );
 }
 
 const unboundStyles = {
   button: {
     backgroundColor: 'purpleButton',
     borderRadius: 8,
+    margin: 16,
   },
   buttonText: {
     fontSize: 18,
     color: 'panelForegroundLabel',
     textAlign: 'center',
     padding: 12,
   },
 };
 
 export default RegistrationButton;
diff --git a/native/account/registration/registration-container.react.js b/native/account/registration/registration-container.react.js
index 602b494d2..6e7821df1 100644
--- a/native/account/registration/registration-container.react.js
+++ b/native/account/registration/registration-container.react.js
@@ -1,44 +1,54 @@
 // @flow
 
 import { useHeaderHeight } from '@react-navigation/elements';
 import * as React from 'react';
 import { ScrollView } from 'react-native';
 
 import KeyboardAvoidingView from '../../components/keyboard-avoiding-view.react.js';
 import { useStyles } from '../../themes/colors.js';
 
+type ViewProps = React.ElementConfig<typeof ScrollView>;
 type Props = {
+  ...ViewProps,
   +children: React.Node,
 };
 function RegistrationContainer(props: Props): React.Node {
+  const { children, style, ...rest } = props;
+
   const headerHeight = useHeaderHeight();
   const backgroundStyle = React.useMemo(
     () => ({
       marginTop: headerHeight,
     }),
     [headerHeight],
   );
 
   const styles = useStyles(unboundStyles);
+  const contentContainerStyle = React.useMemo(
+    () => [styles.scrollViewContentContainer, style],
+    [styles.scrollViewContentContainer, style],
+  );
+
   return (
     <KeyboardAvoidingView behavior="padding" style={styles.fill}>
       <ScrollView
-        contentContainerStyle={styles.scrollViewContentContainer}
+        contentContainerStyle={contentContainerStyle}
         style={backgroundStyle}
+        {...rest}
       >
-        {props.children}
+        {children}
       </ScrollView>
     </KeyboardAvoidingView>
   );
 }
 
 const unboundStyles = {
   fill: {
     flex: 1,
   },
   scrollViewContentContainer: {
     padding: 16,
   },
 };
 
 export default RegistrationContainer;