diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js
--- a/lib/shared/avatar-utils.js
+++ b/lib/shared/avatar-utils.js
@@ -345,6 +345,7 @@
 }
 
 export {
+  defaultAnonymousUserEmojiAvatar,
   defaultEmojiAvatars,
   getRandomDefaultEmojiAvatar,
   getDefaultAvatar,
diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
new file mode 100644
--- /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
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -3,17 +3,65 @@
 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 modalContext = 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={modalContext.popModal}
-    ></Modal>
+    >
+      <div className={css.modalBody}>
+        <div className={css.avatarContainer}>
+          <Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
+        </div>
+      </div>
+    </Modal>
   );
 }