diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index b15238f..ec04cef 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -28,6 +28,7 @@
   const [modalIsOpen, setIsOpen] = useState(false);
   const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
   const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
+  const [blockOrRemove, setBlockOrRemove] = useState(true);
 
   const openModal = () => setIsOpen(true);
   const openModalDetails = () => setModalDetailsIsOpen(true);
@@ -41,34 +42,47 @@
   const getContactDetails = () => {
     const controller = new AbortController();
     authManager
-      .fetch(`/api/accounts/${accountId}/contacts/${currentContact.id}`, {
+      .fetch(`/api/accounts/${accountId}/contacts/details/${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));
+      .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
   };
 
-  const removeContact = () => {};
-
-  const blockContact = () => {};
-
+  const removeOrBlock = (typeOfRemove) => {
+    console.log("REMOVE");
+    setBlockOrRemove(false);
+    const controller = new AbortController();
+    authManager
+      .fetch(
+        `/api/accounts/${accountId}/contacts/${typeOfRemove}/${currentContact.id}`,
+        {
+          signal: controller.signal,
+          method: "DELETE",
+        }
+      )
+      .then((res) => res.json())
+      .then((result) => {})
+      .catch((e) => console.log(`ERROR ${typeOfRemove}ing CONTACT : `, e));
+    closeModalDelete();
+  };
 
   useEffect(() => {
     const controller = new AbortController();
     authManager
-      .fetch(`/api/accounts/${accountId}/conversations`, {
+      .fetch(`/api/accounts/${accountId}/contacts`, {
         signal: controller.signal,
       })
       .then((res) => res.json())
       .then((result) => {
+        console.log("CONTACTS: ", result)
         setContacts(result);
       });
     return () => controller.abort();
-  }, []);
+  }, [blockOrRemove]);
 
   return (
     <div className="rooms-list">
@@ -95,6 +109,7 @@
         <div
           onClick={() => {
             console.log("open dialog Supprimer: ");
+            setBlockOrRemove(false);
             closeModal();
             openModalDelete();
           }}
@@ -106,6 +121,7 @@
         <div
           onClick={() => {
             console.log("open dialog BLOCK: ");
+            setBlockOrRemove(true);
             closeModal();
             openModalDelete();
           }}
@@ -132,16 +148,23 @@
         style={customStyles}
         contentLabel="Merci de confirmer"
       >
-        Voulez vous vraiment supprimer ce contact?
-        <button onClick={closeModalDelete}>Bloquer</button>
+        Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"} ce
+        contact?
+        <br />
+        {blockOrRemove ? (
+          <button onClick={() => removeOrBlock("block")}>Bloquer</button>
+        ) : (
+          <button onClick={() => removeOrBlock("remove")}>Supprimer</button>
+        )}
         <button onClick={closeModalDelete}>Annuler</button>
       </Modal>
 
       <List>
-        {contacts.map((contact) => (
+        {contacts?.map((contact) => (
           <ListItem
             button
             alignItems="flex-start"
+            key={contact.id}
             // selected={isSelected}
             onClick={() => {
               setCurrentContact(contact);
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index 4805307..6806781 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -7,6 +7,7 @@
 import Typography from '@mui/material/Typography';
 
 export default function ConversationList(props) {
+    console.log(props)
     return (
         <div className="rooms-list">
             <List>
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index b45f562..140ede2 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,25 +1,55 @@
-import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
-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'
+import ConversationAvatar from './ConversationAvatar'
+import Conversation from '../../../model/Conversation'
+import React, { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom"
+import { Person } from "@mui/icons-material";
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
+import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
+import { CloseButton } from './buttons';
+import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon, RemoveContactIcon, VideoCallIcon } from './svgIcons';
 
 const customStyles = {
   content: {
-    top: "50%",
-    left: "50%",
-    right: "auto",
-    bottom: "auto",
-    marginRight: "-50%",
-    transform: "translate(-50%, -50%)",
+    // top: "50%",
+    // left: "50%",
+    // right: "auto",
+    // bottom: "auto",
+    // // marginRight: "-50%",
+    // transform: "translate(-50%, -50%)",
+    // borderRadius: "5px 20px 20px 5px",
+    // boxShadow; ""
+    // fontSize: "12px",
+    // padding: "16px"
+
+    // top: "1364px",
+    left: "94px",
+    width: "164px",
+    height: "262px",
+    background: "#FFFFFF 0% 0% no-repeat padding-box",
+    boxShadow: "3px 3px 7px #00000029",
+    borderRadius: "5px 20px 20px 20px",
+    opacity: "1",
+
+    textAlign: "left",
+    font: "normal normal normal 12px/36px Ubuntu",
+    letterSpacing: "0px",
+    color: "#000000",
   },
 };
 
+const stackStyles = {
+  flexDirection: "row",
+  marginBottom: "5px",
+  // spacing: "10px",
+  flex: 1,
+  alignItems: "center",
+  // justifyContent: "space-around"
+};
+
 export default function ConversationListItem(props) {
   const { conversationId, contactId } = useParams();
   const conversation = props.conversation;
@@ -101,50 +131,72 @@
           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
+          {/* <button onClick={closeModal}>close</button> */}
+          <Stack
             onClick={() => {
-              console.log("open dialog Supprimer: ");
+              navigate(`/account/${conversation.getAccountId()}/${uri}`);
               closeModal();
-              openModalDelete();
             }}
+            {...stackStyles}
           >
-            <Person /> Supprimer contact
-          </div>
-          <br />
+            <div
+              style={{
+                marginTop: "24px",
+              }}
+            >
+              <MessageIcon />
+            </div>
+            <div>Message</div>
+          </Stack>
+          <Stack {...stackStyles}>
+            <AudioCallIcon />
+            <div>
+            Démarrer appel audio
 
-          <div
-            onClick={() => {
-              console.log("open dialog BLOCK: ");
-              closeModal();
-              openModalDelete();
-            }}
-          >
-            <Person /> Bloquer le contact
-          </div>
-          <br />
+            </div>
+          </Stack>
 
-          <div
+          <Stack {...stackStyles}>
+            <VideoCallIcon /> Démarrer appel vidéo
+          </Stack>
+
+          <Stack {...stackStyles}>
+            <CrossIcon /> Fermer la conversation
+          </Stack>
+
+          <Stack
             onClick={() => {
               console.log("open details contact for: ");
               closeModal();
               openModalDetails();
               getAccountDetails(conversation.getAccountId());
             }}
+            {...stackStyles}
           >
-            <Person /> Détails de la conversation
-          </div>
+            <ContactDetailsIcon /> Détails de la conversation
+          </Stack>
+
+          <Stack
+            onClick={() => {
+              console.log("open dialog BLOCK: ");
+              closeModal();
+              openModalDelete();
+            }}
+            {...stackStyles}
+          >
+            <BlockContactIcon /> Bloquer le contact
+          </Stack>
+
+          <Stack
+            onClick={() => {
+              console.log("open dialog Supprimer: ");
+              closeModal();
+              openModalDelete();
+            }}
+            {...stackStyles}
+          >
+            <RemoveContactIcon /> Supprimer contact
+          </Stack>
         </Modal>
 
         <Modal
@@ -190,9 +242,9 @@
           button
           alignItems="flex-start"
           selected={isSelected}
-          onClick={() =>
-            navigate(`/account/${conversation.getAccountId()}/${uri}`)
-          }
+          // onClick={() =>
+          //   navigate(`/account/${conversation.getAccountId()}/${uri}`)
+          // }
         >
           <ListItemAvatar>
             <ConversationAvatar
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index 5f5dc35..839a6d1 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -146,7 +146,7 @@
 export const PaperClipIcon = (props) => {
     return(
         <SvgIcon {...props} viewBox="0 0 12.208 25.75">
-            <path 
+            <path
                 style={{ fill:"#7e7e7e", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:".75px" }}
                 d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
             />
@@ -173,10 +173,162 @@
 }
 
 export const RoundCrossIcon = (props) => {
-    return (
-        <SvgIcon {...props} viewBox="0 0 16 16">
-            <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
-            <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
-        </SvgIcon>
-    )
-}
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
+      <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
+    </SvgIcon>
+  );
+};
+
+export const MessageIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 14.554">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="14.554"
+        viewBox="0 0 16 14.554"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-3.7 -4.4)">
+          <g transform="translate(3.7 4.4)">
+            <g transform="translate(0 0)">
+              <path
+                class="a"
+                d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
+                transform="translate(-0.7 -0.4)"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const AudioCallIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 15.338 16">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="15.338"
+        height="16"
+        viewBox="0 0 15.338 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-2.404 -1.956)">
+          <g transform="translate(2.404 1.956)">
+            <g transform="translate(0)">
+              <path
+                class="a"
+                d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
+                transform="translate(0.596 1.044)"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const VideoCallIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 12">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="12"
+        viewBox="0 0 16 12"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-4.4 -6)">
+          <g transform="translate(4.4 6)">
+            <path
+              class="a"
+              d="M12.485,13H2.759C1.923,13,1.4,12.5,1.4,11.9V2.1A1.166,1.166,0,0,1,2.655,1H12.38a1.073,1.073,0,0,1,1.15,1.1V3.6l2.2-1.3a1.173,1.173,0,0,1,1.15,0,.993.993,0,0,1,.523.9v7.7a.842.842,0,0,1-.523.9.832.832,0,0,1-1.046-.1l-2.2-1.3v1.5A1.073,1.073,0,0,1,12.485,13ZM2.55,11.9Zm0,0H12.59V9.4c-.1-.2-.1-.3.209-.4a.485.485,0,0,1,.523,0l2.824,1.7V3.4L13.322,5A.485.485,0,0,1,12.8,5a.537.537,0,0,1-.314-.4V2.1H2.759c-.209,0-.209.1-.209.1Z"
+              transform="translate(-1.4 -1)"
+            />
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const ContactDetailsIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 14.647 16">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14.647"
+        height="16"
+        viewBox="0 0 14.647 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <path
+          class="a"
+          d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
+          transform="translate(-2.9 -2)"
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const BlockContactIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 15.52">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-2 -2.3)">
+          <path
+            class="a"
+            d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
+            transform="translate(-1.96 -1.84)"
+          />
+          <path
+            class="a"
+            d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export const RemoveContactIcon = (props) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs>
+        <g transform="translate(-2 -2)">
+          <g transform="translate(2 2)">
+            <path
+              class="a"
+              d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
+            />
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};