diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
index ee308f7da..07deed61d 100644
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -1,97 +1,113 @@
 // @flow
 
 import * as React from 'react';
 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, 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 [currentSelection, setCurrentSelection] = React.useState<?Selection>();
+  const selectAshoat = React.useCallback(() => {
+    setCurrentSelection('ashoat');
+  }, []);
+  const selectCustom = React.useCallback(() => {
+    setCurrentSelection('custom');
+  }, []);
+
   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>
+      <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>
+      <RegistrationTile
+        selected={currentSelection === 'custom'}
+        onSelect={selectCustom}
+      >
         <RegistrationTileHeader>
           <Text style={styles.tileTitleText}>Enter a keyserver</Text>
         </RegistrationTileHeader>
         <TextInput
           style={styles.keyserverInput}
           placeholderTextColor={colors.panelSecondaryForegroundBorder}
           placeholder="Keyserver"
         />
       </RegistrationTile>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   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-tile.react.js b/native/account/registration/registration-tile.react.js
index 92a38832a..965c3880e 100644
--- a/native/account/registration/registration-tile.react.js
+++ b/native/account/registration/registration-tile.react.js
@@ -1,76 +1,131 @@
 // @flow
 
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 
 import { useStyles } from '../../themes/colors.js';
 
+type RegistrationTileContextType = { +selected: boolean };
+const defaultRegistrationTileContext = { selected: false };
+const RegistrationTileContext =
+  React.createContext<RegistrationTileContextType>(
+    defaultRegistrationTileContext,
+  );
+
 type TileProps = {
   +children: React.Node,
+  +selected: boolean,
+  +onSelect: () => mixed,
 };
 function RegistrationTile(props: TileProps): React.Node {
-  const { children } = props;
+  const { children, selected, onSelect } = 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 registrationTileContext = React.useMemo(
+    () => ({ selected }),
+    [selected],
+  );
+
   const styles = useStyles(unboundStyles);
+  const tileStyle = React.useMemo(
+    () => (selected ? [styles.tile, styles.selectedTile] : styles.tile),
+    [styles, selected],
+  );
+
   return (
-    <View style={styles.tile}>
-      {header}
-      {body}
-    </View>
+    <RegistrationTileContext.Provider value={registrationTileContext}>
+      <TouchableOpacity
+        onPress={onSelect}
+        activeOpacity={0.6}
+        style={tileStyle}
+      >
+        {header}
+        {body}
+      </TouchableOpacity>
+    </RegistrationTileContext.Provider>
   );
 }
 
 type HeaderProps = {
   +children: React.Node,
 };
 function RegistrationTileHeader(props: HeaderProps): React.Node {
   const { children } = props;
+  const { selected } = React.useContext(RegistrationTileContext);
 
   const styles = useStyles(unboundStyles);
+  const tileRadioStyle = React.useMemo(
+    () =>
+      selected
+        ? [styles.tileRadio, styles.selectedTileRadio]
+        : styles.tileRadio,
+    [styles, selected],
+  );
+  const tileRadioInnerStyle = React.useMemo(
+    () => (selected ? styles.tileRadioInner : undefined),
+    [styles, selected],
+  );
+
   return (
     <View style={styles.tileTitle}>
       {children}
-      <View style={styles.tileRadio} />
+      <View style={tileRadioStyle}>
+        <View style={tileRadioInnerStyle} />
+      </View>
     </View>
   );
 }
 
 const unboundStyles = {
   tile: {
-    backgroundColor: 'panelForeground',
     paddingHorizontal: 16,
     paddingVertical: 20,
     borderRadius: 8,
     marginTop: 24,
+    borderWidth: 1,
+    backgroundColor: 'panelForeground',
+  },
+  selectedTile: {
+    borderColor: 'panelForegroundLabel',
   },
   tileTitle: {
     paddingBottom: 16,
     flexDirection: 'row',
     alignItems: 'center',
   },
   tileRadio: {
     borderColor: 'panelSecondaryForegroundBorder',
     borderWidth: 1,
     height: 24,
     width: 24,
     borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileRadioInner: {
+    backgroundColor: 'panelForegroundLabel',
+    height: 16,
+    width: 16,
+    borderRadius: 8,
+  },
+  selectedTileRadio: {
+    borderColor: 'panelForegroundLabel',
   },
 };
 
 export { RegistrationTile, RegistrationTileHeader };