diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js
index a3988efad..7db0abe7b 100644
--- a/lib/shared/avatar-utils.js
+++ b/lib/shared/avatar-utils.js
@@ -1,356 +1,357 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import stringHash from 'string-hash';
 
 import { selectedThreadColors } from './color-utils.js';
 import { threadOtherMembers } from './thread-utils.js';
 import genesis from '../facts/genesis.js';
 import { useENSAvatar } from '../hooks/ens-cache.js';
 import { threadInfoSelector } from '../selectors/thread-selectors.js';
 import { getETHAddressForUserInfo } from '../shared/account-utils.js';
 import type {
   ClientEmojiAvatar,
   ClientAvatar,
   ResolvedClientAvatar,
   GenericUserInfoWithAvatar,
 } from '../types/avatar-types.js';
 import { threadTypes } from '../types/thread-types-enum.js';
 import { type RawThreadInfo, type ThreadInfo } from '../types/thread-types.js';
 import type { UserInfos } from '../types/user-types.js';
 import { useSelector } from '../utils/redux-utils.js';
 
 const defaultAnonymousUserEmojiAvatar: ClientEmojiAvatar = {
   color: selectedThreadColors[4],
   emoji: '👤',
   type: 'emoji',
 };
 
 const defaultEmojiAvatars: $ReadOnlyArray<ClientEmojiAvatar> = [
   { color: selectedThreadColors[0], emoji: '😀', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '😃', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '😄', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '😁', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '😆', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🙂', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '😉', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '😊', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '😇', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🥰', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '😍', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🤩', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🥳', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '😝', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '😎', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🧐', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🥸', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🤗', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '😤', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🤯', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🤔', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🫡', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🤫', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '😮', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '😲', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🤠', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🤑', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '👩‍🚀', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🥷', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '👻', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '👾', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🤖', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '😺', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '😸', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '😹', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '😻', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🎩', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '👑', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🐶', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🐱', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🐭', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🐹', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🐰', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🐻', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🐼', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🐻‍❄️', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🐨', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🐯', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🦁', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🐸', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🐔', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🐧', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🐦', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🐤', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🦄', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🐝', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🦋', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🐬', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🐳', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🐋', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🦈', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🦭', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🐘', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🦛', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🐐', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🐓', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🦃', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🦩', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🦔', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🐅', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🐆', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🦓', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🦒', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🦘', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🐎', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🐕', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🐩', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🦮', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🐈', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🦚', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🦜', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🦢', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🕊️', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🐇', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🦦', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🐿️', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🐉', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🌴', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🌱', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '☘️', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🍀', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🍄', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🌿', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🪴', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🍁', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '💐', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🌷', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🌹', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🌸', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🌻', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '⭐', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🌟', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🍏', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🍎', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🍐', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🍊', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🍋', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🍓', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🫐', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🍈', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🍒', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🥭', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🍍', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🥝', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🍅', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🥦', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🥕', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🥐', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🥯', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🍞', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🥖', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🥨', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🧀', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🥞', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🧇', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🥓', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🍔', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🍟', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🍕', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🥗', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🍝', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🍜', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🍲', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🍛', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🍣', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🍱', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🥟', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🍤', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🍙', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🍚', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🍥', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🍦', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🧁', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🍭', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🍩', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🍪', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '☕️', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🍵', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '⚽️', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🏀', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🏈', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '⚾️', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🥎', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🎾', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🏐', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🏉', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🎱', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🏆', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🎨', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🎤', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🎧', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🎼', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🎹', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🥁', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🎷', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🎺', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🎸', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🪕', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🎻', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🎲', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '♟️', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🎮', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🚗', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🚙', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🚌', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🏎️', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🛻', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🚚', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🚛', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🚘', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🚀', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🚁', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🛶', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '⛵️', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🚤', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '⚓', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🏰', type: 'emoji' },
   { color: selectedThreadColors[0], emoji: '🎡', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '💎', type: 'emoji' },
   { color: selectedThreadColors[2], emoji: '🔮', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '💈', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🧸', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🎊', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🎉', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🪩', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🚂', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '🚆', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🚊', type: 'emoji' },
   { color: selectedThreadColors[1], emoji: '🛰️', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '🏠', type: 'emoji' },
   { color: selectedThreadColors[3], emoji: '⛰️', type: 'emoji' },
   { color: selectedThreadColors[4], emoji: '🏔️', type: 'emoji' },
   { color: selectedThreadColors[5], emoji: '🗻', type: 'emoji' },
   { color: selectedThreadColors[6], emoji: '🏛️', type: 'emoji' },
   { color: selectedThreadColors[7], emoji: '⛩️', type: 'emoji' },
   { color: selectedThreadColors[8], emoji: '🧲', type: 'emoji' },
   { color: selectedThreadColors[9], emoji: '🎁', type: 'emoji' },
 ];
 
 function getRandomDefaultEmojiAvatar(): ClientEmojiAvatar {
   const randomIndex = Math.floor(Math.random() * defaultEmojiAvatars.length);
   return defaultEmojiAvatars[randomIndex];
 }
 
 function getDefaultAvatar(hashKey: string, color?: string): ClientEmojiAvatar {
   const avatarIndex = stringHash(hashKey) % defaultEmojiAvatars.length;
 
   return {
     ...defaultEmojiAvatars[avatarIndex],
     color: color ? color : defaultEmojiAvatars[avatarIndex].color,
   };
 }
 
 function getAvatarForUser(user: ?GenericUserInfoWithAvatar): ClientAvatar {
   if (user?.avatar) {
     return user.avatar;
   }
 
   if (!user?.username) {
     return defaultAnonymousUserEmojiAvatar;
   }
 
   return getDefaultAvatar(user.username);
 }
 
 function getUserAvatarForThread(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ClientAvatar {
   if (threadInfo.type === threadTypes.PRIVATE) {
     invariant(viewerID, 'viewerID should be set for PRIVATE threads');
     return getAvatarForUser(userInfos[viewerID]);
   }
 
   invariant(
     threadInfo.type === threadTypes.PERSONAL,
     'threadInfo should be a PERSONAL type',
   );
 
   const memberInfos = threadOtherMembers(threadInfo.members, viewerID)
     .map(member => userInfos[member.id] && userInfos[member.id])
     .filter(Boolean);
 
   if (memberInfos.length === 0) {
     return defaultAnonymousUserEmojiAvatar;
   }
 
   return getAvatarForUser(memberInfos[0]);
 }
 
 function getAvatarForThread(
   thread: RawThreadInfo | ThreadInfo,
   containingThreadInfo: ?ThreadInfo,
 ): ClientAvatar {
   if (thread.avatar) {
     return thread.avatar;
   }
 
   if (containingThreadInfo && containingThreadInfo.id !== genesis.id) {
     return containingThreadInfo.avatar
       ? containingThreadInfo.avatar
       : getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color);
   }
 
   return getDefaultAvatar(thread.id, thread.color);
 }
 
 function useAvatarForThread(thread: RawThreadInfo | ThreadInfo): ClientAvatar {
   const containingThreadID = thread.containingThreadID;
   const containingThreadInfo = useSelector(state =>
     containingThreadID ? threadInfoSelector(state)[containingThreadID] : null,
   );
 
   return getAvatarForThread(thread, containingThreadInfo);
 }
 
 function useENSResolvedAvatar(
   avatarInfo: ClientAvatar,
   userInfo: ?GenericUserInfoWithAvatar,
 ): ResolvedClientAvatar {
   const ethAddress = React.useMemo(
     () => getETHAddressForUserInfo(userInfo),
     [userInfo],
   );
 
   const ensAvatarURI = useENSAvatar(ethAddress);
 
   const resolvedAvatar = React.useMemo(() => {
     if (avatarInfo.type !== 'ens') {
       return avatarInfo;
     }
 
     if (ensAvatarURI) {
       return {
         type: 'image',
         uri: ensAvatarURI,
       };
     }
 
     return defaultAnonymousUserEmojiAvatar;
   }, [ensAvatarURI, avatarInfo]);
 
   return resolvedAvatar;
 }
 
 export {
+  defaultAnonymousUserEmojiAvatar,
   defaultEmojiAvatars,
   getRandomDefaultEmojiAvatar,
   getDefaultAvatar,
   getAvatarForUser,
   getUserAvatarForThread,
   getAvatarForThread,
   useAvatarForThread,
   useENSResolvedAvatar,
 };
diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
new file mode 100644
index 000000000..33e98f95d
--- /dev/null
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -0,0 +1,11 @@
+div.modalBody {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+div.avatarContainer {
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+}
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
index 4869312f1..d86478c90 100644
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -1,20 +1,64 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
+import {
+  defaultAnonymousUserEmojiAvatar,
+  getAvatarForUser,
+  getDefaultAvatar,
+} from 'lib/shared/avatar-utils.js';
+import type {
+  ClientAvatar,
+  ClientEmojiAvatar,
+} from 'lib/types/avatar-types.js';
 
+import Avatar from './avatar.react.js';
+import css from './emoji-avatar-selection-modal.css';
 import Modal from '../modals/modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
 
 function EmojiAvatarSelectionModal(): React.Node {
   const { popModal } = useModalContext();
+
+  const currentUserInfo = useSelector(state => state.currentUserInfo);
+  const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
+  const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
+    ? getDefaultAvatar(currentUserInfo.username)
+    : defaultAnonymousUserEmojiAvatar;
+
+  // eslint-disable-next-line no-unused-vars
+  const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
+    currentUserAvatar.type === 'emoji'
+      ? currentUserAvatar.emoji
+      : defaultUserAvatar.emoji,
+  );
+
+  // eslint-disable-next-line no-unused-vars
+  const [pendingAvatarColor, setPendingAvatarColor] = React.useState(
+    currentUserAvatar.type === 'emoji'
+      ? currentUserAvatar.color
+      : defaultUserAvatar.color,
+  );
+
+  const pendingEmojiAvatar: ClientEmojiAvatar = React.useMemo(
+    () => ({
+      type: 'emoji',
+      emoji: pendingAvatarEmoji,
+      color: pendingAvatarColor,
+    }),
+    [pendingAvatarColor, pendingAvatarEmoji],
+  );
+
   return (
-    <Modal
-      name="Emoji avatar selection"
-      size="large"
-      onClose={popModal}
-    ></Modal>
+    <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
+      <div className={css.modalBody}>
+        <div className={css.avatarContainer}>
+          <Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
+        </div>
+      </div>
+    </Modal>
   );
 }
 
 export default EmojiAvatarSelectionModal;