diff --git a/client/src/components/ConversationListItem.jsx b/client/src/components/ConversationListItem.jsx
deleted file mode 100644
index 16c1ccc..0000000
--- a/client/src/components/ConversationListItem.jsx
+++ /dev/null
@@ -1,431 +0,0 @@
-/*
- * Copyright (C) 2022 Savoir-faire Linux Inc.
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation; either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public
- * License along with this program.  If not, see
- * <https://www.gnu.org/licenses/>.
- */
-import { Box, ListItem, ListItemAvatar, ListItemText, Stack, Typography } from '@mui/material';
-import { Conversation } from 'jami-web-common';
-import { QRCodeCanvas } from 'qrcode.react';
-import { useState } from 'react';
-import Modal from 'react-modal';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import authManager from '../AuthManager';
-import { setRefreshFromSlice } from '../redux/appSlice';
-import { useAppDispatch } from '../redux/hooks';
-import ConversationAvatar from './ConversationAvatar';
-import { RemoveContactIcon, VideoCallIcon } from './SvgIcon.tsx';
-import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './SvgIcon.tsx';
-
-const customStyles = {
-  content: {
-    // right: "auto",
-    // bottom: "auto",
-    // // marginRight: "-50%",
-    // transform: "translate(-50%, -50%)",
-    // 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',
-
-    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',
-
-    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',
-
-    textAlign: 'left',
-    font: 'normal normal normal 12px/26px Ubuntu',
-    letterSpacing: '0px',
-    color: '#000000',
-  },
-};
-
-const stackStyles = {
-  flexDirection: 'row',
-  marginBottom: '4px',
-  spacing: '40px',
-  flex: 1,
-  alignItems: 'center',
-};
-
-const iconTextStyle = {
-  marginRight: '10px',
-};
-
-const iconColor = '#005699';
-
-export default function ConversationListItem(props) {
-  const { conversationId, contactId } = useParams();
-  const dispatch = useAppDispatch();
-
-  const conversation = props.conversation;
-
-  const pathId = conversationId || contactId;
-  const isSelected = conversation.getDisplayUri() === pathId;
-  const navigate = useNavigate();
-
-  const [modalIsOpen, setIsOpen] = useState(false);
-  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 openModal = (e) => {
-    e.preventDefault();
-    console.log(e);
-    setIsOpen(true);
-  };
-  const openModalDetails = () => setModalDetailsIsOpen(true);
-  const openModalDelete = () => setModalDeleteIsOpen(true);
-  const closeModal = () => setIsOpen(false);
-  const closeModalDetails = () => setModalDetailsIsOpen(false);
-  const closeModalDelete = () => setModalDeleteIsOpen(false);
-
-  let subtitle;
-  function afterOpenModal() {
-    // references are now sync'd and can be accessed.
-    subtitle.style.color = '#f00';
-  }
-
-  const getContactDetails = () => {
-    const controller = new AbortController();
-    authManager
-      .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`, {
-        signal: controller.signal,
-      })
-      .then((res) => res.json())
-      .then((result) => {
-        console.log('CONTACT LIST - DETAILS: ', result);
-      })
-      .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
-  };
-
-  const removeOrBlock = (typeOfRemove) => {
-    console.log(typeOfRemove);
-    setBlockOrRemove(false);
-
-    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',
-      })
-      .then((res) => res.json())
-      .then((result) => {
-        console.log('propre');
-        dispatch(setRefreshFromSlice());
-      })
-      .catch((e) => {
-        console.log(`ERROR ${typeOfRemove}ing CONTACT : `, e);
-        dispatch(setRefreshFromSlice());
-      });
-    closeModalDelete();
-  };
-
-  const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
-  if (conversation instanceof Conversation) {
-    return (
-      <div onContextMenu={openModal}>
-        <div name="Modal conversation">
-          <Modal
-            isOpen={modalIsOpen}
-            //   onAfterOpen={afterOpenModal}
-            onRequestClose={closeModal}
-            style={customStyles}
-            contentLabel="Example Modal"
-          >
-            <Stack
-              onClick={() => {
-                navigate(`/account/${conversation.getAccountId()}/${uri}`);
-                closeModal();
-              }}
-              {...stackStyles}
-            >
-              <div style={{ ...iconTextStyle }}>
-                <MessageIcon style={{ color: iconColor }} />
-              </div>
-              Message
-            </Stack>
-            <Stack {...stackStyles}>
-              <div style={{ ...iconTextStyle }}>
-                <AudioCallIcon style={{ color: iconColor }} />
-              </div>
-              Démarrer appel audio
-            </Stack>
-
-            <Stack {...stackStyles}>
-              <div style={{ ...iconTextStyle }}>
-                <VideoCallIcon style={{ color: iconColor }} />
-              </div>
-              Démarrer appel vidéo
-            </Stack>
-
-            <Stack
-              {...stackStyles}
-              onClick={() => {
-                navigate(`/account/${conversation.getAccountId()}/`);
-                closeModal();
-              }}
-            >
-              <div style={{ ...iconTextStyle }}>
-                <CrossIcon style={{ color: iconColor }} />
-              </div>
-              Fermer la conversation
-            </Stack>
-
-            <Stack
-              onClick={() => {
-                console.log('open details contact for: ');
-                closeModal();
-                openModalDetails();
-                getContactDetails();
-              }}
-              {...stackStyles}
-            >
-              <div style={{ ...iconTextStyle }}>
-                <ContactDetailsIcon style={{ color: iconColor }} />
-              </div>
-              Détails de la conversation
-            </Stack>
-
-            <Stack
-              onClick={() => {
-                setBlockOrRemove(true);
-                closeModal();
-                openModalDelete();
-              }}
-              {...stackStyles}
-            >
-              <div style={{ ...iconTextStyle }}>
-                <BlockContactIcon style={{ color: iconColor }} />
-              </div>
-              Bloquer le contact
-            </Stack>
-
-            <Stack
-              onClick={() => {
-                setBlockOrRemove(false);
-                closeModal();
-                openModalDelete();
-              }}
-              {...stackStyles}
-            >
-              <div style={{ ...iconTextStyle }}>
-                <RemoveContactIcon style={{ color: iconColor }} />
-              </div>
-              Supprimer contact
-            </Stack>
-          </Modal>
-        </div>
-
-        <div name="Contact details">
-          <Modal
-            isOpen={modalDetailsIsOpen}
-            onRequestClose={closeModalDetails}
-            style={contactDetailsStyles}
-            contentLabel="Détails contact"
-          >
-            <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',
-                  }}
-                >
-                  Informations
-                </div>
-
-                <Typography variant="caption">Nom d&apos;utilisateur</Typography>
-                <div style={{ height: '20px' }} />
-                <Typography variant="caption">Identifiant </Typography>
-                <div style={{ height: '20px' }} />
-
-                <div
-                  style={{
-                    flex: 1,
-                    height: '150px',
-                    direction: 'column',
-                    flexDirection: 'column',
-                    // alignSelf: "flex-end",
-                  }}
-                >
-                  <Typography variant="caption">Code QR</Typography>
-                </div>
-
-                <Typography variant="caption">est un swarm </Typography>
-              </Stack>
-
-              <Stack direction={'column'}>
-                <div
-                  style={{
-                    fontWeight: 'bold',
-                    fontSize: '20px',
-                    height: '100px',
-                  }}
-                >
-                  {conversation.getDisplayNameNoFallback() + '(resolved name)'}
-                </div>
-
-                <div
-                  style={{
-                    height: '40px',
-                  }}
-                />
-                <Typography variant="caption">
-                  <div style={{ fontWeight: 'bold' }}>{conversation.getDisplayNameNoFallback()}</div>
-                </Typography>
-
-                <div style={{ height: '20px' }} />
-
-                <Typography variant="caption">
-                  <div style={{ fontWeight: 'bold' }}> {userId}</div>
-                </Typography>
-
-                <div style={{ height: '20px' }} />
-
-                <div height={'40px'}>
-                  <QRCodeCanvas value={`${userId}`} />
-                </div>
-
-                <Typography variant="caption">
-                  <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',
-              }}
-            >
-              <Typography variant="caption">Fermer</Typography>
-            </div>
-          </Modal>
-        </div>
-
-        <div name="Remove or block details">
-          <Modal
-            isOpen={modalDeleteIsOpen}
-            onRequestClose={closeModalDelete}
-            style={cancelStyles}
-            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%' }}>
-                <Typography variant="body2">
-                  Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
-                </Typography>
-              </div>
-
-              <Stack direction={'row'} top={'25px'} alignSelf="center" spacing={1}>
-                <Box
-                  onClick={() => {
-                    if (blockOrRemove) removeOrBlock('block');
-                    else removeOrBlock('remove');
-                  }}
-                  style={{
-                    width: '100px',
-                    textAlign: 'center',
-                    borderStyle: 'solid',
-                    borderColor: 'red',
-                    borderRadius: '10px',
-                    color: 'red',
-                  }}
-                >
-                  {blockOrRemove ? 'Bloquer' : 'Supprimer'}
-                </Box>
-                <Box
-                  onClick={closeModalDelete}
-                  style={{
-                    width: '100px',
-                    textAlign: 'center',
-                    paddingLeft: '12px',
-                    paddingRight: '12px',
-                    borderStyle: 'solid',
-                    borderRadius: '10px',
-                  }}
-                >
-                  Annuler
-                </Box>
-              </Stack>
-            </Stack>
-          </Modal>
-        </div>
-
-        <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/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
new file mode 100644
index 0000000..bab36b0
--- /dev/null
+++ b/client/src/components/ConversationListItem.tsx
@@ -0,0 +1,424 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Box, ListItem, ListItemAvatar, ListItemText, Stack, StackProps, Typography } from '@mui/material';
+import { Conversation } from 'jami-web-common';
+import { QRCodeCanvas } from 'qrcode.react';
+import { MouseEvent, useState } from 'react';
+import Modal from 'react-modal';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import authManager from '../AuthManager';
+import { setRefreshFromSlice } from '../redux/appSlice';
+import { useAppDispatch } from '../redux/hooks';
+import ConversationAvatar from './ConversationAvatar';
+import { RemoveContactIcon, VideoCallIcon } from './SvgIcon';
+import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './SvgIcon';
+
+const customStyles: Modal.Styles = {
+  content: {
+    // right: "auto",
+    // bottom: "auto",
+    // // marginRight: "-50%",
+    // transform: "translate(-50%, -50%)",
+    // 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',
+
+    textAlign: 'left',
+    font: 'normal normal normal 12px/26px Ubuntu',
+    letterSpacing: '0px',
+    color: '#000000',
+  },
+};
+
+const cancelStyles: Modal.Styles = {
+  content: {
+    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',
+  },
+};
+
+const contactDetailsStyles: Modal.Styles = {
+  content: {
+    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',
+  },
+};
+
+const stackStyles: StackProps = {
+  flexDirection: 'row',
+  marginBottom: '4px',
+  spacing: '40px',
+  flex: 1,
+  alignItems: 'center',
+};
+
+const iconTextStyle = {
+  marginRight: '10px',
+};
+
+const iconColor = '#005699';
+
+type ConversationListItemProps = {
+  conversation: Conversation;
+};
+
+export default function ConversationListItem({ conversation }: ConversationListItemProps) {
+  const { conversationId, contactId } = useParams();
+  const dispatch = useAppDispatch();
+
+  const pathId = conversationId || contactId;
+  const isSelected = conversation.getDisplayUri() === pathId;
+  const navigate = useNavigate();
+
+  const [modalIsOpen, setIsOpen] = useState(false);
+  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 openModal = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    console.log(e);
+    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/${conversation.getAccountId()}/contacts/details/${userId}`, {
+        signal: controller.signal,
+      })
+      .then((res) => res.json())
+      .then((result) => {
+        console.log('CONTACT LIST - DETAILS: ', result);
+      })
+      .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
+  };
+
+  const removeOrBlock = (typeOfRemove: 'block' | 'remove') => {
+    console.log(typeOfRemove);
+    setBlockOrRemove(false);
+
+    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',
+      })
+      .then((res) => res.json())
+      .then((result) => {
+        console.log('propre');
+        dispatch(setRefreshFromSlice());
+      })
+      .catch((e) => {
+        console.log(`ERROR ${typeOfRemove}ing CONTACT : `, e);
+        dispatch(setRefreshFromSlice());
+      });
+    closeModalDelete();
+  };
+
+  const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
+  return (
+    <div onContextMenu={openModal}>
+      <div>
+        <Modal
+          isOpen={modalIsOpen}
+          //   onAfterOpen={afterOpenModal}
+          onRequestClose={closeModal}
+          style={customStyles}
+          contentLabel="Example Modal"
+        >
+          <Stack
+            onClick={() => {
+              navigate(`/account/${conversation.getAccountId()}/${uri}`);
+              closeModal();
+            }}
+            {...stackStyles}
+          >
+            <div style={{ ...iconTextStyle }}>
+              <MessageIcon style={{ color: iconColor }} />
+            </div>
+            Message
+          </Stack>
+          <Stack {...stackStyles}>
+            <div style={{ ...iconTextStyle }}>
+              <AudioCallIcon style={{ color: iconColor }} />
+            </div>
+            Démarrer appel audio
+          </Stack>
+
+          <Stack {...stackStyles}>
+            <div style={{ ...iconTextStyle }}>
+              <VideoCallIcon style={{ color: iconColor }} />
+            </div>
+            Démarrer appel vidéo
+          </Stack>
+
+          <Stack
+            {...stackStyles}
+            onClick={() => {
+              navigate(`/account/${conversation.getAccountId()}/`);
+              closeModal();
+            }}
+          >
+            <div style={{ ...iconTextStyle }}>
+              <CrossIcon style={{ color: iconColor }} />
+            </div>
+            Fermer la conversation
+          </Stack>
+
+          <Stack
+            onClick={() => {
+              console.log('open details contact for: ');
+              closeModal();
+              openModalDetails();
+              getContactDetails();
+            }}
+            {...stackStyles}
+          >
+            <div style={{ ...iconTextStyle }}>
+              <ContactDetailsIcon style={{ color: iconColor }} />
+            </div>
+            Détails de la conversation
+          </Stack>
+
+          <Stack
+            onClick={() => {
+              setBlockOrRemove(true);
+              closeModal();
+              openModalDelete();
+            }}
+            {...stackStyles}
+          >
+            <div style={{ ...iconTextStyle }}>
+              <BlockContactIcon style={{ color: iconColor }} />
+            </div>
+            Bloquer le contact
+          </Stack>
+
+          <Stack
+            onClick={() => {
+              setBlockOrRemove(false);
+              closeModal();
+              openModalDelete();
+            }}
+            {...stackStyles}
+          >
+            <div style={{ ...iconTextStyle }}>
+              <RemoveContactIcon style={{ color: iconColor }} />
+            </div>
+            Supprimer contact
+          </Stack>
+        </Modal>
+      </div>
+
+      <div>
+        <Modal
+          isOpen={modalDetailsIsOpen}
+          onRequestClose={closeModalDetails}
+          style={contactDetailsStyles}
+          contentLabel="Détails contact"
+        >
+          <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',
+                }}
+              >
+                Informations
+              </div>
+
+              <Typography variant="caption">Nom d&apos;utilisateur</Typography>
+              <div style={{ height: '20px' }} />
+              <Typography variant="caption">Identifiant </Typography>
+              <div style={{ height: '20px' }} />
+
+              <div
+                style={{
+                  flex: 1,
+                  height: '150px',
+                  flexDirection: 'column',
+                  // alignSelf: "flex-end",
+                }}
+              >
+                <Typography variant="caption">Code QR</Typography>
+              </div>
+
+              <Typography variant="caption">est un swarm </Typography>
+            </Stack>
+
+            <Stack direction={'column'}>
+              <div
+                style={{
+                  fontWeight: 'bold',
+                  fontSize: '20px',
+                  height: '100px',
+                }}
+              >
+                {conversation.getDisplayNameNoFallback() + '(resolved name)'}
+              </div>
+
+              <div
+                style={{
+                  height: '40px',
+                }}
+              />
+              <Typography variant="caption">
+                <div style={{ fontWeight: 'bold' }}>{conversation.getDisplayNameNoFallback()}</div>
+              </Typography>
+
+              <div style={{ height: '20px' }} />
+
+              <Typography variant="caption">
+                <div style={{ fontWeight: 'bold' }}> {userId}</div>
+              </Typography>
+
+              <div style={{ height: '20px' }} />
+
+              <div>
+                <QRCodeCanvas size={40} value={`${userId}`} />
+              </div>
+
+              <Typography variant="caption">
+                <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',
+            }}
+          >
+            <Typography variant="caption">Fermer</Typography>
+          </div>
+        </Modal>
+      </div>
+
+      <div>
+        <Modal
+          isOpen={modalDeleteIsOpen}
+          onRequestClose={closeModalDelete}
+          style={cancelStyles}
+          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%' }}>
+              <Typography variant="body2">
+                Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
+              </Typography>
+            </div>
+
+            <Stack direction={'row'} top={'25px'} alignSelf="center" spacing={1}>
+              <Box
+                onClick={() => {
+                  if (blockOrRemove) removeOrBlock('block');
+                  else removeOrBlock('remove');
+                }}
+                style={{
+                  width: '100px',
+                  textAlign: 'center',
+                  borderStyle: 'solid',
+                  borderColor: 'red',
+                  borderRadius: '10px',
+                  color: 'red',
+                }}
+              >
+                {blockOrRemove ? 'Bloquer' : 'Supprimer'}
+              </Box>
+              <Box
+                onClick={closeModalDelete}
+                style={{
+                  width: '100px',
+                  textAlign: 'center',
+                  paddingLeft: '12px',
+                  paddingRight: '12px',
+                  borderStyle: 'solid',
+                  borderRadius: '10px',
+                }}
+              >
+                Annuler
+              </Box>
+            </Stack>
+          </Stack>
+        </Modal>
+      </div>
+
+      <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>
+  );
+}