diff --git a/client/src/components/CallChatDrawer.tsx b/client/src/components/CallChatDrawer.tsx
index b87f37d..d094554 100644
--- a/client/src/components/CallChatDrawer.tsx
+++ b/client/src/components/CallChatDrawer.tsx
@@ -44,10 +44,7 @@
 
 const CallChatDrawerHeader = () => {
   const { setIsChatShown } = useCallContext();
-  const { conversation } = useConversationContext();
-
-  // TODO: Improve this to support multiple members
-  const contact = conversation.getFirstMember().contact;
+  const { conversationDisplayName } = useConversationContext();
 
   return (
     <Stack direction="row" padding={2} spacing={2} alignItems="center">
@@ -58,7 +55,7 @@
       />
       <Stack direction="column">
         <Typography variant="h3" textOverflow="ellipsis">
-          {contact.getDisplayName()}
+          {conversationDisplayName}
         </Typography>
       </Stack>
     </Stack>
diff --git a/client/src/components/ContactSearchResultList.tsx b/client/src/components/ContactSearchResultList.tsx
new file mode 100644
index 0000000..cff4f6b
--- /dev/null
+++ b/client/src/components/ContactSearchResultList.tsx
@@ -0,0 +1,77 @@
+/*
+ * 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 { Dialog, DialogProps, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+
+import { Contact } from '../models/contact';
+import AddContactPage from '../pages/AddContactPage';
+import ConversationAvatar from './ConversationAvatar';
+import { useDialogHandler } from './Dialog';
+
+type ContactSearchResultListProps = {
+  contacts: Contact[];
+};
+
+export default ({ contacts }: ContactSearchResultListProps) => {
+  return (
+    <List>
+      {contacts?.map((contact) => (
+        <ContactSearchResultListItem key={contact.uri} contact={contact} />
+      ))}
+    </List>
+  );
+};
+
+type ContactSearchResultListItemProps = {
+  contact: Contact;
+};
+
+const ContactSearchResultListItem = ({ contact }: ContactSearchResultListItemProps) => {
+  const dialogHandler = useDialogHandler();
+
+  return (
+    <>
+      <AddContactDialog {...dialogHandler.props} contactId={contact.uri} />
+      <ListItem
+        button
+        alignItems="flex-start"
+        key={contact.uri}
+        onClick={() => {
+          dialogHandler.openDialog();
+        }}
+      >
+        <ListItemAvatar>
+          <ConversationAvatar />
+        </ListItemAvatar>
+        <ListItemText primary={contact.getDisplayName()} secondary={contact.uri} />
+      </ListItem>
+    </>
+  );
+};
+
+type AddContactDialogProps = DialogProps & {
+  contactId: string;
+};
+
+const AddContactDialog = ({ contactId, ...props }: AddContactDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <AddContactPage contactId={contactId} />
+    </Dialog>
+  );
+};
diff --git a/client/src/components/ConversationList.tsx b/client/src/components/ConversationList.tsx
index 08553b7..3f7603f 100644
--- a/client/src/components/ConversationList.tsx
+++ b/client/src/components/ConversationList.tsx
@@ -19,23 +19,19 @@
 import List from '@mui/material/List';
 import ListSubheader from '@mui/material/ListSubheader';
 import Typography from '@mui/material/Typography';
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
 
 import { MessengerContext } from '../contexts/MessengerProvider';
-import { Conversation } from '../models/conversation';
-import { useAppSelector } from '../redux/hooks';
+import ContactSearchResultList from './ContactSearchResultList';
 import ConversationListItem from './ConversationListItem';
+import LoadingPage from './Loading';
 
-type ConversationListProps = {
-  conversations: Conversation[];
-};
-export default function ConversationList({ conversations }: ConversationListProps) {
-  const { searchResult } = useContext(MessengerContext);
-  const { refresh } = useAppSelector((state) => state.userInfo);
+export default function ConversationList() {
+  const { searchResult, conversationsSummaries } = useContext(MessengerContext);
 
-  useEffect(() => {
-    console.log('refresh list');
-  }, [refresh]);
+  if (!conversationsSummaries) {
+    return <LoadingPage />;
+  }
 
   return (
     <div className="rooms-list">
@@ -43,14 +39,14 @@
         {searchResult && (
           <div>
             <ListSubheader>Public directory</ListSubheader>
-            <ConversationListItem conversation={searchResult} />
+            <ContactSearchResultList contacts={searchResult} />
             <ListSubheader>Conversations</ListSubheader>
           </div>
         )}
-        {conversations.map((conversation) => (
-          <ConversationListItem key={conversation.id} conversation={conversation} />
+        {conversationsSummaries.map((conversationSummary) => (
+          <ConversationListItem key={conversationSummary.id} conversationSummary={conversationSummary} />
         ))}
-        {conversations.length === 0 && (
+        {conversationsSummaries.length === 0 && (
           <div className="list-placeholder">
             <GroupIcon color="disabled" fontSize="large" />
             <Typography className="subtitle" variant="subtitle2">
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index e4be263..f71705f 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -16,7 +16,7 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Box, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
-import { ContactDetails } from 'jami-web-common';
+import { IConversationSummary } from 'jami-web-common';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,62 +25,42 @@
 import { useAuthContext } from '../contexts/AuthProvider';
 import { CallManagerContext } from '../contexts/CallManagerProvider';
 import { CallStatus, useCallContext } from '../contexts/CallProvider';
-import { useConversationContext } from '../contexts/ConversationProvider';
-import { MessengerContext } from '../contexts/MessengerProvider';
-import { Conversation } from '../models/conversation';
+import { useUrlParams } from '../hooks/useUrlParams';
 import { setRefreshFromSlice } from '../redux/appSlice';
 import { useAppDispatch } from '../redux/hooks';
+import { ConversationRouteParams } from '../router';
 import ContextMenu, { ContextMenuHandler, useContextMenuHandler } from './ContextMenu';
 import ConversationAvatar from './ConversationAvatar';
 import { ConfirmationDialog, DialogContentList, InfosDialog, useDialogHandler } from './Dialog';
 import { PopoverListItemData } from './PopoverList';
-import {
-  AudioCallIcon,
-  BlockContactIcon,
-  CancelIcon,
-  ContactDetailsIcon,
-  MessageIcon,
-  RemoveContactIcon,
-  VideoCallIcon,
-} from './SvgIcon';
+import { AudioCallIcon, CancelIcon, MessageIcon, PersonIcon, VideoCallIcon } from './SvgIcon';
 
 type ConversationListItemProps = {
-  conversation: Conversation;
+  conversationSummary: IConversationSummary;
 };
 
-export default function ConversationListItem({ conversation }: ConversationListItemProps) {
-  const conversationContext = useConversationContext(true);
-  const conversationId = conversationContext?.conversationId;
+export default function ConversationListItem({ conversationSummary }: ConversationListItemProps) {
+  const {
+    urlParams: { conversationId: selectedConversationId },
+  } = useUrlParams<ConversationRouteParams>();
   const contextMenuHandler = useContextMenuHandler();
-  const { newContactId, setNewContactId } = useContext(MessengerContext);
   const callContext = useCallContext(true);
   const { callData } = useContext(CallManagerContext);
   const { t } = useTranslation();
-
-  const pathId = conversationId ?? newContactId;
-  const isSelected = conversation.getDisplayUri() === pathId;
-
   const navigate = useNavigate();
-  const userId = conversation?.getFirstMember()?.contact.uri;
+
+  const conversationId = conversationSummary.id;
+  const isSelected = conversationId === selectedConversationId;
 
   const onClick = useCallback(() => {
-    const newConversationId = conversation.id;
-    if (newConversationId) {
-      navigate(`/conversation/${newConversationId}`);
-    } else {
-      setNewContactId(userId);
+    if (conversationId) {
+      navigate(`/conversation/${conversationId}`);
     }
-  }, [navigate, conversation, userId, setNewContactId]);
+  }, [navigate, conversationId]);
 
-  const getSecondaryText = () => {
-    const propsConversationId = conversation.id;
-
-    if (!propsConversationId) {
-      return '';
-    }
-
-    if (!callContext || !callData || callData.conversationId !== propsConversationId) {
-      return conversation.getDisplayUri();
+  const secondaryText = useMemo(() => {
+    if (!callContext || !callData || callData.conversationId !== conversationSummary.id) {
+      return conversationSummary.lastMessage.body;
     }
 
     if (callContext.callStatus === CallStatus.InCall) {
@@ -92,67 +72,56 @@
     }
 
     return callContext.callRole === 'caller' ? t('outgoing_call') : t('incoming_call');
-  };
+  }, [conversationSummary, callContext, callData, t]);
+
+  const conversationName = useMemo(
+    () => conversationSummary.title ?? conversationSummary.membersNames.join(', '),
+    [conversationSummary]
+  );
 
   return (
     <Box onContextMenu={contextMenuHandler.handleAnchorPosition}>
       <ConversationMenu
-        userId={userId}
-        conversation={conversation}
+        conversationId={conversationId}
+        conversationName={conversationName}
         onMessageClick={onClick}
         isSelected={isSelected}
         contextMenuProps={contextMenuHandler.props}
       />
       <ListItem button alignItems="flex-start" selected={isSelected} onClick={onClick}>
         <ListItemAvatar>
-          <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
+          <ConversationAvatar displayName={conversationName} />
         </ListItemAvatar>
-        <ListItemText primary={conversation.getDisplayName()} secondary={getSecondaryText()} />
+        <ListItemText primary={conversationName} secondary={secondaryText} />
       </ListItem>
     </Box>
   );
 }
 
 interface ConversationMenuProps {
-  userId: string;
-  conversation: Conversation;
+  conversationId: string;
+  conversationName: string;
   onMessageClick: () => void;
   isSelected: boolean;
   contextMenuProps: ContextMenuHandler['props'];
 }
 
 const ConversationMenu = ({
-  userId,
-  conversation,
+  conversationId,
+  conversationName,
   onMessageClick,
   isSelected,
   contextMenuProps,
 }: ConversationMenuProps) => {
   const { t } = useTranslation();
-  const { axiosInstance } = useAuthContext();
   const { startCall } = useContext(CallManagerContext);
   const [isSwarm] = useState(true);
 
   const detailsDialogHandler = useDialogHandler();
-  const blockContactDialogHandler = useDialogHandler();
-  const removeContactDialogHandler = useDialogHandler();
+  const RemoveConversationDialogHandler = useDialogHandler();
 
   const navigate = useNavigate();
 
-  const getContactDetails = useCallback(async () => {
-    const controller = new AbortController();
-    try {
-      const { data } = await axiosInstance.get<ContactDetails>(`/contacts/${userId}`, {
-        signal: controller.signal,
-      });
-      console.log('CONTACT LIST - DETAILS: ', data);
-    } catch (e) {
-      console.log('ERROR GET CONTACT DETAILS: ', e);
-    }
-  }, [axiosInstance, userId]);
-
-  const conversationId = conversation.id;
-
   const menuOptions: PopoverListItemData[] = useMemo(
     () => [
       {
@@ -198,24 +167,16 @@
         : []),
       {
         label: t('conversation_details'),
-        Icon: ContactDetailsIcon,
+        Icon: PersonIcon,
         onClick: () => {
           detailsDialogHandler.openDialog();
-          getContactDetails();
-        },
-      },
-      {
-        label: t('conversation_block'),
-        Icon: BlockContactIcon,
-        onClick: () => {
-          blockContactDialogHandler.openDialog();
         },
       },
       {
         label: t('conversation_delete'),
-        Icon: RemoveContactIcon,
+        Icon: CancelIcon,
         onClick: () => {
-          removeContactDialogHandler.openDialog();
+          RemoveConversationDialogHandler.openDialog();
         },
       },
     ],
@@ -223,10 +184,8 @@
       navigate,
       onMessageClick,
       isSelected,
-      getContactDetails,
       detailsDialogHandler,
-      blockContactDialogHandler,
-      removeContactDialogHandler,
+      RemoveConversationDialogHandler,
       t,
       startCall,
       conversationId,
@@ -237,108 +196,67 @@
     <>
       <ContextMenu {...contextMenuProps} items={menuOptions} />
 
-      <DetailsDialog {...detailsDialogHandler.props} userId={userId} conversation={conversation} isSwarm={isSwarm} />
+      <DetailsDialog
+        {...detailsDialogHandler.props}
+        conversationId={conversationId}
+        conversationName={conversationName}
+        isSwarm={isSwarm}
+      />
 
-      <RemoveContactDialog {...removeContactDialogHandler.props} userId={userId} conversation={conversation} />
-
-      <BlockContactDialog {...blockContactDialogHandler.props} userId={userId} conversation={conversation} />
+      <RemoveConversationDialog {...RemoveConversationDialogHandler.props} conversationId={conversationId} />
     </>
   );
 };
 
 interface DetailsDialogProps {
-  userId: string;
-  conversation: Conversation;
+  conversationId: string;
+  conversationName: string;
   open: boolean;
   onClose: () => void;
   isSwarm: boolean;
 }
 
-const DetailsDialog = ({ userId, conversation, open, onClose, isSwarm }: DetailsDialogProps) => {
+const DetailsDialog = ({ conversationId, conversationName, open, onClose, isSwarm }: DetailsDialogProps) => {
   const { t } = useTranslation();
   const items = useMemo(
     () => [
       {
-        label: t('conversation_details_username'),
-        value: conversation.getDisplayNameNoFallback(),
+        label: t('conversation_details_name'),
+        value: conversationName,
       },
       {
         label: t('conversation_details_identifier'),
-        value: userId,
+        value: conversationId,
       },
       {
         label: t('conversation_details_qr_code'),
-        value: <QRCodeCanvas size={80} value={`${userId}`} />,
+        value: <QRCodeCanvas size={80} value={`${conversationId}`} />,
       },
       {
         label: t('conversation_details_is_swarm'),
         value: isSwarm ? t('conversation_details_is_swarm_true') : t('conversation_details_is_swarm_false'),
       },
     ],
-    [userId, conversation, isSwarm, t]
+    [conversationId, conversationName, isSwarm, t]
   );
   return (
     <InfosDialog
       open={open}
       onClose={onClose}
-      icon={
-        <ConversationAvatar
-          sx={{ width: 'inherit', height: 'inherit' }}
-          displayName={conversation.getDisplayNameNoFallback()}
-        />
-      }
-      title={conversation.getDisplayNameNoFallback() || ''}
+      icon={<ConversationAvatar sx={{ width: 'inherit', height: 'inherit' }} displayName={conversationName} />}
+      title={conversationName}
       content={<DialogContentList title={t('conversation_details_informations')} items={items} />}
     />
   );
 };
 
-interface BlockContactDialogProps {
-  userId: string;
-  conversation: Conversation;
+interface RemoveConversationDialogProps {
+  conversationId: string;
   open: boolean;
   onClose: () => void;
 }
 
-const BlockContactDialog = ({ userId, open, onClose }: BlockContactDialogProps) => {
-  const { axiosInstance } = useAuthContext();
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const block = async () => {
-    const controller = new AbortController();
-    try {
-      await axiosInstance.post(`/contacts/${userId}/block`, {
-        signal: controller.signal,
-      });
-      dispatch(setRefreshFromSlice());
-    } catch (e) {
-      console.error(`Error $block contact : `, e);
-      dispatch(setRefreshFromSlice());
-    }
-    onClose();
-  };
-
-  return (
-    <ConfirmationDialog
-      open={open}
-      onClose={onClose}
-      title={t('dialog_confirm_title_default')}
-      content={t('conversation_ask_confirm_block')}
-      onConfirm={block}
-      confirmButtonText={t('conversation_confirm_block')}
-    />
-  );
-};
-
-interface RemoveContactDialogProps {
-  userId: string;
-  conversation: Conversation;
-  open: boolean;
-  onClose: () => void;
-}
-
-const RemoveContactDialog = ({ userId, open, onClose }: RemoveContactDialogProps) => {
+const RemoveConversationDialog = ({ conversationId, open, onClose }: RemoveConversationDialogProps) => {
   const { axiosInstance } = useAuthContext();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -346,12 +264,12 @@
   const remove = async () => {
     const controller = new AbortController();
     try {
-      await axiosInstance.delete(`/contacts/${userId}`, {
+      await axiosInstance.delete(`/conversations/${conversationId}`, {
         signal: controller.signal,
       });
       dispatch(setRefreshFromSlice());
     } catch (e) {
-      console.error(`Error removing contact : `, e);
+      console.error(`Error removing conversation : `, e);
       dispatch(setRefreshFromSlice());
     }
     onClose();
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index 51c0899..9216249 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -16,18 +16,14 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Divider, Stack, Typography } from '@mui/material';
-import { useContext, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useContext } from 'react';
 
-import { useAuthContext } from '../contexts/AuthProvider';
 import { CallManagerContext } from '../contexts/CallManagerProvider';
 import { useCallContext } from '../contexts/CallProvider';
 import { useConversationContext } from '../contexts/ConversationProvider';
 import { useWebRtcContext } from '../contexts/WebRtcProvider';
-import { ConversationMember } from '../models/conversation';
 import CallInterface from '../pages/CallInterface';
 import ChatInterface from '../pages/ChatInterface';
-import { translateEnumeration, TranslateEnumerationOptions } from '../utils/translations';
 import { AddParticipantButton, ShowOptionsMenuButton, StartAudioCallButton, StartVideoCallButton } from './Button';
 
 const ConversationView = () => {
@@ -54,42 +50,14 @@
 };
 
 const ConversationHeader = () => {
-  const { account } = useAuthContext();
-  const { conversation, conversationId } = useConversationContext();
+  const { conversationId, conversationDisplayName } = useConversationContext();
   const { startCall } = useContext(CallManagerContext);
-  const { t } = useTranslation();
-
-  const members = conversation.members;
-  const adminTitle = conversation.infos.title as string;
-
-  const title = useMemo(() => {
-    if (adminTitle) {
-      return adminTitle;
-    }
-
-    const options: TranslateEnumerationOptions<ConversationMember> = {
-      elementPartialKey: 'member',
-      getElementValue: (member) => getMemberName(member),
-      translaters: [
-        () =>
-          // The user is chatting with themself
-          t('conversation_title_one', { member0: account?.getDisplayName() }),
-        (interpolations) => t('conversation_title_one', interpolations),
-        (interpolations) => t('conversation_title_two', interpolations),
-        (interpolations) => t('conversation_title_three', interpolations),
-        (interpolations) => t('conversation_title_four', interpolations),
-        (interpolations) => t('conversation_title_more', interpolations),
-      ],
-    };
-
-    return translateEnumeration<ConversationMember>(members, options);
-  }, [account, members, adminTitle, t]);
 
   return (
     <Stack direction="row" padding="16px" overflow="hidden">
       <Stack flex={1} justifyContent="center" whiteSpace="nowrap" overflow="hidden">
         <Typography variant="h3" textOverflow="ellipsis">
-          {title}
+          {conversationDisplayName}
         </Typography>
       </Stack>
       <Stack direction="row" spacing="20px">
@@ -102,9 +70,4 @@
   );
 };
 
-const getMemberName = (member: ConversationMember) => {
-  const contact = member.contact;
-  return contact.getDisplayName();
-};
-
 export default ConversationView;
diff --git a/client/src/components/ConversationsOverviewCard.tsx b/client/src/components/ConversationsOverviewCard.tsx
index 67b4b68..b9dafc9 100644
--- a/client/src/components/ConversationsOverviewCard.tsx
+++ b/client/src/components/ConversationsOverviewCard.tsx
@@ -16,32 +16,14 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Card, CardActionArea, CardContent, CircularProgress, Typography } from '@mui/material';
-import { IConversation } from 'jami-web-common';
-import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 
-import { useAuthContext } from '../contexts/AuthProvider';
+import { useConversationsSummariesQuery } from '../services/conversationQueries';
 
 export default function ConversationsOverviewCard() {
-  const { axiosInstance, account } = useAuthContext();
   const navigate = useNavigate();
 
-  const [conversationCount, setConversationCount] = useState<number | undefined>();
-
-  const accountId = account.id;
-
-  useEffect(() => {
-    const controller = new AbortController();
-    axiosInstance
-      .get<IConversation[]>('/conversations', {
-        signal: controller.signal,
-      })
-      .then(({ data }) => {
-        console.log(data);
-        setConversationCount(data.length);
-      });
-    return () => controller.abort(); // crash on React18
-  }, [axiosInstance, accountId]);
+  const conversationSummariesQuery = useConversationsSummariesQuery();
 
   return (
     <Card onClick={() => navigate(`/`)}>
@@ -51,7 +33,7 @@
             Conversations
           </Typography>
           <Typography gutterBottom variant="h5" component="h2">
-            {conversationCount != null ? conversationCount : <CircularProgress size={24} />}
+            {conversationSummariesQuery?.data?.length ?? <CircularProgress size={24} />}
           </Typography>
         </CardContent>
       </CardActionArea>
diff --git a/client/src/components/MessageList.tsx b/client/src/components/MessageList.tsx
index 356d3e6..66915ab 100644
--- a/client/src/components/MessageList.tsx
+++ b/client/src/components/MessageList.tsx
@@ -23,17 +23,17 @@
 import { Waypoint } from 'react-waypoint';
 
 import { useAuthContext } from '../contexts/AuthProvider';
-import { ConversationMember } from '../models/conversation';
+import { useConversationContext } from '../contexts/ConversationProvider';
 import { MessageRow } from './Message';
 import { ArrowDownIcon } from './SvgIcon';
 
 interface MessageListProps {
-  members: ConversationMember[];
   messages: Message[];
 }
 
-export default function MessageList({ members, messages }: MessageListProps) {
+export default function MessageList({ messages }: MessageListProps) {
   const { account } = useAuthContext();
+  const { members } = useConversationContext();
   const [showScrollButton, setShowScrollButton] = useState(false);
   const listBottomRef = useRef<HTMLElement>();
 
diff --git a/client/src/components/SendMessageForm.tsx b/client/src/components/SendMessageForm.tsx
index 7bb7a7f..a94ab56 100644
--- a/client/src/components/SendMessageForm.tsx
+++ b/client/src/components/SendMessageForm.tsx
@@ -21,7 +21,8 @@
 import { useTranslation } from 'react-i18next';
 
 import { useAuthContext } from '../contexts/AuthProvider';
-import { ConversationMember } from '../models/conversation';
+import { useConversationContext } from '../contexts/ConversationProvider';
+import { ConversationMember } from '../models/conversation-member';
 import { translateEnumeration, TranslateEnumerationOptions } from '../utils/translations';
 import {
   RecordVideoMessageButton,
@@ -32,12 +33,12 @@
 } from './Button';
 
 type SendMessageFormProps = {
-  members: ConversationMember[];
   onSend: (message: string) => void;
   openFilePicker: () => void;
 };
 
-export default function SendMessageForm({ members, onSend, openFilePicker }: SendMessageFormProps) {
+export default function SendMessageForm({ onSend, openFilePicker }: SendMessageFormProps) {
+  const { members } = useConversationContext();
   const [currentMessage, setCurrentMessage] = useState('');
   const placeholder = usePlaceholder(members);
 
@@ -97,7 +98,7 @@
   return useMemo(() => {
     const options: TranslateEnumerationOptions<ConversationMember> = {
       elementPartialKey: 'member',
-      getElementValue: (member) => getMemberName(member),
+      getElementValue: (member) => member.getDisplayName(),
       translaters: [
         () =>
           // The user is chatting with themself
@@ -113,8 +114,3 @@
     return translateEnumeration<ConversationMember>(members, options);
   }, [account, members, t]);
 };
-
-const getMemberName = (member: ConversationMember) => {
-  const contact = member.contact;
-  return contact.getDisplayName();
-};
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index 1ef5f9d..bfce146 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -223,28 +223,6 @@
   );
 };
 
-export const ContactDetailsIcon = (props: SvgIconProps) => {
-  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
-        className="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 CrossedEyeIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 15.931 12.145">
@@ -544,10 +522,8 @@
 
 export const PersonIcon = (props: SvgIconProps) => {
   return (
-    <SvgIcon {...props} viewBox="0 0 24 24">
-      <g stroke="#03B9E9" strokeWidth="1.75" fill="none" fillRule="evenodd" strokeLinejoin="round">
-        <path d="M17 6.5c0 2.48522308-2.0147769 4.5-4.5 4.5C10.01477692 11 8 8.98522308 8 6.5 8 4.0147769 10.01477692 2 12.5 2 14.9852231 2 17 4.0147769 17 6.5ZM3 22c0-5.5228267 4.02947764-10 9.00005436-10C16.9705224 12 21 16.4771733 21 22" />
-      </g>
+    <SvgIcon {...props} viewBox="8.8 2 3 16">
+      <path 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" />
     </SvgIcon>
   );
 };
@@ -580,31 +556,6 @@
   );
 };
 
-export const RemoveContactIcon = (props: SvgIconProps) => {
-  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
-            className="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>
-  );
-};
-
 export const RoundCloseIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 24 24">
diff --git a/client/src/contexts/CallManagerProvider.tsx b/client/src/contexts/CallManagerProvider.tsx
index c04010f..b99df69 100644
--- a/client/src/contexts/CallManagerProvider.tsx
+++ b/client/src/contexts/CallManagerProvider.tsx
@@ -15,7 +15,7 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { CallBegin, WebSocketMessageType } from 'jami-web-common';
+import { CallBegin, ConversationInfos, WebSocketMessageType } from 'jami-web-common';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -23,9 +23,9 @@
 import { AlertSnackbar } from '../components/AlertSnackbar';
 import { RemoteVideoOverlay } from '../components/VideoOverlay';
 import { useUrlParams } from '../hooks/useUrlParams';
-import { Conversation } from '../models/conversation';
+import { ConversationMember } from '../models/conversation-member';
 import { ConversationRouteParams } from '../router';
-import { useConversationQuery } from '../services/conversationQueries';
+import { useConversationInfosQuery, useMembersQuery } from '../services/conversationQueries';
 import { SetState, WithChildren } from '../utils/utils';
 import CallProvider, { CallRole } from './CallProvider';
 import WebRtcProvider from './WebRtcProvider';
@@ -39,16 +39,16 @@
 
 type ICallManagerContext = {
   callData: CallData | undefined;
-  callConversation: Conversation | undefined;
-
+  callConversationInfos: ConversationInfos | undefined;
+  callMembers: ConversationMember[] | undefined;
   startCall: SetState<CallData | undefined>;
   exitCall: () => void;
 };
 
 const defaultCallManagerContext: ICallManagerContext = {
   callData: undefined,
-  callConversation: undefined,
-
+  callConversationInfos: undefined,
+  callMembers: undefined,
   startCall: () => {},
   exitCall: () => {},
 };
@@ -60,7 +60,8 @@
   const [callData, setCallData] = useState<CallData>();
   const webSocket = useContext(WebSocketContext);
   const navigate = useNavigate();
-  const { conversation } = useConversationQuery(callData?.conversationId);
+  const { data: conversationInfos } = useConversationInfosQuery(callData?.conversationId);
+  const { data: members } = useMembersQuery(callData?.conversationId);
   const { urlParams } = useUrlParams<ConversationRouteParams>();
   const [missedCallConversationId, setMissedCallConversationId] = useState<string>();
   const { t } = useTranslation();
@@ -108,10 +109,11 @@
     () => ({
       startCall,
       callData,
-      callConversation: conversation,
+      callConversationInfos: conversationInfos,
+      callMembers: members,
       exitCall,
     }),
-    [startCall, callData, conversation, exitCall]
+    [startCall, callData, conversationInfos, members, exitCall]
   );
 
   return (
diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index 7517133..9570ee5 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -19,7 +19,7 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { createOptionalContext } from '../hooks/createOptionalContext';
-import { Conversation } from '../models/conversation';
+import { ConversationMember } from '../models/conversation-member';
 import { callTimeoutMs } from '../utils/constants';
 import { AsyncSetState, SetState, WithChildren } from '../utils/utils';
 import { CallData, CallManagerContext } from './CallManagerProvider';
@@ -75,19 +75,19 @@
 
 export default ({ children }: WithChildren) => {
   const webSocket = useContext(WebSocketContext);
-  const { callConversation, callData, exitCall } = useContext(CallManagerContext);
+  const { callMembers, callData, exitCall } = useContext(CallManagerContext);
   const webRtcContext = useWebRtcContext(true);
 
   const dependencies = useMemo(
     () => ({
       webSocket,
       webRtcContext,
-      callConversation,
+      callMembers,
       callData,
       exitCall,
       conversationId: callData?.conversationId,
     }),
-    [webSocket, webRtcContext, callConversation, callData, exitCall]
+    [webSocket, webRtcContext, callMembers, callData, exitCall]
   );
 
   return (
@@ -104,7 +104,7 @@
 
 const CallProvider = ({
   webRtcContext,
-  callConversation,
+  callMembers,
   callData,
   exitCall,
   conversationId,
@@ -112,7 +112,7 @@
 }: {
   webSocket: IWebSocketContext;
   webRtcContext: IWebRtcContext;
-  callConversation: Conversation;
+  callMembers: ConversationMember[];
   callData: CallData;
   exitCall: () => void;
   conversationId: string;
@@ -147,7 +147,7 @@
   // TODO: This logic will have to change to support multiple people in a call. Could we move this logic to the server?
   //       The client could make a single request with the conversationId, and the server would be tasked with sending
   //       all the individual requests to the members of the conversation.
-  const contactUri = useMemo(() => callConversation.getFirstMember().contact.uri, [callConversation]);
+  const contactUri = useMemo(() => callMembers[0].contact.uri, [callMembers]);
 
   useEffect(() => {
     if (callStatus !== CallStatus.InCall) {
diff --git a/client/src/contexts/ConversationProvider.tsx b/client/src/contexts/ConversationProvider.tsx
index 8488feb..b6d2f4a 100644
--- a/client/src/contexts/ConversationProvider.tsx
+++ b/client/src/contexts/ConversationProvider.tsx
@@ -15,22 +15,25 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { ConversationView, WebSocketMessageType } from 'jami-web-common';
+import { ConversationInfos, ConversationView, WebSocketMessageType } from 'jami-web-common';
 import { useContext, useEffect, useMemo } from 'react';
 
 import LoadingPage from '../components/Loading';
 import { createOptionalContext } from '../hooks/createOptionalContext';
+import { useConversationDisplayName } from '../hooks/useConversationDisplayName';
 import { useUrlParams } from '../hooks/useUrlParams';
-import { Conversation } from '../models/conversation';
+import { ConversationMember } from '../models/conversation-member';
 import { ConversationRouteParams } from '../router';
-import { useConversationQuery } from '../services/conversationQueries';
+import { useConversationInfosQuery, useMembersQuery } from '../services/conversationQueries';
 import { WithChildren } from '../utils/utils';
 import { useAuthContext } from './AuthProvider';
 import { WebSocketContext } from './WebSocketProvider';
 
 interface IConversationContext {
   conversationId: string;
-  conversation: Conversation;
+  conversationDisplayName: string;
+  conversationInfos: ConversationInfos;
+  members: ConversationMember[];
 }
 
 const optionalConversationContext = createOptionalContext<IConversationContext>('ConversationContext');
@@ -41,13 +44,29 @@
   const {
     urlParams: { conversationId },
   } = useUrlParams<ConversationRouteParams>();
-  const { accountId } = useAuthContext();
+  const { accountId, account } = useAuthContext();
   const webSocket = useContext(WebSocketContext);
 
-  const { conversation, isLoading, isError } = useConversationQuery(conversationId!);
+  const conversationInfosQuery = useConversationInfosQuery(conversationId!);
+  const membersQuery = useMembersQuery(conversationId!);
+
+  const isError = useMemo(
+    () => conversationInfosQuery.isError || membersQuery.isError,
+    [conversationInfosQuery.isError, membersQuery.isError]
+  );
+
+  const isLoading = useMemo(
+    () => conversationInfosQuery.isLoading || membersQuery.isLoading,
+    [conversationInfosQuery.isLoading, membersQuery.isLoading]
+  );
+
+  const conversationInfos = conversationInfosQuery.data;
+  const members = membersQuery.data;
+
+  const conversationDisplayName = useConversationDisplayName(account, conversationId, conversationInfos, members);
 
   useEffect(() => {
-    if (!conversation || !conversationId || !webSocket) {
+    if (!conversationInfos || !conversationId || !webSocket) {
       return;
     }
 
@@ -56,18 +75,20 @@
     };
 
     webSocket.send(WebSocketMessageType.ConversationView, conversationView);
-  }, [accountId, conversation, conversationId, webSocket]);
+  }, [accountId, conversationInfos, conversationId, webSocket]);
 
   const value = useMemo(() => {
-    if (!conversation || !conversationId) {
+    if (!conversationId || !conversationDisplayName || !conversationInfos || !members) {
       return;
     }
 
     return {
       conversationId,
-      conversation,
+      conversationDisplayName,
+      conversationInfos,
+      members,
     };
-  }, [conversationId, conversation]);
+  }, [conversationId, conversationDisplayName, conversationInfos, members]);
 
   if (isLoading) {
     return <LoadingPage />;
diff --git a/client/src/contexts/MessengerProvider.tsx b/client/src/contexts/MessengerProvider.tsx
index c02a1b3..8a405bb 100644
--- a/client/src/contexts/MessengerProvider.tsx
+++ b/client/src/contexts/MessengerProvider.tsx
@@ -15,32 +15,25 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { ConversationMessage, IConversation, LookupResult, WebSocketMessageType } from 'jami-web-common';
+import { ConversationMessage, IConversationSummary, LookupResult, WebSocketMessageType } from 'jami-web-common';
 import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
 
 import { Contact } from '../models/contact';
-import { Conversation } from '../models/conversation';
-import { setRefreshFromSlice } from '../redux/appSlice';
-import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import { useConversationsSummariesQuery, useRefreshConversationsSummaries } from '../services/conversationQueries';
 import { SetState } from '../utils/utils';
 import { useAuthContext } from './AuthProvider';
 import { WebSocketContext } from './WebSocketProvider';
 
 export interface IMessengerContext {
-  conversations: Conversation[] | undefined;
+  conversationsSummaries: IConversationSummary[] | undefined;
 
   setSearchQuery: SetState<string | undefined>;
 
-  searchResult: Conversation | undefined;
-
-  newContactId: string | undefined;
-  setNewContactId: SetState<string | undefined>;
+  searchResult: Contact[] | undefined;
 }
 
 const defaultMessengerContext: IMessengerContext = {
-  conversations: undefined,
-  newContactId: undefined,
-  setNewContactId: () => {},
+  conversationsSummaries: undefined,
   setSearchQuery: () => {},
   searchResult: undefined,
 };
@@ -48,29 +41,15 @@
 export const MessengerContext = createContext<IMessengerContext>(defaultMessengerContext);
 
 export default ({ children }: { children: ReactNode }) => {
-  const { refresh } = useAppSelector((state) => state.userInfo);
-  const dispatch = useAppDispatch();
   const { accountId, axiosInstance } = useAuthContext();
   const webSocket = useContext(WebSocketContext);
 
-  const [conversations, setConversations] = useState<Conversation[] | undefined>(undefined);
   const [searchQuery, setSearchQuery] = useState<string>();
-  const [searchResult, setSearchResults] = useState<Conversation | undefined>(undefined);
-  const [newContactId, setNewContactId] = useState<string>();
+  const [searchResult, setSearchResults] = useState<Contact[] | undefined>(undefined);
 
-  useEffect(() => {
-    const controller = new AbortController();
-    axiosInstance
-      .get<IConversation[]>('/conversations', {
-        signal: controller.signal,
-      })
-      .then(({ data }) => {
-        setConversations(
-          Object.values(data).map((conversationInterface) => Conversation.fromInterface(conversationInterface))
-        );
-      });
-    // return () => controller.abort()
-  }, [axiosInstance, accountId, refresh]);
+  const conversationsSummariesQuery = useConversationsSummariesQuery();
+  const conversationsSummaries = conversationsSummariesQuery.data;
+  const refreshConversationsSummaries = useRefreshConversationsSummaries();
 
   useEffect(() => {
     if (!webSocket) {
@@ -78,7 +57,7 @@
     }
 
     const conversationMessageListener = (_data: ConversationMessage) => {
-      dispatch(setRefreshFromSlice());
+      refreshConversationsSummaries();
     };
 
     webSocket.bind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
@@ -86,7 +65,7 @@
     return () => {
       webSocket.unbind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
     };
-  }, [webSocket, dispatch]);
+  }, [refreshConversationsSummaries, webSocket]);
 
   useEffect(() => {
     if (!searchQuery) return;
@@ -97,7 +76,7 @@
       })
       .then(({ data }) => {
         const contact = new Contact(data.address, data.username);
-        setSearchResults(contact ? Conversation.fromSingleContact(contact) : undefined);
+        setSearchResults([contact]);
       })
       .catch(() => {
         setSearchResults(undefined);
@@ -105,15 +84,13 @@
     // return () => controller.abort() // crash on React18
   }, [accountId, searchQuery, axiosInstance]);
 
-  const value = useMemo(
+  const value = useMemo<IMessengerContext>(
     () => ({
-      conversations,
+      conversationsSummaries,
       setSearchQuery,
       searchResult,
-      newContactId,
-      setNewContactId,
     }),
-    [conversations, setSearchQuery, searchResult, newContactId, setNewContactId]
+    [conversationsSummaries, setSearchQuery, searchResult]
   );
 
   return <MessengerContext.Provider value={value}>{children}</MessengerContext.Provider>;
diff --git a/client/src/contexts/WebRtcProvider.tsx b/client/src/contexts/WebRtcProvider.tsx
index 55a3a1d..e35df0c 100644
--- a/client/src/contexts/WebRtcProvider.tsx
+++ b/client/src/contexts/WebRtcProvider.tsx
@@ -20,7 +20,7 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { createOptionalContext } from '../hooks/createOptionalContext';
-import { Conversation } from '../models/conversation';
+import { ConversationMember } from '../models/conversation-member';
 import { WithChildren } from '../utils/utils';
 import { useAuthContext } from './AuthProvider';
 import { CallManagerContext } from './CallManagerProvider';
@@ -52,7 +52,7 @@
   const { account } = useAuthContext();
   const [webRtcConnection, setWebRtcConnection] = useState<RTCPeerConnection | undefined>();
   const webSocket = useContext(WebSocketContext);
-  const { callConversation, callData } = useContext(CallManagerContext);
+  const { callConversationInfos, callMembers, callData } = useContext(CallManagerContext);
 
   useEffect(() => {
     if (webRtcConnection && !callData) {
@@ -85,10 +85,11 @@
     () => ({
       webRtcConnection,
       webSocket,
-      conversation: callConversation,
+      conversationInfos: callConversationInfos,
+      members: callMembers,
       conversationId: callData?.conversationId,
     }),
-    [webRtcConnection, webSocket, callConversation, callData?.conversationId]
+    [webRtcConnection, webSocket, callConversationInfos, callMembers, callData?.conversationId]
   );
 
   return (
@@ -104,14 +105,14 @@
 };
 
 const useWebRtcContextValue = ({
-  conversation,
+  members,
   conversationId,
   webRtcConnection,
   webSocket,
 }: {
   webRtcConnection: RTCPeerConnection;
   webSocket: IWebSocketContext;
-  conversation: Conversation;
+  members: ConversationMember[];
   conversationId: string;
 }) => {
   const [localStream, setLocalStream] = useState<MediaStream>();
@@ -133,7 +134,7 @@
   const [iceCandidateQueue, setIceCandidateQueue] = useState<RTCIceCandidate[]>([]);
 
   // TODO: This logic will have to change to support multiple people in a call
-  const contactUri = useMemo(() => conversation.getFirstMember().contact.uri, [conversation]);
+  const contactUri = useMemo(() => members[0]?.contact.uri, [members]);
 
   const getMediaDevices = useCallback(async (): Promise<MediaDevicesInfo> => {
     try {
diff --git a/client/src/hooks/useConversationDisplayName.ts b/client/src/hooks/useConversationDisplayName.ts
new file mode 100644
index 0000000..c8aabae
--- /dev/null
+++ b/client/src/hooks/useConversationDisplayName.ts
@@ -0,0 +1,62 @@
+/*
+ * 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 { ConversationInfos } from 'jami-web-common';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Account } from '../models/account';
+import { ConversationMember } from '../models/conversation-member';
+import { translateEnumeration, TranslateEnumerationOptions } from '../utils/translations';
+
+export const useConversationDisplayName = (
+  account: Account,
+  conversationId: string | undefined,
+  conversationInfos: ConversationInfos | undefined,
+  members: ConversationMember[] | undefined
+) => {
+  const { t } = useTranslation();
+
+  const adminTitle = conversationInfos?.title as string;
+
+  return useMemo(() => {
+    if (adminTitle) {
+      return adminTitle;
+    }
+
+    if (!members) {
+      return conversationId;
+    }
+
+    const options: TranslateEnumerationOptions<ConversationMember> = {
+      elementPartialKey: 'member',
+      getElementValue: (member) => member.getDisplayName(),
+      translaters: [
+        () =>
+          // The user is chatting with themself
+          t('conversation_title_one', { member0: account?.getDisplayName() }),
+        (interpolations) => t('conversation_title_one', interpolations),
+        (interpolations) => t('conversation_title_two', interpolations),
+        (interpolations) => t('conversation_title_three', interpolations),
+        (interpolations) => t('conversation_title_four', interpolations),
+        (interpolations) => t('conversation_title_more', interpolations),
+      ],
+    };
+
+    return translateEnumeration<ConversationMember>(members, options);
+  }, [account, adminTitle, conversationId, members, t]);
+};
diff --git a/client/src/locale/en/translation.json b/client/src/locale/en/translation.json
index 21fff51..4ed3515 100644
--- a/client/src/locale/en/translation.json
+++ b/client/src/locale/en/translation.json
@@ -12,7 +12,7 @@
   "conversation_details": "Conversation details",
   "conversation_block": "Block conversation",
   "conversation_delete": "Remove conversation",
-  "conversation_details_username": "Username",
+  "conversation_details_name": "Title",
   "conversation_details_identifier": "Identifier",
   "conversation_details_qr_code": "QR code",
   "conversation_details_is_swarm": "Is swarm",
diff --git a/client/src/locale/fr/translation.json b/client/src/locale/fr/translation.json
index c397c0f..c11d93b 100644
--- a/client/src/locale/fr/translation.json
+++ b/client/src/locale/fr/translation.json
@@ -12,7 +12,7 @@
   "conversation_details": "Détails de la conversation",
   "conversation_block": "Bloquer la conversation",
   "conversation_delete": "Supprimer la conversation",
-  "conversation_details_username": "Nom d'utilisateur",
+  "conversation_details_name": "Titre",
   "conversation_details_identifier": "Identifiant",
   "conversation_details_qr_code": "Code QR",
   "conversation_details_is_swarm": "Est un swarm",
diff --git a/client/src/models/account.ts b/client/src/models/account.ts
index 60ac1d8..ae2299e 100644
--- a/client/src/models/account.ts
+++ b/client/src/models/account.ts
@@ -18,7 +18,6 @@
 import { AccountDetails, Devices, IAccount, VolatileDetails } from 'jami-web-common';
 
 import { Contact } from './contact';
-import { Conversation } from './conversation';
 
 export type AccountType = 'RING' | 'SIP';
 
@@ -30,8 +29,6 @@
   devices: Devices = {};
   contacts: Contact[] = [];
 
-  private _conversations: Record<string, Conversation> = {};
-
   constructor(id: string, details: AccountDetails, volatileDetails: VolatileDetails) {
     this.id = id;
     this.details = details;
@@ -79,19 +76,4 @@
   getDisplayNameNoFallback() {
     return this.details['Account.displayName'] ?? this.getRegisteredName();
   }
-
-  get conversations() {
-    return this._conversations;
-  }
-
-  addConversation(conversation: Conversation) {
-    if (conversation.id === undefined) {
-      throw new Error('Conversation ID cannot be undefined');
-    }
-    this._conversations[conversation.id] = conversation;
-  }
-
-  removeConversation(conversationId: string) {
-    delete this.conversations[conversationId];
-  }
 }
diff --git a/client/src/models/conversation-member.ts b/client/src/models/conversation-member.ts
new file mode 100644
index 0000000..b1b213d
--- /dev/null
+++ b/client/src/models/conversation-member.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 { ConversationMemberRole, IConversationMember } from 'jami-web-common';
+
+import { Contact } from './contact';
+
+export class ConversationMember implements IConversationMember {
+  readonly role;
+  readonly contact;
+
+  constructor(role: ConversationMemberRole | undefined, contact: Contact) {
+    this.role = role;
+    this.contact = contact;
+  }
+
+  static fromInterface(conversationMemberIterface: IConversationMember) {
+    return new ConversationMember(
+      conversationMemberIterface.role,
+      Contact.fromInterface(conversationMemberIterface.contact)
+    );
+  }
+
+  getDisplayName = () => {
+    return this.contact.getDisplayName();
+  };
+}
diff --git a/client/src/models/conversation.ts b/client/src/models/conversation.ts
deleted file mode 100644
index 484f166..0000000
--- a/client/src/models/conversation.ts
+++ /dev/null
@@ -1,94 +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 { ConversationInfos, IConversation, IConversationMember, Message } from 'jami-web-common';
-
-import { Contact } from './contact';
-
-export interface ConversationMember extends IConversationMember {
-  contact: Contact;
-}
-
-export class Conversation implements IConversation {
-  readonly id: string;
-  members: ConversationMember[];
-  messages: Message[] = [];
-  infos: ConversationInfos = {};
-
-  constructor(id: string, members?: ConversationMember[]) {
-    this.id = id;
-    this.members = members ?? [];
-  }
-
-  static fromInterface(conversationInterface: IConversation) {
-    const conversation = new Conversation(
-      conversationInterface.id,
-      conversationInterface.members.map((member) => {
-        const contact = Contact.fromInterface(member.contact);
-        return { contact } as ConversationMember;
-      })
-    );
-
-    conversation.messages = conversationInterface.messages;
-    conversation.infos = conversationInterface.infos;
-
-    return conversation;
-  }
-
-  static fromSingleContact(contact: Contact) {
-    return new Conversation('', [{ contact } as ConversationMember]);
-  }
-
-  getDisplayUri() {
-    return this.id ?? this.getFirstMember().contact.uri;
-  }
-
-  getDisplayName() {
-    if (this.members.length !== 0) {
-      return this.getFirstMember().contact.registeredName;
-    }
-    return this.getDisplayUri();
-  }
-
-  getDisplayNameNoFallback() {
-    if (this.members.length !== 0) {
-      return this.getFirstMember().contact.registeredName;
-    }
-  }
-
-  getFirstMember() {
-    return this.members[0];
-  }
-
-  addMessage(message: Message) {
-    if (this.messages.length === 0) {
-      this.messages.push(message);
-    } else if (message.id === this.messages[this.messages.length - 1].linearizedParent) {
-      this.messages.push(message);
-    } else if (message.linearizedParent === this.messages[0].id) {
-      this.messages.unshift(message);
-    } else {
-      console.log('Could not insert message', message.id);
-    }
-  }
-
-  addMessages(messages: Message[]) {
-    for (const message of messages) {
-      this.addMessage(message);
-    }
-  }
-}
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 52b970f..b535b25 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -170,9 +170,8 @@
 
 const CallInterfaceInformation = () => {
   const { callStartTime } = useCallContext();
-  const { conversation } = useConversationContext();
+  const { conversationDisplayName } = useConversationContext();
   const [elapsedTime, setElapsedTime] = useState(callStartTime ? (Date.now() - callStartTime) / 1000 : 0);
-  const memberName = useMemo(() => conversation.getFirstMember().contact.registeredName, [conversation]);
 
   useEffect(() => {
     if (callStartTime) {
@@ -188,7 +187,7 @@
   return (
     <Stack direction="row" justifyContent="space-between" alignItems="center">
       <Typography color="white" component="p">
-        {memberName}
+        {conversationDisplayName}
       </Typography>
       <Typography color="white" component="p">
         {elapsedTimerString}
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index 2ef27f2..a7566db 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -35,7 +35,7 @@
 
 export const CallPending = () => {
   const { localStream } = useWebRtcContext();
-  const { conversation } = useConversationContext();
+  const { conversationDisplayName } = useConversationContext();
   const { callRole } = useCallContext();
   const localVideoRef = useRef<VideoElementWithSinkId | null>(null);
 
@@ -99,7 +99,7 @@
           />
           <ConversationAvatar
             alt="contact profile picture"
-            displayName={conversation.getDisplayNameNoFallback()}
+            displayName={conversationDisplayName}
             style={{
               width: '100%',
               height: '100%',
@@ -148,8 +148,8 @@
 export const CallPendingCallerInterface = () => {
   const { callStatus } = useCallContext();
   const { t } = useTranslation();
-  const { conversation } = useConversationContext();
-  const memberName = useMemo(() => conversation.getFirstMember().contact.registeredName, [conversation]);
+  const { members } = useConversationContext();
+  const memberName = useMemo(() => members[0].getDisplayName(), [members]);
 
   let title = t('loading');
 
@@ -182,8 +182,8 @@
   const { callStatus } = useCallContext();
 
   const { t } = useTranslation();
-  const { conversation } = useConversationContext();
-  const memberName = useMemo(() => conversation.getFirstMember().contact.registeredName, [conversation]);
+  const { members } = useConversationContext();
+  const memberName = useMemo(() => members[0].getDisplayName(), [members]);
 
   let title = t('loading');
 
diff --git a/client/src/pages/ChatInterface.tsx b/client/src/pages/ChatInterface.tsx
index 00aeb3e..0db7171 100644
--- a/client/src/pages/ChatInterface.tsx
+++ b/client/src/pages/ChatInterface.tsx
@@ -31,7 +31,7 @@
 
 const ChatInterface = () => {
   const webSocket = useContext(WebSocketContext);
-  const { conversationId, conversation } = useConversationContext();
+  const { conversationId } = useConversationContext();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -105,8 +105,6 @@
     return <div>Error loading {conversationId}</div>;
   }
 
-  const members = conversation.members;
-
   return (
     <Stack flex={1} overflow="hidden" {...getRootProps()} paddingBottom="16px">
       {isDragActive && (
@@ -123,14 +121,14 @@
         />
       )}
       <input {...getInputProps()} />
-      <MessageList members={members} messages={messages} />
+      <MessageList messages={messages} />
       <Divider
         sx={{
           margin: '30px 16px 0px 16px',
           borderTop: '1px solid #E5E5E5',
         }}
       />
-      <SendMessageForm members={members} onSend={sendMessage} openFilePicker={openFilePicker} />
+      <SendMessageForm onSend={sendMessage} openFilePicker={openFilePicker} />
       {fileHandlers.length > 0 && <FilePreviewsList fileHandlers={fileHandlers} removeFile={removeFile} />}
     </Stack>
   );
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index 294e069..f498625 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -16,32 +16,19 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Box, Stack } from '@mui/material';
-import { ReactNode, useContext } from 'react';
+import { ReactNode } from 'react';
 
-//import Sound from 'react-sound';
 import ConversationList from '../components/ConversationList';
 import Header from '../components/Header';
-import LoadingPage from '../components/Loading';
 import NewContactForm from '../components/NewContactForm';
-import { MessengerContext } from '../contexts/MessengerProvider';
-import AddContactPage from './AddContactPage';
 
 const Messenger = ({ children }: { children?: ReactNode }) => {
-  const { newContactId, conversations } = useContext(MessengerContext);
-
   return (
     <Box display="flex" height="100%">
       <Stack flexGrow={0} flexShrink={0} overflow="auto">
         <Header />
         <NewContactForm />
-        {newContactId && <AddContactPage contactId={newContactId} />}
-        {conversations ? (
-          <ConversationList conversations={conversations} />
-        ) : (
-          <div className="rooms-list">
-            <LoadingPage />
-          </div>
-        )}
+        <ConversationList />
       </Stack>
       <Box flexGrow={1} display="flex" position="relative">
         {children}
diff --git a/client/src/services/conversationQueries.ts b/client/src/services/conversationQueries.ts
index 94946ad..538d0e0 100644
--- a/client/src/services/conversationQueries.ts
+++ b/client/src/services/conversationQueries.ts
@@ -16,41 +16,59 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { IConversation, Message } from 'jami-web-common';
-import { useMemo } from 'react';
+import { ConversationInfos, IConversationMember, IConversationSummary, Message } from 'jami-web-common';
+import { useCallback } from 'react';
 
 import { useAuthContext } from '../contexts/AuthProvider';
-import { Conversation } from '../models/conversation';
+import { ConversationMember } from '../models/conversation-member';
 
-export const useConversationQuery = (conversationId?: string) => {
+export const useConversationInfosQuery = (conversationId?: string) => {
   const { axiosInstance } = useAuthContext();
-  const conversationQuery = useQuery(
-    ['conversation', conversationId],
+  return useQuery(
+    ['conversations', conversationId],
     async () => {
-      const { data } = await axiosInstance.get<IConversation>(`/conversations/${conversationId}`);
+      const { data } = await axiosInstance.get<ConversationInfos>(`/conversations/${conversationId}/infos`);
       return data;
     },
     {
       enabled: !!conversationId,
     }
   );
+};
 
-  const conversation = useMemo(() => {
-    if (conversationQuery.isSuccess) {
-      return Conversation.fromInterface(conversationQuery.data);
+export const useConversationsSummariesQuery = () => {
+  const { axiosInstance } = useAuthContext();
+  return useQuery(['conversations', 'summaries'], async () => {
+    const { data } = await axiosInstance.get<IConversationSummary[]>(`/conversations`);
+    return data;
+  });
+};
+
+export const useRefreshConversationsSummaries = () => {
+  const queryClient = useQueryClient();
+  return useCallback(() => {
+    queryClient.invalidateQueries(['conversations', 'summaries']);
+  }, [queryClient]);
+};
+
+export const useMembersQuery = (conversationId?: string) => {
+  const { axiosInstance } = useAuthContext();
+  return useQuery(
+    ['conversations', conversationId, 'members'],
+    async () => {
+      const { data } = await axiosInstance.get<IConversationMember[]>(`/conversations/${conversationId}/members`);
+      return data.map((item) => ConversationMember.fromInterface(item));
+    },
+    {
+      enabled: !!conversationId,
     }
-  }, [conversationQuery.isSuccess, conversationQuery.data]);
-
-  return {
-    conversation,
-    ...conversationQuery,
-  };
+  );
 };
 
 export const useMessagesQuery = (conversationId: string) => {
   const { axiosInstance } = useAuthContext();
   return useQuery(
-    ['messages', conversationId],
+    ['conversations', conversationId, 'messages'],
     async () => {
       const { data } = await axiosInstance.get<Message[]>(`/conversations/${conversationId}/messages`);
       return data;
diff --git a/common/src/interfaces/conversation.ts b/common/src/interfaces/conversation.ts
index 5fe2145..dab9dd0 100644
--- a/common/src/interfaces/conversation.ts
+++ b/common/src/interfaces/conversation.ts
@@ -17,13 +17,6 @@
  */
 import { IContact } from './contact';
 
-export interface IConversation {
-  id: string;
-  members: IConversationMember[];
-  messages: Message[];
-  infos: ConversationInfos;
-}
-
 export interface IConversationMember {
   role?: ConversationMemberRole;
   contact: IContact;
@@ -53,6 +46,8 @@
 }
 
 export interface ConversationInfos {
+  avatar?: string;
+  description?: string;
   mode?: string;
   title?: string;
 }
@@ -64,3 +59,11 @@
 export interface NewMessageRequestBody {
   message: string;
 }
+
+export interface IConversationSummary {
+  id: string;
+  avatar: ConversationInfos['avatar'];
+  title: ConversationInfos['title'];
+  membersNames: string[];
+  lastMessage: Message;
+}
diff --git a/server/src/jamid/jami-swig.ts b/server/src/jamid/jami-swig.ts
index df9dd3d..d8f0dcb 100644
--- a/server/src/jamid/jami-swig.ts
+++ b/server/src/jamid/jami-swig.ts
@@ -117,6 +117,7 @@
   conversationInfos(accountId: string, conversationId: string): StringMap;
   getConversationMembers(accountId: string, conversationId: string): VectMap;
   acceptConversationRequest(accountId: string, conversationId: string): void;
+  removeConversation(accountId: string, conversationId: string): void;
 
   sendMessage(accountId: string, conversationId: string, message: string, replyTo: string, flag: number): void;
   loadConversationMessages(accountId: string, conversationId: string, fromMessage: string, n: number): number;
diff --git a/server/src/jamid/jamid.ts b/server/src/jamid/jamid.ts
index b6a728b..2476e72 100644
--- a/server/src/jamid/jamid.ts
+++ b/server/src/jamid/jamid.ts
@@ -345,8 +345,13 @@
     ) as unknown as ConversationMemberInfos[];
   }
 
-  async getConversationMessages(accountId: string, conversationId: string, fromMessage?: string): Promise<Message[]> {
-    const requestId = this.jamiSwig.loadConversationMessages(accountId, conversationId, fromMessage || '', 32);
+  async getConversationMessages(
+    accountId: string,
+    conversationId: string,
+    fromMessage = '',
+    n = 32
+  ): Promise<Message[]> {
+    const requestId = this.jamiSwig.loadConversationMessages(accountId, conversationId, fromMessage, n);
     return firstValueFrom(
       this.events.onConversationLoaded.pipe(
         filter((value) => value.id === requestId),
@@ -355,6 +360,10 @@
     );
   }
 
+  removeConversation(accountId: string, conversationId: string) {
+    this.jamiSwig.removeConversation(accountId, conversationId);
+  }
+
   sendConversationMessage(
     accountId: string,
     conversationId: string,
diff --git a/server/src/routers/conversation-router.ts b/server/src/routers/conversation-router.ts
index bd3a900..0a6b0b2 100644
--- a/server/src/routers/conversation-router.ts
+++ b/server/src/routers/conversation-router.ts
@@ -21,8 +21,8 @@
 import {
   ContactDetails,
   HttpStatusCode,
-  IConversation,
   IConversationMember,
+  IConversationSummary,
   NewConversationRequestBody,
   NewMessageRequestBody,
 } from 'jami-web-common';
@@ -33,11 +33,11 @@
 
 const jamid = Container.get(Jamid);
 
-async function createConversationResponseObject(
+async function createConversationSummary(
   accountId: string,
   accountUri: string,
   conversationId: string
-): Promise<IConversation | undefined> {
+): Promise<IConversationSummary | undefined> {
   const infos = jamid.getConversationInfos(accountId, conversationId);
   if (Object.keys(infos).length === 0) {
     return undefined;
@@ -45,7 +45,7 @@
 
   const members = jamid.getConversationMembers(accountId, conversationId);
 
-  const namedMembers: IConversationMember[] = [];
+  const membersNames = [];
   for (const member of members) {
     // Exclude current user from returned conversation members
     if (member.uri === accountUri) {
@@ -54,24 +54,17 @@
 
     // Add usernames for conversation members
     const { username } = await jamid.lookupAddress(member.uri, accountId);
-    namedMembers.push({
-      role: member.role,
-      contact: {
-        uri: member.uri,
-        registeredName: username,
-      },
-    });
+    membersNames.push(username ?? member.uri);
   }
 
-  // TODO: Check if messages actually need to be added to response
-  // (does the client really need it for all endpoints, or just the /conversations/conversationId/messages endpoint?)
-  const messages = await jamid.getConversationMessages(accountId, conversationId);
+  const lastMessage = (await jamid.getConversationMessages(accountId, conversationId, '', 1))[0];
 
   return {
     id: conversationId,
-    members: namedMembers,
-    messages: messages,
-    infos: infos,
+    avatar: infos.avatar,
+    title: infos.title,
+    membersNames,
+    lastMessage,
   };
 }
 
@@ -89,13 +82,13 @@
 
     const conversationIds = jamid.getConversationIds(accountId);
 
-    const conversations = [];
+    const conversationsSummaries = [];
     for (const conversationId of conversationIds) {
-      const conversation = await createConversationResponseObject(accountId, accountUri, conversationId);
-      conversations.push(conversation);
+      const conversationSummary = await createConversationSummary(accountId, accountUri, conversationId);
+      conversationsSummaries.push(conversationSummary);
     }
 
-    res.send(conversations);
+    res.send(conversationsSummaries);
   })
 );
 
@@ -125,10 +118,6 @@
   }
 );
 
-// TODO: Check if we actually need this endpoint to return messages.
-// At the moment, /conversations does a lot of work returning all the conversations with the same
-// level of detail as this, and /conversations/messages returns just the messages. Check whether or not
-// this is what we want, and if so, if we can be more economical with client requests.
 conversationRouter.get(
   '/:conversationId',
   asyncHandler(async (req, res) => {
@@ -138,13 +127,67 @@
     // Retrieve the URI of the current account (Account.username actually stores the URI rather than the username)
     const accountUri = jamid.getAccountDetails(accountId)['Account.username'];
 
-    const conversation = await createConversationResponseObject(accountId, accountUri, conversationId);
-    if (conversation === undefined) {
+    const conversationSummary = await createConversationSummary(accountId, accountUri, conversationId);
+    if (conversationSummary === undefined) {
       res.status(HttpStatusCode.NotFound).send('No such conversation found');
       return;
     }
 
-    res.send(conversation);
+    res.send(conversationSummary);
+  })
+);
+
+conversationRouter.get(
+  '/:conversationId/infos',
+  asyncHandler(async (req, res) => {
+    const accountId = res.locals.accountId;
+    const conversationId = req.params.conversationId;
+
+    const infos = jamid.getConversationInfos(accountId, conversationId);
+    if (Object.keys(infos).length === 0) {
+      res.status(HttpStatusCode.NotFound).send('No such conversation found');
+    }
+
+    res.send(infos);
+  })
+);
+
+conversationRouter.get(
+  '/:conversationId/members',
+  asyncHandler(async (req, res) => {
+    const accountId = res.locals.accountId;
+    const conversationId = req.params.conversationId;
+
+    // Retrieve the URI of the current account (Account.username actually stores the URI rather than the username)
+    const accountUri = jamid.getAccountDetails(accountId)['Account.username'];
+
+    const infos = jamid.getConversationInfos(accountId, conversationId);
+    if (Object.keys(infos).length === 0) {
+      res.status(HttpStatusCode.NotFound).send('No such conversation found');
+      return;
+    }
+
+    const members = jamid.getConversationMembers(accountId, conversationId);
+
+    const namedMembers: IConversationMember[] = [];
+    for (const member of members) {
+      // Exclude current user from returned conversation members
+      if (member.uri === accountUri) {
+        continue;
+      }
+
+      // Add usernames for conversation members
+      const { username } = await jamid.lookupAddress(member.uri, accountId);
+      namedMembers.push({
+        role: member.role,
+        contact: {
+          uri: member.uri,
+          registeredName: username,
+        },
+      });
+    }
+
+    res.send(namedMembers);
   })
 );
 
@@ -187,3 +230,8 @@
     res.sendStatus(HttpStatusCode.NoContent);
   }
 );
+
+conversationRouter.delete('/:conversationId', (req, res) => {
+  jamid.removeConversation(res.locals.accountId, req.params.conversationId);
+  res.sendStatus(HttpStatusCode.NoContent);
+});