diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index ed69a77..26736e9 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,29 +1,211 @@
 import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
-import React from 'react'
+import React, { useState } from "react";
 import Conversation from '../../../model/Conversation'
 import { useNavigate, useParams } from "react-router-dom"
 import ConversationAvatar from './ConversationAvatar'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal from 'react-modal';
+import { Person } from "@mui/icons-material";
+import authManager from '../AuthManager'
+
+const customStyles = {
+  content: {
+    top: "50%",
+    left: "50%",
+    right: "auto",
+    bottom: "auto",
+    marginRight: "-50%",
+    transform: "translate(-50%, -50%)",
+  },
+};
 
 export default function ConversationListItem(props) {
-    const { conversationId, contactId } = useParams()
-    const conversation = props.conversation
-    const pathId = conversationId || contactId
-    const isSelected = conversation.getDisplayUri() === pathId
-    const navigate = useNavigate()
+  const { conversationId, contactId } = useParams();
+  const conversation = props.conversation;
+  console.log(
+    "XXX",
+    conversation,
+    conversation.id,
+    conversation.getAccountId()
+  );
 
-    const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
-    if (conversation instanceof Conversation) {
-        return (
-            <ListItem
-                button
-                alignItems="flex-start"
-                selected={isSelected}
-                onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}>
-                <ListItemAvatar><ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} /></ListItemAvatar>
-                <ListItemText
-                    primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
-            </ListItem>
-        )
-    } else
-        return null
+  const pathId = conversationId || contactId;
+  const isSelected = conversation.getDisplayUri() === pathId;
+  const navigate = useNavigate();
+
+  let subtitle;
+  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);
+
+  function afterOpenModal() {
+    // references are now sync'd and can be accessed.
+    subtitle.style.color = "#f00";
+  }
+
+  const getAccountDetails = (accountId) => {
+    // useEffect(() => {
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${conversation.getAccountId()}`, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        // body: JSON.stringify(newDetails)
+        //   {
+        //     uri: conversation.getFirstMember()?.contact?.getUri(),
+        //     signal: controller.signal,
+        //   },
+      })
+      .then((res) => {
+        console.log("YYY 0", res);
+        res.json();
+      })
+      .then((result) => {
+        console.log("YYY 1", result);
+        // setState({ loaded: true, account: Account.from(result) });
+      })
+      .catch((e) => console.log("YYY 2", e));
+    //       return () => controller.abort()
+    //   }, [accountId])
+  };
+
+  const [userName, setUserName] = useState("User name");
+  const [userId, setUserId] = useState("User id");
+  const [codeQr, setVodeQr] = useState("QR");
+  const [isSwarm, setIsSwarm] = useState(true);
+
+  const uri = conversation.getId()
+    ? `conversation/${conversation.getId()}`
+    : `addContact/${conversation.getFirstMember().contact.getUri()}`;
+  if (conversation instanceof Conversation) {
+    return (
+      <div>
+        <button onClick={openModal}>Open Modal</button>
+        <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();
+              getAccountDetails(conversation.getAccountId());
+            }}
+          >
+            <Person /> Détails de la conversation
+          </div>
+        </Modal>
+
+        <Modal
+          isOpen={modalDetailsIsOpen}
+          //   onAfterOpen={afterOpenModalDetails}
+          onRequestClose={closeModalDetails}
+          style={customStyles}
+          contentLabel="Détails contact"
+        >
+          <div>
+            <Person /> {userName}
+          </div>
+          <br />
+
+          <div>Nom d'utilisateur {userName}</div>
+          <br />
+
+          <div>Identifiant {userId}</div>
+          <br />
+
+          <div>Code QR {codeQr}</div>
+          <br />
+
+          <div>est un swarm {isSwarm}</div>
+          <br />
+
+          <button onClick={closeModalDetails}>Fermer</button>
+        </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>
+
+        <ListItem
+          button
+          alignItems="flex-start"
+          selected={isSelected}
+          onClick={() =>
+            navigate(`/account/${conversation.getAccountId()}/${uri}`)
+          }
+        >
+          <ListItemAvatar>
+            <ConversationAvatar
+              displayName={conversation.getDisplayNameNoFallback()}
+            />
+          </ListItemAvatar>
+          <ListItemText
+            primary={conversation.getDisplayName()}
+            secondary={conversation.getDisplayUri()}
+          />
+        </ListItem>
+      </div>
+    );
+  } else return null;
 }