diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index 2392c00..79d5485 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -32,7 +32,9 @@
   MicroIcon,
   MicroOffIcon,
   MoreVerticalIcon,
+  PlaceAudioCallIcon,
   RecordingIcon,
+  RoundCloseIcon,
   ScreenShareArrowIcon,
   ScreenShareRegularIcon,
   ScreenShareScreenAreaIcon,
@@ -42,23 +44,33 @@
   WindowIcon,
 } from './SvgIcon';
 
+type ColoredCallButtonColor = 'red' | 'green';
+
 const CallButton = styled((props: ExpandableButtonProps) => {
   return <ExpandableButton {...props} />;
 })({
+  color: 'white',
   '&:hover': {
     backgroundColor: 'rgba(255, 255, 255, 0.15)',
   },
-  color: 'white',
 });
 
-const ColoredCallButton = styled((props: ExpandableButtonProps) => {
-  return <ExpandableButton {...props} />;
-})({
-  color: 'white',
-  backgroundColor: '#a30000',
-  '&:hover': {
-    backgroundColor: '#ff0000',
-  },
+const ColoredCallButton = styled(
+  ({
+    ...props
+  }: ExpandableButtonProps & {
+    buttonColor: ColoredCallButtonColor;
+  }) => {
+    return <ExpandableButton {...props} />;
+  }
+)(({ buttonColor }) => {
+  return {
+    color: 'white',
+    backgroundColor: buttonColor === 'green' ? '#183722' : '#5E070D',
+    '&:hover': {
+      backgroundColor: buttonColor === 'green' ? '#0B8271' : '#CC0022',
+    },
+  };
 });
 
 export const CallingChatButton = (props: ExpandableButtonProps) => {
@@ -66,7 +78,7 @@
 };
 
 export const CallingEndButton = (props: ExpandableButtonProps) => {
-  return <ColoredCallButton sx={{}} aria-label="call end" Icon={CallEndIcon} {...props} />;
+  return <ColoredCallButton buttonColor="red" aria-label="call end" Icon={CallEndIcon} {...props} />;
 };
 
 export const CallingExtensionButton = (props: ExpandableButtonProps) => {
@@ -159,7 +171,6 @@
 
 export const CallingVideoCameraButton = (props: ExpandableButtonProps) => {
   const { isVideoOn, setVideoStatus } = useContext(WebRTCContext);
-
   return (
     <CallButton
       aria-label="camera options"
@@ -176,3 +187,16 @@
     />
   );
 };
+
+// Calling pending/receiving interface
+export const CallingAnswerAudioButton = (props: ExpandableButtonProps) => {
+  return <ColoredCallButton aria-label="answer audio" buttonColor="green" Icon={PlaceAudioCallIcon} {...props} />;
+};
+
+export const CallingAnswerVideoButton = (props: ExpandableButtonProps) => {
+  return <ColoredCallButton aria-label="answer video" buttonColor="green" Icon={VideoCameraIcon} {...props} />;
+};
+
+export const CallingRefuseButton = (props: ExpandableButtonProps) => {
+  return <ColoredCallButton aria-label="reject" buttonColor="red" Icon={RoundCloseIcon} {...props} />;
+};
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index 9fa1acc..91dd0f1 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -147,7 +147,7 @@
     closeModalDelete();
   };
 
-  const uri = conversation.getId() ? `/conversation/${conversation.getId()}` : `/addContact/${userId}`;
+  const uri = conversation.getId() ? `/conversation/${conversation.getId()}` : `/add-contact/${userId}`;
   return (
     <div onContextMenu={openMenu}>
       <div>
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index 88423b1..8f83587 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -552,6 +552,23 @@
   );
 };
 
+export const PlaceAudioCallIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g id="Icons_Outline" stroke="#ffffff" strokeWidth="1.75" fill="none" fillRule="evenodd">
+        <g id="Phone">
+          <g id="Ico_TEL" transform="translate(3.000000, 3.000000)">
+            <path
+              d="M2.08318114,0.702801822 C3.47221232,-0.375546383 4.67183016,-0.185249641 5.24007015,1.08339531 C6.37655021,3.36695621 7.19734136,4.50873667 6.37655021,5.39678812 C4.86124348,6.41170409 3.78790122,6.91916206 4.35614125,7.99751029 C5.49262131,10.7250969 7.70244359,13.0720901 10.3542304,14.4675995 C11.3644349,15.101922 11.9326749,14.0235738 13.0691549,12.6280643 C14.0162216,11.8668773 15.0895639,12.6914966 17.2993862,14.0235738 C18.4990041,14.7213285 18.5621418,15.8631089 17.4256618,17.1951861 C10.7961949,24.6801913 -5.80904142,6.85572983 2.08318114,0.702801822"
+              id="Path"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </SvgIcon>
+  );
+};
+
 export const RecordingIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 24 24">
@@ -588,6 +605,15 @@
   );
 };
 
+export const RoundCloseIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <path fill="none" stroke="none" d="M0 0h24v24H0V0z" />
+      <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
+    </SvgIcon>
+  );
+};
+
 export const RoundCrossIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 16 16">
@@ -763,7 +789,7 @@
 export const VideoCameraOffIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 24 24">
-      <g id="Icones_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Icons_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
         <g id="Camera-Off" stroke="#ffffff" strokeWidth="1.5">
           <line x1="4.5" y1="18.5" x2="15.5" y2="6.5" id="Line" strokeLinecap="round"></line>
           <g id="Ico_Camera" transform="translate(3.000000, 5.000000)" fillRule="nonzero" strokeLinejoin="round">