diff --git a/src/App.tsx b/src/App.tsx
index ecf842168b958ce4a1f87f34e0f8968f745a7325..5ccd7ef4695f975b45b47d4c6706f481bdd00ba5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,5 +12,4 @@ function App() {
     </BrowserRouter>
   )
 }
-
 export default App
diff --git a/src/components/DateSelector/DateSelector.tsx b/src/components/DateSelector/DateSelector.tsx
index 0cce0223d61f50d48434be1c05685fa190a51b76..6387e242bbe0a5a762960ec8a11a2f912dcbcfed 100644
--- a/src/components/DateSelector/DateSelector.tsx
+++ b/src/components/DateSelector/DateSelector.tsx
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import './dateSelector.scss'
 import leftChevron from '../../assets/icons/left-chevron.svg'
 import rightChevron from '../../assets/icons/right-chevron.svg'
+import Modal from '../Modal/AlertModal'
 
 interface DateSelectorProps {
   date: Date
@@ -14,15 +15,32 @@ const DateSelector: React.FC<DateSelectorProps> = ({
   setDate,
   isEmpty,
 }: DateSelectorProps) => {
+  const [openModal, setopenModal] = useState<boolean>(false)
+  const [isPrev, setisPrev] = useState<boolean>(false)
+  const toggleOpenModal = () => setopenModal((prev) => !prev)
+
   const handleNextMonth = () => {
-    const incremented: Date = new Date(date.setMonth(date.getMonth() + 1))
-    console.log('incremented', incremented)
-    if (isEmpty()) setDate(incremented)
+    setisPrev(false)
+    if (isEmpty() || openModal) {
+      const incremented: Date = new Date(date.setMonth(date.getMonth() + 1))
+      setDate(incremented)
+    } else {
+      toggleOpenModal()
+    }
   }
 
   const handlePrevMonth = () => {
-    const decremented: Date = new Date(date.setMonth(date.getMonth() - 1))
-    if (isEmpty()) setDate(decremented)
+    setisPrev(true)
+    if (isEmpty() || openModal) {
+      const decremented: Date = new Date(date.setMonth(date.getMonth() - 1))
+      setDate(decremented)
+    } else {
+      toggleOpenModal()
+    }
+  }
+  const handleConfirmAlert = () => {
+    isPrev ? handlePrevMonth() : handleNextMonth()
+    setopenModal(false)
   }
   return (
     <div className="date-selector">
@@ -41,6 +59,24 @@ const DateSelector: React.FC<DateSelectorProps> = ({
         onClick={handleNextMonth}
         className="arrow"
       />
+      {openModal && (
+        <Modal>
+          <>
+            <div className="modal-text">
+              Attention, vous n'avez pas enregistré vos modifications. Celles-ci
+              seront annulées en changeant de mois. Voulez-vous continuer ?
+            </div>
+            <div className="buttons">
+              <button className="btnCancel" onClick={() => setopenModal(false)}>
+                Annuler
+              </button>
+              <button className="btnValid" onClick={handleConfirmAlert}>
+                Continuer
+              </button>
+            </div>
+          </>
+        </Modal>
+      )}
     </div>
   )
 }
diff --git a/src/components/DateSelector/dateSelector.scss b/src/components/DateSelector/dateSelector.scss
index bbc98d03da5daa9e6a1d146d2297d34945cae33e..4b4539cf43d57ed64c592b763e010ff722b2ac9c 100644
--- a/src/components/DateSelector/dateSelector.scss
+++ b/src/components/DateSelector/dateSelector.scss
@@ -32,3 +32,6 @@
     }
   }
 }
+.modal-text {
+  text-align: center;
+}
diff --git a/src/components/Modal/AlertModal.tsx b/src/components/Modal/AlertModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fde74896a3e976c5e45170db36803d4a572b772e
--- /dev/null
+++ b/src/components/Modal/AlertModal.tsx
@@ -0,0 +1,19 @@
+import React, { ReactChild } from 'react'
+import { createPortal } from 'react-dom'
+import './modal.scss'
+interface ModalProps {
+  children: ReactChild
+}
+
+const Modal: React.FC<ModalProps> = ({ children }: ModalProps) => {
+  return createPortal(
+    <div className="modal-bg">
+      <div className="modal-container">
+        <div className="modal-content">{children}</div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+export default Modal
diff --git a/src/components/Modal/modal.scss b/src/components/Modal/modal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..11500dab80af1eefa9e79d1894358366153ddcba
--- /dev/null
+++ b/src/components/Modal/modal.scss
@@ -0,0 +1,34 @@
+@import '../../styles/config/colors';
+
+.modal-bg {
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+
+  .modal-container {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    overflow-y: auto;
+    width: 100%;
+  }
+  .modal-content {
+    background: $grey-dark;
+    border-radius: 10px;
+    box-shadow: 0px 4px 8px rgba(43, 45, 92, 0.25),
+      0px 2px 4px rgba(43, 45, 92, 0.25);
+    padding: 1rem;
+    position: relative;
+    max-width: 350px;
+    width: 100%;
+  }
+  .buttons {
+    display: flex;
+    justify-content: center;
+  }
+}