diff --git a/client/src/components/ConversationList.tsx b/client/src/components/ConversationList.tsx
index 316792b..684c7e5 100644
--- a/client/src/components/ConversationList.tsx
+++ b/client/src/components/ConversationList.tsx
@@ -20,17 +20,17 @@
 import ListSubheader from '@mui/material/ListSubheader';
 import Typography from '@mui/material/Typography';
 import { Conversation } from 'jami-web-common';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
+import { MessengerContext } from '../contexts/MessengerProvider';
 import { useAppSelector } from '../redux/hooks';
 import ConversationListItem from './ConversationListItem';
 
 type ConversationListProps = {
-  accountId: string;
   conversations: Conversation[];
-  search?: Conversation;
 };
-export default function ConversationList(props: ConversationListProps) {
+export default function ConversationList({ conversations }: ConversationListProps) {
+  const { searchResult } = useContext(MessengerContext);
   const { refresh } = useAppSelector((state) => state.userInfo);
 
   useEffect(() => {
@@ -40,17 +40,17 @@
   return (
     <div className="rooms-list">
       <List>
-        {props.search instanceof Conversation && (
+        {searchResult && (
           <div>
             <ListSubheader>Public directory</ListSubheader>
-            <ConversationListItem conversation={props.search} />
+            <ConversationListItem conversation={searchResult} />
             <ListSubheader>Conversations</ListSubheader>
           </div>
         )}
-        {props.conversations.map((conversation) => (
+        {conversations.map((conversation) => (
           <ConversationListItem key={conversation.getId()} conversation={conversation} />
         ))}
-        {props.conversations.length === 0 && (
+        {conversations.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 48e9004..03685c3 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -18,14 +18,17 @@
 import { Box, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
 import { Conversation } from 'jami-web-common';
 import { QRCodeCanvas } from 'qrcode.react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { useAuthContext } from '../contexts/AuthProvider';
+import { MessengerContext } from '../contexts/MessengerProvider';
 import { useStartCall } from '../hooks/useStartCall';
+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';
@@ -45,29 +48,37 @@
 };
 
 export default function ConversationListItem({ conversation }: ConversationListItemProps) {
-  const { conversationId, contactId } = useParams();
+  const {
+    urlParams: { conversationId },
+  } = useUrlParams<ConversationRouteParams>();
   const contextMenuHandler = useContextMenuHandler();
+  const { newContactId, setNewContactId } = useContext(MessengerContext);
 
-  const pathId = conversationId || contactId;
+  const pathId = conversationId || newContactId;
   const isSelected = conversation.getDisplayUri() === pathId;
+
   const navigate = useNavigate();
   const userId = conversation?.getFirstMember()?.contact.getUri();
 
-  // TODO: Improve this component. conversationId should never be undefined.
-  //       (https://git.jami.net/savoirfairelinux/jami-web/-/issues/171)
-  const uri = conversation.getId()
-    ? `/conversation/${conversation.getId()}`
-    : `/conversation/add-contact?newContactId=${userId}`;
+  const onClick = useCallback(() => {
+    const newConversationId = conversation.getId();
+    if (newConversationId) {
+      navigate(`/conversation/${newConversationId}`);
+    } else {
+      setNewContactId(userId);
+    }
+  }, [navigate, conversation, userId, setNewContactId]);
+
   return (
     <Box onContextMenu={contextMenuHandler.handleAnchorPosition}>
       <ConversationMenu
         userId={userId}
         conversation={conversation}
-        uri={uri}
+        onMessageClick={onClick}
         isSelected={isSelected}
         contextMenuProps={contextMenuHandler.props}
       />
-      <ListItem button alignItems="flex-start" selected={isSelected} onClick={() => navigate(uri)}>
+      <ListItem button alignItems="flex-start" selected={isSelected} onClick={onClick}>
         <ListItemAvatar>
           <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
         </ListItemAvatar>
@@ -80,12 +91,18 @@
 interface ConversationMenuProps {
   userId: string;
   conversation: Conversation;
-  uri: string;
+  onMessageClick: () => void;
   isSelected: boolean;
   contextMenuProps: ContextMenuHandler['props'];
 }
 
-const ConversationMenu = ({ userId, conversation, uri, isSelected, contextMenuProps }: ConversationMenuProps) => {
+const ConversationMenu = ({
+  userId,
+  conversation,
+  onMessageClick,
+  isSelected,
+  contextMenuProps,
+}: ConversationMenuProps) => {
   const { t } = useTranslation();
   const { axiosInstance } = useAuthContext();
   const [isSwarm] = useState(true);
@@ -117,9 +134,7 @@
       {
         label: t('conversation_message'),
         Icon: MessageIcon,
-        onClick: () => {
-          navigate(uri);
-        },
+        onClick: onMessageClick,
       },
       {
         label: t('conversation_start_audiocall'),
@@ -177,7 +192,7 @@
     ],
     [
       navigate,
-      uri,
+      onMessageClick,
       isSelected,
       getContactDetails,
       detailsDialogHandler,
@@ -302,7 +317,7 @@
   const remove = async () => {
     const controller = new AbortController();
     try {
-      await axiosInstance.delete(`/contacts/${userId}/remove`, {
+      await axiosInstance.delete(`/contacts/${userId}`, {
         signal: controller.signal,
       });
       dispatch(setRefreshFromSlice());
diff --git a/client/src/components/NewContactForm.tsx b/client/src/components/NewContactForm.tsx
index d55b80b..21ead27 100644
--- a/client/src/components/NewContactForm.tsx
+++ b/client/src/components/NewContactForm.tsx
@@ -17,28 +17,21 @@
  */
 import { SearchRounded } from '@mui/icons-material';
 import { InputAdornment, InputBase } from '@mui/material';
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { ChangeEvent, useContext, useState } from 'react';
 
-type NewContactFormProps = {
-  onChange?: (v: string) => void;
-  onSubmit?: (v: string) => void;
-};
+import { MessengerContext } from '../contexts/MessengerProvider';
 
-export default function NewContactForm(props: NewContactFormProps) {
+export default function NewContactForm() {
+  const { setSearchQuery } = useContext(MessengerContext);
   const [value, setValue] = useState('');
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    if (props.onChange) props.onChange(event.target.value);
-  };
-
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (value && props.onSubmit) props.onSubmit(value);
+    setSearchQuery(event.target.value);
   };
 
   return (
-    <form className="main-search" onSubmit={handleSubmit} noValidate autoComplete="off">
+    <form className="main-search" noValidate autoComplete="off">
       <InputBase
         className="main-search-input"
         type="search"
diff --git a/client/src/contexts/MessengerProvider.tsx b/client/src/contexts/MessengerProvider.tsx
new file mode 100644
index 0000000..f92a6d7
--- /dev/null
+++ b/client/src/contexts/MessengerProvider.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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 { Contact, Conversation, ConversationMessage, WebSocketMessageType } from 'jami-web-common';
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+import { setRefreshFromSlice } from '../redux/appSlice';
+import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import { SetState } from '../utils/utils';
+import { useAuthContext } from './AuthProvider';
+import { WebSocketContext } from './WebSocketProvider';
+
+export interface IMessengerContext {
+  conversations: Conversation[] | undefined;
+
+  setSearchQuery: SetState<string | undefined>;
+
+  searchResult: Conversation | undefined;
+
+  newContactId: string | undefined;
+  setNewContactId: SetState<string | undefined>;
+}
+
+const defaultMessengerContext: IMessengerContext = {
+  conversations: undefined,
+  newContactId: undefined,
+  setNewContactId: () => {},
+  setSearchQuery: () => {},
+  searchResult: undefined,
+};
+
+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>();
+
+  useEffect(() => {
+    const controller = new AbortController();
+    axiosInstance
+      .get<Conversation[]>('/conversations', {
+        signal: controller.signal,
+      })
+      .then(({ data }) => {
+        setConversations(Object.values(data).map((c) => Conversation.from(accountId, c)));
+      });
+    // return () => controller.abort()
+  }, [axiosInstance, accountId, refresh]);
+
+  useEffect(() => {
+    if (!webSocket) {
+      return;
+    }
+
+    const conversationMessageListener = (_data: ConversationMessage) => {
+      dispatch(setRefreshFromSlice());
+    };
+
+    webSocket.bind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
+
+    return () => {
+      webSocket.unbind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
+    };
+  }, [webSocket, dispatch]);
+
+  useEffect(() => {
+    if (!searchQuery) return;
+    const controller = new AbortController();
+    // TODO: Type properly https://git.jami.net/savoirfairelinux/jami-web/-/issues/92
+    axiosInstance
+      .get<{ state: number; address: string; username: string }>(`/ns/username/${searchQuery}`, {
+        signal: controller.signal,
+      })
+      .then(({ data }) => {
+        const contact = new Contact(data.address);
+        contact.setRegisteredName(data.username);
+        setSearchResults(contact ? Conversation.fromSingleContact(accountId, contact) : undefined);
+      })
+      .catch(() => {
+        setSearchResults(undefined);
+      });
+    // return () => controller.abort() // crash on React18
+  }, [accountId, searchQuery, axiosInstance]);
+
+  return (
+    <MessengerContext.Provider
+      value={{
+        conversations,
+        setSearchQuery,
+        searchResult,
+        newContactId,
+        setNewContactId,
+      }}
+    >
+      {children}
+    </MessengerContext.Provider>
+  );
+};
diff --git a/client/src/pages/Messenger.tsx b/client/src/pages/Messenger.tsx
index 7f10e41..294e069 100644
--- a/client/src/pages/Messenger.tsx
+++ b/client/src/pages/Messenger.tsx
@@ -16,96 +16,27 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Box, Stack } from '@mui/material';
-import { Contact, Conversation, ConversationMessage, WebSocketMessageType } from 'jami-web-common';
-import { useContext, useEffect, useState } from 'react';
-import { Outlet } from 'react-router-dom';
+import { ReactNode, useContext } 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 { useAuthContext } from '../contexts/AuthProvider';
-import { WebSocketContext } from '../contexts/WebSocketProvider';
-import { useUrlParams } from '../hooks/useUrlParams';
-import { setRefreshFromSlice } from '../redux/appSlice';
-import { useAppDispatch, useAppSelector } from '../redux/hooks';
-import { AddContactRouteParams } from '../router';
+import { MessengerContext } from '../contexts/MessengerProvider';
 import AddContactPage from './AddContactPage';
 
-const Messenger = () => {
-  const { refresh } = useAppSelector((state) => state.userInfo);
-  const dispatch = useAppDispatch();
-  const { account, axiosInstance } = useAuthContext();
-  const webSocket = useContext(WebSocketContext);
-
-  const [conversations, setConversations] = useState<Conversation[] | undefined>(undefined);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [searchResult, setSearchResults] = useState<Conversation | undefined>(undefined);
-
-  const { urlParams } = useUrlParams<AddContactRouteParams>();
-
-  // TODO: Rework the contact adding logic so that adding a contact does not make the current conversationId undefined.
-  //       The newContactId should not come from the route, but from a state.
-  const newContactId = urlParams?.contactId;
-
-  const accountId = account.getId();
-
-  useEffect(() => {
-    const controller = new AbortController();
-    axiosInstance
-      .get<Conversation[]>('/conversations', {
-        signal: controller.signal,
-      })
-      .then(({ data }) => {
-        setConversations(Object.values(data).map((c) => Conversation.from(accountId, c)));
-      });
-    // return () => controller.abort()
-  }, [axiosInstance, accountId, refresh]);
-
-  useEffect(() => {
-    if (!webSocket) {
-      return;
-    }
-
-    const conversationMessageListener = (_data: ConversationMessage) => {
-      dispatch(setRefreshFromSlice());
-    };
-
-    webSocket.bind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
-
-    return () => {
-      webSocket.unbind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
-    };
-  }, [webSocket, dispatch]);
-
-  useEffect(() => {
-    if (!searchQuery) return;
-    const controller = new AbortController();
-    // TODO: Type properly https://git.jami.net/savoirfairelinux/jami-web/-/issues/92
-    axiosInstance
-      .get<{ state: number; address: string; username: string }>(`/ns/username/${searchQuery}`, {
-        signal: controller.signal,
-      })
-      .then(({ data }) => {
-        const contact = new Contact(data.address);
-        contact.setRegisteredName(data.username);
-        setSearchResults(contact ? Conversation.fromSingleContact(accountId, contact) : undefined);
-      })
-      .catch(() => {
-        setSearchResults(undefined);
-      });
-    // return () => controller.abort() // crash on React18
-  }, [accountId, searchQuery, axiosInstance]);
+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 onChange={setSearchQuery} />
+        <NewContactForm />
         {newContactId && <AddContactPage contactId={newContactId} />}
         {conversations ? (
-          <ConversationList search={searchResult} conversations={conversations} accountId={accountId} />
+          <ConversationList conversations={conversations} />
         ) : (
           <div className="rooms-list">
             <LoadingPage />
@@ -113,7 +44,7 @@
         )}
       </Stack>
       <Box flexGrow={1} display="flex" position="relative">
-        <Outlet />
+        {children}
       </Box>
     </Box>
   );
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 5b6b71d..714adde 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -23,6 +23,7 @@
 import AuthProvider from './contexts/AuthProvider';
 import CallProvider, { CallRole, CallStatus } from './contexts/CallProvider';
 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';
@@ -36,9 +37,7 @@
 import Welcome from './pages/Welcome';
 import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
 
-export type ConversationRouteParams = RouteParams<{ conversationId: string }, Record<string, never>>;
-
-export type AddContactRouteParams = RouteParams<{ contactId: string }, Record<string, never>>;
+export type ConversationRouteParams = RouteParams<{ conversationId?: string }, Record<string, never>>;
 
 export type CallRouteParams = RouteParams<
   { conversationId?: string },
@@ -67,18 +66,23 @@
           </AuthProvider>
         }
       >
-        <Route index element={<Messenger />} />
-        <Route path="conversation" element={<Messenger />}>
-          {/* TODO: Remove this route. Adding a contact should not change the route, we should instead use an internal
-                    state in the Messenger component
-           */}
-          <Route path="add-contact" element={<div></div>} />
+        <Route
+          element={
+            <MessengerProvider>
+              <Outlet />
+            </MessengerProvider>
+          }
+        >
+          <Route index element={<Messenger />} />
+          <Route path="conversation" element={<Messenger />} />
           <Route
-            path=":conversationId"
+            path="conversation/:conversationId"
             element={
-              <ConversationProvider>
-                <Outlet />
-              </ConversationProvider>
+              <Messenger>
+                <ConversationProvider>
+                  <Outlet />
+                </ConversationProvider>
+              </Messenger>
             }
           >
             <Route index element={<ConversationView />} />