diff --git a/package.json b/package.json
index da5e4caeb54b2fc11c0d50cd79cfe0c41ab653a1..80a9eff4719170041fbb0baf4e9f8a555fc2ba5b 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,11 @@
     ]
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/lab": "^5.0.0-alpha.144",
+    "@mui/material": "^5.14.9",
+    "@mui/styles": "^5.14.9",
     "@types/draft-js": "^0.11.4",
     "@types/draftjs-to-html": "^0.8.1",
     "@types/html-to-draftjs": "^1.4.0",
diff --git a/src/App.tsx b/src/App.tsx
index 980923de88ddf996479a302fa762cf32553cec31..d91139a0c455919f884ada4972bc18fef295b1fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,25 @@
+import { ThemeProvider } from '@mui/material'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { BrowserRouter } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import Layout from './components/Layout/Layout'
 import Router from './components/Routes/Router'
+import { theme } from './components/UI/theme'
 
 const queryClient = new QueryClient()
 
 function App() {
   return (
     <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
-        <Layout>
-          <Router />
-        </Layout>
-        <ToastContainer theme="colored" />
-      </QueryClientProvider>
+      <ThemeProvider theme={theme}>
+        <QueryClientProvider client={queryClient}>
+          <Layout>
+            <Router />
+          </Layout>
+          <ToastContainer theme="colored" />
+        </QueryClientProvider>
+      </ThemeProvider>
     </BrowserRouter>
   )
 }
diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx
index d14ab99daf8b7906513e4f875ae628b87b554386..023dfeb796dd59a36527f02e072c0588c6100aa0 100644
--- a/src/components/Consents/Consents.tsx
+++ b/src/components/Consents/Consents.tsx
@@ -1,4 +1,4 @@
-import TablePagination from '@material-ui/core/TablePagination'
+import { Button, TablePagination, TextField } from '@mui/material'
 import {
   ColDef,
   ColGroupDef,
@@ -18,7 +18,7 @@ import { useWhoAmI } from '../../API'
 import { getAxiosXSRFHeader } from '../../axios.config'
 import { IConsent } from '../../models/consent.model'
 import { ConsentService } from '../../services/consent.service'
-import DowloadModal from './DowloadModal'
+import DownloadModal from './DowloadModal'
 import './agGridOverrides.scss'
 import styles from './consents.module.scss'
 import './muiPaginationOverrides.scss'
@@ -257,25 +257,19 @@ const Consents: React.FC = () => {
   return (
     <>
       <div className="header">
-        <h1 className="title pageTitle">Gestion des consentements Enedis</h1>
+        <h1>Gestion des consentements Enedis</h1>
       </div>
       <div className={styles.content}>
-        <div className={styles.searchField}>
-          <div className={styles.inputGroup}>
-            <label htmlFor="search">Recherche</label>
-            <input
-              value={search}
-              name="search"
-              type="number"
-              placeholder="N°PDL (14 chiffres)"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                handleSearchChange(e.target.value)
-              }
-              disabled={isShowingSelection}
-              autoComplete="off"
-            />
-          </div>
-        </div>
+        <TextField
+          placeholder="N°PDL (14 chiffres)"
+          label="Recherche"
+          value={search}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            handleSearchChange(e.target.value)
+          }
+          disabled={isShowingSelection}
+          autoComplete="off"
+        />
         <div
           className="ag-theme-alpine-dark"
           style={{ width: '100%', height: '75vh' }}
@@ -311,16 +305,15 @@ const Consents: React.FC = () => {
             />
           )}
         </div>
-        {openDowloadModal && (
-          <DowloadModal
-            toggleOpenModal={toggleOpenModal}
-            exportData={exportData}
-          />
-        )}
+        <DownloadModal
+          open={openDowloadModal}
+          toggleOpenModal={toggleOpenModal}
+          exportData={exportData}
+        />
       </div>
       <div className={styles.footerButtons}>
-        <button
-          className="btnDelete"
+        <Button
+          variant="outlined"
           onClick={isShowingSelection ? continueSelection : resetSelection}
           disabled={
             !isShowingSelection && selectedNodes && selectedNodes.length === 0
@@ -329,15 +322,15 @@ const Consents: React.FC = () => {
           {isShowingSelection
             ? 'Continuer ma sélection'
             : 'Tout désélectionner'}
-        </button>
-        <button
-          className={styles.btnSelection + ' btnValid'}
+        </Button>
+        <Button
           onClick={!isShowingSelection ? showCurrentSelection : toggleOpenModal}
           disabled={selectedNodes && selectedNodes.length <= 0}
+          classes={{ contained: styles.btnText }}
         >
           {!isShowingSelection ? 'Voir mes sélections' : 'Télécharger'}
-          <span>{selectedNodes?.length}</span>
-        </button>
+          <div>{selectedNodes?.length}</div>
+        </Button>
       </div>
     </>
   )
diff --git a/src/components/Consents/DowloadModal.tsx b/src/components/Consents/DowloadModal.tsx
index e5774f8d852fe868ded8f60b2459d7ec009ddc33..b5e6132910d970621d396130deb008a4fe2adc88 100644
--- a/src/components/Consents/DowloadModal.tsx
+++ b/src/components/Consents/DowloadModal.tsx
@@ -1,23 +1,25 @@
+import { Button, Dialog } from '@mui/material'
 import React from 'react'
-import dowloadIcon from '../../assets/icons/ico-download.svg'
-import Modal from '../Newsletter/Modal/Modal'
+import downloadIcon from '../../assets/icons/ico-download.svg'
 import styles from './DownloadModal.module.scss'
 
-interface DowloadModalProps {
+interface DownloadModalProps {
+  open: boolean
   toggleOpenModal: () => void
   exportData: () => void
 }
-const DowloadModal: React.FC<DowloadModalProps> = ({
+const DownloadModal: React.FC<DownloadModalProps> = ({
+  open,
   toggleOpenModal,
   exportData,
-}: DowloadModalProps) => {
+}) => {
   return (
-    <Modal>
+    <Dialog open={open} onClose={toggleOpenModal}>
       <div className={styles.modalContent}>
         <img
-          src={dowloadIcon}
+          src={downloadIcon}
           className={styles.modalIcon}
-          alt="dowload-icon"
+          alt="download-icon"
         />
         <div className={styles.modalTitle}>
           Voulez-vous télécharger les consentements sélectionnés ?
@@ -30,16 +32,14 @@ const DowloadModal: React.FC<DowloadModalProps> = ({
           l&apos;utiliser qu&apos;en cas de contrôle de la part d&apos;Enedis et
           à supprimer ce fichier ensuite de tout ordinateur.
         </div>
-        <div className={styles.buttons}>
-          <button className="btnCancel2" onClick={toggleOpenModal}>
+        <div className="buttons">
+          <Button variant="outlined" onClick={toggleOpenModal}>
             Annuler
-          </button>
-          <button className="btnValid" onClick={exportData}>
-            Télécharger
-          </button>
+          </Button>
+          <Button onClick={exportData}>Télécharger</Button>
         </div>
       </div>
-    </Modal>
+    </Dialog>
   )
 }
-export default DowloadModal
+export default DownloadModal
diff --git a/src/components/Consents/DownloadModal.module.scss b/src/components/Consents/DownloadModal.module.scss
index f207b0a861db492e471315eb770464532f882866..803a9e7a0e37def046c2fcf280294e32f25c8d7b 100644
--- a/src/components/Consents/DownloadModal.module.scss
+++ b/src/components/Consents/DownloadModal.module.scss
@@ -18,16 +18,4 @@
   .text2 {
     color: $text-dark;
   }
-
-  .buttons {
-    margin-top: 1rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 2rem;
-
-    button {
-      margin: 0;
-    }
-  }
 }
diff --git a/src/components/Consents/consents.module.scss b/src/components/Consents/consents.module.scss
index 6362b64844118a402bde0468a56d88057b847a59..188960e5307e9f2a86ea466bf3ef69cfb4e85e98 100644
--- a/src/components/Consents/consents.module.scss
+++ b/src/components/Consents/consents.module.scss
@@ -6,37 +6,6 @@
   padding: 1rem;
 }
 
-.searchField {
-  max-width: 750px;
-  width: 100%;
-  display: flex;
-  align-items: flex-end;
-  .inputGroup {
-    color: $text-grey;
-    font-size: 1rem;
-    margin-right: 2rem;
-    label {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 0.5rem;
-    }
-    input {
-      box-sizing: border-box;
-      background: transparent;
-      border: 1px solid $text-dark;
-      border-radius: 4px;
-      height: 40px;
-      padding: 0 0.5rem;
-      width: 500px;
-      &:disabled {
-        opacity: 0.8;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-@include customCheckBox(1.45rem);
-
 .footerButtons {
   padding: 1rem 0;
   display: flex;
@@ -46,12 +15,8 @@
   left: 50%;
   transform: translate(-25%);
 
-  button {
-    margin: 0;
-  }
-  .btnSelection {
-    position: relative;
-    span {
+  .btnText {
+    div {
       position: absolute;
       font-size: 1rem;
       padding-top: 4px;
@@ -63,6 +28,7 @@
       display: block;
       background: $grey-dark;
       border: 1px solid $text-dark;
+      line-height: 100%;
     }
   }
 }
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index 1d7b30169e14affef64bc1bed0ba6542d4066988..b8a1f2e6e0b99661f8c2f22daeb014e9ce30713b 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@mui/material'
 import React from 'react'
 import './login.scss'
 
@@ -10,9 +11,7 @@ const Login: React.FC = () => {
     <div className="login">
       <div className="container">
         <h1>Bienvenue sur le Backoffice d&apos;Ecolyo !</h1>
-        <button className="btnValid" onClick={loginUser}>
-          Login
-        </button>
+        <Button onClick={loginUser}>Login</Button>
       </div>
     </div>
   )
diff --git a/src/components/Login/login.scss b/src/components/Login/login.scss
index ee3b921580016004c02261c867ea1a3b9fc51900..14327f4c3b5f451838d0c9f650fc42dd892476c7 100644
--- a/src/components/Login/login.scss
+++ b/src/components/Login/login.scss
@@ -3,6 +3,9 @@
   width: 100%;
   height: inherit;
   min-height: 95vh;
+  h1 {
+    margin-bottom: 0.5rem;
+  }
   .container {
     margin: auto;
     padding: 2rem;
diff --git a/src/components/Newsletter/DateSelector/DateSelector.tsx b/src/components/Newsletter/DateSelector/DateSelector.tsx
index ec37415765ada548a1ac61d9744a86ed0d7e6c5e..2049f71adb045e6ca8b193486912585eb0d63dce 100644
--- a/src/components/Newsletter/DateSelector/DateSelector.tsx
+++ b/src/components/Newsletter/DateSelector/DateSelector.tsx
@@ -1,7 +1,7 @@
+import { Button, Dialog, IconButton } from '@mui/material'
 import React, { useState } from 'react'
 import leftChevron from '../../../assets/icons/left-chevron.svg'
 import rightChevron from '../../../assets/icons/right-chevron.svg'
-import Modal from '../Modal/Modal'
 import './dateSelector.scss'
 
 interface DateSelectorProps {
@@ -44,40 +44,29 @@ const DateSelector: React.FC<DateSelectorProps> = ({
   }
   return (
     <div className="date-selector">
-      <img
-        src={leftChevron}
-        alt="Previous Month"
-        onClick={handlePrevMonth}
-        className="arrow"
-      />
+      <IconButton onClick={handlePrevMonth}>
+        <img src={leftChevron} alt="Previous Month" className="arrow" />
+      </IconButton>
       <div className="text">
         {date.toLocaleString('default', { month: 'long', year: 'numeric' })}
       </div>
-      <img
-        src={rightChevron}
-        alt="Next Month"
-        onClick={handleNextMonth}
-        className="arrow"
-      />
-      {openModal && (
-        <Modal>
-          <>
-            <div className="modal-text">
-              Attention, vous n&apos;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>
-      )}
+      <IconButton onClick={handleNextMonth}>
+        <img src={rightChevron} alt="Next Month" className="arrow" />
+      </IconButton>
+
+      <Dialog open={openModal}>
+        <div className="modal-text">
+          Attention, vous n&apos;avez pas enregistré vos modifications.
+          Celles-ci seront annulées en changeant de mois. Voulez-vous continuer
+          ?
+        </div>
+        <div className="buttons">
+          <Button variant="outlined" onClick={() => setOpenModal(false)}>
+            Annuler
+          </Button>
+          <Button onClick={handleConfirmAlert}>Continuer</Button>
+        </div>
+      </Dialog>
     </div>
   )
 }
diff --git a/src/components/Newsletter/DateSelector/dateSelector.scss b/src/components/Newsletter/DateSelector/dateSelector.scss
index cb2a92c023ff94fb33b4dad892a1cb2d26f7ae5a..729caa02b424da686c0c4a05138be531d5828a5c 100644
--- a/src/components/Newsletter/DateSelector/dateSelector.scss
+++ b/src/components/Newsletter/DateSelector/dateSelector.scss
@@ -26,14 +26,11 @@
     padding: 0.5rem;
     border-radius: 50%;
     background: #343641;
-    margin: 0 0.5rem;
-    box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
+    box-shadow:
+      0px 5px 5px rgb(0 0 0 / 20%),
+      0px 3px 14px rgb(0 0 0 / 12%),
       0px 8px 10px rgb(0 0 0 / 14%);
     transition: all 300ms ease;
-    &:hover {
-      background: $text-grey;
-      opacity: 0.9;
-    }
   }
 }
 .modal-text {
diff --git a/src/components/Newsletter/ImagePicker/ImagePicker.tsx b/src/components/Newsletter/ImagePicker/ImagePicker.tsx
index 6a58e17e0546ce5183dae034790add36b2385d17..98e236e37af1ae7dbc68875f9d254193d762e985 100644
--- a/src/components/Newsletter/ImagePicker/ImagePicker.tsx
+++ b/src/components/Newsletter/ImagePicker/ImagePicker.tsx
@@ -1,10 +1,9 @@
-import Pagination from '@material-ui/lab/Pagination'
+import { Button, Dialog, Pagination } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import { useWhoAmI } from '../../../API'
 import { getAxiosXSRFHeader } from '../../../axios.config'
 import { NewsletterService } from '../../../services/newsletter.service'
 import { EditorType } from '../CustomEditor'
-import Modal from '../Modal/Modal'
 import SingleImage from './SingleImage'
 
 interface ImagePickerProps {
@@ -69,9 +68,8 @@ const ImagePicker: React.FC<ImagePickerProps> = ({
       {selectedImageURL === '' || !selectedImageURL ? (
         <>
           <p>Pas d&apos;image sélectionnée</p>
-          <button className="btnValid" onClick={toggleModal}>
-            Choisir une image
-          </button>
+          <br />
+          <Button onClick={toggleModal}>Choisir une image</Button>
         </>
       ) : (
         <>
@@ -82,49 +80,41 @@ const ImagePicker: React.FC<ImagePickerProps> = ({
             className="ecogesture-image"
             alt="selected"
           />
-          <button className="btnDelete" onClick={toggleModal}>
-            Modifier l&apos;image
-          </button>
+          <Button onClick={toggleModal}>Modifier l&apos;image</Button>
         </>
       )}
 
-      {openModal && (
-        <Modal classes={'modal-large'}>
-          <>
-            <div className="image-picker">
-              {imageNames &&
-                imageNames.length !== 0 &&
-                imageNames[currentPage - 1].length !== 0 &&
-                imageNames[currentPage - 1].map(imageName => (
-                  <SingleImage
-                    imageURL={imageName}
-                    key={imageName}
-                    selectedImage={preSelectImage}
-                    setSelectedImageURL={setPreSelectImage}
-                  />
-                ))}
-            </div>
-            <div className="footer">
-              <Pagination
-                count={pageCount}
-                siblingCount={0}
-                onChange={(_e, page) => handleChangePage(page)}
+      <Dialog open={openModal} className="modal-large">
+        <div className="image-picker">
+          {imageNames &&
+            imageNames.length !== 0 &&
+            imageNames[currentPage - 1].length !== 0 &&
+            imageNames[currentPage - 1].map(imageName => (
+              <SingleImage
+                imageURL={imageName}
+                key={imageName}
+                selectedImage={preSelectImage}
+                setSelectedImageURL={setPreSelectImage}
               />
-              <div className="buttons">
-                <button
-                  className="btnCancel"
-                  onClick={() => setOpenModal(false)}
-                >
-                  Annuler
-                </button>
-                <button className="btnValid" onClick={handleValidateImage}>
-                  Valider
-                </button>
-              </div>
-            </div>
-          </>
-        </Modal>
-      )}
+            ))}
+        </div>
+        <Pagination
+          count={pageCount}
+          siblingCount={0}
+          onChange={(_e, page) => handleChangePage(page)}
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            marginTop: '1rem',
+          }}
+        />
+        <div className="buttons">
+          <Button variant="outlined" onClick={() => setOpenModal(false)}>
+            Annuler
+          </Button>
+          <Button onClick={handleValidateImage}>Valider</Button>
+        </div>
+      </Dialog>
     </>
   )
 }
diff --git a/src/components/Newsletter/ImagePicker/imagePicker.scss b/src/components/Newsletter/ImagePicker/imagePicker.scss
index d831ef10abcede991f3b82fb6104ee87d8e43a91..60c9acff8409e4889f0c08e7a31baddbdb26142a 100644
--- a/src/components/Newsletter/ImagePicker/imagePicker.scss
+++ b/src/components/Newsletter/ImagePicker/imagePicker.scss
@@ -13,6 +13,7 @@
   }
 }
 .ecogesture-image {
+  cursor: pointer;
   display: block;
   box-sizing: border-box;
   border: solid 1px transparent;
diff --git a/src/components/Newsletter/MailSubject/mailSubject.scss b/src/components/Newsletter/MailSubject/mailSubject.scss
deleted file mode 100644
index de327758893e42b30477e68dba7af7e83629ab7a..0000000000000000000000000000000000000000
--- a/src/components/Newsletter/MailSubject/mailSubject.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.mailSubject {
-  .title {
-    margin: 1rem 0;
-  }
-  input {
-    min-width: 300px;
-    margin-left: 0;
-  }
-}
diff --git a/src/components/Newsletter/MailSubject/mailSubject.tsx b/src/components/Newsletter/MailSubject/mailSubject.tsx
index bf6443b9d4ce0ddb6e8e9157ae4d5cddfd80ec62..47baa378497ea3c262bb6573e98d02debd024dfb 100644
--- a/src/components/Newsletter/MailSubject/mailSubject.tsx
+++ b/src/components/Newsletter/MailSubject/mailSubject.tsx
@@ -1,7 +1,7 @@
+import { Button, TextField } from '@mui/material'
 import React, { ChangeEvent } from 'react'
 import { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
-import './mailSubject.scss'
 
 interface MailSubjectProps {
   onSave: () => Promise<void>
@@ -23,25 +23,26 @@ const MailSubject: React.FC<MailSubjectProps> = ({
   return (
     <div className="mailSubject">
       <h2>Objet de la newsletter (Optionnel)</h2>
-      <p className="title">Objet</p>
-      <input
+      <h3>Objet</h3>
+      <TextField
         type="text"
-        className="input-dark"
         placeholder="Par défaut : [Ecolyo] Votre bilan..."
         value={subject}
         onChange={handleChangeSubject}
       />
       <div>
         <div className="buttons">
-          <button className="btnCancel" onClick={onCancel}>
+          <Button variant="outlined" onClick={onCancel}>
             Annuler
-          </button>
-          <button className="btnValid" onClick={onSave}>
-            Sauvegarder
-          </button>
-          <button className="btnDelete" onClick={() => onDelete('subject')}>
+          </Button>
+          <Button onClick={onSave}>Sauvegarder</Button>
+          <Button
+            style={{ marginLeft: 'auto' }}
+            variant="text"
+            onClick={() => onDelete('subject')}
+          >
             Supprimer
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/Newsletter/Modal/Modal.tsx b/src/components/Newsletter/Modal/Modal.tsx
deleted file mode 100644
index da3c6c9e021e5756a23cdd5bd4f42dded0f7ba36..0000000000000000000000000000000000000000
--- a/src/components/Newsletter/Modal/Modal.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { ReactChild } from 'react'
-import { createPortal } from 'react-dom'
-import './modal.scss'
-interface ModalProps {
-  children: ReactChild
-  classes?: string
-}
-
-const Modal: React.FC<ModalProps> = ({ children, classes }) => {
-  return createPortal(
-    <div className="modal-bg">
-      <div className="modal-container">
-        <div className={`modal-content ${classes}`}>{children}</div>
-      </div>
-    </div>,
-    document.body
-  )
-}
-
-export default Modal
diff --git a/src/components/Newsletter/Modal/modal.scss b/src/components/Newsletter/Modal/modal.scss
deleted file mode 100644
index ae25cc96eb55815b1d094116dc26bd758602b687..0000000000000000000000000000000000000000
--- a/src/components/Newsletter/Modal/modal.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../../../styles/config/colors';
-
-.modal-bg {
-  background-color: rgba(27, 28, 34, 0.85);
-  display: flex;
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 9999;
-
-  .modal-container {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    overflow-y: auto;
-    width: 100%;
-  }
-  .modal-content {
-    background: linear-gradient(180deg, #323339 0%, #25262b 100%);
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
-    border-radius: 4px;
-    padding: 1rem;
-    position: relative;
-    max-width: 350px;
-    width: 100%;
-  }
-  .modal-large {
-    max-width: 700px;
-    min-height: 380px;
-    display: flex;
-    flex-direction: column;
-  }
-  .buttons {
-    display: flex;
-    justify-content: center;
-  }
-}
diff --git a/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx b/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx
index d7d8a2773505a8ac7a5eaccccb2949d162ee65d9..7b45e657f588ed13fb4cba92a766586433c4d484 100644
--- a/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx
+++ b/src/components/Newsletter/MonthlyInfo/MonthlyInfo.tsx
@@ -1,49 +1,51 @@
+import { Button } from '@mui/material'
 import React from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
 import CustomEditor, { EditorType } from '../CustomEditor'
 import ImagePicker from '../ImagePicker/ImagePicker'
 import { ContentItems } from '../Newsletter'
-import './monthlyInfo.scss'
 
 interface MonthlyInfoProps {
-  onSave: () => Promise<void>
-  onCancel: () => void
-  info: string
   handleChange: (value: string, type: EditorType) => void
-  onDelete: (target: ContentItems) => void
   imageURL: string
+  info: string
+  onCancel: () => void
+  onDelete: (target: ContentItems) => void
+  onSave: () => Promise<void>
 }
 const MonthlyInfo: React.FC<MonthlyInfoProps> = ({
-  onSave,
-  onCancel,
-  info,
   handleChange,
-  onDelete,
   imageURL,
+  info,
+  onCancel,
+  onDelete,
+  onSave,
 }) => {
   return (
     <div className="monthlyInfo">
       <h2>Informations du mois (Optionnel)</h2>
       <div>
-        <p className="title">Image</p>
+        <h3>Image</h3>
         <ImagePicker imageURL={imageURL} handleChange={handleChange} />
-        <p className="title">Info</p>
+        <h3>Info</h3>
         <CustomEditor
           baseState={convertStringToEditorState(info)}
           handleChange={handleChange}
           type="info"
         />
         <div className="buttons">
-          <button className="btnCancel" onClick={onCancel}>
+          <Button variant="outlined" onClick={onCancel}>
             Annuler
-          </button>
-          <button className="btnValid" onClick={onSave}>
-            Sauvegarder
-          </button>
-          <button className="btnDelete" onClick={() => onDelete('monthlyInfo')}>
+          </Button>
+          <Button onClick={onSave}>Sauvegarder</Button>
+          <Button
+            style={{ marginLeft: 'auto' }}
+            variant="text"
+            onClick={() => onDelete('monthlyInfo')}
+          >
             Supprimer
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/Newsletter/MonthlyInfo/monthlyInfo.scss b/src/components/Newsletter/MonthlyInfo/monthlyInfo.scss
deleted file mode 100644
index 90aaf6171d7ed970e45b136bb5447742e115e4c3..0000000000000000000000000000000000000000
--- a/src/components/Newsletter/MonthlyInfo/monthlyInfo.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.monthlyInfo {
-  margin: 2rem 0;
-  .title {
-    margin: 1rem 0;
-  }
-  h2 {
-    margin-bottom: 1rem;
-  }
-}
diff --git a/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx b/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx
index 90557d310fe8f7d438f7a16052f687d0e1a6e659..19c05bad01ef7125a59609161f5dc2f5961d5cf8 100644
--- a/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx
+++ b/src/components/Newsletter/MonthlyNews/MonthlyNews.tsx
@@ -1,9 +1,9 @@
+import { Button, TextField } from '@mui/material'
 import React, { ChangeEvent } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
 import CustomEditor, { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
-import './monthlyNews.scss'
 
 interface MonthlyNewsProps {
   onSave: () => Promise<void>
@@ -27,16 +27,15 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({
   return (
     <div className="monthlyNews">
       <h2>Nouveautés du mois (Optionnel)</h2>
-      <p className="title">Titre</p>
-      <input
+      <h3>Titre</h3>
+      <TextField
         type="text"
-        className="input-dark"
         placeholder="Par défaut : Les nouveautés du service"
         value={title}
         onChange={handleChangeTitle}
       />
       <div>
-        <p className="title">Contenu</p>
+        <h3>Contenu</h3>
         <div>
           <CustomEditor
             baseState={convertStringToEditorState(content)}
@@ -46,15 +45,17 @@ const MonthlyNews: React.FC<MonthlyNewsProps> = ({
         </div>
 
         <div className="buttons">
-          <button className="btnCancel" onClick={onCancel}>
+          <Button variant="outlined" onClick={onCancel}>
             Annuler
-          </button>
-          <button className="btnValid" onClick={onSave}>
-            Sauvegarder
-          </button>
-          <button className="btnDelete" onClick={() => onDelete('monthlyNews')}>
+          </Button>
+          <Button onClick={onSave}>Sauvegarder</Button>
+          <Button
+            style={{ marginLeft: 'auto' }}
+            variant="text"
+            onClick={() => onDelete('monthlyNews')}
+          >
             Supprimer
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/Newsletter/MonthlyNews/monthlyNews.scss b/src/components/Newsletter/MonthlyNews/monthlyNews.scss
deleted file mode 100644
index e71c10d084410f5f74604f8436233efa8683c48a..0000000000000000000000000000000000000000
--- a/src/components/Newsletter/MonthlyNews/monthlyNews.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.monthlyNews {
-  margin: 2rem 0;
-  .title {
-    margin: 1rem 0;
-  }
-  input {
-    min-width: 300px;
-    margin-left: 0;
-  }
-}
diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
index 63a192db82190b664b55720b738aa92bc463d0bc..9ecedf91638a7aaf76b679c84d4322dabfbe87ad 100644
--- a/src/components/Newsletter/Newsletter.tsx
+++ b/src/components/Newsletter/Newsletter.tsx
@@ -1,3 +1,4 @@
+import { Button, Dialog } from '@mui/material'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useWhoAmI } from '../../API'
 import { getAxiosXSRFHeader } from '../../axios.config'
@@ -10,7 +11,6 @@ import Loader from '../Loader/Loader'
 import { EditorType } from './CustomEditor'
 import DateSelector from './DateSelector/DateSelector'
 import MailSubject from './MailSubject/mailSubject'
-import Modal from './Modal/Modal'
 import MonthlyInfo from './MonthlyInfo/MonthlyInfo'
 import MonthlyNews from './MonthlyNews/MonthlyNews'
 import Poll from './Poll/Poll'
@@ -321,27 +321,19 @@ const Newsletter: React.FC = () => {
           />
         </div>
       )}
-      {warningModal && (
-        <Modal>
-          <>
-            <div className="modal-text">
-              Êtes-vous sûr de vouloir supprimer{' '}
-              {getContentItemString(toDelete)}&nbsp;?
-            </div>
-            <div className="buttons">
-              <button
-                className="btnCancel"
-                onClick={() => setWarningModal(false)}
-              >
-                Annuler
-              </button>
-              <button className="btnValid" onClick={handleConfirmAlert}>
-                Continuer
-              </button>
-            </div>
-          </>
-        </Modal>
-      )}
+
+      <Dialog open={warningModal}>
+        <div className="modal-text">
+          Êtes-vous sûr de vouloir supprimer {getContentItemString(toDelete)}
+          &nbsp;?
+        </div>
+        <div className="buttons">
+          <Button variant="outlined" onClick={() => setWarningModal(false)}>
+            Annuler
+          </Button>
+          <Button onClick={handleConfirmAlert}>Continuer</Button>
+        </div>
+      </Dialog>
     </>
   )
 }
diff --git a/src/components/Newsletter/Poll/Poll.tsx b/src/components/Newsletter/Poll/Poll.tsx
index c82196168da4164fe179a41a46d8d3691531ffd8..614a16038778f70431d12bf27009235188371cd8 100644
--- a/src/components/Newsletter/Poll/Poll.tsx
+++ b/src/components/Newsletter/Poll/Poll.tsx
@@ -1,9 +1,9 @@
+import { Button, TextField } from '@mui/material'
 import React, { ChangeEvent } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
 import { convertStringToEditorState } from '../../../utils/editorStateManagement'
 import CustomEditor, { EditorType } from '../CustomEditor'
 import { ContentItems } from '../Newsletter'
-import './poll.scss'
 
 interface PollProps {
   question: string
@@ -29,15 +29,10 @@ const Poll: React.FC<PollProps> = ({
   return (
     <div className="poll">
       <h2>Ajouter un sondage (Optionnel)</h2>
-      <p className="title">Lien</p>
-      <input
-        type="text"
-        className="input-dark"
-        value={link}
-        onChange={handleChangeLink}
-      />
+      <h3>Lien</h3>
+      <TextField type="text" value={link} onChange={handleChangeLink} />
       <div>
-        <p className="title">Question</p>
+        <h3>Question</h3>
         <div>
           <CustomEditor
             baseState={convertStringToEditorState(question)}
@@ -47,15 +42,17 @@ const Poll: React.FC<PollProps> = ({
         </div>
 
         <div className="buttons">
-          <button className="btnCancel" onClick={onCancel}>
+          <Button variant="outlined" onClick={onCancel}>
             Annuler
-          </button>
-          <button className="btnValid" onClick={onSave}>
-            Sauvegarder
-          </button>
-          <button className="btnDelete" onClick={() => onDelete('poll')}>
+          </Button>
+          <Button onClick={onSave}>Sauvegarder</Button>
+          <Button
+            style={{ marginLeft: 'auto' }}
+            variant="text"
+            onClick={() => onDelete('poll')}
+          >
             Supprimer
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/Newsletter/Poll/poll.scss b/src/components/Newsletter/Poll/poll.scss
deleted file mode 100644
index 8c606f9ce7b29b0330dbb05e8e4ae1ab99063a2c..0000000000000000000000000000000000000000
--- a/src/components/Newsletter/Poll/poll.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.poll {
-  margin: 2rem 0;
-  .title {
-    margin: 1rem 0;
-  }
-  input {
-    min-width: 300px;
-    margin-left: 0;
-  }
-}
diff --git a/src/components/Newsletter/newsletter.scss b/src/components/Newsletter/newsletter.scss
index 2b44822a80a73aa7c99300973026e99f03c175a9..2c43170fcac7ace2fc11fff5045149333d9b3d38 100644
--- a/src/components/Newsletter/newsletter.scss
+++ b/src/components/Newsletter/newsletter.scss
@@ -17,18 +17,6 @@
 .content {
   padding: 1rem;
 }
-.subtitle {
-  margin: 1rem 0;
-}
 hr {
-  margin: 2rem 1rem;
-}
-.buttons {
-  display: flex;
-  @media screen and (max-width: $width-tablet) {
-    flex-direction: column;
-    button {
-      width: 100%;
-    }
-  }
+  margin: 2rem 0rem;
 }
diff --git a/src/components/Popups/Popups.tsx b/src/components/Popups/Popups.tsx
index 5f868efb8241533a726f9b3e30f539ae242e64e8..d85f8870e9079b5efd3a3f637e40d979a3320cc4 100644
--- a/src/components/Popups/Popups.tsx
+++ b/src/components/Popups/Popups.tsx
@@ -1,3 +1,12 @@
+import {
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  NativeSelect,
+  Switch,
+  TextField,
+} from '@mui/material'
 import { DateTime } from 'luxon'
 import React, { useCallback, useEffect, useState } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
@@ -226,7 +235,7 @@ const Popups: React.FC = () => {
   return (
     <>
       <div className="header">
-        <h1 className="title pageTitle">Création de Pop-up</h1>
+        <h1>Création de Pop-up</h1>
       </div>
 
       <div className="content popups">
@@ -234,118 +243,121 @@ const Popups: React.FC = () => {
         {!isLoading && (
           <>
             <div className="partnersInfo">
-              <h2 className="title">Affichage des pop-up de panne</h2>
-              <div className={customPopup.popupEnabled ? 'disabled' : ''}>
+              <h3>Affichage des pop-up de panne</h3>
+              <div>
                 <p>Services concernés</p>
-                <div className="switch_div">
-                  <span>Panne Enedis</span>
-                  <input
-                    type="checkbox"
-                    id="switch_enedis"
-                    disabled={customPopup.popupEnabled}
-                    checked={partnersInfo.enedis_failure}
-                    onChange={event => {
-                      handleCheckboxChange(
-                        event.currentTarget.checked,
-                        CheckboxType.ENEDIS
-                      )
-                    }}
+                <FormGroup style={{ flexDirection: 'row' }}>
+                  <FormControlLabel
+                    label="Panne Enedis"
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={customPopup.popupEnabled}
+                        checked={partnersInfo.enedis_failure}
+                        onChange={event => {
+                          handleCheckboxChange(
+                            event.target.checked,
+                            CheckboxType.ENEDIS
+                          )
+                        }}
+                      />
+                    }
                   />
-                  <label htmlFor="switch_enedis" />
-                </div>
-                <div className="switch_div">
-                  <span>Panne EGL</span>
-                  <input
-                    type="checkbox"
-                    id="switch_egl"
-                    disabled={customPopup.popupEnabled}
-                    checked={partnersInfo.egl_failure}
-                    onChange={event => {
-                      handleCheckboxChange(
-                        event.currentTarget.checked,
-                        CheckboxType.EGL
-                      )
-                    }}
+                  <FormControlLabel
+                    label="Panne EGL"
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={customPopup.popupEnabled}
+                        checked={partnersInfo.egl_failure}
+                        onChange={event => {
+                          handleCheckboxChange(
+                            event.target.checked,
+                            CheckboxType.EGL
+                          )
+                        }}
+                      />
+                    }
                   />
-                  <label htmlFor="switch_egl" />
-                </div>
-                <div className="switch_div">
-                  <span>Panne GRDF</span>
-                  <input
-                    type="checkbox"
-                    id="switch_grdf"
-                    disabled={customPopup.popupEnabled}
-                    checked={partnersInfo.grdf_failure}
-                    onChange={event => {
-                      handleCheckboxChange(
-                        event.currentTarget.checked,
-                        CheckboxType.GRDF
-                      )
-                    }}
+                  <FormControlLabel
+                    label="Panne GRDF"
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={customPopup.popupEnabled}
+                        checked={partnersInfo.grdf_failure}
+                        onChange={event => {
+                          handleCheckboxChange(
+                            event.target.checked,
+                            CheckboxType.GRDF
+                          )
+                        }}
+                      />
+                    }
                   />
-                  <label htmlFor="switch_grdf" />
-                </div>
+                </FormGroup>
               </div>
             </div>
 
             <div className="customPopup">
-              <h2 className="title">Affichage de pop-up personnalisée</h2>
-              <div className={isPartnerNotificationOn() ? 'disabled' : ''}>
-                <div className="currentPopup">
-                  <div className="switch_div">
-                    <span>Pop-up active</span>
-                    <input
-                      type="checkbox"
-                      id="switch_popup"
+              <h3>Affichage de pop-up personnalisée</h3>
+              <FormGroup style={{ flexDirection: 'row' }}>
+                <FormControlLabel
+                  label="Pop-up active"
+                  labelPlacement="top"
+                  control={
+                    <Switch
                       disabled={isPartnerNotificationOn()}
                       checked={customPopup.popupEnabled}
                       onChange={event => {
                         handleCheckboxChange(
-                          event.currentTarget.checked,
+                          event.target.checked,
                           CheckboxType.CUSTOM
                         )
                       }}
                     />
-                    <label htmlFor="switch_popup" />
-                  </div>
-
-                  {customPopup.popupEnabled &&
-                    previousEndDate &&
-                    getRemainingDuration(previousEndDate)}
-                </div>
+                  }
+                />
+                {customPopup.popupEnabled &&
+                  previousEndDate &&
+                  getRemainingDuration(previousEndDate)}
+              </FormGroup>
 
-                <div className="popupTitle">
-                  <label htmlFor="title">Titre</label>
-                  <input
-                    type="text"
-                    name="title"
-                    id="title"
-                    min={1}
-                    placeholder="Titre"
-                    value={customPopup.title}
-                    onChange={event =>
-                      handlePopupChange('title', event.target.value)
-                    }
-                  />
-                </div>
+              <div className="popupTitle">
+                <TextField
+                  type="text"
+                  placeholder="Titre de la popup"
+                  fullWidth
+                  label="Titre"
+                  value={customPopup.title}
+                  onChange={event =>
+                    handlePopupChange('title', event.target.value)
+                  }
+                />
+              </div>
 
-                <div className="popupDescription">
-                  <CustomEditor
-                    baseState={convertStringToEditorState(
-                      customPopup.description
-                    )}
-                    handleChange={value =>
-                      handlePopupChange('description', value)
-                    }
-                    type="custom_popup"
-                  />
-                </div>
+              <div className="popupDescription">
+                <CustomEditor
+                  baseState={convertStringToEditorState(
+                    customPopup.description
+                  )}
+                  handleChange={value =>
+                    handlePopupChange('description', value)
+                  }
+                  type="custom_popup"
+                />
+              </div>
 
-                <div className="popupEndDate">
-                  <label htmlFor="title">Nouvelle Durée</label>
-                  <div className="durationInput">
-                    <select
-                      value={popupDuration.type}
+              <div className="popupEndDate">
+                <label htmlFor="title">Nouvelle Durée</label>
+                <div>
+                  <FormControl style={{ flexDirection: 'row', gap: '1rem' }}>
+                    <NativeSelect
+                      defaultValue={30}
+                      inputProps={{
+                        name: 'age',
+                        id: 'uncontrolled-native',
+                      }}
                       onChange={event => handleSelectChange(event)}
                     >
                       {OPTIONS.map(option => (
@@ -357,11 +369,19 @@ const Popups: React.FC = () => {
                           {option.label}
                         </option>
                       ))}
-                    </select>
+                    </NativeSelect>
+
                     {popupDuration.type !== 'infinite' && (
-                      <input
+                      <TextField
+                        inputProps={{
+                          inputMode: 'numeric',
+                          pattern: '[0-9]*',
+                        }}
+                        id="outlined-number"
                         type="number"
-                        min="0"
+                        InputLabelProps={{
+                          shrink: true,
+                        }}
                         value={popupDuration.duration}
                         onChange={e =>
                           setPopupDuration(prev => ({
@@ -371,23 +391,18 @@ const Popups: React.FC = () => {
                         }
                       />
                     )}
-                  </div>
+                  </FormControl>
                 </div>
               </div>
             </div>
 
             <div className="buttons">
-              <button className="btnCancel" onClick={handleCancel}>
+              <Button variant="outlined" onClick={handleCancel}>
                 Annuler
-              </button>
-              <button
-                className="btnValid"
-                onClick={handleSave}
-                disabled={!isPageValid()}
-                title="Un seul type de popup peut être activé"
-              >
+              </Button>
+              <Button disabled={!isPageValid()} onClick={handleSave}>
                 Sauvegarder
-              </button>
+              </Button>
             </div>
           </>
         )}
diff --git a/src/components/Popups/popups.scss b/src/components/Popups/popups.scss
index 7f93c69038d13c943d4658f6c0c478f956d5480c..0071eb96daa5cfba37bc16abb470e22a596c33d0 100644
--- a/src/components/Popups/popups.scss
+++ b/src/components/Popups/popups.scss
@@ -1,48 +1,15 @@
 @import '../../styles/config/colors';
 
 .popups {
-  .disabled {
-    opacity: 0.5;
-  }
-
-  .partnersInfo,
-  .customPopup {
-    h2.title {
-      margin: 1rem 0;
-    }
-  }
-
   .partnersInfo {
-    margin: 2rem 0;
-    h1 {
-      margin-bottom: 1rem;
-    }
-
-    p {
-      color: $text-grey;
-    }
-  }
-
-  .customPopup {
-    .currentPopup {
-      display: flex;
-      margin-bottom: 1rem;
-      .switch_div {
-        padding-top: 0;
-      }
-
-      p.endDate {
-        color: $gold-dark;
-        font-weight: bold;
-      }
-    }
+    margin-bottom: 2rem;
   }
 
-  .popupTitle {
-    margin-bottom: 1.5rem;
+  p.endDate {
+    color: $gold-dark;
+    font-weight: bold;
   }
 
-  .popupTitle,
   .popupDescription,
   .popupEndDate {
     display: flex;
@@ -54,17 +21,6 @@
       font-weight: 700;
     }
 
-    input,
-    textarea {
-      background: inherit;
-      border-radius: 4px;
-      border: 1px solid $text-chart;
-      max-width: 600px;
-      padding: 1rem;
-      color: $text-grey;
-      font-size: 1rem;
-    }
-
     .count {
       color: $text-dark;
       max-width: 600px;
@@ -76,94 +32,9 @@
     }
   }
 
-  .popupEndDate {
-    margin-top: 1rem;
-    .durationInput {
-      display: flex;
-      gap: 1.5rem;
-      max-height: 36px;
-
-      input,
-      select {
-        background: #383941;
-        border: 1px solid $text-chart;
-        border-radius: 2px;
-      }
-
-      input {
-        max-width: 100px;
-      }
-
-      select {
-        max-width: 180px;
-        padding: 0.5rem 1rem;
-        option {
-          background-color: $grey-light;
-        }
-      }
-    }
-  }
-
-  .buttons {
+  .customPopup {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     gap: 1rem;
-    button {
-      margin: 0;
-    }
-  }
-
-  .switch_div {
-    display: inline-block;
-    padding: 1rem 1rem;
-    min-width: 135px;
-
-    span {
-      color: $text-dark;
-    }
-
-    input[type='checkbox'] {
-      width: 0;
-      height: 0;
-      visibility: hidden;
-      margin-bottom: 15px;
-    }
-
-    label {
-      display: block;
-      width: 50px;
-      height: 20px;
-      background-color: grey;
-      border-radius: 15px;
-      position: relative;
-      cursor: pointer;
-      transition: 0.5s;
-      box-shadow: 0 0 20px #80808050;
-    }
-
-    label::after {
-      content: '';
-      width: 17px;
-      height: 17px;
-      background-color: #e8f5f7;
-      position: absolute;
-      border-radius: 13px;
-      top: 2px;
-      left: 2px;
-      transition: 0.5s;
-    }
-
-    input:checked + label:after {
-      left: calc(100% - 3px);
-      transform: translateX(-100%);
-    }
-
-    input:checked + label {
-      background-color: #e3b82a;
-    }
-
-    label:active:after {
-      width: 34px;
-    }
   }
 }
diff --git a/src/components/Prices/PriceSection.tsx b/src/components/Prices/PriceSection.tsx
index 8e6d6d87aebd5f4865fb38681d96c4ee2ed7cbea..84b364ca50a911d66678db601feebbffd27f8553 100644
--- a/src/components/Prices/PriceSection.tsx
+++ b/src/components/Prices/PriceSection.tsx
@@ -1,3 +1,4 @@
+import { Button, TextField } from '@mui/material'
 import dayjs from 'dayjs'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
@@ -132,38 +133,41 @@ const PriceSection: React.FC<PriceSectionProps> = ({ fluid, frequency }) => {
       <hr className="price-separator" />
       <div className="flex-bloc">
         <p>Nouveau prix : </p>
-        <input
-          className="input-dark price-select"
+        <TextField
           type="text"
           value={priceToSave.price.toString()}
           onChange={e => handlePriceSelection(e.target.value)}
           placeholder={priceToSave.price === '' ? 'Saisir le nouveau prix' : ''}
+          fullWidth={false}
         />
         <span className="euro">€</span>
 
         <div className="flex-bloc startDate">
           <p>A partir de : </p>
-          <p className="date">
-            <span className="capital">{getDate(priceToSave.startDate)}</span>
-          </p>
+          <p className="date">{getDate(priceToSave.startDate)}</p>
         </div>
       </div>
-      <button
-        className="btnValid"
-        onClick={savePrice}
-        disabled={priceToSave.price === '0' || priceToSave.price === ''}
-      >
-        Sauvegarder
-      </button>
+      <div>
+        <Button
+          onClick={savePrice}
+          disabled={priceToSave.price === '0' || priceToSave.price === ''}
+        >
+          Sauvegarder
+        </Button>
+      </div>
       <div className="history">
-        <button onClick={toggleHistory} className={showHistory ? 'active' : ''}>
-          <span>Voir l&apos;historique</span>
+        <Button
+          variant="outlined"
+          onClick={toggleHistory}
+          className={showHistory ? 'active' : ''}
+        >
+          Voir l&apos;historique
           <img
             src={arrowDown}
             className={showHistory ? 'icon-active' : ''}
             alt="arrow-icon"
           />
-        </button>
+        </Button>
         {showHistory && (
           <ul className={showHistory ? 'active' : ''}>
             {nextPrice && (
@@ -194,17 +198,17 @@ const PriceSection: React.FC<PriceSectionProps> = ({ fluid, frequency }) => {
                     index={i}
                   />
                   {i === maxPerList && !showFullList && (
-                    <button onClick={toggleFullList} className="showButton">
+                    <Button variant="outlined" onClick={toggleFullList}>
                       En voir plus
-                    </button>
+                    </Button>
                   )}
                 </div>
               )
             })}
             {showFullList && (
-              <button onClick={toggleFullList} className="showButton">
+              <Button variant="outlined" onClick={toggleFullList}>
                 En voir moins
-              </button>
+              </Button>
             )}
           </ul>
         )}
diff --git a/src/components/Prices/Prices.tsx b/src/components/Prices/Prices.tsx
index e8aeaab89dcf6c09c787015f28043a495a720e5d..d18a85b9c90bac3ede5f8c88e2633074d86d61df 100644
--- a/src/components/Prices/Prices.tsx
+++ b/src/components/Prices/Prices.tsx
@@ -9,7 +9,7 @@ const Prices: React.FC = () => {
   return (
     <>
       <div className="header">
-        <h1 className="title pageTitle">Prix des fluides</h1>
+        <h1>Prix des fluides</h1>
       </div>
       <div className="prices">
         <PriceSection
diff --git a/src/components/Prices/prices.scss b/src/components/Prices/prices.scss
index d4d057641eabeb72e33f4b90ec0bee299b85ee50..eabf44ca432c77e451490c17341bc01347b4eb01 100644
--- a/src/components/Prices/prices.scss
+++ b/src/components/Prices/prices.scss
@@ -7,31 +7,24 @@
   .title {
     margin: 1rem 0;
   }
-  .capital {
-    text-transform: capitalize;
-  }
   h2 {
-    margin-bottom: 1rem;
     color: $gold;
   }
   .price-separator {
-    margin: 1rem 0;
+    margin: 0;
     background: white;
   }
   .flex-bloc {
     display: flex;
     align-items: center;
-    .price-select {
-      position: relative;
-    }
+    gap: 0.5rem;
+
     .euro {
-      display: block;
-      margin-left: 0.5rem;
       font-weight: bold;
     }
     .startDate {
-      margin-left: 1rem;
       .date {
+        text-transform: capitalize;
         margin-left: 0.5rem;
         color: $gold;
         font-weight: bold;
@@ -39,28 +32,20 @@
     }
   }
   section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
     margin-top: 1rem;
     margin-bottom: 2rem;
     .history {
       button {
-        @include baseButton();
-        background: $grey-dark;
-        border: solid 1px $gold;
-        display: flex;
-        align-items: center;
-        &:hover {
-          background: $dark-background;
-          opacity: 0.8;
-        }
-        &.active {
-          border-radius: 5px 5px 0 0;
-        }
         img {
           width: 20px;
           margin-left: 0.5rem;
-        }
-        span {
-          color: $gold;
+          transition: all 0.3s ease-out;
+          &.icon-active {
+            transform: rotate(180deg);
+          }
         }
       }
       ul {
@@ -104,13 +89,6 @@
           margin: 0;
           background: white;
         }
-        .showButton {
-          text-align: center;
-          color: $gold;
-        }
-      }
-      .icon-active {
-        transform: rotate(180deg);
       }
     }
   }
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index a00cda242156e115f1e6fa7282c129d25a26b59a..dbaabae3f6662e92b892fbdd3fd15ffe6a091870 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@mui/material'
 import React from 'react'
 import { useMutation, useQueryClient } from 'react-query'
 import { NavLink, useNavigate } from 'react-router-dom'
@@ -48,9 +49,9 @@ const SideBar: React.FC = () => {
       </div>
       <div className="bottom">
         {user ? (
-          <button className="btnValid" onClick={() => logout()}>
+          <Button variant="outlined" onClick={() => logout()}>
             Logout
-          </button>
+          </Button>
         ) : (
           <NavLink to="/login" className="active">
             Login
diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss
index 80955ed55157d63ed653b9db2a47ae96d96cfaa5..1b2189ed7cc9407f80bb4f597ec5c33660d2532d 100644
--- a/src/components/SideBar/sidebar.scss
+++ b/src/components/SideBar/sidebar.scss
@@ -61,8 +61,5 @@
 
   .bottom {
     margin-top: auto;
-    button {
-      margin: 0;
-    }
   }
 }
diff --git a/src/components/UI/theme.ts b/src/components/UI/theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f605e03675953e20de8f1b939b0f6d94ff7a3357
--- /dev/null
+++ b/src/components/UI/theme.ts
@@ -0,0 +1,54 @@
+import { createTheme } from '@mui/material'
+
+export const theme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#F1C017',
+      contrastText: '#000',
+    },
+  },
+  components: {
+    MuiButton: {
+      defaultProps: {
+        variant: 'contained',
+      },
+      styleOverrides: {
+        root: {
+          fontWeight: 700,
+          minWidth: 130,
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        size: 'small',
+        fullWidth: true,
+      },
+      styleOverrides: {
+        root: {
+          maxWidth: '600px',
+        },
+      },
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        track: {
+          backgroundColor: '#7B7B7B',
+          '.Mui-checked.Mui-checked + &': {
+            backgroundColor: '#DCBA4A',
+            opacity: 1,
+          },
+        },
+      },
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          padding: '1rem',
+          maxWidth: '700px',
+        },
+      },
+    },
+  },
+})
diff --git a/src/styles/config/_typography.scss b/src/styles/config/_typography.scss
index b37644cf618bfd9645ff710b02f4634c548e698a..ab39ae631ff26b2d1b0aa7fe03ebbca082f4a0a8 100644
--- a/src/styles/config/_typography.scss
+++ b/src/styles/config/_typography.scss
@@ -87,55 +87,3 @@ $main-spacing: 4px;
   border-radius: 5px;
   padding: 0.3rem;
 }
-@mixin customCheckBox($size) {
-  .checkbox {
-    cursor: pointer;
-    margin: 0.5rem 0;
-    display: flex;
-    align-items: center;
-    width: fit-content;
-    font-size: 0.9rem;
-    color: $text-grey;
-    input {
-      margin: 0.5rem 1rem 0.5rem 0.5rem;
-      appearance: none;
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      width: $size;
-      height: $size;
-      min-width: $size;
-      min-height: $size;
-      position: relative;
-      border: solid 2px $gold;
-      background: black;
-      border-radius: 2px;
-      cursor: pointer;
-    }
-  }
-  .answerChecked {
-    input {
-      &:before,
-      &:after {
-        content: '';
-        position: absolute;
-        display: inline-block;
-        background: $gold;
-        border-radius: 0.5rem;
-      }
-      &:before {
-        width: 3px;
-        height: 12px;
-        left: 10px;
-        top: 4px;
-        transform: rotate(41deg);
-      }
-      &:after {
-        width: 3px;
-        height: 6px;
-        left: 5px;
-        top: 8px;
-        transform: rotate(133deg);
-      }
-    }
-  }
-}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index f3868b9d894b58b5d4a1733054be5befc4658217..9ddc1f5643ace65aac17fa311d79544d0d27eadc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,21 +8,25 @@
   box-sizing: border-box;
   color: $text-grey;
 }
-.title {
-  color: $gold;
-  font-weight: 600;
-  font-size: 1.3rem;
+
+h1 {
+  color: #fafafa;
   @include text-large();
 }
-.pageTitle {
-  color: #fafafa;
+
+h3 {
+  margin: 1rem 0;
+  color: $gold;
+}
+
+li.MuiMenuItem-root {
+  color: white !important;
 }
-.MuiPagination-ul {
+
+.buttons {
+  margin-top: 1rem;
+  display: flex;
   justify-content: center;
-  li button {
-    color: white;
-    &.Mui-selected {
-      color: $gold;
-    }
-  }
+  gap: 1rem;
+  flex-wrap: wrap;
 }
diff --git a/yarn.lock b/yarn.lock
index 34b8d4522209f9317f148d22dead4431eefd4894..cd17f71c8adfa288d0798eca3144b32fb2d2ec84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -218,6 +218,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
 "@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz#5a1079c005135ed627442df31a42887e80fcb712"
@@ -291,11 +298,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
+"@babel/helper-validator-identifier@^7.22.19":
+  version "7.22.19"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.19.tgz#2f34ab1e445f5b95e2e6edfe50ea2449e610583a"
+  integrity sha512-Tinq7ybnEPFFXhlYOYFiSjespWQk0dq2dRNAiMdRTOYQzEGqnnNyrTxPYHP5r6wGjlF1rFgABdDV0g8EwD6Qbg==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -1182,14 +1199,14 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
+"@babel/runtime@^7.18.3", "@babel/runtime@^7.22.15", "@babel/runtime@^7.22.6", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
   integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==
@@ -1263,6 +1280,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.15":
+  version "7.22.19"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.19.tgz#7425343253556916e440e662bb221a93ddb75684"
+  integrity sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.19"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1365,10 +1391,112 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
+  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/sheet" "^1.2.2"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
+"@emotion/is-prop-valid@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
+  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+
+"@emotion/react@^11.11.1":
+  version "11.11.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
+  integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/cache" "^11.11.0"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51"
+  integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==
+  dependencies:
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/unitless" "^0.8.1"
+    "@emotion/utils" "^1.2.1"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
+  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+
+"@emotion/styled@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
+  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/is-prop-valid" "^1.2.1"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+
+"@emotion/unitless@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+
+"@emotion/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
+  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+
+"@emotion/weak-memoize@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
+  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -1417,6 +1545,33 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333"
   integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==
 
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/dom@^1.5.1":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/react-dom@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.3.tgz#6ee493102b45d796d69f1f472d4bf64e5244500a"
+  integrity sha512-uvnFKtPgzLnpzzTRfhDlvXX0kLYi9lDRQbcDmT8iXl71Rx+uwSuaUIQl3DNC7w5OweAQ7XQMDObML+KaYDQfng==
+
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.4.tgz#01e7366e57d2ad104feea63e72248f22015c520c"
@@ -1729,80 +1884,138 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
-"@material-ui/core@^4.12.3":
-  version "4.12.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
-  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.5"
-    "@material-ui/system" "^4.12.2"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.4"
-    hoist-non-react-statics "^3.3.2"
-    popper.js "1.16.1-lts"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-    react-transition-group "^4.4.0"
+"@mui/base@5.0.0-beta.15":
+  version "5.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.15.tgz#76bebd377cc3b7fdc80924759a4100e5319ed0f9"
+  integrity sha512-Xtom3YSdi0iwYPtyVRFUEGoRwi6IHWixPwifDKaK+4PkEPtUWMU5YOIJfTsmC59ri+dFvA3oBNSiTPUGGrklZw==
+  dependencies:
+    "@babel/runtime" "^7.22.15"
+    "@floating-ui/react-dom" "^2.0.2"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.14.9"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
+"@mui/core-downloads-tracker@^5.14.9":
+  version "5.14.9"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz#97a4e2decce1583983b4a0cded8bcb2be1b1cb31"
+  integrity sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==
+
+"@mui/lab@^5.0.0-alpha.144":
+  version "5.0.0-alpha.144"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.144.tgz#88a04adfe6301acd6d38e6870511b7ea19372444"
+  integrity sha512-CS/mBxfX9eSsrvatYBNphYCSCM4tIAIb4jZ3LiX1vSZ32DjRlNi+2U56+ObnBaVTjMMYdegMsT38uxYHSVXszA==
+  dependencies:
+    "@babel/runtime" "^7.22.15"
+    "@mui/base" "5.0.0-beta.15"
+    "@mui/system" "^5.14.9"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.14.9"
+    "@mui/x-tree-view" "6.0.0-alpha.1"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
 
-"@material-ui/lab@^4.0.0-alpha.60":
-  version "4.0.0-alpha.61"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz#9bf8eb389c0c26c15e40933cc114d4ad85e3d978"
-  integrity sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==
+"@mui/material@^5.14.9":
+  version "5.14.9"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.9.tgz#d536505a3728441cfe8003443f143ae87457767b"
+  integrity sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==
+  dependencies:
+    "@babel/runtime" "^7.22.15"
+    "@mui/base" "5.0.0-beta.15"
+    "@mui/core-downloads-tracker" "^5.14.9"
+    "@mui/system" "^5.14.9"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.14.9"
+    "@types/react-transition-group" "^4.4.6"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.14.9":
+  version "5.14.9"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.9.tgz#085041c44cc28c25f3431a293339922ec3d9b5f8"
+  integrity sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    clsx "^1.0.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
-"@material-ui/styles@^4.11.5":
-  version "4.11.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
-  integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    clsx "^1.0.4"
-    csstype "^2.5.2"
-    hoist-non-react-statics "^3.3.2"
-    jss "^10.5.1"
-    jss-plugin-camel-case "^10.5.1"
-    jss-plugin-default-unit "^10.5.1"
-    jss-plugin-global "^10.5.1"
-    jss-plugin-nested "^10.5.1"
-    jss-plugin-props-sort "^10.5.1"
-    jss-plugin-rule-value-function "^10.5.1"
-    jss-plugin-vendor-prefixer "^10.5.1"
-    prop-types "^15.7.2"
+    "@babel/runtime" "^7.22.15"
+    "@mui/utils" "^5.14.9"
+    prop-types "^15.8.1"
 
-"@material-ui/system@^4.12.2":
-  version "4.12.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
-  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
+"@mui/styled-engine@^5.14.9":
+  version "5.14.9"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.9.tgz#bc2121db1399bb84ea5390b40beac742b6be7023"
+  integrity sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    csstype "^2.5.2"
-    prop-types "^15.7.2"
+    "@babel/runtime" "^7.22.15"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+    react "^18.2.0"
+
+"@mui/styles@^5.14.9":
+  version "5.14.9"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.14.9.tgz#f02a435f349582dbca73847502ba0a44895aa3ab"
+  integrity sha512-pd308euoTj6t5bMnIS/FKNoPTzbZMk238FHnWfDIl0KLGw95Xrc6JPNCmrwfP1jCm++xXqcbSL11JGPf2OeQXA==
+  dependencies:
+    "@babel/runtime" "^7.22.15"
+    "@emotion/hash" "^0.9.1"
+    "@mui/private-theming" "^5.14.9"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.14.9"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.10.0"
+    jss-plugin-camel-case "^10.10.0"
+    jss-plugin-default-unit "^10.10.0"
+    jss-plugin-global "^10.10.0"
+    jss-plugin-nested "^10.10.0"
+    jss-plugin-props-sort "^10.10.0"
+    jss-plugin-rule-value-function "^10.10.0"
+    jss-plugin-vendor-prefixer "^10.10.0"
+    prop-types "^15.8.1"
 
-"@material-ui/types@5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
-  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+"@mui/system@^5.14.9":
+  version "5.14.9"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.9.tgz#90a20473a85622ddabf5a2409de1980fad98f38d"
+  integrity sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==
+  dependencies:
+    "@babel/runtime" "^7.22.15"
+    "@mui/private-theming" "^5.14.9"
+    "@mui/styled-engine" "^5.14.9"
+    "@mui/types" "^7.2.4"
+    "@mui/utils" "^5.14.9"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.4":
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328"
+  integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==
 
-"@material-ui/utils@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
-  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
+"@mui/utils@^5.14.3", "@mui/utils@^5.14.9":
+  version "5.14.9"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.9.tgz#eeefef88dbee687ac90e8972c63f0d41f19348a3"
+  integrity sha512-9ysB5e+RwS7ofn0n3nwAg1/3c81vBTmSvauD3EuK9LmqMzhmF//BFDaC44U4yITvB/0m1kWyDqg924Ll3VHCcg==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
+    "@babel/runtime" "^7.22.15"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
+"@mui/x-tree-view@6.0.0-alpha.1":
+  version "6.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@mui/x-tree-view/-/x-tree-view-6.0.0-alpha.1.tgz#fe499f8c43c01d28aca95cfb17491746ffcc3080"
+  integrity sha512-JUG3HmBrmGEALbCFg1b+i7h726e1dWYZs4db3syO1j+Q++E3nbvE4Lehp5yGTFm+8esH0Tny50tuJaa4WX6VSA==
+  dependencies:
+    "@babel/runtime" "^7.22.6"
+    "@mui/utils" "^5.14.3"
+    "@types/react-transition-group" "^4.4.6"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1852,6 +2065,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@remix-run/router@1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"
@@ -2294,10 +2512,10 @@
     "@types/draft-js" "*"
     "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0":
-  version "4.4.5"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
-  integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
+"@types/react-transition-group@^4.4.6":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
+  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
   dependencies:
     "@types/react" "*"
 
@@ -3576,11 +3794,16 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.1.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3725,6 +3948,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -4004,16 +4232,16 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
-
 csstype@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
   integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
+csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -5093,6 +5321,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -5462,7 +5695,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6610,70 +6843,70 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-jss-plugin-camel-case@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7"
-  integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==
+jss-plugin-camel-case@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c"
+  integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==
   dependencies:
     "@babel/runtime" "^7.3.1"
     hyphenate-style-name "^1.0.3"
-    jss "10.9.0"
+    jss "10.10.0"
 
-jss-plugin-default-unit@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991"
-  integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==
+jss-plugin-default-unit@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293"
+  integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
+    jss "10.10.0"
 
-jss-plugin-global@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f"
-  integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==
+jss-plugin-global@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd"
+  integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
+    jss "10.10.0"
 
-jss-plugin-nested@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3"
-  integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==
+jss-plugin-nested@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219"
+  integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
+    jss "10.10.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-props-sort@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d"
-  integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==
+jss-plugin-props-sort@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7"
+  integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
+    jss "10.10.0"
 
-jss-plugin-rule-value-function@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67"
-  integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==
+jss-plugin-rule-value-function@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b"
+  integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
+    jss "10.10.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-vendor-prefixer@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a"
-  integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==
+jss-plugin-vendor-prefixer@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7"
+  integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==
   dependencies:
     "@babel/runtime" "^7.3.1"
     css-vendor "^2.0.8"
-    jss "10.9.0"
+    jss "10.10.0"
 
-jss@10.9.0, jss@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b"
-  integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==
+jss@10.10.0, jss@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc"
+  integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==
   dependencies:
     "@babel/runtime" "^7.3.1"
     csstype "^3.0.2"
@@ -7522,11 +7755,6 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-popper.js@1.16.1-lts:
-  version "1.16.1-lts"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
-  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
-
 postcss-attribute-case-insensitive@^5.0.1:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
@@ -8346,12 +8574,12 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1:
+react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -8447,10 +8675,10 @@ react-toastify@^9.0.0:
   dependencies:
     clsx "^1.1.1"
 
-react-transition-group@^4.4.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"
@@ -8465,6 +8693,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -9008,6 +9243,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 source-map@^0.7.3:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
@@ -9229,6 +9469,11 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"