diff --git a/frontend/components/modals/Modal/Modal.tsx b/frontend/components/modals/Modal/Modal.tsx
index bc56fdec04..2a7c532303 100644
--- a/frontend/components/modals/Modal/Modal.tsx
+++ b/frontend/components/modals/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import classnames from "classnames";
 
 const baseClass = "modal";
@@ -10,28 +10,39 @@ interface IModalProps {
   className?: string;
 }
 
-class Modal extends Component<IModalProps> {
-  render(): JSX.Element {
-    const { children, className, onExit, title } = this.props;
-    const modalContainerClassName = classnames(
-      `${baseClass}__modal_container`,
-      className
-    );
+const Modal = ({ children, onExit, title, className }: IModalProps) => {
+  useEffect(() => {
+    const closeWithEscapeKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onExit();
+      }
+    };
 
-    return (
-      <div className={`${baseClass}__background`}>
-        <div className={modalContainerClassName}>
-          <div className={`${baseClass}__header`}>
-            <span>{title}</span>
-            <div className={`${baseClass}__ex`}>
-              <button className="button button--unstyled" onClick={onExit} />
-            </div>
+    document.addEventListener("keydown", closeWithEscapeKey);
+
+    return () => {
+      document.removeEventListener("keydown", closeWithEscapeKey);
+    };
+  }, []);
+
+  const modalContainerClassName = classnames(
+    `${baseClass}__modal_container`,
+    className
+  );
+
+  return (
+    <div className={`${baseClass}__background`}>
+      <div className={modalContainerClassName}>
+        <div className={`${baseClass}__header`}>
+          <span>{title}</span>
+          <div className={`${baseClass}__ex`}>
+            <button className="button button--unstyled" onClick={onExit} />
           </div>
-          <div className={`${baseClass}__content`}>{children}</div>
         </div>
+        <div className={`${baseClass}__content`}>{children}</div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Modal;