diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index d94733d..3f5dad3 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -23,9 +23,9 @@
 import { useNavigate } from 'react-router-dom';
 
 import { useAuthContext } from '../contexts/AuthProvider';
+import { CallManagerContext } from '../contexts/CallManagerProvider';
 import { useConversationContext } from '../contexts/ConversationProvider';
 import { MessengerContext } from '../contexts/MessengerProvider';
-import { useStartCall } from '../hooks/useStartCall';
 import { Conversation } from '../models/conversation';
 import { setRefreshFromSlice } from '../redux/appSlice';
 import { useAppDispatch } from '../redux/hooks';
@@ -104,6 +104,7 @@
 }: ConversationMenuProps) => {
   const { t } = useTranslation();
   const { axiosInstance } = useAuthContext();
+  const { startCall } = useContext(CallManagerContext);
   const [isSwarm] = useState(true);
 
   const detailsDialogHandler = useDialogHandler();
@@ -112,8 +113,6 @@
 
   const navigate = useNavigate();
 
-  const startCall = useStartCall();
-
   const getContactDetails = useCallback(async () => {
     const controller = new AbortController();
     try {
@@ -140,7 +139,10 @@
         Icon: AudioCallIcon,
         onClick: () => {
           if (conversationId) {
-            startCall(conversationId);
+            startCall({
+              conversationId,
+              role: 'caller',
+            });
           }
         },
       },
@@ -149,8 +151,10 @@
         Icon: VideoCallIcon,
         onClick: () => {
           if (conversationId) {
-            startCall(conversationId, {
-              isVideoOn: true,
+            startCall({
+              conversationId,
+              role: 'caller',
+              withVideoOn: true,
             });
           }
         },
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index c9a19a2..b3deed4 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -16,18 +16,26 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Divider, Stack, Typography } from '@mui/material';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuthContext } from '../contexts/AuthProvider';
+import { CallManagerContext } from '../contexts/CallManagerProvider';
 import { useConversationContext } from '../contexts/ConversationProvider';
-import { useStartCall } from '../hooks/useStartCall';
 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 = () => {
+  const { conversationId } = useConversationContext();
+  const { callData } = useContext(CallManagerContext);
+
+  if (callData && callData.conversationId === conversationId) {
+    return <CallInterface />;
+  }
+
   return (
     <Stack flexGrow={1} height="100%">
       <ConversationHeader />
@@ -44,6 +52,7 @@
 const ConversationHeader = () => {
   const { account } = useAuthContext();
   const { conversation, conversationId } = useConversationContext();
+  const { startCall } = useContext(CallManagerContext);
   const { t } = useTranslation();
 
   const members = conversation.members;
@@ -72,8 +81,6 @@
     return translateEnumeration<ConversationMember>(members, options);
   }, [account, members, adminTitle, t]);
 
-  const startCall = useStartCall();
-
   return (
     <Stack direction="row" padding="16px" overflow="hidden">
       <Stack flex={1} justifyContent="center" whiteSpace="nowrap" overflow="hidden">
@@ -82,14 +89,8 @@
         </Typography>
       </Stack>
       <Stack direction="row" spacing="20px">
-        <StartAudioCallButton onClick={() => startCall(conversationId)} />
-        <StartVideoCallButton
-          onClick={() =>
-            startCall(conversationId, {
-              isVideoOn: true,
-            })
-          }
-        />
+        <StartAudioCallButton onClick={() => startCall({ conversationId, role: 'caller' })} />
+        <StartVideoCallButton onClick={() => startCall({ conversationId, role: 'caller', withVideoOn: true })} />
         <AddParticipantButton />
         <ShowOptionsMenuButton />
       </Stack>
diff --git a/client/src/contexts/CallManagerProvider.tsx b/client/src/contexts/CallManagerProvider.tsx
new file mode 100644
index 0000000..4261f07
--- /dev/null
+++ b/client/src/contexts/CallManagerProvider.tsx
@@ -0,0 +1,116 @@
+/*
+ * 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 { CallBegin, WebSocketMessageType } from 'jami-web-common';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Conversation } from '../models/conversation';
+import { useConversationQuery } from '../services/conversationQueries';
+import { SetState, WithChildren } from '../utils/utils';
+import CallProvider, { CallRole } from './CallProvider';
+import WebRtcProvider from './WebRtcProvider';
+import { WebSocketContext } from './WebSocketProvider';
+
+type CallData = {
+  conversationId: string;
+  role: CallRole;
+  withVideoOn?: boolean;
+};
+
+type ICallManagerContext = {
+  callData: CallData | undefined;
+  callConversation: Conversation | undefined;
+
+  startCall: SetState<CallData | undefined>;
+  exitCall: () => void;
+};
+
+export const CallManagerContext = createContext<ICallManagerContext>(undefined!);
+CallManagerContext.displayName = 'CallManagerContext';
+
+export default ({ children }: WithChildren) => {
+  const [callData, setCallData] = useState<CallData>();
+  const webSocket = useContext(WebSocketContext);
+  const navigate = useNavigate();
+  const conversationId = callData?.conversationId;
+  const { conversation } = useConversationQuery(conversationId);
+
+  const failStartCall = useCallback(() => {
+    throw new Error('Cannot start call: Already in a call');
+  }, []);
+
+  const startCall = !callData ? setCallData : failStartCall;
+
+  const exitCall = useCallback(() => {
+    if (!callData) {
+      return;
+    }
+
+    setCallData(undefined);
+    // TODO: write in chat that the call ended
+  }, [callData]);
+
+  useEffect(() => {
+    if (callData) {
+      // TODO: Currently, we simply do not bind the CallBegin listener if already in a call.
+      //       In the future, we should handle receiving a call while already in another.
+      return;
+    }
+    if (!webSocket) {
+      return;
+    }
+
+    const callBeginListener = ({ conversationId, withVideoOn }: CallBegin) => {
+      startCall({ conversationId: conversationId, role: 'receiver', withVideoOn });
+      navigate(`/conversation/${conversationId}`);
+    };
+
+    webSocket.bind(WebSocketMessageType.CallBegin, callBeginListener);
+
+    return () => {
+      webSocket.unbind(WebSocketMessageType.CallBegin, callBeginListener);
+    };
+  }, [webSocket, navigate, startCall, callData]);
+
+  return (
+    <CallManagerContext.Provider
+      value={{
+        startCall,
+        callData,
+        callConversation: conversation,
+        exitCall,
+      }}
+    >
+      <CallManagerProvider>{children}</CallManagerProvider>
+    </CallManagerContext.Provider>
+  );
+};
+
+const CallManagerProvider = ({ children }: WithChildren) => {
+  const { callData } = useContext(CallManagerContext);
+
+  if (!callData) {
+    return <>{children}</>;
+  }
+
+  return (
+    <WebRtcProvider>
+      <CallProvider>{children}</CallProvider>
+    </WebRtcProvider>
+  );
+};
diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index 88951a9..b20d0e7 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -17,15 +17,13 @@
  */
 import { CallAction, CallBegin, WebSocketMessageType } from 'jami-web-common';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Navigate, useNavigate } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 
 import LoadingPage from '../components/Loading';
-import { useUrlParams } from '../hooks/useUrlParams';
-import CallPermissionDenied from '../pages/CallPermissionDenied';
-import { CallRouteParams } from '../router';
+import { Conversation } from '../models/conversation';
 import { callTimeoutMs } from '../utils/constants';
 import { AsyncSetState, SetState, WithChildren } from '../utils/utils';
-import { useConversationContext } from './ConversationProvider';
+import { CallManagerContext } from './CallManagerProvider';
 import { MediaDevicesInfo, MediaInputKind, WebRtcContext } from './WebRtcProvider';
 import { IWebSocketContext, WebSocketContext } from './WebSocketProvider';
 
@@ -113,21 +111,30 @@
 
 export default ({ children }: WithChildren) => {
   const webSocket = useContext(WebSocketContext);
+  const { callConversation, callData } = useContext(CallManagerContext);
 
-  if (!webSocket) {
+  if (!webSocket || !callConversation || !callData?.conversationId) {
     return <LoadingPage />;
   }
 
-  return <CallProvider webSocket={webSocket}>{children}</CallProvider>;
+  return (
+    <CallProvider webSocket={webSocket} conversation={callConversation} conversationId={callData?.conversationId}>
+      {children}
+    </CallProvider>
+  );
 };
 
 const CallProvider = ({
   children,
+  conversation,
+  conversationId,
   webSocket,
 }: WithChildren & {
   webSocket: IWebSocketContext;
+  conversation: Conversation;
+  conversationId: string;
 }) => {
-  const { state: routeState } = useUrlParams<CallRouteParams>();
+  const { callData, exitCall } = useContext(CallManagerContext);
   const {
     localStream,
     updateScreenShare,
@@ -137,8 +144,6 @@
     getMediaDevices,
     updateLocalStream,
   } = useContext(WebRtcContext);
-  const { conversationId, conversation } = useConversationContext();
-  const navigate = useNavigate();
 
   const [mediaDevices, setMediaDevices] = useState(defaultCallContext.mediaDevices);
   const [audioInputDeviceId, setAudioInputDeviceId] = useState<string>();
@@ -149,8 +154,8 @@
   const [videoStatus, setVideoStatus] = useState(VideoStatus.Off);
   const [isChatShown, setIsChatShown] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const [callStatus, setCallStatus] = useState(routeState?.callStatus);
-  const [callRole] = useState(routeState?.role);
+  const [callStatus, setCallStatus] = useState(CallStatus.Default);
+  const [callRole] = useState(callData?.role);
   const [callStartTime, setCallStartTime] = useState<number | undefined>(undefined);
 
   // TODO: This logic will have to change to support multiple people in a call. Could we move this logic to the server?
@@ -243,7 +248,7 @@
 
   useEffect(() => {
     if (callRole === 'caller' && callStatus === CallStatus.Default) {
-      const withVideoOn = routeState?.isVideoOn ?? false;
+      const withVideoOn = callData?.withVideoOn ?? false;
       setCallStatus(CallStatus.Loading);
       updateLocalStream()
         .then(() => {
@@ -263,7 +268,7 @@
           setCallStatus(CallStatus.PermissionsDenied);
         });
     }
-  }, [webSocket, updateLocalStream, callRole, callStatus, contactUri, conversationId, routeState]);
+  }, [webSocket, updateLocalStream, callRole, callStatus, contactUri, conversationId, callData]);
 
   const acceptCall = useCallback(
     (withVideoOn: boolean) => {
@@ -319,9 +324,9 @@
     console.info('Sending CallEnd', callEnd);
     closeConnection();
     webSocket.send(WebSocketMessageType.CallEnd, callEnd);
-    navigate(`/conversation/${conversationId}`);
+    exitCall();
     // TODO: write in chat that the call ended
-  }, [webSocket, contactUri, conversationId, closeConnection, navigate]);
+  }, [webSocket, contactUri, conversationId, closeConnection, exitCall]);
 
   useEffect(() => {
     const callEndListener = (data: CallAction) => {
@@ -332,7 +337,7 @@
       }
 
       closeConnection();
-      navigate(`/conversation/${conversationId}`);
+      exitCall();
       // TODO: write in chat that the call ended
     };
 
@@ -340,7 +345,7 @@
     return () => {
       webSocket.unbind(WebSocketMessageType.CallEnd, callEndListener);
     };
-  }, [webSocket, navigate, conversationId, closeConnection]);
+  }, [webSocket, exitCall, conversationId, closeConnection]);
 
   useEffect(() => {
     if (
@@ -401,14 +406,7 @@
     };
   }, [updateLocalStream, audioInputDeviceId, audioOutputDeviceId, videoDeviceId]);
 
-  useEffect(() => {
-    navigate('.', {
-      replace: true,
-      state: {},
-    });
-  }, [navigate]);
-
-  if (!callRole || callStatus === undefined) {
+  if (!callData || !callRole) {
     console.error('Invalid route. Redirecting...');
     return <Navigate to={'/'} />;
   }
@@ -433,7 +431,7 @@
         endCall,
       }}
     >
-      {callStatus === CallStatus.PermissionsDenied ? <CallPermissionDenied /> : children}
+      {children}
     </CallContext.Provider>
   );
 };
diff --git a/client/src/contexts/ConversationProvider.tsx b/client/src/contexts/ConversationProvider.tsx
index 8d5f7b5..e2aa4bc 100644
--- a/client/src/contexts/ConversationProvider.tsx
+++ b/client/src/contexts/ConversationProvider.tsx
@@ -16,7 +16,7 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { ConversationView, WebSocketMessageType } from 'jami-web-common';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect } from 'react';
 
 import LoadingPage from '../components/Loading';
 import { createOptionalContext } from '../hooks/createOptionalContext';
@@ -43,26 +43,8 @@
   } = useUrlParams<ConversationRouteParams>();
   const { accountId } = useAuthContext();
   const webSocket = useContext(WebSocketContext);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isError, setIsError] = useState(false);
-  const [conversation, setConversation] = useState<Conversation | undefined>();
 
-  const conversationQuery = useConversationQuery(conversationId!);
-
-  useEffect(() => {
-    if (conversationQuery.isSuccess) {
-      const conversation = Conversation.fromInterface(conversationQuery.data);
-      setConversation(conversation);
-    }
-  }, [accountId, conversationQuery.isSuccess, conversationQuery.data]);
-
-  useEffect(() => {
-    setIsLoading(conversationQuery.isLoading);
-  }, [conversationQuery.isLoading]);
-
-  useEffect(() => {
-    setIsError(conversationQuery.isError);
-  }, [conversationQuery.isError]);
+  const { conversation, isLoading, isError } = useConversationQuery(conversationId!);
 
   useEffect(() => {
     if (!conversation || !conversationId || !webSocket) {
diff --git a/client/src/contexts/WebRtcProvider.tsx b/client/src/contexts/WebRtcProvider.tsx
index b7733bc..bb99717 100644
--- a/client/src/contexts/WebRtcProvider.tsx
+++ b/client/src/contexts/WebRtcProvider.tsx
@@ -20,9 +20,10 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import LoadingPage from '../components/Loading';
+import { Conversation } from '../models/conversation';
 import { WithChildren } from '../utils/utils';
 import { useAuthContext } from './AuthProvider';
-import { useConversationContext } from './ConversationProvider';
+import { CallManagerContext } from './CallManagerProvider';
 import { IWebSocketContext, WebSocketContext } from './WebSocketProvider';
 
 export type MediaDevicesInfo = Record<MediaDeviceKind, MediaDeviceInfo[]>;
@@ -61,6 +62,7 @@
   const { account } = useAuthContext();
   const [webRtcConnection, setWebRtcConnection] = useState<RTCPeerConnection | undefined>();
   const webSocket = useContext(WebSocketContext);
+  const { callConversation, callData } = useContext(CallManagerContext);
 
   useEffect(() => {
     if (!webRtcConnection && account) {
@@ -84,12 +86,17 @@
     }
   }, [account, webRtcConnection]);
 
-  if (!webRtcConnection || !webSocket) {
+  if (!webRtcConnection || !webSocket || !callConversation || !callData?.conversationId) {
     return <LoadingPage />;
   }
 
   return (
-    <WebRtcProvider webRtcConnection={webRtcConnection} webSocket={webSocket}>
+    <WebRtcProvider
+      webRtcConnection={webRtcConnection}
+      webSocket={webSocket}
+      conversation={callConversation}
+      conversationId={callData.conversationId}
+    >
       {children}
     </WebRtcProvider>
   );
@@ -97,13 +104,16 @@
 
 const WebRtcProvider = ({
   children,
+  conversation,
+  conversationId,
   webRtcConnection,
   webSocket,
 }: WithChildren & {
   webRtcConnection: RTCPeerConnection;
   webSocket: IWebSocketContext;
+  conversation: Conversation;
+  conversationId: string;
 }) => {
-  const { conversation, conversationId } = useConversationContext();
   const [localStream, setLocalStream] = useState<MediaStream>();
   const [screenShareLocalStream, setScreenShareLocalStream] = useState<MediaStream>();
   const [remoteStreams, setRemoteStreams] = useState<readonly MediaStream[]>();
diff --git a/client/src/hooks/useStartCall.ts b/client/src/hooks/useStartCall.ts
deleted file mode 100644
index c20a2cc..0000000
--- a/client/src/hooks/useStartCall.ts
+++ /dev/null
@@ -1,39 +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 { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { CallStatus } from '../contexts/CallProvider';
-import { CallRouteParams } from '../router';
-
-export const useStartCall = () => {
-  const navigate = useNavigate();
-
-  return useCallback(
-    (conversationId: string, state?: Partial<CallRouteParams['state']>) => {
-      navigate(`/conversation/${conversationId}/call`, {
-        state: {
-          callStatus: CallStatus.Default,
-          role: 'caller',
-          ...state,
-        },
-      });
-    },
-    [navigate]
-  );
-};
diff --git a/client/src/managers/NotificationManager.tsx b/client/src/managers/NotificationManager.tsx
deleted file mode 100644
index 907efb5..0000000
--- a/client/src/managers/NotificationManager.tsx
+++ /dev/null
@@ -1,57 +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 { CallBegin, WebSocketMessageType } from 'jami-web-common';
-import { useContext, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { CallStatus } from '../contexts/CallProvider';
-import { WebSocketContext } from '../contexts/WebSocketProvider';
-import { WithChildren } from '../utils/utils';
-
-/**
- * Binds notification listeners to the WebSocket from a WebSocketContext.
- */
-export default ({ children }: WithChildren) => {
-  const webSocket = useContext(WebSocketContext);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (!webSocket) {
-      return;
-    }
-
-    const callBeginListener = (data: CallBegin) => {
-      console.info('Received event on CallBegin', data);
-      navigate(`/conversation/${data.conversationId}/call`, {
-        state: {
-          role: 'receiver',
-          callStatus: CallStatus.Ringing,
-          isVideoOn: data.withVideoOn,
-        },
-      });
-    };
-
-    webSocket.bind(WebSocketMessageType.CallBegin, callBeginListener);
-
-    return () => {
-      webSocket.unbind(WebSocketMessageType.CallBegin, callBeginListener);
-    };
-  }, [webSocket, navigate]);
-
-  return <>{children}</>;
-};
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 3d5b366..4feecc2 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -51,6 +51,7 @@
 import { WebRtcContext } from '../contexts/WebRtcProvider';
 import { VideoElementWithSinkId } from '../utils/utils';
 import { CallPending } from './CallPending';
+import CallPermissionDenied from './CallPermissionDenied';
 
 export default () => {
   const { callStatus, isChatShown, isFullscreen } = useContext(CallContext);
@@ -68,6 +69,9 @@
     }
   }, [isFullscreen]);
 
+  if (callStatus === CallStatus.PermissionsDenied) {
+    return <CallPermissionDenied />;
+  }
   if (callStatus !== CallStatus.InCall) {
     return <CallPending />;
   }
@@ -213,7 +217,7 @@
 const CallInterfaceInformation = () => {
   const { callStartTime } = useContext(CallContext);
   const { conversation } = useConversationContext();
-  const [elapsedTime, setElapsedTime] = useState(0);
+  const [elapsedTime, setElapsedTime] = useState(callStartTime ? (Date.now() - callStartTime) / 1000 : 0);
   const memberName = useMemo(() => conversation.getFirstMember().contact.registeredName, [conversation]);
 
   useEffect(() => {
diff --git a/client/src/pages/CallPending.tsx b/client/src/pages/CallPending.tsx
index 54fb916..ea2017d 100644
--- a/client/src/pages/CallPending.tsx
+++ b/client/src/pages/CallPending.tsx
@@ -189,6 +189,7 @@
 
   switch (callStatus) {
     case CallStatus.Ringing:
+    case CallStatus.Default:
       title = t('incoming_call', {
         context: state?.isVideoOn ? 'video' : 'audio',
         member0: memberName,
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 7bbddd4..13b5a69 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -21,15 +21,12 @@
 import ContactList from './components/ContactList';
 import ConversationView from './components/ConversationView';
 import AuthProvider from './contexts/AuthProvider';
-import CallProvider, { CallRole, CallStatus } from './contexts/CallProvider';
+import CallManagerProvider from './contexts/CallManagerProvider';
 import ConversationProvider from './contexts/ConversationProvider';
 import MessengerProvider from './contexts/MessengerProvider';
-import WebRtcProvider from './contexts/WebRtcProvider';
 import WebSocketProvider from './contexts/WebSocketProvider';
 import { RouteParams } from './hooks/useUrlParams';
-import NotificationManager from './managers/NotificationManager';
 import AccountSettings from './pages/AccountSettings';
-import CallInterface from './pages/CallInterface';
 import GeneralSettings from './pages/GeneralSettings';
 import Messenger from './pages/Messenger';
 import Setup from './pages/Setup';
@@ -39,16 +36,6 @@
 
 export type ConversationRouteParams = RouteParams<{ conversationId?: string }, Record<string, never>>;
 
-export type CallRouteParams = RouteParams<
-  { conversationId?: string },
-  Record<string, never>,
-  {
-    role: CallRole;
-    isVideoOn?: boolean;
-    callStatus: CallStatus;
-  }
->;
-
 export const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />} loader={appLoader}>
@@ -60,9 +47,9 @@
         element={
           <AuthProvider>
             <WebSocketProvider>
-              <NotificationManager>
+              <CallManagerProvider>
                 <Outlet />
-              </NotificationManager>
+              </CallManagerProvider>
             </WebSocketProvider>
           </AuthProvider>
         }
@@ -81,23 +68,11 @@
             element={
               <Messenger>
                 <ConversationProvider>
-                  <Outlet />
+                  <ConversationView />
                 </ConversationProvider>
               </Messenger>
             }
-          >
-            <Route index element={<ConversationView />} />
-            <Route
-              path="call"
-              element={
-                <WebRtcProvider>
-                  <CallProvider>
-                    <CallInterface />
-                  </CallProvider>
-                </WebRtcProvider>
-              }
-            />
-          </Route>
+          />
         </Route>
         <Route path="settings-account" element={<AccountSettings />} />
         <Route path="settings-general" element={<GeneralSettings />} />
diff --git a/client/src/services/conversationQueries.ts b/client/src/services/conversationQueries.ts
index 44c0aae..94946ad 100644
--- a/client/src/services/conversationQueries.ts
+++ b/client/src/services/conversationQueries.ts
@@ -17,12 +17,14 @@
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { IConversation, Message } from 'jami-web-common';
+import { useMemo } from 'react';
 
 import { useAuthContext } from '../contexts/AuthProvider';
+import { Conversation } from '../models/conversation';
 
-export const useConversationQuery = (conversationId: string) => {
+export const useConversationQuery = (conversationId?: string) => {
   const { axiosInstance } = useAuthContext();
-  return useQuery(
+  const conversationQuery = useQuery(
     ['conversation', conversationId],
     async () => {
       const { data } = await axiosInstance.get<IConversation>(`/conversations/${conversationId}`);
@@ -32,6 +34,17 @@
       enabled: !!conversationId,
     }
   );
+
+  const conversation = useMemo(() => {
+    if (conversationQuery.isSuccess) {
+      return Conversation.fromInterface(conversationQuery.data);
+    }
+  }, [conversationQuery.isSuccess, conversationQuery.data]);
+
+  return {
+    conversation,
+    ...conversationQuery,
+  };
 };
 
 export const useMessagesQuery = (conversationId: string) => {