diff --git a/native/account/registration/avatar-selection.react.js b/native/account/registration/avatar-selection.react.js
--- a/native/account/registration/avatar-selection.react.js
+++ b/native/account/registration/avatar-selection.react.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
 import type { SIWEResult } from 'lib/types/siwe-types.js';
 
@@ -11,6 +11,7 @@
 import RegistrationContentContainer from './registration-content-container.react.js';
 import type { RegistrationNavigationProp } from './registration-navigator.react.js';
 import type { CoolOrNerdMode } from './registration-types.js';
+import EditUserAvatar from '../../avatars/edit-user-avatar.react.js';
 import type { NavigationRoute } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
 
@@ -37,15 +38,37 @@
   +navigation: RegistrationNavigationProp<'AvatarSelection'>,
   +route: NavigationRoute<'AvatarSelection'>,
 };
-// eslint-disable-next-line no-unused-vars
 function AvatarSelection(props: Props): React.Node {
+  const { userSelections } = props.route.params;
+  const { accountSelections } = userSelections;
+  const username =
+    accountSelections.accountType === 'username'
+      ? accountSelections.username
+      : accountSelections.address;
+
+  const [avatarData] = React.useState();
+
   const onProceed = React.useCallback(() => {}, []);
 
+  const clientAvatar = avatarData?.clientAvatar;
+  const userInfoOverride = React.useMemo(
+    () => ({
+      username,
+      avatar: clientAvatar,
+    }),
+    [username, clientAvatar],
+  );
+
   const styles = useStyles(unboundStyles);
   return (
     <RegistrationContainer>
-      <RegistrationContentContainer>
+      <RegistrationContentContainer style={styles.scrollViewContentContainer}>
         <Text style={styles.header}>Pick an avatar</Text>
+        <View style={styles.stagedAvatarSection}>
+          <View style={styles.editUserAvatar}>
+            <EditUserAvatar userInfo={userInfoOverride} disabled={false} />
+          </View>
+        </View>
       </RegistrationContentContainer>
       <RegistrationButtonContainer>
         <RegistrationButton
@@ -59,10 +82,24 @@
 }
 
 const unboundStyles = {
+  scrollViewContentContainer: {
+    paddingHorizontal: 0,
+  },
   header: {
     fontSize: 24,
     color: 'panelForegroundLabel',
     paddingBottom: 16,
+    paddingHorizontal: 16,
+  },
+  stagedAvatarSection: {
+    marginTop: 16,
+    backgroundColor: 'panelForeground',
+    paddingVertical: 24,
+    alignItems: 'center',
+  },
+  editUserAvatar: {
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 };
 
diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js
--- a/native/avatars/edit-user-avatar.react.js
+++ b/native/avatars/edit-user-avatar.react.js
@@ -7,6 +7,7 @@
 
 import { useENSAvatar } from 'lib/hooks/ens-cache.js';
 import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js';
+import type { GenericUserInfoWithAvatar } from 'lib/types/avatar-types.js';
 
 import { useShowAvatarActionSheet } from './avatar-hooks.js';
 import EditAvatarBadge from './edit-avatar-badge.react.js';
@@ -19,14 +20,10 @@
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
-type Props = {
-  +userID: ?string,
-  +disabled?: boolean,
-};
+type Props =
+  | { +userID: ?string, +disabled?: boolean }
+  | { +userInfo: ?GenericUserInfoWithAvatar, +disabled?: boolean };
 function EditUserAvatar(props: Props): React.Node {
-  const styles = useStyles(unboundStyles);
-  const { userID, disabled } = props;
-
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
   const {
@@ -36,9 +33,12 @@
   } = editUserAvatarContext;
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
+  const userInfoProp = props.userInfo;
+  const userInfo: ?GenericUserInfoWithAvatar = userInfoProp ?? currentUserInfo;
+
   const ethAddress = React.useMemo(
-    () => getETHAddressForUserInfo(currentUserInfo),
-    [currentUserInfo],
+    () => getETHAddressForUserInfo(userInfo),
+    [userInfo],
   );
   const ensAvatarURI = useENSAvatar(ethAddress);
 
@@ -60,6 +60,7 @@
     setUserAvatar({ type: 'remove' });
   }, [setUserAvatar]);
 
+  const hasCurrentAvatar = !!userInfo?.avatar;
   const actionSheetConfig = React.useMemo(() => {
     const configOptions = [
       { id: 'emoji', onPress: navigateToUserEmojiAvatarCreation },
@@ -71,13 +72,13 @@
       configOptions.push({ id: 'ens', onPress: setENSUserAvatar });
     }
 
-    if (currentUserInfo?.avatar) {
+    if (hasCurrentAvatar) {
       configOptions.push({ id: 'remove', onPress: removeUserAvatar });
     }
 
     return configOptions;
   }, [
-    currentUserInfo?.avatar,
+    hasCurrentAvatar,
     ensAvatarURI,
     navigateToCamera,
     navigateToUserEmojiAvatarCreation,
@@ -88,6 +89,8 @@
 
   const showAvatarActionSheet = useShowAvatarActionSheet(actionSheetConfig);
 
+  const styles = useStyles(unboundStyles);
+
   let spinner;
   if (userAvatarSaveInProgress) {
     spinner = (
@@ -97,9 +100,17 @@
     );
   }
 
+  const { userID } = props;
+  const userAvatar = userID ? (
+    <UserAvatar userID={userID} size="profile" />
+  ) : (
+    <UserAvatar userInfo={userInfo} size="profile" />
+  );
+
+  const { disabled } = props;
   return (
     <TouchableOpacity onPress={showAvatarActionSheet} disabled={disabled}>
-      <UserAvatar userID={userID} size="profile" />
+      {userAvatar}
       {spinner}
       {!disabled ? <EditAvatarBadge /> : null}
     </TouchableOpacity>
diff --git a/native/avatars/user-avatar.react.js b/native/avatars/user-avatar.react.js
--- a/native/avatars/user-avatar.react.js
+++ b/native/avatars/user-avatar.react.js
@@ -6,21 +6,21 @@
   getAvatarForUser,
   useENSResolvedAvatar,
 } from 'lib/shared/avatar-utils.js';
+import type { GenericUserInfoWithAvatar } from 'lib/types/avatar-types.js';
 
 import Avatar from './avatar.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
-type Props = {
-  +userID: ?string,
-  +size: 'micro' | 'small' | 'large' | 'profile',
-};
-
+type Size = 'micro' | 'small' | 'large' | 'profile';
+type Props =
+  | { +userID: ?string, +size: Size }
+  | { +userInfo: ?GenericUserInfoWithAvatar, +size: Size };
 function UserAvatar(props: Props): React.Node {
-  const { userID, size } = props;
+  const { userID, userInfo: userInfoProp, size } = props;
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const userInfo = useSelector(state =>
-    userID ? state.userStore.userInfos[userID] : null,
+    userID ? state.userStore.userInfos[userID] : userInfoProp,
   );
 
   const avatarUserInfo =