diff --git a/client/src/components/ContactList.tsx b/client/src/components/ContactList.tsx
index 3d6d76b..c1e516c 100644
--- a/client/src/components/ContactList.tsx
+++ b/client/src/components/ContactList.tsx
@@ -19,11 +19,12 @@
 import { Person } from '@mui/icons-material';
 import { Box, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
 import List from '@mui/material/List';
-import { useEffect, useState } from 'react';
-// import Modal from '@mui/material/Modal';
+import { ContactDetails as ContactDetailType } from 'jami-web-common';
+import { useEffect, useMemo, useState } from 'react';
 import Modal from 'react-modal';
 
 import { useAuthContext } from '../contexts/AuthProvider';
+import ContactDetailDialog from './ContactDetailDialog';
 import ConversationAvatar from './ConversationAvatar';
 
 const customStyles = {
@@ -43,45 +44,38 @@
   // const { accountId } = useAppSelector((state) => state.userInfo);
   // const dispatch = useAppDispatch();
 
-  const [contacts, setContacts] = useState<Array<any>>([]);
+  const [contacts, setContacts] = useState<Array<ContactDetailType>>([]);
   const [currentContactId, setCurrentContactId] = useState<string>('');
   const [parentModalOpen, setParentModalOpen] = useState<boolean>(false);
   const [childModalOpen, setChildModalOpen] = useState<boolean>(false);
   const [isBlocking, setIsBlocking] = useState(true);
-  // const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
-
+  const [contactDetail, setContactDetail] = useState<ContactDetailType>({
+    added: '',
+    confirmed: '',
+    conversationId: '',
+    id: '',
+  });
   const closeParentModal = () => setParentModalOpen(false);
   const openChildModal = () => setChildModalOpen(true);
   const closeChildModal = () => setChildModalOpen(false);
 
+  const [contactDetailDialogOpen, setContactDetailDialogOpen] = useState<boolean>(false);
+
   const handleClickContact = (id: string): void => {
     setCurrentContactId(id);
     setParentModalOpen(true);
   };
-  // const openModalDetails = () => setModalDetailsIsOpen(true);
 
-  //   const getContactDetails = () => {
-  //     const controller = new AbortController();
-  //     // try {
-  //     //     const { data } = await axiosInstance.get(`/contacts/${currentContactId}`, {
-  //     //         signal: controller.signal,
-  //     //     });
-  //     //     console.log('CONTACT LIST - DETAILS: ', data);
-  //     // } catch (e) {
-  //     //     console.log('ERROR GET CONTACT DETAILS: ', e);
-  //     // }
-
-  //     axiosInstance
-  //       .get(`/contacts/${currentContactId}`, {
-  //         signal: controller.signal,
-  //       })
-  //       .then((data) => {
-  //         console.log('CONTACT LIST - DETAILS: ', data);
-  //       })
-  //       .catch((err) => {
-  //         console.log('ERROR GET CONTACT DETAILS: ', err);
-  //       });
-  //   };
+  const getContactDetails = () => {
+    axiosInstance
+      .get<ContactDetailType>(`/contacts/${currentContactId}`)
+      .then(({ data }) => {
+        setContactDetail(data);
+      })
+      .catch((err) => {
+        console.log('ERROR GET CONTACT DETAILS: ', err);
+      });
+  };
 
   const removeContact = (): void => {
     console.log('Removing contact');
@@ -140,6 +134,18 @@
     closeParentModal();
   };
 
+  const ContactDetailDialogElement = useMemo(() => {
+    const onClosingContactDetailDialog = () => setContactDetailDialogOpen(false);
+
+    return (
+      <ContactDetailDialog
+        contactDetail={contactDetail}
+        open={contactDetailDialogOpen}
+        onClose={onClosingContactDetailDialog}
+      />
+    );
+  }, [contactDetail, contactDetailDialogOpen]);
+
   useEffect(() => {
     const controller = new AbortController();
     axiosInstance
@@ -188,8 +194,8 @@
             onClick={() => {
               console.log('open details contact for: ');
               closeParentModal();
-              // openModalDetails();
-              // getContactDetails();
+              setContactDetailDialogOpen(true);
+              getContactDetails();
             }}
           >
             <Person /> Détails du contact
@@ -215,6 +221,8 @@
         </Box>
       </Modal>
 
+      {ContactDetailDialogElement}
+
       <List>
         {contacts?.map((contact) => (
           <ListItem alignItems="flex-start" key={contact.id} onClick={() => handleClickContact(contact.id)}>