diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 04f36bbd7..72679896b 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import styles from '@/components/Modal/modal.module.scss';
 
 interface ModalType {
@@ -8,6 +8,20 @@ interface ModalType {
 }
 
 export default function Modal(props: ModalType) {
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                props.toggle();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [props]);
+
     return (
         <>
             {props.isOpen && (
@@ -21,6 +35,12 @@ export default function Modal(props: ModalType) {
                         className={styles.modalBox}
                         data-testid="modal-box"
                     >
+                        <button
+                            className={styles.closeButton}
+                            onClick={props.toggle}
+                        >
+                            close
+                        </button>
                         {props.children}
                     </div>
                 </div>
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index bbb538594..caeadcf01 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -32,3 +32,17 @@
     border-radius: 1rem;
     animation: fadeIn ease-in-out 250ms;
 }
+
+.closeButton {
+    position: absolute;
+    top: 2%;
+    right: 10px;
+    cursor: pointer;
+    z-index: 999;
+    padding: 4px 25px;
+    border-radius: 3px;
+    &:hover {
+        background: #041187;
+        color: white;
+    }
+}
diff --git a/src/components/taskDetails/TaskUpdateModal.tsx b/src/components/taskDetails/TaskUpdateModal.tsx
index 433e581f2..5a46919a0 100644
--- a/src/components/taskDetails/TaskUpdateModal.tsx
+++ b/src/components/taskDetails/TaskUpdateModal.tsx
@@ -1,11 +1,9 @@
-import React from 'react';
 import ProgressContainer from '../tasks/card/progressContainer';
 import Modal from '../Modal';
 import getCurrentDate from '@/utils/getLatestDate';
 import { questions } from '@/constants/ProgressUpdates';
 import ProgressForm from '../ProgressForm/ProgressForm';
 import task from '@/interfaces/task.type';
-import { useRouter } from 'next/router';
 
 type Props = {
     isOpen: boolean;
diff --git a/src/components/taskDetails/task-details.module.scss b/src/components/taskDetails/task-details.module.scss
index 806c7f74c..987c58bdb 100644
--- a/src/components/taskDetails/task-details.module.scss
+++ b/src/components/taskDetails/task-details.module.scss
@@ -241,6 +241,7 @@ $base-unit: 4px;
 }
 
 .taskUpdateModal {
+    position: relative;
     min-width: fit-content;
     max-width: 796px;
     width: 80vw;