diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index b6266ac..29dd4e0 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -44,11 +44,12 @@
   CallingVideoCameraButton,
   CallingVolumeButton,
 } from '../components/CallButtons';
+import CallChatDrawer from '../components/CallChatDrawer';
 import { CallContext, CallStatus } from '../contexts/CallProvider';
 import { CallPending } from './CallPending';
 
 export default () => {
-  const { callRole, callStatus } = useContext(CallContext);
+  const { callRole, callStatus, isChatShown } = useContext(CallContext);
 
   if (callStatus !== CallStatus.InCall) {
     return (
@@ -60,7 +61,12 @@
     );
   }
 
-  return <CallInterface />;
+  return (
+    <Box flexGrow={1} display="flex">
+      <CallInterface />
+      {isChatShown && <CallChatDrawer />}
+    </Box>
+  );
 };
 
 interface Props {
@@ -86,7 +92,7 @@
   }, [remoteStream]);
 
   return (
-    <>
+    <Box display="flex" flexGrow={1}>
       <video
         ref={remoteVideoRef}
         autoPlay
@@ -123,7 +129,7 @@
           </Grid>
         </Grid>
       </Box>
-    </>
+    </Box>
   );
 };
 
diff --git a/client/src/pages/ChatInterface.tsx b/client/src/pages/ChatInterface.tsx
index f30c15a..5bcd8a2 100644
--- a/client/src/pages/ChatInterface.tsx
+++ b/client/src/pages/ChatInterface.tsx
@@ -16,7 +16,7 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Box, Divider, Stack } from '@mui/material';
-import { ConversationMember, ConversationMessage, Message, WebSocketMessageType } from 'jami-web-common';
+import { ConversationMessage, Message, WebSocketMessageType } from 'jami-web-common';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 
@@ -24,16 +24,14 @@
 import LoadingPage from '../components/Loading';
 import MessageList from '../components/MessageList';
 import SendMessageForm from '../components/SendMessageForm';
+import { ConversationContext } from '../contexts/ConversationProvider';
 import { WebSocketContext } from '../contexts/WebSocketProvider';
 import { useMessagesQuery, useSendMessageMutation } from '../services/Conversation';
 import { FileHandler } from '../utils/files';
 
-type ChatInterfaceProps = {
-  conversationId: string;
-  members: ConversationMember[];
-};
-const ChatInterface = ({ conversationId, members }: ChatInterfaceProps) => {
+const ChatInterface = () => {
   const webSocket = useContext(WebSocketContext);
+  const { conversationId, conversation } = useContext(ConversationContext);
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -107,6 +105,8 @@
     return <div>Error loading {conversationId}</div>;
   }
 
+  const members = conversation.getMembers();
+
   return (
     <Stack flex={1} overflow="hidden" {...getRootProps()} paddingBottom="16px">
       {isDragActive && (