diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index e0b8e49..aab6dc1 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,17 +1,16 @@
 import Modal from 'react-modal';
-import authManager from '../AuthManager'
-import ConversationAvatar from './ConversationAvatar'
-import Conversation from '../../../model/Conversation'
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom"
-import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material'
+import authManager from '../AuthManager';
+import ConversationAvatar from './ConversationAvatar';
+import Conversation from '../../../model/Conversation';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material';
 import { RemoveContactIcon, VideoCallIcon } from './svgIcons';
 import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './svgIcons';
-import { QRCodeCanvas} from 'qrcode.react';
+import { QRCodeCanvas } from 'qrcode.react';
 import { setRefreshFromSlice } from '../../redux/appSlice';
 import { useAppDispatch } from '../../redux/hooks';
 
-
 const customStyles = {
   content: {
     // right: "auto",
@@ -21,68 +20,68 @@
     // padding: "16px"
 
     // top: "1364px",
-    left: "94px",
-    width: "180px",
-    height: "262px",
-    background: "#FFFFFF 0% 0% no-repeat padding-box",
-    boxShadow: "3px 3px 7px #00000029",
-    borderRadius: "5px 20px 20px 20px",
-    opacity: "1",
+    left: '94px',
+    width: '180px',
+    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/26px Ubuntu",
-    letterSpacing: "0px",
-    color: "#000000",
+    textAlign: 'left',
+    font: 'normal normal normal 12px/26px Ubuntu',
+    letterSpacing: '0px',
+    color: '#000000',
   },
 };
 
 const cancelStyles = {
   content: {
-    left: "94px",
-    width: "300px",
-    height: "220px",
-    background: "#FFFFFF 0% 0% no-repeat padding-box",
-    boxShadow: "3px 3px 7px #00000029",
-    borderRadius: "20px",
-    opacity: "1",
+    left: '94px',
+    width: '300px',
+    height: '220px',
+    background: '#FFFFFF 0% 0% no-repeat padding-box',
+    boxShadow: '3px 3px 7px #00000029',
+    borderRadius: '20px',
+    opacity: '1',
 
-    textAlign: "left",
-    font: "normal normal normal 12px/26px Ubuntu",
-    letterSpacing: "0px",
-    color: "#000000",
+    textAlign: 'left',
+    font: 'normal normal normal 12px/26px Ubuntu',
+    letterSpacing: '0px',
+    color: '#000000',
   },
 };
 
 const contactDetailsStyles = {
   content: {
-    left: "94px",
-    width: "450px",
-    height: "450px",
-    background: "#FFFFFF 0% 0% no-repeat padding-box",
-    boxShadow: "3px 3px 7px #00000029",
-    borderRadius: "20px",
-    opacity: "1",
+    left: '94px',
+    width: '450px',
+    height: '450px',
+    background: '#FFFFFF 0% 0% no-repeat padding-box',
+    boxShadow: '3px 3px 7px #00000029',
+    borderRadius: '20px',
+    opacity: '1',
 
-    textAlign: "left",
-    font: "normal normal normal 12px/26px Ubuntu",
-    letterSpacing: "0px",
-    color: "#000000",
+    textAlign: 'left',
+    font: 'normal normal normal 12px/26px Ubuntu',
+    letterSpacing: '0px',
+    color: '#000000',
   },
 };
 
 const stackStyles = {
-  flexDirection: "row",
-  marginBottom: "4px",
-  spacing: "40px",
+  flexDirection: 'row',
+  marginBottom: '4px',
+  spacing: '40px',
   flex: 1,
-  alignItems: "center",
+  alignItems: 'center',
 };
 
 const iconTextStyle = {
-  marginRight: "10px",
+  marginRight: '10px',
 };
 
-const iconColor = "#005699";
+const iconColor = '#005699';
 
 export default function ConversationListItem(props) {
   const { conversationId, contactId } = useParams();
@@ -98,10 +97,8 @@
   const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
   const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
   const [blockOrRemove, setBlockOrRemove] = useState(true);
-  const [userId, setUserId] = useState(
-    conversation?.getFirstMember()?.contact.getUri()
-  );
-  const [isSwarm, setIsSwarm] = useState("true");
+  const [userId, setUserId] = useState(conversation?.getFirstMember()?.contact.getUri());
+  const [isSwarm, setIsSwarm] = useState('true');
 
   const openModal = (e) => {
     e.preventDefault();
@@ -117,43 +114,37 @@
   let subtitle;
   function afterOpenModal() {
     // references are now sync'd and can be accessed.
-    subtitle.style.color = "#f00";
+    subtitle.style.color = '#f00';
   }
 
   const getContactDetails = () => {
     const controller = new AbortController();
     authManager
-      .fetch(
-        `/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`,
-        {
-          signal: controller.signal,
-        }
-      )
+      .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`, {
+        signal: controller.signal,
+      })
       .then((res) => res.json())
       .then((result) => {
-        console.log("CONTACT LIST - DETAILS: ", result);
+        console.log('CONTACT LIST - DETAILS: ', result);
       })
-      .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
+      .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
   };
 
   const removeOrBlock = (typeOfRemove) => {
     console.log(typeOfRemove);
     setBlockOrRemove(false);
 
-    console.log("EEEH", typeOfRemove, conversation.getAccountId(), userId);
+    console.log('EEEH', typeOfRemove, conversation.getAccountId(), userId);
 
     const controller = new AbortController();
     authManager
-      .fetch(
-        `/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`,
-        {
-          signal: controller.signal,
-          method: "DELETE",
-        }
-      )
+      .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`, {
+        signal: controller.signal,
+        method: 'DELETE',
+      })
       .then((res) => res.json())
       .then((result) => {
-        console.log("propre");
+        console.log('propre');
         dispatch(setRefreshFromSlice());
       })
       .catch((e) => {
@@ -163,10 +154,7 @@
     closeModalDelete();
   };
 
-
-  const uri = conversation.getId()
-    ? `conversation/${conversation.getId()}`
-    : `addContact/${userId}`;
+  const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
   if (conversation instanceof Conversation) {
     return (
       <div onContextMenu={openModal}>
@@ -219,7 +207,7 @@
 
             <Stack
               onClick={() => {
-                console.log("open details contact for: ");
+                console.log('open details contact for: ');
                 closeModal();
                 openModalDetails();
                 getContactDetails();
@@ -269,35 +257,33 @@
             style={contactDetailsStyles}
             contentLabel="Détails contact"
           >
-            <Stack direction={"row"} alignContent="flex-end">
-              <Stack direction={"column"}>
-                <div style={{ height: "100px" }}>
-                  <ConversationAvatar
-                    displayName={conversation.getDisplayNameNoFallback()}
-                  />
+            <Stack direction={'row'} alignContent="flex-end">
+              <Stack direction={'column'}>
+                <div style={{ height: '100px' }}>
+                  <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
                 </div>
 
                 <div
                   style={{
-                    fontSize: "20px",
-                    marginBottom: "20px",
-                    height: "20px",
+                    fontSize: '20px',
+                    marginBottom: '20px',
+                    height: '20px',
                   }}
                 >
                   Informations
                 </div>
 
                 <Typography variant="caption">Nom d'utilisateur</Typography>
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
                 <Typography variant="caption">Identifiant </Typography>
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
 
                 <div
                   style={{
                     flex: 1,
-                    height: "150px",
-                    direction: "column",
-                    flexDirection: "column",
+                    height: '150px',
+                    direction: 'column',
+                    flexDirection: 'column',
                     // alignSelf: "flex-end",
                   }}
                 >
@@ -307,54 +293,52 @@
                 <Typography variant="caption">est un swarm </Typography>
               </Stack>
 
-              <Stack direction={"column"}>
+              <Stack direction={'column'}>
                 <div
                   style={{
-                    fontWeight: "bold",
-                    fontSize: "20px",
-                    height: "100px",
+                    fontWeight: 'bold',
+                    fontSize: '20px',
+                    height: '100px',
                   }}
                 >
-                  {conversation.getDisplayNameNoFallback() + "(resolved name)"}
+                  {conversation.getDisplayNameNoFallback() + '(resolved name)'}
                 </div>
 
                 <div
                   style={{
-                    height: "40px",
+                    height: '40px',
                   }}
                 />
                 <Typography variant="caption">
-                  <div style={{ fontWeight: "bold" }}>
-                    {conversation.getDisplayNameNoFallback()}
-                  </div>
+                  <div style={{ fontWeight: 'bold' }}>{conversation.getDisplayNameNoFallback()}</div>
                 </Typography>
 
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
 
                 <Typography variant="caption">
-                  <div style={{ fontWeight: "bold" }}> {userId}</div>
+                  <div style={{ fontWeight: 'bold' }}> {userId}</div>
                 </Typography>
 
-                <div style={{ height: "20px" }} />
+                <div style={{ height: '20px' }} />
 
-                <div height={"40px"}>
+                <div height={'40px'}>
                   <QRCodeCanvas value={`${userId}`} />
                 </div>
 
                 <Typography variant="caption">
-                  <div style={{ fontWeight: "bold" }}> {isSwarm}</div>
+                  <div style={{ fontWeight: 'bold' }}> {isSwarm}</div>
                 </Typography>
               </Stack>
             </Stack>
             <div
               onClick={closeModalDetails}
               style={{
-                width: "100px",
-                borderStyle: "solid",
-                textAlign: "center",
-                borderRadius: "5px",
-                marginLeft: "150px",
-                marginTop: "10px",
+                width: '100px',
+                borderStyle: 'solid',
+                textAlign: 'center',
+                borderRadius: '5px',
+                marginLeft: '150px',
+                marginTop: '10px',
               }}
             >
               <Typography variant="caption">Fermer</Typography>
@@ -370,49 +354,39 @@
             contentLabel="Merci de confirmer"
           >
             <Typography variant="h4">Merci de confirmer</Typography>
-            <Stack
-              direction={"column"}
-              justifyContent="space-around"
-              spacing={"75px"}
-            >
-              <div style={{ textAlign: "center", marginTop: "10%" }}>
+            <Stack direction={'column'} justifyContent="space-around" spacing={'75px'}>
+              <div style={{ textAlign: 'center', marginTop: '10%' }}>
                 <Typography variant="body2">
-                  Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"}{" "}
-                  ce contact?
+                  Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
                 </Typography>
               </div>
 
-              <Stack
-                direction={"row"}
-                top={"25px"}
-                alignSelf="center"
-                spacing={1}
-              >
+              <Stack direction={'row'} top={'25px'} alignSelf="center" spacing={1}>
                 <Box
                   onClick={() => {
-                    if (blockOrRemove) removeOrBlock("block");
-                    else removeOrBlock("remove");
+                    if (blockOrRemove) removeOrBlock('block');
+                    else removeOrBlock('remove');
                   }}
                   style={{
-                    width: "100px",
-                    textAlign: "center",
-                    borderStyle: "solid",
-                    borderColor: "red",
-                    borderRadius: "10px",
-                    color: "red",
+                    width: '100px',
+                    textAlign: 'center',
+                    borderStyle: 'solid',
+                    borderColor: 'red',
+                    borderRadius: '10px',
+                    color: 'red',
                   }}
                 >
-                  {blockOrRemove ? "Bloquer" : "Supprimer"}
+                  {blockOrRemove ? 'Bloquer' : 'Supprimer'}
                 </Box>
                 <Box
                   onClick={closeModalDelete}
                   style={{
-                    width: "100px",
-                    textAlign: "center",
-                    paddingLeft: "12px",
-                    paddingRight: "12px",
-                    borderStyle: "solid",
-                    borderRadius: "10px",
+                    width: '100px',
+                    textAlign: 'center',
+                    paddingLeft: '12px',
+                    paddingRight: '12px',
+                    borderStyle: 'solid',
+                    borderRadius: '10px',
                   }}
                 >
                   Annuler
@@ -426,19 +400,12 @@
           button
           alignItems="flex-start"
           selected={isSelected}
-          onClick={() =>
-            navigate(`/account/${conversation.getAccountId()}/${uri}`)
-          }
+          onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}
         >
           <ListItemAvatar>
-            <ConversationAvatar
-              displayName={conversation.getDisplayNameNoFallback()}
-            />
+            <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
           </ListItemAvatar>
-          <ListItemText
-            primary={conversation.getDisplayName()}
-            secondary={conversation.getDisplayUri()}
-          />
+          <ListItemText primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
         </ListItem>
       </div>
     );