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
@@ -103,8 +103,27 @@
 
   const [currentTabType, setCurrentTabType] = React.useState<TabType>('emoji');
 
+  const saveButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        buttonColor={buttonColor}
+        onClick={onSaveAvatar}
+        disabled={avatarSaveInProgress}
+      >
+        <div className={css.saveAvatarButtonContent}>{saveButtonContent}</div>
+      </Button>
+    ),
+    [avatarSaveInProgress, buttonColor, onSaveAvatar, saveButtonContent],
+  );
+
   return (
-    <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
+    <Modal
+      name="Emoji avatar selection"
+      size="large"
+      onClose={popModal}
+      primaryButton={saveButton}
+    >
       <div className={css.modalContainer}>
         <div className={css.avatarContainer}>
           <Avatar
@@ -136,20 +155,6 @@
             </div>
           </Tabs.Item>
         </Tabs.Container>
-        <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>
   );