diff --git a/src/components/widgets/ModalWidget.jsx b/src/components/widgets/ModalWidget.jsx
index 5642da1c..bf8f8187 100644
--- a/src/components/widgets/ModalWidget.jsx
+++ b/src/components/widgets/ModalWidget.jsx
@@ -1,24 +1,55 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import styles from '../../styles/components/widgets/ModalWidget.module.scss';
 
 
-const ModalWidget = ({header, paragraph}) => {
-    return (
-        <div className={styles.modalBackground}>
-            <div className={styles.modalContainer}>
+const ModalWidget = ({header, paragraph, cancelText, confirmText, onConfirm,}) => {
+    const [openModal, setOpenModal] = useState(true);
+    const switchModal = () => {
+        setOpenModal(!openModal);
+    }
+
+    const pressEscape = (e) => {
+        if (e.key == "Escape") {
+            setOpenModal(false);
+        }
+    }
 
-                <div className={styles.header}>
-                    <h2 className={styles.headerText}>{header}</h2>
-                </div>
-                <div className={styles.paragraph}>
-                    <p>{paragraph}</p>
-                </div>
-                <div className={styles.footer}>
-                    <button className={`${styles.modalButton} ${styles.cancel}`}>Cancel</button>
-                    <button className={`${styles.modalButton} ${styles.confirm}`}>Confirm</button>
-                </div>
-            </div>
+    document.body.addEventListener('keydown', pressEscape);
+    useEffect(() => {
+        return () => {document.body.removeEventListener('keydown', pressEscape)}
+    }, [])
+
+    const pressConfirm = () => {
+        switchModal();
+        onConfirm(true);
+    }
+    
+    return (
+        <div>
+            <button onClick={switchModal}> Show modal </button>
+            {openModal && <>
+                <div className={styles.modalBackground}>
+                    <div className={styles.overlay} onClick={switchModal}></div>
+                    <div className={styles.modalContainer}>
+                        <div className={styles.header}>
+                            <h2 className={styles.headerText}>{header}</h2>
+                        </div>
+                        <div className={styles.paragraph}>
+                            <p>{paragraph}</p>
+                        </div>
+                        <div className={styles.footer}>
+                            <button className={`${styles.modalButton} ${styles.cancel}`} onClick={switchModal}>
+                                {cancelText}
+                            </button>
+                            <button className={`${styles.modalButton} ${styles.confirm}`} onClick={pressConfirm}>
+                                {confirmText}
+                            </button>
+                        </div>
+                    </div>
+                </div>                
+                </>
+            }
         </div>
     );
 };
diff --git a/src/styles/components/widgets/ModalWidget.module.scss b/src/styles/components/widgets/ModalWidget.module.scss
index 8268083f..27a323e6 100644
--- a/src/styles/components/widgets/ModalWidget.module.scss
+++ b/src/styles/components/widgets/ModalWidget.module.scss
@@ -1,22 +1,34 @@
 $modalRed : #E64242;
 $modalGreen: #6DC12C;
 
-.modalBackground {
+.modalBackground{
+    position: absolute;
+    top: 0;
+    left: 0;
     height: 100vh;
     width: 100vw;
     
-    position: fixed;
     display: flex;
     justify-content: center;
     align-items: center;
 
-    background: rgba(0, 0, 0, 0.79);
     font-size: 2vw;
 
     z-index: 1000; // to be sure that it will be displayd at the top of everything else
+    // when there is no z-index there is a navbar menu higher!
+}
+
+.overlay{
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+
+    background: rgba(0, 0, 0, 0.79);
 }
 
 .modalContainer {
+    position: absolute;
     min-height: 12rem;
     min-width: min(40rem, 70%);
     padding: 20px;
@@ -29,6 +41,8 @@ $modalGreen: #6DC12C;
     background-color: var(--lightgray-color);
     border-radius: 15px;
     box-shadow: var(--third-color) 0px 0px 5px;
+
+    transition: all 200ms ease-in-out;
 }
 
 .header {