diff --git a/client/src/MediaControl.tsx b/client/src/MediaControl.tsx
index 90baa3c..f646318 100644
--- a/client/src/MediaControl.tsx
+++ b/client/src/MediaControl.tsx
@@ -7,6 +7,7 @@ import Mic from "@mui/icons-material/Mic";
 import VideocamOff from "@mui/icons-material/VideocamOff";
 import Videocam from "@mui/icons-material/Videocam";
 import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { Session } from "./GlobalContext";
 import WebRTCStatus from "./WebRTCStatus";
@@ -1599,16 +1600,17 @@ const MediaControl: React.FC<MediaControlProps> = ({ isSelf, peer, className })
         >
           <Box className="Controls">
             {isSelf ? (
-              // onTouchStart={toggleMute}
-              <div onClick={toggleMute}>{muted ? <MicOff color={colorAudio} /> : <Mic color={colorAudio} />}</div>
+              <IconButton onClick={toggleMute} onTouchStart={toggleMute}>
+                {muted ? <MicOff color={colorAudio} /> : <Mic color={colorAudio} />}
+              </IconButton>
             ) : (
-              <div onClick={toggleMute}>
+              <IconButton onClick={toggleMute} onTouchStart={toggleMute}>
                 {muted ? <VolumeOff color={colorAudio} /> : <VolumeUp color={colorAudio} />}
-              </div>
+              </IconButton>
             )}
-            <div onClick={toggleVideo}>
+            <IconButton onClick={toggleVideo} onTouchStart={toggleVideo}>
               {videoOn ? <Videocam color={colorVideo} /> : <VideocamOff color={colorVideo} />}
-            </div>
+            </IconButton>
           </Box>
           {isValid ? (
             peer.attributes?.srcObject && (