diff --git a/ts/components/session/calling/CallContainer.tsx b/ts/components/session/calling/CallContainer.tsx
index 625cf11f1..9041ada2b 100644
--- a/ts/components/session/calling/CallContainer.tsx
+++ b/ts/components/session/calling/CallContainer.tsx
@@ -16,6 +16,7 @@ import { openConversationWithMessages } from '../../../state/ducks/conversations
 import { SessionIconButton } from '../icon';
 import { animation, contextMenu, Item, Menu } from 'react-contexify';
 import { InputItem } from '../../../session/utils/CallManager';
+import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton';
 
 export const DraggableCallWindow = styled.div`
   position: absolute;
@@ -67,7 +68,7 @@ const InConvoCallWindowControls = styled.div`
   width: fit-content;
   padding: 10px;
   border-radius: 10px;
-  height: 45px;
+  height: 60px;
   margin-left: auto;
   margin-right: auto;
   left: 0;
@@ -75,11 +76,10 @@ const InConvoCallWindowControls = styled.div`
   transition: all 0.25s ease-in-out;
 
   display: flex;
-  background-color: white;
 
   align-items: center;
   justify-content: center;
-  opacity: 0.3;
+  opacity: 0;
   &:hover {
     opacity: 1;
   }
@@ -229,6 +229,7 @@ const AudioInputMenu = ({
   );
 };
 
+// tslint:disable-next-line: max-func-body-length
 export const InConversationCallContainer = () => {
   const ongoingCallProps = useSelector(getHasOngoingCallWith);
   const selectedConversationKey = useSelector(getSelectedConversationKey);
@@ -243,6 +244,9 @@ export const InConversationCallContainer = () => {
   const videoRefLocal = useRef<any>();
   const mountedState = useMountedState();
 
+  const [isVideoMuted, setVideoMuted] = useState(true);
+  const [isAudioMuted, setAudioMuted] = useState(false);
+
   const videoTriggerId = 'video-menu-trigger-id';
   const audioTriggerId = 'audio-menu-trigger-id';
 
@@ -280,6 +284,60 @@ export const InConversationCallContainer = () => {
     }
   };
 
+  const handleCameraToggle = async () => {
+    if (!currentConnectedCameras.length) {
+      ToastUtils.pushNoCameraFound();
+
+      return;
+    }
+    if (isVideoMuted) {
+      // select the first one
+      await CallManager.selectCameraByDeviceId(currentConnectedCameras[0].deviceId);
+    } else {
+      await CallManager.selectCameraByDeviceId(CallManager.INPUT_DISABLED_DEVICE_ID);
+    }
+
+    setVideoMuted(!isVideoMuted);
+  };
+
+  const handleMicrophoneToggle = async () => {
+    if (!currentConnectedAudioInputs.length) {
+      ToastUtils.pushNoAudioInputFound();
+
+      return;
+    }
+    if (isAudioMuted) {
+      // select the first one
+      await CallManager.selectAudioInputByDeviceId(currentConnectedAudioInputs[0].deviceId);
+    } else {
+      await CallManager.selectAudioInputByDeviceId(CallManager.INPUT_DISABLED_DEVICE_ID);
+    }
+
+    setAudioMuted(!isAudioMuted);
+  };
+
+  const showAudioInputMenu = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (currentConnectedAudioInputs.length === 0) {
+      ToastUtils.pushNoAudioInputFound();
+      return;
+    }
+    contextMenu.show({
+      id: audioTriggerId,
+      event: e,
+    });
+  };
+
+  const showVideoInputMenu = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (currentConnectedCameras.length === 0) {
+      ToastUtils.pushNoCameraFound();
+      return;
+    }
+    contextMenu.show({
+      id: videoTriggerId,
+      event: e,
+    });
+  };
+
   if (!hasOngoingCall || !ongoingCallProps || ongoingCallPubkey !== selectedConversationKey) {
     return null;
   }
@@ -296,43 +354,25 @@ export const InConversationCallContainer = () => {
 
         <InConvoCallWindowControls>
           <SessionIconButton
-            iconSize="huge2"
-            iconPadding="10px"
+            iconSize={60}
+            iconPadding="20px"
             iconType="hangup"
+            backgroundColor="var(--color-cell-background)"
+            borderRadius="50%"
             onClick={handleEndCall}
             iconColor="red"
           />
-          <SessionIconButton
-            iconSize="huge2"
-            iconPadding="10px"
-            iconType="videoCamera"
-            onClick={(e: React.MouseEvent<HTMLDivElement>) => {
-              if (currentConnectedCameras.length === 0) {
-                ToastUtils.pushNoCameraFound();
-                return;
-              }
-              contextMenu.show({
-                id: videoTriggerId,
-                event: e,
-              });
-            }}
-            iconColor="black"
+          <DropDownAndToggleButton
+            iconType="camera"
+            isMuted={isVideoMuted}
+            onMainButtonClick={handleCameraToggle}
+            onArrowClick={showVideoInputMenu}
           />
-          <SessionIconButton
-            iconSize="huge2"
-            iconPadding="10px"
-            iconType="microphoneFull"
-            iconColor="black"
-            onClick={(e: React.MouseEvent<HTMLDivElement>) => {
-              if (currentConnectedAudioInputs.length === 0) {
-                ToastUtils.pushNoAudioInputFound();
-                return;
-              }
-              contextMenu.show({
-                id: audioTriggerId,
-                event: e,
-              });
-            }}
+          <DropDownAndToggleButton
+            iconType="microphone"
+            isMuted={isAudioMuted}
+            onMainButtonClick={handleMicrophoneToggle}
+            onArrowClick={showAudioInputMenu}
           />
         </InConvoCallWindowControls>
         <VideoInputMenu triggerId={videoTriggerId} camerasList={currentConnectedCameras} />
diff --git a/ts/components/session/icon/DropDownAndToggleButton.tsx b/ts/components/session/icon/DropDownAndToggleButton.tsx
new file mode 100644
index 000000000..4b2fd87d7
--- /dev/null
+++ b/ts/components/session/icon/DropDownAndToggleButton.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import _ from 'lodash';
+import styled from 'styled-components';
+
+type SProps = {
+  onArrowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onMainButtonClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  isMuted?: boolean;
+  hidePopoverArrow?: boolean;
+  iconType: 'microphone' | 'camera';
+};
+
+const StyledRoundedButton = styled.div`
+  background-color: var(--color-cell-background);
+  color: var(--color-text);
+  border-radius: 50%;
+  box-shadow: var(--color-session-shadow);
+  cursor: pointer;
+
+  transition-duration: 0.25s;
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const StyledContainer = styled(StyledRoundedButton)`
+  width: 60px;
+  height: 60px;
+  margin: 10px;
+
+  opacity: 0.4;
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const StyledMainIcon = styled.div`
+  padding: 20px;
+`;
+
+const StyledArrowIcon = styled(StyledRoundedButton)`
+  width: 35%;
+  height: 35%;
+  position: relative;
+  top: -35%;
+  right: -65%;
+`;
+
+const CameraIcon = (
+  <svg viewBox="0 0 488.3 488.3" fill="currentColor">
+    <path d="M488.3,142.5v203.1c0,15.7-17,25.5-30.6,17.7l-84.6-48.8v13.9c0,41.8-33.9,75.7-75.7,75.7H75.7C33.9,404.1,0,370.2,0,328.4   V159.9c0-41.8,33.9-75.7,75.7-75.7h221.8c41.8,0,75.7,33.9,75.7,75.7v13.9l84.6-48.8C471.3,117,488.3,126.9,488.3,142.5Z" />
+  </svg>
+);
+
+const MicrophoneIcon = (
+  <svg viewBox="0 0 58 58" fill="currentColor">
+    <path d="M44,28c-0.552,0-1,0.447-1,1v6c0,7.72-6.28,14-14,14s-14-6.28-14-14v-6c0-0.553-0.448-1-1-1s-1,0.447-1,1v6c0,8.485,6.644,15.429,15,15.949V56h-5c-0.552,0-1,0.447-1,1s0.448,1,1,1h12c0.552,0,1-0.447,1-1s-0.448-1-1-1h-5v-5.051c8.356-0.52,15-7.465,15-15.949v-6C45,28.447,44.552,28,44,28zM29,46c6.065,0,11-4.935,11-11V11c0-6.065-4.935-11-11-11S18,4.935,18,11v24C18,41.065,22.935,46,29,46z" />
+  </svg>
+);
+
+export const DropDownAndToggleButton = (props: SProps) => {
+  const { iconType, hidePopoverArrow, onArrowClick, onMainButtonClick, isMuted } = props;
+  const arrowClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    onArrowClick(e);
+  };
+
+  const mainButtonClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    onMainButtonClick(e);
+  };
+  const iconToRender =
+    iconType === 'microphone' ? MicrophoneIcon : iconType === 'camera' ? CameraIcon : null;
+
+  return (
+    <StyledContainer>
+      <StyledMainIcon onClick={mainButtonClickHandler}>{iconToRender}</StyledMainIcon>
+      {!hidePopoverArrow && (
+        <StyledArrowIcon onClick={arrowClickHandler}>
+          <svg viewBox="-200 -200 640 640" fill="currentColor">
+            <path d="M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z" />
+          </svg>
+        </StyledArrowIcon>
+      )}
+    </StyledContainer>
+  );
+};
diff --git a/ts/session/utils/CallManager.ts b/ts/session/utils/CallManager.ts
index 13f3a4554..3db2fa7a5 100644
--- a/ts/session/utils/CallManager.ts
+++ b/ts/session/utils/CallManager.ts
@@ -51,7 +51,7 @@ const callCache = new Map<string, Array<SignalService.CallMessage>>();
 let peerConnection: RTCPeerConnection | null;
 let remoteStream: MediaStream | null;
 let mediaDevices: MediaStream | null;
-const INPUT_DISABLED_DEVICE_ID = 'off';
+export const INPUT_DISABLED_DEVICE_ID = 'off';
 
 let makingOffer = false;
 let ignoreOffer = false;
@@ -92,41 +92,37 @@ async function updateInputLists() {
   // Get the set of cameras connected
   const videoCameras = await getConnectedDevices('videoinput');
 
-  camerasList = [{ deviceId: INPUT_DISABLED_DEVICE_ID, label: 'Off' }].concat(
-    videoCameras.map(m => ({
-      deviceId: m.deviceId,
-      label: m.label,
-    }))
-  );
+  camerasList = videoCameras.map(m => ({
+    deviceId: m.deviceId,
+    label: m.label,
+  }));
 
   // Get the set of audio inputs connected
   const audiosInput = await getConnectedDevices('audioinput');
-  audioInputsList = [{ deviceId: INPUT_DISABLED_DEVICE_ID, label: 'Off' }].concat(
-    audiosInput.map(m => ({
-      deviceId: m.deviceId,
-      label: m.label,
-    }))
-  );
+  audioInputsList = audiosInput.map(m => ({
+    deviceId: m.deviceId,
+    label: m.label,
+  }));
 }
 
 export async function selectCameraByDeviceId(cameraDeviceId: string) {
-  if (camerasList.some(m => m.deviceId === cameraDeviceId)) {
+  if (cameraDeviceId === INPUT_DISABLED_DEVICE_ID) {
     selectedCameraId = cameraDeviceId;
 
-    if (selectedCameraId === INPUT_DISABLED_DEVICE_ID) {
-      const sender = peerConnection?.getSenders().find(s => {
-        return s.track?.kind === 'video';
-      });
-      if (sender?.track) {
-        sender.track.enabled = false;
-      }
-      return;
+    const sender = peerConnection?.getSenders().find(s => {
+      return s.track?.kind === 'video';
+    });
+    if (sender?.track) {
+      sender.track.enabled = false;
     }
+    return;
+  }
+  if (camerasList.some(m => m.deviceId === cameraDeviceId)) {
+    selectedCameraId = cameraDeviceId;
+
     const devicesConfig = {
       video: {
         deviceId: selectedCameraId ? { exact: selectedCameraId } : undefined,
-        // width: VIDEO_WIDTH,
-        // height: Math.floor(VIDEO_WIDTH * VIDEO_RATIO),
       },
     };
 
@@ -156,8 +152,20 @@ export async function selectCameraByDeviceId(cameraDeviceId: string) {
   }
 }
 export async function selectAudioInputByDeviceId(audioInputDeviceId: string) {
+  if (audioInputDeviceId === INPUT_DISABLED_DEVICE_ID) {
+    selectedAudioInputId = audioInputDeviceId;
+
+    const sender = peerConnection?.getSenders().find(s => {
+      return s.track?.kind === 'audio';
+    });
+    if (sender?.track) {
+      sender.track.enabled = false;
+    }
+    return;
+  }
   if (audioInputsList.some(m => m.deviceId === audioInputDeviceId)) {
     selectedAudioInputId = audioInputDeviceId;
+
     const devicesConfig = {
       audio: {
         deviceId: selectedAudioInputId ? { exact: selectedAudioInputId } : undefined,