diff --git a/client/package.json b/client/package.json
index 53101f1..b2c1c5f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,7 @@
     "i18next": "^21.9.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.15.1",
     "react-emoji-render": "^1.2.4",
     "react-fetch-hook": "^1.9.5",
     "react-i18next": "^11.18.5",
diff --git a/client/redux/appSlice.ts b/client/redux/appSlice.ts
index f0fc628..e430aad 100644
--- a/client/redux/appSlice.ts
+++ b/client/redux/appSlice.ts
@@ -3,12 +3,12 @@
 
 // Define a type for the slice state
 interface appState {
-  value: number;
+  accountId: string;
 }
 
 // Define the initial state using that type
 const initialState: appState = {
-  value: 0,
+  accountId: "",
 };
 
 export const appSlice = createSlice({
@@ -16,22 +16,15 @@
   // `createSlice` will infer the state type from the `initialState` argument
   initialState,
   reducers: {
-    increment: (state) => {
-      state.value += 1;
-    },
-    decrement: (state) => {
-      state.value -= 1;
-    },
-    // Use the PayloadAction type to declare the contents of `action.payload`
-    incrementByAmount: (state, action: PayloadAction<number>) => {
-      state.value += action.payload;
+    setAccountId: (state, action: PayloadAction<string>) => {
+      state.accountId = action.payload;
     },
   },
 });
 
-export const { increment, decrement, incrementByAmount } = appSlice.actions;
+export const { setAccountId } = appSlice.actions;
 
 // Other code such as selectors can use the imported `RootState` type
-export const selectCount = (state: RootState) => state.app.value;
+// export const selectCount = (state: RootState) => state.app.value;
 
 export default appSlice.reducer;
diff --git a/client/src/App.js b/client/src/App.js
index d0043df..b10d303 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -18,6 +18,14 @@
 import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
 import WelcomeAnimation from './components/welcome'
 import defaultTheme from './themes/default'
+import ContactList from './components/ContactList';
+
+const theme = createTheme();
+const useStyles = makeStyles((theme) => {
+  root: {
+    // some CSS that access to theme
+  }
+})
 
 // import { useSelector, useDispatch } from 'react-redux'
 // import { useAppSelector, useAppDispatch } from '../redux/hooks'
@@ -79,6 +87,7 @@
         <Route path="/newAccount" element={<AccountCreationDialog />}>
           <Route path="jami" element={<JamiAccountDialog />} />
         </Route>
+        <Route path="/Contacts" element={<ContactList />} />
         <Route path="/setup" element={<ServerSetup />} />
         <Route path="/" index element={<Home />} />
         <Route path="*" element={<NotFoundPage />} />
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index 2020a6e..73950a2 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,12 +1,35 @@
-import List from '@mui/material/List'
-import React from 'react'
+import List from "@mui/material/List";
+import authManager from "../AuthManager";
+import React, { useState, useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+
 
 export default function ContactList() {
-    return (
-        <div className="rooms-list">
-        <List>
+  const { accountId } = useAppSelector((state) => state.app);
+  const dispatch = useAppDispatch();
 
-        </List>
-        </div>
-    )
+  const [contacts, setContacts] = useState([]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}/contacts/`, {
+        method: "GET",
+        header: { "Content-Type": "application/json" },
+        // signal: controller.signal,
+      })
+      .then((res) => {
+        res.json();
+      })
+      .then((result) => {
+        console.log(result);
+      });
+    return () => controller.abort();
+  }, []);
+
+  return (
+    <div className="rooms-list">
+      <List></List>
+    </div>
+  );
 }
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;
 }
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 7db0dd2..c2dc29e 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -11,6 +11,7 @@
   const params = useParams()
 
   const goToAccountSelection = () => navigate(`/account`)
+  const goToContacts = () => navigate(`/Contacts`)
   const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`)
 
   return (
@@ -25,6 +26,7 @@
         onClose={handleClose}
       >
         <MenuItem onClick={goToAccountSelection}>Change account</MenuItem>
+        <MenuItem onClick={goToContacts}>Contacts</MenuItem>
         {params.accountId && <MenuItem onClick={goToAccountSettings}>Account settings</MenuItem>}
         <MenuItem onClick={() => authManager.disconnect()}>Log out</MenuItem>
       </Menu>
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index cb861a3..d555820 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -5,12 +5,18 @@
 import AccountPreferences from '../components/AccountPreferences'
 import authManager from '../AuthManager'
 import Account from '../../../model/Account'
+import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import { setAccountId } from '../../redux/appSlice';
 
 const AccountSettings = (props) => {
   const accountId = props.accountId || useParams().accountId
+  const dispatch = useAppDispatch();
+
   const [state, setState] = useState({ loaded: false })
 
   useEffect(() => {
+    dispatch(setAccountId(accountId))
+
     const controller = new AbortController()
     authManager.fetch(`/api/accounts/${accountId}`, { signal: controller.signal })
       .then(res => res.json())
@@ -27,7 +33,7 @@
     <Container maxWidth="sm">
       <Header />
       {state.loaded ? <AccountPreferences account={state.account} onAccontChanged={account => setState(state => {
-        state.account =  account
+        state.account = account
         return state
       })} /> : <CircularProgress />}
     </Container>