diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js
index 41fd4b2..fe06f47 100644
--- a/src/pages/Repertoire.js
+++ b/src/pages/Repertoire.js
@@ -21,7 +21,6 @@ function Repertoire() {
     const [contactSelectionne, setContactSelectionne] = useState("");
     const [modifContact, setModifContact] = useState(false);
     const [showConfirmation, setShowConfirmation] = useState(false);
-    console.log("showConfirmation", showConfirmation);
     const [contacts, setContacts] = useState([]);
     const [SearchTerm, setSearchTerm] = useState("");
     const [SearchResults, setSearchResults] = useState([]);
@@ -43,14 +42,6 @@ function Repertoire() {
         });
     }, []);
 
-    
-
-    function onClickDetail() {
-        return <NavLink to="/Repertoire/add">
-            
-        </NavLink>
-    }
-
     function handleDeleteClick(contact) {
         api.delete('/Contact/Delete/' + contact.idcontact).then((response) => {
             const newContacts = contacts.filter((c) => c.idcontact !== contact.idcontact);
@@ -169,36 +160,65 @@ function Repertoire() {
                                             <TableCell>Nom</TableCell>
                                             <TableCell>Prénom</TableCell>
                                             <TableCell>Entreprise</TableCell>   
-                        <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>
-                                        <TableCell>Supprimer</TableCell>
-                                    </TableRow>
-                                </TableHead>
-                                <TableBody>
-                                    
-                                        {contacts.map((contact) => (
-                                            <TableRow key={contact.idcontact} onClick={onClickDetail()}>
-                                                
-                                                    <TableCell><img className="photoContact" src={user} /></TableCell>
-                                                    <TableCell>{contact.lastname}</TableCell>
-                                                    <TableCell>{contact.firstname}</TableCell>
-                                                    <TableCell>{contact.name}</TableCell>
-                                               
-                                                
-                                                <TableCell><button className="boutonSuppContact" onClick={() => handleDeleteClick(contact)}>Supprimer</button></TableCell>
                                         </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {contacts.map((contact) => (
+                                            <TableRow key={contact.idcontact} onClick={() => setContactSelectionne(contact)}>
+                                                <TableCell><img className="photoContact" src={user} /></TableCell>
+                                                <TableCell>{contact.lastname}</TableCell>
+                                                <TableCell>{contact.firstname}</TableCell>
+                                                <TableCell>{contact.name}</TableCell>
+                                            </TableRow>
                                         ))}
-                                    
-                                </TableBody>
-                            </Table>
-                        </TableContainer>
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        : !modifContact ?
+                            
+                            <div>
+                                <h2>{contactSelectionne.lastname} {contactSelectionne.firstname}</h2>
+                                <p>Mail: {contactSelectionne.mail}</p>
+                                <p>Numéro de téléphone: {contactSelectionne.phone}</p>
+                                <p>Entreprise: {contactSelectionne.name}</p>
+                                {!showConfirmation ?
+                                <div>
+                                    <button className="boutonSupprimer" onClick={() => setShowConfirmation(true)}>Supprimer</button>
+                                    <button className="boutonModifier" onClick={() => setModifContact(true)}>Modifier</button>
+                                </div>
+                                :
+                                <div>
+                                    <p>Êtes-vous sûr de vouloir supprimer ce contact ?</p>
+                                    <button className="boutonSupprimer" onClick={() => handleDeleteClick(contactSelectionne)}>Supprimer</button>
+                                </div>
+                                }
+                            </div>
+                        :
+                            <ContactForm contact={contactSelectionne} setModifContact={setModifContact} />
+                        }
                     </div>
+                </div>
+            </div>
+        </body>
+    );
+};
+
+function SupprimerContact(props) {
+
+    const navigate = useNavigate();
+    const deleteContact = (id) => {
+        api.delete('/Contact/' + id).then(() => {
+            props.getContactList();
+        });
+    };
+
+    return (
+        <div className="ui main">
+            <h2>Supprimer Contact</h2>
+            <button className="ui button blue" onClick={() => deleteContact(props.id)}>Supprimer</button>
+        </div>
+    );
+}