diff --git a/package-lock.json b/package-lock.json
index 6583b16..61260d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "addeventlistener": "^2.0.0",
         "axios": "^1.2.0",
         "chart": "^0.1.2",
-        "chart.js": "^3.9.1",
+        "chart.js": "^4.0.1",
         "crypto-js": "^4.1.1",
         "darkreader": "^4.9.58",
         "date-fns": "^2.29.3",
@@ -30,6 +30,7 @@
         "pg": "^8.8.0",
         "react": "^18.2.0",
         "react-big-calendar": "^1.5.0",
+        "react-chartjs-2": "^5.0.1",
         "react-datepicker": "^4.8.0",
         "react-dom": "^18.2.0",
         "react-loading": "^2.0.3",
@@ -6127,9 +6128,12 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
-      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz",
+      "integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA==",
+      "engines": {
+        "pnpm": "^7.0.0"
+      }
     },
     "node_modules/check-types": {
       "version": "11.1.2",
@@ -14776,6 +14780,15 @@
         "react-dom": "^16.14.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",
+      "integrity": "sha512-u38C9OxynlNCBp+79grgXRs7DSJ9w8FuQ5/HO5FbYBbri8HSZW+9SWgjVshLkbXBfXnMGWakbHEtvN0nL2UG7Q==",
+      "peerDependencies": {
+        "chart.js": "^4.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-datepicker": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
@@ -22197,9 +22210,9 @@
       }
     },
     "chart.js": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
-      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.0.1.tgz",
+      "integrity": "sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA=="
     },
     "check-types": {
       "version": "11.1.2",
@@ -28276,6 +28289,12 @@
         "uncontrollable": "^7.2.1"
       }
     },
+    "react-chartjs-2": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz",
+      "integrity": "sha512-u38C9OxynlNCBp+79grgXRs7DSJ9w8FuQ5/HO5FbYBbri8HSZW+9SWgjVshLkbXBfXnMGWakbHEtvN0nL2UG7Q==",
+      "requires": {}
+    },
     "react-datepicker": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
diff --git a/package.json b/package.json
index 10f2b72..11d87d7 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "addeventlistener": "^2.0.0",
     "axios": "^1.2.0",
     "chart": "^0.1.2",
-    "chart.js": "^3.9.1",
+    "chart.js": "^4.0.1",
     "crypto-js": "^4.1.1",
     "darkreader": "^4.9.58",
     "date-fns": "^2.29.3",
@@ -25,6 +25,7 @@
     "pg": "^8.8.0",
     "react": "^18.2.0",
     "react-big-calendar": "^1.5.0",
+    "react-chartjs-2": "^5.0.1",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
     "react-loading": "^2.0.3",
diff --git a/server-api/1 b/server-api/1
new file mode 100644
index 0000000..0a1c474
--- /dev/null
+++ b/server-api/1
@@ -0,0 +1 @@
+703
diff --git a/server-api/api.js b/server-api/api.js
index c95ec21..751c6d4 100644
--- a/server-api/api.js
+++ b/server-api/api.js
@@ -213,4 +213,39 @@ app.get('/Contact/AllWithCustomerName', (req, res) => {
         console.log(result);
         res.send(result);
     });
-});
\ No newline at end of file
+});
+
+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(form);
+
+    const sql = `INSERT INTO contact(name, firstname, mail, phone, idUser, idCustomer) VALUES ('${form.name}', '${form.firstname}', '${form.mail}',  '${form.phone}' , '${form.idrole}', '${form.idUser}', '${form.idCustomer}' )`;
+    db.query(sql , (err, result) => { 
+        if (err) throw err;
+        console.log(result);
+        res.send('Post added...' + result.insertId);
+    });
+});
diff --git a/server-api/kill b/server-api/kill
new file mode 100644
index 0000000..0a1c474
--- /dev/null
+++ b/server-api/kill
@@ -0,0 +1 @@
+703
diff --git a/src/App.js b/src/App.js
index f2910b2..552dbb7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,7 @@ import Calendrier from './pages/Calendrier';
 import Repertoire from './pages/Repertoire';
 import Parametres from './pages/Parametres';
 import Chargement from './pages/Chargement';
+import AddContact from './components/Contact/AddContact'
 import { Component } from 'fullcalendar';
 import RestartPassword from './pages/RestartPassword';
 
@@ -38,6 +39,7 @@ const App = () => {
         <Route path="/Repertoire" element={<Repertoire />} />
         <Route path="/Parametres" element={<Parametres />} />
         <Route path="/Chargement" element={<Chargement />} />
+        <Route path="/Repertoire/add" element={<AddContact />} />
         </Routes>
       </BrowserRouter>
     );
diff --git a/src/components/Contact/AddContact.js b/src/components/Contact/AddContact.js
index c9c0c60..1a2d794 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';
 // HERE ABOVE useHistory IS REPLACED WITH useNavigate 
 
-function AddContact(props) {
+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();
-    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('/');
-    }
+    useEffect(() =>{
+        api.get('/Entreprise/All').then((response) => {
+            setEntreprises(response.data);
+            console.log(entreprises);
+        });
+    }, []);
+
+    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());
+        console.log(values.name);
+        api.get('/Contact/Exist/'+ values.idcontact).then((response) => {
+            const login = response.data;
+            if (login.length > 0){
+                setLoginError(true);
+            }
+            else {
+                setLoginError(false);
+
+                api.post('/Contact/Add', values).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 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='name' 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" 
+                                    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?"L'identifiant 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>
-                <button className='ui secondary button'>Add</button>
-            </form>
         </div>
     )
 }
 
-export default AddContact
+export default AddContact;
diff --git a/src/pages/Admin_create.js b/src/pages/Admin_create.js
index b9d2528..4d23907 100644
--- a/src/pages/Admin_create.js
+++ b/src/pages/Admin_create.js
@@ -28,6 +28,7 @@ function Admin_create() {
 
     function handleChangeRole(event){
         setSelectedIdRole(event.target.value);
+        console.log(event.target.value);
     };
 
     function checkAdd(event){
diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js
index 2c75f50..e52d96d 100644
--- a/src/pages/Repertoire.js
+++ b/src/pages/Repertoire.js
@@ -4,7 +4,8 @@ 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';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -12,7 +13,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,7 +22,7 @@ function Repertoire() {
     const [SearchTerm, setSearchTerm] = useState("");
     const [SearchResults, setSearchResults] = useState([]);
     const [customers, setCustomers] = useState([]);
-    
+
 
     useEffect(() => {
         api.get('/Contact/AllWithCustomerName').then((response) => {
@@ -62,7 +63,9 @@ function Repertoire() {
                                 <i class="uil uil-search search-icon"></i>
                             </span>
                         </div>
-                        <button onClick={ajouter()} className="boutonAddContact">Ajouter</button>
+                        <NavLink to="/Repertoire/add">
+                            <button className="boutonAddContact">Ajouter</button>
+                        </NavLink>
                     </span>
                     <TableContainer component={Paper} className="tabListContact">
                         <Table>
@@ -119,10 +122,44 @@ function Repertoire() {
     );
 };
 
-function ajouter() {
-    console.log("ajouter");
+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/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss
index 7ed5f78..452f105 100644
--- a/src/styles/components/_repertoire.scss
+++ b/src/styles/components/_repertoire.scss
@@ -177,6 +177,7 @@ body {
                         margin: 30px 30px;
                         border-radius: 25px;
                         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                        text-decoration-line: none;
                     }
 
                     .input_box {
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..eb40ba3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,4 +7,5 @@
 @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";
\ No newline at end of file