diff --git a/native/account/registration/cool-or-nerd-mode-selection.react.js b/native/account/registration/cool-or-nerd-mode-selection.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/cool-or-nerd-mode-selection.react.js
@@ -0,0 +1,125 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+import { Text, 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 type { CoolOrNerdMode } from './registration-types.js';
+import {
+ type NavigationRoute,
+ KeyserverSelectionRouteName,
+} from '../../navigation/route-names.js';
+import { useStyles } from '../../themes/colors.js';
+
+type Props = {
+ +navigation: RegistrationNavigationProp<'CoolOrNerdModeSelection'>,
+ +route: NavigationRoute<'CoolOrNerdModeSelection'>,
+};
+function CoolOrNerdModeSelection(props: Props): React.Node {
+ const [currentSelection, setCurrentSelection] =
+ React.useState();
+ const selectCool = React.useCallback(() => {
+ setCurrentSelection('cool');
+ }, []);
+ const selectNerd = React.useCallback(() => {
+ setCurrentSelection('nerd');
+ }, []);
+
+ const { navigate } = props.navigation;
+ const onSubmit = React.useCallback(() => {
+ invariant(
+ currentSelection,
+ 'Button should be disabled if currentSelection is not set',
+ );
+ navigate<'KeyserverSelection'>({
+ name: KeyserverSelectionRouteName,
+ params: { userSelections: { coolOrNerdMode: currentSelection } },
+ });
+ }, [navigate, currentSelection]);
+
+ const buttonState = currentSelection ? 'enabled' : 'disabled';
+ const styles = useStyles(unboundStyles);
+ return (
+
+
+ To begin, choose your fighter
+
+ Do you want Comm to choose reasonable defaults for you, or do you want
+ to see all the options and make the decisions yourself?
+
+
+ This setting will affect behavior throughout the app, but you can
+ change it later in your settings.
+
+
+
+ 🤓
+ Nerd mode
+
+
+ We present more options and talk through their security and privacy
+ implications in detail.
+
+
+
+
+ 😎
+ Cool mode
+
+
+ We select reasonable defaults for you.
+
+
+
+
+
+ );
+}
+
+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',
+ },
+ emojiIcon: {
+ fontSize: 32,
+ bottom: 1,
+ marginRight: 5,
+ },
+};
+
+export default CoolOrNerdModeSelection;
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
@@ -10,12 +10,19 @@
RegistrationTile,
RegistrationTileHeader,
} from './registration-tile.react.js';
+import type { CoolOrNerdMode } from './registration-types.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';
+export type KeyserverSelectionParams = {
+ +userSelections: {
+ +coolOrNerdMode: CoolOrNerdMode,
+ },
+};
+
type Props = {
+navigation: RegistrationNavigationProp<'KeyserverSelection'>,
+route: NavigationRoute<'KeyserverSelection'>,
diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js
--- a/native/account/registration/registration-navigator.react.js
+++ b/native/account/registration/registration-navigator.react.js
@@ -8,10 +8,12 @@
import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
+import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
import KeyserverSelection from './keyserver-selection.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import {
KeyserverSelectionRouteName,
+ CoolOrNerdModeSelectionRouteName,
type ScreenParamList,
type RegistrationParamList,
} from '../../navigation/route-names.js';
@@ -49,6 +51,10 @@
return (
+