diff --git a/packages/app/src/Element/Modal.tsx b/packages/app/src/Element/Modal.tsx
index 576f9cca..d67b3598 100644
--- a/packages/app/src/Element/Modal.tsx
+++ b/packages/app/src/Element/Modal.tsx
@@ -4,14 +4,25 @@ import { ReactNode, useEffect } from "react";
 export interface ModalProps {
   id: string;
   className?: string;
-  onClose?: (e: React.MouseEvent) => void;
+  onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
   children: ReactNode;
 }
 
 export default function Modal(props: ModalProps) {
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && props.onClose) {
+      props.onClose(e);
+    }
+  };
+
   useEffect(() => {
     document.body.classList.add("scroll-lock");
-    return () => document.body.classList.remove("scroll-lock");
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.classList.remove("scroll-lock");
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }, []);
 
   return (