diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -2,20 +2,15 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 594px;
 }
 
 /* https://github.com/missive/emoji-mart/discussions/663 */
 em-emoji-picker {
-  max-height: 300px;
-}
-
-div.modalBody {
-  padding: 20px;
+  max-height: 324px;
 }
 
 div.tabBody {
-  height: 300px;
+  height: 324px;
   padding-top: 20px;
   display: flex;
   justify-content: center;
@@ -25,7 +20,6 @@
 div.avatarContainer {
   display: flex;
   justify-content: center;
-  padding-top: 20px;
 }
 
 div.emojiPickerContainer {
@@ -34,11 +28,6 @@
   align-items: center;
 }
 
-div.saveButtonContainer {
-  display: flex;
-  flex-direction: column;
-}
-
 div.saveAvatarButtonContent {
   display: flex;
   justify-content: center;
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
@@ -114,15 +114,38 @@
 
   const [currentTabType, setCurrentTabType] = React.useState<TabType>('emoji');
 
-  const tabs = React.useMemo(
+  const subheader = React.useMemo(
     () => (
-      <Tabs
-        tabItems={tabsData}
-        activeTab={currentTabType}
-        setTab={setCurrentTabType}
-      />
+      <>
+        <div className={css.avatarContainer}>
+          <Avatar
+            avatarInfo={pendingEmojiAvatar}
+            size="XL"
+            showSpinner={avatarSaveInProgress}
+          />
+        </div>
+        <Tabs
+          tabItems={tabsData}
+          activeTab={currentTabType}
+          setTab={setCurrentTabType}
+        />
+      </>
+    ),
+    [avatarSaveInProgress, currentTabType, pendingEmojiAvatar],
+  );
+
+  const saveButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        buttonColor={buttonColor}
+        onClick={onSaveAvatar}
+        disabled={avatarSaveInProgress}
+      >
+        <div className={css.saveAvatarButtonContent}>{saveButtonContent}</div>
+      </Button>
     ),
-    [currentTabType],
+    [avatarSaveInProgress, buttonColor, onSaveAvatar, saveButtonContent],
   );
 
   const tabContent = React.useMemo(() => {
@@ -149,35 +172,17 @@
         />
       </div>
     );
-  }, [currentTabType, onEmojiSelect, onColorSelection, pendingAvatarColor]);
+  }, [currentTabType, onColorSelection, onEmojiSelect, pendingAvatarColor]);
 
   return (
-    <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
-      <div className={css.modalContainer}>
-        <div className={css.avatarContainer}>
-          <Avatar
-            avatarInfo={pendingEmojiAvatar}
-            size="XL"
-            showSpinner={avatarSaveInProgress}
-          />
-        </div>
-        {tabs}
-        {tabContent}
-        <div className={css.modalBody}>
-          <div className={css.saveButtonContainer}>
-            <Button
-              variant="filled"
-              buttonColor={buttonColor}
-              onClick={onSaveAvatar}
-              disabled={avatarSaveInProgress}
-            >
-              <div className={css.saveAvatarButtonContent}>
-                {saveButtonContent}
-              </div>
-            </Button>
-          </div>
-        </div>
-      </div>
+    <Modal
+      name="Emoji avatar selection"
+      size="large"
+      onClose={popModal}
+      subheader={subheader}
+      primaryButton={saveButton}
+    >
+      <div className={css.modalContainer}>{tabContent}</div>
     </Modal>
   );
 }