diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 379dc8f..29dac19 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -59,11 +59,11 @@
 } from './SvgIcon';
 import CustomTooltip from './Tooltip';
 
-type ShapedButtonProps = IconButtonProps & {
+export type ShapedButtonProps = IconButtonProps & {
   Icon: ComponentType<SvgIconProps>;
 };
 
-const RoundButton = styled(({ Icon, ...props }: ShapedButtonProps) => (
+export const RoundButton = styled(({ Icon, ...props }: ShapedButtonProps) => (
   <IconButton {...props} disableRipple={true}>
     <Icon fontSize="inherit" />
   </IconButton>
diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index 594a1cc..7ccdd91 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -16,12 +16,14 @@
  * <https://www.gnu.org/licenses/>.
  */
 
-import { styled } from '@mui/material/styles';
+import { IconButton, IconButtonProps, PaletteColor } from '@mui/material';
+import { styled, Theme } from '@mui/material/styles';
 import React, { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
-import { WebRTCContext } from '../contexts/WebRTCProvider';
-import { ExpandableButton, ExpandableButtonProps, ToggleIconButton } from './Button';
+import { CallContext } from '../contexts/CallProvider';
+import { ExpandableButton, ExpandableButtonProps, ShapedButtonProps, ToggleIconButton } from './Button';
 import {
   CallEndIcon,
   ChatBubbleIcon,
@@ -44,8 +46,6 @@
   WindowIcon,
 } from './SvgIcon';
 
-type ColoredCallButtonColor = 'red' | 'green';
-
 const CallButton = styled((props: ExpandableButtonProps) => {
   return <ExpandableButton {...props} />;
 })({
@@ -57,19 +57,28 @@
 
 const ColoredCallButton = styled(
   ({
-    buttonColor,
+    paletteColor,
+    Icon,
     ...props
-  }: ExpandableButtonProps & {
-    buttonColor: ColoredCallButtonColor;
+  }: ShapedButtonProps & {
+    paletteColor?: PaletteColor | ((theme: Theme) => PaletteColor);
   }) => {
-    return <ExpandableButton {...props} />;
+    return (
+      <IconButton {...props} disableRipple={true}>
+        <Icon fontSize="inherit" />
+      </IconButton>
+    );
   }
-)(({ buttonColor }) => {
+)(({ theme, paletteColor = theme.palette.primary }) => {
+  if (typeof paletteColor === 'function') {
+    paletteColor = paletteColor(theme);
+  }
+
   return {
-    color: 'white',
-    backgroundColor: buttonColor === 'green' ? '#183722' : '#5E070D',
+    color: paletteColor.contrastText,
+    backgroundColor: paletteColor.dark,
     '&:hover': {
-      backgroundColor: buttonColor === 'green' ? '#0B8271' : '#CC0022',
+      backgroundColor: paletteColor.main,
     },
   };
 });
@@ -79,7 +88,19 @@
 };
 
 export const CallingEndButton = (props: ExpandableButtonProps) => {
-  return <ColoredCallButton buttonColor="red" aria-label="call end" Icon={CallEndIcon} {...props} />;
+  const navigate = useNavigate();
+  return (
+    <ColoredCallButton
+      paletteColor={(theme) => theme.palette.error}
+      onClick={() => {
+        // TODO: Send event to end call
+        navigate('/');
+      }}
+      aria-label="call end"
+      Icon={CallEndIcon}
+      {...props}
+    />
+  );
 };
 
 export const CallingExtensionButton = (props: ExpandableButtonProps) => {
@@ -132,7 +153,7 @@
 };
 
 const useMediaDeviceExpandMenuOptions = (kind: MediaDeviceKind) => {
-  const { mediaDevices } = useContext(WebRTCContext);
+  const { mediaDevices } = useContext(CallContext);
 
   return useMemo(
     () =>
@@ -162,7 +183,6 @@
 };
 
 export const CallingMicButton = (props: ExpandableButtonProps) => {
-  const { isAudioOn, setAudioStatus } = useContext(WebRTCContext);
   const options = useMediaDeviceExpandMenuOptions('audioinput');
 
   return (
@@ -173,22 +193,26 @@
           options,
         },
       ]}
-      IconButtonComp={(props) => (
-        <ToggleIconButton
-          IconOn={MicroIcon}
-          IconOff={MicroOffIcon}
-          selected={isAudioOn}
-          toggle={() => setAudioStatus(!isAudioOn)}
-          {...props}
-        />
-      )}
+      IconButtonComp={ToggleAudioCameraIconButton}
+      {...props}
+    />
+  );
+};
+
+const ToggleAudioCameraIconButton = (props: IconButtonProps) => {
+  const { isAudioOn, setAudioStatus } = useContext(CallContext);
+  return (
+    <ToggleIconButton
+      IconOn={MicroIcon}
+      IconOff={MicroOffIcon}
+      selected={isAudioOn}
+      toggle={() => setAudioStatus(!isAudioOn)}
       {...props}
     />
   );
 };
 
 export const CallingVideoCameraButton = (props: ExpandableButtonProps) => {
-  const { isVideoOn, setVideoStatus } = useContext(WebRTCContext);
   const options = useMediaDeviceExpandMenuOptions('videoinput');
 
   return (
@@ -199,29 +223,85 @@
           options,
         },
       ]}
-      IconButtonComp={(props) => (
-        <ToggleIconButton
-          IconOn={VideoCameraIcon}
-          IconOff={VideoCameraOffIcon}
-          selected={isVideoOn}
-          toggle={() => setVideoStatus(!isVideoOn)}
-          {...props}
-        />
-      )}
+      IconButtonComp={ToggleVideoCameraIconButton}
+      {...props}
+    />
+  );
+};
+
+const ToggleVideoCameraIconButton = (props: IconButtonProps) => {
+  const { isVideoOn, setVideoStatus } = useContext(CallContext);
+  return (
+    <ToggleIconButton
+      IconOn={VideoCameraIcon}
+      IconOff={VideoCameraOffIcon}
+      selected={isVideoOn}
+      toggle={() => setVideoStatus(!isVideoOn)}
       {...props}
     />
   );
 };
 
 // Calling pending/receiving interface
-export const CallingAnswerAudioButton = (props: ExpandableButtonProps) => {
-  return <ColoredCallButton aria-label="answer audio" buttonColor="green" Icon={PlaceAudioCallIcon} {...props} />;
+export const CallingCancelButton = (props: IconButtonProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <ColoredCallButton
+      aria-label="cancel call"
+      onClick={() => {
+        navigate(-1);
+      }}
+      Icon={CallEndIcon}
+      paletteColor={(theme) => theme.palette.error}
+      {...props}
+    />
+  );
 };
 
-export const CallingAnswerVideoButton = (props: ExpandableButtonProps) => {
-  return <ColoredCallButton aria-label="answer video" buttonColor="green" Icon={VideoCameraIcon} {...props} />;
+export const CallingAnswerAudioButton = (props: IconButtonProps) => {
+  const { acceptCall } = useContext(CallContext);
+
+  return (
+    <ColoredCallButton
+      aria-label="answer call audio"
+      onClick={() => {
+        acceptCall();
+      }}
+      Icon={PlaceAudioCallIcon}
+      paletteColor={(theme) => theme.palette.success}
+      {...props}
+    />
+  );
 };
 
-export const CallingRefuseButton = (props: ExpandableButtonProps) => {
-  return <ColoredCallButton aria-label="reject" buttonColor="red" Icon={RoundCloseIcon} {...props} />;
+export const CallingAnswerVideoButton = (props: IconButtonProps) => {
+  const { acceptCall } = useContext(CallContext);
+
+  return (
+    <ColoredCallButton
+      aria-label="answer call video"
+      onClick={() => {
+        acceptCall();
+      }}
+      paletteColor={(theme) => theme.palette.success}
+      Icon={VideoCameraIcon}
+      {...props}
+    />
+  );
+};
+
+export const CallingRefuseButton = (props: IconButtonProps) => {
+  const navigate = useNavigate();
+  return (
+    <ColoredCallButton
+      aria-label="refuse call"
+      onClick={() => {
+        navigate(-1);
+      }}
+      paletteColor={(theme) => theme.palette.error}
+      Icon={RoundCloseIcon}
+      {...props}
+    />
+  );
 };
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index 30dc7bf..a1e6693 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -51,7 +51,7 @@
   const isSelected = conversation.getDisplayUri() === pathId;
   const navigate = useNavigate();
   const userId = conversation?.getFirstMember()?.contact.getUri();
-  const uri = conversation.getId() ? `/conversation/${conversation.getId()}` : `/add-contact/${userId}`;
+  const uri = conversation.getId() ? `/conversation/${conversation.getId()}` : `/conversation/add-contact/${userId}`;
   return (
     <Box onContextMenu={contextMenuHandler.handleAnchorPosition}>
       <ConversationMenu
diff --git a/client/src/components/ConversationView.tsx b/client/src/components/ConversationView.tsx
index 80e05c7..73c65d7 100644
--- a/client/src/components/ConversationView.tsx
+++ b/client/src/components/ConversationView.tsx
@@ -16,61 +16,19 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Divider, Stack, Typography } from '@mui/material';
-import { Account, Conversation, ConversationMember, WebSocketMessageType } from 'jami-web-common';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { Account, ConversationMember } from 'jami-web-common';
+import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router';
 
 import { useAuthContext } from '../contexts/AuthProvider';
-import { WebSocketContext } from '../contexts/WebSocketProvider';
+import { ConversationContext } from '../contexts/ConversationProvider';
 import ChatInterface from '../pages/ChatInterface';
-import { useConversationQuery } from '../services/Conversation';
 import { translateEnumeration, TranslateEnumerationOptions } from '../utils/translations';
 import { AddParticipantButton, ShowOptionsMenuButton, StartAudioCallButton, StartVideoCallButton } from './Button';
-import LoadingPage from './Loading';
 
-type ConversationViewProps = {
-  conversationId: string;
-};
-const ConversationView = ({ conversationId }: ConversationViewProps) => {
+const ConversationView = () => {
   const { account } = useAuthContext();
-  const webSocket = useContext(WebSocketContext);
-  const [conversation, setConversation] = useState<Conversation | undefined>();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(false);
-
-  const accountId = account.getId();
-
-  const conversationQuery = useConversationQuery(conversationId);
-
-  useEffect(() => {
-    if (conversationQuery.isSuccess) {
-      const conversation = Conversation.from(accountId, conversationQuery.data);
-      setConversation(conversation);
-    }
-  }, [accountId, conversationQuery.isSuccess, conversationQuery.data]);
-
-  useEffect(() => {
-    setIsLoading(conversationQuery.isLoading);
-  }, [conversationQuery.isLoading]);
-
-  useEffect(() => {
-    setError(conversationQuery.isError);
-  }, [conversationQuery.isError]);
-
-  useEffect(() => {
-    if (!conversation || !webSocket) {
-      return;
-    }
-    console.log(`set conversation ${conversationId} ` + webSocket);
-    webSocket.send(WebSocketMessageType.ConversationView, { accountId, conversationId });
-  }, [accountId, conversation, conversationId, webSocket]);
-
-  if (isLoading) {
-    return <LoadingPage />;
-  } else if (error || !account || !conversation) {
-    return <div>Error loading {conversationId}</div>;
-  }
+  const { conversationId, conversation } = useContext(ConversationContext);
 
   return (
     <Stack height="100%">
@@ -97,9 +55,9 @@
   adminTitle: string | undefined;
 };
 
-const ConversationHeader = ({ account, members, adminTitle, conversationId }: ConversationHeaderProps) => {
+const ConversationHeader = ({ account, members, adminTitle }: ConversationHeaderProps) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { beginCall } = useContext(ConversationContext);
 
   const title = useMemo(() => {
     if (adminTitle) {
@@ -124,14 +82,6 @@
     return translateEnumeration<ConversationMember>(members, options);
   }, [account, members, adminTitle, t]);
 
-  const startCall = (withVideo = false) => {
-    let url = `/call/${conversationId}`;
-    if (withVideo) {
-      url += '?video=true';
-    }
-    navigate(url);
-  };
-
   return (
     <Stack direction="row" padding="16px" overflow="hidden">
       <Stack flex={1} justifyContent="center" whiteSpace="nowrap" overflow="hidden">
@@ -140,8 +90,8 @@
         </Typography>
       </Stack>
       <Stack direction="row" spacing="20px">
-        <StartAudioCallButton onClick={() => startCall(false)} />
-        <StartVideoCallButton onClick={() => startCall(true)} />
+        <StartAudioCallButton onClick={() => beginCall()} />
+        <StartVideoCallButton onClick={() => beginCall()} />
         <AddParticipantButton />
         <ShowOptionsMenuButton />
       </Stack>
diff --git a/client/src/components/JamiWelcomeLogo.tsx b/client/src/components/JamiWelcomeLogo.tsx
index 8e66172..3e458a1 100644
--- a/client/src/components/JamiWelcomeLogo.tsx
+++ b/client/src/components/JamiWelcomeLogo.tsx
@@ -18,7 +18,7 @@
 import { Stack, StackProps, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 
-import { ReactComponent as JamiLogo } from '../icons/jami-logo-icon.svg';
+import { ReactComponent as JamiLogo } from '../icons/jamiLogoIcon.svg';
 import { jamiLogoDefaultSize } from '../utils/constants';
 
 interface WelcomeLogoProps extends StackProps {
diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx
index 66edb9f..56574c2 100644
--- a/client/src/components/welcome.jsx
+++ b/client/src/components/welcome.jsx
@@ -20,7 +20,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ReactComponent as JamiLogo } from '../icons/jami-logo-icon.svg';
+import { ReactComponent as JamiLogo } from '../icons/jamiLogoIcon.svg';
 
 const list = {
   hidden: { opacity: 0 },