diff --git a/web/modals/modal.css b/web/modals/modal.css
index 99d335dd4..7ee81ecb7 100644
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -1,45 +1,57 @@
 div.modalContainer {
   display: flex;
   background-color: var(--modal-bg);
   border-radius: 8px;
   flex-direction: column;
   margin: 20px;
   overflow: hidden;
 }
 
 div.modalContainerSmall {
   width: 330px;
 }
 
 div.modalContainerLarge {
   width: 500px;
 }
 
 .modalClose {
   color: var(--modal-close-color);
 }
 
 .modalClose:hover {
   color: var(--modal-close-color-hover);
 }
 
 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 {
   justify-content: center;
 }
 
 h2.title {
   font-size: 20px;
   font-weight: 500;
   line-height: 32px;
   color: var(--fg);
   display: flex;
   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
index c893436a1..51ba0ef7e 100644
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -1,85 +1,94 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import ModalOverlay from 'lib/components/modal-overlay.react.js';
 import SWMansionIcon, {
   type Icon,
 } from 'lib/components/SWMansionIcon.react.js';
 
 import css from './modal.css';
 import Button from '../components/button.react.js';
 
 export type ModalSize = 'small' | 'large' | 'fit-content';
 
 export type ModalOverridableProps = {
   +name: string,
+  +subtitle?: string,
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
   +size?: ModalSize,
   +modalHeaderCentered?: boolean,
 };
 
 type ModalProps = {
   ...ModalOverridableProps,
   +children?: React.Node,
 };
 
 function Modal(props: ModalProps): React.Node {
   const {
     size = 'small',
     children,
     onClose,
     name,
+    subtitle,
     icon,
     withCloseButton = true,
     modalHeaderCentered = false,
   } = props;
 
   const modalContainerClasses = classNames(css.modalContainer, {
     [css.modalContainerLarge]: size === 'large',
     [css.modalContainerSmall]: size === 'small',
   });
 
   const modalHeader = classNames({
     [css.modalHeader]: true,
     [css.modalHeaderCentered]: modalHeaderCentered,
   });
 
   const cornerCloseButton = React.useMemo(() => {
     if (!withCloseButton) {
       return null;
     }
     return (
       <Button className={css.modalClose} onClick={onClose}>
         <SWMansionIcon size={24} icon="cross" />
       </Button>
     );
   }, [onClose, withCloseButton]);
 
   const headerIcon = React.useMemo(() => {
     if (!icon) {
       return null;
     }
     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>
     </ModalOverlay>
   );
 }
 
 export default Modal;