diff --git a/client/src/components/CallButtons.tsx b/client/src/components/CallButtons.tsx
index b77fd5a..db0f530 100644
--- a/client/src/components/CallButtons.tsx
+++ b/client/src/components/CallButtons.tsx
@@ -19,9 +19,8 @@
 import { IconButton, IconButtonProps, PaletteColor } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import { ChangeEvent, useContext, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { CallContext, CallStatus } from '../contexts/CallProvider';
+import { CallContext, CallStatus, VideoStatus } from '../contexts/CallProvider';
 import {
   ExpandableButton,
   ExpandableButtonProps,
@@ -33,7 +32,6 @@
   CallEndIcon,
   ChatBubbleIcon,
   ExtensionIcon,
-  FileIcon,
   FullScreenIcon,
   GroupAddIcon,
   MicroIcon,
@@ -43,12 +41,10 @@
   RecordingIcon,
   RoundCloseIcon,
   ScreenShareArrowIcon,
-  ScreenShareRegularIcon,
-  ScreenShareScreenAreaIcon,
+  ScreenShareStopIcon,
   VideoCameraIcon,
   VideoCameraOffIcon,
   VolumeIcon,
-  WindowIcon,
 } from './SvgIcon';
 
 const CallButton = styled((props: ExpandableButtonProps) => {
@@ -151,30 +147,22 @@
 };
 
 export const CallingScreenShareButton = (props: ExpandableButtonProps) => {
-  const { t } = useTranslation();
   return (
-    <CallButton
-      aria-label="screen share"
-      expandMenuOnClick
-      Icon={ScreenShareArrowIcon}
-      expandMenuOptions={[
-        {
-          description: t('share_screen'),
-          icon: <ScreenShareRegularIcon />,
-        },
-        {
-          description: t('share_window'),
-          icon: <WindowIcon />,
-        },
-        {
-          description: t('share_screen_area'),
-          icon: <ScreenShareScreenAreaIcon />,
-        },
-        {
-          description: t('share_file'),
-          icon: <FileIcon />,
-        },
-      ]}
+    <CallButton aria-label="screen share" expandMenuOnClick IconButtonComp={ToggleScreenShareIconButton} {...props} />
+  );
+};
+
+const ToggleScreenShareIconButton = (props: IconButtonProps) => {
+  const { videoStatus, updateVideoStatus } = useContext(CallContext);
+
+  return (
+    <ToggleIconButton
+      IconOff={ScreenShareArrowIcon}
+      IconOn={ScreenShareStopIcon}
+      selected={videoStatus === VideoStatus.ScreenShare}
+      toggle={() => {
+        updateVideoStatus((v) => (v !== VideoStatus.ScreenShare ? VideoStatus.ScreenShare : VideoStatus.Off));
+      }}
       {...props}
     />
   );
@@ -262,13 +250,15 @@
 };
 
 const ToggleVideoCameraIconButton = (props: IconButtonProps) => {
-  const { isVideoOn, setIsVideoOn } = useContext(CallContext);
+  const { videoStatus, updateVideoStatus } = useContext(CallContext);
   return (
     <ToggleIconButton
       IconOn={VideoCameraIcon}
       IconOff={VideoCameraOffIcon}
-      selected={isVideoOn}
-      toggle={() => setIsVideoOn((v) => !v)}
+      selected={videoStatus === VideoStatus.Camera}
+      toggle={() => {
+        updateVideoStatus((v) => (v !== VideoStatus.Camera ? VideoStatus.Camera : VideoStatus.Off));
+      }}
       {...props}
     />
   );
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index 8f83587..1ef5f9d 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -721,6 +721,40 @@
   );
 };
 
+export const ScreenShareStopIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 24 24">
+      <path id="Path" d="M12.6,8.9V7.8l2.6,2.2l-2.6,2.2V11c-3.4,0.1-4.2,2.6-4.2,2.6C8.5,9.6,11.7,9,12.6,8.9z" />
+      <g id="Icons_Outline">
+        <g id="Laptop_Black_24dp">
+          <g transform="translate(2.000000, 5.000000)">
+            <g id="Shape">
+              <path
+                d="M17,12H2.8c-0.5,0-0.9-0.2-1.2-0.5C1.2,11.1,1,10.7,1,10.2V1.3c0-0.5,0.2-0.9,0.5-1.2s0.8-0.5,1.2-0.5H17
+          c0.5,0,0.9,0.2,1.2,0.5c0.3,0.3,0.5,0.8,0.5,1.2v8.9c0,0.5-0.2,0.9-0.5,1.2S17.5,12,17,12z M2.8,0.9C2.7,0.9,2.6,1,2.5,1
+          c0,0.1-0.1,0.2-0.1,0.3v8.9c0,0.1,0,0.2,0.1,0.3c0,0,0.1,0.1,0.3,0.1H17c0.1,0,0.2-0.1,0.3-0.1c0.1-0.1,0.1-0.2,0.1-0.3V1.3
+          c0-0.1,0-0.2-0.1-0.3c0,0-0.1-0.1-0.3-0.1C17,0.9,2.8,0.9,2.8,0.9z"
+              />
+            </g>
+            <g id="Line-2">
+              <path d="M19.5,14.4h-19c-0.4,0-0.7-0.3-0.7-0.7S0.1,13,0.5,13h19c0.4,0,0.7,0.3,0.7,0.7S19.9,14.4,19.5,14.4z" />
+            </g>
+          </g>
+        </g>
+      </g>
+      <g>
+        <rect
+          x="2.9"
+          y="10.3"
+          transform="matrix(0.8327 -0.5537 0.5537 0.8327 -4.0847 8.3949)"
+          width="17.9"
+          height="1.4"
+        />
+      </g>
+    </SvgIcon>
+  );
+};
+
 export const TrashBinIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 15.44 16">