diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 3c147d6..25ddf39 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -25,19 +25,29 @@
   Arrow2Icon,
   Arrow3Icon,
   ArrowIcon,
+  CallEndIcon,
   CameraIcon,
   CameraInBubbleIcon,
   CancelIcon,
+  ChatBubbleIcon,
   CrossedEyeIcon,
   CrossIcon,
   EmojiIcon,
+  ExtensionIcon,
   EyeIcon,
   FolderIcon,
+  FullscreenIcon,
+  GroupAddIcon,
   InfoIcon,
+  MicroIcon,
   MicroInBubbleIcon,
   PaperClipIcon,
   PenIcon,
+  RecordingIcon,
   SaltireIcon,
+  ScreenShareIcon,
+  VideoCameraIcon,
+  VolumeIcon,
 } from './SvgIcon';
 
 type ShapedButtonProps = IconButtonProps & {
@@ -135,6 +145,85 @@
   },
 }));
 
+export const CallingChatButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="chat" sx={{ color: 'white' }}>
+      <ChatBubbleIcon />
+    </IconButton>
+  );
+};
+
+export const CallingEndButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="end call" sx={{ color: 'white', backgroundColor: 'red' }}>
+      <CallEndIcon />
+    </IconButton>
+  );
+};
+
+export const CallingExtensionButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="extensions" sx={{ color: 'white' }}>
+      <ExtensionIcon />
+    </IconButton>
+  );
+};
+
+export const CallingFullscreenButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="fullscreen" sx={{ color: 'white' }}>
+      <FullscreenIcon />
+    </IconButton>
+  );
+};
+
+export const CallingGroupButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="group options" sx={{ color: 'white' }}>
+      <GroupAddIcon />
+    </IconButton>
+  );
+};
+
+export const CallingMicButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="microphone options" sx={{ color: 'white' }}>
+      <MicroIcon />
+    </IconButton>
+  );
+};
+
+export const CallingRecordButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="recording options" sx={{ color: 'white' }}>
+      <RecordingIcon />
+    </IconButton>
+  );
+};
+
+export const CallingScreenShareButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="screen share" sx={{ color: 'white' }}>
+      <ScreenShareIcon />
+    </IconButton>
+  );
+};
+
+export const CallingVideoCameraButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="camera options" sx={{ color: 'white' }}>
+      <VideoCameraIcon />
+    </IconButton>
+  );
+};
+export const CallingVolumeButton = (props: IconButtonProps) => {
+  return (
+    <IconButton {...props} aria-label="volume options" sx={{ color: 'white' }}>
+      <VolumeIcon />
+    </IconButton>
+  );
+};
+
 export const CloseButton = styled((props: IconButtonProps) => {
   return (
     <IconButton {...props} disableRipple={true} aria-label="close">
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index b554d71..bfcb0a8 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -64,6 +64,68 @@
   );
 };
 
+export const AudioCallIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 15.338 16">
+      {/* <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="15.338"
+        height="16"
+        viewBox="0 0 15.338 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs> */}
+      <g transform="translate(-2.404 -1.956)">
+        <g transform="translate(2.404 1.956)">
+          <g transform="translate(0)">
+            <path
+              className="a"
+              d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
+              transform="translate(0.596 1.044)"
+            />
+          </g>
+        </g>
+      </g>
+      {/* </svg> */}
+    </SvgIcon>
+  );
+};
+
+export const BlockContactIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 15.52">
+      {/* <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs> */}
+      <g transform="translate(-2 -2.3)">
+        <path
+          className="a"
+          d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
+          transform="translate(-1.96 -1.84)"
+        />
+        <path
+          className="a"
+          d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
+        />
+      </g>
+      {/* </svg> */}
+    </SvgIcon>
+  );
+};
+
+export const CallEndIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
 export const CameraIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="2 3 20 19">
@@ -89,6 +151,27 @@
   );
 };
 
+export const ChatBubbleIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g id="Icons_Outline">
+        <g id="Chat_Black_24dp">
+          <g id="Shape" transform="translate(3.000000, 4.000000)">
+            <g>
+              <path
+                d="M4.6,17c-0.2,0-0.4,0-0.6-0.1c-0.6-0.3-0.9-0.8-0.9-1.5V13H2.3C0.5,13-1,11.5-1,9.6V2.3C-1,0.5,0.5-1,2.3-1h13.3
+					C17.5-1,19,0.5,19,2.3v7.3c0,1.8-1.5,3.3-3.3,3.3H9.5l-3.8,3.6C5.4,16.8,5,17,4.6,17z M2.3,0.4c-1.1,0-1.9,0.9-1.9,2v7.3
+					c0,1,0.8,1.9,1.9,1.9h2.2v3.9c0,0,0,0.1,0.1,0.1s0.1,0,0.2,0l4.2-4h6.7c1,0,1.9-0.8,1.9-1.9V2.3c0-1-0.8-1.9-1.9-1.9H2.3
+					L2.3,0.4z"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </SvgIcon>
+  );
+};
+
 export const CheckedIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 16 16">
@@ -98,6 +181,28 @@
   );
 };
 
+export const ContactDetailsIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 14.647 16">
+      {/* <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14.647"
+        height="16"
+        viewBox="0 0 14.647 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs> */}
+      <path
+        className="a"
+        d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
+        transform="translate(-2.9 -2)"
+      />
+      {/* </svg> */}
+    </SvgIcon>
+  );
+};
+
 export const CrossedEyeIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 15.931 12.145">
@@ -118,10 +223,15 @@
   );
 };
 
-export const SaltireIcon = (props: SvgIconProps) => {
+export const ExtensionIcon = (props: SvgIconProps) => {
   return (
-    <SvgIcon {...props} viewBox="5 5 14 14">
-      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <path
+        stroke="#ffffff"
+        strokeWidth="1.5"
+        fill="none"
+        d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
+      />
     </SvgIcon>
   );
 };
@@ -156,6 +266,42 @@
   );
 };
 
+export const FullscreenIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g>
+        <polygon points="2,9.4 3.8,9.4 3.8,3.8 9.7,3.8 9.7,2 2,2  " />
+        <polygon points="3.8,14.3 2,14.3 2,22 9.4,22 9.4,20.2 3.8,20.2  " />
+        <polygon points="20.2,20.2 14.3,20.2 14.3,22 22,22 22,14.6 20.2,14.6  " />
+        <polygon points="14.6,2 14.6,3.8 20.2,3.8 20.2,9.7 22,9.7 22,2  " />
+      </g>
+    </SvgIcon>
+  );
+};
+
+export const GroupAddIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <path
+        d="M16.1,11.3c1.1-0.7,1.8-2,1.8-3.3c0-2.2-1.8-4-4-4c-2.2,0-4,1.8-4,4c0,1.3,0.7,2.6,1.8,3.3c-0.6,0.3-1.2,0.6-1.8,1.1
+	c-0.3-0.3-0.6-0.5-1-0.7c0.6-0.6,1-1.4,1-2.3c0-1.8-1.4-3.2-3.2-3.2c-1.8,0-3.2,1.4-3.2,3.2c0,0.9,0.4,1.7,1,2.3
+	c-1.5,0.8-2.5,2.4-2.5,4.2c0,0.6,0.5,1.1,1.1,1.1h4.7c0,0.6,0.5,1.1,1.1,1.1h6.5l-0.3-0.2c-0.3-0.2-0.5-0.6-0.7-1l0-0.1H9.1
+	c0-0.3,0.1-0.7,0.1-1c0.1-0.6,0.4-1.1,0.7-1.6c0.2-0.3,0.4-0.6,0.7-0.8c0.9-0.8,2.1-1.3,3.3-1.3c1.1,0,2.1,0.4,3,1l0.1,0.1l0.1-0.1
+	c0.1-0.2,0.2-0.4,0.4-0.6c0.1-0.1,0.1-0.1,0.2-0.2l0.1-0.1l-0.1-0.1C17.2,11.8,16.6,11.5,16.1,11.3z M16.6,7.9
+	c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7C15.4,5.2,16.6,6.4,16.6,7.9z M6.6,11.3c-1.1,0-2-0.9-2-2
+	c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C8.6,10.4,7.7,11.3,6.6,11.3z M9,13.3c-0.5,0.7-0.9,1.5-1.1,2.4H3.2c0.1-1.8,1.6-3.3,3.4-3.3
+	C7.5,12.4,8.4,12.7,9,13.3z"
+      />
+      <path
+        d="M21.2,15.6l-1.7,0l0-1.7c0-0.4-0.3-0.7-0.7-0.7c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5l0,1.7l-1.7,0
+	c-0.2,0-0.4,0.1-0.5,0.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.4,0.3,0.7,0.7,0.7l1.7,0l0,1.7c0,0.4,0.3,0.7,0.7,0.7h0
+	c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5l0-1.7l1.7,0c0.2,0,0.4-0.1,0.5-0.2c0.1-0.1,0.2-0.3,0.2-0.5
+	C21.9,16,21.6,15.7,21.2,15.6z"
+      />
+    </SvgIcon>
+  );
+};
+
 export const InfoIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="2 2 20 20">
@@ -174,6 +320,54 @@
   );
 };
 
+export const MessageIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 14.554">
+      {/* <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="14.554"
+        viewBox="0 0 16 14.554"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs> */}
+      <g transform="translate(-3.7 -4.4)">
+        <g transform="translate(3.7 4.4)">
+          <g transform="translate(0 0)">
+            <path
+              className="a"
+              d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
+              transform="translate(-0.7 -0.4)"
+            />
+          </g>
+        </g>
+      </g>
+      {/* </svg> */}
+    </SvgIcon>
+  );
+};
+
+export const MicroIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g>
+        <path
+          d="M12,16.2c1.1,0,2.1-0.4,2.8-1.2c0.8-0.8,1.2-1.9,1.2-2.8V6c0-1.1-0.4-2.1-1.2-2.8C13.3,1.6,10.7,1.6,9,3C8.4,3.8,8,4.8,8,6
+          v6c0,1.1,0.4,2.1,1.2,2.8C9.9,15.8,10.9,16.2,12,16.2z M9.3,6c0-0.7,0.3-1.3,0.8-1.9c0.5-0.5,1.2-0.8,1.9-0.8s1.3,0.3,1.9,0.8
+          s0.8,1.1,0.8,1.9v6c0,0.7-0.3,1.3-0.8,1.9c-1.1,1.1-2.7,1.1-3.6,0c-0.5-0.5-0.9-1.1-0.9-1.9V6z"
+        />
+        <path
+          d="M18.7,8.8c-0.3-0.3-0.7-0.3-1.1,0c-0.1,0.1-0.3,0.3-0.3,0.5V12c0,3.1-2.4,5.5-5.5,5.5S6.5,15.1,6.5,12V9.2
+          c0-0.4-0.3-0.7-0.7-0.7l0,0c-0.1,0-0.4,0.1-0.5,0.3c-0.1,0-0.1,0.3-0.1,0.4V12c0,3.5,2.7,6.4,6.2,6.8v1.7H9.2
+          c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7h5.6c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-2.1v-1.7
+          c3.5-0.4,6.2-3.4,6.2-6.8V9.2C18.8,9.1,18.8,8.9,18.7,8.8z"
+        />
+      </g>
+    </SvgIcon>
+  );
+};
+
 export const MicroInBubbleIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 25 25">
@@ -236,6 +430,42 @@
   );
 };
 
+export const RecordingIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <path
+        d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20.3c-4.6,0-8.3-3.7-8.3-8.3S7.4,3.7,12,3.7
+	s8.3,3.7,8.3,8.3S16.6,20.3,12,20.3z"
+      />
+    </SvgIcon>
+  );
+};
+
+export const RemoveContactIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      {/* <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <defs>
+          <style>.a{"fill:#005699;"}</style>
+        </defs> */}
+      <g transform="translate(-2 -2)">
+        <g transform="translate(2 2)">
+          <path
+            className="a"
+            d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
+          />
+        </g>
+      </g>
+      {/* </svg> */}
+    </SvgIcon>
+  );
+};
+
 export const RoundCrossIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 16 16">
@@ -245,58 +475,65 @@
   );
 };
 
-export const MessageIcon = (props: SvgIconProps) => {
+export const RoundSaltireIcon = (props: SvgIconProps) => {
   return (
-    <SvgIcon {...props} viewBox="0 0 16 14.554">
-      {/* <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="14.554"
-        viewBox="0 0 16 14.554"
-      >
-        <defs>
-          <style>.a{"fill:#005699;"}</style>
-        </defs> */}
-      <g transform="translate(-3.7 -4.4)">
-        <g transform="translate(3.7 4.4)">
-          <g transform="translate(0 0)">
-            <path
-              className="a"
-              d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
-              transform="translate(-0.7 -0.4)"
-            />
-          </g>
-        </g>
-      </g>
-      {/* </svg> */}
+    <SvgIcon {...props} viewBox="0 0 16 16">
+      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
+      <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
     </SvgIcon>
   );
 };
 
-export const AudioCallIcon = (props: SvgIconProps) => {
+export const SaltireIcon = (props: SvgIconProps) => {
   return (
-    <SvgIcon {...props} viewBox="0 0 15.338 16">
-      {/* <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="15.338"
-        height="16"
-        viewBox="0 0 15.338 16"
-      >
-        <defs>
-          <style>.a{"fill:#005699;"}</style>
-        </defs> */}
-      <g transform="translate(-2.404 -1.956)">
-        <g transform="translate(2.404 1.956)">
-          <g transform="translate(0)">
-            <path
-              className="a"
-              d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
-              transform="translate(0.596 1.044)"
-            />
+    <SvgIcon {...props} viewBox="5 5 14 14">
+      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+    </SvgIcon>
+  );
+};
+
+export const ScreenShareIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g id="Icons_Outline">
+        <g id="Laptop_Black_24dp">
+          <g transform="translate(2.000000, 5.000000)">
+            <g id="Shape">
+              <path
+                d="M17.1,12.1H2.7c-0.5,0-0.9-0.2-1.2-0.5c-0.4-0.4-0.6-0.8-0.6-1.3v-9c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5h14.5
+                c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v9c0,0.5-0.2,0.9-0.5,1.2C18,11.8,17.6,12.1,17.1,12.1z M2.7,0.8
+                c-0.1,0-0.2,0.1-0.3,0.1c0,0.1-0.1,0.2-0.1,0.3v9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1h14.4c0.1,0,0.2-0.1,0.3-0.1
+                c0.1-0.1,0.1-0.2,0.1-0.3v-9c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17.1,0.8,2.7,0.8,2.7,0.8z"
+              />
+            </g>
+            <g id="Line-2">
+              <path d="M19.6,14.5H0.4c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h19.3c0.4,0,0.7,0.3,0.7,0.7S20,14.5,19.6,14.5z" />
+            </g>
           </g>
         </g>
       </g>
-      {/* </svg> */}
+    </SvgIcon>
+  );
+};
+
+export const TrashBinIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 15.44 16">
+      <path
+        d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z"
+        transform="translate(-2.4 -2)"
+      />
+    </SvgIcon>
+  );
+};
+
+export const TwoSheetsIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 15.68">
+      <path
+        d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z"
+        transform="translate(-2 -2.2)"
+      />
     </SvgIcon>
   );
 };
@@ -327,102 +564,41 @@
   );
 };
 
-export const ContactDetailsIcon = (props: SvgIconProps) => {
+export const VideoCameraIcon = (props: SvgIconProps) => {
   return (
-    <SvgIcon {...props} viewBox="0 0 14.647 16">
-      {/* <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="14.647"
-        height="16"
-        viewBox="0 0 14.647 16"
-      >
-        <defs>
-          <style>.a{"fill:#005699;"}</style>
-        </defs> */}
-      <path
-        className="a"
-        d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
-        transform="translate(-2.9 -2)"
-      />
-      {/* </svg> */}
-    </SvgIcon>
-  );
-};
-
-export const BlockContactIcon = (props: SvgIconProps) => {
-  return (
-    <SvgIcon {...props} viewBox="0 0 16 15.52">
-      {/* <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
-        <defs>
-          <style>.a{"fill:#005699;"}</style>
-        </defs> */}
-      <g transform="translate(-2 -2.3)">
-        <path
-          className="a"
-          d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
-          transform="translate(-1.96 -1.84)"
-        />
-        <path
-          className="a"
-          d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
-        />
-      </g>
-      {/* </svg> */}
-    </SvgIcon>
-  );
-};
-
-export const RemoveContactIcon = (props: SvgIconProps) => {
-  return (
-    <SvgIcon {...props} viewBox="0 0 16 16">
-      {/* <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-      >
-        <defs>
-          <style>.a{"fill:#005699;"}</style>
-        </defs> */}
-      <g transform="translate(-2 -2)">
-        <g transform="translate(2 2)">
-          <path
-            className="a"
-            d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
-          />
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g id="Icons_Outline" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinejoin="round">
+        <g id="Camera" fillRule="nonzero" stroke="#ffffff" strokeWidth="1.5">
+          <g id="Ico_Camera" transform="translate(3.000000, 5.000000)">
+            <path
+              d="M17.739656,2.05124654 C17.62808,1.97368421 17.4421199,1.93490305 17.1817759,2.0900277 L13.4997675,4.41689751 L13.4997675,1.15927978 C13.4997675,0.849030471 13.3138075,0.5 12.7187355,0.5 L0.929800093,0.5 C0.371920037,0.538781163 0,0.810249307 0,1.19806094 L0,13.8407202 C0,14.2285319 0.371920037,14.5 0.929800093,14.5 L12.7559275,14.5 C13.3138075,14.5 13.5369596,14.1509695 13.5369596,13.8407202 L13.5369596,10.5831025 L17.2189679,12.9487535 C17.4421199,13.1038781 17.62808,13.065097 17.739656,12.9875346 C18,12.83241 18,12.5221607 18,12.4058172 L18,2.63296399 C18,2.5166205 18,2.20637119 17.739656,2.05124654 Z"
+              id="Path"
+            ></path>
+          </g>
         </g>
       </g>
-      {/* </svg> */}
-    </SvgIcon>
-  );
-};
-export const RoundSaltireIcon = (props: SvgIconProps) => {
-  return (
-    <SvgIcon {...props} viewBox="0 0 16 16">
-      <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
-      <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
     </SvgIcon>
   );
 };
 
-export const TrashBinIcon = (props: SvgIconProps) => {
+export const VolumeIcon = (props: SvgIconProps) => {
   return (
-    <SvgIcon {...props} viewBox="0 0 15.44 16">
-      <path
-        d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z"
-        transform="translate(-2.4 -2)"
-      />
-    </SvgIcon>
-  );
-};
-
-export const TwoSheetsIcon = (props: SvgIconProps) => {
-  return (
-    <SvgIcon {...props} viewBox="0 0 16 15.68">
-      <path
-        d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z"
-        transform="translate(-2 -2.2)"
-      />
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <g>
+        <path
+          d="M14.6,4c-0.4-0.7-1.3-0.8-2-0.4L6.8,7.7H4.1C3,7.7,2,8.7,2,9.9v4.3c0,1.2,1,2.1,2.1,2.1h2.6l5.8,4.1
+		c0.2,0.2,0.5,0.2,0.8,0.2c0.8,0,1.4-0.6,1.5-1.4V4.8C14.9,4.5,14.8,4.2,14.6,4z M13.4,19.2L13.4,19.2l-5.7-4l-0.4-0.3h-1H6.1h-2
+		c-0.4,0-0.7-0.3-0.7-0.7V9.9c0-0.4,0.3-0.7,0.7-0.7H6h0.2h1l0.4-0.3l5.7-4L13.4,19.2L13.4,19.2z"
+        />
+        <path
+          d="M19.1,12c0,1.5-0.6,2.9-1.6,4c-0.3,0.3-0.7,0.3-1,0c-0.3-0.3-0.3-0.7,0-1c1.6-1.7,1.6-4.3,0-6c-0.3-0.3-0.3-0.7,0-1
+		c0.3-0.3,0.7-0.3,1,0C18.6,9.1,19.1,10.5,19.1,12z"
+        />
+        <path
+          d="M18.9,5.1c-0.3-0.3-0.7-0.2-1,0c-0.3,0.3-0.2,0.7,0,1c3.3,2.9,3.5,8,0.6,11.2c-0.2,0.2-0.4,0.4-0.6,0.6
+		c-0.3,0.3-0.3,0.7,0,1c0.3,0.3,0.7,0.3,1,0c3.8-3.5,4.1-9.4,0.7-13.2C19.4,5.5,19.1,5.3,18.9,5.1L18.9,5.1z"
+        />
+      </g>
     </SvgIcon>
   );
 };
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
new file mode 100644
index 0000000..61c90bb
--- /dev/null
+++ b/client/src/pages/CallInterface.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 { Box, Card, Grid, Stack, Typography } from '@mui/material';
+
+import {
+  CallingChatButton,
+  CallingEndButton,
+  CallingExtensionButton,
+  CallingFullscreenButton,
+  CallingGroupButton,
+  CallingMicButton,
+  CallingRecordButton,
+  CallingScreenShareButton,
+  CallingVideoCameraButton,
+  CallingVolumeButton,
+} from '../components/Button';
+
+export default function CallInterface() {
+  return (
+    <>
+      <Box sx={{ backgroundColor: 'blue', width: '100%', height: '100%', position: 'absolute' }}>
+        {/* Host video will be shown here */}
+      </Box>
+      <Stack
+        position="absolute"
+        direction="column"
+        spacing={1}
+        margin={2}
+        sx={{ left: 0, right: 0, top: 0, bottom: 0 }}
+      >
+        {/* Top panel with guest information */}
+        <Box>
+          <CallInterfaceInformation />
+        </Box>
+        {/* Guest video, with empty space to be moved around and stickied to walls */}
+        <Box height="100%">
+          <Box
+            sx={{
+              aspectRatio: '16/9',
+              position: 'absolute',
+              right: 0,
+              zIndex: 2,
+              backgroundColor: 'white',
+              borderRadius: '12px',
+              minWidth: '25%',
+              minHeight: '25%',
+              maxWidth: '50%',
+              maxHeight: '50%',
+            }}
+          />
+        </Box>
+        {/* Bottom panel with calling buttons */}
+        <Grid container justifyContent="space-between">
+          <Grid item xs />
+          <Grid item>
+            <CallInterfacePrimaryButtons />
+          </Grid>
+          <Grid item xs sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <CallInterfaceSecondaryButtons />
+          </Grid>
+        </Grid>
+      </Stack>
+    </>
+  );
+}
+
+const CallInterfaceInformation = () => {
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center">
+      <Typography color="white" component="p">
+        Alain Thérieur
+      </Typography>
+      <Typography color="white" component="p">
+        01:23
+      </Typography>
+    </Stack>
+  );
+};
+
+const CallInterfacePrimaryButtons = () => {
+  return (
+    <Card sx={{ backgroundColor: 'black', textAlign: 'center' }}>
+      <CallingMicButton />
+      <CallingEndButton />
+      <CallingVideoCameraButton />
+    </Card>
+  );
+};
+
+const CallInterfaceSecondaryButtons = () => {
+  return (
+    <Card style={{ backgroundColor: 'black' }}>
+      <CallingVolumeButton />
+      <CallingGroupButton />
+      <CallingChatButton />
+      <CallingScreenShareButton />
+      <CallingRecordButton />
+      <CallingExtensionButton />
+      <CallingFullscreenButton />
+    </Card>
+  );
+};