diff --git a/.gitignore b/.gitignore
index 28f1ba7..ccde885 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-.DS_Store
\ No newline at end of file
+.DS_Store
+.vs
diff --git a/.scannerwork/.sonar_lock b/.scannerwork/.sonar_lock
new file mode 100644
index 0000000..e69de29
diff --git a/.scannerwork/report-task.txt b/.scannerwork/report-task.txt
new file mode 100644
index 0000000..1953886
--- /dev/null
+++ b/.scannerwork/report-task.txt
@@ -0,0 +1,6 @@
+projectKey=jtt_crm
+serverUrl=https://codefirst.iut.uca.fr/sonar
+serverVersion=9.6.1.59531
+dashboardUrl=https://codefirst.iut.uca.fr/sonar/dashboard?id=jtt_crm
+ceTaskId=AYSvDEjizKKB0GF_0uUi
+ceTaskUrl=https://codefirst.iut.uca.fr/sonar/api/ce/task?id=AYSvDEjizKKB0GF_0uUi
diff --git a/.vscode/c_cpp_properties.json b/.vscode/c_cpp_properties.json
new file mode 100644
index 0000000..980fd57
--- /dev/null
+++ b/.vscode/c_cpp_properties.json
@@ -0,0 +1,18 @@
+{
+  "configurations": [
+    {
+      "name": "macos-clang-arm64",
+      "includePath": [
+        "${workspaceFolder}/**"
+      ],
+      "compilerPath": "/usr/bin/clang",
+      "cStandard": "${default}",
+      "cppStandard": "${default}",
+      "intelliSenseMode": "macos-clang-arm64",
+      "compilerArgs": [
+        ""
+      ]
+    }
+  ],
+  "version": 4
+}
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..6053dbd
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "C/C++ Runner: Debug Session",
+      "type": "lldb",
+      "request": "launch",
+      "args": [],
+      "cwd": "/Users/malanone/JTT_Production/JTT_CrM",
+      "program": "/Users/malanone/JTT_Production/JTT_CrM/build/Debug/outDebug"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..50d1b0f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,36 @@
+{
+  "C_Cpp_Runner.cCompilerPath": "clang",
+  "C_Cpp_Runner.cppCompilerPath": "clang++",
+  "C_Cpp_Runner.debuggerPath": "lldb",
+  "C_Cpp_Runner.cStandard": "",
+  "C_Cpp_Runner.cppStandard": "",
+  "C_Cpp_Runner.msvcBatchPath": "",
+  "C_Cpp_Runner.useMsvc": false,
+  "C_Cpp_Runner.warnings": [
+    "-Wall",
+    "-Wextra",
+    "-Wpedantic",
+    "-Wshadow",
+    "-Wformat=2",
+    "-Wconversion",
+    "-Wnull-dereference",
+    "-Wsign-conversion"
+  ],
+  "C_Cpp_Runner.enableWarnings": true,
+  "C_Cpp_Runner.warningsAsError": false,
+  "C_Cpp_Runner.compilerArgs": [],
+  "C_Cpp_Runner.linkerArgs": [],
+  "C_Cpp_Runner.includePaths": [],
+  "C_Cpp_Runner.includeSearch": [
+    "*",
+    "**/*"
+  ],
+  "C_Cpp_Runner.excludeSearch": [
+    "**/build",
+    "**/build/**",
+    "**/.*",
+    "**/.*/**",
+    "**/.vscode",
+    "**/.vscode/**"
+  ]
+}
\ No newline at end of file
diff --git a/Doc/commande.txt b/Doc/commande.txt
index 5e46291..7c54e87 100644
--- a/Doc/commande.txt
+++ b/Doc/commande.txt
@@ -6,6 +6,7 @@ npm install --save mysql
 npm install --save express
 npm install -g nodemon
 npm install --save-dev nodemon
+npm install crypto-js
 
 
 npm install --save axios
diff --git a/package-lock.json b/package-lock.json
index 792ca09..fa93bac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,8 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "addeventlistener": "^2.0.0",
-        "axios": "^1.2.0",
+        "axios": "^1.2.1",
+        "bootstrap": "^5.2.3",
         "chart": "^0.1.2",
         "chart.js": "^4.0.1",
         "crypto-js": "^4.1.1",
@@ -30,6 +31,7 @@
         "pg": "^8.8.0",
         "react": "^18.2.0",
         "react-big-calendar": "^1.5.0",
+        "react-bootstrap": "^2.7.0",
         "react-chartjs-2": "^5.0.1",
         "react-datepicker": "^4.8.0",
         "react-dom": "^18.2.0",
@@ -3813,9 +3815,9 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-alpha.108",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.108.tgz",
-      "integrity": "sha512-KjzRUts2i/ODlMfywhFTqTzQl+Cr9nlDSZxJcnYjrbOV/iRyQNBTDoiFJt+XEdRi0fZBHnk74AFbnP56ehybsA==",
+      "version": "5.0.0-alpha.109",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.109.tgz",
+      "integrity": "sha512-UQxoONPI3ntzxcD/cbFHl+Lp2xsVj6HpKmU9QhUZ2kZ2K2yej2QJyU1gnADoWl/Hu94VrvwSSRnjTjR3HvXO/g==",
       "dependencies": {
         "@babel/runtime": "^7.20.1",
         "@emotion/is-prop-valid": "^1.2.0",
@@ -3845,23 +3847,23 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.16.tgz",
-      "integrity": "sha512-eK9+olw2ZbXX+vGrtKnN01/vLP1aX0Lq0xok35bqWM1aB93Dcmky/xPNf8h31oJ/C+IzJBjZaZMEDzVZg4Qc0A==",
+      "version": "5.10.17",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.17.tgz",
+      "integrity": "sha512-iNwUuMA30nrN0tiEkeD3zaczv7Tk2jlZIDbXRnijAsYXkZtl/xEzQsVRIPYRDuyEz6D18vQJhV8h7gPUXEubTg==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.16.tgz",
-      "integrity": "sha512-JSHcDQQ+k30NKkCM/0KX6jq4F5LOrbFKZpS+cEl7scZWOCJpUPH5ccAT5a7O8wzrgNZ8Y9PnwzNvWBrfShpJFw==",
+      "version": "5.10.17",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.17.tgz",
+      "integrity": "sha512-Kuqgv1qI5HXnc/Xu426xhCGYBSKzplb+xFNLitbnIb92Qx8jmcpfNpFlDJa2kD2H6qP66rr/m4c/zMUfGX/xBQ==",
       "dependencies": {
         "@babel/runtime": "^7.20.1",
-        "@mui/base": "5.0.0-alpha.108",
-        "@mui/core-downloads-tracker": "^5.10.16",
-        "@mui/system": "^5.10.16",
+        "@mui/base": "5.0.0-alpha.109",
+        "@mui/core-downloads-tracker": "^5.10.17",
+        "@mui/system": "^5.10.17",
         "@mui/types": "^7.2.2",
         "@mui/utils": "^5.10.16",
         "@types/react-transition-group": "^4.4.5",
@@ -3955,9 +3957,9 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.16.tgz",
-      "integrity": "sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==",
+      "version": "5.10.17",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.17.tgz",
+      "integrity": "sha512-UYzAOSK7uxkMsUssqrIUW3lnOuQpU8vqh4hLwfSw+GYAnQo3qjK4m4NhlDx+pFpsjjiGnr3K+vrSH+aIAMbcLg==",
       "dependencies": {
         "@babel/runtime": "^7.20.1",
         "@mui/private-theming": "^5.10.16",
@@ -4154,10 +4156,21 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/@remix-run/router": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
-      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==",
       "engines": {
         "node": ">=14"
       }
@@ -4173,6 +4186,26 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4866,9 +4899,9 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "29.2.3",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.3.tgz",
-      "integrity": "sha512-6XwoEbmatfyoCjWRX7z0fKMmgYKe9+/HrviJ5k0X/tjJWHGAezZOfYaxqQKuzG/TvQyr+ktjm4jgbk0s4/oF2w==",
+      "version": "29.2.4",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.4.tgz",
+      "integrity": "sha512-PipFB04k2qTRPePduVLTRiPzQfvMeLwUN3Z21hsAKaB/W9IIzgB2pizCL466ftJlcyZqnHoC9ZHpxLGl3fS86A==",
       "dependencies": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -4914,9 +4947,9 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "node_modules/@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
+      "version": "18.11.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
+      "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4949,9 +4982,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "18.0.25",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz",
-      "integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==",
+      "version": "18.0.26",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
+      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -5062,9 +5095,9 @@
       }
     },
     "node_modules/@types/yargs": {
-      "version": "17.0.15",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.15.tgz",
-      "integrity": "sha512-ZHc4W2dnEQPfhn06TBEdWaiUHEZAocYaiVMfwOipY5jcJt/251wVrKCBWBetGZWO5CF8tdb7L3DmdxVlZ2BOIg==",
+      "version": "17.0.16",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.16.tgz",
+      "integrity": "sha512-Mh3OP0oh8X7O7F9m5AplC+XHYLBWuPKNkGVD3gIZFLFebBnuFI2Nz5Sf8WLvwGxECJ8YjifQvFdh79ubODkdug==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -5075,13 +5108,13 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.0.tgz",
-      "integrity": "sha512-CXXHNlf0oL+Yg021cxgOdMHNTXD17rHkq7iW6RFHoybdFgQBjU3yIXhhcPpGwr1CjZlo6ET8C6tzX5juQoXeGA==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.1.tgz",
+      "integrity": "sha512-cOizjPlKEh0bXdFrBLTrI/J6B/QMlhwE9auOov53tgB+qMukH6/h8YAK/qw+QJGct/PTbdh2lytGyipxCcEtAw==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/type-utils": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.45.1",
+        "@typescript-eslint/type-utils": "5.45.1",
+        "@typescript-eslint/utils": "5.45.1",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -5121,11 +5154,11 @@
       }
     },
     "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.45.0.tgz",
-      "integrity": "sha512-DnRQg5+3uHHt/gaifTjwg9OKbg9/TWehfJzYHQIDJboPEbF897BKDE/qoqMhW7nf0jWRV1mwVXTaUvtB1/9Gwg==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.45.1.tgz",
+      "integrity": "sha512-WlXwY9dbmc0Lzu6xQOZ3yN8u/ws/1R8zPC16O217LMZJCbV2hJezqkWMUB+jMwguOJW+cukCDe92vcwwf8zwjQ==",
       "dependencies": {
-        "@typescript-eslint/utils": "5.45.0"
+        "@typescript-eslint/utils": "5.45.1"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -5139,13 +5172,13 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.0.tgz",
-      "integrity": "sha512-brvs/WSM4fKUmF5Ot/gEve6qYiCMjm6w4HkHPfS6ZNmxTS0m0iNN4yOChImaCkqc1hRwFGqUyanMXuGal6oyyQ==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.1.tgz",
+      "integrity": "sha512-JQ3Ep8bEOXu16q0ztsatp/iQfDCtvap7sp/DKo7DWltUquj5AfCOpX2zSzJ8YkAVnrQNqQ5R62PBz2UtrfmCkA==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.45.1",
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/typescript-estree": "5.45.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -5165,12 +5198,12 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.0.tgz",
-      "integrity": "sha512-noDMjr87Arp/PuVrtvN3dXiJstQR1+XlQ4R1EvzG+NMgXi8CuMCXpb8JqNtFHKceVSQ985BZhfRdowJzbv4yKw==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.1.tgz",
+      "integrity": "sha512-D6fCileR6Iai7E35Eb4Kp+k0iW7F1wxXYrOhX/3dywsOJpJAQ20Fwgcf+P/TDtvQ7zcsWsrJaglaQWDhOMsspQ==",
       "dependencies": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0"
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/visitor-keys": "5.45.1"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -5181,12 +5214,12 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.0.tgz",
-      "integrity": "sha512-DY7BXVFSIGRGFZ574hTEyLPRiQIvI/9oGcN8t1A7f6zIs6ftbrU0nhyV26ZW//6f85avkwrLag424n+fkuoJ1Q==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.1.tgz",
+      "integrity": "sha512-aosxFa+0CoYgYEl3aptLe1svP910DJq68nwEJzyQcrtRhC4BN0tJAvZGAe+D0tzjJmFXe+h4leSsiZhwBa2vrA==",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/typescript-estree": "5.45.1",
+        "@typescript-eslint/utils": "5.45.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -5207,9 +5240,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.0.tgz",
-      "integrity": "sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.1.tgz",
+      "integrity": "sha512-HEW3U0E5dLjUT+nk7b4lLbOherS1U4ap+b9pfu2oGsW3oPu7genRaY9dDv3nMczC1rbnRY2W/D7SN05wYoGImg==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -5219,12 +5252,12 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.0.tgz",
-      "integrity": "sha512-maRhLGSzqUpFcZgXxg1qc/+H0bT36lHK4APhp0AEUVrpSwXiRAomm/JGjSG+kNUio5kAa3uekCYu/47cnGn5EQ==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.1.tgz",
+      "integrity": "sha512-76NZpmpCzWVrrb0XmYEpbwOz/FENBi+5W7ipVXAsG3OoFrQKJMiaqsBMbvGRyLtPotGqUfcY7Ur8j0dksDJDng==",
       "dependencies": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0",
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/visitor-keys": "5.45.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -5259,15 +5292,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.0.tgz",
-      "integrity": "sha512-OUg2JvsVI1oIee/SwiejTot2OxwU8a7UfTFMOdlhD2y+Hl6memUSL4s98bpUTo8EpVEr0lmwlU7JSu/p2QpSvA==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.1.tgz",
+      "integrity": "sha512-rlbC5VZz68+yjAzQBc4I7KDYVzWG2X/OrqoZrMahYq3u8FFtmQYc+9rovo/7wlJH5kugJ+jQXV5pJMnofGmPRw==",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.45.1",
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/typescript-estree": "5.45.1",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
@@ -5318,11 +5351,11 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.0.tgz",
-      "integrity": "sha512-jc6Eccbn2RtQPr1s7th6jJWQHBHI6GBVQkCHoJFQ5UreaKm59Vxw+ynQUPPY2u2Amquc+7tmEoC2G52ApsGNNg==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.1.tgz",
+      "integrity": "sha512-cy9ln+6rmthYWjH9fmx+5FU/JDpjQb586++x2FZlveq7GdGuLLW9a2Jcst2TGekH82bXpfmRNSwP9tyEs6RjvQ==",
       "dependencies": {
-        "@typescript-eslint/types": "5.45.0",
+        "@typescript-eslint/types": "5.45.1",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -5925,9 +5958,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.0.tgz",
-      "integrity": "sha512-zT7wZyNYu3N5Bu0wuZ6QccIf93Qk1eV8LOewxgjOZFd2DenOs98cJ7+Y6703d0wkaXGY6/nZd4EweJaHz9uzQw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
+      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -6350,6 +6383,24 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6502,9 +6553,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001434",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz",
-      "integrity": "sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==",
+      "version": "1.0.30001436",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz",
+      "integrity": "sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg==",
       "funding": [
         {
           "type": "opencollective",
@@ -7437,9 +7488,9 @@
       }
     },
     "node_modules/decimal.js": {
-      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.2.tgz",
-      "integrity": "sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA=="
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "node_modules/dedent": {
       "version": "0.7.0",
@@ -8075,9 +8126,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz",
+      "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==",
       "dependencies": {
         "@eslint/eslintrc": "^1.3.3",
         "@humanwhocodes/config-array": "^0.11.6",
@@ -8906,9 +8957,9 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
     "node_modules/fastq": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
-      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
+      "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -14094,11 +14145,11 @@
       "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w=="
     },
     "node_modules/language-tags": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
-      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.6.tgz",
+      "integrity": "sha512-HNkaCgM8wZgE/BZACeotAAgpL9FUjEnhgF0FVQMIgH//zqTPreLYMb3rWYkYAqPoF75Jwuycp1da7uz66cfFQg==",
       "dependencies": {
-        "language-subtag-registry": "~0.3.2"
+        "language-subtag-registry": "^0.3.20"
       }
     },
     "node_modules/leven": {
@@ -14394,9 +14445,9 @@
       }
     },
     "node_modules/mini-css-extract-plugin": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.1.tgz",
-      "integrity": "sha512-viOoaUFy+Z2w43VsGPbtfwFrr0tKwDctK9dUofG5MBViYhD1noGFUzzDIVw0KPwCGUP+c7zqLxm+acuQs7zLzw==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz",
+      "integrity": "sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==",
       "dependencies": {
         "schema-utils": "^4.0.0"
       },
@@ -15454,9 +15505,9 @@
       }
     },
     "node_modules/postcss-custom-properties": {
-      "version": "12.1.10",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.10.tgz",
-      "integrity": "sha512-U3BHdgrYhCrwTVcByFHs9EOBoqcKq4Lf3kXwbTi4hhq0qWhl/pDWq2THbv/ICX/Fl9KqeHBb8OVrTf2OaYF07A==",
+      "version": "12.1.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz",
+      "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
@@ -16584,6 +16635,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -16795,6 +16863,35 @@
         "react-dom": "^16.14.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-chartjs-2": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",
@@ -17023,11 +17120,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
-      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
       "dependencies": {
-        "@remix-run/router": "1.0.3"
+        "@remix-run/router": "1.0.4"
       },
       "engines": {
         "node": ">=14"
@@ -17037,12 +17134,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
-      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
       "dependencies": {
-        "@remix-run/router": "1.0.3",
-        "react-router": "6.4.3"
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
       },
       "engines": {
         "node": ">=14"
@@ -18027,7 +18124,8 @@
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
     "node_modules/spdy": {
       "version": "4.0.2",
@@ -18559,9 +18657,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.0.tgz",
-      "integrity": "sha512-KjTV81QKStSfwbNiwlBXfcgMcOloyuRdb62/iLFPGBcVNF4EXjhdYBhYHmbJpiBrVxZhDvltE11j+LBQUxEEJg==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -22685,9 +22783,9 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "@mui/base": {
-      "version": "5.0.0-alpha.108",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.108.tgz",
-      "integrity": "sha512-KjzRUts2i/ODlMfywhFTqTzQl+Cr9nlDSZxJcnYjrbOV/iRyQNBTDoiFJt+XEdRi0fZBHnk74AFbnP56ehybsA==",
+      "version": "5.0.0-alpha.109",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.109.tgz",
+      "integrity": "sha512-UQxoONPI3ntzxcD/cbFHl+Lp2xsVj6HpKmU9QhUZ2kZ2K2yej2QJyU1gnADoWl/Hu94VrvwSSRnjTjR3HvXO/g==",
       "requires": {
         "@babel/runtime": "^7.20.1",
         "@emotion/is-prop-valid": "^1.2.0",
@@ -22700,19 +22798,19 @@
       }
     },
     "@mui/core-downloads-tracker": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.16.tgz",
-      "integrity": "sha512-eK9+olw2ZbXX+vGrtKnN01/vLP1aX0Lq0xok35bqWM1aB93Dcmky/xPNf8h31oJ/C+IzJBjZaZMEDzVZg4Qc0A=="
+      "version": "5.10.17",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.17.tgz",
+      "integrity": "sha512-iNwUuMA30nrN0tiEkeD3zaczv7Tk2jlZIDbXRnijAsYXkZtl/xEzQsVRIPYRDuyEz6D18vQJhV8h7gPUXEubTg=="
     },
     "@mui/material": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.16.tgz",
-      "integrity": "sha512-JSHcDQQ+k30NKkCM/0KX6jq4F5LOrbFKZpS+cEl7scZWOCJpUPH5ccAT5a7O8wzrgNZ8Y9PnwzNvWBrfShpJFw==",
+      "version": "5.10.17",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.17.tgz",
+      "integrity": "sha512-Kuqgv1qI5HXnc/Xu426xhCGYBSKzplb+xFNLitbnIb92Qx8jmcpfNpFlDJa2kD2H6qP66rr/m4c/zMUfGX/xBQ==",
       "requires": {
         "@babel/runtime": "^7.20.1",
-        "@mui/base": "5.0.0-alpha.108",
-        "@mui/core-downloads-tracker": "^5.10.16",
-        "@mui/system": "^5.10.16",
+        "@mui/base": "5.0.0-alpha.109",
+        "@mui/core-downloads-tracker": "^5.10.17",
+        "@mui/system": "^5.10.17",
         "@mui/types": "^7.2.2",
         "@mui/utils": "^5.10.16",
         "@types/react-transition-group": "^4.4.5",
@@ -22745,9 +22843,9 @@
       }
     },
     "@mui/system": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.16.tgz",
-      "integrity": "sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==",
+      "version": "5.10.17",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.17.tgz",
+      "integrity": "sha512-UYzAOSK7uxkMsUssqrIUW3lnOuQpU8vqh4hLwfSw+GYAnQo3qjK4m4NhlDx+pFpsjjiGnr3K+vrSH+aIAMbcLg==",
       "requires": {
         "@babel/runtime": "^7.20.1",
         "@mui/private-theming": "^5.10.16",
@@ -22852,10 +22950,18 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
     "@remix-run/router": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz",
-      "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q=="
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg=="
     },
     "@restart/hooks": {
       "version": "0.4.7",
@@ -22865,6 +22971,22 @@
         "dequal": "^2.0.2"
       }
     },
+    "@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -23371,9 +23493,9 @@
       }
     },
     "@types/jest": {
-      "version": "29.2.3",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.3.tgz",
-      "integrity": "sha512-6XwoEbmatfyoCjWRX7z0fKMmgYKe9+/HrviJ5k0X/tjJWHGAezZOfYaxqQKuzG/TvQyr+ktjm4jgbk0s4/oF2w==",
+      "version": "29.2.4",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.2.4.tgz",
+      "integrity": "sha512-PipFB04k2qTRPePduVLTRiPzQfvMeLwUN3Z21hsAKaB/W9IIzgB2pizCL466ftJlcyZqnHoC9ZHpxLGl3fS86A==",
       "requires": {
         "expect": "^29.0.0",
         "pretty-format": "^29.0.0"
@@ -23412,9 +23534,9 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA=="
     },
     "@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
+      "version": "18.11.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
+      "integrity": "sha512-KJ021B1nlQUBLopzZmPBVuGU9un7WJd/W4ya7Ih02B4Uwky5Nja0yGYav2EfYIk0RR2Q9oVhf60S2XR1BCWJ2g=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -23447,9 +23569,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "18.0.25",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.25.tgz",
-      "integrity": "sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==",
+      "version": "18.0.26",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
+      "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -23560,9 +23682,9 @@
       }
     },
     "@types/yargs": {
-      "version": "17.0.15",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.15.tgz",
-      "integrity": "sha512-ZHc4W2dnEQPfhn06TBEdWaiUHEZAocYaiVMfwOipY5jcJt/251wVrKCBWBetGZWO5CF8tdb7L3DmdxVlZ2BOIg==",
+      "version": "17.0.16",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.16.tgz",
+      "integrity": "sha512-Mh3OP0oh8X7O7F9m5AplC+XHYLBWuPKNkGVD3gIZFLFebBnuFI2Nz5Sf8WLvwGxECJ8YjifQvFdh79ubODkdug==",
       "requires": {
         "@types/yargs-parser": "*"
       }
@@ -23573,13 +23695,13 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.0.tgz",
-      "integrity": "sha512-CXXHNlf0oL+Yg021cxgOdMHNTXD17rHkq7iW6RFHoybdFgQBjU3yIXhhcPpGwr1CjZlo6ET8C6tzX5juQoXeGA==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.45.1.tgz",
+      "integrity": "sha512-cOizjPlKEh0bXdFrBLTrI/J6B/QMlhwE9auOov53tgB+qMukH6/h8YAK/qw+QJGct/PTbdh2lytGyipxCcEtAw==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/type-utils": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.45.1",
+        "@typescript-eslint/type-utils": "5.45.1",
+        "@typescript-eslint/utils": "5.45.1",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -23599,56 +23721,56 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.45.0.tgz",
-      "integrity": "sha512-DnRQg5+3uHHt/gaifTjwg9OKbg9/TWehfJzYHQIDJboPEbF897BKDE/qoqMhW7nf0jWRV1mwVXTaUvtB1/9Gwg==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.45.1.tgz",
+      "integrity": "sha512-WlXwY9dbmc0Lzu6xQOZ3yN8u/ws/1R8zPC16O217LMZJCbV2hJezqkWMUB+jMwguOJW+cukCDe92vcwwf8zwjQ==",
       "requires": {
-        "@typescript-eslint/utils": "5.45.0"
+        "@typescript-eslint/utils": "5.45.1"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.0.tgz",
-      "integrity": "sha512-brvs/WSM4fKUmF5Ot/gEve6qYiCMjm6w4HkHPfS6ZNmxTS0m0iNN4yOChImaCkqc1hRwFGqUyanMXuGal6oyyQ==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.45.1.tgz",
+      "integrity": "sha512-JQ3Ep8bEOXu16q0ztsatp/iQfDCtvap7sp/DKo7DWltUquj5AfCOpX2zSzJ8YkAVnrQNqQ5R62PBz2UtrfmCkA==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.45.1",
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/typescript-estree": "5.45.1",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.0.tgz",
-      "integrity": "sha512-noDMjr87Arp/PuVrtvN3dXiJstQR1+XlQ4R1EvzG+NMgXi8CuMCXpb8JqNtFHKceVSQ985BZhfRdowJzbv4yKw==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.45.1.tgz",
+      "integrity": "sha512-D6fCileR6Iai7E35Eb4Kp+k0iW7F1wxXYrOhX/3dywsOJpJAQ20Fwgcf+P/TDtvQ7zcsWsrJaglaQWDhOMsspQ==",
       "requires": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0"
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/visitor-keys": "5.45.1"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.0.tgz",
-      "integrity": "sha512-DY7BXVFSIGRGFZ574hTEyLPRiQIvI/9oGcN8t1A7f6zIs6ftbrU0nhyV26ZW//6f85avkwrLag424n+fkuoJ1Q==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.45.1.tgz",
+      "integrity": "sha512-aosxFa+0CoYgYEl3aptLe1svP910DJq68nwEJzyQcrtRhC4BN0tJAvZGAe+D0tzjJmFXe+h4leSsiZhwBa2vrA==",
       "requires": {
-        "@typescript-eslint/typescript-estree": "5.45.0",
-        "@typescript-eslint/utils": "5.45.0",
+        "@typescript-eslint/typescript-estree": "5.45.1",
+        "@typescript-eslint/utils": "5.45.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.0.tgz",
-      "integrity": "sha512-QQij+u/vgskA66azc9dCmx+rev79PzX8uDHpsqSjEFtfF2gBUTRCpvYMh2gw2ghkJabNkPlSUCimsyBEQZd1DA=="
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.45.1.tgz",
+      "integrity": "sha512-HEW3U0E5dLjUT+nk7b4lLbOherS1U4ap+b9pfu2oGsW3oPu7genRaY9dDv3nMczC1rbnRY2W/D7SN05wYoGImg=="
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.0.tgz",
-      "integrity": "sha512-maRhLGSzqUpFcZgXxg1qc/+H0bT36lHK4APhp0AEUVrpSwXiRAomm/JGjSG+kNUio5kAa3uekCYu/47cnGn5EQ==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.45.1.tgz",
+      "integrity": "sha512-76NZpmpCzWVrrb0XmYEpbwOz/FENBi+5W7ipVXAsG3OoFrQKJMiaqsBMbvGRyLtPotGqUfcY7Ur8j0dksDJDng==",
       "requires": {
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/visitor-keys": "5.45.0",
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/visitor-keys": "5.45.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -23667,15 +23789,15 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.0.tgz",
-      "integrity": "sha512-OUg2JvsVI1oIee/SwiejTot2OxwU8a7UfTFMOdlhD2y+Hl6memUSL4s98bpUTo8EpVEr0lmwlU7JSu/p2QpSvA==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.45.1.tgz",
+      "integrity": "sha512-rlbC5VZz68+yjAzQBc4I7KDYVzWG2X/OrqoZrMahYq3u8FFtmQYc+9rovo/7wlJH5kugJ+jQXV5pJMnofGmPRw==",
       "requires": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.45.0",
-        "@typescript-eslint/types": "5.45.0",
-        "@typescript-eslint/typescript-estree": "5.45.0",
+        "@typescript-eslint/scope-manager": "5.45.1",
+        "@typescript-eslint/types": "5.45.1",
+        "@typescript-eslint/typescript-estree": "5.45.1",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
@@ -23706,11 +23828,11 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.45.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.0.tgz",
-      "integrity": "sha512-jc6Eccbn2RtQPr1s7th6jJWQHBHI6GBVQkCHoJFQ5UreaKm59Vxw+ynQUPPY2u2Amquc+7tmEoC2G52ApsGNNg==",
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.45.1.tgz",
+      "integrity": "sha512-cy9ln+6rmthYWjH9fmx+5FU/JDpjQb586++x2FZlveq7GdGuLLW9a2Jcst2TGekH82bXpfmRNSwP9tyEs6RjvQ==",
       "requires": {
-        "@typescript-eslint/types": "5.45.0",
+        "@typescript-eslint/types": "5.45.1",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -24175,9 +24297,9 @@
       "integrity": "sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA=="
     },
     "axios": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.0.tgz",
-      "integrity": "sha512-zT7wZyNYu3N5Bu0wuZ6QccIf93Qk1eV8LOewxgjOZFd2DenOs98cJ7+Y6703d0wkaXGY6/nZd4EweJaHz9uzQw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
+      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -24513,6 +24635,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -24619,9 +24747,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001434",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz",
-      "integrity": "sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA=="
+      "version": "1.0.30001436",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz",
+      "integrity": "sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -25281,9 +25409,9 @@
       }
     },
     "decimal.js": {
-      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.2.tgz",
-      "integrity": "sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA=="
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "dedent": {
       "version": "0.7.0",
@@ -25764,9 +25892,9 @@
       }
     },
     "eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz",
+      "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==",
       "requires": {
         "@eslint/eslintrc": "^1.3.3",
         "@humanwhocodes/config-array": "^0.11.6",
@@ -26381,9 +26509,9 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
     "fastq": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
-      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
+      "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -30191,11 +30319,11 @@
       "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w=="
     },
     "language-tags": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
-      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.6.tgz",
+      "integrity": "sha512-HNkaCgM8wZgE/BZACeotAAgpL9FUjEnhgF0FVQMIgH//zqTPreLYMb3rWYkYAqPoF75Jwuycp1da7uz66cfFQg==",
       "requires": {
-        "language-subtag-registry": "~0.3.2"
+        "language-subtag-registry": "^0.3.20"
       }
     },
     "leven": {
@@ -30419,9 +30547,9 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
     },
     "mini-css-extract-plugin": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.1.tgz",
-      "integrity": "sha512-viOoaUFy+Z2w43VsGPbtfwFrr0tKwDctK9dUofG5MBViYhD1noGFUzzDIVw0KPwCGUP+c7zqLxm+acuQs7zLzw==",
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz",
+      "integrity": "sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==",
       "requires": {
         "schema-utils": "^4.0.0"
       },
@@ -31139,9 +31267,9 @@
       }
     },
     "postcss-custom-properties": {
-      "version": "12.1.10",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.10.tgz",
-      "integrity": "sha512-U3BHdgrYhCrwTVcByFHs9EOBoqcKq4Lf3kXwbTi4hhq0qWhl/pDWq2THbv/ICX/Fl9KqeHBb8OVrTf2OaYF07A==",
+      "version": "12.1.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz",
+      "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==",
       "requires": {
         "postcss-value-parser": "^4.2.0"
       }
@@ -31816,6 +31944,22 @@
         }
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -31965,6 +32109,25 @@
         "uncontrollable": "^7.2.1"
       }
     },
+    "react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-chartjs-2": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",
@@ -32136,20 +32299,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz",
-      "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==",
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
       "requires": {
-        "@remix-run/router": "1.0.3"
+        "@remix-run/router": "1.0.4"
       }
     },
     "react-router-dom": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz",
-      "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==",
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
       "requires": {
-        "@remix-run/router": "1.0.3",
-        "react-router": "6.4.3"
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
       }
     },
     "react-scripts": {
@@ -33272,9 +33435,9 @@
       }
     },
     "terser": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.0.tgz",
-      "integrity": "sha512-KjTV81QKStSfwbNiwlBXfcgMcOloyuRdb62/iLFPGBcVNF4EXjhdYBhYHmbJpiBrVxZhDvltE11j+LBQUxEEJg==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
+      "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
       "requires": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
diff --git a/package.json b/package.json
index dd6f8b4..8afcf8a 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "addeventlistener": "^2.0.0",
-    "axios": "^1.2.0",
+    "axios": "^1.2.1",
+    "bootstrap": "^5.2.3",
     "chart": "^0.1.2",
     "chart.js": "^4.0.1",
     "crypto-js": "^4.1.1",
@@ -25,6 +26,7 @@
     "pg": "^8.8.0",
     "react": "^18.2.0",
     "react-big-calendar": "^1.5.0",
+    "react-bootstrap": "^2.7.0",
     "react-chartjs-2": "^5.0.1",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
diff --git a/public/LogoApp.svg b/public/LogoApp.svg
index efe961e..c9bd527 100644
--- a/public/LogoApp.svg
+++ b/public/LogoApp.svg
@@ -3,7 +3,7 @@
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
- preserveAspectRatio="xMidYMid meet">
+ preserveAspectRatio="xMidYMid meet" fill="#ffff">
 
 <g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
diff --git a/public/LogoApp_light.svg b/public/LogoApp_light.svg
new file mode 100644
index 0000000..d4d1a56
--- /dev/null
+++ b/public/LogoApp_light.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
+fill="rgb(159, 166, 188)" stroke="none">
+<path d="M1658 3437 l-136 -274 79 -43 c44 -23 82 -40 83 -39 2 2 65 125 141
+273 132 257 137 270 119 283 -23 18 -131 73 -141 73 -5 0 -70 -123 -145 -273z
+m10 -203 c26 -18 28 -50 5 -76 -20 -22 -41 -23 -65 -1 -25 22 -23 59 4 77 12
+9 25 16 28 16 3 0 16 -7 28 -16z"/>
+<path d="M1621 3206 c-9 -10 -8 -16 4 -26 21 -17 51 6 34 26 -6 8 -15 14 -19
+14 -4 0 -13 -6 -19 -14z"/>
+<path d="M3117 3676 c-31 -18 -62 -37 -68 -43 -7 -7 30 -91 126 -283 112 -225
+139 -271 153 -265 45 17 142 77 142 88 -1 25 -268 532 -281 533 -8 1 -40 -13
+-72 -30z m271 -442 c30 -21 29 -59 -3 -80 -55 -36 -106 26 -60 72 28 28 33 29
+63 8z"/>
+<path d="M3342 3207 c-15 -17 1 -42 23 -33 18 6 17 37 -1 43 -6 2 -16 -2 -22
+-10z"/>
+<path d="M2235 3579 c-136 -35 -179 -41 -225 -28 -11 3 -46 -56 -127 -216 -62
+-121 -112 -225 -113 -231 0 -5 21 -20 46 -33 l47 -22 30 30 c40 42 96 43 136
+3 15 -15 30 -34 33 -42 4 -13 8 -12 25 3 46 40 134 8 151 -56 7 -26 13 -32 33
+-29 55 6 116 -61 106 -115 -4 -19 0 -23 22 -23 15 0 35 -6 46 -14 11 -7 28
+-15 38 -17 9 -2 43 -38 75 -79 64 -83 98 -98 139 -63 45 39 42 53 -50 180 -17
+24 -27 46 -23 50 8 8 11 5 88 -95 39 -51 53 -62 77 -62 33 0 66 25 75 56 6 21
+-1 35 -77 141 -61 84 -24 71 40 -14 69 -91 99 -107 141 -76 46 34 41 67 -26
+159 -84 114 -182 215 -281 290 -84 62 -87 64 -147 64 -54 0 -74 -6 -161 -50
+-140 -72 -207 -78 -232 -24 -10 23 -8 34 14 80 14 30 45 70 68 90 47 39 212
+145 240 152 27 7 1 32 -32 31 -14 -1 -93 -19 -176 -40z"/>
+<path d="M2451 3564 c-127 -67 -183 -104 -239 -158 -71 -67 -91 -125 -52 -146
+26 -14 116 10 169 46 52 34 143 64 194 64 34 0 58 -9 106 -40 80 -52 226 -193
+308 -297 36 -46 67 -83 70 -83 15 0 233 124 233 133 0 5 -40 86 -89 181 -49
+94 -102 199 -119 232 l-31 61 -38 -10 c-33 -9 -62 -4 -203 32 -91 22 -174 41
+-185 41 -11 0 -67 -25 -124 -56z"/>
+<path d="M1894 3043 c-50 -55 -61 -86 -39 -119 39 -61 87 -55 144 17 48 60 51
+86 15 123 -40 39 -70 34 -120 -21z"/>
+<path d="M2112 3033 c-28 -11 -132 -156 -132 -183 0 -36 38 -70 78 -70 27 0
+40 10 88 68 31 37 60 78 65 91 23 57 -42 117 -99 94z"/>
+<path d="M2243 2924 c-16 -7 -121 -146 -123 -164 -7 -53 27 -93 75 -88 41 4
+155 139 155 184 0 52 -57 88 -107 68z"/>
+<path d="M2324 2754 c-57 -63 -79 -104 -70 -137 8 -32 58 -61 90 -53 30 7 126
+133 126 163 0 31 -46 73 -78 73 -17 0 -39 -15 -68 -46z"/>
+<path d="M2490 2722 c0 -16 -13 -47 -30 -70 -16 -23 -30 -46 -30 -52 0 -6 15
+-17 33 -26 31 -15 36 -15 65 0 49 25 51 57 8 121 -20 30 -38 55 -41 55 -3 0
+-5 -13 -5 -28z"/>
+<path d="M1428 2430 c-240 -29 -435 -182 -500 -395 -17 -52 -22 -95 -22 -170
+0 -268 143 -451 398 -510 136 -32 371 -15 507 36 47 17 58 26 62 48 10 50 20
+181 14 181 -4 0 -19 -25 -33 -55 -15 -31 -49 -76 -76 -101 -68 -63 -125 -87
+-227 -92 -152 -8 -254 30 -357 132 -125 125 -185 330 -155 526 23 150 108 274
+224 330 197 95 451 35 558 -131 18 -27 36 -49 41 -49 10 0 10 36 1 120 -6 62
+-7 63 -47 81 -88 38 -276 62 -388 49z"/>
+<path d="M2040 2419 c0 -8 9 -20 19 -26 37 -23 41 -74 41 -508 0 -434 -4 -486
+-40 -505 -43 -23 -17 -30 105 -30 69 0 125 2 125 5 0 3 -12 17 -27 30 l-28 23
+-3 246 -3 246 82 0 c152 0 185 -32 288 -285 72 -175 96 -221 133 -248 42 -31
+178 -36 178 -7 0 6 -11 10 -25 10 -47 0 -83 57 -164 262 -24 59 -56 127 -71
+152 -34 53 -99 103 -146 112 -37 7 -47 24 -14 24 31 0 118 36 156 65 61 46 87
+100 92 186 4 67 1 82 -19 118 -56 100 -156 130 -466 138 -180 5 -213 4 -213
+-8z m391 -35 c114 -32 178 -116 179 -232 0 -75 -15 -116 -61 -160 -45 -43
+-112 -62 -226 -62 l-93 0 0 235 0 235 72 0 c39 0 98 -7 129 -16z"/>
+<path d="M2945 2421 c-3 -5 8 -18 25 -27 62 -37 64 -57 68 -489 4 -443 1 -484
+-33 -517 -14 -13 -25 -26 -25 -30 0 -5 43 -8 95 -8 97 0 116 9 68 32 -15 7
+-36 29 -47 48 -20 33 -21 53 -24 440 -2 222 0 401 4 397 4 -4 92 -146 194
+-315 103 -169 194 -308 202 -310 10 -2 78 103 209 325 l194 328 3 -409 c2
+-423 -1 -472 -39 -504 -10 -9 -19 -20 -19 -24 0 -5 56 -8 125 -8 69 0 125 2
+125 4 0 3 -13 17 -29 33 -26 27 -29 38 -36 124 -11 144 0 767 14 811 7 21 27
+50 46 65 18 15 31 31 29 35 -3 4 -41 8 -84 8 -75 0 -80 -1 -97 -27 -11 -16
+-100 -164 -198 -330 -99 -167 -182 -303 -185 -303 -3 1 -94 149 -204 330
+l-198 330 -88 0 c-49 0 -91 -4 -95 -9z"/>
+</g>
+</svg>
diff --git a/server-api/api.js b/server-api/api.js
index 9bc0db6..d1d96a9 100644
--- a/server-api/api.js
+++ b/server-api/api.js
@@ -3,6 +3,22 @@ const express = require('express');
 const cors=require("cors");
 const bodyparser = require('body-parser');
 
+
+const nodemailer = require('nodemailer');
+const CryptoJS = require('crypto-js');
+
+
+// Créer un transporteur de mail
+let transporter = nodemailer.createTransport({
+  host: 'smtp.gmail.com',
+  port: 587,
+//   secure: true, // utiliser SSL
+  auth: {
+    user: 'stageodinnonoffi@gmail.com',
+    pass: 'pjjlofjkpnfpwkiz'
+  }
+});
+
 const db = mysql.createConnection({
     host: 'lfbn-cle-1-608-214.w92-157.abo.wanadoo.fr',
     user: 'crmuser',
@@ -130,7 +146,52 @@ app.get('/Sale/Pie/:iduser/:month/:year', (req, res) => {
     const iduser = req.params.iduser;
     const month = req.params.month;
     const year = req.params.year;
-    let sql = 'SELECT DISTINCT SUM(s.amount) as total,cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?) OR s.year > ?) GROUP BY cu.name ORDER BY total DESC';
+    let sql = 'SELECT DISTINCT SUM(s.amount) as total,cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?) OR s.year > ?) GROUP BY cu.name ORDER BY total DESC LIMIT 10';
+
+    db.query(sql, [iduser,month,year,year], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.get('/Sale/KeyNumber/:iduser/:month/:year', (req, res) => {
+    
+    const iduser = req.params.iduser;
+    const month = req.params.month;
+    const year = req.params.year;
+    let sql = 'SELECT SUM(s.amount) as total,COUNT(co.firstname) as totalcontact FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?))';
+
+    db.query(sql, [iduser,month,year], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.get('/Sale/BestCustomer/:iduser', (req, res) => {
+    
+    const iduser = req.params.iduser;
+    const month = req.params.month;
+    const year = req.params.year;
+    let sql = 'SELECT SUM(s.amount) as total, cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer GROUP BY cu.name ORDER BY cu.name LIMIT 1';
+
+    db.query(sql, [iduser], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.get('/Sale/Line/:iduser/:month/:year', (req, res) => {
+    
+    const iduser = req.params.iduser;
+    const month = req.params.month;
+    const year = req.params.year;
+    let sql = 'SELECT DISTINCT SUM(s.amount) as total,s.year,s.month FROM sales s,customers cu,contacts co WHERE co.iduser = 41 AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= 12 AND s.year = 2021) OR s.year > 2021) GROUP BY s.year,s.month ORDER BY s.year,s.month';
 
     db.query(sql, [iduser,month,year,year], (err, result) => {
         if (err) throw err;
@@ -212,13 +273,37 @@ app.post('/User/Add', (req, res) => {
     let form = req.body;
 
     console.log(form);
+    
+    let rand_pass = "";
+    const carac="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&*#-+@!$%?/()[]{}0123456789&*#-+@!$%?/()[]{}";
+    for(var i=0;i<10;i++)
+    {
+        rand_pass += carac[Math.floor(Math.random()*carac.length)];
+    }
 
-    const sql = `INSERT INTO users(lastname, firstname, idrole, login, password, phone, mail) VALUES ('${form.lastname}', '${form.firstname}', '${form.idrole}', '${form.login}', '${form.password}', '${form.phone}', '${form.mail}')`;
+    const sql = `INSERT INTO users(lastname, firstname, idrole, login, password, phone, mail) VALUES ('${form.lastname}', '${form.firstname}', '${form.idrole}', '${form.login}', '${CryptoJS.SHA256(rand_pass).toString(CryptoJS.enc.Hex)}', '${form.phone}', '${form.mail}')`;
     db.query(sql , (err, result) => { 
         if (err) throw err;
         console.log(result);
         res.send('Post added...' + result.insertId);
     });
+
+    let mailOptions = {
+        from: '"JTT CRM" <JTT@CRM.fr>',
+        to: form.mail,
+        subject: "Connexion a JTTCRM",
+        text: "Voici ton mot de passe : " + rand_pass,
+    };
+
+    transporter.sendMail(mailOptions, (error, info) => {
+        if (error) {
+            console.log(error);
+        } else {
+            console.log('Email sent with mdp: ' + info.response);
+        }
+      });
+
+
 });
 
 app.put('/User/Update/:id', (req, res) => {
@@ -263,6 +348,18 @@ app.delete('/User/Delete/:id', (req, res) => {
 
 //Api pour les contacts de la page repertoire
 
+app.get('/Contact/LastAdd3/:iduser', (req, res) => {
+
+    const iduser = req.params.iduser;
+
+    let sql = 'SELECT c.firstname,c.lastname FROM contacts c WHERE c.iduser = ? ORDER BY c.idcontact DESC LIMIT 3';
+    db.query(sql,[iduser], (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send(result);
+    });
+});
+
 app.get('/Contact/AllWithCustomerName', (req, res) => {
     let sql = 'SELECT c.*, cu.name FROM contacts c, customers cu WHERE cu.idCustomer = c.idCustomer ORDER BY idcontact';
     db.query(sql, (err, result) => {
@@ -270,4 +367,102 @@ app.get('/Contact/AllWithCustomerName', (req, res) => {
         console.log(result);
         res.send(result);
     });
+});
+
+app.get('/Entreprise/All', (req, res) => {
+    let sql = 'SELECT idcustomer,name FROM customers ORDER BY name';
+    db.query(sql, (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.get('/Contact/Exist/:phone', (req, res) => {
+    const phone = req.params.phone
+    let sql = 'SELECT idcontact FROM contacts WHERE phone = ?';
+
+    db.query(sql, [phone], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.post('/Contact/Add', (req, res) => {
+    
+    let form = req.body;
+
+    console.log("on est dans le form",form);
+
+    const sql = `INSERT INTO contacts(firstname,lastname, mail, phone, iduser, idcustomer) VALUES ('${form.firstname}', '${form.lastname}', '${form.mail}',  '${form.phone}', '${form.iduser}', '${form.idcustomer}' )`;
+    db.query(sql , (err, result) => { 
+        if (err) throw err;
+        console.log(result);
+        res.send('Post added...' + result.insertId);
+    });
+});
+
+app.get('/Contact/:iduser', (req, res) => {
+
+    const iduser = req.params.iduser;
+
+    let sql = 'SELECT c.idcontact,c.firstname,c.lastname,cu.name FROM contacts c,customers cu WHERE cu.idcustomer = c.idcustomer AND c.iduser = ?';
+    db.query(sql,[iduser], (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.post('/Event/Add', (req, res) => {
+    
+    let form = req.body;
+    
+    console.log("on est dans le form d'un event ",form);
+    
+    const sql = `INSERT INTO events(date,starttime,endtime,comment,idusersend,iduserreceive,idcontact) VALUES ('${form.date}', '${form.starttime}', '${form.endtime}', '${form.comment}', '${form.idusersend}', '${form.iduserreceive}', '${form.idcontact}')`;
+     db.query(sql , (err, result) => { 
+        if (err) throw err;
+        console.log(result);
+        res.send('Post added...');
+    });
+});
+
+app.get('/Event/:iduser', (req, res) => {
+
+    const iduser = req.params.iduser;
+
+    let sql = 'SELECT e.date,e.starttime,e.endtime,e.comment FROM events e where e.iduserreceive = ?';
+
+    db.query(sql,[iduser], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.post('/Mail/Avertir', (req, res) => {
+    // Définir les options du mail
+    let form = req.body;
+    console.log(form)
+    let mailOptions = {
+        from: '"JTT CRM" <JTT@CRM.fr>',
+        to: 'Jeremy.DUCOURTHIALE@etu.uca.fr',
+        subject: form.objet,
+        text: form.raison
+    };
+
+    transporter.sendMail(mailOptions, (error, info) => {
+        if (error) {
+            console.log(error);
+            res.send(false)
+        } else {
+            console.log('Email sent: ' + info.response);
+            res.send(true)
+        }
+      });
+
 });
\ No newline at end of file
diff --git a/server-api/package-lock.json b/server-api/package-lock.json
index e6a9738..dc8c041 100644
--- a/server-api/package-lock.json
+++ b/server-api/package-lock.json
@@ -15,6 +15,7 @@
         "@mui/material": "^5.10.13",
         "body": "^5.1.0",
         "body-parser": "^1.20.1",
+        "bootstrap": "^5.2.3",
         "corps": "^0.1.0",
         "cors": "^2.8.5",
         "crypto-js": "^4.1.1",
@@ -22,7 +23,6 @@
         "fullcalendar": "^5.11.3",
         "googleapis": "^105.0.0",
         "mysql": "^2.18.1",
-        "nodemailer": "^6.8.0",
         "parser": "^0.1.4"
       },
       "devDependencies": {
@@ -866,6 +866,48 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -907,6 +949,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1119,6 +1166,24 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
       "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1266,6 +1331,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -1430,6 +1500,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -1975,6 +2053,14 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -2493,6 +2579,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -2564,6 +2667,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -2582,6 +2714,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -2911,6 +3048,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -2985,6 +3136,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -3577,6 +3736,38 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@react-aria/ssr": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.0.tgz",
+      "integrity": "sha512-qzuGk14/fUyUAoW/EBwgFcuMkVNXJVGlezTgZ1HovpCZ+p9844E7MUFHE7CuzFzPEIkVeqhBNIoIu+VJJ8YCOA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.1.tgz",
+      "integrity": "sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -3618,6 +3809,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3782,6 +3978,12 @@
         }
       }
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3876,6 +4078,11 @@
         "readdirp": "~3.6.0"
       }
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -4006,6 +4213,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -4433,6 +4645,14 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -4802,6 +5022,22 @@
         }
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -4850,6 +5086,25 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-bootstrap": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz",
+      "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.4.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4865,6 +5120,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5130,6 +5390,17 @@
         "mime-types": "~2.1.24"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -5176,6 +5447,14 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/server-api/package.json b/server-api/package.json
index 93ba6ec..20a0e19 100644
--- a/server-api/package.json
+++ b/server-api/package.json
@@ -15,6 +15,7 @@
     "@mui/material": "^5.10.13",
     "body": "^5.1.0",
     "body-parser": "^1.20.1",
+    "bootstrap": "^5.2.3",
     "corps": "^0.1.0",
     "cors": "^2.8.5",
     "crypto-js": "^4.1.1",
@@ -23,7 +24,8 @@
     "googleapis": "^105.0.0",
     "mysql": "^2.18.1",
     "nodemailer": "^6.8.0",
-    "parser": "^0.1.4"
+    "parser": "^0.1.4",
+    "react-bootstrap": "^2.7.0"
   },
   "description": "",
   "devDependencies": {
diff --git a/src/App.js b/src/App.js
index 0a85a37..f47d42c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,8 @@ import Calendrier from './pages/Calendrier';
 import Repertoire from './pages/Repertoire';
 import Parametres from './pages/Parametres';
 import Chargement from './pages/Chargement';
+import MailPourAdmin from './pages/MailPourAdmin';
+import AddContact from './components/Contact/AddContact'
 import { Component } from 'fullcalendar';
 import RestartPassword from './pages/RestartPassword';
 
@@ -40,6 +42,8 @@ const App = () => {
         <Route path="/Repertoire" element={<Repertoire />} />
         <Route path="/Parametres" element={<Parametres />} />
         <Route path="/Chargement" element={<Chargement />} />
+        <Route path="/MailPourAdmin" element={<MailPourAdmin />} />
+        <Route path="/Repertoire/add" element={<AddContact />} />
         </Routes>
       </BrowserRouter>
     );
diff --git a/src/components/Contact/AddContact.js b/src/components/Contact/AddContact.js
index c9c0c60..156e9ae 100644
--- a/src/components/Contact/AddContact.js
+++ b/src/components/Contact/AddContact.js
@@ -1,42 +1,97 @@
-import React, {useState} from 'react'
-import {useNavigate} from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios'
+import NavigationDashboard from '../NavigationDashboard.js';
+import CryptoJS from 'crypto-js';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { NavLink } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
+import { Button } from '@mui/material';
+import Session from 'react-session-api';
 // HERE ABOVE useHistory IS REPLACED WITH useNavigate 
 
-function AddContact(props) {
-    
-    const navigate=useNavigate();
-    const [User, setUser] = useState({name:"", email:""});
-    
-    let add = (e) => {
-        e.preventDefault();
-        if(User.name === "" || User.email === ""){
-            alert("All fields are mandatory!!!");
-            return
-        }
-        // THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE 
-        props.addContactHandler(User);
-        // THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
-        setUser({name:"", email:""});
-        //console.log(props);
-        navigate('/');
-    }
-    
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+})
+
+function AddContact() {
+
+    const [loginError, setLoginError] = useState(false);
+    const [entreprises, setEntreprises] = useState([]);
+    const [selectedIdEntreprise, setSelectedIdEntreprise] = useState(1);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        api.get('/Entreprise/All').then((response) => {
+            setEntreprises(response.data);
+        });
+    }, []);
+
+    function handleChangeEntreprise(event) {
+        setSelectedIdEntreprise(event.target.value);
+        console.log("je suis dans handleChangeEntreprise");
+    };
+
+    function checkAdd(event) {
+
+        event.preventDefault();
+
+        const formData = new FormData(event.currentTarget);
+        const values = Object.fromEntries(formData.entries());
+        api.get('/Contact/Exist/' + values.phone).then((response) => {
+            const login = response.data;
+            if (login.length > 0) {
+                setLoginError(true);
+            }
+            else {
+                setLoginError(false);
+                const newContact = { firstname: values.firstname, lastname: values.lastname, phone: values.phone, mail: values.mail, iduser: Session.get('idUser'), idcustomer: selectedIdEntreprise };
+                api.post('/Contact/Add', newContact).then(function (response) {
+                    console.log(response.data);
+                });
+                navigate("/Repertoire");
+            }
+
+        });
+
+    };
+
+
     return (
-        <div className='ui main'>
-            <h2>Add Contact</h2>
-            <form className='ui form' onSubmit={add}>
-                <div className='field'>
-                    <label>Name</label>
-                    <input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({...User, name: e.target.value})}/>
-                </div>
-                <div className='field'>
-                    <label>Email</label>
-                    <input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({...User, email: e.target.value})}/>
-                </div>
-                <button className='ui secondary button'>Add</button>
-            </form>
+        <div className='addContactPage'>
+            <h2>Ajouter un nouveau contact</h2>
+            <div className="Formulaire">
+                <form className="form" onSubmit={checkAdd}>
+                    <table className="Formulaire_de_connexion">
+                        <tr>
+                            <div className="texte_côté">
+                                <p>Nom :</p>
+                                <p>Prénom :</p>
+                                <p>Téléphone :</p>
+                                <p>Email :</p>
+                                <p>Entreprise :</p>
+                            </div>
+                        </tr>
+                        <tr>
+                            <input id="nom" name='firstname' className="texte_zone" type="text" placeholder="Nom..." required />
+                            <input id="prenom" name='lastname' className="texte_zone" type="text" placeholder="Prénom..." required />
+                            <input id="phone" name='phone' className="texte_zone" type="tel"
+                                placeholder="Téléphone..." pattern="[0-9]{10}" required />
+                            <input id="email" name='mail' className="texte_zone" type="email" placeholder="Email..." required />
+                            <Select name='idcustomer' value={selectedIdEntreprise} onChange={handleChangeEntreprise}>
+                                {entreprises.map(entreprise => (<MenuItem value={entreprise.idcustomer}>{entreprise.name}</MenuItem>))}
+                            </Select>
+                        </tr>
+                    </table>
+                    <p>{loginError === true ? "Le contact existe déja" : ''}</p>
+                    <div className="bouton_submit">
+                        <button className="bouton_val" type="submit">Valider</button>
+                        <NavLink className="bouton_ann" to="/Repertoire">Retour</NavLink>
+                    </div>
+                </form>
+            </div>
         </div>
     )
 }
 
-export default AddContact
+export default AddContact;
diff --git a/src/components/Menu.js b/src/components/Menu.js
deleted file mode 100644
index 7c04e13..0000000
--- a/src/components/Menu.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const Menu = () => {
-    return (
-        <div>
-            
-        </div>
-    );
-};
-
-export default Menu;
\ No newline at end of file
diff --git a/src/components/NavigationDashboard.js b/src/components/NavigationDashboard.js
index 3140621..bde3622 100644
--- a/src/components/NavigationDashboard.js
+++ b/src/components/NavigationDashboard.js
@@ -43,43 +43,116 @@ const NavigationDashboard = () => {
         )
     }
 
+    function HandleMouseOverCompte() {
+        const svgPath = document.querySelector('.svgPathCompte');
+        svgPath.setAttribute('d', 'M24 23.8q-3.45 0-5.625-2.175T16.2 16q0-3.45 2.175-5.625T24 8.2q3.45 0 5.625 2.175T31.8 16q0 3.45-2.175 5.625T24 23.8Zm12.9 16.65H11.1q-1.4 0-2.4-1t-1-2.4v-1.6q0-2 1-3.425 1-1.425 2.55-2.175 3.4-1.5 6.5-2.25t6.25-.75q3.15 0 6.225.775Q33.3 28.4 36.7 29.9q1.6.7 2.6 2.125t1 3.425v1.6q0 1.4-1 2.4t-2.4 1Zm-25.8-3.4h25.8V35.5q0-.8-.475-1.525-.475-.725-1.175-1.075-3.15-1.5-5.775-2.075Q26.85 30.25 24 30.25q-2.85 0-5.525.575Q15.8 31.4 12.7 32.9q-.7.35-1.15 1.075-.45.725-.45 1.525ZM24 20.4q1.9 0 3.15-1.25T28.4 16q0-1.9-1.25-3.15T24 11.6q-1.9 0-3.15 1.25T19.6 16q0 1.9 1.25 3.15T24 20.4Zm0-4.4Zm0 21.05Z');
+    }
+
+    function HandleMouseOutCompte() {
+        const svgPath = document.querySelector('.svgPathCompte');
+        svgPath.setAttribute('d', 'M24 23.8q-3.4 0-5.525-2.125-2.125-2.125-2.125-5.525 0-3.4 2.125-5.55T24 8.45q3.4 0 5.55 2.15t2.15 5.55q0 3.4-2.15 5.525Q27.4 23.8 24 23.8ZM11.2 40.15q-1.35 0-2.3-.975-.95-.975-.95-2.325v-1.6q0-1.95.975-3.35.975-1.4 2.525-2.1 3.35-1.5 6.4-2.25 3.05-.75 6.15-.75 3.1 0 6.125.775T36.5 29.8q1.6.7 2.6 2.1 1 1.4 1 3.35v1.6q0 1.35-.95 2.325-.95.975-2.35.975Z');
+
+    }
+
+    function HandleMouseOverDashboard() {
+        const svgPath = document.querySelector('.svgPathDashboard');
+        svgPath.setAttribute('d', 'M20.45 31.75q1.15 1.15 3.325 1.075 2.175-.075 3.175-1.625l9-13.95q.4-.65-.075-1.1-.475-.45-1.075-.05L21 25.2q-1.5 1-1.6 3.2-.1 2.2 1.05 3.35ZM9.7 40.3q-.95 0-1.85-.475-.9-.475-1.3-1.325-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4Q19.85 7.75 24 7.75q2.25 0 4.7.575t4.85 1.875q1.1.6 1.225 1.475.125.875-.525 1.475-.45.35-1.025.425-.575.075-1.125-.175-2.05-1.15-4.25-1.7T24 11.15q-6.95 0-11.875 4.975T7.2 28.2q0 2.25.625 4.5t1.725 4.2H38.4q1.1-1.8 1.725-4.15.625-2.35.625-4.65 0-1.8-.45-3.85t-1.55-3.95q-.35-.55-.225-1.15.125-.6.575-1 .65-.5 1.4-.35.75.15 1.15.9 1.2 2.3 1.825 4.55t.675 4.55q.05 3-.625 5.7t-2.075 5q-.65 1.25-1.375 1.525-.725.275-1.825.275ZM24 24Z');
+    }
+
+    function HandleMouseOutDashboard() {
+        const svgPath = document.querySelector('.svgPathDashboard');
+        svgPath.setAttribute('d', 'M21.05 31q1.2 1.2 3.1 1.175 1.9-.025 2.8-1.375L36 17.3q.4-.65-.075-1.1-.475-.45-1.075-.05l-13.5 9.05q-1.35.9-1.425 2.75Q19.85 29.8 21.05 31Zm-11.3 9.3q-.95 0-1.85-.475Q7 39.35 6.6 38.5q-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4q3.7-1.625 7.85-1.625 4.15 0 7.825 1.625t6.4 4.4Q41 16.55 42.6 20.275t1.6 7.925q0 2.85-.65 5.425Q42.9 36.2 41.5 38.5q-.65 1.25-1.375 1.525-.725.275-1.825.275Z');
+
+    }
+
+    function HandleMouseOverAnalyse() {
+        const svgPath = document.querySelector('.svgPathAnalyse');
+        svgPath.setAttribute('d', 'M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Zm0-3.4h29.8V9.1H9.1v29.8Zm0 0V9.1v29.8Z');
+    }
+
+    function HandleMouseOutAnalyse() {
+        const svgPath = document.querySelector('.svgPathAnalyse');
+        svgPath.setAttribute('d', 'M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Z');
+    }
+
+    function HandleMouseOverRepertoire() {
+        const svgPath = document.querySelector('.svgPathRepertoire');
+        svgPath.setAttribute('d', 'M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM24 28.6q-3.85 0-6.25 1.15t-2.5 2.95v.2h17.5v-.25q-.1-1.75-2.5-2.9T24 28.6ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Zm0-9.05q-1.25 0-2.075.85-.825.85-.825 2.05 0 1.25.825 2.1.825.85 2.075.85 1.25 0 2.075-.85.825-.85.825-2.1 0-1.2-.825-2.05-.825-.85-2.075-.85Zm0 18.1Zm0-15.2Z');
+    }
+
+    function HandleMouseOutRepertoire() {
+        const svgPath = document.querySelector('.svgPathRepertoire');
+        svgPath.setAttribute('d', 'M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Z');
+    }
+
+    function HandleMouseOverParametres() {
+        const svgPath = document.querySelector('.svgPathParametres');
+        svgPath.setAttribute('d', 'M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Zm0-3q-1.5 0-2.5-1.025T20.5 24q0-1.45 1-2.475 1-1.025 2.5-1.025 1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm0-3.5Zm-2.1 16.9h4.2l.7-5.6q1.65-.4 3.15-1.25t2.7-2.1l5.3 2.3 1.9-3.45-4.7-3.4q.2-.85.35-1.7.15-.85.15-1.7t-.125-1.7q-.125-.85-.375-1.7l4.7-3.4-1.9-3.45-5.3 2.3q-1.15-1.35-2.625-2.25-1.475-.9-3.225-1.1l-.7-5.6h-4.2l-.7 5.6q-1.7.3-3.2 1.175-1.5.875-2.7 2.175l-5.25-2.3-1.9 3.45 4.65 3.4q-.2.85-.325 1.7T12.35 24q0 .85.125 1.7t.325 1.7l-4.65 3.4 1.9 3.45 5.25-2.3q1.25 1.25 2.75 2.1 1.5.85 3.15 1.25Z');
+    }
+
+    function HandleMouseOutParametres() {
+        const svgPath = document.querySelector('.svgPathParametres');
+        svgPath.setAttribute('d', 'M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z');
+    }
+
+    function HandleMouseOverCalendrier(){
+        const svgPath = document.querySelector('.svgPathCalendrier');
+        svgPath.setAttribute('d', 'M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Zm0-24.4h29.8v-6.4H9.1Zm0 0v-6.4 6.4Z');
+    }
+
+    function HandleMouseOutCalendrier(){
+        const svgPath = document.querySelector('.svgPathCalendrier');
+        svgPath.setAttribute('d','M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Z');
+    }
+
+
+
     return (
         <div className="nav_bar_verticale">
             <div className="parti_one">
                 <NavLink className="mon_compte" to="/Account">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img1} secondaryImg={img11} alt="" />
+                        <svg onMouseOver={HandleMouseOverCompte} onMouseOut={HandleMouseOutCompte} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                            <path onMouseOut={HandleMouseOutCompte} onMouseOver={HandleMouseOverCompte} className="svgPathCompte" d="M24 23.8q-3.4 0-5.525-2.125-2.125-2.125-2.125-5.525 0-3.4 2.125-5.55T24 8.45q3.4 0 5.55 2.15t2.15 5.55q0 3.4-2.15 5.525Q27.4 23.8 24 23.8ZM11.2 40.15q-1.35 0-2.3-.975-.95-.975-.95-2.325v-1.6q0-1.95.975-3.35.975-1.4 2.525-2.1 3.35-1.5 6.4-2.25 3.05-.75 6.15-.75 3.1 0 6.125.775T36.5 29.8q1.6.7 2.6 2.1 1 1.4 1 3.35v1.6q0 1.35-.95 2.325-.95.975-2.35.975Z">
+                            </path>
+                        </svg>
                     </button>
                 </NavLink>
             </div>
             <div className="parti_two">
                 <NavLink className="dashboard" to="/Dashboard">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img2} secondaryImg={img21} alt="" />
+                        <svg onMouseOver={HandleMouseOverDashboard} onMouseOut={HandleMouseOutDashboard} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                            <path onMouseOut={HandleMouseOutDashboard} onMouseOver={HandleMouseOverDashboard} className="svgPathDashboard" d="M21.05 31q1.2 1.2 3.1 1.175 1.9-.025 2.8-1.375L36 17.3q.4-.65-.075-1.1-.475-.45-1.075-.05l-13.5 9.05q-1.35.9-1.425 2.75Q19.85 29.8 21.05 31Zm-11.3 9.3q-.95 0-1.85-.475Q7 39.35 6.6 38.5q-1.35-2.4-2.05-4.925-.7-2.525-.7-5.375 0-4.2 1.6-7.925 1.6-3.725 4.325-6.5t6.425-4.4q3.7-1.625 7.85-1.625 4.15 0 7.825 1.625t6.4 4.4Q41 16.55 42.6 20.275t1.6 7.925q0 2.85-.65 5.425Q42.9 36.2 41.5 38.5q-.65 1.25-1.375 1.525-.725.275-1.825.275Z">
+                            </path>
+                        </svg>
                     </button>
                 </NavLink>
                 <NavLink className="analyse" to="/Analyse">
-                        <button className="button" type="submit">
-                            <ImageToggleOnMouseOver primaryImg={img3} secondaryImg={img31} alt="" />
-                        </button>
+                    <button className="button" type="submit">
+                        <svg onMouseOver={HandleMouseOverAnalyse} onMouseOut={HandleMouseOutAnalyse} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathAnalyse" d="M15.75 34.15q.65 0 1.075-.425.425-.425.425-1.075V21.9q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v10.75q0 .65.45 1.075.45.425 1.05.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-17.3q0-.65-.425-1.075-.425-.425-1.075-.425-.65 0-1.075.425-.425.425-.425 1.075v17.3q0 .65.425 1.075.425.425 1.075.425Zm8.25 0q.65 0 1.075-.425.425-.425.425-1.075v-4.4q0-.65-.45-1.075-.45-.425-1.05-.425-.65 0-1.075.425-.425.425-.425 1.075v4.4q0 .65.425 1.075.425.425 1.075.425ZM9.1 42.3q-1.35 0-2.375-1.025T5.7 38.9V9.1q0-1.4 1.025-2.4t2.375-1h29.8q1.4 0 2.4 1t1 2.4v29.8q0 1.35-1 2.375T38.9 42.3Z"></path></svg>
+                    </button>
                 </NavLink>
                 <NavLink className="calendrier" to="/Calendrier">
-                        <button className="button" type="submit">
-                            <ImageToggleOnMouseOver primaryImg={img4} secondaryImg={img41} alt="" />
-                        </button>
+                    <button className="button" type="submit">
+                        <svg onMouseOver={HandleMouseOverCalendrier} onMouseOut={HandleMouseOutCalendrier} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                            <path onMouseOut={HandleMouseOutCalendrier} onMouseOver={HandleMouseOverCalendrier} className="svgPathCalendrier" d="M24 28.05q-.9 0-1.475-.575Q21.95 26.9 21.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 0q-.9 0-1.475-.575Q13.95 26.9 13.95 26q0-.9.575-1.475.575-.575 1.475-.575.9 0 1.475.575.575.575.575 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm16 0q-.85 0-1.45-.575T29.95 26q0-.9.6-1.475.6-.575 1.45-.575t1.45.575q.6.575.6 1.475 0 .9-.575 1.475-.575.575-1.475.575Zm-8 8q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm-8 0q-.9 0-1.475-.6-.575-.6-.575-1.45t.575-1.45q.575-.6 1.475-.6.9 0 1.475.575.575.575.575 1.475 0 .85-.575 1.45t-1.475.6Zm16 0q-.85 0-1.45-.6t-.6-1.45q0-.85.6-1.45t1.45-.6q.85 0 1.45.575t.6 1.475q0 .85-.575 1.45t-1.475.6ZM9.1 44.3q-1.35 0-2.375-1.025T5.7 40.9V10.1q0-1.4 1.025-2.4t2.375-1h3.15V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h16.6V5.4q0-.7.5-1.2t1.2-.5q.75 0 1.25.5t.5 1.2v1.3h3.15q1.4 0 2.4 1t1 2.4v30.8q0 1.35-1 2.375T38.9 44.3Zm0-3.4h29.8V19.5H9.1v21.4Z">
+                            </path>
+                        </svg>
+                    </button>
                 </NavLink>
             </div>
             <div className="parti_three">
                 <NavLink className="repertoire" to="/Repertoire">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img5} secondaryImg={img51} alt="" />
+                        <svg onMouseOver={HandleMouseOverRepertoire} onMouseOut={HandleMouseOutRepertoire} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathRepertoire" d="M1.55 36.15q-.7 0-1.2-.5t-.5-1.2v-1.1q0-2.05 2.1-3.275T7.5 28.85q.5 0 1.025.025.525.025.975.075-.4.9-.6 1.85-.2.95-.2 2v3.35Zm12 0q-.7 0-1.2-.5t-.5-1.2V32.8q0-3.3 3.35-5.375T24 25.35q5.45 0 8.8 2.075 3.35 2.075 3.35 5.375v1.65q0 .7-.5 1.2t-1.2.5Zm25.75 0V32.8q0-1.05-.2-2t-.6-1.85q.45-.05.975-.075.525-.025 1.025-.025 3.4 0 5.525 1.225Q48.15 31.3 48.15 33.35v1.1q0 .7-.5 1.2t-1.2.5ZM7.5 27.4q-1.5 0-2.55-1.05Q3.9 25.3 3.9 23.8q0-1.5 1.05-2.55Q6 20.2 7.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q9 27.4 7.5 27.4Zm33 0q-1.5 0-2.55-1.05-1.05-1.05-1.05-2.55 0-1.5 1.05-2.55Q39 20.2 40.5 20.2q1.5 0 2.55 1.05 1.05 1.05 1.05 2.55 0 1.5-1.05 2.55Q42 27.4 40.5 27.4ZM24 23.85q-2.55 0-4.35-1.775-1.8-1.775-1.8-4.375 0-2.55 1.8-4.325Q21.45 11.6 24 11.6t4.35 1.775q1.8 1.775 1.8 4.325 0 2.6-1.8 4.375T24 23.85Z"></path></svg>
                     </button>
                 </NavLink>
             </div>
             <div className="parti_four">
                 <NavLink className="parametres" to="/Parametres">
                     <button className="button" type="submit">
-                        <ImageToggleOnMouseOver primaryImg={img6} secondaryImg={img61} alt="" />
+                        <svg onMouseOver={HandleMouseOverParametres} onMouseOut={HandleMouseOutParametres} className="svgImage" xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path className="svgPathParametres" d="M27.35 44.3h-6.7q-.65 0-1.15-.4-.5-.4-.6-1.05l-.8-4.95q-.85-.3-1.85-.875T14.5 35.85l-4.55 2.1q-.6.3-1.25.1-.65-.2-.95-.8l-3.4-6.05q-.35-.55-.175-1.175T4.85 29l4.25-3.1q-.1-.4-.125-.95-.025-.55-.025-.95 0-.4.025-.95.025-.55.125-.95L4.85 19q-.5-.4-.675-1.025Q4 17.35 4.35 16.8l3.4-6.05q.35-.6.975-.8.625-.2 1.225.1l4.6 2.1q.7-.6 1.7-1.15 1-.55 1.85-.85l.8-5.05q.1-.6.6-1t1.15-.4h6.7q.65 0 1.15.4.5.4.6 1l.8 5q.85.35 1.875.875T33.5 12.15l4.55-2.1q.6-.3 1.25-.1.65.2.95.8l3.4 6q.35.55.2 1.2-.15.65-.7 1.05l-4.25 3q.1.45.125 1 .025.55.025 1 0 .45-.025.975-.025.525-.125.975L43.15 29q.5.4.675 1.025.175.625-.175 1.175l-3.4 6.05q-.35.6-.975.8-.625.2-1.225-.1l-4.6-2.1q-.7.6-1.675 1.2-.975.6-1.875.85l-.8 4.95q-.1.65-.6 1.05t-1.15.4ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z"></path></svg>
                     </button>
                 </NavLink>
             </div>
diff --git a/src/pages/Admin_create.js b/src/pages/Admin_create.js
index 3b21dbe..0bb2e76 100644
--- a/src/pages/Admin_create.js
+++ b/src/pages/Admin_create.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import axios from 'axios'
+import axios from 'axios';
 import NavigationAdmin from '../components/NavigationAdmin.js';
 import CryptoJS from 'crypto-js';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
@@ -28,6 +28,7 @@ function Admin_create() {
 
     function handleChangeRole(event){
         setSelectedIdRole(event.target.value);
+        console.log(event.target.value);
     };
 
     function checkAdd(event){
@@ -36,7 +37,6 @@ function Admin_create() {
 
         const formData = new FormData(event.currentTarget);
         const values = Object.fromEntries(formData.entries());
-        console.log(values.firstname);
         api.get('/User/Exist/'+ values.login).then((response) => {
             const login = response.data;
             if (login.length > 0){
@@ -44,7 +44,6 @@ function Admin_create() {
             }
             else {
                 setLoginError(false);
-                values.password = CryptoJS.SHA256(values.password).toString(CryptoJS.enc.Hex);
 
                 api.post('/User/Add', values).then (function(response) {
                     console.log(response.data);
@@ -63,7 +62,7 @@ function Admin_create() {
                 <div className="Formulaire">
                     <form className="form" onSubmit={checkAdd}>
                         <table className="Formulaire_de_connexion">
-                            <tr>
+                            <tr className="one-2">
                                 <div className="texte_côté">
                                     <p>Nom :</p>
                                     <p>Prénom :</p>
@@ -71,10 +70,9 @@ function Admin_create() {
                                     <p>Email :</p>
                                     <p>Rôle :</p>
                                     <p>Identifiant :</p>
-                                    <p>Mot de passe :</p>
                                 </div>
                             </tr>
-                            <tr>
+                            <tr className="two-2">
                                 <input id="nom" name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/>
                                 <input id="prenom" name='firstname' className="texte_zone" type="text" placeholder="Prénom..." required/>
                                 <input id="phone" name='phone' className="texte_zone" type="tel" 
@@ -90,7 +88,6 @@ function Admin_create() {
                                     ))}
                                 </Select>
                                 <input id="identifiant" name='login' className="texte_zone" type="text" placeholder="Identifiant..." required/>
-                                <input id="password" name='password' className="texte_zone" type="password" placeholder="Mot de passe..." required/>
                             </tr>
                         </table>
                         <p>{loginError === true?"L'identifiant existe déja":''}</p>
diff --git a/src/pages/Admin_modif.js b/src/pages/Admin_modif.js
index ebcb5df..451fc2e 100644
--- a/src/pages/Admin_modif.js
+++ b/src/pages/Admin_modif.js
@@ -96,9 +96,9 @@ function Admin_modif() {
                 <div className="Formulaire">
                     <form className="form" onSubmit={checkModif}>
                         <table className="Formulaire_de_connexion">
-                            <tr>
+                            <tr className="one">
                                 <div className="texte_côté">
-                                    <p>Nom :</p>
+                                    <div>Nom :</div>
                                     <p>Prénom :</p>
                                     <p>Login :</p>
                                     <p>Rôle :</p>
@@ -106,7 +106,7 @@ function Admin_modif() {
                                     <p>Mail :</p>
                                 </div>
                             </tr>
-                            <tr>
+                            <tr className="two">
                                 <input id="nom" value={lastName} onChange={handleChangeLastName} name="lastname" className="texte_zone" type="text" placeholder="Nom..." required/>
                                 <input id="prenom" value={firstName} onChange={handleChangeFirstName} name="firstname" className="texte_zone" type="text" placeholder="Prénom..." required/>
                                 <input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
@@ -124,8 +124,8 @@ function Admin_modif() {
                                 <input id="email" value={mail} onChange={handleChangeMail} name="mail" className="texte_zone" type="email" placeholder="Email..." required/>
                                 <input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
                             </tr>
-                            <tr>
-                                <NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser le mot de passe</NavLink>
+                            <tr className="three">
+                                <NavLink className="button_submit" to="/RestartPassword" state={{ iduser:iduser }}>Réinitialiser mot de passe</NavLink>
                             </tr>
                         </table>
                         <div className="bouton_submit">
diff --git a/src/pages/Admin_supp.js b/src/pages/Admin_supp.js
index 0e878aa..ea6005d 100644
--- a/src/pages/Admin_supp.js
+++ b/src/pages/Admin_supp.js
@@ -2,15 +2,15 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios'
 import NavigationAdmin from '../components/NavigationAdmin.js';
 import { NavLink, useLocation } from "react-router-dom";
-import { TableContainer,Table,TableHead,TableBody,TableRow,TableCell } from '@mui/material';
+import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
 import { Paper } from '@mui/material';
 import { useNavigate } from "react-router-dom";
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
-  })
+})
 
-function Admin_supp(){
+function Admin_supp() {
 
     const location = useLocation();
     const { iduser } = location.state;
@@ -19,7 +19,7 @@ function Admin_supp(){
 
     const navigate = useNavigate();
 
-    useEffect(() =>{
+    useEffect(() => {
         const apiString = '/User/Id/' + iduser;
         api.get(apiString).then((response) => {
             console.log(response.data[0]);
@@ -27,8 +27,8 @@ function Admin_supp(){
         });
     }, []);
 
-    function checkDelete(event){
-        
+    function checkDelete(event) {
+
         event.preventDefault();
 
         const apiString = '/User/Delete/' + iduser;
@@ -50,11 +50,11 @@ function Admin_supp(){
                         <Table aria-label="simple table" size="small" stickyHeader>
                             <TableHead >
                                 <TableRow>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="left">Nom</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Prénom</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Identifiant</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Téléphone</TableCell>
-                                    <TableCell sx={{ bgcolor: 'info.main'}} align="center">Email</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="left">Nom</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Prénom</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Identifiant</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Téléphone</TableCell>
+                                    <TableCell sx={{ bgcolor: 'info.main' }} align="center">Email</TableCell>
                                 </TableRow>
                             </TableHead>
                             <TableBody >
@@ -68,13 +68,13 @@ function Admin_supp(){
                             </TableBody>
                         </Table>
                     </TableContainer>
-                </div>
-                <div className="bouton_submit">
-                    <button onClick={checkDelete}>Valider</button>
-                    <NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
+                    <div className="bouton_submit">
+                        <button className="bouton_val" onClick={checkDelete}>Valider</button>
+                        <NavLink className="bouton_ann" to="/Admin_list">Retour</NavLink>
+                    </div>
                 </div>
             </div>
-         </div>
+        </div>
     );
 };
 
diff --git a/src/pages/Analyse.js b/src/pages/Analyse.js
index f03d678..57ab2b4 100644
--- a/src/pages/Analyse.js
+++ b/src/pages/Analyse.js
@@ -2,7 +2,7 @@ import React, {useState,useEffect} from 'react';
 import axios from 'axios'
 import Chart from 'chart.js/auto'
 import NavigationDashboard from '../components/NavigationDashboard';
-import { Pie } from "react-chartjs-2";
+import { Pie,Line } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, DoughnutController } from 'chart.js';
 import { setDefaultLocale } from 'react-datepicker';
 import { private_excludeVariablesFromRoot } from '@mui/material';
@@ -22,6 +22,7 @@ const Analyse = () => {
     }    
 
     const [pieDatas, setPieDatas] = useState([]);
+    const [lineDatas, setLineDatas] = useState([]);
 
     useEffect(() => {
         const date = new Date();
@@ -67,6 +68,11 @@ const Analyse = () => {
         
             setPieDatas(response.data);
         });
+
+        const apiStringLine = '/Sale/Line/' + Session.get("idUser") + '/' + month + '/' + year;
+        api.get(apiStringLine).then((response) => {
+            setLineDatas(response.data);
+        });
     }, []);
 
     const data = {
@@ -110,17 +116,36 @@ const Analyse = () => {
         data.datasets[0].data[i] = pieDatas[i].total;
     }
 
+    const dataH = {
+        labels: [],
+        datasets: [
+                {
+                label: 'Sales',
+                fill: true,
+                data: [],
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor:'rgba(255, 99, 132, 1)',
+                borderWidth: 1,
+                },
+            ],
+    };
+
+    for(let i = 0; i < lineDatas.length; i++)
+    {
+        dataH.labels[i] = lineDatas[i].month +"/" +lineDatas[i].year;
+        dataH.datasets[0].data[i] = lineDatas[i].total;
+    }
+
     return (
         <body className={theme}>
 
             <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
 
             <div className="page_analyse">
-                {/* Create an analysis page */}
                 <div className="haut_de_page">
                     <h2 className="titre">Analyse</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
 
@@ -137,10 +162,10 @@ const Analyse = () => {
                         </div>
                         <div className="Stat-2">
                             <div className="Stat-2_titre">
-                                <p>coucou2</p>
+                                <p>Courbe des ventes</p>
                             </div>
                             <div className="histogramme">
-                                coucou21
+                                <Line data={dataH}/>
                             </div>
                         </div>
                     </div>                       
diff --git a/src/pages/Calendrier.js b/src/pages/Calendrier.js
index c16446e..0d731d5 100644
--- a/src/pages/Calendrier.js
+++ b/src/pages/Calendrier.js
@@ -1,6 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState,useEffect } from 'react';
 import "react-datepicker/dist/react-datepicker.css";
 import NavigationDashboard from '../components/NavigationDashboard';
+import axios from 'axios';
+import Session from 'react-session-api';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 
 import format from "date-fns/format";
 import getDay from "date-fns/getDay";
@@ -9,42 +13,69 @@ import startOfWeek from "date-fns/startOfWeek";
 import { Calendar, dateFnsLocalizer } from "react-big-calendar";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 
+
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+})
+
 const locales = {
     'fr': require('date-fns/locale/fr')
-  };
-  const localizer = dateFnsLocalizer({
+};
+const localizer = dateFnsLocalizer({
     format,
     parse,
     startOfWeek,
     getDay,
-    locales,  
-  });
-  
-  const events = [
-    
-  ];
+    locales,
+});
 
-    
+function Calendrier(){
 
+    const [contacts, setContacts] = useState([]);
+    const [selectedContact, setSelectedContact] = useState(1);
+    const [allEvents, setAllEvents] = useState([]);
 
-const Calendrier = () => {
+    useEffect(() =>{
+        const apiString = '/Contact/' + Session.get("idUser");
+        api.get(apiString).then((response) => {
+            setContacts(response.data);
+        setSelectedContact(response.data[0].idcontact)
+        });
+
+        const apiStringEvent = '/Event/' + Session.get("idUser");
+        api.get(apiStringEvent).then((response) => {
+            setAllEvents([]);
+            response.data.forEach(event => {
+                const newEvent = { title: event.comment, start: new Date(event.date+" "+event.starttime), end: new Date(event.date+" "+event.endtime) };
+                setAllEvents(allEvents => [...allEvents, newEvent]);
+            });
+        });
+
+    }, []);
 
     const [theme, setTheme] = useState("light");    
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
         setTheme(localStorage.getItem("theme"))
     }
+
     const [titre, setTitre] = useState("");
     const [jour , setJour] = useState(new Date());
     const [heureDebut, setHeureDebut] = useState(new Date());
     const [heureFin, setHeureFin] = useState(new Date());
 
-    const [allEvents, setAllEvents] = useState(events);
-
     function handleAddEvent() {
         const newEvent = { title: titre, start: new Date(jour+" "+heureDebut), end: new Date(jour+" "+heureFin) };
+        const newEventBD = { date: jour,starttime: heureDebut,endtime: heureFin,comment: titre, idusersend: Session.get("idUser"),iduserreceive: Session.get("idUser"), idcontact: selectedContact};
+        api.post('/Event/Add', newEventBD).then (function(response) {
+            console.log(response.data);
+        });
         setAllEvents([...allEvents, newEvent]);
     }
 
+    function handleChangeContact(event){
+        setSelectedContact(event.target.value);
+    };
+
     return (
         <body className={theme}>
 
@@ -56,7 +87,7 @@ const Calendrier = () => {
                     <h2 className="titre">Calendrier</h2>
                     <link href='fullcalendar/main.css' rel='stylesheet' />
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
 
@@ -65,21 +96,27 @@ const Calendrier = () => {
                     <div className="Calendrier">
                         <h2 className="Titre">Ajouter un évènement
                             <div className="mini_formulaire_evenement">
-                                <input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", width: "100%", marginRight: "10px"}} 
+                                <input className="ajout_input" type="text" placeholder="Ajoutez un titre" style={{height: "20px", marginRight: "10px", marginLeft: "10px",marginBottom: "10px"}} 
                                 onChange={(e) => setTitre(e.target.value)} />
-                                <input className='date' type="date" placeholder="Ajoutez un jour" style={{height: "20px", width: "100%", marginRight: "10px"}} 
+                                <input className='date' type="date" placeholder="Ajoutez un jour" style={{height: "70%", width: "90%", marginRight: "10px", marginLeft: "10px", marginBottom: "10px", borderRadius: "10px"}} 
                                 onChange={(e) => setJour(e.target.value)} />
-                                <input className='date' type="time" placeholder="Ajoutez une heure de début" style={{height: "20px", width: "100%", marginRight: "10px"}}
+                                <input className='date' type="time" placeholder="Ajoutez une heure de début" style={{height: "70%", width: "90%", marginRight: "10px" , marginLeft: "10px",marginBottom: "10px", borderRadius: "10px"}}
                                 onChange={(e) => setHeureDebut(e.target.value)} />
-                                <input className='date' type="time" placeholder="Ajoutez une heure de fin" style={{height: "20px", width: "100%", marginRight: "10px"}}
+                                <input className='date' type="time" placeholder="Ajoutez une heure de fin" style={{height: "70%", width: "90%", marginRight: "10px", marginLeft: "10px", marginBottom: "10px", borderRadius: "10px"}}
                                 onChange={(e) => setHeureFin(e.target.value)} />
-
-
-
-                                
+                                <Select
+                                    className="select"
+                                    name='idcontact'
+                                    value={selectedContact}
+                                    onChange={handleChangeContact}
+                                    >
+                                    {contacts.map(contact => (
+                                        <MenuItem value={contact.idcontact}>{contact.firstname + contact.lastname + '\n(' + contact.name + ')'}</MenuItem>    
+                                    ))}
+                                </Select>
                             </div>
                             <button className="bouton_ajout" onClick={handleAddEvent}>
-                                <p>Ajouter l'évènement</p>
+                                Ajouter l'évènement
                             </button>
                         </h2>
                         <Calendar localizer={localizer} events={allEvents} defaultView="week"
diff --git a/src/pages/Compte.js b/src/pages/Compte.js
index 416a1c9..f7c77d1 100644
--- a/src/pages/Compte.js
+++ b/src/pages/Compte.js
@@ -103,7 +103,7 @@ function Compte() {
                 <div className="haut_de_page">
                     <h2 className="titre">Mon Compte</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg" />
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
                 <div className="bas_de_page">
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index aeca2f2..23a2822 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -1,23 +1,63 @@
-import React, {useState} from 'react';
+import React, { useState, useEffect } from 'react';
 import NavigationDashboard from '../components/NavigationDashboard';
+import Session from 'react-session-api';
+import axios from 'axios';
 
-const Dashboard = () => {
-    const [theme, setTheme] = useState("light");    
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+})
+
+function Dashboard() {
+
+    const [infoContactRecent, setInfoContactRecent] = useState([]);
+    const [dataKey, setDataKey] = useState([]);
+    const [infoBestCustomer, setinfoBestCustomer] = useState([]);
+
+    const [theme, setTheme] = useState("light");
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
         setTheme(localStorage.getItem("theme"))
     }
 
+    useEffect(() => {
+
+        const date = new Date();
+        date.setMonth(date.getMonth() - 1);
+
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1);
+
+        const apiString = '/Contact/LastAdd3/' + Session.get("idUser");
+        api.get(apiString).then((response) => {
+            if (response.data.length > 0)
+                setInfoContactRecent(response.data);
+        });
+
+        const apiStringKey = '/Sale/KeyNumber/' + Session.get("idUser") + "/" + month + "/" + year;
+        api.get(apiStringKey).then((response) => {
+            if (response.data.length > 0)
+                setDataKey(response.data[0]);
+        }); 
+
+        const apiStringBestCustomer = '/Sale/BestCustomer/' + Session.get("idUser");
+        api.get(apiStringBestCustomer).then((response) => {
+            if (response.data.length > 0)
+                setinfoBestCustomer(response.data[0]);
+            else
+                setinfoBestCustomer({name :"Aucun client",total: "0"});
+        });
+    }, []);
+
     return (
         <body className={theme}>
 
             <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
-            
+
             <div className="page_dashboard">
                 {/* Create an account page */}
                 <div className="haut_de_page">
                     <h2 className="titre">Dashboard</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'} />
                     </div>
                 </div>
                 <div className="bas_de_page">
@@ -40,17 +80,21 @@ const Dashboard = () => {
                                     <div className="Ch_Clé_gauche">
                                         <div className="Ch_Clé_gauche_haut">
                                             Chiffre_clés
+                                            <div>{dataKey.total}</div>
                                         </div>
                                         <div className="Ch_Clé_gauche_bas">
                                             Chiffre_clés
+                                            <div>{dataKey.totalcontact}</div>
                                         </div>
                                     </div>
                                     <div className="Ch_Clé_droite">
                                         <div className="Ch_Clé_droite_haut">
                                             Chiffre_clés
+                                            <div>{infoBestCustomer.name + " : " + infoBestCustomer.total}</div>
                                         </div>
                                         <div className="Ch_Clé_droite_bas">
                                             Chiffre_clés
+                                            <div>{new Date().getFullYear() + " : " + (new Date().getMonth() + 1)}</div>
                                         </div>
                                     </div>
                                 </div>
@@ -62,9 +106,12 @@ const Dashboard = () => {
                             </div>
                             <div className="contacts_ajouté_récemment">
                                 contacts ajouté récemment
+                                {infoContactRecent.map(info => (
+                                    <div>{info.firstname + " " + info.lastname}</div>
+                                ))}
                             </div>
                         </div>
-                    </div>             
+                    </div>
                 </div>
             </div>
         </body>
diff --git a/src/pages/MailPourAdmin.js b/src/pages/MailPourAdmin.js
new file mode 100644
index 0000000..fa62fe7
--- /dev/null
+++ b/src/pages/MailPourAdmin.js
@@ -0,0 +1,97 @@
+import React, {useState} from 'react';
+import NavigationDashboard from '../components/NavigationDashboard';
+import axios from 'axios';
+import Session from 'react-session-api';
+import { useNavigate } from 'react-router-dom';
+
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+  })
+
+const MailPourAdmin = () => {
+    const [mailError, setMailError] = useState(false);  
+    const [objetError, setObjetError] = useState(false);  
+    const [descriptionError, setDescriptionError] = useState(false);  
+    const [theme, setTheme] = useState("light");    
+    const navigate = useNavigate();
+
+    if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
+        setTheme(localStorage.getItem("theme"))
+    }
+
+    function sendMail(e) {
+        e.preventDefault();
+
+        const formData = new FormData(e.currentTarget);
+        const values = Object.fromEntries(formData.entries());
+
+        console.log(values);      
+        if (values.objet === '') {
+            setObjetError(true)
+        } else {
+            setObjetError(false)
+        }
+        if (values.raison === '') {
+            setDescriptionError(true)
+        } else {
+            setDescriptionError(false)
+        }
+        if (values.objet === '' || values.raison === '') {
+            return
+        }
+        values.objet = values.objet + "[user id : " + Session.get("idUser") + "]"
+        
+        
+        api.post('/Mail/Avertir',values).then (function(response) {
+            if (response.data) {
+                navigate('/dashboard')
+            }
+            else {
+                setMailError(true)
+                // e.reset();
+            }
+        });
+
+          
+    }
+
+    return (
+        <body className={theme}>
+
+            <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
+
+            <div className="page_mailAdmin">
+                <div className="haut_de_page">
+                    <h2 className="titre">Signaler un problème</h2>
+                    <div className="rechLogo">
+                        <img className="logo" srcSet="./LogoApp.svg" />
+                    </div>
+                </div>
+                <div className="bas_de_page">
+                    <NavigationDashboard />
+                    <form className="form" onSubmit={sendMail}>
+                        <div className="Mail">
+                            <div className="object">
+                                <h3 className="name">Objet</h3>
+                                <input name="objet" type="text" placeholder="Objet de l'alerte" className="inputObjet"/>
+                            </div>
+                            <div className="value">
+                                <h3 className="name">Raison</h3>
+                                <textarea name="raison" placeholder="Raison de l'alerte" rows="10" cols="180" className="inputArea"/>
+
+                            </div>
+                            <p>{mailError === true?"Le mail n'a pas pu être envoyé":''}</p>
+                            <p>{objetError === true?"L'objet est obligatoire":''}</p>
+                            <p>{descriptionError === true?"La description est obligatoire":''}</p>
+                            <div className="submit">
+                                <button className="button" type="submit">Envoyer</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </body>
+    );
+};
+
+export default MailPourAdmin;
\ No newline at end of file
diff --git a/src/pages/Parametres.js b/src/pages/Parametres.js
index ef72b59..cc4fceb 100644
--- a/src/pages/Parametres.js
+++ b/src/pages/Parametres.js
@@ -24,7 +24,7 @@ const Parametre = () => {
                 <div className="haut_de_page">
                     <h2 className="titre">Paramètres</h2>
                     <div className="rechLogo">
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
                     </div>
                 </div>
                 <div className="bas_de_page">
@@ -32,24 +32,26 @@ const Parametre = () => {
                     <div className="Parametre">
                         <div className="one">
                             <div className="one_haut">
-                                sécurité
+                                <p className="text_one_haut">Sécurité</p>
                             </div>
                             <div className="one_milieu">
                                 <p className="text_one_milieu">Signaler un problème</p>
                                 <div className='bouton_submit'>
-                                    <button className="bouton_signalerPB" type="submit">Signaler</button>
+                                <NavLink to="/MailPourAdmin">
+                                    <button className="bouton_signalerPB" >Signaler</button>
+                                </NavLink>
                                 </div>
                             </div>
                             <div className="one_bas">
                                 <p className="text_one_milieu">Mot de passe</p>
-                                <div className='bouton_submit'>
-                                    <NavLink className="bouton_modifierMDP" to="/RestartPassword">Modifier</NavLink>
-                                </div>
+                                <NavLink className="bouton_submit" to="/RestartPassword">
+                                    <button className="bouton_modifierMDP" type="submit">Modifier</button>
+                                </NavLink>
                             </div>
                         </div>
                         <div className="two">
                             <div className="two_haut">
-                                coucou
+                                <p className="text_two_haut">Général</p>
                             </div>
                             <div className="two_bas">
                                 <p className="text_two_bas">Mode sombre</p>
@@ -59,13 +61,18 @@ const Parametre = () => {
                             </div>
                         </div>
                         <div className="three">
-                            coucou
+                            <p className="text_three_haut">Autre</p>
+                            <div className="déconnexion">
+                                <p className="text_three">Déconnexion</p>
+                                <NavLink to="/">
+                                    <button id="bouton_deco" className="bouton" type="button" value="Déco">Se déconnecter</button>
+                                </NavLink>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </body>
-        // </ThemeContext.Provider>
     );
 };
 
diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js
index 07b106f..6aa5662 100644
--- a/src/pages/Repertoire.js
+++ b/src/pages/Repertoire.js
@@ -4,7 +4,9 @@ import axios from 'axios';
 import user from '../images/user.jpg';
 import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
 import { Paper } from '@mui/material';
-
+import { NavLink } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import Session from 'react-session-api';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -12,7 +14,7 @@ const api = axios.create({
 
 function Repertoire() {
 
-    const [theme, setTheme] = useState("light");    
+    const [theme, setTheme] = useState("light");
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
         setTheme(localStorage.getItem("theme"))
     }
@@ -21,11 +23,13 @@ function Repertoire() {
     const [SearchTerm, setSearchTerm] = useState("");
     const [SearchResults, setSearchResults] = useState([]);
     const [customers, setCustomers] = useState([]);
-    
 
     useEffect(() => {
-        api.get('/Contact/AllWithCustomerName').then((response) => {
+        const apiString = '/Contact/' + Session.get("idUser");
+        api.get(apiString).then((response) => {
+
             setContacts(response.data);
+            console.log("response.data", response.data);
             setSearchTerm(response.data[0].idcontact);
         });
     }, []);
@@ -37,51 +41,54 @@ function Repertoire() {
     }, []);
 
     return (
-        <div className={theme} id="page_repertoire">
-            {/* Create an account page */}
-            <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
-            <div className="haut_de_page">
-                <h2 className="titre">Repertoire</h2>
-                <div className="rechLogo">
-                    <img className="logo" srcSet="./LogoApp.svg" />
+        <body className={theme}>
+            <div className="page_repertoire">
+                {/* Create an account page */}
+                <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
+                <div className="haut_de_page">
+                    <h2 className="titre">Repertoire</h2>
+                    <div className="rechLogo">
+                        <img className="logo" srcSet={theme === "light" ? './LogoApp.svg' : './LogoApp_light.svg'}/>
+                    </div>
                 </div>
-            </div>
-            <div className="bas_de_page">
-                <NavigationDashboard />
-                <div className="contenu">
-                    <span className="searchAndAddButton">
-                        <div className="input_box">
-                            <input type="search" placeholder="Rechercher..." />
-                            <span className="search">
-                                <i class="uil uil-search search-icon"></i>
-                            </span>
-                        </div>
-                        <button className="boutonAddContact">Ajouter</button>
-                    </span>
-                    <TableContainer component={Paper} className="tabListContact">
-                        <Table>
-                            <TableHead>
-                                <TableRow>
-                                    <TableCell>Photo</TableCell>
-                                    <TableCell>Nom</TableCell>
-                                    <TableCell>Prénom</TableCell>
-                                    <TableCell>Entreprise</TableCell>
-                                </TableRow>
-                            </TableHead>
-                            <TableBody>
-                                {contacts.map((contact) => (
-                                    <TableRow key={contact.idcontact}>
-                                        <TableCell><img className="photoContact" src={user} /></TableCell>
-                                        <TableCell>{contact.lastname}</TableCell>
-                                        <TableCell>{contact.firstname}</TableCell>
-                                        <TableCell>{contact.name}</TableCell>
+                <div className="bas_de_page">
+                    <NavigationDashboard />
+                    <div className="contenu">
+                        <span className="searchAndAddButton">
+                            <div className="input_box">
+                                <input type="search" placeholder="Rechercher..." />
+                                <span className="search">
+                                    <i class="uil uil-search search-icon"></i>
+                                </span>
+                            </div>
+                            <NavLink to="/Repertoire/add">
+                                <button className="boutonAddContact">Ajouter</button>
+                            </NavLink>
+                        </span>
+                        <TableContainer component={Paper} className="tabListContact" style={{color: '#fff'}}>
+                            <Table>
+                                <TableHead>
+                                    <TableRow className="headerListe">
+                                        <TableCell>Photo</TableCell>
+                                        <TableCell>Nom</TableCell>
+                                        <TableCell>Prénom</TableCell>
+                                        <TableCell>Entreprise</TableCell>
                                     </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
-                </div>
-                {/* <TableContainer component={Paper} sx={{ maxHeight: 0.8 }} className="tabListContact">
+                                </TableHead>
+                                <TableBody>
+                                    {contacts.map((contact) => (
+                                        <TableRow key={contact.idcontact}>
+                                            <TableCell><img className="photoContact" src={user} /></TableCell>
+                                            <TableCell>{contact.lastname}</TableCell>
+                                            <TableCell>{contact.firstname}</TableCell>
+                                            <TableCell>{contact.name}</TableCell>
+                                        </TableRow>
+                                    ))}
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
+                    </div>
+                    {/* <TableContainer component={Paper} sx={{ maxHeight: 0.8 }} className="tabListContact">
                                 <Table aria-label="simple table" size="small" stickyHeader>
                                     <TableHead >
                                         <TableRow>
@@ -108,11 +115,50 @@ function Repertoire() {
                                     </TableBody>
                                 </Table>
                             </TableContainer> */}
+                </div>
             </div>
+        </body>
+    );
+};
+
+function AddContact(props) {
+
+    const navigate = useNavigate();
+    const [User, setUser] = useState({ name: "", email: "" });
+
+    let add = (e) => {
+        e.preventDefault();
+        if (User.name === "" || User.email === "") {
+            alert("All fields are mandatory!!!");
+            return
+        }
+        // THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE 
+        props.addContactHandler(User);
+        // THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
+        setUser({ name: "", email: "" });
+        //console.log(props);
+        navigate('/');
+    }
+    return (
+        <div className='ui main'>
+            <h2>Add Contact</h2>
+            <form className='ui form' onSubmit={add}>
+                <div className='field'>
+                    <label>Name</label>
+                    <input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({ ...User, name: e.target.value })} />
+                </div>
+                <div className='field'>
+                    <label>Email</label>
+                    <input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({ ...User, email: e.target.value })} />
+                </div>
+                <button className='ui secondary button'>Add</button>
+            </form>
         </div>
     );
 };
 
+
+
 // function Repertoire() {
 
 //     // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS
diff --git a/src/pages/RestartPassword.js b/src/pages/RestartPassword.js
index 45bb07c..adc5811 100644
--- a/src/pages/RestartPassword.js
+++ b/src/pages/RestartPassword.js
@@ -19,8 +19,9 @@ function RestartPassword() {
     const location = useLocation();
 
     const [password, setPassword] = useState("");
-    const [confPassword, setConfPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
+    const [confNewPassword, setConfNewPassword] = useState("");
+    const [resetPasswordError, setResetPasswordError] = useState(false);
     
     const navigate = useNavigate();
 
@@ -28,14 +29,14 @@ function RestartPassword() {
         setPassword(event.target.value);
     };
 
-    function handleChangeConfPassword(event){
-        setConfPassword(event.target.value);
-    };
-
     function handleChangeNewPassword(event){
         setNewPassword(event.target.value);
     };
 
+    function handleChangeConfNewPassword(event){
+        setConfNewPassword(event.target.value)
+    };  
+
     function checkRestartPassword(event){
 
         const formData = new FormData(event.currentTarget);
@@ -43,9 +44,9 @@ function RestartPassword() {
         
         event.preventDefault();
 
-        if(password === confPassword)
+        if(newPassword === confNewPassword)
         {
-            const apiString = '/User/Auth/Password/' + Session.get("idUser") + "/" + CryptoJS.SHA256(confPassword).toString(CryptoJS.enc.Hex);
+            const apiString = '/User/Auth/Password/' + Session.get("idUser") + "/" + CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);
             api.get(apiString).then((response) => {
                 const login = response.data;
                 if (login.length > 0){
@@ -61,7 +62,7 @@ function RestartPassword() {
                     navigate("/Parametres");
                 }
                 else{
-                    console.log("trt");
+                    setResetPasswordError(true);
                 }
             });
         }
@@ -70,24 +71,23 @@ function RestartPassword() {
     return (
         <div className="page_admin">
             <div className="Titre_Formulaire">
-                <p className="Titre">Admin</p>
-                <p className="Sous-titre">Modification d'utilisateur</p>
                 <div className="Formulaire">
                     <form className="form" onSubmit={checkRestartPassword}>
                         <table className="Formulaire_de_connexion">
                             <tr>
                                 <div className="texte_côté">
                                     <p>Mot de passe :</p>
-                                    <p>Confirmation mot de passe :</p>
                                     <p>Nouveau mot de passe :</p>
+                                    <p>Confirmation nouveau mot de passe : </p>
                                 </div>
                             </tr>
                             <tr>
                                 <input id="MotDePasse" value={password} onChange={handleChangePassword} name='password' className="texte_zone" type="text" placeholder="Mot de passe..." required/>
-                                <input id="ConfirmeMotDePasse" value={confPassword} onChange={handleChangeConfPassword} name='confimPassword' className="texte_zone" type="text" placeholder="Confirmation mot de passe..." required/>
                                 <input id="NouvMotDePasse" value={newPassword} onChange={handleChangeNewPassword} name='newPassword' className="texte_zone" type="text" placeholder="Nouveau mot de passe..." required/>
+                                <input id="ConfNouvMotDePasse" value={confNewPassword} onChange={handleChangeConfNewPassword} name='ConfNewPassword' className="texte_zone" type="text" placeholder="Confirmation nouveau mot de passe..." required/>
                             </tr>
                         </table>
+                        <p>{resetPasswordError === true?"Le mot de passe est incorrect":''}</p>
                         <div className="bouton_submit">
                             <button className="bouton_val" type="submit">Valider</button>
                             <NavLink className="bouton_ann" to="/Parametres">Retour</NavLink>
diff --git a/src/styles/components/_admin.scss b/src/styles/components/_admin.scss
index 1378a24..03d970b 100644
--- a/src/styles/components/_admin.scss
+++ b/src/styles/components/_admin.scss
@@ -1,10 +1,10 @@
-.dark{
+.dark {
     background-color: $xiketic;
     color: white;
 }
 
 body {
-    
+
     .page_admin {
         display: flex;
         flex-direction: row;
@@ -48,21 +48,21 @@ body {
                     text-decoration: none;
                     align-self: center;
                 }
-    
+
                 .modify_user {
                     display: flex;
                     padding: 5px;
                     text-decoration: none;
                     align-self: center;
                 }
-    
+
                 .delete_user {
                     display: flex;
                     padding: 5px;
                     text-decoration: none;
                     align-self: center;
                 }
-    
+
                 .list_devis {
                     display: flex;
                     padding: 5px;
@@ -109,12 +109,12 @@ body {
             }
         }
 
-        .Titre_Formulaire{
+        .Titre_Formulaire {
             display: flex;
             flex-direction: column;
-            margin: 10px 10px 10px 0px;
+            margin: 10px;
             padding: 10px;
-            flex-basis: 100%;
+            width: 100%;
             background: rgba(255, 255, 255, 0.3);
             border-radius: 15px;
             box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@@ -123,11 +123,6 @@ body {
 
             .Titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 70px;
                 font-weight: bold;
@@ -135,78 +130,131 @@ body {
 
             .Sous-titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 40px;
                 font-weight: bold;
             }
-            
 
-            .Formulaire{
+
+            .Formulaire {
                 display: flex;
-                flex-direction: column;
-                align-items: center;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
+                flex-direction: row;
+                justify-content: center;
                 margin-left: 10px;
                 margin-right: 10px;
 
-                .form{
+                .form {
                     display: flex;
                     flex-direction: column;
-                    align-self: center;
+                    margin-top: 60px;
                     font-size: 30px;
+                    width: 80%;
 
                     .Formulaire_de_connexion {
-
                         display: flex;
                         flex-direction: row;
-                        margin-top: 5%;
-                        /*background: rgba(255, 255, 255, 0.3);
-                        border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                        backdrop-filter: blur(3px);
-                        -webkit-backdrop-filter: blur(15px);*/
-            
-                        .texte_côté {
-                            display:flex;
+                        justify-content: space-between;
+
+
+                        .one {
+                            display: flex;
                             flex-direction: column;
-                            justify-content: space-around;
-                            height: 100%;
+                            width: 24%;
+
+                            .texte_côté {
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: space-around;
+                                margin-left: 80px;
+                                height: 85%;
+                            }
+
+                        }
+
+                        .one-2 {
+                            display: flex;
+                            flex-direction: column;
+                            width: 60%;
+
+                            .texte_côté {
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: space-around;
+                                margin-left: 150px;
+                                height: 100%;
+                            }
+
                         }
-            
+
+                        .two {
+                            display: flex;
+                            flex-direction: column;
+                            width: 46%;
+                        }
+
+                        .two-2 {
+                            display: flex;
+                            flex-direction: column;
+                            width: 46%;
+                        }
+
+                        .three {
+                            display: flex;
+                            flex-direction: row;
+                            justify-content: center;
+                            align-items: center;
+                            margin-top: 316px;
+                            width: 29%;
+                            font-size: 23px;
+                            bottom: auto;
+
+                            .button_submit {
+                                display: flex;
+                                background-color: grey;
+                                border: 1px solid rgba(255, 255, 255, 0.1);
+                                backdrop-filter: blur(30px);
+                                color: rgb(255, 255, 255);
+                                cursor: pointer;
+                                font-size: 25px;
+                                border-radius: 15px;
+                                width: 308px;
+                                text-decoration: none;
+
+                                &:hover {
+                                    box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
+                                    color: white;
+                                    background-color: rgba(114, 114, 114, 0.371);
+                                }
+
+                                &:active {
+                                    background-color: rgba(68, 68, 68, 0.972);
+                                }
+                            }
+                        }
+
                         input {
                             display: flex;
                             flex-direction: column;
-                            margin: 10px;
                         }
-            
+
                         .button_submit {
                             display: flex;
-                            margin-top: 150%;
                             margin-bottom: 2%;
                             padding-left: 10px;
-                            
-                            .bouton_réini{
-                            background-color: rgb(190, 189, 189);
-                            border-radius: 5px;
-                            border: 1px solid black;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                            cursor: pointer;
+
+                            .bouton_réini {
+                                background-color: rgb(190, 189, 189);
+                                border-radius: 5px;
+                                border: 1px solid black;
+                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                cursor: pointer;
                             }
                         }
                     }
                 }
             }
 
-            
+
 
             .texte {
                 align-self: center;
@@ -215,7 +263,7 @@ body {
             }
 
             .texte_zone {
-                width: 600px;
+                width: 550px;
                 height: 50px;
                 background-color: transparent;
                 border-radius: 5px;
@@ -235,7 +283,7 @@ body {
                 height: 30px;
                 margin-top: 5%;
 
-                .bouton_val{
+                .bouton_val {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
@@ -259,7 +307,7 @@ body {
                     }
                 }
 
-                .bouton_ann{
+                .bouton_ann {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
@@ -276,7 +324,7 @@ body {
                         color: white;
                         background-color: rgba(114, 114, 114, 0.371);
                     }
-        
+
                     &:active {
                         background-color: rgba(68, 68, 68, 0.972);
                     }
@@ -284,7 +332,7 @@ body {
             }
         }
 
-        .Titre_Formulaire_Rech{
+        .Titre_Formulaire_Rech {
             display: flex;
             flex-direction: column;
             margin: 10px 10px 10px 0px;
@@ -298,11 +346,6 @@ body {
 
             .Titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 70px;
                 font-weight: bold;
@@ -310,11 +353,6 @@ body {
 
             .Sous-titre {
                 display: flex;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
                 margin: 10px;
                 font-size: 40px;
                 font-weight: bold;
@@ -323,14 +361,7 @@ body {
             .rechLogo {
                 display: flex;
                 flex-direction: column;
-                flex-basis: 100%;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
-                //margin: 10px;
-                //padding: 10px;
+                height: 50%;
                 align-items: center;
                 margin-top: 5%;
 
@@ -342,7 +373,6 @@ body {
                     height: 40px;
                     max-width: 350px;
                     width: 100%;
-                    //margin: 30px 30px;
                     border-radius: 25px;
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 
@@ -376,17 +406,69 @@ body {
                         }
                     }
                 }
+
+                .bouton_submit {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-self: center;
+                    width: 600px;
+                    height: 30px;
+                    margin-top: 5%;
+
+                    .bouton_val {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                        width: 150px;
+                        height: 40px;
+                        font-size: 20px;
+                        text-decoration: none;
+                        color: white;
+                        background-color: grey;
+                        border-radius: 15px;
+                        border: 0;
+
+                        &:hover {
+                            color: white;
+                            background-color: rgba(114, 114, 114, 0.371);
+                        }
+
+                        &:active {
+                            background-color: rgba(68, 68, 68, 0.972);
+                        }
+                    }
+
+                    .bouton_ann {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                        width: 150px;
+                        height: 40px;
+                        font-size: 20px;
+                        text-decoration: none;
+                        color: white;
+                        background-color: grey;
+                        border-radius: 15px;
+
+                        &:hover {
+                            color: white;
+                            background-color: rgba(114, 114, 114, 0.371);
+                        }
+
+                        &:active {
+                            background-color: rgba(68, 68, 68, 0.972);
+                        }
+                    }
+                }
             }
 
             .formulaire {
                 display: flex;
                 flex-direction: column;
                 flex-basis: 100%;
-                /*background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);*/
 
                 .bouton_personnes {
                     display: flex;
@@ -394,10 +476,7 @@ body {
                     justify-content: space-between;
                     width: 350px;
                     margin: 20px 0 0 0;
-                    /*background: rgba(255, 255, 255, 0.3);
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                    backdrop-filter: blur(3px);
-                    -webkit-backdrop-filter: blur(15px);*/
+
                 }
 
                 .bouton_submit {
@@ -406,7 +485,7 @@ body {
                     justify-content: space-between;
                     padding: 30px 0 0 0;
 
-                    .bouton_sup{
+                    .bouton_sup {
                         display: flex;
                         background-color: grey;
                         border: 1px solid rgba(255, 255, 255, 0.1);
@@ -418,36 +497,13 @@ body {
                         width: 30%;
                         align-items: center;
                         justify-content: center;
-        
-                        &:hover {
-                            box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
-                            color: white;
-                            background-color: rgba(114, 114, 114, 0.371);
-                        }
-            
-                        &:active {
-                            background-color: rgba(68, 68, 68, 0.972);
-                        }
-                    }
 
-                    .bouton_ann{
-                        display: flex;
-                        background-color: grey;
-                        border: 1px solid rgba(255, 255, 255, 0.1);
-                        backdrop-filter: blur(30px);
-                        color: rgb(255, 255, 255);
-                        cursor: pointer;
-                        font-size: 15px;
-                        border-radius: 15px;
-                        width: 30%;
-                        align-items: center;
-        
                         &:hover {
                             box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
                             color: white;
                             background-color: rgba(114, 114, 114, 0.371);
                         }
-            
+
                         &:active {
                             background-color: rgba(68, 68, 68, 0.972);
                         }
@@ -477,7 +533,7 @@ body {
                             color: white;
                             background-color: rgba(114, 114, 114, 0.371);
                         }
-            
+
                         &:active {
                             background-color: rgba(68, 68, 68, 0.972);
                         }
@@ -500,7 +556,7 @@ body {
                             color: white;
                             background-color: rgba(114, 114, 114, 0.371);
                         }
-            
+
                         &:active {
                             background-color: rgba(68, 68, 68, 0.972);
                         }
diff --git a/src/styles/components/_analyse.scss b/src/styles/components/_analyse.scss
index 7550f7e..5b8e133 100644
--- a/src/styles/components/_analyse.scss
+++ b/src/styles/components/_analyse.scss
@@ -1,5 +1,3 @@
-
-
 body {
     
     .page_analyse {
@@ -19,9 +17,9 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
             
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+            border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -58,9 +56,10 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
+                border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -131,10 +130,9 @@ body {
                     justify-content: space-between;
                     width: 49.75%;
                     height: auto;
-
-                    background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    border: 1px solid #cbd0dd;
+                    background: rgba(255, 255, 255, 1);
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -152,10 +150,9 @@ body {
                         margin: auto;
                         padding: 25px;
                         font-size: 40px;
-
-                        background: rgba(255, 255, 255, 0.3);
+                        border: 1px solid #cbd0dd;
+                        background: rgba(255, 255, 255, 1);
                         border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }
@@ -176,10 +173,9 @@ body {
                     justify-content: space-between;
                     width: 49.75%;
                     height: auto;
-
-                    background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    border: 1px solid #cbd0dd;
+                    background: rgba(255, 255, 255, 1);
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -196,10 +192,9 @@ body {
                         margin: auto;
                         padding: 30px;
                         font-size: 40px;
-
-                        background: rgba(255, 255, 255, 0.3);
+                        border: 1px solid #cbd0dd;
+                        background: rgba(255, 255, 255, 1);
                         border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }
diff --git a/src/styles/components/_calendrier.scss b/src/styles/components/_calendrier.scss
index 8ba5b94..6812f9b 100644
--- a/src/styles/components/_calendrier.scss
+++ b/src/styles/components/_calendrier.scss
@@ -1,7 +1,5 @@
-
-
 body {
-    
+
     .page_calendrier {
         display: flex;
         flex-direction: column;
@@ -18,17 +16,18 @@ body {
             height: 10%;
             align-items: center;
             margin: 10px 10px 5px 10px;
-            
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+
+            border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
             .titre {
                 font-size: 40px;
             }
-            
+
             .rechLogo {
                 display: flex;
                 flex-direction: row;
@@ -40,7 +39,7 @@ body {
                     width: 100px;
                     height: 100px;
                 }
-            }            
+            }
         }
 
         .bas_de_page {
@@ -48,7 +47,7 @@ body {
             flex-direction: row;
             justify-content: space-between;
             width: auto;
-            height: 86%;
+            height: 84%;
 
             .nav_bar_verticale {
                 display: flex;
@@ -58,9 +57,10 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
+                border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -108,7 +108,7 @@ body {
                     border: none;
                     cursor: pointer;
 
-                    .logo_nav_bar{
+                    .logo_nav_bar {
                         display: flex;
                         margin: 10px;
                         height: 50px;
@@ -120,9 +120,10 @@ body {
             .Calendrier {
                 display: flex;
                 flex-direction: row;
-                background: rgba(255, 255, 255, 0.3);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
                 border-radius: 5px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
                 width: 94.3%;
@@ -132,21 +133,46 @@ body {
                 .Titre {
                     display: flex;
                     flex-direction: column;
-                    justify-content: space-around;
-                    width: 175px;
-                    margin: 30px;
-
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                    backdrop-filter: blur(3px);
-                    -webkit-backdrop-filter: blur(15px);                 
-                
+                    justify-content: space-between;
+                    width: 200px;
+                    height: 100%;
+                    -webkit-backdrop-filter: blur(15px);
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                    border-right: 1px solid #cbd0dd;
+
+
                     .mini_formulaire_evenement {
                         display: flex;
                         flex-direction: column;
-                        margin-top: 10px;
-                        height: 100px;
+                        height: 100%;
+                        justify-content: space-around;
+
+                        .ajout_input {
+                            position: relative;
+                            height: 100%;
+                            outline: none;
+                            border: none;
+                            border-radius: .375rem;
+                            font-size: 16px;
+                            font-weight: 400;
+                            color: rgb(90, 90, 90);
+                            border: 1px solid #cbd0dd;
+                            padding: 1rem 1rem;
+                            font-size: 13px;
+                            margin: 10px;
+                        }
+                        .date {
+                            border: 1px solid #cbd0dd;
 
+                        }
+                        .select {
+                            all: none;
+                            border: 1px solid #cbd0dd;
+                            border-radius: 10px;
+                            margin-left: 10px;
+                            margin-right: 8px;
+                        }
                     }
 
                     .bouton_ajout {
@@ -159,17 +185,23 @@ body {
                         width: 75%;
                         height: 50px;
                         border-radius: 10px;
-                        background-color: rgba(163, 163, 163, 0.371);
-                        border: 1px solid rgba(255,255,255,0.1);
+                        background: rgba(37, 176, 3, 0.14);
+                        border: 1px solid;
                         backdrop-filter: blur(30px);
-                        color: rgb(255, 255, 255);
+                        color: #90d67f;
+                        margin-top: 10px;
+                        border-color: rgba(37, 176, 3, 0.14);
+
                         cursor: pointer;
                         font-size: 15px;
-                        &:hover{
-                            background-color: rgba(114, 114, 114, 0.371);   
-                        }
-                        &:active{
-                            background-color:rgba(68, 68, 68, 0.972);   
+
+                        &:hover {
+                            color: #90d67f;
+                            background: rgba(37, 176, 3, 0.2);
+                            border-color: rgba(167, 223, 153, 0.226);                        }
+
+                        &:active {
+                            background-color: rgba(68, 68, 68, 0.972);
                         }
                     }
                 }
@@ -177,12 +209,16 @@ body {
 
             .rbc-calendar {
                 border-radius: 5px;
-                border: 1px solid black;
+                margin-top: 20px;
+                margin-right: 20px;
+                margin-left: 20px;
+
 
                 .rbc-day-bg {
                     border-radius: 5px;
                     border-color: black;
                 }
+
                 .rbc-month-view {
                     border-radius: 10px;
                     border-color: black;
@@ -208,4 +244,4 @@ body {
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss
index bf08b95..2abef95 100644
--- a/src/styles/components/_compte.scss
+++ b/src/styles/components/_compte.scss
@@ -7,6 +7,7 @@ body {
         width: auto;
         height: 100vh;
 
+
         .haut_de_page {
             display: flex;
             flex-direction: row;
@@ -27,6 +28,7 @@ body {
                 font-size: 40px;
             }
 
+
             .rechLogo {
                 display: flex;
                 flex-direction: row;
@@ -39,8 +41,10 @@ body {
                     height: 100px;
                 }
             }
+            }
         }
 
+
         .bas_de_page {
             display: flex;
             flex-direction: row;
@@ -48,6 +52,7 @@ body {
             width: auto;
             height: 86%;
 
+
             .nav_bar_verticale {
                 display: flex;
                 flex-direction: column;
@@ -56,9 +61,10 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
+                border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -106,7 +112,7 @@ body {
                     border: none;
                     cursor: pointer;
 
-                    .logo_nav_bar {
+                    .logo_nav_bar  {
                         display: flex;
                         margin: 10px;
                         height: 50px;
@@ -116,6 +122,8 @@ body {
             }
 
 
+
+
             .Compte {
                 display: flex;
                 flex-direction: column;
@@ -124,9 +132,10 @@ body {
                 height: auto;
                 margin: 5px 10px 10px 5px;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
+                border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -139,8 +148,7 @@ body {
                     height: 30%;
 
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -158,8 +166,9 @@ body {
                             height: 135px;
                             width: 135px;
                             background: rgba(255, 255, 255, 0.1);
+                            border: 1px solid #cbd0dd;
+
                             border-radius: 100px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
 
@@ -169,35 +178,65 @@ body {
                             }
                         }
 
+                        .figure {
+
                         .figure {
                             width: 45%;
                         }
 
+                        .img {
+
                         .img {
                             width: 100%;
                         }
 
 
+
                         /*.bouton_submit {
                             display: flex;
                             margin-left: 30px;
                             align-items: center;
                             cursor: pointer;
 
-                            
-
-                            /*.bouton_ajoutPhoto {
-                                height: 40px;
-                                width: 150px;
-                                background-color: rgb(190, 189, 189);
-                                border-radius: 5px;
-                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                                cursor: pointer;
-                    
-                                &:hover{
-                                    background-color: lightgrey;   
+
+
+                            .fileUpload {
+                                color: #3874ff;
+                                border-color: #3874ff;
+                                background-color: transparent;
+                                border: 1px solid #004dff;
+                                border-radius: .375rem;
+                                gap: 1rem;
+                                font-size: 1rem;
+                                line-height: 1.5;
+                                transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+                                &:hover {
+                                    color: #fff;
+                                    background-color: #3874ff;
+                                    border-color: #004dff;
                                 }
-                            }*/
+
+                                &:focus {
+                                    color: #fff;
+                                    background-color: #3874ff;
+                                    border-color: #004dff;
+                                    box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background-color: #3874ff;
+                                    border-color: #004dff;
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #3874ff;
+                                    background-color: transparent;
+                                    border-color: #3874ff;
+                                }
+                            }
                     }
                 }
 
@@ -424,4 +463,5 @@ body {
     border-radius: 10px;
     background-color: $xiketic;
     cursor: pointer;
+}
 }
\ No newline at end of file
diff --git a/src/styles/components/_dashboard.scss b/src/styles/components/_dashboard.scss
index 816073c..b0ea49a 100644
--- a/src/styles/components/_dashboard.scss
+++ b/src/styles/components/_dashboard.scss
@@ -18,9 +18,9 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
             
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+            border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -57,10 +57,10 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
+                border-radius: 5px;
                 -webkit-backdrop-filter: blur(15px);
 
                 .parti_one {
@@ -142,9 +142,10 @@ body {
                             width: 40%;
                             height: auto;
                             
-                            background: rgba(255, 255, 255, 0.3);
-                            border-radius: 15px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                            background: rgba(255, 255, 255, 1);
+                            border: 1px solid #cbd0dd;
+
+                            border-radius: 5px;
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
                         }
@@ -154,9 +155,10 @@ body {
                             width: 58.5%;
                             height: auto;
 
-                            background: rgba(255, 255, 255, 0.3);
-                            border-radius: 15px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                            background: rgba(255, 255, 255, 1);
+                            border: 1px solid #cbd0dd;
+
+                            border-radius: 5px;
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
                         }
@@ -173,10 +175,10 @@ body {
                             display: flex;
                             width: 45%;
                             height: auto;
+                            border: 1px solid #cbd0dd;
 
-                            background: rgba(255, 255, 255, 0.3);
-                            border-radius: 15px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                            background: rgba(255, 255, 255, 1);
+                            border-radius: 5px;
                             backdrop-filter: blur(3px);
                             -webkit-backdrop-filter: blur(15px);
                         }
@@ -199,10 +201,10 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 53%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                    background: rgba(255, 255, 255, 1);
+                                    border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);                                    
                                 }
@@ -211,10 +213,10 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 43%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                    background: rgba(255, 255, 255, 1);
+                                    border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);
                                 }
@@ -231,10 +233,10 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 46%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                    background: rgba(255, 255, 255, 1);
+                                    border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);                                    
                                 }
@@ -243,10 +245,10 @@ body {
                                     display: flex;
                                     width: auto;
                                     height: 50%;
+                                    border: 1px solid #cbd0dd;
 
-                                    background: rgba(255, 255, 255, 0.3);
-                                    border-radius: 15px;
-                                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                                    background: rgba(255, 255, 255, 1);
+                                    border-radius: 5px;
                                     backdrop-filter: blur(3px);
                                     -webkit-backdrop-filter: blur(15px);
                                 }
@@ -265,10 +267,10 @@ body {
                         display: flex;
                         width: auto;
                         height: 64%;
+                        border: 1px solid #cbd0dd;
                         
-                        background: rgba(255, 255, 255, 0.3);
-                        border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                        background: rgba(255, 255, 255, 1);
+                        border-radius: 5px;
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }
@@ -277,10 +279,10 @@ body {
                         display: flex;
                         width: auto;
                         height: 34%;
+                        border: 1px solid #cbd0dd;
                         
-                        background: rgba(255, 255, 255, 0.3);
-                        border-radius: 15px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                        background: rgba(255, 255, 255, 1);
+                        border-radius: 5px;
                         backdrop-filter: blur(3px);
                         -webkit-backdrop-filter: blur(15px);
                     }
diff --git a/src/styles/components/_mailPourAdmin.scss b/src/styles/components/_mailPourAdmin.scss
new file mode 100644
index 0000000..f724deb
--- /dev/null
+++ b/src/styles/components/_mailPourAdmin.scss
@@ -0,0 +1,256 @@
+
+
+body {
+
+    .page_mailAdmin {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        width: auto;
+        height: 100vh;
+    
+        .haut_de_page {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            padding: 50px;
+            width: auto;
+            height: 10%;
+            align-items: center;
+            margin: 10px 10px 5px 10px;
+            
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+            border-radius: 5px;
+            backdrop-filter: blur(3px);
+            -webkit-backdrop-filter: blur(15px);
+
+            .titre {
+                font-size: 40px;
+            }
+            
+            .rechLogo {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+
+                .logo {
+                    display: flex;
+                    width: 100px;
+                    height: 100px;
+                }
+            }            
+        }
+    
+        .bas_de_page {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: auto;
+            height: 86%;
+    
+            .nav_bar_verticale {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+                width: 5%;
+                margin: 5px 5px 10px 10px;
+
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+                border-radius: 5px;
+                backdrop-filter: blur(3px);
+                -webkit-backdrop-filter: blur(15px);
+
+                .parti_one {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 18%;
+                }
+
+                .parti_two {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 35%;
+                }
+
+                .parti_three {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    margin-top: 15px;
+                    width: 100%;
+                    height: 18%;
+                }
+
+                .parti_four {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    align-items: center;
+                    width: 100%;
+                    height: 18%;
+                }
+
+                .button {
+                    display: flex;
+                    object-fit: cover;
+                    background-color: transparent;
+                    border: none;
+                    cursor: pointer;
+
+                    .logo_nav_bar{
+                        display: flex;
+                        margin: 10px;
+                        height: 50px;
+                        width: 50px;
+                    }
+                }
+            }
+
+            .form {
+                display: flex;
+                flex-direction: column;
+                width: 94.3%;
+                height: auto;
+                margin: 5px 10px 10px 5px;
+
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 15px;
+                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                backdrop-filter: blur(3px);
+                -webkit-backdrop-filter: blur(15px);
+            }
+            
+    
+            /*.Mail {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-evenly;
+                height: auto;
+                margin: 5px 10px 10px 5px;
+
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+                border-radius: 5px;
+                backdrop-filter: blur(3px);
+                -webkit-backdrop-filter: blur(15px);
+
+                .object {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-evenly;
+                    margin: 13px;
+                    width: auto;
+
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 5px;
+                    backdrop-filter: blur(3px);
+                    -webkit-backdrop-filter: blur(15px);
+
+                    .inputObjet{
+                        width: 100%;
+                        height: 100%;
+                        padding: 10px;
+                        outline: none;
+                        border: none;
+                        border-radius: .375rem;
+                        font-size: 16px;
+                        font-weight: 400;
+                        color: #333;
+                        border: 1px solid #cbd0dd;
+                        height: 30px;
+                        margin-top: 13px;
+                    }
+
+                }
+
+
+                .value {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-evenly;
+                    margin-left: 13px;
+                    margin-right: 13px;
+                    width: auto;
+                    height: 40%;
+
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 5px;
+                    backdrop-filter: blur(3px);
+                    -webkit-backdrop-filter: blur(15px);
+
+                    .inputArea {
+                        resize: none;
+                        width: 100%;
+                        height: 100%;
+                        padding: 10px;
+                        outline: none;
+                        border: none;
+                        border-radius: .375rem;
+                        font-size: 16px;
+                        font-weight: 400;
+                        color: #333;
+                        border: 1px solid #cbd0dd;
+                        margin-top: 13px;
+                    }
+                }
+
+                .submit {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-evenly;    
+                    margin: 13px;
+                    width: auto;
+                    height: 15%;
+
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 5px;
+                    backdrop-filter: blur(3px);
+                    -webkit-backdrop-filter: blur(15px);
+                    
+                    .button {
+                        cursor: pointer;
+                        color: #141824;
+                        background: #f5f7fa;
+                        border-radius: 0.375rem;
+                        padding: 0.5rem 1rem;
+                        border: 1px solid #cbd0dd;
+
+                        &:hover {
+                            color: #141824;
+                            background: #e3e6ed;
+                            border-color: #cbd0dd;
+                        }
+
+                        &:focus {
+                            box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
+                        }
+
+                        &:active {
+                            color: #000000;
+                            background: #f7f9fb;
+                            border-color: #f6f8fb;
+                            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                        }
+
+                        &:disabled {
+                            color: #000000;
+                            background: #f5f7fa;
+                            border-color: #f5f7fa;
+                        }
+                    }
+                }
+            }*/
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/components/_parametre.scss b/src/styles/components/_parametre.scss
index 0448126..2515796 100644
--- a/src/styles/components/_parametre.scss
+++ b/src/styles/components/_parametre.scss
@@ -8,7 +8,7 @@ body {
         justify-content: space-evenly;
         width: auto;
         height: 100vh;
-    
+
         .haut_de_page {
             display: flex;
             flex-direction: row;
@@ -18,17 +18,17 @@ body {
             height: 10%;
             align-items: center;
             margin: 10px 10px 5px 10px;
-            
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
+
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+            border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
             .titre {
                 font-size: 40px;
             }
-            
+
             .rechLogo {
                 display: flex;
                 flex-direction: row;
@@ -40,16 +40,16 @@ body {
                     width: 100px;
                     height: 100px;
                 }
-            }            
+            }
         }
-    
+
         .bas_de_page {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             width: auto;
             height: 86%;
-    
+
             .nav_bar_verticale {
                 display: flex;
                 flex-direction: column;
@@ -58,9 +58,10 @@ body {
                 width: 5%;
                 margin: 5px 5px 10px 10px;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
+                background: rgba(255, 255, 255, 1);
+                border: 1px solid #cbd0dd;
+
+                border-radius: 5px;
                 backdrop-filter: blur(3px);
                 -webkit-backdrop-filter: blur(15px);
 
@@ -108,7 +109,7 @@ body {
                     border: none;
                     cursor: pointer;
 
-                    .logo_nav_bar{
+                    .logo_nav_bar {
                         display: flex;
                         margin: 10px;
                         height: 50px;
@@ -116,7 +117,7 @@ body {
                     }
                 }
             }
-    
+
             .Parametre {
                 display: flex;
                 flex-direction: column;
@@ -133,9 +134,10 @@ body {
                     height: 28.5%;
                     padding: 10px;
 
-                    background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
+                    background: rgba(255, 255, 255, 1);
+                    border: 1px solid #cbd0dd;
+
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
@@ -144,7 +146,12 @@ body {
                         flex-direction: row;
                         justify-content: space-between;
                         height: 50%;
-                        border-bottom: 1px solid black;
+                        border-bottom: 1px solid #cbd0dd;
+
+                        .text_one_haut {
+                            font-size: 20px;
+                            font-weight: 700;
+                        }
                     }
 
                     .one_milieu {
@@ -153,7 +160,7 @@ body {
                         justify-content: space-between;
                         padding: 9px;
                         height: 25%;
-                        border-bottom: 1px solid black;
+                        border-bottom: 1px solid #cbd0dd;
 
                         .text_one_milieu {
                             margin-top: 8px;
@@ -161,21 +168,39 @@ body {
 
                         .bouton_submit {
                             display: flex;
-                            margin-left: 30px;
                             align-items: center;
                             cursor: pointer;
 
                             .bouton_signalerPB {
-                                width: 75px;
-                                height: 20px;
-                                background-color: rgb(190, 189, 189);
-                                border-radius: 5px;
-                                border-radius: 5px;
-                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                                 cursor: pointer;
-    
-                                &:hover{
-                                    background-color: lightgrey; 
+                                color: #141824;
+                                background: #f5f7fa;
+                                border-color: #f5f7fa;
+                                border-radius: 0.375rem;
+                                padding: 0.5rem 1rem;
+                                border-width: 1px;
+
+                                &:hover {
+                                    color: #141824;
+                                    background: #e3e6ed;
+                                    border-color: #f6f8fb;
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
+                                }
+
+                                &:active {
+                                    color: #000000;
+                                    background: #f7f9fb;
+                                    border-color: #f6f8fb;
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #000000;
+                                    background: #f5f7fa;
+                                    border-color: #f5f7fa;
                                 }
                             }
                         }
@@ -194,21 +219,40 @@ body {
 
                         .bouton_submit {
                             display: flex;
-                            margin-left: 30px;
                             align-items: center;
+                            text-decoration: none;
                             cursor: pointer;
 
                             .bouton_modifierMDP {
-                                width: 75px;
-                                height: 20px;
-                                background-color: rgb(190, 189, 189);
-                                border-radius: 5px;
-                                border-radius: 5px;
-                                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
                                 cursor: pointer;
-    
-                                &:hover{
-                                    background-color: lightgrey; 
+                                color: #141824;
+                                background: #f5f7fa;
+                                border-color: #f5f7fa;
+                                border-radius: 0.375rem;
+                                padding: 0.5rem 1rem;
+                                border-width: 1px;
+
+                                &:hover {
+                                    color: #141824;
+                                    background: #e3e6ed;
+                                    border-color: #f6f8fb;
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
+                                }
+
+                                &:active {
+                                    color: #000000;
+                                    background: #f7f9fb;
+                                    border-color: #f6f8fb;
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #000000;
+                                    background: #f5f7fa;
+                                    border-color: #f5f7fa;
                                 }
                             }
                         }
@@ -223,17 +267,22 @@ body {
                     height: 28.5%;
                     padding: 10px;
 
-                    background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
+                    background: rgba(255, 255, 255, 1);
+                    border: 1px solid #cbd0dd;
+
+                    border-radius: 5px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
                     .two_haut {
                         display: flex;
                         height: 75%;
-                        
-                        border-bottom: 1px solid black;
+                        border-bottom: 1px solid #cbd0dd;
+
+                        .text_two_haut {
+                            font-size: 20px;
+                            font-weight: 700;
+                        }
                     }
 
                     .two_bas {
@@ -245,8 +294,8 @@ body {
                         .center {
                             position: absolute;
                             top: 84%;
-                            right: 0.5%;
-                            transform: translate(-50%,-50%);
+                            right: 1.75%;
+                            transform: translate(-50%, -50%);
 
                             input[type="checkbox"] {
                                 position: relative;
@@ -256,7 +305,7 @@ body {
                                 background-color: #e2e2e2;
                                 outline: none;
                                 border-radius: 20px;
-                                box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+                                box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
                                 transition: .5s;
                                 cursor: pointer;
                             }
@@ -275,7 +324,7 @@ body {
                                 left: 10%;
                                 background-color: white;
                                 transform: scale(1.1);
-                                box-shadow: 0 2px 5px rgba(0,0,0,.2);
+                                box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
                                 transition: .5s;
                             }
 
@@ -289,16 +338,72 @@ body {
 
                 .three {
                     display: flex;
+                    flex-direction: column;
                     width: auto;
                     height: 40%;
 
-                    background: rgba(255, 255, 255, 0.3);
-                    border-radius: 15px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
+                    background: rgba(255, 255, 255, 1);
+                    border-radius: 5px;
+                    border: 1px solid #cbd0dd;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
+
+                    .text_three_haut {
+                        display: flex;
+                        font-size: 20px;
+                        font-weight: 700;
+                        margin: 10px;
+                    }
+
+                    .déconnexion {
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+                        margin-left: 10px;
+                        margin-right: 10px;
+                        padding: 10px;
+
+                        border-top: 1px solid #cbd0dd;
+
+                        .text_three {
+                            display: flex;
+                        }
+
+                        .bouton {
+                            cursor: pointer;
+                            color: #141824;
+                            background: #f5f7fa;
+                            border-color: #f5f7fa;
+                            border-radius: 0.375rem;
+                            padding: 0.5rem 1rem;
+                            border-width: 1px;
+
+                            &:hover {
+                                color: #141824;
+                                background: #e3e6ed;
+                                border-color: #f6f8fb;
+                            }
+
+                            &:focus {
+                                box-shadow: 0 0 0 0.2rem rgba(211, 214, 218, 0.5);
+                            }
+
+                            &:active {
+                                color: #000000;
+                                background: #f7f9fb;
+                                border-color: #f6f8fb;
+                                box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                            }
+
+                            &:disabled {
+                                color: #000000;
+                                background: #f5f7fa;
+                                border-color: #f5f7fa;
+                            }
+                        }
+                    }
                 }
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss
index 7ed5f78..ca03db9 100644
--- a/src/styles/components/_repertoire.scss
+++ b/src/styles/components/_repertoire.scss
@@ -1,6 +1,6 @@
 body {
 
-    #page_repertoire {
+    .page_repertoire {
         display: flex;
         flex-direction: column;
         justify-content: space-evenly;
@@ -17,9 +17,10 @@ body {
             align-items: center;
             margin: 10px 10px 5px 10px;
 
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 15px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
+
+            border-radius: 5px;
             backdrop-filter: blur(3px);
             -webkit-backdrop-filter: blur(15px);
 
@@ -42,7 +43,6 @@ body {
                     width: 100%;
                     margin: 30px 30px;
                     border-radius: 25px;
-                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
 
                     input {
                         position: relative;
@@ -88,20 +88,19 @@ body {
             flex-direction: row;
             justify-content: space-between;
             width: auto;
-            height: 86%;
+            height: 84%;
 
             .nav_bar_verticale {
                 display: flex;
                 flex-direction: column;
-                justify-content: space-evenly;
+                justify-content: space-around;
                 align-items: center;
                 width: 5%;
                 margin: 5px 5px 10px 10px;
+                border: 1px solid #cbd0dd;
 
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
+                background: rgba(255, 255, 255, 1);
+                border-radius: 5px;
                 -webkit-backdrop-filter: blur(15px);
 
                 .parti_one {
@@ -156,106 +155,120 @@ body {
                     }
                 }
             }
+        }
+
+        .contenu {
+            width: 94.3%;
+            height: auto;
+            margin: 5px 10px 10px 5px;
 
-            .contenu {
+            .searchAndAddButton {
+                height: 100px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
                 width: 100%;
+                justify-content: space-between;
 
-                .searchAndAddButton {
-                    height: 100px;
+
+
+                .boutonAddContact {
+                    color: #3874ff;
+                    border-color: #3874ff;
+                    background-color: transparent;
+                    border: 1px solid #004dff;
+                    border-radius: .375rem;
+                    padding: .375rem .75rem;
+                    gap: 1rem;
+                    font-size: 1rem;
+                    line-height: 1.5;
+                    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+                    
+                    &:hover {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                    }
+                    &:focus {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
+                    }
+                    &:active {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                    }
+                    &:disabled {
+                        color: #3874ff;
+                        background-color: transparent;
+                        border-color: #3874ff;
+                    }
+                }
+
+                .input_box {
                     display: flex;
-                    flex-direction: row;
+                    justify-content: center;
                     align-items: center;
+                    position: relative;
+                    height: 40px;
+                    max-width: 350px;
                     width: 100%;
-                    justify-content: space-between;
+                    margin: 30px 30px;
+                    border-radius: 25px;
+
+                    input {
+                        position: relative;
+                        width: 100%;
+                        height: 100%;
+                        padding: 0 15px 0 65px;
+                        outline: none;
+                        border: none;
+                        border-radius: .375rem;
+                        font-size: 16px;
+                        font-weight: 400;
+                        color: rgb(90, 90, 90);
+                        border: 1px solid #cbd0dd;
 
-                    .boutonAddContact {
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        height: 40px;
-                        min-width: 150px;
-                        margin: 30px 30px;
-                        border-radius: 25px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     }
 
-                    .input_box {
+                    .search {
                         display: flex;
-                        justify-content: center;
                         align-items: center;
-                        position: relative;
-                        height: 40px;
-                        max-width: 350px;
-                        width: 100%;
-                        margin: 30px 30px;
-                        border-radius: 25px;
-                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-
-                        input {
-                            position: relative;
-                            width: 100%;
-                            height: 100%;
-                            padding: 0 15px 0 65px;
-                            outline: none;
-                            border: none;
-                            border-radius: 25px;
-                            font-size: 16px;
-                            font-weight: 400;
-                            color: #333;
-                        }
+                        justify-content: center;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        height: 100%;
+                        width: 60px;
+                        border-radius: 25px 0 0 25px;
 
-                        .search {
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            position: absolute;
-                            left: 0;
-                            top: 0;
-                            height: 100%;
-                            width: 60px;
-                            border-radius: 25px 0 0 25px;
-
-                            .search-icon {
-                                font-size: 30px;
-                                color: black;
-                            }
+                        .search-icon {
+                            font-size: 20px;
+                            color: black;
                         }
                     }
-
                 }
 
-                .tabListContact {
-                    margin-bottom: 20px;
-                    padding-right: 10px;
-                    height: 82%;
-                    scroll-behavior: smooth;
-                    overflow-y: scroll;
-
-                    &::-webkit-scrollbar {
-                        width: 15px;
-                    }
-
-                    &::-webkit-scrollbar-track {
-                        background: #f1f1f1;
-                    }
-
-                    &::-webkit-scrollbar-thumb {
-                        background: #888;
-                        border-radius: 10px;
-                    }
+            }
 
-                    &::-webkit-scrollbar-thumb:hover {
-                        background: #555;
-                    }
-                    .photoContact{
-                        width: 50px;
-                        height: 50px;
-                        border-radius: 50%;
-                        object-fit: cover;
-                        border: 1px solid black;
-                    }
+            .tabListContact {
+                margin-bottom: 20px;
+                padding-right: 10px;
+                height: 82%;
+                scroll-behavior: smooth;
+                overflow-y: scroll;
+
+                .photoContact {
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    border: 1px solid black;
                 }
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/contact/_addContact.scss b/src/styles/components/contact/_addContact.scss
new file mode 100644
index 0000000..b79b38c
--- /dev/null
+++ b/src/styles/components/contact/_addContact.scss
@@ -0,0 +1,8 @@
+.addContactPage{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ac6a812..8b48a99 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,4 +7,6 @@
 @import "./components/calendrier";
 @import "./components/parametre";
 @import "./components/repertoire";
-@import "./components/chargement"
\ No newline at end of file
+@import "./components/chargement";
+@import "./components/contact/addContact";;
+@import "./components/mailPourAdmin";
\ No newline at end of file
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 01c4180..5c9cca6 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,4 +1,3 @@
-
 $font-1: sans-serif;
 
 $color-1: #61dafb;
@@ -11,7 +10,7 @@ $alice-blue: #e8eef2ff;
 $blue-munsell: #0088a3ff;
 $malachite: #32e875ff;
 $rufous: #9b2915ff;
-$xiketic: #020114ff;
+$xiketic: #0f111a;
 $beau-blue: #b1c5d2;
 
 
@@ -49,7 +48,501 @@ li {
     list-style-type: none;
 }
 
-.dark{
+.dark {
     background-color: $xiketic;
-    color: white;
+    color: rgb(159, 166, 188);
+
+    .page_analyse {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+            .titre {
+                color: rgb(159, 166, 188);
+            }
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
+            }
+
+            .Analyse {
+                .Stat-1 {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+
+                    .Stat-1_titre p {
+                        background-color: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                        color: rgb(159, 166, 188);
+                    }
+                    canvas {
+                        color: rgb(159, 166, 188);
+                    }
+                }
+
+                .Stat-2 {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+
+                    .Stat-2_titre p {
+                        background-color: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                        color: rgb(159, 166, 188);
+                    }
+                }
+            }
+        }
+
+    }
+
+    .page_parametre {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
+            }
+
+            .Parametre {
+                .one {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .one_haut {
+                        border-color: rgba(50, 55, 72, 1);
+                    }
+                    .one_milieu{
+                        border-color: rgba(50, 55, 72, 1);
+                        .bouton_submit{
+                            .bouton_signalerPB{
+                                color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                            }
+                        }
+                    }
+
+                    .one_bas {
+                        .bouton_submit {
+                            .bouton_modifierMDP {
+                                color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .two {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .two_haut {
+                        border-color: rgba(50, 55, 72, 1);
+                    }
+                }
+
+                .three {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .déconnexion{
+                        border-color: rgba(50, 55, 72, 1);
+                        .bouton{
+                            color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .page_compte {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
+            }
+
+            .Compte {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+
+                .name_picture {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+
+                    .picture {
+                        border-color: rgba(50, 55, 72, 1);
+                        #display_image {
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+                    }
+                    .name{
+                        .bouton_submit{
+                            .bouton_modifierNom{
+                                color: #cbd0dd;
+                                background: rgba(49, 55, 74, 0.5);
+                                border-color: rgba(49, 55, 74, 0.5);
+
+                                &:hover {
+                                    color: #cbd0dd;
+                                    background: rgba(49, 55, 74, 0.8);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                }
+
+                                &:focus {
+                                    box-shadow: 0 0 0 0.2rem rgba(102, 108, 125, 0.5);
+                                }
+
+                                &:active {
+                                    color: #fff;
+                                    background: rgba(137, 141, 152, 0.6);
+                                    border-color: rgba(101, 105, 119, 0.55);
+                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                                }
+
+                                &:disabled {
+                                    color: #fff;
+                                    background: rgba(49, 55, 74, 0.5);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .infoPerso {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .description, .parti_pays,.parti_mail { 
+                        border-color: rgba(50, 55, 72, 1);
+                    }
+                }
+
+                .infoEntreprise {
+                    background: rgba(21, 24, 35, 1);
+                    border: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+                    .description, .parti_name,.parti_secteurAct { 
+                        border-color: rgba(50, 55, 72, 1);
+                    }
+                }
+            }
+        }
+
+    }
+
+    .page_repertoire {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
+            }
+
+        }
+
+        .contenu {
+            .searchAndAddButton {
+                .boutonAddContact {
+                    color: #3874ff;
+                    border-color: #3874ff;
+                    background-color: transparent;
+                    border-radius: .375rem;
+                    padding: .375rem .75rem;
+                    gap: 1rem;
+                    font-size: 1rem;
+                    line-height: 1.5;
+                    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+                    &:hover {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                    }
+
+                    &:focus {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
+                    }
+
+                    &:active {
+                        color: #fff;
+                        background-color: #3874ff;
+                        border-color: #004dff;
+                        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+                    }
+
+                    &:disabled {
+                        color: #3874ff;
+                        background-color: transparent;
+                        border-color: #3874ff;
+                    }
+                }
+
+                .input_box {
+                    input {
+                        background: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+
+                        &::-webkit-input-placeholder {
+                            color: rgb(160, 166, 186);
+                        }
+                    }
+
+                }
+            }
+
+            .tabListContact {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+                color: rgb(159, 166, 188);
+                th {
+                    color: rgb(159, 166, 188);
+                }
+                td {
+                    color: rgb(159, 166, 188);
+                }
+                tr {
+                    border-color: rgba(50, 55, 72, 1);
+                    &:hover {
+                        background-color: rgba(49, 55, 74, 0.5);
+                    }
+                }
+            }
+        }
+    }
+
+    .page_calendrier {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+            .titre{
+                color: rgb(159, 166, 188);
+            }
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
+            }
+
+            .Calendrier {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+
+                .Titre {
+                    background: rgba(21, 24, 35, 1);
+                    border-right: 1px solid rgba(50, 55, 72, 1);
+                    color: rgb(159, 166, 188);
+
+                    .mini_formulaire_evenement {
+                        .ajout_input {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                            color: #fff;
+                        }
+
+                        .date {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                            color: #fff;
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+
+    .page_dashboard {
+        .haut_de_page {
+            background: rgba(21, 24, 35, 1);
+            border: 1px solid rgba(50, 55, 72, 1);
+        }
+
+        .bas_de_page {
+            .nav_bar_verticale {
+                background: rgba(21, 24, 35, 1);
+                border: 1px solid rgba(50, 55, 72, 1);
+                .svgImage {
+                    fill: rgb(159, 166, 188);
+                }
+            }
+
+            .Dashboard {
+                ._gauche {
+                    ._haut {
+                        .Mes_infos {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+
+                        .Alertes {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+                    }
+
+                    ._bas {
+                        .Mes_prochaines_activités {
+                            background: rgba(21, 24, 35, 1);
+                            border: 1px solid rgba(50, 55, 72, 1);
+                        }
+
+                        .Chiffre_clés {
+                            .Ch_Clé_gauche {
+                                .Ch_Clé_gauche_haut {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+
+                                .Ch_Clé_gauche_bas {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+                            }
+
+                            .Ch_Clé_droite {
+                                .Ch_Clé_droite_haut {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+
+                                .Ch_Clé_droite_bas {
+                                    background: rgba(21, 24, 35, 1);
+                                    border: 1px solid rgba(50, 55, 72, 1);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                ._droite {
+                    .clients_important {
+                        background: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                    }
+
+                    .contacts_ajouté_récemment {
+                        background: rgba(21, 24, 35, 1);
+                        border: 1px solid rgba(50, 55, 72, 1);
+                    }
+                }
+
+            }
+        }
+    }
 }
\ No newline at end of file