diff --git a/client/src/components/ContactDetailDialog.tsx b/client/src/components/ContactDetailDialog.tsx
new file mode 100644
index 0000000..ee9daff
--- /dev/null
+++ b/client/src/components/ContactDetailDialog.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { ContactDetails as ContactDetailType } from 'jami-web-common';
+import { QRCodeCanvas } from 'qrcode.react';
+import { useTranslation } from 'react-i18next';
+
+import ConversationAvatar from './ConversationAvatar';
+import { InfosDialog } from './Dialog';
+import { DialogContentList } from './Dialog';
+
+interface ContactDetailDialogProps {
+  contactDetail: ContactDetailType;
+  open: boolean;
+  onClose: () => void;
+}
+
+const ContactDetailDialog = ({ contactDetail, open, onClose }: ContactDetailDialogProps) => {
+  const { t } = useTranslation();
+  const items = [
+    {
+      label: t('contact_details_name'),
+      value: contactDetail.id,
+    },
+    {
+      label: t('contact_details_identifier'),
+      value: contactDetail.id,
+    },
+    {
+      label: t('contact_details_qr_code'),
+      value: <QRCodeCanvas size={80} value={`${contactDetail.id}`} />,
+    },
+  ];
+
+  return (
+    <InfosDialog
+      open={open}
+      onClose={onClose}
+      icon={
+        <ConversationAvatar
+          sx={{ width: 'inherit', height: 'inherit' }}
+          displayName={contactDetail.id || contactDetail.id}
+        />
+      }
+      title={contactDetail.id}
+      content={<DialogContentList title={t('contact_details_dialog_title')} items={items} />}
+    />
+  );
+};
+
+export default ContactDetailDialog;
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)}>
diff --git a/client/src/locale/en/translation.json b/client/src/locale/en/translation.json
index 8fff2ae..f809b14 100644
--- a/client/src/locale/en/translation.json
+++ b/client/src/locale/en/translation.json
@@ -10,6 +10,10 @@
   "change_picture": "Change the picture",
   "connecting": "Connecting...",
   "connecting_call": "Connecting...",
+  "contact_details_dialog_title": "Info",
+  "contact_details_identifier": "Identifier",
+  "contact_details_name": "Contact Name",
+  "contact_details_qr_code": "QR Code",
   "conversation_add_contact": "Add contact",
   "conversation_add_contact_form": "Add a contact",
   "conversation_ask_confirm_block": "Would you really like to block this conversation?",
diff --git a/client/src/locale/fr/translation.json b/client/src/locale/fr/translation.json
index ac4e522..d1ddf50 100644
--- a/client/src/locale/fr/translation.json
+++ b/client/src/locale/fr/translation.json
@@ -10,6 +10,10 @@
   "change_picture": "Modifier l'image",
   "connecting": "Connexion en cours...",
   "connecting_call": "Connexion...",
+  "contact_details_dialog_title": "Informations",
+  "contact_details_identifier": "Identifiant",
+  "contact_details_name": "Nom du contact",
+  "contact_details_qr_code": "Code QR",
   "conversation_add_contact": "Ajouter le contact",
   "conversation_add_contact_form": "Ajouter un contact",
   "conversation_ask_confirm_block": "Souhaitez-vous vraiment bloquer cette conversation ?",