diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -15,11 +15,18 @@
   width: 500px;
 }
 
-.modalClose {
+.modalHeaderButtonsContainer {
+  margin-left: 24px;
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+}
+
+.modalButton {
   color: var(--modal-close-color);
 }
 
-.modalClose:hover {
+.modalButton:hover {
   color: var(--modal-close-color-hover);
 }
 
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -14,13 +14,14 @@
 export type ModalSize = 'small' | 'large' | 'fit-content';
 
 export type ModalOverridableProps = {
-  +name: string,
+  +name?: string,
   +subtitle?: string,
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
   +size?: ModalSize,
   +modalHeaderCentered?: boolean,
+  +secondaryHeaderButton?: React.Node,
 };
 
 type ModalProps = {
@@ -38,6 +39,7 @@
     icon,
     withCloseButton = true,
     modalHeaderCentered = false,
+    secondaryHeaderButton,
   } = props;
 
   const modalContainerClasses = classNames(css.modalContainer, {
@@ -50,16 +52,27 @@
     [css.modalHeaderCentered]: modalHeaderCentered,
   });
 
-  const cornerCloseButton = React.useMemo(() => {
-    if (!withCloseButton) {
+  const headerButtons = React.useMemo(() => {
+    if (!withCloseButton && !secondaryHeaderButton) {
       return null;
     }
+
+    let closeButton;
+    if (withCloseButton) {
+      closeButton = (
+        <Button className={css.modalButton} onClick={onClose}>
+          <SWMansionIcon size={24} icon="cross" />
+        </Button>
+      );
+    }
+
     return (
-      <Button className={css.modalClose} onClick={onClose}>
-        <SWMansionIcon size={24} icon="cross" />
-      </Button>
+      <div className={css.modalHeaderButtonsContainer}>
+        <div className={css.modalButton}>{secondaryHeaderButton}</div>
+        {closeButton}
+      </div>
     );
-  }, [onClose, withCloseButton]);
+  }, [onClose, secondaryHeaderButton, withCloseButton]);
 
   const headerIcon = React.useMemo(() => {
     if (!icon) {
@@ -81,7 +94,7 @@
               {headerIcon}
               {name}
             </h2>
-            {cornerCloseButton}
+            {headerButtons}
           </div>
           {subtitleNode}
         </div>
diff --git a/web/modals/user-profile/user-profile-modal.react.js b/web/modals/user-profile/user-profile-modal.react.js
--- a/web/modals/user-profile/user-profile-modal.react.js
+++ b/web/modals/user-profile/user-profile-modal.react.js
@@ -23,7 +23,7 @@
   );
 
   return (
-    <Modal size="fit-content" onClose={popModal} name="">
+    <Modal size="fit-content" onClose={popModal}>
       <UserProfile userInfo={userInfo} />
     </Modal>
   );