diff --git a/frontend/src/components/BackgroundEffects/BackgroundGallery/BackgroundGallery.tsx b/frontend/src/components/BackgroundEffects/BackgroundGallery/BackgroundGallery.tsx
index 07a58732d..d71d75041 100644
--- a/frontend/src/components/BackgroundEffects/BackgroundGallery/BackgroundGallery.tsx
+++ b/frontend/src/components/BackgroundEffects/BackgroundGallery/BackgroundGallery.tsx
@@ -110,9 +110,7 @@ const BackgroundGallery = ({
                     cursor: isSelected ? 'default' : 'pointer',
                     backgroundColor: isSelected ? theme.colors.disabled : theme.colors.onBackground,
                     '&:hover': {
-                      backgroundColor: isSelected
-                        ? theme.colors.disabled
-                        : theme.colors.primaryHover,
+                      backgroundColor: isSelected ? theme.colors.disabled : theme.colors.background,
                     },
                   }}
                 >
diff --git a/frontend/src/components/DeviceAccessAlert/DeviceAccessAlert.tsx b/frontend/src/components/DeviceAccessAlert/DeviceAccessAlert.tsx
index c8d7e658e..3c194e2b0 100644
--- a/frontend/src/components/DeviceAccessAlert/DeviceAccessAlert.tsx
+++ b/frontend/src/components/DeviceAccessAlert/DeviceAccessAlert.tsx
@@ -1,8 +1,12 @@
-import { AlertTitle, Box, Dialog, Stack, Alert } from '@mui/material';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DEVICE_ACCESS_STATUS } from '../../utils/constants';
 import { isWebKit } from '../../utils/util';
+import Alert from '@ui/Alert';
+import Dialog from '@ui/Dialog';
+import Box from '@ui/Box';
+import Stack from '@ui/Stack';
+import AlertTitle from '@ui/AlertTitle';
 
 export type DeviceAccessAlertProps = {
   accessStatus: string | null;
diff --git a/frontend/src/components/HiddenParticipantsTile/HiddenParticipantsTile.tsx b/frontend/src/components/HiddenParticipantsTile/HiddenParticipantsTile.tsx
index c0864e731..2155d78fa 100644
--- a/frontend/src/components/HiddenParticipantsTile/HiddenParticipantsTile.tsx
+++ b/frontend/src/components/HiddenParticipantsTile/HiddenParticipantsTile.tsx
@@ -1,11 +1,13 @@
 import { ReactElement } from 'react';
-import { AvatarGroup } from '@mui/material';
 import { Box } from 'opentok-layout-js';
 import { SubscriberWrapper } from '@app-types/session';
 import getBoxStyle from '@utils/helpers/getBoxStyle';
 import useSessionContext from '@hooks/useSessionContext';
 import useShouldShowParticipantList from '@Context/AppConfig/hooks/useShouldShowParticipantList';
 import AvatarInitials from '../AvatarInitials';
+import AvatarGroup from '@ui/AvatarGroup';
+import ButtonBase from '@ui/ButtonBase';
+import useTheme from '@ui/theme';
 
 export type HiddenParticipantsTileProps = {
   box: Box;
@@ -28,24 +30,38 @@ const HiddenParticipantsTile = ({
   const { toggleParticipantList } = useSessionContext();
 
   const showParticipantList = useShouldShowParticipantList();
+  const theme = useTheme();
 
   const { height, width } = box;
   const diameter = Math.min(height, width) * 0.38;
   return (
-    <button
+    <ButtonBase
       id="hidden-participants"
       data-testid="hidden-participants"
-      className={`absolute m-1 flex items-center justify-center rounded-xl bg-notVeryGray-100 transition-colors ${
-        showParticipantList ? 'cursor-pointer hover:bg-[rgb(76,80,82)]' : 'cursor-default'
-      }`}
-      style={getBoxStyle(box)}
+      sx={{
+        position: 'absolute',
+        margin: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 3,
+        backgroundColor: theme.colors.darkGrey,
+        transition: 'background-color 150ms',
+        cursor: showParticipantList ? 'pointer' : 'default',
+        ...(showParticipantList && {
+          '&:hover': {
+            backgroundColor: theme.colors.darkGreyHover,
+          },
+        }),
+        ...getBoxStyle(box),
+      }}
       onClick={showParticipantList ? toggleParticipantList : () => {}}
       type="button"
     >
       <AvatarGroup
         total={hiddenSubscribers.length}
-        className="border-none"
         sx={{
+          border: 'none',
           '& .MuiAvatar-root': {
             transitionDuration: '150ms',
             height: `${diameter}px`,
@@ -61,7 +77,7 @@ const HiddenParticipantsTile = ({
           return <AvatarInitials key={streamId} initials={initials} username={name} sx={sx} />;
         })}
       </AvatarGroup>
-    </button>
+    </ButtonBase>
   );
 };
 
diff --git a/frontend/src/components/Icons/PushPinOffIcon/PushPinOffIcon.tsx b/frontend/src/components/Icons/PushPinOffIcon/PushPinOffIcon.tsx
index a82d2bc38..3a1a4e23b 100644
--- a/frontend/src/components/Icons/PushPinOffIcon/PushPinOffIcon.tsx
+++ b/frontend/src/components/Icons/PushPinOffIcon/PushPinOffIcon.tsx
@@ -1,4 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import { SvgIconProps } from '@ui/SvgIconProps';
+import SvgIcon from '@ui/SvgIcon';
 import { ReactElement } from 'react';
 
 /**
diff --git a/frontend/src/components/MeetingRoom/ArchivingButton/ArchivingButton.tsx b/frontend/src/components/MeetingRoom/ArchivingButton/ArchivingButton.tsx
index 82d4e391e..617950455 100644
--- a/frontend/src/components/MeetingRoom/ArchivingButton/ArchivingButton.tsx
+++ b/frontend/src/components/MeetingRoom/ArchivingButton/ArchivingButton.tsx
@@ -1,5 +1,3 @@
-import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
-import { Tooltip } from '@mui/material';
 import { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useRoomName from '@hooks/useRoomName';
@@ -8,6 +6,9 @@ import useSessionContext from '@hooks/useSessionContext';
 import useAppConfig from '@Context/AppConfig/hooks/useAppConfig';
 import ToolbarButton from '../ToolbarButton';
 import PopupDialog, { DialogTexts } from '../PopupDialog';
+import Tooltip from '@ui/Tooltip';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 export type ArchivingButtonProps = {
   isOverflowButton?: boolean;
@@ -31,6 +32,7 @@ const ArchivingButton = ({
 }: ArchivingButtonProps): ReactElement | false => {
   const { t } = useTranslation();
   const roomName = useRoomName();
+  const theme = useTheme();
   const { archiveId } = useSessionContext();
   const allowArchiving = useAppConfig(
     ({ meetingRoomSettings }) => meetingRoomSettings.allowArchiving
@@ -94,8 +96,10 @@ const ArchivingButton = ({
             onClick={handleButtonClick}
             data-testid="archiving-button"
             icon={
-              <RadioButtonCheckedIcon
-                style={{ color: `${isRecording ? 'rgb(239 68 68)' : 'white'}` }}
+              <VividIcon
+                name="radio-checked-2-solid"
+                customSize={-5}
+                style={{ color: `${isRecording ? theme.colors.error : theme.colors.onSecondary}` }}
               />
             }
             sx={{
diff --git a/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.spec.tsx b/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.spec.tsx
index 032d9d176..91934e66a 100644
--- a/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.spec.tsx
+++ b/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.spec.tsx
@@ -35,13 +35,13 @@ describe('AudioIndicator', () => {
 
   it('renders Mic icon when participant is unmuted but not speaking', () => {
     render(<AudioIndicator {...defaultProps} />);
-    const micIcon = screen.getByTestId('MicIcon');
+    const micIcon = screen.getByTestId('vivid-icon-microphone-2-solid');
     expect(micIcon).toBeInTheDocument();
   });
 
   it('renders Mic off icon when participant is muted', () => {
     render(<AudioIndicator {...defaultProps} hasAudio={false} />);
-    const micOffIcon = screen.getByTestId('MicOffIcon');
+    const micOffIcon = screen.getByTestId('vivid-icon-mic-mute-solid');
     expect(micOffIcon).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.tsx b/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.tsx
index e95b629f6..331ace432 100644
--- a/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.tsx
+++ b/frontend/src/components/MeetingRoom/AudioIndicator/AudioIndicator.tsx
@@ -1,16 +1,17 @@
-import { MicOff, Mic } from '@mui/icons-material';
 import { ReactElement, useState } from 'react';
 import { Stream } from '@vonage/client-sdk-video';
-import Tooltip from '@mui/material/Tooltip';
-import { IconButton } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import PopupDialog, { DialogTexts } from '../PopupDialog';
 import VoiceIndicatorIcon from '../VoiceIndicator/VoiceIndicator';
 import useSessionContext from '../../../hooks/useSessionContext';
+import IconButton from '@ui/IconButton';
+import Tooltip from '@ui/Tooltip';
+import VividIcon from '@components/VividIcon';
+import Box from '@ui/Box';
 
 export type AudioIndicatorProps = {
   hasAudio: boolean | undefined;
-  indicatorStyle?: string;
+  indicatorStyle?: React.CSSProperties;
   indicatorColor?: string;
   stream?: Stream;
   audioLevel?: number;
@@ -23,7 +24,7 @@ export type AudioIndicatorProps = {
  * This component displays an icon based on the audio status and handles muting another user.
  * @param {AudioIndicatorProps} hasAudio - Indicates whether the user has audio enabled.
  *  @property {boolean | undefined} audioLevel - (optional) Indicates the current audio level of the video tile.
- *  @property {string} indicatorStyle - (optional) The styling props for the component.
+ *  @property {React.CSSProperties} indicatorStyle - (optional) The MUI sx styling props for the component.
  *  @property {string} indicatorColor - (optional) The color of the audio indicator button.
  *  @property {Stream} stream - (optional) the stream that can be used to force mute a user.
  *  @property {string} participantName - (optional) the name of the participant that can be muted.
@@ -62,7 +63,6 @@ const AudioIndicator = ({
   };
 
   const sxProperties = {
-    fontSize: '18px',
     color: indicatorColor,
     cursor: hasAudio ? 'pointer' : 'default',
   };
@@ -72,7 +72,7 @@ const AudioIndicator = ({
   }
 
   return (
-    <div className={indicatorStyle} data-testid="audio-indicator">
+    <Box style={indicatorStyle} data-testid="audio-indicator">
       <Tooltip title={hasAudio ? t('participants.mute.tooltip', { participantName }) : ''}>
         <IconButton
           disableRipple={!hasAudio}
@@ -85,7 +85,11 @@ const AudioIndicator = ({
           }}
           onClick={hasAudio ? handleClick : undefined}
         >
-          {hasAudio ? <Mic sx={sxProperties} /> : <MicOff sx={sxProperties} />}
+          {hasAudio ? (
+            <VividIcon customSize={-6} name="microphone-2-solid" sx={sxProperties} />
+          ) : (
+            <VividIcon customSize={-6} name="mic-mute-solid" sx={sxProperties} />
+          )}
         </IconButton>
       </Tooltip>
       <PopupDialog
@@ -94,7 +98,7 @@ const AudioIndicator = ({
         handleActionClick={handleActionClick}
         actionText={muteParticipantText}
       />
-    </div>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/CaptionsBox.tsx b/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/CaptionsBox.tsx
index 3907cdd4f..0ac211b6d 100644
--- a/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/CaptionsBox.tsx
+++ b/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/CaptionsBox.tsx
@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
-import { Box } from '@mui/material';
+import Box from '@ui/Box';
 import UserCaption from './UserCaption';
 import useSessionContext from '../../../../hooks/useSessionContext';
 import useIsSmallViewport from '../../../../hooks/useIsSmallViewport';
+import useTheme from '@ui/theme';
 
 /**
  * CaptionsBox Component
@@ -13,14 +14,15 @@ import useIsSmallViewport from '../../../../hooks/useIsSmallViewport';
 const CaptionsBox = (): ReactElement => {
   const { subscriberWrappers, ownCaptions } = useSessionContext();
   const isSmallViewPort = useIsSmallViewport();
+  const theme = useTheme();
 
   const sxBox = {
     position: 'absolute',
     bottom: isSmallViewPort ? 100 : 80,
     left: '50%',
     transform: 'translateX(-50%)',
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    color: 'white',
+    backgroundColor: theme.colors.darkGreyOpacity,
+    color: theme.colors.onDarkGrey,
     px: 2,
     py: isSmallViewPort ? 1 : 1.5,
     borderRadius: 2,
diff --git a/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/UserCaption/UserCaption.tsx b/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/UserCaption/UserCaption.tsx
index 16f21fea8..bc4b0d7ec 100644
--- a/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/UserCaption/UserCaption.tsx
+++ b/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsBox/UserCaption/UserCaption.tsx
@@ -1,9 +1,10 @@
 import { Subscriber } from '@vonage/client-sdk-video';
 import { ReactElement, useState, useRef, useEffect } from 'react';
-import { Typography } from '@mui/material';
+import Typography from '@ui/Typography';
 import { useTranslation } from 'react-i18next';
 import useReceivingCaptions from '../../../../../hooks/useReceivingCaptions';
 import { CAPTION_DISPLAY_DURATION_MS } from '../../../../../utils/constants';
+import useTheme from '@ui/theme';
 
 export type UserCaptionProps = {
   subscriber: Subscriber | null;
@@ -28,6 +29,7 @@ const UserCaption = ({
   const { caption: captionText, isReceivingCaptions } = useReceivingCaptions({
     subscriber,
   });
+  const theme = useTheme();
 
   const displayCaption = caption ?? captionText;
   const isActive = Boolean(caption ?? isReceivingCaptions);
@@ -71,7 +73,7 @@ const UserCaption = ({
           wordBreak: 'break-word',
           lineHeight: 1.4,
           textAlign: 'left',
-          color: 'white',
+          color: theme.colors.onDarkGrey,
           fontSize: isSmallViewPort ? '1rem' : '1.25rem',
         }}
       >
diff --git a/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsButton.tsx b/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsButton.tsx
index eefe07edf..9f783a6bf 100644
--- a/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsButton.tsx
+++ b/frontend/src/components/MeetingRoom/CaptionsButton/CaptionsButton.tsx
@@ -1,5 +1,3 @@
-import { ClosedCaption, ClosedCaptionDisabled } from '@mui/icons-material';
-import { Tooltip } from '@mui/material';
 import { Dispatch, ReactElement, useState, SetStateAction } from 'react';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +5,9 @@ import useIsMeetingCaptionsAllowed from '@Context/AppConfig/hooks/useIsMeetingCa
 import { disableCaptions, enableCaptions } from '@api/captions';
 import useRoomName from '@hooks/useRoomName';
 import ToolbarButton from '../ToolbarButton';
+import Tooltip from '@ui/Tooltip';
+import VividIcon from '@components/VividIcon';
+import useTheme from '@ui/theme';
 
 export type CaptionsState = {
   isUserCaptionsEnabled: boolean;
@@ -43,6 +44,7 @@ const CaptionsButton = ({
   const { isUserCaptionsEnabled, setIsUserCaptionsEnabled, setCaptionsErrorResponse } =
     captionsState;
   const title = isUserCaptionsEnabled ? t('captions.disable') : t('captions.enable');
+  const theme = useTheme();
 
   const handleClose = () => {
     if (isOverflowButton && handleClick) {
@@ -105,12 +107,16 @@ const CaptionsButton = ({
           data-testid="captions-button"
           icon={
             !isUserCaptionsEnabled ? (
-              <ClosedCaption style={{ color: 'white' }} />
+              <VividIcon
+                name="closed-captioning-solid"
+                customSize={-5}
+                sx={{ color: theme.colors.onSecondary }}
+              />
             ) : (
-              <ClosedCaptionDisabled
-                style={{
-                  color: 'rgb(239 68 68)',
-                }}
+              <VividIcon
+                name="closed-captioning-off-solid"
+                customSize={-5}
+                sx={{ color: theme.colors.error }}
               />
             )
           }
diff --git a/frontend/src/components/MeetingRoom/CaptionsError/CaptionsError.tsx b/frontend/src/components/MeetingRoom/CaptionsError/CaptionsError.tsx
index 9600b6cf0..6a787c2d7 100644
--- a/frontend/src/components/MeetingRoom/CaptionsError/CaptionsError.tsx
+++ b/frontend/src/components/MeetingRoom/CaptionsError/CaptionsError.tsx
@@ -1,8 +1,9 @@
-import { Snackbar, Alert } from '@mui/material';
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CAPTION_ERROR_DISPLAY_DURATION_MS } from '../../../utils/constants';
 import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
+import Snackbar from '@ui/Snackbar';
+import Alert from '@ui/Alert';
 
 export type CaptionsErrorProps = {
   captionsErrorResponse: string | null;
diff --git a/frontend/src/components/MeetingRoom/Chat/Chat.tsx b/frontend/src/components/MeetingRoom/Chat/Chat.tsx
index bde5dd1e7..e16596849 100644
--- a/frontend/src/components/MeetingRoom/Chat/Chat.tsx
+++ b/frontend/src/components/MeetingRoom/Chat/Chat.tsx
@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import { List } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import getInitials from '../../../utils/getInitials';
 import getParticipantColor from '../../../utils/getParticipantColor';
@@ -7,6 +6,8 @@ import ChatMessage from '../ChatMessage';
 import ChatInput from '../ChatInput';
 import useSessionContext from '../../../hooks/useSessionContext';
 import RightPanelTitle from '../RightPanel/RightPanelTitle';
+import List from '@ui/List';
+import Box from '@ui/Box';
 
 export type ChatProps = {
   handleClose: () => void;
@@ -24,13 +25,19 @@ export type ChatProps = {
 const Chat = ({ handleClose, isOpen }: ChatProps): ReactElement | false => {
   const { t } = useTranslation();
   const { messages } = useSessionContext();
-  const heightClass = '@apply h-[calc(100dvh_-_240px)]';
 
   return (
     isOpen && (
       <>
         <RightPanelTitle title={t('chat.title')} handleClose={handleClose} />
-        <div className={`flex flex-col-reverse overflow-y-auto ${heightClass}`}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column-reverse',
+            overflowY: 'auto',
+            height: 'calc(100dvh - 240px)',
+          }}
+        >
           <List>
             {messages.map((msg) => {
               return (
@@ -45,10 +52,18 @@ const Chat = ({ handleClose, isOpen }: ChatProps): ReactElement | false => {
               );
             })}
           </List>
-        </div>
-        <div className="absolute inset-x-0 bottom-0 flex">
+        </Box>
+        <Box
+          sx={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+          }}
+        >
           <ChatInput />
-        </div>
+        </Box>
       </>
     )
   );
diff --git a/frontend/src/components/MeetingRoom/ChatButton/ChatButton.spec.tsx b/frontend/src/components/MeetingRoom/ChatButton/ChatButton.spec.tsx
index bef14563e..72dcfde22 100644
--- a/frontend/src/components/MeetingRoom/ChatButton/ChatButton.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ChatButton/ChatButton.spec.tsx
@@ -39,12 +39,12 @@ describe('ChatButton', () => {
 
   it('should have a white icon when the list is closed', () => {
     render(<ChatButton handleClick={() => {}} isOpen={false} />);
-    expect(screen.getByTestId('ChatIcon')).toHaveStyle('color: rgb(255, 255, 255)');
+    expect(screen.getByTestId('vivid-icon-chat-solid')).toHaveStyle('color: rgb(255, 255, 255)');
   });
 
   it('should have a blue icon when the chat is open', () => {
     render(<ChatButton handleClick={() => {}} isOpen />);
-    expect(screen.getByTestId('ChatIcon')).toHaveStyle('color: rgb(130, 177, 255)');
+    expect(screen.getByTestId('vivid-icon-chat-solid')).toHaveStyle('color: rgb(0, 0, 0)');
   });
 
   it('should invoke callback on click', () => {
diff --git a/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx b/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx
index 4ad0f30de..75ef796ca 100644
--- a/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx
+++ b/frontend/src/components/MeetingRoom/ChatButton/ChatButton.tsx
@@ -1,11 +1,11 @@
-import ChatIcon from '@mui/icons-material/Chat';
-import Tooltip from '@mui/material/Tooltip';
-import { blue } from '@mui/material/colors';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import useIsMeetingChatAllowed from '@Context/AppConfig/hooks/useIsMeetingChatAllowed';
 import ToolbarButton from '../ToolbarButton';
 import UnreadMessagesBadge from '../UnreadMessagesBadge';
+import Tooltip from '@ui/Tooltip';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 export type ChatButtonProps = {
   handleClick: () => void;
@@ -30,8 +30,9 @@ const ChatButton = ({
   isOverflowButton = false,
 }: ChatButtonProps): ReactElement | false => {
   const isMeetingChatAllowed = useIsMeetingChatAllowed();
-
+  const theme = useTheme();
   const { t } = useTranslation();
+
   return (
     isMeetingChatAllowed && (
       <Tooltip title={isOpen ? t('chat.close') : t('chat.open')} aria-label={t('chat.ariaLabel')}>
@@ -43,7 +44,13 @@ const ChatButton = ({
               marginRight: '0px',
             }}
             onClick={handleClick}
-            icon={<ChatIcon sx={{ color: isOpen ? blue.A100 : 'white' }} />}
+            icon={
+              <VividIcon
+                customSize={-5}
+                name="chat-solid"
+                sx={{ color: isOpen ? theme.colors.secondary : theme.colors.onSecondary }}
+              />
+            }
             isOverflowButton={isOverflowButton}
           />
         </UnreadMessagesBadge>
diff --git a/frontend/src/components/MeetingRoom/ChatInput/ChatInput.tsx b/frontend/src/components/MeetingRoom/ChatInput/ChatInput.tsx
index cb811c861..c5d5204ed 100644
--- a/frontend/src/components/MeetingRoom/ChatInput/ChatInput.tsx
+++ b/frontend/src/components/MeetingRoom/ChatInput/ChatInput.tsx
@@ -1,10 +1,11 @@
-import TextField from '@mui/material/TextField';
-import SendIcon from '@mui/icons-material/Send';
-import { IconButton, InputAdornment } from '@mui/material';
 import { KeyboardEvent, ReactElement, useState } from 'react';
-import { blue } from '@mui/material/colors';
 import { useTranslation } from 'react-i18next';
 import useSessionContext from '../../../hooks/useSessionContext';
+import IconButton from '@ui/IconButton';
+import InputAdornment from '@ui/InputAdornment';
+import TextField from '@ui/TextField';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 /**
  * ChatInput component
@@ -15,6 +16,7 @@ import useSessionContext from '../../../hooks/useSessionContext';
  */
 const ChatInput = (): ReactElement => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const [text, setText] = useState('');
   const [isComposing, setIsComposing] = useState(false);
   const { sendChatMessage } = useSessionContext();
@@ -63,8 +65,8 @@ const ChatInput = (): ReactElement => {
       sx={{
         margin: '16px',
         minHeight: '48px',
-        borderRadius: '25px',
-        backgroundColor: '#F1F3F4',
+        borderRadius: theme.shapes.borderRadiusExtraLarge,
+        backgroundColor: theme.colors.background,
         flexDirection: 'row',
         '&.MuiTextField-root': {
           paddingLeft: '24px',
@@ -73,8 +75,12 @@ const ChatInput = (): ReactElement => {
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">
-            <IconButton sx={{ height: '40x' }} onClick={handleSendMessage}>
-              <SendIcon sx={{ color: text !== '' ? blue.A100 : '#B2B4B6' }} />
+            <IconButton sx={{ height: '40px' }} onClick={handleSendMessage}>
+              <VividIcon
+                name="message-sent-solid"
+                customSize={-5}
+                sx={{ color: text === '' ? theme.colors.disabled : theme.colors.primary }}
+              />
             </IconButton>
           </InputAdornment>
         ),
diff --git a/frontend/src/components/MeetingRoom/ChatMessage/ChatMessage.tsx b/frontend/src/components/MeetingRoom/ChatMessage/ChatMessage.tsx
index bc72c07d2..89caae126 100644
--- a/frontend/src/components/MeetingRoom/ChatMessage/ChatMessage.tsx
+++ b/frontend/src/components/MeetingRoom/ChatMessage/ChatMessage.tsx
@@ -1,8 +1,12 @@
-import { Avatar, ListItem, ListItemText, Typography } from '@mui/material';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getFormattedTime } from '../../../utils/dateTime';
 import FormattedMessageBody from '../FormattedMessageBody';
+import ListItem from '@ui/ListItem';
+import ListItemText from '@ui/ListItemText';
+import Avatar from '@ui/Avatar';
+import Typography from '@ui/Typography';
+import useTheme from '@ui/theme';
 
 export type ChatMessageProps = {
   avatarColor: string;
@@ -32,6 +36,8 @@ const ChatMessage = ({
   timestamp,
 }: ChatMessageProps): ReactElement => {
   const { i18n } = useTranslation();
+  const theme = useTheme();
+
   return (
     <ListItem alignItems="flex-start" data-testid="chat-message">
       <Avatar
@@ -52,7 +58,7 @@ const ChatMessage = ({
             <Typography
               component="span"
               variant="body2"
-              sx={{ color: 'text.primary', display: 'inline' }}
+              sx={{ color: theme.colors.textSecondary, display: 'inline' }}
               data-testid="chat-msg-participant-name"
             >
               {name}
@@ -60,7 +66,7 @@ const ChatMessage = ({
             <Typography
               component="span"
               variant="body2"
-              sx={{ paddingLeft: '8px', color: 'text.secondary', display: 'inline' }}
+              sx={{ paddingLeft: '8px', color: theme.colors.textSecondary, display: 'inline' }}
               data-testid="chat-msg-timestamp"
             >
               {getFormattedTime(i18n.language, timestamp)}
@@ -68,7 +74,10 @@ const ChatMessage = ({
           </>
         }
         secondary={
-          <Typography variant="body2" sx={{ color: 'text.secondary', overflowWrap: 'break-word' }}>
+          <Typography
+            variant="body2"
+            sx={{ color: theme.colors.textSecondary, overflowWrap: 'break-word' }}
+          >
             <FormattedMessageBody message={message} />
           </Typography>
         }
diff --git a/frontend/src/components/MeetingRoom/ConnectionAlert/ConnectionAlert.tsx b/frontend/src/components/MeetingRoom/ConnectionAlert/ConnectionAlert.tsx
index ceee5de84..b7bc393c0 100644
--- a/frontend/src/components/MeetingRoom/ConnectionAlert/ConnectionAlert.tsx
+++ b/frontend/src/components/MeetingRoom/ConnectionAlert/ConnectionAlert.tsx
@@ -1,4 +1,6 @@
-import { Alert, AlertTitle, SxProps } from '@mui/material';
+import Alert from '@ui/Alert';
+import AlertTitle from '@ui/AlertTitle';
+import { SxProps } from '@ui/SxProps';
 import { ReactElement, useState } from 'react';
 import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
 
@@ -44,7 +46,7 @@ const ConnectionAlert = ({
       <Alert
         severity={severity}
         variant="standard"
-        color="error"
+        color={severity}
         {...(closable
           ? {
               onClose: () => {
diff --git a/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.spec.tsx b/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.spec.tsx
index 150a33a4c..3f85727e4 100644
--- a/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.spec.tsx
+++ b/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.spec.tsx
@@ -125,7 +125,7 @@ describe('DeviceControlButton', () => {
       expect(micButton).toBeInTheDocument();
       expect(micButton).not.toBeDisabled();
 
-      expect(screen.getByTestId('ArrowDropUpIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('vivid-icon-chevron-up-line')).toBeInTheDocument();
     });
 
     it('renders the button as disabled with greyed out icon and correct tooltip when allowMicrophoneControl is false', async () => {
@@ -172,7 +172,7 @@ describe('DeviceControlButton', () => {
       expect(videoButton).toBeInTheDocument();
       expect(videoButton).not.toBeDisabled();
 
-      expect(screen.getByTestId('ArrowDropUpIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('vivid-icon-chevron-up-line')).toBeInTheDocument();
     });
 
     it('renders the button as disabled with greyed out icon and correct tooltip when allowCameraControl is false', async () => {
diff --git a/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx b/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx
index d0934c816..7b936802c 100644
--- a/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx
+++ b/frontend/src/components/MeetingRoom/DeviceControlButton/DeviceControlButton.tsx
@@ -1,10 +1,3 @@
-import Mic from '@mui/icons-material/MicNone';
-import { IconButton } from '@mui/material';
-import VideocamIcon from '@mui/icons-material/Videocam';
-import VideocamOffIcon from '@mui/icons-material/VideocamOff';
-import Tooltip from '@mui/material/Tooltip';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import { MicOff, ArrowDropUp, ArrowDropDown } from '@mui/icons-material';
 import { useState, useRef, useCallback, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import useIsMicrophoneControlAllowed from '@Context/AppConfig/hooks/useIsMicrophoneControlAllowed';
@@ -15,6 +8,11 @@ import getControlButtonTooltip from '@utils/getControlButtonTooltip';
 import useTheme from '@ui/theme';
 import DeviceSettingsMenu from '../DeviceSettingsMenu';
 import MutedAlert from '../../MutedAlert';
+import ButtonGroup from '@ui/ButtonGroup';
+import IconButton from '@ui/IconButton';
+import Tooltip from '@ui/Tooltip';
+import VividIcon from '@components/VividIcon';
+import Box from '@ui/Box';
 
 export type DeviceControlButtonProps = {
   deviceType: 'audio' | 'video';
@@ -71,21 +69,42 @@ const DeviceControlButton = ({
   const renderControlIcon = () => {
     if (isAudio) {
       if (!isMicrophoneControlAllowed) {
-        return <Mic className="text-gray-400" />;
+        return (
+          <VividIcon
+            name="microphone-2-solid"
+            customSize={-6}
+            sx={{ color: theme.colors.disabled }}
+          />
+        );
       }
       if (isAudioEnabled) {
-        return <Mic className="text-white" />;
+        return (
+          <VividIcon
+            name="microphone-2-solid"
+            customSize={-6}
+            sx={{ color: theme.colors.onDarkGrey }}
+          />
+        );
       }
-      return <MicOff data-testid="MicOffToolbar" className="text-red-600" />;
+      return (
+        <VividIcon
+          name="mic-mute-solid"
+          customSize={-6}
+          data-testid="MicOffToolbar"
+          sx={{ color: theme.colors.error }}
+        />
+      );
     }
 
     if (!isCameraControlAllowed) {
-      return <VideocamIcon className="text-gray-400" />;
+      return <VividIcon name="video-solid" customSize={-6} sx={{ color: theme.colors.disabled }} />;
     }
     if (isVideoEnabled) {
-      return <VideocamIcon className="text-white" />;
+      return (
+        <VividIcon name="video-solid" customSize={-6} sx={{ color: theme.colors.onDarkGrey }} />
+      );
     }
-    return <VideocamOffIcon className="text-red-500" />;
+    return <VividIcon name="video-off-solid" customSize={-6} sx={{ color: theme.colors.error }} />;
   };
 
   const handleDeviceStateChange = () => {
@@ -101,9 +120,13 @@ const DeviceControlButton = ({
     <>
       {isAudio && <MutedAlert />}
       <ButtonGroup
-        className="mr-3 mt-1 bg-notVeryGray-55"
         disableElevation
-        sx={{ borderRadius: '30px' }}
+        sx={{
+          mr: 2,
+          mt: 0.25,
+          backgroundColor: theme.colors.darkGrey,
+          borderRadius: '30px',
+        }}
         variant="contained"
         ref={anchorRef}
         aria-label={t('devices.buttons.ariaLabel')}
@@ -115,18 +138,26 @@ const DeviceControlButton = ({
           aria-label={isAudio ? t('devices.audio.ariaLabel') : t('devices.video.ariaLabel')}
           aria-haspopup="menu"
           onClick={handleToggle}
-          className="size-12"
+          sx={{ width: 48, height: 48 }}
           data-testid={isAudio ? 'audio-dropdown-button' : 'video-dropdown-button'}
         >
           {open ? (
-            <ArrowDropDown sx={{ color: theme.colors.background }} />
+            <VividIcon
+              name="chevron-down-line"
+              customSize={-6}
+              sx={{ color: theme.colors.onDarkGrey }}
+            />
           ) : (
-            <ArrowDropUp className="text-gray-400" />
+            <VividIcon
+              name="chevron-up-line"
+              customSize={-6}
+              sx={{ color: theme.colors.onDarkGrey }}
+            />
           )}
         </IconButton>
         <Tooltip title={tooltipTitle} aria-label={t('devices.settings.ariaLabel')}>
-          <div>
-            {/* We add the div here so that the tooltip is present if the button is disabled */}
+          <Box>
+            {/* We add the Box here so that the tooltip is present if the button is disabled */}
             <IconButton
               onClick={handleDeviceStateChange}
               disabled={isButtonDisabled}
@@ -135,11 +166,16 @@ const DeviceControlButton = ({
                 isAudio ? t('devices.audio.microphone.full') : t('devices.video.camera.full')
               }
               size="small"
-              className="m-[3px] size-[50px] rounded-full shadow-md"
+              sx={{
+                m: '3px',
+                width: 40,
+                height: 40,
+                borderRadius: '50%',
+              }}
             >
               {renderControlIcon()}
             </IconButton>
-          </div>
+          </Box>
         </Tooltip>
       </ButtonGroup>
       <DeviceSettingsMenu
diff --git a/frontend/src/components/MeetingRoom/DeviceSettingsMenu/DeviceSettingsMenu.tsx b/frontend/src/components/MeetingRoom/DeviceSettingsMenu/DeviceSettingsMenu.tsx
index 3d1472038..8a95d1e8e 100644
--- a/frontend/src/components/MeetingRoom/DeviceSettingsMenu/DeviceSettingsMenu.tsx
+++ b/frontend/src/components/MeetingRoom/DeviceSettingsMenu/DeviceSettingsMenu.tsx
@@ -1,19 +1,19 @@
-import { ClickAwayListener } from '@mui/material';
-import Grow from '@mui/material/Grow';
-import Paper from '@mui/material/Paper';
-import Popper from '@mui/material/Popper';
 import { ReactElement, RefObject, Dispatch, SetStateAction } from 'react';
 import { hasMediaProcessorSupport } from '@vonage/client-sdk-video';
 import useAppConfig from '@Context/AppConfig/hooks/useAppConfig';
 import useTheme from '@ui/theme';
-import InputDevices from '../InputDevices';
-import OutputDevices from '../OutputDevices';
+import InputDevices from '../InputAudioDevices';
+import OutputDevices from '../OutputAudioDevices';
 import ReduceNoiseTestSpeakers from '../ReduceNoiseTestSpeakers';
 import useDropdownResizeObserver from '../../../hooks/useDropdownResizeObserver';
 import VideoDevices from '../VideoDevices';
 import DropdownSeparator from '../DropdownSeparator';
 import VideoDevicesOptions from '../VideoDevicesOptions';
-import type { PopperChildrenProps } from '@mui/material/Popper/BasePopper.types';
+import Popper from '@ui/Popper';
+import Grow from '@ui/Grow';
+import ClickAwayListener from '@ui/ClickAwayListener';
+import Paper from '@ui/Paper';
+import Box from '@ui/Box';
 
 export type DeviceSettingsMenuProps = {
   deviceType: 'audio' | 'video';
@@ -100,12 +100,12 @@ const DeviceSettingsMenu = ({
       disablePortal
       placement="bottom-start"
     >
-      {({ TransitionProps, placement }: PopperChildrenProps) => (
+      {({ TransitionProps, placement }) => (
         <Grow
           {...TransitionProps}
           style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
         >
-          <div className="text-left font-normal">
+          <Box sx={{ textAlign: 'left', fontWeight: 'normal' }}>
             <ClickAwayListener onClickAway={handleClose}>
               <Paper
                 sx={(t) => ({
@@ -135,7 +135,7 @@ const DeviceSettingsMenu = ({
                 {renderSettingsMenu()}
               </Paper>
             </ClickAwayListener>
-          </div>
+          </Box>
         </Grow>
       )}
     </Popper>
diff --git a/frontend/src/components/MeetingRoom/DropdownSeparator/DropdownSeparator.tsx b/frontend/src/components/MeetingRoom/DropdownSeparator/DropdownSeparator.tsx
index 34a7d766b..20566352f 100644
--- a/frontend/src/components/MeetingRoom/DropdownSeparator/DropdownSeparator.tsx
+++ b/frontend/src/components/MeetingRoom/DropdownSeparator/DropdownSeparator.tsx
@@ -1,4 +1,6 @@
 import { ReactElement } from 'react';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 
 /**
  * DropdownSeparator Component
@@ -7,11 +9,16 @@ import { ReactElement } from 'react';
  * @returns {ReactElement} The DropdownSeparator component.
  */
 const DropdownSeparator = (): ReactElement => {
+  const theme = useTheme();
+
   return (
-    <div
+    <Box
       data-testid="dropdown-separator"
-      className="w-full border-b border-solid"
-      style={{ borderColor: 'rgba(232, 234, 237, 0.25)' }}
+      sx={{
+        width: '100%',
+        borderBottom: '1px solid',
+        borderColor: theme.colors.border,
+      }}
     />
   );
 };
diff --git a/frontend/src/components/MeetingRoom/Emoji/Emoji.spec.tsx b/frontend/src/components/MeetingRoom/Emoji/Emoji.spec.tsx
index 4152bf32c..ea6075b4f 100644
--- a/frontend/src/components/MeetingRoom/Emoji/Emoji.spec.tsx
+++ b/frontend/src/components/MeetingRoom/Emoji/Emoji.spec.tsx
@@ -21,34 +21,32 @@ describe('Emoji component', () => {
     render(<Emoji emojiWrapper={{ ...emojiWrapper }} />);
 
     const container = screen.getByTestId('emoji-string-container');
+    const expectedDuration = EMOJI_DISPLAY_DURATION + 100;
+
     expect(container).toHaveStyle({
       position: 'absolute',
       animationName: 'moveEmoji',
+      animationDuration: `${expectedDuration}ms`,
       animationTimingFunction: 'linear',
       animationIterationCount: '1',
       maxWidth: '35%',
       zIndex: '1',
     });
-
-    const duration = container.style.animationDuration;
-    const expectedDuration = EMOJI_DISPLAY_DURATION + 100;
-    expect(parseInt(duration, 10)).toBe(expectedDuration);
   });
 
-  it('applies expected Tailwind classes to container and Chip', () => {
+  it('applies expected MUI styles to container and Chip', () => {
     render(<Emoji emojiWrapper={{ ...emojiWrapper }} />);
 
     const container = screen.getByTestId('emoji-string-container');
-    expect(container).toHaveClass(
-      'ml-5',
-      'flex',
-      'flex-col',
-      'text-5xl',
-      'md:ml-[15%]',
-      'md:text-6xl'
-    );
+    expect(container).toHaveStyle({
+      display: 'flex',
+    });
 
     const chip = screen.getByText(emojiWrapper.name).parentElement!;
-    expect(chip).toHaveClass('truncate', 'text-sm', 'md:text-lg');
+    expect(chip).toHaveStyle({
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    });
   });
 });
diff --git a/frontend/src/components/MeetingRoom/Emoji/Emoji.tsx b/frontend/src/components/MeetingRoom/Emoji/Emoji.tsx
index 394e0e23b..0227ea3db 100644
--- a/frontend/src/components/MeetingRoom/Emoji/Emoji.tsx
+++ b/frontend/src/components/MeetingRoom/Emoji/Emoji.tsx
@@ -1,7 +1,10 @@
 import { CSSProperties, ReactElement } from 'react';
-import { Chip } from '@mui/material';
 import { EmojiWrapper } from '../../../hooks/useEmoji';
 import { EMOJI_DISPLAY_DURATION } from '../../../utils/constants';
+import Chip from '@ui/Chip';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
+import useIsSmallViewport from '@hooks/useIsSmallViewport';
 
 export type EmojiProps = {
   emojiWrapper: EmojiWrapper;
@@ -15,6 +18,8 @@ export type EmojiProps = {
  * @returns {ReactElement} - The Emoji Component.
  */
 const Emoji = ({ emojiWrapper }: EmojiProps): ReactElement => {
+  const theme = useTheme();
+  const isSmallViewport = useIsSmallViewport();
   const { emoji, name } = emojiWrapper;
   const style: CSSProperties = {
     position: 'absolute',
@@ -28,22 +33,35 @@ const Emoji = ({ emojiWrapper }: EmojiProps): ReactElement => {
   };
 
   return (
-    <div
+    <Box
       data-testid="emoji-string-container"
-      style={style}
-      className="ml-5 flex flex-col text-5xl md:ml-[15%] md:text-6xl"
+      sx={{
+        ...style,
+        ml: isSmallViewport ? 5 : '15%',
+        display: 'flex',
+        flexDirection: 'column',
+        fontSize: isSmallViewport
+          ? theme.typography.typeScale.mobile['subtitle'].fontSize.value
+          : theme.typography.typeScale.desktop['subtitle'].fontSize.value,
+      }}
     >
       {emoji}
       <Chip
         label={name}
         size="small"
         sx={{
-          color: 'white',
-          backgroundColor: 'rgba(60, 64, 67, 0.55)',
+          mt: isSmallViewport ? 0.5 : 2,
+          color: theme.colors.onDarkGrey,
+          backgroundColor: theme.colors.darkGrey,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          fontSize: isSmallViewport
+            ? theme.typography.typeScale.mobile['body-base'].fontSize.value
+            : theme.typography.typeScale.desktop['body-base'].fontSize.value,
         }}
-        className="truncate text-sm md:text-lg"
       />
-    </div>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridDesktop.tsx b/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridDesktop.tsx
index 13ebebd7f..2626d52cb 100644
--- a/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridDesktop.tsx
+++ b/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridDesktop.tsx
@@ -1,9 +1,13 @@
-import { Grid, Grow, Paper, Popper, ClickAwayListener } from '@mui/material';
+import Grid from '@ui/Grid';
+import Grow from '@ui/Grow';
+import Paper from '@ui/Paper';
+import Popper from '@ui/Popper';
+import ClickAwayListener from '@ui/ClickAwayListener';
+import Box from '@ui/Box';
 import { ReactElement, RefObject, useEffect, useState } from 'react';
 import useTheme from '@ui/theme';
 import SendEmojiButton from '../SendEmojiButton';
 import emojiMap from '../../../utils/emojis';
-import { PopperChildrenProps } from '@mui/material/Popper/BasePopper.types';
 
 export type EmojiGridDesktopProps = {
   handleClickAway: (event: MouseEvent | TouchEvent) => void;
@@ -46,19 +50,27 @@ const EmojiGridDesktop = ({
         disablePortal
         placement="bottom"
       >
-        {({ TransitionProps, placement }: PopperChildrenProps) => (
+        {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}
             style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
           >
-            <div className="flex text-left font-normal">
+            <Box
+              sx={{
+                display: 'flex',
+                textAlign: 'left',
+                fontWeight: 'normal',
+              }}
+            >
               <ClickAwayListener onClickAway={handleClickAway}>
                 <Paper
-                  className="flex items-center justify-center"
                   data-testid="emoji-grid"
                   sx={{
-                    backgroundColor: theme.colors.secondary,
-                    color: theme.colors.onPrimary,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: theme.colors.darkGreyOpacity,
+                    color: theme.colors.onDarkGrey,
                     padding: { xs: 1 },
                     borderRadius: 2,
                     zIndex: 1,
@@ -80,7 +92,7 @@ const EmojiGridDesktop = ({
                   </Grid>
                 </Paper>
               </ClickAwayListener>
-            </div>
+            </Box>
           </Grow>
         )}
       </Popper>
diff --git a/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridMobile.tsx b/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridMobile.tsx
index 5082067fd..6b780ae93 100644
--- a/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridMobile.tsx
+++ b/frontend/src/components/MeetingRoom/EmojiGrid/EmojiGridMobile.tsx
@@ -1,7 +1,12 @@
-import { Box, Grid, Grow, Portal, ClickAwayListener } from '@mui/material';
+import Box from '@ui/Box';
+import Grid from '@ui/Grid';
+import Grow from '@ui/Grow';
+import Portal from '@ui/Portal';
+import ClickAwayListener from '@ui/ClickAwayListener';
 import { ReactElement } from 'react';
 import SendEmojiButton from '../SendEmojiButton';
 import emojiMap from '../../../utils/emojis';
+import useTheme from '@ui/theme';
 
 export type EmojiGridMobileProps = {
   handleClickAway: (event: MouseEvent | TouchEvent) => void;
@@ -23,41 +28,45 @@ const EmojiGridMobile = ({
   handleClickAway,
   isToolbarOpen,
   isEmojiGridOpen,
-}: EmojiGridMobileProps): ReactElement => (
-  <Portal>
-    <ClickAwayListener onClickAway={handleClickAway}>
-      <Grow
-        in={isToolbarOpen && isEmojiGridOpen}
-        style={{
-          transformOrigin: 'center bottom',
-        }}
-      >
-        <Box
-          sx={{
-            position: 'fixed',
-            bottom: '146px',
-            left: '50%',
-            translate: '-50% 0%',
+}: EmojiGridMobileProps): ReactElement => {
+  const theme = useTheme();
+
+  return (
+    <Portal>
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <Grow
+          in={isToolbarOpen && isEmojiGridOpen}
+          style={{
+            transformOrigin: 'center bottom',
           }}
         >
-          <Grid
-            container
-            spacing={0}
-            display={isEmojiGridOpen ? 'flex' : 'none'}
+          <Box
             sx={{
-              width: 'calc(100dvw - 30px)',
-              backgroundColor: '#272c2f',
-              borderRadius: 2,
+              position: 'fixed',
+              bottom: '146px',
+              left: '50%',
+              translate: '-50% 0%',
             }}
           >
-            {Object.values(emojiMap).map((emoji) => (
-              <SendEmojiButton key={emoji} emoji={emoji} />
-            ))}
-          </Grid>
-        </Box>
-      </Grow>
-    </ClickAwayListener>
-  </Portal>
-);
+            <Grid
+              container
+              spacing={0}
+              display={isEmojiGridOpen ? 'flex' : 'none'}
+              sx={{
+                width: 'calc(100dvw - 30px)',
+                backgroundColor: theme.colors.darkGreyOpacity,
+                borderRadius: 2,
+              }}
+            >
+              {Object.values(emojiMap).map((emoji) => (
+                <SendEmojiButton key={emoji} emoji={emoji} />
+              ))}
+            </Grid>
+          </Box>
+        </Grow>
+      </ClickAwayListener>
+    </Portal>
+  );
+};
 
 export default EmojiGridMobile;
diff --git a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx
index 22a6f0e01..1db1a4f70 100644
--- a/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx
+++ b/frontend/src/components/MeetingRoom/EmojiGridButton/EmojiGridButton.tsx
@@ -1,11 +1,11 @@
-import { Tooltip } from '@mui/material';
-import { EmojiEmotions } from '@mui/icons-material';
+import Tooltip from '@ui/Tooltip';
 import { Dispatch, ReactElement, SetStateAction, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import useAppConfig from '@Context/AppConfig/hooks/useAppConfig';
 import useTheme from '@ui/theme';
 import ToolbarButton from '../ToolbarButton';
 import EmojiGrid from '../EmojiGrid/EmojiGrid';
+import VividIcon from '@components/VividIcon';
 
 export type EmojiGridProps = {
   isEmojiGridOpen: boolean;
@@ -46,9 +46,11 @@ const EmojiGridButton = ({
           <ToolbarButton
             onClick={handleToggle}
             icon={
-              <EmojiEmotions
+              <VividIcon
+                name="emoji-solid"
+                customSize={-5}
                 sx={{
-                  color: isEmojiGridOpen ? theme.colors.background : 'white',
+                  color: isEmojiGridOpen ? theme.colors.secondary : theme.colors.onSecondary,
                 }}
               />
             }
diff --git a/frontend/src/components/MeetingRoom/ExitButton/ExitButton.tsx b/frontend/src/components/MeetingRoom/ExitButton/ExitButton.tsx
index 552668756..214dfa59c 100644
--- a/frontend/src/components/MeetingRoom/ExitButton/ExitButton.tsx
+++ b/frontend/src/components/MeetingRoom/ExitButton/ExitButton.tsx
@@ -1,10 +1,11 @@
-import CallEndIcon from '@mui/icons-material/CallEnd';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@ui/Tooltip';
 import { useNavigate } from 'react-router-dom';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import ToolbarButton from '../ToolbarButton';
 import useRoomName from '../../../hooks/useRoomName';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 export type ExitButtonProps = {
   handleLeave: () => void;
@@ -22,6 +23,7 @@ const ExitButton = ({ handleLeave }: ExitButtonProps): ReactElement => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const roomName = useRoomName();
+  const theme = useTheme();
 
   const handleExit = () => {
     handleLeave();
@@ -33,13 +35,18 @@ const ExitButton = ({ handleLeave }: ExitButtonProps): ReactElement => {
       <ToolbarButton
         onClick={handleExit}
         sx={{
-          backgroundColor: 'rgb(239 68 68)',
+          backgroundColor: theme.colors.error,
           '&:hover': {
-            backgroundColor: 'rgba(234, 67, 53, 0.8)',
+            backgroundColor: theme.colors.errorHover,
           },
-          marginRight: '0px',
         }}
-        icon={<CallEndIcon className="text-white" />}
+        icon={
+          <VividIcon
+            name="end-call-solid"
+            customSize={-4}
+            sx={{ color: theme.colors.onSecondary }}
+          />
+        }
       />
     </Tooltip>
   );
diff --git a/frontend/src/components/MeetingRoom/FormattedMessageBody/FormattedMessageBody.tsx b/frontend/src/components/MeetingRoom/FormattedMessageBody/FormattedMessageBody.tsx
index 848d48558..fffb93735 100644
--- a/frontend/src/components/MeetingRoom/FormattedMessageBody/FormattedMessageBody.tsx
+++ b/frontend/src/components/MeetingRoom/FormattedMessageBody/FormattedMessageBody.tsx
@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Link } from '@mui/material';
+import Link from '@ui/Link';
 import linkGroupsParser from '../../../utils/linkGroupsParser';
 
 export type FormattedMessageBodyProps = {
diff --git a/frontend/src/components/MeetingRoom/InputDevices/InputDevices.spec.tsx b/frontend/src/components/MeetingRoom/InputAudioDevices/InputAudioDevices.spec.tsx
similarity index 88%
rename from frontend/src/components/MeetingRoom/InputDevices/InputDevices.spec.tsx
rename to frontend/src/components/MeetingRoom/InputAudioDevices/InputAudioDevices.spec.tsx
index ff7cc3041..a286d11de 100644
--- a/frontend/src/components/MeetingRoom/InputDevices/InputDevices.spec.tsx
+++ b/frontend/src/components/MeetingRoom/InputAudioDevices/InputAudioDevices.spec.tsx
@@ -9,7 +9,7 @@ import usePublisherContext from '@hooks/usePublisherContext';
 import { AllMediaDevices } from '@app-types/room';
 import { PublisherContextType } from '@Context/PublisherProvider';
 import { allMediaDevices, defaultAudioDevice } from '@utils/mockData/device';
-import InputDevices from './InputDevices';
+import InputAudioDevices from './InputAudioDevices';
 
 // Mocks
 vi.mock('@hooks/useDevices');
@@ -27,7 +27,7 @@ const mockUseDevices = useDevices as Mock<
 >;
 const mockUsePublisherContext = usePublisherContext as Mock<[], PublisherContextType>;
 
-describe('InputDevices Component', () => {
+describe('InputAudioDevices Component', () => {
   const mockHandleToggle = vi.fn();
   const mockSetAudioSource = vi.fn();
   const mockGetAudioSource = vi.fn();
@@ -64,7 +64,7 @@ describe('InputDevices Component', () => {
   });
 
   it('renders all available audio input devices', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} />);
+    render(<InputAudioDevices handleToggle={mockHandleToggle} />);
 
     expect(screen.getByText('Microphone')).toBeInTheDocument();
 
@@ -75,7 +75,7 @@ describe('InputDevices Component', () => {
   });
 
   it('changes audio input device on menu item click', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} />);
+    render(<InputAudioDevices handleToggle={mockHandleToggle} />);
 
     const micItem = screen.getByText('MacBook Pro Microphone (Built-in)');
     fireEvent.click(micItem);
@@ -87,7 +87,7 @@ describe('InputDevices Component', () => {
   });
 
   it('does not call setAudioSource if selected device is not found', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} />);
+    render(<InputAudioDevices handleToggle={mockHandleToggle} />);
 
     const bogusItem = document.createElement('li');
     bogusItem.textContent = 'Nonexistent Microphone';
@@ -100,7 +100,7 @@ describe('InputDevices Component', () => {
     publisherContext.publisher = null;
     mockUsePublisherContext.mockReturnValue(publisherContext);
 
-    render(<InputDevices handleToggle={mockHandleToggle} />);
+    render(<InputAudioDevices handleToggle={mockHandleToggle} />);
 
     const micItem = screen.getByText('MacBook Pro Microphone (Built-in)');
     fireEvent.click(micItem);
@@ -110,15 +110,15 @@ describe('InputDevices Component', () => {
   });
 
   it('shows check icon for selected device', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} />);
+    render(<InputAudioDevices handleToggle={mockHandleToggle} />);
 
     // The default audio device should be selected
-    const checkIcon = screen.getByTestId('CheckIcon');
+    const checkIcon = screen.getByTestId('vivid-icon-check-line');
     expect(checkIcon).toBeInTheDocument();
   });
 
   it('is not rendered when allowDeviceSelection is false', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} />, {
+    render(<InputAudioDevices handleToggle={mockHandleToggle} />, {
       appConfigOptions: {
         value: {
           meetingRoomSettings: {
@@ -132,7 +132,7 @@ describe('InputDevices Component', () => {
   });
 
   it('handles click event when audioDeviceId is found', () => {
-    render(<InputDevices handleToggle={mockHandleToggle} />);
+    render(<InputAudioDevices handleToggle={mockHandleToggle} />);
 
     const micItem = screen.getByText('Soundcore Life A2 NC (Bluetooth)');
     fireEvent.click(micItem);
diff --git a/frontend/src/components/MeetingRoom/InputDevices/InputDevices.tsx b/frontend/src/components/MeetingRoom/InputAudioDevices/InputAudioDevices.tsx
similarity index 71%
rename from frontend/src/components/MeetingRoom/InputDevices/InputDevices.tsx
rename to frontend/src/components/MeetingRoom/InputAudioDevices/InputAudioDevices.tsx
index e7ef4e623..9ce1950bb 100644
--- a/frontend/src/components/MeetingRoom/InputDevices/InputDevices.tsx
+++ b/frontend/src/components/MeetingRoom/InputAudioDevices/InputAudioDevices.tsx
@@ -1,29 +1,31 @@
-import { Box, MenuItem, MenuList, Typography } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
+import Box from '@ui/Box';
+import Typography from '@ui/Typography';
+import MenuItem from '@ui/MenuItem';
+import MenuList from '@ui/MenuList';
 import { Device } from '@vonage/client-sdk-video';
-import MicNoneIcon from '@mui/icons-material/MicNone';
 import { MouseEvent as ReactMouseEvent, ReactElement, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import useAppConfig from '@Context/AppConfig/hooks/useAppConfig';
 import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 import useDevices from '../../../hooks/useDevices';
 import usePublisherContext from '../../../hooks/usePublisherContext';
 import { setStorageItem, STORAGE_KEYS } from '../../../utils/storage';
 import cleanAndDedupeDeviceLabels from '../../../utils/cleanAndDedupeDeviceLabels';
 
-export type InputDevicesProps = {
+export type InputAudioDevicesProps = {
   handleToggle: () => void;
 };
 
 /**
- * InputDevices Component
+ * InputAudioDevices Component
  *
  * Displays the audio input devices for a user. Handles switching audio input devices.
- * @param {InputDevicesProps} props - The props for the component.
+ * @param {InputAudioDevicesProps} props - The props for the component.
  *  @property {Function} handleToggle - The click handler to handle closing the menu.
- * @returns {ReactElement | false} - The InputDevices component.
+ * @returns {ReactElement | false} - The InputAudioDevices component.
  */
-const InputDevices = ({ handleToggle }: InputDevicesProps): ReactElement | false => {
+const InputAudioDevices = ({ handleToggle }: InputAudioDevicesProps): ReactElement | false => {
   const { t } = useTranslation();
   const theme = useTheme();
   const { publisher } = usePublisherContext();
@@ -63,13 +65,15 @@ const InputDevices = ({ handleToggle }: InputDevicesProps): ReactElement | false
         <Box
           sx={{
             display: 'flex',
+            alignItems: 'center',
             ml: 2,
             mt: 1,
             mb: 0.5,
+            color: theme.colors.tertiary,
           }}
         >
-          <MicNoneIcon sx={{ fontSize: 24, mr: 2 }} />
-          <Typography>{t('devices.audio.microphone.full')}</Typography>
+          <VividIcon name="microphone-2-line" customSize={-5} />
+          <Typography sx={{ ml: 2 }}>{t('devices.audio.microphone.full')}</Typography>
         </Box>
         <MenuList>
           {options.map((option: string) => {
@@ -86,7 +90,7 @@ const InputDevices = ({ handleToggle }: InputDevicesProps): ReactElement | false
                     color: theme.colors.onBackground,
                   },
                   '&:hover': {
-                    backgroundColor: theme.colors.primaryHover,
+                    backgroundColor: theme.colors.background,
                   },
                 }}
               >
@@ -96,16 +100,19 @@ const InputDevices = ({ handleToggle }: InputDevicesProps): ReactElement | false
                     display: 'flex',
                     mb: 0.5,
                     overflow: 'hidden',
+                    color: isSelected ? theme.colors.textPrimary : theme.colors.textSecondary,
                   }}
                 >
                   {isSelected ? (
-                    <CheckIcon
-                      sx={{
-                        color: theme.colors.background,
-                        fontSize: 24,
-                        mr: 2,
-                      }}
-                    />
+                    <Box key={'input-audio-devices-check'} sx={{ mr: 2 }}>
+                      <VividIcon
+                        name="check-line"
+                        customSize={-6}
+                        sx={{
+                          color: isSelected ? theme.colors.textPrimary : theme.colors.textSecondary,
+                        }}
+                      />
+                    </Box>
                   ) : (
                     <Box sx={{ width: 40 }} /> // Placeholder when CheckIcon is not displayed
                   )}
@@ -120,4 +127,4 @@ const InputDevices = ({ handleToggle }: InputDevicesProps): ReactElement | false
   );
 };
 
-export default InputDevices;
+export default InputAudioDevices;
diff --git a/frontend/src/components/MeetingRoom/InputAudioDevices/index.tsx b/frontend/src/components/MeetingRoom/InputAudioDevices/index.tsx
new file mode 100644
index 000000000..c8bb39f76
--- /dev/null
+++ b/frontend/src/components/MeetingRoom/InputAudioDevices/index.tsx
@@ -0,0 +1,3 @@
+import InputDevices from './InputAudioDevices';
+
+export default InputDevices;
diff --git a/frontend/src/components/MeetingRoom/InputDevices/index.tsx b/frontend/src/components/MeetingRoom/InputDevices/index.tsx
deleted file mode 100644
index e30c4b913..000000000
--- a/frontend/src/components/MeetingRoom/InputDevices/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import InputDevices from './InputDevices';
-
-export default InputDevices;
diff --git a/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.spec.tsx b/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.spec.tsx
index baf170641..544c8e8db 100644
--- a/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.spec.tsx
+++ b/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.spec.tsx
@@ -22,7 +22,7 @@ describe('LayoutButton', () => {
       <LayoutButton isScreenSharePresent={false} isPinningPresent={false} />
     );
     rerender(<LayoutButton isScreenSharePresent={false} isPinningPresent={false} />);
-    expect(screen.getByTestId('ViewSidebarIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('vivid-icon-layout-2-solid')).toBeInTheDocument();
   });
 
   it('should call the set layout mode function when triggered', async () => {
@@ -47,7 +47,7 @@ describe('LayoutButton', () => {
       <LayoutButton isScreenSharePresent={false} isPinningPresent={false} />
     );
     rerender(<LayoutButton isScreenSharePresent={false} isPinningPresent={false} />);
-    expect(screen.getByTestId('WindowIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('vivid-icon-apps-solid')).toBeInTheDocument();
   });
 
   it('should render the tooltip title that mentions switching to grid layout', async () => {
diff --git a/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx b/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx
index 51704000d..99b424ed4 100644
--- a/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx
+++ b/frontend/src/components/MeetingRoom/LayoutButton/LayoutButton.tsx
@@ -1,10 +1,10 @@
-import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
-import Tooltip from '@mui/material/Tooltip';
-import WindowIcon from '@mui/icons-material/Window';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSessionContext from '../../../hooks/useSessionContext';
 import ToolbarButton from '../ToolbarButton';
+import Tooltip from '@ui/Tooltip';
+import VividIcon from '@components/VividIcon';
+import useTheme from '@ui/theme';
 
 export type LayoutButtonProps = {
   isScreenSharePresent: boolean;
@@ -31,7 +31,7 @@ const LayoutButton = ({
   const { layoutMode, setLayoutMode } = useSessionContext();
   const isGrid = layoutMode === 'grid';
   const isDisabled = isScreenSharePresent || isPinningPresent;
-
+  const theme = useTheme();
   const handleClick = () => {
     if (isDisabled) {
       return;
@@ -56,14 +56,21 @@ const LayoutButton = ({
         data-testid="layout-button"
         icon={
           !isGrid ? (
-            <ViewSidebarIcon className={isDisabled ? 'text-gray-500' : 'text-white'} />
+            <VividIcon
+              name="layout-2-solid"
+              customSize={-5}
+              sx={{ color: isDisabled ? theme.colors.disabled : theme.colors.onSecondary }}
+            />
           ) : (
-            <WindowIcon className={isDisabled ? 'text-gray-500' : 'text-white'} />
+            <VividIcon
+              name="apps-solid"
+              customSize={-5}
+              sx={{ color: isDisabled ? theme.colors.disabled : theme.colors.onSecondary }}
+            />
           )
         }
         sx={{
           cursor: isDisabled ? 'not-allowed' : 'pointer',
-          // on the small view port devices we need to align the button
           marginTop: isOverflowButton ? '0px' : '4px',
         }}
         isOverflowButton={isOverflowButton}
diff --git a/frontend/src/components/MeetingRoom/MutingDialog/MutingDialog.tsx b/frontend/src/components/MeetingRoom/MutingDialog/MutingDialog.tsx
index b8096008e..0bead124d 100644
--- a/frontend/src/components/MeetingRoom/MutingDialog/MutingDialog.tsx
+++ b/frontend/src/components/MeetingRoom/MutingDialog/MutingDialog.tsx
@@ -1,12 +1,12 @@
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
 import { Stream } from '@vonage/client-sdk-video';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSessionContext from '../../../hooks/useSessionContext';
+import Dialog from '@ui/Dialog';
+import DialogActions from '@ui/DialogActions';
+import DialogContent from '@ui/DialogContent';
+import DialogContentText from '@ui/DialogContentText';
+import Button from '@ui/Button';
 
 type MutingDialogTexts = {
   contents: string;
diff --git a/frontend/src/components/MeetingRoom/NameDisplay/NameDisplay.tsx b/frontend/src/components/MeetingRoom/NameDisplay/NameDisplay.tsx
index f8c031bf0..8568ccc29 100644
--- a/frontend/src/components/MeetingRoom/NameDisplay/NameDisplay.tsx
+++ b/frontend/src/components/MeetingRoom/NameDisplay/NameDisplay.tsx
@@ -1,5 +1,7 @@
 import { ReactElement } from 'react';
-import { TEXT_SHADOW } from '../../../utils/constants';
+import Box from '@ui/Box';
+import Typography from '@ui/Typography';
+import useTheme from '@ui/theme';
 
 export type NameDisplayProps = {
   containerWidth: number;
@@ -16,17 +18,26 @@ export type NameDisplayProps = {
  * @returns {ReactElement} The NameDisplay component.
  */
 const NameDisplay = ({ name, containerWidth }: NameDisplayProps): ReactElement => {
+  const theme = useTheme();
   const safeMaxWidth =
     typeof containerWidth === 'number' && Number.isFinite(containerWidth) ? containerWidth : 0;
   return (
-    <div
-      className={`absolute bottom-[10px] left-[10px] truncate text-sm text-white ${TEXT_SHADOW}`}
-      style={{
+    <Box
+      sx={{
+        position: 'absolute',
+        bottom: '10px',
+        left: '10px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: theme.colors.onTertiary,
         maxWidth: Math.max(0, safeMaxWidth - 32),
       }}
     >
-      <span>{name}</span>
-    </div>
+      <Typography variant="body1" component="span">
+        {name}
+      </Typography>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/OutputDevices/OutputDevices.tsx b/frontend/src/components/MeetingRoom/OutputAudioDevices/OutputAudioDevices.tsx
similarity index 73%
rename from frontend/src/components/MeetingRoom/OutputDevices/OutputDevices.tsx
rename to frontend/src/components/MeetingRoom/OutputAudioDevices/OutputAudioDevices.tsx
index def2338ea..aa7176c58 100644
--- a/frontend/src/components/MeetingRoom/OutputDevices/OutputDevices.tsx
+++ b/frontend/src/components/MeetingRoom/OutputAudioDevices/OutputAudioDevices.tsx
@@ -1,6 +1,3 @@
-import { Box, MenuItem, MenuList, Typography } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
 import { MouseEvent, ReactElement, useMemo } from 'react';
 import type { AudioOutputDevice } from '@vonage/client-sdk-video';
 import { useTranslation } from 'react-i18next';
@@ -11,20 +8,25 @@ import useAudioOutputContext from '@hooks/useAudioOutputContext';
 import { isGetActiveAudioOutputDeviceSupported } from '@utils/util';
 import cleanAndDedupeDeviceLabels from '@utils/cleanAndDedupeDeviceLabels';
 import DropdownSeparator from '../DropdownSeparator';
+import Box from '@ui/Box';
+import Typography from '@ui/Typography';
+import MenuList from '@ui/MenuList';
+import MenuItem from '@ui/MenuItem';
+import VividIcon from '@components/VividIcon';
 
-export type OutputDevicesProps = {
+export type OutputAudioDevicesProps = {
   handleToggle: () => void;
 };
 
 /**
- * OutputDevices Component
+ * OutputAudioDevices Component
  *
  * Displays and switches audio output devices.
- * @param {OutputDevicesProps} props - The props for the component.
+ * @param {OutputAudioDevicesProps} props - The props for the component.
  *  @property {() => void} handleToggle - Function to close the menu.
- * @returns {ReactElement | false} - The OutputDevices component.
+ * @returns {ReactElement | false} - The OutputAudioDevices component.
  */
-const OutputDevices = ({ handleToggle }: OutputDevicesProps): ReactElement | false => {
+const OutputAudioDevices = ({ handleToggle }: OutputAudioDevicesProps): ReactElement | false => {
   const { t } = useTranslation();
   const theme = useTheme();
   const { currentAudioOutputDevice, setAudioOutputDevice } = useAudioOutputContext();
@@ -68,13 +70,15 @@ const OutputDevices = ({ handleToggle }: OutputDevicesProps): ReactElement | fal
         <Box
           sx={{
             display: 'flex',
+            alignItems: 'center',
             ml: 2,
             mt: 2,
             mb: 0.5,
+            color: theme.colors.tertiary,
           }}
         >
-          <VolumeUpIcon sx={{ fontSize: 24, mr: 2 }} />
-          <Typography data-testid="output-device-title">
+          <VividIcon name="audio-mid-line" customSize={-5} />
+          <Typography sx={{ ml: 2 }} data-testid="output-device-title">
             {t('devices.audio.speakers.full')}
           </Typography>
         </Box>
@@ -95,7 +99,7 @@ const OutputDevices = ({ handleToggle }: OutputDevicesProps): ReactElement | fal
                     color: theme.colors.onBackground,
                   },
                   '&:hover': {
-                    backgroundColor: theme.colors.primaryHover,
+                    backgroundColor: theme.colors.background,
                   },
                 }}
               >
@@ -105,16 +109,19 @@ const OutputDevices = ({ handleToggle }: OutputDevicesProps): ReactElement | fal
                     display: 'flex',
                     mb: 0.5,
                     overflow: 'hidden',
+                    color: isSelected ? theme.colors.textPrimary : theme.colors.textSecondary,
                   }}
                 >
                   {isSelected ? (
-                    <CheckIcon
-                      sx={{
-                        color: theme.colors.background,
-                        fontSize: 24,
-                        mr: 2,
-                      }}
-                    />
+                    <Box key={'output-audio-devices-check'} sx={{ mr: 2 }}>
+                      <VividIcon
+                        name="check-line"
+                        customSize={-6}
+                        sx={{
+                          color: isSelected ? theme.colors.textPrimary : theme.colors.textSecondary,
+                        }}
+                      />
+                    </Box>
                   ) : (
                     <Box sx={{ width: 40 }} /> // Placeholder when CheckIcon is not displayed
                   )}
@@ -129,4 +136,4 @@ const OutputDevices = ({ handleToggle }: OutputDevicesProps): ReactElement | fal
   );
 };
 
-export default OutputDevices;
+export default OutputAudioDevices;
diff --git a/frontend/src/components/MeetingRoom/OutputDevices/OutputDevices.spec.tsx b/frontend/src/components/MeetingRoom/OutputAudioDevices/OutputDevices.spec.tsx
similarity index 86%
rename from frontend/src/components/MeetingRoom/OutputDevices/OutputDevices.spec.tsx
rename to frontend/src/components/MeetingRoom/OutputAudioDevices/OutputDevices.spec.tsx
index 623d8c516..cb957f8fd 100644
--- a/frontend/src/components/MeetingRoom/OutputDevices/OutputDevices.spec.tsx
+++ b/frontend/src/components/MeetingRoom/OutputAudioDevices/OutputDevices.spec.tsx
@@ -8,7 +8,7 @@ import { allMediaDevices } from '@utils/mockData/device';
 import * as util from '@utils/util';
 import { AllMediaDevices } from '@app-types/room';
 import { AppConfigProviderWrapperOptions, makeAppConfigProviderWrapper } from '@test/providers';
-import OutputDevices from './OutputDevices';
+import OutputAudioDevices from './OutputAudioDevices';
 
 // Mocks
 vi.mock('@hooks/useDevices');
@@ -20,7 +20,7 @@ const mockUseDevices = useDevices as Mock<
 >;
 const mockUseAudioOutputContext = useAudioOutputContext as Mock<[], AudioOutputContextType>;
 
-describe('OutputDevices Component', () => {
+describe('OutputAudioDevices Component', () => {
   const mockHandleToggle = vi.fn();
   const mockSetAudioOutputDevice = vi.fn();
   let audioOutputContext: AudioOutputContextType;
@@ -47,7 +47,7 @@ describe('OutputDevices Component', () => {
   });
 
   it('renders all available audio output devices when supported', () => {
-    render(<OutputDevices handleToggle={mockHandleToggle} />);
+    render(<OutputAudioDevices handleToggle={mockHandleToggle} />);
 
     expect(screen.getByText('Speakers')).toBeInTheDocument();
     expect(screen.getByTestId('output-devices')).toBeInTheDocument();
@@ -61,7 +61,7 @@ describe('OutputDevices Component', () => {
   it('renders only default device when audio output is not supported', () => {
     (util.isGetActiveAudioOutputDeviceSupported as Mock).mockReturnValue(false);
 
-    render(<OutputDevices handleToggle={mockHandleToggle} />);
+    render(<OutputAudioDevices handleToggle={mockHandleToggle} />);
 
     expect(screen.getByText('Speakers')).toBeInTheDocument();
     expect(screen.getByText('System Default')).toBeInTheDocument();
@@ -71,7 +71,7 @@ describe('OutputDevices Component', () => {
   });
 
   it('changes audio output device on menu item click when supported', () => {
-    render(<OutputDevices handleToggle={mockHandleToggle} />);
+    render(<OutputAudioDevices handleToggle={mockHandleToggle} />);
 
     const speakerItem = screen.getByText('Soundcore Life A2 NC (Bluetooth)');
     fireEvent.click(speakerItem);
@@ -85,7 +85,7 @@ describe('OutputDevices Component', () => {
   it('does not call setAudioOutputDevice when audio output is not supported', () => {
     (util.isGetActiveAudioOutputDeviceSupported as Mock).mockReturnValue(false);
 
-    render(<OutputDevices handleToggle={mockHandleToggle} />);
+    render(<OutputAudioDevices handleToggle={mockHandleToggle} />);
 
     const defaultItem = screen.getByText('System Default');
     fireEvent.click(defaultItem);
@@ -95,25 +95,25 @@ describe('OutputDevices Component', () => {
   });
 
   it('shows check icon for selected device', () => {
-    render(<OutputDevices handleToggle={mockHandleToggle} />);
+    render(<OutputAudioDevices handleToggle={mockHandleToggle} />);
 
     // The device with deviceId 'default' should be selected
-    const checkIcon = screen.getByTestId('CheckIcon');
+    const checkIcon = screen.getByTestId('vivid-icon-check-line');
     expect(checkIcon).toBeInTheDocument();
   });
 
   it('shows check icon for default device when only one device available', () => {
     (util.isGetActiveAudioOutputDeviceSupported as Mock).mockReturnValue(false);
 
-    render(<OutputDevices handleToggle={mockHandleToggle} />);
+    render(<OutputAudioDevices handleToggle={mockHandleToggle} />);
 
     // When only default device is available, it should be selected
-    const checkIcon = screen.getByTestId('CheckIcon');
+    const checkIcon = screen.getByTestId('vivid-icon-check-line');
     expect(checkIcon).toBeInTheDocument();
   });
 
   it('is not rendered when allowDeviceSelection is false', () => {
-    render(<OutputDevices handleToggle={mockHandleToggle} />, {
+    render(<OutputAudioDevices handleToggle={mockHandleToggle} />, {
       appConfigOptions: {
         value: {
           meetingRoomSettings: {
diff --git a/frontend/src/components/MeetingRoom/OutputAudioDevices/index.tsx b/frontend/src/components/MeetingRoom/OutputAudioDevices/index.tsx
new file mode 100644
index 000000000..d224c1783
--- /dev/null
+++ b/frontend/src/components/MeetingRoom/OutputAudioDevices/index.tsx
@@ -0,0 +1,3 @@
+import OutputDevices from './OutputAudioDevices';
+
+export default OutputDevices;
diff --git a/frontend/src/components/MeetingRoom/OutputDevices/index.tsx b/frontend/src/components/MeetingRoom/OutputDevices/index.tsx
deleted file mode 100644
index 07fc276a0..000000000
--- a/frontend/src/components/MeetingRoom/OutputDevices/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import OutputDevices from './OutputDevices';
-
-export default OutputDevices;
diff --git a/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.spec.tsx b/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.spec.tsx
index 58c4ab15c..745e5d5f5 100644
--- a/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.spec.tsx
@@ -103,12 +103,12 @@ describe('ParticipantList', () => {
 
     render(<ParticipantList isOpen handleClose={() => {}} />);
 
-    const copyButton = screen.getByTestId('ContentCopyIcon');
+    const copyButton = screen.getByTestId('vivid-icon-copy-line');
     fireEvent.click(copyButton);
 
     await waitFor(() => {
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith('https://example.com/room123');
-      expect(screen.getByTestId('CheckIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('vivid-icon-check-sent-line')).toBeInTheDocument();
     });
   });
 
diff --git a/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx b/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx
index bc400dd3f..78629943d 100644
--- a/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx
@@ -1,7 +1,4 @@
-import { Fade, IconButton, List, Tooltip } from '@mui/material';
-import { ContentCopy } from '@mui/icons-material';
-import CheckIcon from '@mui/icons-material/Check';
-import { ReactElement, useState } from 'react';
+import { ReactElement, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSessionContext from '../../../hooks/useSessionContext';
 import useUserContext from '../../../hooks/useUserContext';
@@ -13,6 +10,15 @@ import getParticipantColor from '../../../utils/getParticipantColor';
 import useRoomShareUrl from '../../../hooks/useRoomShareUrl';
 import RightPanelTitle from '../RightPanel/RightPanelTitle';
 import usePublisherContext from '../../../hooks/usePublisherContext';
+import IconButton from '@ui/IconButton';
+import Tooltip from '@ui/Tooltip';
+import Fade from '@ui/Fade';
+import List from '@ui/List';
+import Box from '@ui/Box';
+import Typography from '@ui/Typography';
+import useTheme from '@ui/theme';
+import Stack from '@ui/Stack';
+import VividIcon from '@components/VividIcon';
 
 const compareNameAlphabetically = (a: SubscriberWrapper, b: SubscriberWrapper) => {
   const nameA = a.subscriber?.stream?.name;
@@ -43,6 +49,7 @@ export type ParticipantListProps = {
  */
 const ParticipantList = ({ handleClose, isOpen }: ParticipantListProps): ReactElement | false => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const { subscriberWrappers } = useSessionContext();
   const publisherAudio = useAudioLevels();
   const [isCopied, setIsCopied] = useState<boolean>(false);
@@ -54,6 +61,11 @@ const ParticipantList = ({ handleClose, isOpen }: ParticipantListProps): ReactEl
   const roomShareUrl = useRoomShareUrl();
   const { isAudioEnabled } = usePublisherContext();
 
+  const participantCount = useMemo(
+    () => 1 + subscriberWrappers.filter(({ isScreenshare }) => !isScreenshare).length,
+    [subscriberWrappers]
+  );
+
   const copyUrl = () => {
     navigator.clipboard.writeText(roomShareUrl);
 
@@ -67,35 +79,60 @@ const ParticipantList = ({ handleClose, isOpen }: ParticipantListProps): ReactEl
   return (
     isOpen && (
       <>
-        <RightPanelTitle title={t('participants.title')} handleClose={handleClose} />
-        <div className="flex h-[64px] flex-row items-center justify-between pl-6">
-          <div className="text-left">
-            <span className="text-darkGray text-sm font-bold tracking-normal">
-              {t('chat.meetingUrl')}
-            </span>{' '}
-            <br />
-            <span
+        <RightPanelTitle
+          title={`${t('participants.title')} (${participantCount})`}
+          handleClose={handleClose}
+        />
+        <Box
+          sx={{
+            display: 'flex',
+            height: '64px',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            pl: 3,
+          }}
+        >
+          <Stack sx={{ textAlign: 'left' }}>
+            <Typography variant="subtitle2">{t('chat.meetingUrl')}</Typography>
+            <Typography
+              variant="body2"
               title={window.location.href}
-              className="text-darkGray block	max-w-64 truncate text-sm font-normal tracking-normal"
+              sx={{
+                display: 'block',
+                maxWidth: '16rem',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
             >
               {window.location.href}
-            </span>
-          </div>
+            </Typography>
+          </Stack>
           <IconButton
             size="large"
-            sx={{ color: 'rgb(95, 99, 104)' }}
+            sx={{ color: theme.colors.tertiary, mr: 0.75 }}
             onClick={copyUrl}
             disabled={isCopied}
           >
             <Tooltip
+              arrow
               title={isCopied ? t('chat.copied') : t('chat.copy')}
               TransitionComponent={Fade}
               TransitionProps={{ timeout: 500 }}
             >
-              {isCopied ? <CheckIcon sx={{ color: 'rgba(26,115,232,.9)' }} /> : <ContentCopy />}
+              {isCopied ? (
+                <VividIcon
+                  name="check-sent-line"
+                  customSize={-4}
+                  sx={{ color: theme.colors.success }}
+                />
+              ) : (
+                <VividIcon name="copy-line" customSize={-4} />
+              )}
             </Tooltip>
           </IconButton>
-        </div>
+        </Box>
         <List sx={{ overflowX: 'auto', height: 'calc(100dvh - 240px)' }}>
           <ParticipantListItem
             key="you"
diff --git a/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx b/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx
index cf92da65d..a912ab4d5 100644
--- a/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantListButton.tsx
@@ -1,11 +1,11 @@
-import PeopleIcon from '@mui/icons-material/People';
-import Tooltip from '@mui/material/Tooltip';
-import { blue } from '@mui/material/colors';
-import { Badge } from '@mui/material';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import useShouldShowParticipantList from '@Context/AppConfig/hooks/useShouldShowParticipantList';
 import ToolbarButton from '../ToolbarButton';
+import Badge from '@ui/Badge';
+import Tooltip from '@ui/Tooltip';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 export type ParticipantListButtonProps = {
   handleClick: () => void;
@@ -32,8 +32,9 @@ const ParticipantListButton = ({
   isOverflowButton = false,
 }: ParticipantListButtonProps): ReactElement | false => {
   const showParticipantList = useShouldShowParticipantList();
-
+  const theme = useTheme();
   const { t } = useTranslation();
+
   return (
     showParticipantList && (
       <Tooltip
@@ -44,8 +45,8 @@ const ParticipantListButton = ({
           badgeContent={participantCount}
           sx={{
             '& .MuiBadge-badge': {
-              color: 'white',
-              backgroundColor: 'rgb(95, 99, 104)',
+              color: theme.colors.onTertiary,
+              backgroundColor: theme.colors.tertiary,
             },
             marginRight: '12px',
             zIndex: 1,
@@ -59,7 +60,13 @@ const ParticipantListButton = ({
               marginRight: '0px',
             }}
             onClick={handleClick}
-            icon={<PeopleIcon sx={{ color: isOpen ? blue.A100 : 'white' }} />}
+            icon={
+              <VividIcon
+                name="group-solid"
+                customSize={-4}
+                sx={{ color: isOpen ? theme.colors.secondary : theme.colors.onSecondary }}
+              />
+            }
             isOverflowButton={isOverflowButton}
           />
         </Badge>
diff --git a/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantsListButton.spec.tsx b/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantsListButton.spec.tsx
index 69cce6482..bea03a3ba 100644
--- a/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantsListButton.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantListButton/ParticipantsListButton.spec.tsx
@@ -11,11 +11,11 @@ describe('ParticipantListButton', () => {
   });
   it('should have a white icon when the list is closed', () => {
     render(<ParticipantListButton handleClick={() => {}} isOpen={false} participantCount={10} />);
-    expect(screen.getByTestId('PeopleIcon')).toHaveStyle('color: rgb(255, 255, 255)');
+    expect(screen.getByTestId('vivid-icon-group-solid')).toHaveStyle('color: rgb(255, 255, 255)');
   });
   it('should have a blue icon when the list is open', () => {
     render(<ParticipantListButton handleClick={() => {}} isOpen participantCount={10} />);
-    expect(screen.getByTestId('PeopleIcon')).toHaveStyle('color: rgb(130, 177, 255)');
+    expect(screen.getByTestId('vivid-icon-group-solid')).toHaveStyle('color: rgb(0, 0, 0)');
   });
   it('should invoke callback on click', () => {
     const handleClick = vi.fn();
diff --git a/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.spec.tsx b/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.spec.tsx
index 1076f8f5d..72da44c28 100644
--- a/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.spec.tsx
@@ -108,7 +108,7 @@ describe('ParticipantListItem', () => {
       const audioIndicator = screen.getByTestId('audio-indicator');
       expect(audioIndicator).toBeInTheDocument();
 
-      const micIcon = screen.getByTestId('MicIcon');
+      const micIcon = screen.getByTestId('vivid-icon-microphone-2-solid');
       expect(micIcon).toBeInTheDocument();
     });
 
@@ -121,7 +121,7 @@ describe('ParticipantListItem', () => {
       const audioIndicator = screen.getByTestId('audio-indicator');
       expect(audioIndicator).toBeInTheDocument();
 
-      const micOffIcon = screen.getByTestId('MicOffIcon');
+      const micOffIcon = screen.getByTestId('vivid-icon-mic-mute-solid');
       expect(micOffIcon).toBeInTheDocument();
     });
   });
diff --git a/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.tsx b/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.tsx
index efc8629bb..b937e0a00 100644
--- a/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.tsx
@@ -1,10 +1,15 @@
 import { ReactElement } from 'react';
-import { Avatar, Badge, ListItem, Typography } from '@mui/material';
-import PushPinIcon from '@mui/icons-material/PushPin';
 import { Stream } from '@vonage/client-sdk-video';
 import AudioIndicator from '../AudioIndicator';
 import ParticipantListItemMenu from '../ParticipantListItemMenu';
 import { SubscriberWrapper } from '../../../types/session';
+import ListItem from '@ui/ListItem';
+import Avatar from '@ui/Avatar';
+import Typography from '@ui/Typography';
+import Badge from '@ui/Badge';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
+import Box from '@ui/Box';
 
 export type ParticipantListItemProps = {
   stream?: Stream;
@@ -40,24 +45,26 @@ const ParticipantListItem = ({
   stream,
   subscriberWrapper,
 }: ParticipantListItemProps): ReactElement => {
+  const theme = useTheme();
+
   return (
     <ListItem
       sx={{ height: '56px', paddingRight: '68px' }}
       data-testid={dataTestId}
       secondaryAction={
-        <div className="flex items-center justify-center">
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           <AudioIndicator
             audioLevel={audioLevel}
             hasAudio={hasAudio}
             stream={stream}
             participantName={name}
-            indicatorColor="black"
-            indicatorStyle="flex items-center justify-center"
+            indicatorColor={theme.colors.secondary}
+            indicatorStyle={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
           />
           {subscriberWrapper && (
             <ParticipantListItemMenu participantName={name} subscriberWrapper={subscriberWrapper} />
           )}
-        </div>
+        </Box>
       }
     >
       <Badge
@@ -65,14 +72,15 @@ const ParticipantListItem = ({
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         sx={{
           '.MuiBadge-badge': {
-            backgroundColor: 'white',
+            backgroundColor: theme.colors.background,
           },
         }}
         invisible={!subscriberWrapper?.isPinned}
         badgeContent={
-          <PushPinIcon
+          <VividIcon
+            customSize={-6}
+            name="pin-2-solid"
             sx={{
-              fontSize: '14px',
               position: 'fixed',
             }}
           />
@@ -91,7 +99,7 @@ const ParticipantListItem = ({
       </Badge>
       <Typography
         data-testid="participant-list-name"
-        variant="inherit"
+        variant="body1"
         noWrap
         sx={{ marginLeft: '12px' }}
       >
diff --git a/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantListItemMenu.tsx b/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantListItemMenu.tsx
index bfed06d70..c2985a923 100644
--- a/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantListItemMenu.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantListItemMenu.tsx
@@ -1,8 +1,12 @@
 import { useState, MouseEvent, ReactElement } from 'react';
-import { ClickAwayListener, IconButton, Paper, Popper } from '@mui/material';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { SubscriberWrapper } from '../../../types/session';
 import ParticipantPinMenuItem from './ParticipantPinMenuItem';
+import IconButton from '@ui/IconButton';
+import Popper from '@ui/Popper';
+import ClickAwayListener from '@ui/ClickAwayListener';
+import Paper from '@ui/Paper';
+import VividIcon from '@components/VividIcon';
+import useTheme from '@ui/theme';
 
 export type ParticipantListItemMenuProps = {
   participantName: string;
@@ -21,6 +25,7 @@ const ParticipantListItemMenu = ({
   participantName,
   subscriberWrapper,
 }: ParticipantListItemMenuProps): ReactElement => {
+  const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const isOpen = !!anchorEl;
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
@@ -33,7 +38,7 @@ const ParticipantListItemMenu = ({
   return (
     <>
       <IconButton onClick={handleClick} sx={{ marginRight: '-8px' }}>
-        <MoreVertIcon sx={{ fontSize: '18px' }} />
+        <VividIcon name="more-vertical-solid" customSize={-6} color={theme.colors.tertiary} />
       </IconButton>
       <Popper open={isOpen} anchorEl={anchorEl} placement="bottom-start" sx={{ zIndex: 10 }}>
         <ClickAwayListener onClickAway={handleClose}>
diff --git a/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantPinMenuItem.tsx b/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantPinMenuItem.tsx
index 4b11c07c3..8f33a512d 100644
--- a/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantPinMenuItem.tsx
+++ b/frontend/src/components/MeetingRoom/ParticipantListItemMenu/ParticipantPinMenuItem.tsx
@@ -1,10 +1,12 @@
 import { ReactElement } from 'react';
-import { ListItemIcon, ListItemText, MenuItem } from '@mui/material';
-import PushPinIcon from '@mui/icons-material/PushPin';
 import { useTranslation } from 'react-i18next';
 import { SubscriberWrapper } from '../../../types/session';
-import PushPinOffIcon from '../../Icons/PushPinOffIcon';
 import useSessionContext from '../../../hooks/useSessionContext';
+import MenuItem from '@ui/MenuItem';
+import ListItemIcon from '@ui/ListItemIcon';
+import ListItemText from '@ui/ListItemText';
+import VividIcon from '@components/VividIcon';
+import useTheme from '@ui/theme';
 
 export type ParticipantPinMenuItemProps = {
   handleClick: () => void;
@@ -27,6 +29,7 @@ const ParticipantPinMenuItem = ({
   subscriberWrapper,
 }: ParticipantPinMenuItemProps): ReactElement => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const { isPinned, id } = subscriberWrapper;
   const { isMaxPinned, pinSubscriber } = useSessionContext();
   const isDisabled = !isPinned && isMaxPinned;
@@ -55,9 +58,21 @@ const ParticipantPinMenuItem = ({
     >
       <ListItemIcon>
         {isPinned ? (
-          <PushPinOffIcon fontSize="small" sx={{ color: 'black' }} />
+          <VividIcon
+            customSize={-6}
+            name="pin-2-off-solid"
+            sx={{
+              color: theme.colors.secondary,
+            }}
+          />
         ) : (
-          <PushPinIcon fontSize="small" sx={{ color: 'black' }} />
+          <VividIcon
+            customSize={-6}
+            name="pin-2-solid"
+            sx={{
+              color: theme.colors.secondary,
+            }}
+          />
         )}
       </ListItemIcon>
       <ListItemText
diff --git a/frontend/src/components/MeetingRoom/PinButton/PinButton.tsx b/frontend/src/components/MeetingRoom/PinButton/PinButton.tsx
index c2b899ef3..20fcf09ad 100644
--- a/frontend/src/components/MeetingRoom/PinButton/PinButton.tsx
+++ b/frontend/src/components/MeetingRoom/PinButton/PinButton.tsx
@@ -1,9 +1,11 @@
-import PushPinIcon from '@mui/icons-material/PushPin';
-import { IconButton, Tooltip } from '@mui/material';
 import { MouseEvent, ReactElement, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import PushPinOffIcon from '../../Icons/PushPinOffIcon';
 import isMouseEventInsideBox from '../../../utils/isMouseEventInsideBox';
+import Tooltip from '@ui/Tooltip';
+import IconButton from '@ui/IconButton';
+import VividIcon from '@components/VividIcon';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 
 export type PinButtonProps = {
   isMaxPinned: boolean;
@@ -33,12 +35,12 @@ const PinButton = ({
   handleClick,
 }: PinButtonProps): ReactElement | false => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const isDisabled = isMaxPinned && !isPinned;
   const anchorRef = useRef<HTMLDivElement | null>(null);
   const [isHoveringButton, setIsHoveringButton] = useState<boolean>(false);
   const iconSx = {
-    fontSize: '18px',
-    color: isDisabled ? 'rgba(255,255,255,.54)' : 'white',
+    color: isDisabled ? theme.colors.disabled : theme.colors.surface,
     cursor: 'pointer',
   };
 
@@ -72,9 +74,20 @@ const PinButton = ({
   const shouldShowIcon = isTileHovered || isPinned;
   return (
     shouldShowIcon && (
-      <div
+      <Box
         ref={anchorRef}
-        className="absolute left-3 top-3 m-auto flex size-6 items-center justify-center rounded-xl"
+        sx={{
+          position: 'absolute',
+          left: 3,
+          top: 3,
+          margin: 'auto',
+          display: 'flex',
+          width: '24px',
+          height: '24px',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: theme.shapes.borderRadiusLarge,
+        }}
         data-testid="pin-button"
         onPointerEnter={() => setIsHoveringButton(true)}
         onPointerLeave={() => setIsHoveringButton(false)}
@@ -89,18 +102,18 @@ const PinButton = ({
               width: 24,
               borderRadius: '50%',
               cursor: 'pointer',
-              backgroundColor: isTileHovered ? 'rgb(32, 33, 36, .55)' : 'none',
-              '&:hover, &.Mui-focusVisible': { backgroundColor: 'rgb(32, 33, 36, .75)' },
+              backgroundColor: isTileHovered ? theme.colors.darkGrey : 'none',
+              '&:hover, &.Mui-focusVisible': { backgroundColor: theme.colors.darkGreyHover },
             }}
           >
             {isTileHovered && isPinned ? (
-              <PushPinOffIcon sx={iconSx} />
+              <VividIcon name="pin-2-off-solid" customSize={-6} sx={iconSx} />
             ) : (
-              <PushPinIcon sx={iconSx} />
+              <VividIcon name="pin-2-solid" customSize={-6} sx={iconSx} />
             )}
           </IconButton>
         </Tooltip>
-      </div>
+      </Box>
     )
   );
 };
diff --git a/frontend/src/components/MeetingRoom/PopupDialog/PopupDialog.tsx b/frontend/src/components/MeetingRoom/PopupDialog/PopupDialog.tsx
index 0dfce37f6..7acc70868 100644
--- a/frontend/src/components/MeetingRoom/PopupDialog/PopupDialog.tsx
+++ b/frontend/src/components/MeetingRoom/PopupDialog/PopupDialog.tsx
@@ -1,9 +1,9 @@
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@ui/Dialog';
+import DialogActions from '@ui/DialogActions';
+import DialogContent from '@ui/DialogContent';
+import DialogContentText from '@ui/DialogContentText';
+import DialogTitle from '@ui/DialogTitle';
+import Button from '@ui/Button';
 import { ReactElement } from 'react';
 
 export type DialogTexts = {
diff --git a/frontend/src/components/MeetingRoom/ReduceNoiseTestSpeakers/ReduceNoiseTestSpeakers.tsx b/frontend/src/components/MeetingRoom/ReduceNoiseTestSpeakers/ReduceNoiseTestSpeakers.tsx
index e8cf48653..70b43cc63 100644
--- a/frontend/src/components/MeetingRoom/ReduceNoiseTestSpeakers/ReduceNoiseTestSpeakers.tsx
+++ b/frontend/src/components/MeetingRoom/ReduceNoiseTestSpeakers/ReduceNoiseTestSpeakers.tsx
@@ -1,9 +1,5 @@
-import { Typography, MenuItem, IconButton, MenuList } from '@mui/material';
 import { useState, useEffect, ReactElement } from 'react';
-import Grow from '@mui/material/Grow';
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
 import { hasMediaProcessorSupport } from '@vonage/client-sdk-video';
-import HeadsetIcon from '@mui/icons-material/Headset';
 import ToggleOffIcon from '@mui/icons-material/ToggleOff';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +9,13 @@ import usePublisherContext from '@hooks/usePublisherContext';
 import { setStorageItem, STORAGE_KEYS } from '@utils/storage';
 import DropdownSeparator from '../DropdownSeparator';
 import SoundTest from '../../SoundTest';
+import MenuList from '@ui/MenuList';
+import MenuItem from '@ui/MenuItem';
+import IconButton from '@ui/IconButton';
+import Typography from '@ui/Typography';
+import Grow from '@ui/Grow';
+import VividIcon from '@components/VividIcon';
+import Box from '@ui/Box';
 
 /**
  * ReduceNoiseTestSpeakers Component
@@ -66,14 +69,19 @@ const ReduceNoiseTestSpeakers = (): ReactElement | false => {
           <MenuItem
             onClick={handleToggle}
             sx={{
-              backgroundColor: 'transparent',
               '&:hover': {
-                backgroundColor: theme.colors.primaryHover,
+                backgroundColor: theme.colors.background,
               },
             }}
           >
-            <HeadsetIcon sx={{ fontSize: 24, mr: 2 }} />
-            <Typography noWrap sx={{ mr: 2 }}>
+            <Box sx={{ mr: 1 }}>
+              <VividIcon
+                customSize={-5}
+                name="headset-solid"
+                sx={{ color: theme.colors.secondary }}
+              />
+            </Box>
+            <Typography variant="body1" noWrap sx={{ mr: 2 }}>
               {t('devices.audio.noiseSuppression')}
             </Typography>
             <IconButton disableRipple>
@@ -81,7 +89,7 @@ const ReduceNoiseTestSpeakers = (): ReactElement | false => {
                 <ToggleOffIcon
                   data-testid="toggle-off-icon"
                   fontSize="large"
-                  sx={{ position: 'absolute', color: 'white' }}
+                  sx={{ position: 'absolute', color: theme.colors.secondary }}
                 />
               </Grow>
               <Grow in={isToggled} timeout={300}>
@@ -90,7 +98,7 @@ const ReduceNoiseTestSpeakers = (): ReactElement | false => {
                   fontSize="large"
                   sx={{
                     position: 'absolute',
-                    color: theme.colors.background,
+                    color: theme.colors.secondary,
                   }}
                 />
               </Grow>
@@ -98,7 +106,13 @@ const ReduceNoiseTestSpeakers = (): ReactElement | false => {
           </MenuItem>
         )}
         <SoundTest>
-          <VolumeUpIcon sx={{ fontSize: 24, mr: 2 }} />
+          <Box sx={{ mr: 0.5 }}>
+            <VividIcon
+              customSize={-4}
+              name="audio-mid-solid"
+              sx={{ color: theme.colors.secondary }}
+            />
+          </Box>
         </SoundTest>
       </MenuList>
     </>
diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx
index e1fcc4c13..dbc0642b1 100644
--- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx
+++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx
@@ -1,4 +1,3 @@
-import { TextField, Button, Typography, Box, CircularProgress } from '@mui/material';
 import { FormEvent, ChangeEvent, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import FilePicker from './FilePicker';
@@ -9,6 +8,12 @@ import {
 } from '../../../../utils/constants';
 import HelperText from './HelperText';
 import useIsSmallViewport from '../../../../hooks/useIsSmallViewport';
+import Box from '@ui/Box';
+import TextField from '@ui/TextField';
+import Typography from '@ui/Typography';
+import Button from '@ui/Button';
+import CircularProgress from '@ui/CircularProgress';
+import useTheme from '@ui/theme';
 
 export type FormType = {
   title: string;
@@ -33,7 +38,7 @@ export type FeedbackFormType = {
 
 const getStyleTypography = () => {
   return {
-    marginBottom: '5px',
+    marginBottom: '4px',
     textAlign: 'left',
   };
 };
@@ -61,6 +66,7 @@ const FeedbackForm = ({
   onFileSelect,
 }: FeedbackFormType): ReactElement => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const isSmallViewport = useIsSmallViewport();
   // 224px = 64px panel header + 96px toolbar if normal viewport + (40px submit button + 24px submit button margin)
   // 208px = 64px panel header + 80px toolbar if small viewport + (40px submit button + 24px submit button margin)
@@ -70,7 +76,7 @@ const FeedbackForm = ({
   const width = isSmallViewport ? 'calc(100dvw - 50px)' : '310px';
 
   const getColorStyle = (value: string, maxLength: number) => {
-    return value.length >= maxLength || value.length === 0 ? 'red' : 'inherit';
+    return value.length >= maxLength || value.length === 0 ? theme.colors.error : 'inherit';
   };
 
   return loading ? (
@@ -82,22 +88,18 @@ const FeedbackForm = ({
   ) : (
     <form onSubmit={handleSubmit}>
       <Box
-        ml="25px"
-        mr="25px"
         sx={{
           overflowX: 'hidden',
           overflowY: 'auto',
           display: 'flex',
           flexDirection: 'column',
           height,
+          ml: 4,
+          mr: 4,
+          pr: 1.5,
         }}
       >
-        <Typography
-          variant="body2"
-          data-testid="title-report-issue"
-          color="textPrimary"
-          sx={getStyleTypography()}
-        >
+        <Typography variant="body1" data-testid="title-report-issue" sx={getStyleTypography()}>
           {t('feedbackForm.field.title.label')}
         </Typography>
         <TextField
@@ -123,12 +125,7 @@ const FeedbackForm = ({
           }}
           inputProps={{ maxLength: REPORT_TITLE_LIMIT }}
         />
-        <Typography
-          variant="body2"
-          data-testid="name-report-issue"
-          color="textPrimary"
-          sx={getStyleTypography()}
-        >
+        <Typography variant="body1" data-testid="name-report-issue" sx={getStyleTypography()}>
           {t('feedbackForm.field.name.label')}
         </Typography>
         <TextField
@@ -158,8 +155,7 @@ const FeedbackForm = ({
 
         <Typography
           data-testid="description-report-issue"
-          variant="body2"
-          color="textPrimary"
+          variant="body1"
           sx={getStyleTypography()}
         >
           {t('feedbackForm.field.issue.label')}
@@ -194,11 +190,8 @@ const FeedbackForm = ({
 
         <Typography
           variant="body2"
-          color="textSecondary"
           sx={{
             ...getStyleTypography(),
-            fontSize: '0.8rem',
-            textAlign: 'left',
           }}
         >
           {t('feedbackForm.disclaiamer.label')}
@@ -208,8 +201,6 @@ const FeedbackForm = ({
           color="textPrimary"
           sx={{
             ...getStyleTypography(),
-            fontSize: '0.8rem',
-            textAlign: 'left',
           }}
         >
           {t('feedbackForm.disclaiamer.screenshot')}
@@ -223,7 +214,6 @@ const FeedbackForm = ({
         fullWidth
         sx={{
           textTransform: 'none',
-          fontSize: '1rem',
           margin: '12px 24px',
           width,
         }}
diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx
index 656eb1d48..dbd71980c 100644
--- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx
+++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx
@@ -1,9 +1,14 @@
 import { ChangeEvent, useRef, useState, ReactElement } from 'react';
-import { Button, IconButton, Tooltip, Typography } from '@mui/material';
-import { Delete } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
+import Box from '@ui/Box';
 import captureScreenshot from '../../../../../utils/captureScreenshot';
 import { isMobile } from '@utils/util';
+import Button from '@ui/Button';
+import IconButton from '@ui/IconButton';
+import Tooltip from '@ui/Tooltip';
+import Typography from '@ui/Typography';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 // Setting the maximum file size to 20MB
 const maxFileSize = 2e7;
@@ -25,6 +30,7 @@ const FilePicker = ({
   const [imageSrc, setImageSrc] = useState<string>('');
   const imageRef = useRef<HTMLImageElement | null>(null);
   const [maximumSizeError, setMaximumSizeError] = useState<boolean>(false);
+  const theme = useTheme();
 
   const checkIfSizeAllowed = (file: File) => {
     if (file.size > maxFileSize) {
@@ -75,22 +81,25 @@ const FilePicker = ({
     <>
       {imageSrc && (
         <Typography
+          variant="subtitle1"
           sx={{
-            marginBottom: '24px',
+            mt: 2,
+            mb: maximumSizeError ? 0 : 2,
             textAlign: 'left',
           }}
         >
           {t('filePicker.attachedScreenshot')}
         </Typography>
       )}
-      <div className="my-2">
+      <Box sx={{ my: 1 }}>
         {maximumSizeError && (
           <Typography
-            color="error"
+            color={theme.colors.error}
             sx={{
-              marginBottom: '6px',
+              mb: 0.75,
               textAlign: 'left',
             }}
+            variant="body2"
           >
             {t('filePicker.sizeLimit')}
           </Typography>
@@ -119,8 +128,6 @@ const FilePicker = ({
               component="label"
             >
               {t('filePicker.addScreenshot')}
-              {/*
-               */}
               <input
                 accept=".jpg, .jpeg, .png, .gif"
                 name="upload"
@@ -131,39 +138,48 @@ const FilePicker = ({
             </Button>
           </>
         ) : (
-          <div className="relative flex">
-            <div className="relative">
-              <img
+          <Box sx={{ position: 'relative', display: 'flex' }}>
+            <Box sx={{ position: 'relative' }}>
+              <Box
+                component="img"
                 alt="screenshot"
                 width={100}
                 height={80}
                 ref={imageRef}
                 src={imageSrc}
-                className="size-full object-cover"
+                sx={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
               />
-              <Tooltip title={t('filePicker.delete')}>
+              <Tooltip arrow title={t('filePicker.delete')}>
                 <IconButton
                   data-testid="delete-screenshot"
                   onClick={handleDeleteFile}
                   sx={{
                     position: 'absolute',
                     top: 0,
-                    right: 0,
+                    right: 10,
                     transform: 'translate(50%, -50%)',
                     borderRadius: '50%',
-                    backgroundColor: 'rgb(69,71,70)',
+                    backgroundColor: theme.colors.tertiary,
                     '&:hover': {
-                      backgroundColor: 'rgb(99,99,99)',
+                      backgroundColor: theme.colors.tertiaryHover,
                     },
                   }}
                 >
-                  <Delete sx={{ color: 'rgb(233,186,183)' }} />
+                  <VividIcon
+                    customSize={-6}
+                    name="delete-solid"
+                    sx={{ color: theme.colors.onTertiary }}
+                  />
                 </IconButton>
               </Tooltip>
-            </div>
-          </div>
+            </Box>
+          </Box>
         )}
-      </div>
+      </Box>
     </>
   );
 };
diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/HelperText/HelperText.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/HelperText/HelperText.tsx
index 616f1b443..d8af23e78 100644
--- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/HelperText/HelperText.tsx
+++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/HelperText/HelperText.tsx
@@ -1,13 +1,11 @@
-import { Box } from '@mui/material';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
-
-export type ColorStyle = 'inherit' | 'red';
+import Box from '@ui/Box';
 
 export type HelperTextProps = {
   isError: boolean;
   errorType: string;
-  colorStyle: ColorStyle;
+  colorStyle: string;
   textLimit: number;
   formText: string;
   testId: string;
@@ -21,7 +19,7 @@ export type HelperTextProps = {
  * @param {HelperTextProps} props - The props for the component.
  *  @property {boolean} isError - Whether to display the error or not.
  *  @property {string} errorType - What kind of error this is.
- *  @property {ColorStyle} colorStyle - Whether to use plain or red text.
+ *  @property {string} colorStyle - Whether to use plain or red text.
  *  @property {number} textLimit - How many characters can exist for the form type.
  *  @property {string} formText - What is present in the form's field.
  *  @property {string} testId - The testId to assign to the error name
diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FormSubmitted/FormSubmitted.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FormSubmitted/FormSubmitted.tsx
index 3a95a9d7f..49dc9bd53 100644
--- a/frontend/src/components/MeetingRoom/ReportIssue/FormSubmitted/FormSubmitted.tsx
+++ b/frontend/src/components/MeetingRoom/ReportIssue/FormSubmitted/FormSubmitted.tsx
@@ -1,6 +1,10 @@
-import { Typography, Button } from '@mui/material';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
+import Box from '@ui/Box';
+import Button from '@ui/Button';
+import Typography from '@ui/Typography';
+import Link from '@ui/Link';
+import useTheme from '@ui/theme';
 
 export type TicketResponseType = {
   message: string;
@@ -27,12 +31,21 @@ const FormSubmitted = ({
   ticketResponse,
 }: FormSubmittedProps): ReactElement => {
   const { t } = useTranslation();
+  const theme = useTheme();
+
   return (
     <>
-      <div className="flex min-h-[80vh] items-center justify-between overflow-y-auto overflow-x-hidden">
-        <Typography
-          variant="body2"
-          color="textPrimary"
+      <Box
+        sx={{
+          display: 'flex',
+          minHeight: '80vh',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        }}
+      >
+        <Box
           sx={{
             ml: 2,
             mr: 2,
@@ -43,34 +56,48 @@ const FormSubmitted = ({
           }}
         >
           {ticketResponse.ticketUrl ? (
-            <>
-              <b data-testid="thank-you-text">{t('feedbackForm.submitted.thanks')}</b>
-              <br />
-              {t('feedbackForm.submitted.content')}
-              <br />
-              {ticketResponse.message} <br />
-              <a
+            <Box component="span">
+              <Typography data-testid="thank-you-text" variant="h6" sx={{ mb: 1 }}>
+                {t('feedbackForm.submitted.thanks')}
+              </Typography>
+              <Typography variant="body2" data-testid="submitted-content-text">
+                {t('feedbackForm.submitted.content')}
+              </Typography>
+              <Typography variant="body2" data-testid="message-text" sx={{ mb: 1.5 }}>
+                {ticketResponse.message}
+              </Typography>
+              <Link
                 data-testid="track-progress-text"
                 href={ticketResponse.ticketUrl}
                 target="_blank"
-                style={{
-                  color: '#0B57D0',
-                  fontWeight: 'bold',
-                }}
                 rel="noreferrer"
+                sx={{
+                  color: theme.colors.information,
+                  textDecoration: 'none',
+                  '&:hover': {
+                    textDecoration: 'underline',
+                  },
+                }}
               >
                 {t('feedbackForm.submitted.track')}
-              </a>
-            </>
+              </Link>
+            </Box>
           ) : (
-            <span data-testid="error-text">
+            <Typography variant="body1" data-testid="error-text">
               {t('feedbackForm.submitted.error')}
-              <br />
-            </span>
+            </Typography>
           )}
-        </Typography>
-      </div>
-      <div className="absolute inset-x-0 bottom-0 flex">
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: 'flex',
+        }}
+      >
         <Button
           type="submit"
           variant="contained"
@@ -87,7 +114,7 @@ const FormSubmitted = ({
         >
           {t('button.close')}
         </Button>
-      </div>
+      </Box>
     </>
   );
 };
diff --git a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.spec.tsx b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.spec.tsx
index 6de421444..11ae7b1a0 100644
--- a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.spec.tsx
@@ -6,11 +6,13 @@ import ReportIssueButton from './ReportIssueButton';
 describe('ReportIssueButton', () => {
   it('should have a white icon when the form is closed', () => {
     render(<ReportIssueButton handleClick={() => {}} isOpen={false} />);
-    expect(screen.getByTestId('FeedbackIcon')).toHaveStyle('color: rgb(255, 255, 255)');
+    expect(screen.getByTestId('vivid-icon-feedback-solid')).toHaveStyle(
+      'color: rgb(255, 255, 255)'
+    );
   });
   it('should have a blue icon when the form is open', () => {
     render(<ReportIssueButton handleClick={() => {}} isOpen />);
-    expect(screen.getByTestId('FeedbackIcon')).toHaveStyle('color: rgb(130, 177, 255)');
+    expect(screen.getByTestId('vivid-icon-feedback-solid')).toHaveStyle('color: rgb(0, 0, 0)');
   });
   it('should invoke callback on click', () => {
     const handleClick = vi.fn();
diff --git a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx
index 6e87d3492..0d84763bb 100644
--- a/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx
+++ b/frontend/src/components/MeetingRoom/ReportIssueButton/ReportIssueButton.tsx
@@ -1,9 +1,9 @@
-import { Tooltip } from '@mui/material';
+import Tooltip from '@ui/Tooltip';
 import { ReactElement, useRef } from 'react';
-import FeedbackIcon from '@mui/icons-material/Feedback';
-import { blue } from '@mui/material/colors';
 import { useTranslation } from 'react-i18next';
 import ToolbarButton from '../ToolbarButton';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 export type ReportIssueButtonProps = {
   handleClick: () => void;
@@ -27,6 +27,7 @@ const ReportIssueButton = ({
   isOverflowButton = false,
 }: ReportIssueButtonProps): ReactElement => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const anchorRef = useRef<HTMLButtonElement>(null);
 
   return (
@@ -41,7 +42,13 @@ const ReportIssueButton = ({
           marginRight: '12px',
         }}
         onClick={handleClick}
-        icon={<FeedbackIcon sx={{ color: isOpen ? blue.A100 : 'white' }} />}
+        icon={
+          <VividIcon
+            customSize={-5}
+            name="feedback-solid"
+            sx={{ color: isOpen ? theme.colors.secondary : theme.colors.onSecondary }}
+          />
+        }
         ref={anchorRef}
         isOverflowButton={isOverflowButton}
       />
diff --git a/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx b/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx
index 830a0d505..650c24c4a 100644
--- a/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx
+++ b/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx
@@ -5,6 +5,8 @@ import ReportIssue from '../ReportIssue';
 import type { RightPanelActiveTab } from '../../../hooks/useRightPanel';
 import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
 import BackgroundEffectsLayout from '../../BackgroundEffects/BackgroundEffectsLayout';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 
 export type RightPanelProps = {
   handleClose: () => void;
@@ -22,15 +24,26 @@ export type RightPanelProps = {
  */
 const RightPanel = ({ activeTab, handleClose }: RightPanelProps): ReactElement => {
   const isSmallViewport = useIsSmallViewport();
-  const width = isSmallViewport ? 'w-dvw' : 'w-[360px]';
-  const margins = isSmallViewport ? 'm-0' : 'mr-4 mt-4';
-  const height = isSmallViewport
-    ? '@apply h-[calc(100dvh_-_80px)]'
-    : '@apply h-[calc(100dvh_-_96px)]';
-  const className = `${height} absolute top-0 ${margins} ${width} overflow-hidden rounded bg-white transition-[right] ${activeTab === 'closed' ? 'right-[-380px] hidden' : 'right-0'}`;
+  const theme = useTheme();
 
   return (
-    <div data-testid="right-panel" className={className}>
+    <Box
+      data-testid="right-panel"
+      sx={{
+        position: 'absolute',
+        top: 0,
+        right: activeTab === 'closed' ? '-380px' : 0,
+        display: activeTab === 'closed' ? 'none' : 'block',
+        overflow: 'hidden',
+        bgcolor: theme.colors.surface,
+        transition: 'right 0.3s',
+        borderRadius: 2,
+        width: isSmallViewport ? '100dvw' : '360px',
+        height: isSmallViewport ? 'calc(100dvh - 80px)' : 'calc(100dvh - 96px)',
+        marginRight: isSmallViewport ? 0 : 2,
+        marginTop: isSmallViewport ? 0 : 2,
+      }}
+    >
       <ParticipantList handleClose={handleClose} isOpen={activeTab === 'participant-list'} />
       <BackgroundEffectsLayout
         mode="meeting"
@@ -39,7 +52,7 @@ const RightPanel = ({ activeTab, handleClose }: RightPanelProps): ReactElement =
       />
       <Chat handleClose={handleClose} isOpen={activeTab === 'chat'} />
       <ReportIssue handleClose={handleClose} isOpen={activeTab === 'issues'} />
-    </div>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/RightPanel/RightPanelTitle.tsx b/frontend/src/components/MeetingRoom/RightPanel/RightPanelTitle.tsx
index eef972763..c54d8cf95 100644
--- a/frontend/src/components/MeetingRoom/RightPanel/RightPanelTitle.tsx
+++ b/frontend/src/components/MeetingRoom/RightPanel/RightPanelTitle.tsx
@@ -1,6 +1,9 @@
-import { Close } from '@mui/icons-material';
-import { IconButton } from '@mui/material';
+import IconButton from '@ui/IconButton';
 import { ReactElement } from 'react';
+import VividIcon from '@components/VividIcon';
+import Box from '@ui/Box';
+import Typography from '@ui/Typography';
+import useTheme from '@ui/theme';
 
 export type RightPanelTitleProps = {
   handleClose: () => void;
@@ -17,17 +20,33 @@ export type RightPanelTitleProps = {
  * @returns {ReactElement} - RightPanelTitle component
  */
 const RightPanelTitle = ({ handleClose, title }: RightPanelTitleProps): ReactElement => {
+  const theme = useTheme();
   return (
-    <div
+    <Box
       data-testid="right-panel-title"
-      style={{ width: 'inherit' }}
-      className="flex h-[64px] flex-row items-center justify-between pl-6"
+      sx={{
+        width: 'inherit',
+        display: 'flex',
+        height: '64px',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        pl: 3,
+        pr: 0.5,
+      }}
     >
-      <span className="text-darkGray text-lg font-normal tracking-normal">{title}</span>
-      <IconButton onClick={handleClose} size="large" sx={{ color: 'rgb(95, 99, 104)' }}>
-        <Close />
+      <Typography
+        variant="body1"
+        sx={{
+          color: theme.colors.darkGrey,
+        }}
+      >
+        {title}
+      </Typography>
+      <IconButton onClick={handleClose} size="large" sx={{ color: theme.colors.secondary }}>
+        <VividIcon name="close-line" customSize={-5} />
       </IconButton>
-    </div>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.spec.tsx b/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.spec.tsx
index e301888fd..da108b8cd 100644
--- a/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.spec.tsx
@@ -34,9 +34,9 @@ describe('ScreenSharePublisher component', () => {
     render(<ScreenSharePublisher box={box} element={element} publisher={mockPublisher} />);
 
     expect(screen.getByText('Test Stream')).toBeInTheDocument();
-    expect(element.classList).toContain('w-full');
-    expect(element.classList).toContain('absolute');
-    expect(element.classList).toContain('rounded-xl');
-    expect(element.classList).toContain('object-contain');
+    expect(element.style.width).toBe('100%');
+    expect(element.style.position).toBe('absolute');
+    expect(element.style.borderRadius).toBe('12px');
+    expect(element.style.objectFit).toBe('contain');
   });
 });
diff --git a/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx b/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx
index 7ccd90c3a..b2ec515c1 100644
--- a/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx
+++ b/frontend/src/components/MeetingRoom/ScreenSharePublisher/ScreenSharePublisher.tsx
@@ -3,6 +3,7 @@ import { Box } from 'opentok-layout-js';
 import { Publisher } from '@vonage/client-sdk-video';
 import VideoTile from '../VideoTile';
 import ScreenShareNameDisplay from '../../ScreenShareNameDisplay';
+import useTheme from '@ui/theme';
 
 export type ScreenSharePublisherProps = {
   box: Box | undefined;
@@ -24,10 +25,16 @@ const ScreenSharePublisher = ({
   element,
   publisher,
 }: ScreenSharePublisherProps): ReactElement | undefined => {
+  const theme = useTheme();
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (element && containerRef.current) {
-      element.classList.add('w-full', 'absolute', 'rounded-xl', 'object-contain');
+      Object.assign(element.style, {
+        width: '100%',
+        position: 'absolute',
+        borderRadius: theme.shapes.borderRadiusLarge,
+        objectFit: 'contain',
+      });
       containerRef.current.appendChild(element);
     }
   }, [element]);
diff --git a/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.spec.tsx b/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.spec.tsx
index 2a5fb024a..99b3c776e 100644
--- a/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.spec.tsx
@@ -66,10 +66,10 @@ describe('ScreenshareVideoTile', () => {
   });
 
   it('renders with custom className', () => {
-    render(<ScreenshareVideoTile {...defaultProps} className="bg-red-500" />);
+    render(<ScreenshareVideoTile {...defaultProps} className="test" />);
 
     const tile = screen.getByTestId('screenshare-tile');
-    expect(tile).toHaveClass('bg-red-500');
+    expect(tile).toHaveClass('test');
   });
 
   it('calls onMouseEnter and onMouseLeave handlers', () => {
@@ -303,11 +303,17 @@ describe('ScreenshareVideoTile', () => {
   });
 
   describe('Component structure', () => {
-    it('has correct CSS classes', () => {
+    it('has correct CSS styles', () => {
       render(<ScreenshareVideoTile {...defaultProps} />);
 
       const tile = screen.getByTestId('screenshare-tile');
-      expect(tile).toHaveClass('absolute', 'm-1', 'flex', 'items-center', 'justify-center');
+      expect(tile).toHaveStyle({
+        position: 'absolute',
+        margin: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      });
     });
 
     it('has correct id attribute', () => {
diff --git a/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.tsx b/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.tsx
index 834cfbc8f..d2d75f1a4 100644
--- a/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.tsx
+++ b/frontend/src/components/MeetingRoom/ScreenshareVideoTile/ScreenshareVideoTile.tsx
@@ -13,6 +13,8 @@ import { hasMediaProcessorSupport } from '@vonage/client-sdk-video';
 import getBoxStyle from '../../../utils/helpers/getBoxStyle';
 import ZoomIndicator from '../ZoomIndicator';
 import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP } from '../../../utils/constants';
+import useTheme from '@ui/theme';
+import CustomBox from '@ui/Box';
 
 export type ScreenshareVideoTileProps = {
   'data-testid': string;
@@ -44,6 +46,7 @@ const ScreenshareVideoTile = forwardRef(
     }: ScreenshareVideoTileProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
+    const theme = useTheme();
     // Zoom state management
     const [zoomLevel, setZoomLevel] = useState<number>(1);
     const [panOffset, setPanOffset] = useState<{ x: number; y: number }>({
@@ -160,15 +163,19 @@ const ScreenshareVideoTile = forwardRef(
     };
 
     return (
-      <div
+      <CustomBox
         id={id}
         data-testid={dataTestId}
-        className={`${className ?? ''} absolute m-1 flex items-center justify-center`}
-        style={{
-          ...getBoxStyle(box, true), // Always true for screenshare
+        sx={{
+          position: 'absolute',
+          m: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           overflow: 'hidden',
-          position: 'relative', // Ensure positioning context for ZoomIndicator
+          ...getBoxStyle(box, true), // Always true for screenshare
         }}
+        className={className}
         onMouseEnter={() => onMouseEnter?.()}
         onMouseLeave={() => {
           setIsDragging(false);
@@ -179,17 +186,33 @@ const ScreenshareVideoTile = forwardRef(
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
       >
-        <div
-          className="relative left-0 top-0 size-full overflow-hidden rounded-xl"
+        <CustomBox
           ref={ref}
-          style={{
-            backgroundColor: 'rgba(60, 64, 67, 0.55)',
+          sx={{
+            position: 'relative',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: theme.shapes.borderRadiusLarge,
+            backgroundColor: theme.colors.darkGreyOpacity,
             ...getTransformStyle(),
           }}
         />
-        <div
-          className="relative left-0 top-0 hidden size-full overflow-hidden rounded-xl bg-notVeryGray-100"
-          style={getTransformStyle()}
+        <CustomBox
+          sx={{
+            position: 'relative',
+            left: 0,
+            top: 0,
+            display: 'none',
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: theme.shapes.borderRadiusLarge,
+            backgroundColor: theme.colors.darkGreyOpacity,
+            ...getTransformStyle(),
+          }}
         />
         {children}
 
@@ -201,7 +224,7 @@ const ScreenshareVideoTile = forwardRef(
             zoomOut={zoomOut}
           />
         )}
-      </div>
+      </CustomBox>
     );
   }
 );
diff --git a/frontend/src/components/MeetingRoom/SendEmojiButton/SendEmojiButton.tsx b/frontend/src/components/MeetingRoom/SendEmojiButton/SendEmojiButton.tsx
index 2d90345c3..7dd8adc33 100644
--- a/frontend/src/components/MeetingRoom/SendEmojiButton/SendEmojiButton.tsx
+++ b/frontend/src/components/MeetingRoom/SendEmojiButton/SendEmojiButton.tsx
@@ -1,8 +1,9 @@
-import { Button, Grid, GridSize } from '@mui/material';
 import { ReactElement } from 'react';
 import useTheme from '@ui/theme';
 import useSessionContext from '../../../hooks/useSessionContext';
 import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
+import Grid from '@ui/Grid';
+import Button from '@ui/Button';
 
 export type SendEmojiButtonProps = {
   emoji: string;
@@ -19,17 +20,17 @@ const SendEmojiButton = ({ emoji }: SendEmojiButtonProps): ReactElement => {
   const { sendEmoji } = useSessionContext();
   const theme = useTheme();
   const isSmallViewport = useIsSmallViewport();
-  const xs: GridSize = isSmallViewport ? 2 : 3;
+  const xs = isSmallViewport ? 2 : 3;
   const size = isSmallViewport ? 'small' : 'large';
 
   return (
-    <Grid item xs={xs} className="flex justify-center">
+    <Grid item xs={xs} sx={{ display: 'flex', justifyContent: 'center' }}>
       <Button
         size={size}
         onClick={() => sendEmoji(emoji)}
         sx={{
           '&:hover': {
-            backgroundColor: theme.colors.primaryHover,
+            backgroundColor: theme.colors.background,
           },
           padding: '0.25rem',
           fontSize: '1.5rem',
diff --git a/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.spec.tsx b/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.spec.tsx
index 7285ad414..359e941b4 100644
--- a/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.spec.tsx
+++ b/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.spec.tsx
@@ -47,7 +47,7 @@ describe('SmallViewportHeader component', () => {
 
     render(<SmallViewportHeader />);
 
-    expect(screen.getByTestId('RadioButtonCheckedIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('vivid-icon-radio-checked-2-solid')).toBeInTheDocument();
   });
 
   it('does not show the recording icon if it there is not one happening', () => {
@@ -55,21 +55,21 @@ describe('SmallViewportHeader component', () => {
 
     render(<SmallViewportHeader />);
 
-    expect(screen.queryByTestId('RadioButtonCheckedIcon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('vivid-icon-radio-checked-2-solid')).not.toBeInTheDocument();
   });
 
   it('copies room share URL to clipboard', async () => {
     (useSessionContext as Mock).mockReturnValue({ archiveId: null });
     render(<SmallViewportHeader />);
 
-    const copyButton = screen.getByTestId('ContentCopyIcon');
+    const copyButton = screen.getByTestId('vivid-icon-copy-line');
     fireEvent.click(copyButton);
 
     await waitFor(() => {
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
         'https://example.com/room/test-room-name'
       );
-      expect(screen.getByTestId('CheckIcon')).toBeInTheDocument();
+      expect(screen.getByTestId('vivid-icon-check-sent-line')).toBeInTheDocument();
     });
   });
 });
diff --git a/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.tsx b/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.tsx
index b2806fd91..acc0d3000 100644
--- a/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.tsx
+++ b/frontend/src/components/MeetingRoom/SmallViewportHeader/SmallViewportHeader.tsx
@@ -1,11 +1,12 @@
 import { ReactElement, useState } from 'react';
-import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
-import { ContentCopy } from '@mui/icons-material';
-import { IconButton, Fade } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 import useSessionContext from '../../../hooks/useSessionContext';
 import useRoomName from '../../../hooks/useRoomName';
 import useRoomShareUrl from '../../../hooks/useRoomShareUrl';
+import IconButton from '@ui/IconButton';
+import Fade from '@ui/Fade';
+import VividIcon from '@components/VividIcon';
 
 /**
  * SmallViewportHeader Component
@@ -15,6 +16,7 @@ import useRoomShareUrl from '../../../hooks/useRoomShareUrl';
  * @returns {ReactElement} The small viewport header component.
  */
 const SmallViewportHeader = (): ReactElement => {
+  const theme = useTheme();
   const { archiveId } = useSessionContext();
   const isRecording = !!archiveId;
   const roomName = useRoomName();
@@ -31,31 +33,54 @@ const SmallViewportHeader = (): ReactElement => {
     }, 3000);
   };
   return (
-    <div
-      className="flex items-center justify-between bg-darkGray-100 px-4 pt-4 text-white"
+    <Box
       data-testid="smallViewportHeader"
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: theme.colors.darkBackground,
+        paddingX: 2,
+        paddingTop: 2,
+        color: theme.colors.onDarkGrey,
+      }}
     >
-      <div className="flex items-center space-x-2 px-1">
-        {isRecording && <RadioButtonCheckedIcon className="text-red-500" />}
-        <div className="line-clamp-1">{roomName}</div>
-      </div>
-      <div className="-mx-2">
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, paddingX: 0.5 }}>
+        {isRecording && (
+          <VividIcon
+            name="radio-checked-2-solid"
+            customSize={-6}
+            sx={{ color: theme.colors.error }}
+          />
+        )}
+        <Box
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 1,
+            WebkitBoxOrient: 'vertical',
+          }}
+        >
+          {roomName}
+        </Box>
+      </Box>
+      <Box sx={{ marginX: -1 }}>
         <Fade in timeout={500}>
-          <IconButton
-            size="large"
-            sx={{ color: 'rgb(95, 99, 104)' }}
-            onClick={copyUrl}
-            disabled={isCopied}
-          >
+          <IconButton sx={{ color: theme.colors.onDarkGrey }} onClick={copyUrl} disabled={isCopied}>
             {isCopied ? (
-              <CheckIcon sx={{ color: 'rgba(26,115,232,.9)' }} />
+              <VividIcon
+                customSize={-4}
+                name="check-sent-line"
+                sx={{ color: theme.colors.success }}
+              />
             ) : (
-              <ContentCopy className="text-white" />
+              <VividIcon customSize={-4} name="copy-line" sx={{ color: theme.colors.onDarkGrey }} />
             )}
           </IconButton>
         </Fade>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/TimeRoomName/TimeRoomName.tsx b/frontend/src/components/MeetingRoom/TimeRoomName/TimeRoomName.tsx
index 660c9ffa4..518e84968 100644
--- a/frontend/src/components/MeetingRoom/TimeRoomName/TimeRoomName.tsx
+++ b/frontend/src/components/MeetingRoom/TimeRoomName/TimeRoomName.tsx
@@ -1,6 +1,8 @@
 import { ReactElement } from 'react';
 import useDateTime from '../../../hooks/useDateTime';
 import useRoomName from '../../../hooks/useRoomName';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 
 /**
  *  TimeRoomName Component
@@ -10,12 +12,22 @@ import useRoomName from '../../../hooks/useRoomName';
  */
 const TimeRoomName = (): ReactElement => {
   const { time } = useDateTime();
+  const theme = useTheme();
   const roomName = useRoomName();
 
   return (
-    <div className="ml-3 mt-1 truncate font-normal text-white">
+    <Box
+      sx={{
+        ml: 1,
+        mt: 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: theme.colors.onPrimary,
+      }}
+    >
       {time} | {roomName}
-    </div>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/Toolbar/Toolbar.tsx b/frontend/src/components/MeetingRoom/Toolbar/Toolbar.tsx
index 5a8e4bc47..c11514384 100644
--- a/frontend/src/components/MeetingRoom/Toolbar/Toolbar.tsx
+++ b/frontend/src/components/MeetingRoom/Toolbar/Toolbar.tsx
@@ -4,6 +4,8 @@ import { RightPanelActiveTab } from '@hooks/useRightPanel';
 import isReportIssueEnabled from '@utils/isReportIssueEnabled';
 import useToolbarButtons from '@hooks/useToolbarButtons';
 import useBackgroundPublisherContext from '@hooks/useBackgroundPublisherContext';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 import ScreenSharingButton from '../../ScreenSharingButton';
 import TimeRoomNameMeetingRoom from '../TimeRoomName';
 import ExitButton from '../ExitButton';
@@ -69,6 +71,7 @@ const Toolbar = ({
   participantCount,
   captionsState,
 }: ToolbarProps): ReactElement => {
+  const theme = useTheme();
   const { disconnect, subscriberWrappers } = useSessionContext();
   const { destroyBackgroundPublisher } = useBackgroundPublisherContext();
   const isViewingScreenShare = subscriberWrappers.some((subWrapper) => subWrapper.isScreenshare);
@@ -152,21 +155,38 @@ const Toolbar = ({
   const rightPanelButtons = toolbarButtons.map(displayRightPanelButtons);
   // We display the right panel if we have at least one right panel button to display.
   const displayRightPanel = rightPanelButtons.some((rightPanelButton) => !!rightPanelButton);
-  // We hide the TimeRoomName container when there is no space, and remove its margin when we don't display the right panel container.
-  const displayTimeRoomNameClass = `${!displayRightPanel ? 'mr-3 ' : ''}${!displayTimeRoomName ? 'hidden ' : ''}flex flex-1 justify-start overflow-hidden`;
-  // We hide the right panel buttons container when there are no buttons to display, and grow/shrink it when we display the TimeRoomName container.
-  const rightPanelButtonsClass = `${!displayRightPanel ? 'hidden ' : ''}${displayTimeRoomName ? 'flex-1 ' : ''}ml-3 box-border flex justify-end`;
 
   return (
-    <div
+    <Box
       ref={toolbarRef}
-      className="absolute bottom-0 left-0 flex h-[80px] w-full flex-row items-center justify-between bg-darkGray-100 p-4"
+      sx={{
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        display: 'flex',
+        height: '80px',
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: theme.colors.darkBackground,
+        padding: 2,
+      }}
     >
-      <div ref={timeRoomNameRef} className={displayTimeRoomNameClass}>
+      <Box
+        ref={timeRoomNameRef}
+        sx={{
+          display: displayTimeRoomName ? 'flex' : 'none',
+          flex: 1,
+          justifyContent: 'start',
+          overflow: 'hidden',
+          marginRight: displayRightPanel ? 0 : 1.5,
+        }}
+      >
         {displayTimeRoomName && <TimeRoomNameMeetingRoom />}
-      </div>
-      <div className="flex flex-1 justify-center">
-        <div ref={mediaControlsRef} className="flex flex-row">
+      </Box>
+      <Box sx={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Box ref={mediaControlsRef} sx={{ display: 'flex', flexDirection: 'row' }}>
           <DeviceControlButton
             deviceType="audio"
             toggleBackgroundEffects={toggleBackgroundEffects}
@@ -175,9 +195,9 @@ const Toolbar = ({
             deviceType="video"
             toggleBackgroundEffects={toggleBackgroundEffects}
           />
-        </div>
+        </Box>
         {toolbarButtons.map(displayCenterToolbarButtons)}
-        <div ref={overflowAndExitRef} className="flex flex-row">
+        <Box ref={overflowAndExitRef} sx={{ display: 'flex', flexDirection: 'row' }}>
           {shouldShowOverflowButton && (
             <ToolbarOverflowButton
               isSharingScreen={isSharingScreen}
@@ -187,13 +207,22 @@ const Toolbar = ({
             />
           )}
           <ExitButton handleLeave={handleLeave} />
-        </div>
-      </div>
+        </Box>
+      </Box>
 
-      <div className={rightPanelButtonsClass} ref={rightPanelControlsRef}>
+      <Box
+        ref={rightPanelControlsRef}
+        sx={{
+          display: displayRightPanel ? 'flex' : 'none',
+          flex: displayTimeRoomName ? 1 : 'initial',
+          marginLeft: 1.5,
+          boxSizing: 'border-box',
+          justifyContent: 'end',
+        }}
+      >
         {rightPanelButtons}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx
index ba37bad7b..67f856682 100644
--- a/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx
+++ b/frontend/src/components/MeetingRoom/ToolbarButton/ToolbarButton.tsx
@@ -1,5 +1,7 @@
-import { IconButton, SxProps } from '@mui/material';
 import { ForwardedRef, forwardRef, ReactElement, MouseEvent, TouchEvent } from 'react';
+import IconButton from '@ui/IconButton';
+import { SxProps } from '@ui/SxProps';
+import useTheme from '@ui/theme';
 
 export type ToolbarButtonProps = {
   onClick:
@@ -27,6 +29,7 @@ const ToolbarButton = forwardRef(function ToolbarButton(
   ref: ForwardedRef<HTMLButtonElement>
 ) {
   const { icon: Icon, sx = {}, isOverflowButton, ...rest } = props;
+  const theme = useTheme();
 
   return (
     <IconButton
@@ -40,9 +43,9 @@ const ToolbarButton = forwardRef(function ToolbarButton(
         marginRight: '12px',
         width: isOverflowButton ? '35px' : '48px',
         height: isOverflowButton ? '35px' : '48px',
-        backgroundColor: 'rgba(60, 64, 67, 0.55)',
+        backgroundColor: theme.colors.darkGrey,
         '&:hover': {
-          backgroundColor: 'rgba(60, 64, 67, 0.42)',
+          backgroundColor: theme.colors.darkGreyOpacity,
         },
         ...sx,
       }}
diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.tsx
index 7dcfb593d..7326946d9 100644
--- a/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.tsx
+++ b/frontend/src/components/MeetingRoom/ToolbarOverflowButton/ToolbarOverflowButton.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, ReactElement, useState, SetStateAction } from 'react';
-import { Tooltip } from '@mui/material';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import Tooltip from '@ui/Tooltip';
+import VividIcon from '@components/VividIcon';
 import { useTranslation } from 'react-i18next';
 import useTheme from '@ui/theme';
 import ToolbarButton from '../ToolbarButton';
@@ -66,9 +66,13 @@ const ToolbarOverflowButton = ({
             id="hidden-toolbar-items"
             onClick={handleButtonToggle}
             icon={
-              <MoreVertIcon
+              <VividIcon
+                name="more-vertical-solid"
+                customSize={-5}
                 sx={{
-                  color: isToolbarOverflowMenuOpen ? theme.colors.background : 'white',
+                  color: isToolbarOverflowMenuOpen
+                    ? theme.colors.onBackground
+                    : theme.colors.background,
                 }}
               />
             }
diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx
index c9a225c06..071cf083d 100644
--- a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.spec.tsx
@@ -1,11 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import { render as renderBase, screen } from '@testing-library/react';
 import { ReactElement, useRef } from 'react';
-import { Button } from '@mui/material';
 import * as util from '@utils/util';
 import isReportIssueEnabled from '@utils/isReportIssueEnabled';
 import { makeAppConfigProviderWrapper } from '@test/providers';
 import ToolbarOverflowMenu, { CaptionsState } from './ToolbarOverflowMenu';
+import Button from '@ui/Button';
 
 vi.mock('@hooks/useSessionContext', () => ({
   default: () => ({
diff --git a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx
index aacfe427d..789f754c8 100644
--- a/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx
+++ b/frontend/src/components/MeetingRoom/ToolbarOverflowMenu/ToolbarOverflowMenu.tsx
@@ -1,4 +1,3 @@
-import { ClickAwayListener, Portal, Box, Grow } from '@mui/material';
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import ArchivingButton from '../ArchivingButton';
 import CaptionsButton from '../CaptionsButton';
@@ -11,6 +10,11 @@ import useSessionContext from '../../../hooks/useSessionContext';
 import ScreenSharingButton from '../../ScreenSharingButton';
 import getOverflowMenuButtons from '../../../utils/getOverflowMenuButtons';
 import isReportIssueEnabled from '../../../utils/isReportIssueEnabled';
+import Box from '@ui/Box';
+import ClickAwayListener from '@ui/ClickAwayListener';
+import Grow from '@ui/Grow';
+import Portal from '@ui/Portal';
+import useTheme from '@ui/theme';
 
 export type CaptionsState = {
   isUserCaptionsEnabled: boolean;
@@ -65,6 +69,7 @@ const ToolbarOverflowMenu = ({
   const participantCount =
     subscriberWrappers.filter(({ isScreenshare }) => !isScreenshare).length + 1;
   const isPinningPresent = subscriberWrappers.some((subWrapper) => subWrapper.isPinned);
+  const theme = useTheme();
 
   const closeMenuWrapper = (onClick?: () => void) => () => {
     if (onClick) {
@@ -133,8 +138,8 @@ const ToolbarOverflowMenu = ({
           <Box
             data-testid="toolbar-overflow-menu"
             sx={{
-              backgroundColor: '#272c2f',
-              color: '#fff',
+              backgroundColor: theme.colors.darkGreyOpacity,
+              color: theme.colors.onDarkGrey,
               padding: { xs: 1 },
               borderRadius: 2,
               zIndex: 1,
diff --git a/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.spec.tsx b/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.spec.tsx
index 6eef5b409..547d1f523 100644
--- a/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.spec.tsx
+++ b/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.spec.tsx
@@ -1,6 +1,6 @@
 import { describe, it, vi, expect, Mock, beforeEach } from 'vitest';
 import { render as renderBase, screen } from '@testing-library/react';
-import BiotechIcon from '@mui/icons-material/Biotech';
+import VividIcon from '@components/VividIcon';
 import { ReactElement } from 'react';
 import useSessionContext from '@hooks/useSessionContext';
 import { SessionContextType } from '@Context/SessionProvider/session';
@@ -14,7 +14,9 @@ const mockUseSessionContext = useSessionContext as Mock<[], SessionContextType>;
 const sessionContext = {
   unreadCount: 0,
 } as unknown as SessionContextType;
-const LittleButton = () => <ToolbarButton onClick={() => {}} icon={<BiotechIcon />} />;
+const LittleButton = () => (
+  <ToolbarButton onClick={() => {}} icon={<VividIcon name="chat-solid" customSize={-6} />} />
+);
 
 describe('UnreadMessagesBadge', () => {
   beforeEach(() => {
diff --git a/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.tsx b/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.tsx
index 37f264c8d..944d5afba 100644
--- a/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.tsx
+++ b/frontend/src/components/MeetingRoom/UnreadMessagesBadge/UnreadMessagesBadge.tsx
@@ -1,7 +1,8 @@
-import { Badge } from '@mui/material';
+import Badge from '@ui/Badge';
 import { ForwardedRef, forwardRef, ReactElement } from 'react';
 import useSessionContext from '@hooks/useSessionContext';
 import useIsMeetingChatAllowed from '@Context/AppConfig/hooks/useIsMeetingChatAllowed';
+import useTheme from '@ui/theme';
 
 export type UnreadMessagesBadgeProps = {
   children: ReactElement;
@@ -22,6 +23,7 @@ const UnreadMessagesBadge = forwardRef(function UnreadMessagesBadge(
   ref: ForwardedRef<HTMLSpanElement>
 ) {
   const isMeetingChatAllowed = useIsMeetingChatAllowed();
+  const theme = useTheme();
 
   const { children, isToolbarOverflowMenuOpen, ...rest } = props;
   const { unreadCount } = useSessionContext();
@@ -36,8 +38,8 @@ const UnreadMessagesBadge = forwardRef(function UnreadMessagesBadge(
       invisible={isInvisible}
       sx={{
         '& .MuiBadge-badge': {
-          color: 'white',
-          backgroundColor: '#FA7B17',
+          color: theme.colors.onWarning,
+          backgroundColor: theme.colors.warning,
         },
         marginRight: '12px',
       }}
diff --git a/frontend/src/components/MeetingRoom/VideoDevices/VideoDevices.tsx b/frontend/src/components/MeetingRoom/VideoDevices/VideoDevices.tsx
index 56bc88e8b..2874a19ea 100644
--- a/frontend/src/components/MeetingRoom/VideoDevices/VideoDevices.tsx
+++ b/frontend/src/components/MeetingRoom/VideoDevices/VideoDevices.tsx
@@ -1,7 +1,4 @@
 import { useState, useEffect, MouseEvent, ReactElement } from 'react';
-import { Box, MenuItem, MenuList, Typography } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
-import VideocamIcon from '@mui/icons-material/Videocam';
 import { Device } from '@vonage/client-sdk-video';
 import { useTranslation } from 'react-i18next';
 import useAppConfig from '@Context/AppConfig/hooks/useAppConfig';
@@ -10,6 +7,11 @@ import useDevices from '../../../hooks/useDevices';
 import usePublisherContext from '../../../hooks/usePublisherContext';
 import { setStorageItem, STORAGE_KEYS } from '../../../utils/storage';
 import cleanAndDedupeDeviceLabels from '../../../utils/cleanAndDedupeDeviceLabels';
+import Box from '@ui/Box';
+import Typography from '@ui/Typography';
+import MenuList from '@ui/MenuList';
+import MenuItem from '@ui/MenuItem';
+import VividIcon from '@components/VividIcon';
 
 export type VideoDevicesProps = {
   handleToggle: () => void;
@@ -76,10 +78,11 @@ const VideoDevices = ({ handleToggle }: VideoDevicesProps): ReactElement | false
             ml: 2,
             mt: 1,
             mb: 0.5,
+            color: theme.colors.tertiary,
           }}
         >
-          <VideocamIcon sx={{ fontSize: 24, mr: 2 }} />
-          <Typography>{t('devices.video.camera.full')}</Typography>
+          <VividIcon name="video-line" customSize={-5} />
+          <Typography sx={{ ml: 2 }}>{t('devices.video.camera.full')}</Typography>
         </Box>
         <MenuList id="split-button-menu">
           {options.map((option) => {
@@ -96,26 +99,29 @@ const VideoDevices = ({ handleToggle }: VideoDevicesProps): ReactElement | false
                     color: theme.colors.onBackground,
                   },
                   '&:hover': {
-                    backgroundColor: theme.colors.primaryHover,
+                    backgroundColor: theme.colors.background,
                   },
                 }}
               >
                 <Box
                   key={`${option.deviceId}-video-device`}
                   sx={{
+                    color: isSelected ? theme.colors.textPrimary : theme.colors.textSecondary,
                     display: 'flex',
                     mb: 0.5,
                     overflow: 'hidden',
                   }}
                 >
                   {isSelected ? (
-                    <CheckIcon
-                      sx={{
-                        color: theme.colors.background,
-                        fontSize: 24,
-                        mr: 2,
-                      }}
-                    />
+                    <Box key={'video-devices-check'} sx={{ mr: 2 }}>
+                      <VividIcon
+                        name="check-line"
+                        customSize={-6}
+                        sx={{
+                          color: isSelected ? theme.colors.textPrimary : theme.colors.textSecondary,
+                        }}
+                      />
+                    </Box>
                   ) : (
                     <Box sx={{ width: 40 }} /> // Placeholder when CheckIcon is not displayed
                   )}
diff --git a/frontend/src/components/MeetingRoom/VideoDevicesOptions/VideoDevicesOptions.tsx b/frontend/src/components/MeetingRoom/VideoDevicesOptions/VideoDevicesOptions.tsx
index 7829f00be..2f6de4744 100644
--- a/frontend/src/components/MeetingRoom/VideoDevicesOptions/VideoDevicesOptions.tsx
+++ b/frontend/src/components/MeetingRoom/VideoDevicesOptions/VideoDevicesOptions.tsx
@@ -1,8 +1,10 @@
-import { Typography, MenuList, MenuItem } from '@mui/material';
 import { ReactElement } from 'react';
 import PortraitIcon from '@mui/icons-material/Portrait';
 import { useTranslation } from 'react-i18next';
 import useTheme from '@ui/theme';
+import MenuList from '@ui/MenuList';
+import MenuItem from '@ui/MenuItem';
+import Typography from '@ui/Typography';
 
 export type VideoDevicesOptionsProps = {
   toggleBackgroundEffects: () => void;
@@ -35,7 +37,7 @@ const VideoDevicesOptions = ({
         sx={{
           backgroundColor: 'transparent',
           '&:hover': {
-            backgroundColor: theme.colors.primaryHover,
+            backgroundColor: theme.colors.background,
           },
         }}
       >
diff --git a/frontend/src/components/MeetingRoom/VideoTile/VideoTile.spec.tsx b/frontend/src/components/MeetingRoom/VideoTile/VideoTile.spec.tsx
index c1a1cef77..30d1982c1 100644
--- a/frontend/src/components/MeetingRoom/VideoTile/VideoTile.spec.tsx
+++ b/frontend/src/components/MeetingRoom/VideoTile/VideoTile.spec.tsx
@@ -30,7 +30,6 @@ describe('VideoTile component', () => {
 
     const container = screen.getByTestId('video-tile');
     expect(container).toHaveAttribute('id', 'tile1');
-    expect(container).toHaveClass('absolute', 'm-1', 'flex', 'items-center', 'justify-center');
 
     expect(container).toHaveStyle({
       position: 'absolute',
@@ -46,23 +45,14 @@ describe('VideoTile component', () => {
 
     // hasVideo true means first inner div is visible
     const hasVideoTileDiv = container.querySelector('div > div:first-child')!;
-    expect(hasVideoTileDiv).not.toHaveClass('hidden');
+    expect(hasVideoTileDiv).toHaveStyle({ display: 'block' });
   });
 
   it('hides tile when isHidden is true', () => {
     render(<VideoTile {...defaultProps} isHidden />);
 
     const container = screen.getByTestId('video-tile');
-    expect(container).toHaveClass('hidden');
-  });
-
-  it('applies talking outline classes when isTalking is true', () => {
-    render(<VideoTile {...defaultProps} isTalking />);
-
-    const container = screen.getByTestId('video-tile');
-
-    const hasVideoTileDiv = container.querySelector('div > div:first-child')!;
-    expect(hasVideoTileDiv).toHaveClass('outline', 'outline-2', 'outline-sky-500');
+    expect(container).toHaveStyle({ display: 'none' });
   });
 
   it('shows fallback div when hasVideo is false', () => {
@@ -73,8 +63,8 @@ describe('VideoTile component', () => {
     const hasVideoTileDiv = container.querySelector('div > div:first-child')!;
     const notHasVideoTileDiv = container.querySelector('div > div:last-child')!;
 
-    expect(hasVideoTileDiv).toHaveClass('hidden');
-    expect(notHasVideoTileDiv).not.toHaveClass('hidden');
+    expect(hasVideoTileDiv).toHaveStyle({ display: 'none' });
+    expect(notHasVideoTileDiv).toHaveStyle({ display: 'block' });
   });
 
   it('fires onMouseEnter and onMouseLeave events', () => {
diff --git a/frontend/src/components/MeetingRoom/VideoTile/VideoTile.tsx b/frontend/src/components/MeetingRoom/VideoTile/VideoTile.tsx
index 80c4a7a28..a0772b6c0 100644
--- a/frontend/src/components/MeetingRoom/VideoTile/VideoTile.tsx
+++ b/frontend/src/components/MeetingRoom/VideoTile/VideoTile.tsx
@@ -1,10 +1,12 @@
-import { Box } from 'opentok-layout-js';
+import { Box as LayoutBox } from 'opentok-layout-js';
 import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
 import getBoxStyle from '../../../utils/helpers/getBoxStyle';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 
 export type VideoTileProps = {
   'data-testid': string;
-  box: Box | undefined;
+  box: LayoutBox | undefined;
   children: ReactNode;
   className?: string;
   hasVideo: boolean;
@@ -22,7 +24,7 @@ export type VideoTileProps = {
  * A reusable video tile component for publishers and subscribers.
  * @param {VideoTileProps} props - The props for the component
  *  @property {string} 'data-testid' - Used for testing
- *  @property {Box | undefined} box - Box specifying position and size of tile
+ *  @property {LayoutBox | undefined} box - Box specifying position and size of tile
  *  @property {ReactNode} children - The content to be rendered
  *  @property {string} className - (optional) - the className for the tile
  *  @property {boolean} hasVideo - whether the video has video
@@ -51,27 +53,59 @@ const VideoTile = forwardRef(
     }: VideoTileProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
+    const theme = useTheme();
+
     return (
-      <div
+      <Box
         id={id}
         data-testid={dataTestId}
-        className={`${className ?? ''} absolute m-1 flex items-center justify-center ${isHidden ? 'hidden' : ''} `}
-        style={getBoxStyle(box, isScreenshare)}
+        className={className}
+        sx={{
+          position: 'absolute',
+          margin: 1,
+          display: isHidden ? 'none' : 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...getBoxStyle(box, isScreenshare),
+        }}
         onMouseEnter={() => onMouseEnter?.()}
         onMouseLeave={() => onMouseLeave?.()}
       >
-        <div
-          className={`relative left-0 top-0 size-full overflow-hidden rounded-xl ${isTalking ? 'outline outline-2 outline-sky-500' : ''} ${!hasVideo ? 'hidden' : ''}`}
+        <Box
           ref={ref}
-          style={{
-            backgroundColor: 'rgba(60, 64, 67, 0.55)',
+          sx={{
+            position: 'relative',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: 3,
+            backgroundColor: theme.colors.darkGrey,
+            display: hasVideo ? 'block' : 'none',
+            ...(isTalking && {
+              outline: `2px solid ${theme.colors.information}`,
+            }),
           }}
         />
-        <div
-          className={`relative left-0 top-0 size-full overflow-hidden rounded-xl bg-notVeryGray-100 ${isTalking ? 'outline outline-2 outline-sky-500' : ''} ${hasVideo ? 'hidden' : ''}`}
+        <Box
+          sx={{
+            position: 'relative',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+            borderRadius: 3,
+            backgroundColor: theme.colors.darkGrey,
+            display: hasVideo ? 'none' : 'block',
+            ...(isTalking && {
+              outline: `2px solid ${theme.colors.information}`,
+            }),
+          }}
         />
         {children}
-      </div>
+      </Box>
     );
   }
 );
diff --git a/frontend/src/components/MeetingRoom/VideoTileCanvas/VideoTileCanvas.tsx b/frontend/src/components/MeetingRoom/VideoTileCanvas/VideoTileCanvas.tsx
index b35a52e5e..c0e59c502 100644
--- a/frontend/src/components/MeetingRoom/VideoTileCanvas/VideoTileCanvas.tsx
+++ b/frontend/src/components/MeetingRoom/VideoTileCanvas/VideoTileCanvas.tsx
@@ -1,6 +1,5 @@
 import { ReactElement, useRef } from 'react';
 import { Publisher as OTPublisher } from '@vonage/client-sdk-video';
-import { CircularProgress } from '@mui/material';
 import useLayoutManager from '../../../hooks/useLayoutManager';
 import usePublisherContext from '../../../hooks/usePublisherContext';
 import useSessionContext from '../../../hooks/useSessionContext';
@@ -14,6 +13,8 @@ import useSubscribersInDisplayOrder from '../../../hooks/useSubscribersInDisplay
 import getLayoutBoxes from '../../../utils/helpers/getLayoutBoxes';
 import useActiveSpeaker from '../../../hooks/useActiveSpeaker';
 import useIsSmallViewport from '../../../hooks/useIsSmallViewport';
+import CircularProgress from '@ui/CircularProgress';
+import Box from '@ui/Box';
 
 export type VideoTileCanvasProps = {
   isSharingScreen: boolean;
@@ -85,17 +86,22 @@ const VideoTileCanvas = ({
 
   // Height is 100dvh - toolbar height (80px) and header height (80px) - 24px wrapper margin on small viewport device
   // Height is 100dvh - toolbar height (80px) - 24px wrapper margin on desktop
-  const heightClass = isSmallViewport
-    ? '@apply h-[calc(100dvh_-_184px)]'
-    : '@apply h-[calc(100dvh_-_104px)]';
+  const wrapperHeight = isSmallViewport ? 'calc(100dvh - 184px)' : 'calc(100dvh - 104px)';
 
   // Width is 100vw - 360px panel width - 24px panel right margin - 24px wrapper margin
-  const widthClass = isRightPanelOpen
-    ? '@apply w-[calc(100vw_-_392px)]'
-    : '@apply w-[calc(100vw_-_24px)]';
+  const wrapperWidth = isRightPanelOpen ? 'calc(100vw - 392px)' : 'calc(100vw - 24px)';
+
   return (
-    <div ref={wrapRef} id="wrapper" className={`p-3 ${widthClass} ${heightClass}`}>
-      <div id="video-container" className="relative size-full">
+    <Box
+      ref={wrapRef}
+      id="wrapper"
+      sx={{
+        padding: 3,
+        width: wrapperWidth,
+        height: wrapperHeight,
+      }}
+    >
+      <Box id="video-container" sx={{ position: 'relative', width: '100%', height: '100%' }}>
         {!connected ? (
           <CircularProgress
             data-testid="progress-spinner"
@@ -134,8 +140,8 @@ const VideoTileCanvas = ({
             )}
           </>
         )}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.spec.tsx b/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.spec.tsx
index ca327548e..d7e4a9c2e 100644
--- a/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.spec.tsx
+++ b/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.spec.tsx
@@ -23,7 +23,7 @@ describe('ZoomIndicator', () => {
       />
     );
 
-    const icon = screen.getByTestId('ZoomInOutlinedIcon');
+    const icon = screen.getByTestId('vivid-icon-zoom-in-solid');
     const mainButton = screen.getByTestId('zoom-indicator-button');
 
     expect(icon).toBeInTheDocument();
@@ -77,7 +77,7 @@ describe('ZoomIndicator', () => {
       />
     );
 
-    const zoomOutIcon = screen.getByTestId('ZoomOutOutlinedIcon');
+    const zoomOutIcon = screen.getByTestId('vivid-icon-zoom-out-solid');
     const zoomLevelText = screen.getByTestId('zoom-level');
     const zoomOutButton = screen.getByTestId('zoom-out-button');
     const zoomInButton = screen.getByTestId('zoom-in-button');
@@ -96,12 +96,12 @@ describe('ZoomIndicator', () => {
       />
     );
 
-    expect(screen.queryByTestId('ZoomOutOutlinedIcon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('vivid-icon-zoom-out-solid')).not.toBeInTheDocument();
     expect(screen.queryByTestId('zoom-level')).not.toBeInTheDocument();
     expect(screen.queryByTestId('zoom-out-button')).not.toBeInTheDocument();
     expect(screen.queryByTestId('zoom-in-button')).not.toBeInTheDocument();
 
-    const zoomInIcon = screen.getByTestId('ZoomInOutlinedIcon');
+    const zoomInIcon = screen.getByTestId('vivid-icon-zoom-in-solid');
     expect(zoomInIcon).toBeInTheDocument();
   });
 
diff --git a/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.tsx b/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.tsx
index f650f1b08..d76f89e2a 100644
--- a/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.tsx
+++ b/frontend/src/components/MeetingRoom/ZoomIndicator/ZoomIndicator.tsx
@@ -1,8 +1,12 @@
-import { ZoomInOutlined, ZoomOutOutlined, Add, Remove } from '@mui/icons-material';
-import { IconButton, Tooltip } from '@mui/material';
 import { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MAX_ZOOM, MIN_ZOOM } from '../../../utils/constants';
+import Tooltip from '@ui/Tooltip';
+import IconButton from '@ui/IconButton';
+import Box from '@ui/Box';
+import Typography from '@ui/Typography';
+import useTheme from '@ui/theme';
+import VividIcon from '@components/VividIcon';
 
 export type ZoomIndicatorProps = {
   zoomLevel: number;
@@ -33,6 +37,7 @@ const ZoomIndicator = ({
   const isZoomed = zoomLevel !== 1;
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const { t } = useTranslation();
+  const theme = useTheme();
 
   // Check if we can zoom in/out more
   const canZoomIn = zoomLevel < MAX_ZOOM;
@@ -50,9 +55,22 @@ const ZoomIndicator = ({
   };
 
   return (
-    <div className="absolute bottom-3 right-3 flex items-center gap-1 rounded-xl bg-darkGray-55 px-2 py-1 text-sm text-white">
+    <Box
+      sx={{
+        position: 'absolute',
+        bottom: 4,
+        right: 8,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        borderRadius: theme.shapes.borderRadiusLarge,
+        backgroundColor: theme.colors.darkGreyOpacity,
+        p: 0.75,
+      }}
+    >
       {/* Main zoom indicator button */}
       <Tooltip
+        arrow
         title={isZoomed ? t('zoom.reset') : t('zoom.start')}
         open={tooltipOpen}
         onOpen={() => setTooltipOpen(true)}
@@ -62,68 +80,83 @@ const ZoomIndicator = ({
           onClick={handleMainClick}
           data-testid="zoom-indicator-button"
           onMouseLeave={() => setTooltipOpen(false)}
+          sx={{
+            ml: isZoomed ? 0 : 1,
+          }}
         >
           {isZoomed ? (
-            <ZoomOutOutlined sx={{ fontSize: '18px', color: 'white' }} />
+            <VividIcon
+              customSize={-6}
+              name="zoom-out-solid"
+              sx={{ color: theme.colors.onDarkGrey }}
+            />
           ) : (
-            <ZoomInOutlined sx={{ fontSize: '18px', color: 'white' }} />
+            <VividIcon
+              customSize={-6}
+              name="zoom-in-solid"
+              sx={{ color: theme.colors.onDarkGrey }}
+            />
           )}
         </IconButton>
       </Tooltip>
 
       {/* Zoom controls */}
-      <div className="flex items-center gap-0">
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0 }}>
         {isZoomed && (
           <>
-            <Tooltip title={t('zoom.out')}>
-              <span>
+            <Tooltip arrow title={t('zoom.out')}>
+              <Box component="span">
                 <IconButton
                   onClick={zoomOut}
                   disabled={!canZoomOut}
                   data-testid="zoom-out-button"
                   sx={{
-                    padding: '4px',
-                    color: 'white',
+                    p: 0.5,
+                    color: theme.colors.onDarkGrey,
                     '&:disabled': {
-                      color: 'rgba(255, 255, 255, 0.3)',
+                      color: theme.colors.disabled,
                     },
                   }}
                 >
-                  <Remove sx={{ fontSize: '16px', color: 'inherit' }} />
+                  <VividIcon customSize={-6} name="minus-solid" />
                 </IconButton>
-              </span>
+              </Box>
             </Tooltip>
-            <Tooltip title={t('zoom.in')}>
-              <span>
+
+            {/* Zoom percentage display */}
+            {isZoomed && (
+              <Tooltip arrow title={t('zoom.current')}>
+                <Typography
+                  component="span"
+                  sx={{ mx: 1, cursor: 'default', color: theme.colors.onDarkGrey }}
+                  data-testid="zoom-level"
+                >
+                  {Math.round(zoomLevel * 100)}%
+                </Typography>
+              </Tooltip>
+            )}
+            <Tooltip arrow title={t('zoom.in')}>
+              <Box component="span">
                 <IconButton
                   onClick={zoomIn}
                   disabled={!canZoomIn}
                   data-testid="zoom-in-button"
                   sx={{
-                    padding: '4px',
-                    color: 'white',
+                    p: 0.5,
+                    color: theme.colors.onDarkGrey,
                     '&:disabled': {
-                      color: 'rgba(255, 255, 255, 0.3)',
+                      color: theme.colors.disabled,
                     },
                   }}
                 >
-                  <Add sx={{ fontSize: '16px', color: 'inherit' }} />
+                  <VividIcon customSize={-6} name="plus-solid" />
                 </IconButton>
-              </span>
+              </Box>
             </Tooltip>
           </>
         )}
-
-        {/* Zoom percentage display */}
-        {isZoomed && (
-          <Tooltip title={t('zoom.current')}>
-            <span className="mx-1 cursor-default" data-testid="zoom-level">
-              {Math.round(zoomLevel * 100)}%
-            </span>
-          </Tooltip>
-        )}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/MutedAlert/MutedAlert.tsx b/frontend/src/components/MutedAlert/MutedAlert.tsx
index cdcada251..2178f8e0d 100644
--- a/frontend/src/components/MutedAlert/MutedAlert.tsx
+++ b/frontend/src/components/MutedAlert/MutedAlert.tsx
@@ -1,6 +1,6 @@
-import Fade from '@mui/material/Fade';
+import Fade from '@ui/Fade';
+import Alert from '@ui/Alert';
 import { useState, useEffect, ReactElement } from 'react';
-import { Alert } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import useSpeakingDetector from '../../hooks/useSpeakingDetector';
 import usePublisherContext from '../../hooks/usePublisherContext';
diff --git a/frontend/src/components/Publisher/Publisher.tsx b/frontend/src/components/Publisher/Publisher.tsx
index 9cdf60222..2e99be1e8 100644
--- a/frontend/src/components/Publisher/Publisher.tsx
+++ b/frontend/src/components/Publisher/Publisher.tsx
@@ -7,6 +7,7 @@ import AvatarInitials from '../AvatarInitials';
 import NameDisplay from '../MeetingRoom/NameDisplay';
 import AudioIndicator from '../MeetingRoom/AudioIndicator';
 import VideoTile from '../MeetingRoom/VideoTile';
+import useTheme from '@ui/theme';
 
 export type PublisherProps = {
   box: Box;
@@ -29,28 +30,41 @@ const Publisher = ({ box }: PublisherProps): ReactElement => {
     isAudioEnabled,
   } = usePublisherContext();
   const audioLevel = useAudioLevels();
+  const theme = useTheme();
   // We store this in a ref to get a reference to the div so that we can append a video to it
   const pubContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (element && pubContainerRef.current) {
-      element.classList.add(
-        'video__element',
-        'w-full',
-        'h-full',
-        'absolute',
-        'rounded-xl',
-        'object-contain',
-        'origin-[50%_50%]', // since we have disabled default UI, we need to mirror the publisher
-        '-scale-x-100'
-      );
+      element.classList.add('video__element');
+
+      // Apply MUI-style inline styles instead of Tailwind classes
+      element.style.width = '100%';
+      element.style.height = '100%';
+      element.style.position = 'absolute';
+      element.style.borderRadius = theme.shapes.borderRadiusLarge;
+      element.style.objectFit = 'contain';
+      element.style.transformOrigin = '50% 50%'; // origin-[50%_50%]
+      element.style.transform = 'scaleX(-1)'; // -scale-x-100 (mirror the publisher)
+
       pubContainerRef.current.appendChild(element);
     }
   }, [element]);
 
   const initials = publisher?.stream?.initials;
   const username = publisher?.stream?.name ?? '';
-  const audioIndicatorStyle =
-    'rounded-xl absolute top-3 right-3 bg-darkGray-55 h-6 w-6 items-center justify-center flex m-auto';
+  const audioIndicatorStyle: React.CSSProperties = {
+    borderRadius: theme.shapes.borderRadiusLarge,
+    position: 'absolute',
+    top: '0.75rem',
+    right: '0.75rem',
+    backgroundColor: theme.colors.darkBackground,
+    height: '1.5rem',
+    width: '1.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 'auto',
+  };
 
   return (
     <VideoTile
@@ -79,7 +93,7 @@ const Publisher = ({ box }: PublisherProps): ReactElement => {
         <AudioIndicator
           hasAudio={isAudioEnabled}
           indicatorStyle={audioIndicatorStyle}
-          indicatorColor="white"
+          indicatorColor={theme.colors.surface}
         />
       )}
       <NameDisplay name={username} containerWidth={box.width} />
diff --git a/frontend/src/components/ScreenShareNameDisplay/ScreenShareNameDisplay.tsx b/frontend/src/components/ScreenShareNameDisplay/ScreenShareNameDisplay.tsx
index 965deef5b..346f30a58 100644
--- a/frontend/src/components/ScreenShareNameDisplay/ScreenShareNameDisplay.tsx
+++ b/frontend/src/components/ScreenShareNameDisplay/ScreenShareNameDisplay.tsx
@@ -1,4 +1,5 @@
-import { Chip } from '@mui/material';
+import useTheme from '@ui/theme';
+import Chip from '@ui/Chip';
 import { Box } from 'opentok-layout-js';
 import { ReactElement } from 'react';
 
@@ -15,17 +16,24 @@ export type ScreenShareNameDisplayProps = {
  * @returns {ReactElement} The ScreenShareNameDisplay component.
  */
 const ScreenShareNameDisplay = ({ name, box }: ScreenShareNameDisplayProps): ReactElement => {
+  const theme = useTheme();
   const safeMaxWidth = typeof box.width === 'number' && Number.isFinite(box.width) ? box.width : 0;
+
   return (
     <Chip
       label={name}
       size="small"
       sx={{
-        color: 'white',
-        backgroundColor: 'rgba(60, 64, 67, 0.55)',
+        position: 'absolute',
+        bottom: '10px',
+        left: '10px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        color: theme.colors.onDarkGrey,
+        backgroundColor: theme.colors.darkGreyOpacity,
         maxWidth: Math.max(0, safeMaxWidth - 32),
       }}
-      className="absolute bottom-[10px] left-[10px] truncate text-sm md:text-lg"
     />
   );
 };
diff --git a/frontend/src/components/ScreenSharingButton/ScreenSharingButton.spec.tsx b/frontend/src/components/ScreenSharingButton/ScreenSharingButton.spec.tsx
index a37f3dc97..393f59034 100644
--- a/frontend/src/components/ScreenSharingButton/ScreenSharingButton.spec.tsx
+++ b/frontend/src/components/ScreenSharingButton/ScreenSharingButton.spec.tsx
@@ -15,7 +15,7 @@ describe('ScreenSharingButton', () => {
 
   it('renders the share screen button', () => {
     render(<ScreenSharingButton {...defaultProps} />);
-    expect(screen.getByTestId('ScreenShareIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('vivid-icon-screen-share-solid')).toBeInTheDocument();
 
     const button = screen.getByRole('button');
     button.click();
@@ -24,7 +24,7 @@ describe('ScreenSharingButton', () => {
 
   it('renders the share screen off button', () => {
     render(<ScreenSharingButton {...defaultProps} isSharingScreen />);
-    expect(screen.getByTestId('StopScreenShareIcon')).toBeInTheDocument();
+    expect(screen.getByTestId('vivid-icon-screen-share-off-solid')).toBeInTheDocument();
 
     const button = screen.getByRole('button');
     button.click();
diff --git a/frontend/src/components/ScreenSharingButton/ScreenSharingButton.tsx b/frontend/src/components/ScreenSharingButton/ScreenSharingButton.tsx
index d195c1b34..6330dce22 100644
--- a/frontend/src/components/ScreenSharingButton/ScreenSharingButton.tsx
+++ b/frontend/src/components/ScreenSharingButton/ScreenSharingButton.tsx
@@ -1,12 +1,12 @@
-import ScreenOff from '@mui/icons-material/StopScreenShare';
-import ScreenShare from '@mui/icons-material/ScreenShare';
-import Tooltip from '@mui/material/Tooltip';
+import Tooltip from '@ui/Tooltip';
 import { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useAppConfig from '@Context/AppConfig/hooks/useAppConfig';
 import { isMobile } from '@utils/util';
 import ToolbarButton from '../MeetingRoom/ToolbarButton';
 import PopupDialog, { DialogTexts } from '../MeetingRoom/PopupDialog';
+import VividIcon from '@components/VividIcon';
+import useTheme from '@ui/theme';
 
 export type ScreenShareButtonProps = {
   toggleScreenShare: () => void;
@@ -36,6 +36,7 @@ const ScreenSharingButton = ({
     ({ meetingRoomSettings }) => meetingRoomSettings.allowScreenShare
   );
   const { t } = useTranslation();
+  const theme = useTheme();
   const title = isSharingScreen ? t('screenSharing.title.stop') : t('screenSharing.title.start');
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
@@ -71,14 +72,23 @@ const ScreenSharingButton = ({
             data-testid="screensharing-button"
             icon={
               !isSharingScreen ? (
-                <ScreenShare className="text-white" />
+                <VividIcon
+                  name="screen-share-solid"
+                  customSize={-5}
+                  sx={{ color: theme.colors.onSecondary }}
+                />
               ) : (
-                <ScreenOff className="text-red-500" />
+                <VividIcon
+                  name="screen-share-off-solid"
+                  customSize={-5}
+                  sx={{ color: theme.colors.onSecondary }}
+                />
               )
             }
             sx={{
               marginTop: isOverflowButton ? '0px' : '4px',
               marginLeft: isOverflowButton ? '12px' : '0px',
+              backgroundColor: isSharingScreen ? `${theme.colors.onSecondary}55` : '',
             }}
             isOverflowButton={isOverflowButton}
           />
diff --git a/frontend/src/components/SoundTest/SoundTest.spec.tsx b/frontend/src/components/SoundTest/SoundTest.spec.tsx
index 7031eabbb..f3d015226 100644
--- a/frontend/src/components/SoundTest/SoundTest.spec.tsx
+++ b/frontend/src/components/SoundTest/SoundTest.spec.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, vi, Mock, afterAll } from 'vitest';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import SportsFootballIcon from '@mui/icons-material/SportsFootball';
+import VividIcon from '@components/VividIcon';
 import SoundTest from './SoundTest';
 import useAudioOutputContext from '../../hooks/useAudioOutputContext';
 import { AudioOutputContextType, AudioOutputProvider } from '../../Context/AudioOutputProvider';
@@ -60,7 +60,7 @@ describe('SoundTest', () => {
     render(
       <AudioOutputProvider>
         <SoundTest>
-          <SportsFootballIcon />
+          <VividIcon name="hearing-line" customSize={-5} />
         </SoundTest>
       </AudioOutputProvider>
     );
@@ -74,7 +74,7 @@ describe('SoundTest', () => {
     render(
       <AudioOutputProvider>
         <SoundTest>
-          <SportsFootballIcon />
+          <VividIcon name="hearing-line" customSize={-5} />
         </SoundTest>
       </AudioOutputProvider>
     );
@@ -103,7 +103,7 @@ describe('SoundTest', () => {
     render(
       <AudioOutputProvider>
         <SoundTest>
-          <SportsFootballIcon />
+          <VividIcon name="hearing-line" customSize={-5} />
         </SoundTest>
       </AudioOutputProvider>
     );
@@ -116,7 +116,7 @@ describe('SoundTest', () => {
     render(
       <AudioOutputProvider>
         <SoundTest>
-          <SportsFootballIcon />
+          <VividIcon name="hearing-line" customSize={-5} />
         </SoundTest>
       </AudioOutputProvider>
     );
@@ -140,7 +140,7 @@ describe('SoundTest', () => {
     render(
       <AudioOutputProvider>
         <SoundTest>
-          <SportsFootballIcon />
+          <VividIcon name="hearing-line" customSize={-5} />
         </SoundTest>
       </AudioOutputProvider>
     );
@@ -158,7 +158,7 @@ describe('SoundTest', () => {
     render(
       <AudioOutputProvider>
         <SoundTest>
-          <SportsFootballIcon />
+          <VividIcon name="hearing-line" customSize={-5} />
         </SoundTest>
       </AudioOutputProvider>
     );
diff --git a/frontend/src/components/SoundTest/SoundTest.tsx b/frontend/src/components/SoundTest/SoundTest.tsx
index 6e9da7019..c3ebdc86e 100644
--- a/frontend/src/components/SoundTest/SoundTest.tsx
+++ b/frontend/src/components/SoundTest/SoundTest.tsx
@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next';
 import ClickAwayListener from '@ui/ClickAwayListener';
 import MenuItem from '@ui/MenuItem';
 import useAudioOutputContext from '../../hooks/useAudioOutputContext';
+import Typography from '@ui/Typography';
+import useTheme from '@ui/theme';
 
 export type SoundTestProps = {
   children: ReactElement;
@@ -18,6 +20,7 @@ export type SoundTestProps = {
  */
 const SoundTest = ({ children }: SoundTestProps): ReactElement => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const [audioIsPlaying, setAudioIsPlaying] = useState(false);
   const audioElement = useMemo(() => new Audio('/sound.mp3'), []);
   const { currentAudioOutputDevice } = useAudioOutputContext();
@@ -47,9 +50,19 @@ const SoundTest = ({ children }: SoundTestProps): ReactElement => {
 
   return (
     <ClickAwayListener onClickAway={() => stopAudio()}>
-      <MenuItem onClick={handlePlayAudio} data-testid="soundTest">
+      <MenuItem
+        onClick={handlePlayAudio}
+        data-testid="soundTest"
+        sx={{
+          '&:hover': {
+            backgroundColor: theme.colors.background,
+          },
+        }}
+      >
         {children}
-        {!audioIsPlaying ? t('soundTest.start') : t('soundTest.stop')}
+        <Typography variant="body1">
+          {!audioIsPlaying ? t('soundTest.start') : t('soundTest.stop')}
+        </Typography>
       </MenuItem>
     </ClickAwayListener>
   );
diff --git a/frontend/src/components/Subscriber/Subscriber.spec.tsx b/frontend/src/components/Subscriber/Subscriber.spec.tsx
index 6b0068618..fb778f43c 100644
--- a/frontend/src/components/Subscriber/Subscriber.spec.tsx
+++ b/frontend/src/components/Subscriber/Subscriber.spec.tsx
@@ -134,9 +134,9 @@ describe('Subscriber', () => {
     );
 
     const subscriberContainer = screen.getByTestId(`subscriber-container-${mockedSubscriberId}`);
-    expect(screen.queryByTestId('PushPinIcon')).toBeVisible();
+    expect(screen.getByTestId('vivid-icon-pin-2-solid')).toBeVisible();
     await act(() => userEvent.hover(subscriberContainer));
-    expect(screen.getByTestId('PushPinOffIcon')).toBeVisible();
+    expect(screen.getByTestId('vivid-icon-pin-2-off-solid')).toBeVisible();
   });
 
   it('should not render pin icon when screenshare subscriber is hovered', () => {
diff --git a/frontend/src/components/Subscriber/Subscriber.tsx b/frontend/src/components/Subscriber/Subscriber.tsx
index a4a249f3c..af115f14f 100644
--- a/frontend/src/components/Subscriber/Subscriber.tsx
+++ b/frontend/src/components/Subscriber/Subscriber.tsx
@@ -11,6 +11,7 @@ import PinButton from '../MeetingRoom/PinButton';
 import useSessionContext from '../../hooks/useSessionContext';
 import isMouseEventInsideBox from '../../utils/isMouseEventInsideBox';
 import ScreenshareVideoTile from '../MeetingRoom/ScreenshareVideoTile';
+import useTheme from '@ui/theme';
 
 export type SubscriberProps = {
   subscriberWrapper: SubscriberWrapper;
@@ -38,6 +39,7 @@ const Subscriber = ({
   isActiveSpeaker,
 }: SubscriberProps): ReactElement => {
   const { isMaxPinned, pinSubscriber } = useSessionContext();
+  const theme = useTheme();
   const { isPinned, subscriber } = subscriberWrapper;
   const isScreenShare = subscriber?.stream?.videoType === 'screen';
   const subRef = useRef<HTMLDivElement>(null);
@@ -55,14 +57,15 @@ const Subscriber = ({
       const { element } = subscriberWrapper;
       // eslint-disable-next-line react-hooks/immutability
       element.id = subscriberWrapper.id;
-      element.classList.add(
-        'video__element',
-        'w-full',
-        'h-full',
-        'absolute',
-        'rounded-xl',
-        'object-contain'
-      );
+      element.classList.add('video__element');
+
+      // Apply MUI-style inline styles instead of Tailwind classes
+      element.style.width = '100%';
+      element.style.height = '100%';
+      element.style.position = 'absolute';
+      element.style.borderRadius = theme.shapes.borderRadiusLarge;
+      element.style.objectFit = 'contain';
+
       subRef.current.appendChild(element);
     }
   }, [subscriberWrapper, isScreenShare]);
@@ -88,8 +91,19 @@ const Subscriber = ({
   const initials = subscriberWrapper.subscriber?.stream?.initials;
   const username = subscriberWrapper.subscriber?.stream?.name ?? '';
   const hasAudio = subscriberWrapper.subscriber.stream?.hasAudio;
-  const audioIndicatorStyle =
-    'rounded-xl absolute top-3 right-3 bg-darkGray-55 h-6 w-6 items-center justify-center flex m-auto';
+  const audioIndicatorStyle: React.CSSProperties = {
+    borderRadius: theme.shapes.borderRadiusLarge,
+    position: 'absolute',
+    top: '0.75rem',
+    right: '0.75rem',
+    backgroundColor: theme.colors.darkBackground,
+    height: '1.5rem',
+    width: '1.5rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 'auto',
+  };
 
   return isScreenShare ? (
     <ScreenshareVideoTile
@@ -127,7 +141,7 @@ const Subscriber = ({
         hasAudio={hasAudio}
         stream={subscriber.stream}
         indicatorStyle={audioIndicatorStyle}
-        indicatorColor="white"
+        indicatorColor={theme.colors.surface}
         participantName={username}
       />
 
diff --git a/frontend/src/components/WaitingRoom/CameraButton/CameraButton.tsx b/frontend/src/components/WaitingRoom/CameraButton/CameraButton.tsx
index 899495b34..599101fcf 100644
--- a/frontend/src/components/WaitingRoom/CameraButton/CameraButton.tsx
+++ b/frontend/src/components/WaitingRoom/CameraButton/CameraButton.tsx
@@ -55,7 +55,7 @@ const CameraButton = (): ReactElement | false => {
               '&:hover': {
                 backgroundColor: isVideoEnabled
                   ? `${theme.colors.onSecondary}99`
-                  : `${theme.colors.alertBackground}DC`,
+                  : `${theme.colors.alertBackgroundHover}`,
               },
             }}
             icon={
diff --git a/frontend/src/components/WaitingRoom/MicButton/MicButton.tsx b/frontend/src/components/WaitingRoom/MicButton/MicButton.tsx
index de6918d3e..1d894c181 100644
--- a/frontend/src/components/WaitingRoom/MicButton/MicButton.tsx
+++ b/frontend/src/components/WaitingRoom/MicButton/MicButton.tsx
@@ -50,7 +50,7 @@ const MicButton = (): ReactElement | false => {
               '&:hover': {
                 backgroundColor: isAudioEnabled
                   ? `${theme.colors.onSecondary}99`
-                  : `${theme.colors.alertBackground}DC`,
+                  : `${theme.colors.alertBackgroundHover}`,
               },
             }}
             icon={
diff --git a/frontend/src/pages/MeetingRoom/MeetingRoom.tsx b/frontend/src/pages/MeetingRoom/MeetingRoom.tsx
index 2afc5a925..91cbd7e8f 100644
--- a/frontend/src/pages/MeetingRoom/MeetingRoom.tsx
+++ b/frontend/src/pages/MeetingRoom/MeetingRoom.tsx
@@ -1,6 +1,8 @@
 import { useEffect, ReactElement, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import Box from '@ui/Box';
+import useTheme from '@ui/theme';
 import usePublisherContext from '../../hooks/usePublisherContext';
 import ConnectionAlert from '../../components/MeetingRoom/ConnectionAlert';
 import Toolbar from '../../components/MeetingRoom/Toolbar';
@@ -20,8 +22,6 @@ import useBackgroundPublisherContext from '../../hooks/useBackgroundPublisherCon
 import { DEVICE_ACCESS_STATUS } from '../../utils/constants';
 import type { PublishingErrorType } from '../../Context/PublisherProvider/usePublisher/usePublisher';
 
-const height = '@apply h-[calc(100dvh_-_80px)]';
-
 /**
  * MeetingRoom Component
  *
@@ -33,6 +33,7 @@ const height = '@apply h-[calc(100dvh_-_80px)]';
  */
 const MeetingRoom = (): ReactElement => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const roomName = useRoomName();
   const { publisher, publish, quality, initializeLocalPublisher, publishingError, isVideoEnabled } =
     usePublisherContext();
@@ -115,7 +116,14 @@ const MeetingRoom = (): ReactElement => {
   useRedirectOnSubscriberError(subscriptionError);
 
   return (
-    <div data-testid="meetingRoom" className={`${height} w-screen bg-darkGray-100`}>
+    <Box
+      data-testid="meetingRoom"
+      sx={{
+        height: 'calc(100dvh - 80px)',
+        width: '100vw',
+        backgroundColor: theme.colors.darkBackground,
+      }}
+    >
       {isSmallViewport && <SmallViewportHeader />}
       <VideoTileCanvas
         isSharingScreen={isSharingScreen}
@@ -160,7 +168,7 @@ const MeetingRoom = (): ReactElement => {
           severity="warning"
         />
       )}
-    </div>
+    </Box>
   );
 };
 
diff --git a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Electron-linux.png b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Electron-linux.png
index f40516f0a..34269454a 100644
Binary files a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Electron-linux.png and b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Electron-linux.png differ
diff --git a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Google-Chrome-Fake-Devices-linux.png b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Google-Chrome-Fake-Devices-linux.png
index 8b1854fbb..a218dacb9 100644
Binary files a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Google-Chrome-Fake-Devices-linux.png and b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Google-Chrome-Fake-Devices-linux.png differ
diff --git a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Microsoft-Edge-linux.png b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Microsoft-Edge-linux.png
index 8b1854fbb..a218dacb9 100644
Binary files a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Microsoft-Edge-linux.png and b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Microsoft-Edge-linux.png differ
diff --git a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Mobile-Chrome-linux.png b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Mobile-Chrome-linux.png
index 059b45831..7455aa122 100644
Binary files a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Mobile-Chrome-linux.png and b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Mobile-Chrome-linux.png differ
diff --git a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Opera-linux.png b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Opera-linux.png
index 8b1854fbb..a218dacb9 100644
Binary files a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Opera-linux.png and b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-Opera-linux.png differ
diff --git a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-firefox-linux.png b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-firefox-linux.png
index 5e3b679f0..453589f7b 100644
Binary files a/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-firefox-linux.png and b/integration-tests/tests/visualComparisons.spec.ts-snapshots/Unsupported-browser-page-UI-test-1-firefox-linux.png differ
diff --git a/libs/ui/src/MenuList/MenuList.spec.tsx b/libs/ui/src/MenuList/MenuList.spec.tsx
new file mode 100644
index 000000000..6bfd646d3
--- /dev/null
+++ b/libs/ui/src/MenuList/MenuList.spec.tsx
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import MenuList from './MenuList';
+
+describe('MenuList', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<MenuList />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/libs/ui/src/MenuList/MenuList.story.tsx b/libs/ui/src/MenuList/MenuList.story.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/ui/src/MenuList/MenuList.tsx b/libs/ui/src/MenuList/MenuList.tsx
new file mode 100644
index 000000000..d8a14fc13
--- /dev/null
+++ b/libs/ui/src/MenuList/MenuList.tsx
@@ -0,0 +1,9 @@
+import { MenuList as MUIMenuList, MenuListProps as MUIMenuListProps } from '@mui/material';
+
+type MenuListProps = MUIMenuListProps;
+
+const MenuList = (menuListProps: MenuListProps) => {
+  return <MUIMenuList {...menuListProps} />;
+};
+
+export default MenuList;
diff --git a/libs/ui/src/MenuList/index.ts b/libs/ui/src/MenuList/index.ts
new file mode 100644
index 000000000..dad22af22
--- /dev/null
+++ b/libs/ui/src/MenuList/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './MenuList';
diff --git a/libs/ui/src/theme/helpers/designTokens/tokens/color.ts b/libs/ui/src/theme/helpers/designTokens/tokens/color.ts
index 9f747dfbb..2e590d24f 100644
--- a/libs/ui/src/theme/helpers/designTokens/tokens/color.ts
+++ b/libs/ui/src/theme/helpers/designTokens/tokens/color.ts
@@ -40,6 +40,7 @@ const colorVariables = {
     400: '#292828ff',
     500: '#202124',
   },
+
   alert: {
     50: '#FFEEF2',
     100: '#FEDFDF',
@@ -120,6 +121,7 @@ const lightColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Tertiary color for hover states.',
   },
+
   background: {
     value: colorVariables.cta[50],
     type: 'color',
@@ -146,16 +148,17 @@ const lightColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Background color for alert messages and notifications.',
   },
-  'alert-text': {
-    value: colorVariables.alert[600],
-    type: 'color',
-    description: 'Text color for alert messages and notifications.',
-  },
   'alert-background-hover': {
     value: colorVariables.alert[100],
     type: 'color',
     description: 'Hover background color for alert messages and notifications.',
   },
+  'alert-text': {
+    value: colorVariables.alert[600],
+    type: 'color',
+    description: 'Text color for alert messages and notifications.',
+  },
+
   error: {
     value: colorVariables.alert[500],
     type: 'color',
@@ -226,6 +229,7 @@ const lightColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Color used for borders and dividers between elements.',
   },
+
   'dark-background': {
     value: colorVariables['dark-grey'][500],
     type: 'color',
@@ -304,6 +308,7 @@ const darkColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Secondary color for hover states.',
   },
+
   tertiary: {
     value: colorVariables.accent[400],
     type: 'color',
@@ -324,6 +329,7 @@ const darkColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Tertiary color for hover states.',
   },
+
   background: {
     value: colorVariables.accent[600],
     type: 'color',
@@ -344,6 +350,7 @@ const darkColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Text or icon color used on surface elements.',
   },
+
   'alert-background': {
     value: colorVariables.alert[900],
     type: 'color',
@@ -359,6 +366,7 @@ const darkColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Text color for alert messages and notifications.',
   },
+
   error: {
     value: colorVariables.alert[500],
     type: 'color',
@@ -404,6 +412,7 @@ const darkColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Success color for hover states.',
   },
+
   information: {
     value: colorVariables.information[400],
     type: 'color',
@@ -424,11 +433,13 @@ const darkColors: ThemeTokens['colors'] = {
     type: 'color',
     description: 'Background color for informational messages.',
   },
+
   border: {
     value: colorVariables.accent[500],
     type: 'color',
     description: 'Color used for borders and dividers between elements.',
   },
+
   'dark-background': {
     value: colorVariables['dark-grey'][500],
     type: 'color',
diff --git a/libs/ui/src/theme/helpers/getMuiCustomTheme.ts b/libs/ui/src/theme/helpers/getMuiCustomTheme.ts
index fbe7d1334..a14a57f50 100644
--- a/libs/ui/src/theme/helpers/getMuiCustomTheme.ts
+++ b/libs/ui/src/theme/helpers/getMuiCustomTheme.ts
@@ -130,6 +130,14 @@ const getMuiCustomTheme = ({ tokens }: { tokens: Theme }) => {
           },
         },
       },
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: colors.surface,
+            color: colors.onSurface,
+          },
+        },
+      },
       MuiOutlinedInput: {
         styleOverrides: {
           root: {