diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -24,10 +24,15 @@
 }
 
 div.modalHeader {
+  display: flex;
+  flex-direction: column;
+  padding: 32px 32px 0 32px;
+}
+
+div.modalHeaderTitle {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 32px 32px 0 32px;
 }
 
 div.modalHeaderCentered {
@@ -43,3 +48,10 @@
   align-items: center;
   column-gap: 8px;
 }
+
+h2.subtitle {
+  font-size: var(--xs-font-12);
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--modal-fg);
+}
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
@@ -15,6 +15,7 @@
 
 export type ModalOverridableProps = {
   +name: string,
+  +subtitle?: string,
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
@@ -33,6 +34,7 @@
     children,
     onClose,
     name,
+    subtitle,
     icon,
     withCloseButton = true,
     modalHeaderCentered = false,
@@ -66,15 +68,22 @@
     return <SWMansionIcon size={24} icon={icon} />;
   }, [icon]);
 
+  let subtitleNode;
+  if (subtitle) {
+    subtitleNode = <h2 className={css.subtitle}>{subtitle}</h2>;
+  }
   return (
     <ModalOverlay onClose={onClose}>
       <div className={modalContainerClasses}>
         <div className={modalHeader}>
-          <h2 className={css.title}>
-            {headerIcon}
-            {name}
-          </h2>
-          {cornerCloseButton}
+          <div className={css.modalHeaderTitle}>
+            <h2 className={css.title}>
+              {headerIcon}
+              {name}
+            </h2>
+            {cornerCloseButton}
+          </div>
+          {subtitleNode}
         </div>
         {children}
       </div>