diff --git a/src/common/modal/index.jsx b/src/common/modal/index.jsx
index aa729c690f..2c654f2366 100644
--- a/src/common/modal/index.jsx
+++ b/src/common/modal/index.jsx
@@ -1,11 +1,25 @@
+import { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { GoCheck, GoX } from "react-icons/go";
 
 const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
+  useEffect(() => {
+    const close = (e) => {
+      // e.keyCode is deprecated: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode. So I've used e.key === 'Escape' instead, for better international keyboard support. 
+      if(e.key === 'Escape') {
+        onClose();
+      }
+    }
+    window.addEventListener('keydown', close)
+    return () => window.removeEventListener('keydown', close)
+},[])
+
   if (!show) return null;
+
+
   return ReactDOM.createPortal(
     <>
-      <div className="modal-overlay"></div>
+      <div className="modal-overlay" onClick={ onClose }></div>
       <div className={`modal-${cname}`}>
         <div className={`modal-${cname}-header`}>
           <h2 className="modal-title">{ title }</h2>