diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index 73950a2..b15238f 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,35 +1,163 @@
 import List from "@mui/material/List";
 import authManager from "../AuthManager";
+import ConversationAvatar from "./ConversationAvatar";
+import Modal from 'react-modal';
 import React, { useState, useEffect } from "react";
+import { Person } from "@mui/icons-material";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+import { ListItem, ListItemAvatar, ListItemText } from "@mui/material";
 
+const customStyles = {
+  content: {
+    top: "50%",
+    left: "50%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-50%",
+    transform: "translate(-50%, -50%)",
+  },
+};
 
 export default function ContactList() {
-  const { accountId } = useAppSelector((state) => state.app);
+  const { accountId, accountObject } = useAppSelector((state) => state.app);
   const dispatch = useAppDispatch();
 
   const [contacts, setContacts] = useState([]);
+  const [currentContact, setCurrentContact] = useState({});
+
+  const [modalIsOpen, setIsOpen] = useState(false);
+  const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
+  const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
+
+  const openModal = () => setIsOpen(true);
+  const openModalDetails = () => setModalDetailsIsOpen(true);
+  const openModalDelete = () => setModalDeleteIsOpen(true);
+
+  const closeModal = () => setIsOpen(false);
+
+  const closeModalDetails = () => setModalDetailsIsOpen(false);
+  const closeModalDelete = () => setModalDeleteIsOpen(false);
+
+  const getContactDetails = () => {
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}/contacts/${currentContact.id}`, {
+        signal: controller.signal,
+      })
+      .then((res) => res.json())
+      .then((result) => {
+        // setContacts(result);
+        console.log("CONTACT LIST - DETAILS: ", result);
+      })
+      .catch((e) => console.log("ERROR 2", e));
+  };
+
+  const removeContact = () => {};
+
+  const blockContact = () => {};
+
 
   useEffect(() => {
     const controller = new AbortController();
     authManager
-      .fetch(`/api/accounts/${accountId}/contacts/`, {
-        method: "GET",
-        header: { "Content-Type": "application/json" },
-        // signal: controller.signal,
+      .fetch(`/api/accounts/${accountId}/conversations`, {
+        signal: controller.signal,
       })
-      .then((res) => {
-        res.json();
-      })
+      .then((res) => res.json())
       .then((result) => {
-        console.log(result);
+        setContacts(result);
       });
     return () => controller.abort();
   }, []);
 
   return (
     <div className="rooms-list">
-      <List></List>
+      <Modal
+        isOpen={modalIsOpen}
+        //   onAfterOpen={afterOpenModal}
+        onRequestClose={closeModal}
+        style={customStyles}
+        contentLabel="Example Modal"
+      >
+        {/* <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2> */}
+        <button onClick={closeModal}>close</button>
+
+        {/* <div>
+            <Person /> Démarrer appel vidéo
+          </div>
+          <br />
+
+          <div>
+            <Person /> Démarrer appel audio
+          </div> */}
+        <br />
+
+        <div
+          onClick={() => {
+            console.log("open dialog Supprimer: ");
+            closeModal();
+            openModalDelete();
+          }}
+        >
+          <Person /> Supprimer contact
+        </div>
+        <br />
+
+        <div
+          onClick={() => {
+            console.log("open dialog BLOCK: ");
+            closeModal();
+            openModalDelete();
+          }}
+        >
+          <Person /> Bloquer le contact
+        </div>
+        <br />
+
+        <div
+          onClick={() => {
+            console.log("open details contact for: ");
+            closeModal();
+            openModalDetails();
+            getContactDetails();
+          }}
+        >
+          <Person /> Détails du contact
+        </div>
+      </Modal>
+      <Modal
+        isOpen={modalDeleteIsOpen}
+        //   onAfterOpen={afterOpenModalDetails}
+        onRequestClose={closeModalDelete}
+        style={customStyles}
+        contentLabel="Merci de confirmer"
+      >
+        Voulez vous vraiment supprimer ce contact?
+        <button onClick={closeModalDelete}>Bloquer</button>
+        <button onClick={closeModalDelete}>Annuler</button>
+      </Modal>
+
+      <List>
+        {contacts.map((contact) => (
+          <ListItem
+            button
+            alignItems="flex-start"
+            // selected={isSelected}
+            onClick={() => {
+              setCurrentContact(contact);
+              openModal();
+            }}
+          >
+            <ListItemAvatar>
+              <ConversationAvatar
+              // displayName={conversation.getDisplayNameNoFallback()}
+              // displayName={`${contact.id}`}
+              />
+            </ListItemAvatar>
+            <ListItemText primary={contact.id} secondary={contact.id} />
+          </ListItem>
+        ))}
+      </List>
     </div>
   );
 }
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 26736e9..b45f562 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -75,7 +75,6 @@
       })
       .then((result) => {
         console.log("YYY 1", result);
-        // setState({ loaded: true, account: Account.from(result) });
       })
       .catch((e) => console.log("YYY 2", e));
     //       return () => controller.abort()
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index 915a24b..a0ebc3b 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -6,10 +6,12 @@
 import { Link as RouterLink } from 'react-router-dom';
 
 function ListItemLink(props) {
-  const { icon, primary, secondary, to } = props
+  const { icon, primary, secondary, to, account } = props
 
   const renderLink = useMemo(
-    () => forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
+    () => forwardRef((itemProps, ref) => {
+    console.log("LIST ITEM LINK: ", account, itemProps)
+    return <RouterLink to={to} ref={ref} {...itemProps} state={account}/>}),
     [to])
 
   return (
@@ -25,6 +27,7 @@
   primary: PropTypes.string.isRequired,
   secondary: PropTypes.string,
   to: PropTypes.string.isRequired,
+  account: PropTypes.object
 }
 
 export default ListItemLink
\ No newline at end of file
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index d555820..fa29a7d 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -6,9 +6,10 @@
 import authManager from '../AuthManager'
 import Account from '../../../model/Account'
 import { useAppSelector, useAppDispatch } from '../../redux/hooks';
-import { setAccountId } from '../../redux/appSlice';
+import { setAccountId, setAccountObject } from '../../redux/appSlice';
 
 const AccountSettings = (props) => {
+  console.log("ACCOUNT SETTINGS", props.account)
   const accountId = props.accountId || useParams().accountId
   const dispatch = useAppDispatch();
 
@@ -23,6 +24,7 @@
       .then(result => {
         let account = Account.from(result)
         account.setDevices(result.devices)
+        dispatch(setAccountObject(account))
         setState({ loaded: true, account: account})
 
       }).catch(e => console.log(e))