diff --git a/src/components/Modal/Modal.react.js b/src/components/Modal/Modal.react.js
index 5bea30db9d..5df2a7e329 100644
--- a/src/components/Modal/Modal.react.js
+++ b/src/components/Modal/Modal.react.js
@@ -38,7 +38,10 @@ let Modal = (({
   progress = false,
   customFooter,
   textModal = false,
+  resizable = false,
   width,
+  minWidth = 540,
+  maxWidth = 860,
   continueText,
   onContinue,
   showContinue,
@@ -53,6 +56,10 @@ let Modal = (({
     });
   }
 
+  const modalRef = React.useRef(null);
+  const [isResizing, setResizing] = React.useState(false);
+  const [currentWidth, setCurrentWidth] = React.useState(width);
+
   let footer = customFooter || (
     <div style={{textAlign: buttonsInCenter ? 'center' : 'right'}} className={styles.footer}>
       {showCancel ? <Button
@@ -82,9 +89,37 @@ let Modal = (({
     {children}
   </div> : children;
 
+  React.useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (isResizing) {
+        const { x } = modalRef.current.getBoundingClientRect();
+
+        if (e.clientX >= x + minWidth && e.clientX <= x + maxWidth) {
+          setCurrentWidth(e.clientX - x);
+        }
+      }
+    }
+
+    const handleMouseUp = () => {
+      setResizing(false);
+    }
+
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    }
+  }, [isResizing]);
+
+  const handleMouseDown = () => {
+    setResizing(true);
+  }
+
   return (
     <Popover fadeIn={true} fixed={true} position={origin} modal={true} color='rgba(17,13,17,0.8)'>
-      <div className={[styles.modal, styles[type]].join(' ')} style={{ width }}>
+      <div className={[styles.modal, styles[type], isResizing ? styles.noTransition : ''].join(' ')} style={{ width: currentWidth }} ref={modalRef}>
         <div className={styles.header}>
           <div style={{top: React.Children.count(subtitle) === 0 ? '37px' : '25px'}} className={styles.title}>{title}</div>
           <div className={styles.subtitle}>{subtitle}</div>
@@ -95,6 +130,18 @@ let Modal = (({
         </div>
         {wrappedChildren}
         {footer}
+        {resizable && (
+          <svg
+            className={styles.resizeHandle}
+            viewBox="0 0 24 24"
+            onMouseDown={handleMouseDown}
+            >
+            <path
+              fill="#a5a5b4"
+              d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"
+              />
+          </svg>
+        )}
       </div>
     </Popover>
   );
@@ -122,7 +169,10 @@ Modal.propTypes = {
   progress: PropTypes.bool.describe('Passed to the confirm button.'),
   customFooter: PropTypes.node.describe('used to fill any custom footer use case.'),
   textModal: PropTypes.bool.describe('Used for modals that contain only text to pad the text.'),
+  resizable: PropTypes.bool.describe('If true, the modal will be resizable with handle in the bottom right corner'),
   width: PropTypes.number.describe('custom width of modal.'),
+  minWidth: PropTypes.number.describe('minimum width of modal when resizing the width'),
+  maxWidth: PropTypes.number.describe('maximum width of modal when resizing the width'),
   buttonsInCenter: PropTypes.bool.describe('If true, the buttons will appear in the center of the modal, instead of to the right. By default, the buttons appear on the right unless the modal contains no children, in which case they appear in the center.'),
 };
 
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
index e49cbd1b97..f8c4f03d06 100644
--- a/src/components/Modal/Modal.scss
+++ b/src/components/Modal/Modal.scss
@@ -18,6 +18,10 @@
   overflow: hidden;
   transition: width 0.5s cubic-bezier(1, 0, 0, 1);
 
+  &.noTransition {
+    transition: none;
+  }
+
   > *:not(:first-child):not(:last-child) {
     border-color: $borderGrey;
     border-width: 0 0 1px 0;
@@ -99,3 +103,13 @@
 }
 
 @include modalKeyframes();
+
+.resizeHandle {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  user-select: none;
+  cursor: ew-resize;
+}
diff --git a/src/dashboard/Data/Browser/AddColumnDialog.react.js b/src/dashboard/Data/Browser/AddColumnDialog.react.js
index 6b11c174b3..dab0bac832 100644
--- a/src/dashboard/Data/Browser/AddColumnDialog.react.js
+++ b/src/dashboard/Data/Browser/AddColumnDialog.react.js
@@ -194,6 +194,7 @@ export default class AddColumnDialog extends React.Component {
     );
     return (
       <Modal
+        resizable
         type={Modal.Types.INFO}
         icon='ellipses'
         iconSize={30}
diff --git a/src/dashboard/Data/Config/ConfigDialog.react.js b/src/dashboard/Data/Config/ConfigDialog.react.js
index e2778e5fcb..1e3417cb14 100644
--- a/src/dashboard/Data/Config/ConfigDialog.react.js
+++ b/src/dashboard/Data/Config/ConfigDialog.react.js
@@ -197,6 +197,7 @@ export default class ConfigDialog extends React.Component {
     );
     return (
       <Modal
+        resizable
         type={Modal.Types.INFO}
         title={newParam ? 'New parameter' : 'Edit parameter'}
         icon='gear-solid'