diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -1,12 +1,17 @@
 // @flow
 
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, TextInput } from 'react-native';
 
 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 } from '../../themes/colors.js';
+import { useStyles, useColors } from '../../themes/colors.js';
 
 type Props = {
   +navigation: RegistrationNavigationProp<'KeyserverSelection'>,
@@ -15,17 +20,77 @@
 // eslint-disable-next-line no-unused-vars
 function KeyserverSelection(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
+  const colors = useColors();
   return (
     <RegistrationContainer>
-      <Text style={styles.testText}>Test Hello Test</Text>
+      <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>
+        <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>
+        <RegistrationTileHeader>
+          <Text style={styles.tileTitleText}>Enter a keyserver</Text>
+        </RegistrationTileHeader>
+        <TextInput
+          style={styles.keyserverInput}
+          placeholderTextColor={colors.panelSecondaryForegroundBorder}
+          placeholder="Keyserver"
+        />
+      </RegistrationTile>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
-  testText: {
+  header: {
     fontSize: 24,
-    color: 'white',
+    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,
   },
 };
 
diff --git a/native/account/registration/registration-tile.react.js b/native/account/registration/registration-tile.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/registration-tile.react.js
@@ -0,0 +1,76 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useStyles } from '../../themes/colors.js';
+
+type TileProps = {
+  +children: React.Node,
+};
+function RegistrationTile(props: TileProps): React.Node {
+  const { children } = props;
+
+  const [body, header] = React.useMemo(() => {
+    let registrationBody = children;
+    let registrationHeader;
+    if (Array.isArray(children)) {
+      registrationBody = [];
+      for (const child of children) {
+        if (child.type.name === RegistrationTileHeader.name) {
+          registrationHeader = React.cloneElement(child);
+        } else {
+          registrationBody.push(child);
+        }
+      }
+    }
+    return [registrationBody, registrationHeader];
+  }, [children]);
+
+  const styles = useStyles(unboundStyles);
+  return (
+    <View style={styles.tile}>
+      {header}
+      {body}
+    </View>
+  );
+}
+
+type HeaderProps = {
+  +children: React.Node,
+};
+function RegistrationTileHeader(props: HeaderProps): React.Node {
+  const { children } = props;
+
+  const styles = useStyles(unboundStyles);
+  return (
+    <View style={styles.tileTitle}>
+      {children}
+      <View style={styles.tileRadio} />
+    </View>
+  );
+}
+
+const unboundStyles = {
+  tile: {
+    backgroundColor: 'panelForeground',
+    paddingHorizontal: 16,
+    paddingVertical: 20,
+    borderRadius: 8,
+    marginTop: 24,
+  },
+  tileTitle: {
+    paddingBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tileRadio: {
+    borderColor: 'panelSecondaryForegroundBorder',
+    borderWidth: 1,
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+  },
+};
+
+export { RegistrationTile, RegistrationTileHeader };