diff --git a/src/components/ui/modal/modal.jsx b/src/components/ui/modal/modal.jsx
new file mode 100644
index 0000000..66ae46b
--- /dev/null
+++ b/src/components/ui/modal/modal.jsx
@@ -0,0 +1,23 @@
+import styles from "./modal.module.css"
+import Button from "../button/button.jsx";
+
+const Modal = ({ open, onClose, children, title }) => {
+
+    if(!open) return null;
+
+    return <div className={styles.overlay}>
+
+        <div className={styles.modal}>
+
+            {title && <h2>{title}</h2>}
+
+            {children}
+
+            <div className={styles.modalFooter}> <Button onClick={onClose}>Fermer</Button> </div>
+
+        </div>
+
+    </div>
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/src/components/ui/modal/modal.module.css b/src/components/ui/modal/modal.module.css
new file mode 100644
index 0000000..76b108a
--- /dev/null
+++ b/src/components/ui/modal/modal.module.css
@@ -0,0 +1,35 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal {
+    padding: 20px 20px 20px 20px;
+    border-radius: 8px;
+    min-width: 300px;
+    max-width: 70%;
+    position: relative;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    width: fit-content;
+    border: 1px solid rgba(200, 200, 200, 0.3);
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #000;
+    outline: none;
+}
+
+.modalFooter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+}