diff --git a/ui/src/Components/Modal/index.js b/ui/src/Components/Modal/index.js
index 829f676c7..fa3b99253 100644
--- a/ui/src/Components/Modal/index.js
+++ b/ui/src/Components/Modal/index.js
@@ -14,9 +14,13 @@ import {
 const Modal = observer(
   class Modal extends Component {
     static propTypes = {
+      size: PropTypes.oneOf(["lg", "xl"]),
       isOpen: PropTypes.bool.isRequired,
       children: PropTypes.node.isRequired
     };
+    static defaultProps = {
+      size: "lg"
+    };
 
     constructor(props) {
       super(props);
@@ -47,13 +51,13 @@ const Modal = observer(
     }
 
     render() {
-      const { isOpen, children, ...props } = this.props;
+      const { size, isOpen, children, ...props } = this.props;
 
       return ReactDOM.createPortal(
         <React.Fragment>
           <MountModal in={isOpen} unmountOnExit {...props}>
             <div ref={this.modalRef} className="modal d-block" role="dialog">
-              <div className="modal-dialog modal-lg" role="document">
+              <div className={`modal-dialog modal-${size}`} role="document">
                 <div className="modal-content">{children}</div>
               </div>
             </div>
diff --git a/ui/src/Components/OverviewModal/index.js b/ui/src/Components/OverviewModal/index.js
index 4b22eb0b6..468dc4bff 100644
--- a/ui/src/Components/OverviewModal/index.js
+++ b/ui/src/Components/OverviewModal/index.js
@@ -58,7 +58,7 @@ const OverviewModal = observer(
               </div>
             </Flash>
           </TooltipWrapper>
-          <Modal isOpen={this.toggle.show}>
+          <Modal size="xl" isOpen={this.toggle.show}>
             <React.Suspense
               fallback={
                 <h1 className="display-1 text-secondary p-5 m-auto">